وب همیشه در حال بصری تر شدن است. محتوای وب هم بسیار ارزشمند است، اما بهتر است آن محتوا در یک بسته بسته بندی جذاب ارائه شود تا متمایز باشد. گاهی پیش می آید که ما برای جذاب تر کردن سایت خود تلاش زیادی می کنیم اما نا خواسته برخی از رنگ ها بر طراحی سایت ما تأثیر منفی می گذارند.
برای طراحان متخصص این کار مشکل خاصی نیست آن ها کاملاً در تئوری رنگ و روانشناسی رنگ غرق هستند. اما در مورد افرادی که می خواند وب سایت خود را با طبیعت بصری بسازند، این چگونه است؟ درست است که مقالات و مطالب زیادی در مورد چگونگی استفاده از رنگ ها در طراحی وب سایت ها وجود دارد اما گاهی ممکن است با یک انتخاب رنگ غلط یک فاجعه بزرگ رخ دهد. شما باید رنگی را برای وب سایت خود انتخاب کنید که هم در طراحی وب سایت شما برای دکستاپ، هم در طراحی وب سایت موبایلی شما درست عمل کند. در انتخاب رنگ یک وب سایت شناختن رنگ هایی که باید از آن ها اجتناب کنید بسیار مهم تر از رنگ هایی است که باید آن ها را انتخاب کنید.
با این اوصاف از چه رنگ هایی باید در طراحی صفحات وب سایت خود اجتناب کنیم؟
مشکی خالص
بیایید با سیاه شروع کنیم، آن هم سیاه خالص چیزی که در HTML به عنوان #000000 کد گذاری شده است. این رنگ باعث غافلگیر شدن کاربر می شود. صفحات شما نباید به گونه ای باشند که گویی مشکی همه جا را فرا گرفته است. مثلاً نباید متن و اکثر صفحات وب به گونه ای باشد که گویی لباس سیاه بر تن دارد یا آسمان شب سایت را پوشانده است.
البته، مشکی خالص چیزی است که شما در طراحی کم تر به آن فکر می کنید. در حقیقت رنگ #000000 یا مشکی خالص در واقع یک رنگ غیر طبیعی بوده و در طبیعت وجود ندارد. رنگ سیاه خالص نیاز به جذب همه طیف های نور دارد و این به سادگی در طبیعت اتفاق نمی افتد. رنگ های طبیعی بیشتر ترکیب شده و آرام تر هستند.
بنابراین، سیاه خالص چیزی نیست که چشمان ما به دیدن آن عادت داشته باشد و رنگی خشن است. البته ممکن است در برخی مقالات بخوانید که رنگ سیاه برجسته و جذاب است. سپس با خود بگویید چرا از آن در طراحی وب استفاده نکنیم؟ یا در مقالات روانشناسی رنگ ها بر ارتباط آن با زرق و برق، پیچیدگی، قدرت و اقتدار تأکید کنند. اما آیا این مقالات وقتی استفاده از رنگ سیاه را تشویق می کنند، اشتباه می کنند؟
آن ها اصلاً اشتباه نمیکنند رنگ مشکی می تواند برای برانگیختن برخی تداعی های مثبت قدرتمند در ذهن افراد استفاده شود. اما نکته کلیدی این است که از رنگ مشکی استفاده کنید که مشکی خالص نباشد. از آن جایی که سیاه خالص یک رنگ طبیعی نیست، پردازش آن برای مغز دشوار تر است. رنگ مشکی خود را از #000000 به #111111 یا یک خاکستری بسیار تیره مشابه افزایش دهید و همچنان از مزایای چشم نواز رنگ مشکی بدون اینکه فشار زیادی بر مغز بازدیدکنندگان وارد کنید بهره مند شوید.
رنگ های نئونی نیز، در عین حال که چشم نواز هستند، تمایل دارند که مغز مخاطب را تحت تأثیر قرار دهند و این بر طراحی وب سایت شما اثر منفی خواهد گذاشت. رنگ های نئونی به عنوان رنگ هایی که در طبیعت ظاهر نمی شوند، برای مغز نا آشنا هستند و پردازش آن ها نسبت به رنگ های طبیعی و ترکیبی سخت تر است.
شما می توانید رنگ های نئونی خیره کننده را در برجستگی های گرافیکی استفاده کنید تا به جای عناصر رابط، محتوای بصری شما برجسته شوند. شما می توانید از آن ها برای جذب مخاطب به گرافیک سایت و جلب توجه بازدیدکنندگان به قسمت هایی از صفحه که اطلاعات کلیدی در آن قرار دارند، استفاده کنید. در حقیقت شما باید رنگ های نئونی را از پسزمینه هایی که متن روی آن قرار میگیرد، مانند پس زمینه متن اصلی، نوار های کناری، نوار های پیمایش، دکمه ها و غیره دور نگه دارید.
شما می توانید از رنگ های طبیعی تر و با ترکیب ملایم تر که برای چشم راحت تر هستند، به عنوان پس زمینه محتوای متنی خود استفاده کنید. رنگ های نئونی به عنوان متن یا پسزمینه متن، چشم ها را خسته میکنند. استفاده نادرست از این رنگ ها می تواند یک تصور منفی نا خودآگاه از وب سایت شما و آنچه که ارائه می دهید به جای بگذارد. احتمالاً این چیزی نیست که شما بخواهید و قطعا می خواهید بازدید کننده صفحه شما را با احساس مثبت در مورد کسب و کارتان ترک کند.
یک قانون کلی برای طراحی سایت پرهیز از رنگ هایی است که در کدنویسی HTML دارای افراط در طیف رنگی هستند مانند صفر و Fs که می توانند اثر منفی بگذارند. شما باید پس زمینه متن و خود متن آن ها را کمی از رنگ های کاملاً خالص غیرطبیعی دور کنید، تا پردازش آن ها برای ذهن آسان تر شوند و تأثیر مطلوب تری بر بازدیدکنندگان شما بگذارد.
ترکیبات رنگ با کنتراست بیش از حد بالا
علاوه بر پرهیز از رنگ های بیش از حد خالص، باید مراقب ترکیب های خاصی از رنگ ها نیز باشید. مثلاً ترکیب قرمز و سبز جزء اصلی فصل کریسمس هستند، اما ترکیب رنگ های قرمز و سبز می تواند تأثیرات منفی بر طراحی سایت شما بگذارد. پرهیز از ترکیب این دو رنگ آن قدر مهم است که ضرب المثلی در بین طراحان وجود دارد که می گوید: “قرمز و سبز هرگز نباید باهم دیده شوند، مگر با وجود رنگی بین آن ها”.
این اجتناب از استفاده از رنگ سبز و قرمز به دلیل پردازش متفاوت مغز بین این دو رنگ است. قرمز به عنوان گرم ترین رنگ ثبت می شود و فعالیت مغز را تحریک می کند. به عبارتی قرمز مغز را تحریک می کند و رنگی است که به سرعت توجه ما را به خود جلب می کند.
از سوی دیگر، سبز به عنوان یک رنگ سرد شناخته می شود و مغز را آرام می کند. کنار هم قرار دادن این دو رنگ، مغز را در موقعیت نا خوشایندی از پردازش تصویر قرار می دهد. ترکیب این رنگ ها به طور همزمان سعی می کند مغز را تحریک و آرام کند و این کار مغز را در تضاد می گذارد. پس ترکیب قرمز و سبز برای ایجاد یک تصور مطلوب خوب نیست.
استفاده از رنگ های قرمز و سبز در کنار هم در طراحی سایت میتواند ناخودآگاه تصور منفی در ذهن بازدید کننده به جای بگذارد که ربطی به محتوای ما ندارد و این تصور منفی ناشی از ناراحتی درونی پردازش رنگ های متضاد است.
ترکیب رنگ های قرمز و سبز مشکل دیگری نیز از نظر فرهنگی دارد، در دنیای غرب، مردم عادت دارند رنگ قرمز را با توقف یا “No”، و سبز را با برو یا “Yes” مرتبط کنند. این امر مجدداً، مغز را با مجموعه ای متناقض از ورودی ها روبرو می کند که باعث ناراحتی مغز می شود. زمانی که مغز ناراحت باشد، احساس ناراحتی را به فرد هم منتقل می کند و این اصلاً چیزی نیست که ما می خواهیم.
ترکیب رنگی دیگری نیز وجو دارد که به اندازه تضاد شدید میان رنگ سبز و قرمز نیست، اما همین اصل در مورد ترکیب قرمز و آبی نیز وجود دارد. در ترکیب قرمز و آبی نیز بین یک رنگ بسیار گرم و رنگ بسیار سرد تضاد ایجاد می شود.
همچنین تا حدود کم تری نیز برای هر ترکیبی از رنگهای ثانویه، یعنی بنفش، سبز یا نارنجی نیز این مشکلات صدق میکند. رنگ های ثانویه که ترکیبی از رنگ های اصلی هستند (بنفش ترکیبی از قرمز و آبی، سبز ترکیبی از آبی و زرد، نارنجی ترکیبی از زرد و قرمز است) نیز به سادگی با هم ترکیب نمیشوند. هر یک از این ترکیب ها به تنهایی آن قدر قوی هستند که مغز نمیتواند به راحتی آن را پردازش کند.
ترکیبات رنگی با کنتراست بسیار کم
با این حال، این بدان معنا نیست که شما باید فقط از رنگ هایی استفاده کنید که از نظر رنگ و محدوده سایه یکسان هستند. اگر شما در این مسیر نیز بیش از حد پیش بروید، مشکلات دیگری را برای بازدیدکنندگان خود ایجاد می کنید.
قرار دادن متن هایی با رنگ و سایه روشن بر روی پسزمینه های روشن مانند سفید، صورتی، زرد، آبی روشن و یاسی میتواند تشخیص متن را برای بازدیدکنندگان سخت کند. همین امر در مورد متن تیره روی پس زمینه تیره، مانند قرمز، آبی تیره و سرخابی روی مشکی نیز صدق می کند.
سایر ترکیبات رنگی منفی در طراحی سایت عبارتند از: زرد روی سبز و سبز روی زرد، پسزمینه قرمز یا مشکی با متن آبی و سرخابی و این چنین رنگ ها. این ترکیب ها نه تنها این خطر را دارند که بازدیدکنندگان مبتلا به کوررنگی اصلاً متن آن ها را نبیند، بلکه بازدیدکنندگان غیر کور رنگ نیز برای خواندن متن باید زحمت زیادی بکشند و ممکن است عصبانی شوند.
ما در اینجا در مورد تأثیرات ناخودآگاه بر مخاطب صحبت نمی کنیم، بلکه در مورد مواقعی صحبت می کنیم که با خطا های آگاهانه مخاطب از شما عصبانی می شود. مانند همین قسمت که با استفاده از رنگ های منفی در طراحی سایتتان شما خواندن مطالب وب سایت را برای آن ها سخت کرده اید. این خطا ها در متن هایی که بر روی تصاویر قرار می دهید، مانند تصاویر هدر بزرگ در بالای صفحه نیز شایع اند. همیشه در همان ابتدا مطمئن شوید که تمام متن روی تصاویر هدر شما با وضوح کامل خوانده می شود.
پس زمینه های چند رنگ
همین هشدار ها برای استفاده از بافت های چند رنگ و استفاده از گرادیان (یک عنصر گرافیکی که در آن رنگ یا تیرگی پس زمینه به تدریج از یک قسمت پس زمینه به قسمت دیگر تغییر می کند) در طراحی وب سایت نیز صدق می کند. بهتر است از استفاده از گرادیان ها برای چندین بلوک متنی در یک صفحه خودداری کنید. همچنین از استفاده از گرادیانی که شامل رنگ متن شما باشد خودداری کنید تا متن شما در فراز و نشیب های رنگی آن گم نشود.
توجه داشته باشید که همیشه متن خود را در کادر ها یا در قسمت های واضح پسزمینه و با رعایت فضای کافی از سایر عناصر بصری قرار دهید تا متن شما به وضوح برجسته شود. رعایت این اصول به مخاطبین شما کمک می کند، که با صفحات شما به خوبی ارتباط بگیرند.
نتیجه:
انتخاب رنگ های درست و بدون بار منفی در طراحی یک وب سایت به وضوح بیش از انتخاب رنگ های مورد علاقه تان اهمیت دارد. زیرا ممکن است رنگ هایی که شما دوست دارید مورد علاقه همه نباشند.
رنگ، ابزار بسیار قدرتمندی برای جذب مخاطب و هدایت او به سمت هدف اصلی سایت است. اگر رنگ ها با دقت استفاده شوند، میتوانند به حرکت بازدیدکنندگان به سمت هدف شما کمک بسیار زیادی کنند. اگر با بی دقت از رنگ ها استفاده کنید، ممکن است بازدیدکنندگان با احساس مبهم و ناراحت در مورد کسب و کار شما مواجه شوند یا حتی از شما عصبانی شده و به سرعت سایت شما را ترک کنند.
هنگام انتخاب رنگ ها نیز بر روی رنگ هایی متمرکز کنید که درک آن ها برای مغز انسان آسان هستند. اگر به یادگیری در مورد نحوه انتخاب رنگ هایی که به خوبی با هم کار میکنند ادامه دهید و رنگ های صحیح را به خوبی با عناصر دیگر ترکیب کنید، یک سایت موفق و جذاب طراحی خواهید کرد.
هنگام طراحی وب سایت موبایلی و یا دسکتاپ، ممکن است طراحی صفحه 404 را در ابتدای لیست وظایف خود قرار ندهید. زیرا، در حالت ایدهآل امیدوار هستید که کاربران در هنگام مرور وب سایت، به صفحه 404 ارجاع داده نشوند و همه چیز به خوبی ادامه یابد (شما اصلاً نمیخواهید کاربران صفحه 404 را ببینند). اما، طراحی صفحه 404 ضروری می باشد.
نگران نباشید، شما می توانید با طراحی هوشمندانه، خطای ایجاد شده (ورود به صفحه 404) را به یک مزیت تبدیل کند. به عنوان مثال: از آن برای انتقال هویت برند، سرگرم نگه داشتن بازدیدکنندگان و نگه داشتن آن ها در سایت استفاده کنید. در این مقاله، قصد داریم به آموزش طراحی جذاب صفحه 404 بپردازیم. با ما همراه باشید.
نحوه ایجاد صفحه 404 با وردپرس
شما می توانید یک صفحه سفارشی 404 در وردپرس (بدون کد) ایجاد کنید. بهترین و مبتدی ترین راه برای ساخت صفحه 404 استفاده از افزونه “Seed Prod page builder” است. “Seed Prod” بهترین سازنده صفحه فرود برای وردپرس است. زیرا، به شما این امکان را می دهد که بدون نوشتن هیچ کدی صفحات وردپرس خود را ایجاد، ویرایش و سفارشی کنید. با استفاده از این افزونه می توانید یک صفحه 404 سفارشی ایجاد کنید. همچنین، می توانید از سایر نمونه های صفحه 404 الگوبرداری کنید. در ادامه نحوه سفارشی سازی قالب صفحه 404 در وردپرس را به صورت گام به گام به شما نشان خواهیم داد.
زمان مورد نیاز: 4 روز.
طراحی صفحه 404 با وردپرس به صورت گام به گام
افزونه Seed Prod را نصب کنید
اولین کاری که باید انجام دهید، نصب افزونه “Seed Prod” است. توجه: نسخه رایگان آن موجود است. اما، ممکن است بخواهید از نسخه Pro استفاده کنید. زیرا، دارای نمونه های مورد نیاز می باشد.
رمز عبور خود را وارد کنید
پس از فعال سازی “SeedProd” را باز کنید و به قسمت “Settings” بروید و رمز عبور خود را وارد کنید. شما می توانید این اطلاعات را در صفحه حساب خود، در وب سایت “SeedProd” ببینید.
قالب طراحی صفحه 404 خود را انتخاب کنید
پس از آن، به صفحه SeedProd بروید و در کادر متا «صفحه ۴۰۴» بر روی دکمه «تنظیم صفحه ۴۰۴» کلیک کنید. این شما را به صفحه ای می رساند که ده ها قالب حرفه ای با طراحی صفحه 404 وجود دارد که می توانید قالب صفحه 404 خود را انتخاب کنید تا به شما در شروع سریع کمک کند.
نمونه یا الگوی خود را انتخاب کنید
برای انتخاب الگو، نشانگر یا ماوس را روی آن نگه دارید و بر روی نماد “علامت تیک” کلیک کنید. برای این آموزش، ما از الگوی “Oh No 404 Page” استفاده می کنیم. اما، شما می توانید از هر الگویی که دوست دارید، استفاده کنید.
شروع سفارش سازی صفحه 404
هر عنصر در صفحه قابل ویرایش و سفارشی سازی است. پس از انتخاب الگو، می توانید سفارشی سازی صفحه 404 خود را شروع کنید. بلوکها و بخشهایی را که می خواهید به صفحه 404 خود اضافه کنید، در سمت چپ صفحه قرار دارد. سمت راست صفحه پیش نمایش آن به طور زنده است.
گام اول
اولین اقدام، برای جلوگیری از خروج کاربران از صفحه 404، می توانید بازدیدکنندگان خود را به سمت محتوای ارزشمند و اقدامات بعدی که باید انجام دهند، هدایت کنید. بنابراین، در این مرحله ما می خواهیم متنی را اضافه کنیم و به کاربران بگوییم که پس از ورود به صفحه 404 چه کاری انجام دهند. برای انجام این کار، از سمت چپ، بلوک “Text“ را به صفحه 404بکشید. سپس، روی آن کلیک کنید تا بتوانید متن را تغییر دهید.
گام دوم
در مرحله بعد، پیوند دکمه صفحه اصلی را تغییر می دهیم و در عوض به یکی از با ارزش ترین محتواها پیوند می دهیم. این میتواند پستی در وبلاگ وردپرس شما باشد که محبوبترین پست است یا بیشترین درآمد را برای شما به ارمغان میآورد. ابتدا، روی بلوک “Headline” کلیک کنید و آن را به صفحه جدید خود اضافه کنید. سپس، روی بلوک “Headline” کلیک کنید و متنی را وارد کنید که مقاله شما را توصیف می کند.
گام سوم
پس از آن، روی دکمه “button” کلیک کنید تا صفحه ویرایشگر دکمه ظاهر شود. در اینجا شما می توانید متن، رنگ، اندازه و موارد دیگر را سفارشی کنید.
پست های محبوب خود را به صفحه WordPress 404 اضافه کنید
بعد، شما می توانید مقالات محبوب خود را اضافه کنید. از آنجا که این مقالات محبوب و پر بازدید هستند، به احتمال زیاد بازدید کنندگان چیزی را که دوست دارند، پیدا می کنند. ساده ترین راه برای انجام این کار، با استفاده از پلاگین “MonsterIngeights” است. این بهترین راه حل برای وردپرس است که توسط بیش از 3 میلیون وب سایت استفاده می شود. با استفاده از این افزونه، به راحتی می توانید پست های محبوب را در هر نقطه از وب سایت وردپرس خود اضافه کنید.
یک کد کوتاه را به صفحه خود اضافه کنید
هنگامی که پلاگین فعال و تنظیم می شود، لازم است تا یک کد کوتاه را به صفحه خود اضافه کنید. برای انجام این کار، به سادگی بلوک “Shortcode” را به صفحه خود بکشید. سپس، کد [monsterinsights_popular_posts_widget theme="beta"]را برای نمایش محبوب ترین پست های خود وارد کنید.
نمایش تمهای مختلف
بخش = “بتا” به نحوه نمایش پست های محبوب شما اشاره می کند. اگر میخواهید ببینید که تمهای مختلف چگونه به نظر میرسند، بر روی “Insights” کلیک کنید و سپس با نمایش چند گزینه، گزینه “Posts Popular” انتخاب کنید و در نهایت گزینه “Popular Posts Widget” انتخاب کنید. در بخش “Choose Theme”، می توانید هر یک از تم ها و نام آن ها را مشاهده کنید. همچنین میتوانید یک عنوان بالای پستهای محبوب خود با همان مراحل بالا اضافه کنید.
یک فرم تماس به صفحه وردپرس 404 خود اضافه کنید
پس از آن، می توانید یک فرم تماس را مستقیماً به صفحه 404 خود اضافه کنید. این به بازدیدکنندگان شما امکان می دهد در صورتی که نتوانستند آنچه را که در پیوندهای بالا جستجو می کردند پیدا کنند، با شما تماس بگیرند. بهترین راه برای افزودن فرم تماس به سایت خود استفاده از افزونه “WPForms” است. این بهترین افزونه فرم تماس برای وردپرس است که توسط بیش از 4 میلیون وب سایت استفاده می شود. هنگامی که افزونه فعال و راه اندازی شد، می توانید به سادگی بلوک “Contact Form” را به صفحه خود بکشید.
از لیست کشویی فرم تماس خود را انتخاب کنید
سپس، تنها کاری که باید انجام دهید، این است که فرم تماس خود را از لیست کشویی انتخاب کنید. قبل از این که بتوانید آن را به صفحه 404 خود اضافه کنید، ابتدا باید فرم تماس خود را ایجاد کنید.
در بالای فرم تماس خود بلوک تیتر یا متن اضافه کنید
یک بلوک”Headline” یا “Text” را در بالای فرم تماس خود اضافه کنید. برای افزودن آن به طراحی خود، از پنل سمت چپ، بلوک “Text“ را به سمت صفحه 404بکشید. سپس، روی آن کلیک کنید تا بتوانید متن را تغییر دهید.
تغییرات را ذخیره کنید
میتوانید در پنل سمت چپ، لوگو و منوی پیمایش را با کلیک بر روی آنها و انتخاب گزینه ویرایش، تغییر دهید. پس از اتمام اعمال تغییرات، مطمئن شوید که در گوشه سمت راست بالای صفحه بر روی گزینه “Save” کلیک کنید. اگر می خواهید صفحه خود را به صورت زنده منتشر کنید، فلش کشویی کنار “Save” را انتخاب کنید.
نحوه فعال کردن صفحه جدید 404
برای فعال کردن صفحه جدید 404 خود، به SeedProd » Pages برگردید و سپس کلید «صفحه 404» را به «فعال» تغییر دهید. در حال حاضر، بازدیدکنندگان شما به جای گزینه پیش فرض، صفحه جدید 404 با نرخ تبدیل بالا را مشاهده می کنند.
جذاب بودن صفحه 404 چه اهمیتی دارد؟
اکثر بازدیدکنندگانی که در صفحه 404 معمولی و غیر جذاب قرار می گیرند، به سرعت وب سایت را ترک می کنند. این باعث افزایش نرخ پرش سایت می شود. در نتیجه، تجربه کاربری ضعیفی ایجاد می کند و حتی می تواند بر رتبه بندی موتورهای جستجو شما تأثیر منفی بگذارد. اما، در هنگام طراحی صفحه 404 می توانید با کمی خلاقیت، بازدیدکنندگان را به پست های محبوب ارجاع دهید و نرخ پرش سایت را کاهش دهید.
وقتی بازدیدکننده ای بیشتر در سایت شما بماند، احتمال بیشتری دارد که خرید انجام دهد، پست های بیشتری را بخواند، به لیست ایمیل شما بپیوندد و … . در نتیجه بازدید از صفحات افزایش یافته و نرخ پرش نیز کاهش می یابد و بازدیدکنندگان به خوانندگان و مشتریان طولانی مدت تبدیل خواهند شد. بنابراین، ترافیک بیشتری در موتورهای جستجو خواهید داشت و این می تواند سئوی سایت شما را بهبود بخشد.
نکات حرفه ای در طراحی صفحه 404
در این بخش به بیان چند نکته حرفه ای می پردازیم که رعایت آن در طراحی می تواند موجب افزایش بهره وری سایت شما شود. نکات حرفه ای شامل:
بهترین صفحات سفارشی 404 از UX عالی، طنز، طراحی خیره کننده و یا حتی بازی ها استفاده می کنند تا باعث تحریک کاربر شود. آن ها می توانند به یاد ماندنی، قابل اشتراک گذاری و حتی به عنوان سفیران این برند عمل کنند. انیمیشن CSS یا پیمایش پارالکس منظم، برخی از راه هایی است که می توانید صفحات خطای 404 خود را جذاب کنید. اما، گاهی اوقات تنها چیزی که لازم است، کمی دقت است.
ایجاد یک صفحه سفارشی 404 بسیار مهم است. همچنین، در ادامه روند باید بررسی کنید که بازدیدکنندگان از چه URL هایی برای بازدید از وب سایت شما استفاده می کنند و سپس تغییر مسیر های مناسب را برای بهبود رتبه بندی سئو تنظیم کنید. برای بررسی وب سایت وردپرسی، می توانید از “Google Analytics” استفاده کنید.
با خیال راحت به سفارشی سازی صفحه (افزودن بلوک های جدید و آزمایش طرح بندی های مختلف) ادامه دهید تا ببینید بازدیدکنندگان چه چیزی را ترجیح می دهند.
اگر صاحب فروشگاه WooCommerce هستید، می توانید صفحه 404 خود را با نمایش محصولات محبوب سفارشی کنید تا به فروش بیشتر محصولات کمک کنید.
همچنین، می توانید عملکرد صفحه وردپرس 404 خود را دنبال کنید تا ببینید تغییرات چگونه باعث افزایش عملکرد سایت می شود و کدام تغییرات مفیدترین هستند
Universe یک پلتفرم ایجاد وب سایت های موبایلی است، که به تازگی آپدیت جدیدی منتشر کرده است. در این آپدیت، Universe کنترل های خلاقانه و پیشرفته، تم های بهبود یافته، ویژگیهای بلوک و موارد دیگری را به سایت ساز مبتنی بر گرید خود اضافه کرده است.
Universe به کاربران اجازه می دهد بدون نیاز به کد نویسی، یک سایت سفارشی ایجاد کنند یا یک فروشگاه الکترونیکی را مستقیماً از پشت تلفن همراه و از طریق یک سیستم گرید ساده باز کنند. آپدیت جدید GRID System II، با هدف ساده سازی فرآیند های رمزگذاری پیچیده قبلی در Universe انجام شده، که به تسهیل جلوه های بصری در فرآیند ایجاد وب سایت کمک می کنند.
چیزی که Universe را خاص می کند سیستم grid-base آن است و آنچه ما امروز آن را بررسی می کنیم ارتقاء عظیمی برای همین سیستم شبکه است. جوزف کوهن، مدیرعامل و بنیان گذار Universe می گوید: آپدیت جدید به مردم این امکان را می دهد تا بدون داشتن هر گونه مهارت فنی در مورد طراحی سایت و اصول آن کار های بیشتری انجام دهند.
در Universe فرآیند ایجاد وب سایت بر اساس بلوک های ساختمان یافته و ساده انجام می شود. در این سیستم بستر شبکه ای گسترده ای در اختیار کاربران است و کاربران می توانند محتوای خود را درون آن قرار دهند. آپدیت جدید Universe، تم ها و کنترل های خلاقانه ای را با رابط گرافیکی بهبود یافته به ارمغان می آورد و امکان کنترل لایه های بلوک در گرید را به همراه فاصله متن فراهم می کند. کوهن ادعا دارد، کاربران هم اکنون می توانند گرید را متراکم تر کرده و تا هفت ستون عرضی را داشته باشند. این رابط کاربری جدید در Universe شامل ابزار های بهبود یافته برای انتخاب فونت و رنگ نیز هست.
تم های جدید Universe
علاوه بر این، کاربران Universe پس از این آپدیت می توانند از بین 30 تم جدید یکی را برای سایت خود انتخاب کرده یا خودشان آن ها را ایجاد کنند. جالب است بدانید، قبل از افزودن این تم ها، هر بلوک باید به شکل جداگانه و به صورت موردی طراحی می شد. اکنون با معرفی این تم ها، کاربران Universe می توانند عناصر طراحی متشکل از فونت، پس زمینه صفحه و رنگ دکمه ها را یک جا اعمال کنند. طرح های زمینه برای همه سطوح سایت های کاربران شامل متن، پس زمینه، قسمت تیتر ها و رنگ ها اعمال می شود.
بنیان گذار Universe میگوید:”ما 30 تم شگفت انگیز ایجاد کرده ایم که می توانید آن ها را در کل سایت خود اعمال کنید. همچنین می توانید هنگام ساخت یک وب سایت جدید طرح مورد نظر خود را از همان ابتدا با انتخاب تم های زیبا ایجاد کنید.” او در ادامه می گوید: ” شما می توانید هر یک از تم های آماده ای را که ما به شما می دهیم ترکیب کرده یا سفارشی کنید و هر تغییری که ایجاد کنید در کل سایت شما اعمال می شود. این قابلیت اساساً راهی برای تغییر استایل همه چیز در سراسر سایت به صورت بصری و کاربر پسند است. “
تایپوگرافی در تم های جدید
کاربران Universe اکنون میتوانند به سبک های تایپوگرافی جدید نیز دسترسی داشته باشند که به آن ها امکان میدهد سبک متن های عنوان، تیتر ها، زیرنویس ها و غیره را طبقه بندی کنند. این شرکت تاکید می کند که کاربران می توانند از عناوین شاخص برای بهبود SEO و افزایش دسترسی به سایت خود نیز استفاده کنند.
لایه بندی ها در آپدیت جدید
بهروزرسانی جدید ویژگی لایه بندی جدیدی را معرفی میکند که به کاربران اجازه میدهد بلوک های مختلف را روی هم قرار دهند. قبلاً، طراحان سایت نمی توانستند دو بلوک(مثلاً یک بلوک تصویر و یک بلوک متنی) را روی یک دیگر قرار دهند. با آپدیت ویژگی های لایه بندی جدید، به کاربران آزادی خلاقانه تری را برای طراحی وب سایت های خود می دهد.
تم های Universe برای مبتدی ها
اگرچه برخی ممکن است، Universe را رقیبی برای سایر ابزار های محبوب ساخت وب سایت مانند Shopify و Wix ببینند، اما کوهن می گوید که Universe کاملاً با آن ها متفاوت است. او در ادامه عنوان می کند:”ما یک رابط جدید به نام “grid” ابداع کرده ایم، که به افرادی که فنی نیستند و طراحی حرفه ای انجام نداده اند، اجازه می دهد یک وب سایت کاملاً شخصی را ایجاد کنند”. البته سیستم های دیگری مانند Squarespace ،Shopify ،Weebly و Wix وجود دارند، اما این ها مخصوص سازندگان حرفه ای وب سایت بوده و بر اساس دسکتاپ و قالب سایت قابل تغییر هستند.
کوهن می گوید: “Universe مبتنی بر الگو نیست، درست است که ما قالب ها و تم های مختلفی را در هر آپدیت ارائه می کنیم، اما سیستم ما یک سیستم مبتنی بر الگو نیست. این به این معنی است که Universe توسط قالب های سایت محدود نمی شود، بنابراین خود گرید، رابط اصلی ما برای ایجاد یک وب سایت موبایلی است.”
اپلیکیشن Universe در زمان همه گیری کرونا
از نظر استفاده هم، کوهن خاطر نشان کرد که Universe در میان همه گیری COVID-19 افزایش شدید کاربران را تجربه کرده است. بسیاری از افراد در مدت قرنطینه مشاغل جدید یا فعالیت های جانبی را شروع کرده اند و به دنبال ایجاد وب سایت ها آمده اند. در اوایل بیماری کرونا، Universe قابلیت فروش و ارسال محصولات در سایت های خود را برای کاربران راه اندازی کرد. در نتیجه، کاربران دیگر ملزم به ثبت نام برای دریافت ابزار های تجارت الکترونیک شخص ثالث، در پلتفرم هایی مانند Shopify نبودند. کوهن در ادامه می گوید: ” تجارت ما در یک سال و نیم گذشته و از زمان شیوع کرونا واقعاً منفجر شده است و از لحاظ تعداد سایت های ایجاد شده فعال نیز حدود 10 برابر تجارت بیشتری داشته ایم. “
همچنین کوهن خاطر نشان کرد که Universe شاهد افزایش کاربرانی است، که خواهان یک سایت برای “لینک در بیو” خود هستند. لینک داخل بیو در اصل یک URL در انتهای بیوگرافی در صفحه مشخصات اینستاگرام آن ها است که مخاطبان آن ها را به وب سایت آن ها در خارج از اینستاگرام هدایت می کند. این سایت های هدایت کننده اغلب برای فروش محصولات، پیوند به سایر حساب های رسانه های اجتماعی، نمایش نمونه کار ها و موارد دیگر استفاده می شوند.
کوهن می گوید 40 درصد از سایت هایی که در Universe ایجاد شده اند با هدف “پیوند در بیوگرافی” هستند و این نوع سایت ها، علاوه بر کاربرد های تبلیغاتی، سریع ترین مناطق تجاری جهان نیز هستند. همچنین می گوید که Universe در حال حاضر صد ها هزار سایت فعال دارد و قصد دارد در آینده با انتشار تم ها و قالب های بیشتر در آپدیت های خود همچنان برای مصرف کنندگان بهبود یابد.
اگر شما در حال راه اندازی فروشگاه آنلاین خود هستید، باید بدانید که مراحل زیادی برای موفقیت در تجارت الکترونیکی وجود دارد، از محصولات با کیفیت بالا گرفته تا یک لندینگ پیج زیبا، اما یکی از مهمترین اجزای مؤثر صفحه محصولی است که به خوبی طراحی شده باشد. بدون وجود این موارد ضروری، بهترین محصولات نیز قادر به فروش نیستند. چرا طراحی صفحه محصول اینقدر مهم است؟ به طور متوسط، فقط 3٪ از بازدید های فروشگاه آنلاین منجر به خرید می شود. برای مقابله با این آمار غیر جذاب، باید بهترین تجربه کاربری را به خریداران بدهید.
7 قدم برای موفقیت در صفحه محصول:
از تصاویر محصول با کیفیت بالا استفاده کنید
قیمت گذاری واضح را نشان دهید
کال تو اکشن متقاعد کننده ایجاد کنید
توضیحات محصول آموزنده را بنویسید
اهرم اثبات اجتماعی
توضیح های دقیق محصول را ارائه دهید
ثابت قدم بمانید!
این که آیا فروشنده ای تازه کار هستید یا می خواهید فروش خود را در فروشگاه موجود افزایش دهید، ما چند نکته مهم برای ایجاد یک صفحه محصول واقعاً کارآمد داریم. ما شما را با عناصر اصلی طراحی که برای صفحه محصول به آن نیاز دارید، همراه با نموه های خیره کننده برای الهام گرفتن شما، و نکات دقیق در مورد چگونگی چیدن این قطعات پازل در صفحه محصول به شما معرفی خواهیم کرد.
قبل از اینکه شروع کنید…
قبل از شروع به طراحی صفحات محصول خود، چند اصل وجود دارد که باید از قبل بدانید. موارد اصلی عبارتند از:
مخاطبان هدف شما
هویت برند شما
طرح رنگی شما
دانستن جزئیات هر یک از این زمینه ها نه تنها طراحی صفحات محصول شما را آسان تر می کند ، بلکه تأثیر بسیار زیادی نیز خواهد داشت. برای کسب اطلاعات بیشتر در مورد هر منطقه، و اینکه چگونه می تواند به شما در ایجاد صفحات محصول مؤثر تر کمک کند.
از تصاویر محصول با کیفیت بالا استفاده کنید
تصاویر محصول در صفحه محصول شما کجا قرار دارد؟
تصاویر محصول باید همیشه بالای فولد (ابتدای صفحه) قرار بگیرند، زیرا معمولاً چیزی است که بیشتر مشتریان می خواهند ابتدا به آن ها کمک کنند تا به تصمیم گیری خرید کمک کنند. در حقیقت، 93٪ از مصرف کنندگان هنگام تصمیم گیری در خرید، تصاویر را ضروری می دانند.
بالای فولد چیست؟ اگر چیزی “Above the fold” است، به این معنی است که برای دیدن آن لازم نیست که یک صفحه وب را به پایین اسکرول کنید. بعد از باز کردن صفحه بلافاصله در قسمت بالای صفحه قابل مشاهده است. اگر چیزی “زیر فولد” است، به این معنی است که باید برای دیدن آن به پایین پیمایش کنید.
اولین چیزی که شما می خواهید هنگام برنامه ریزی صفحه محصول به آن فکر کنید، عکس های محصول است و دلیل خوبی هم دارد. عکس های محصول یکی از مهم ترین ویژگی های هر صفحه محصول است. آن ها را به عنوان پایه طراحی صفحه محصول خود در نظر بگیرید. مشتریان می خواهند بدانند که دقیقاً چه چیزی را می خرند. آن ها نمی توانند محصولات شما را تحویل بگیرند و مانند اینکه در یک فروشگاه واقعی هستند به آن ها نگاه می کنند اما می توانند عکس های محصول شما را مشاهده کنند.
هرچه عکس های محصول شما بهتر باشد، تلاش در ترغیب مشتری به اینكه این محصول برای آن ها مناسب است راحت تر می شود.
عکس از محصول در سایز ها و زاویه های مختلف
نمایش قیمت واضح
قیمت در صفحه محصول شما کجاست؟ بالای فولد
قیمت گذاری باید همیشه به وضوح بالای فولد نشان داده شود، مشتریان خود را مجبور به گشتن نکنید تا دریابید که قیمت محصولات شما چقدر است! هیچ کالایی را نمی خرد بدون اینکه بداند قیمت آن چقدر است، بنابراین بهتر است آن را بالای صفحه قرار دهید. معمولاً باید آن را نزدیک به عنوان محصول یا دکمه “افزودن به سبد” قرار دهید.
مهم نیست که محصولات شما چقدر جذاب هستند، مردم می خواهند قبل از خرید از قیمت آن اطلاع داشته باشند. بنابراین منطقی است که شما قیمت ها را تا حد ممکن در صفحه محصول خود نمایش دهید!
حتی اگر کالای شما بسیار گران است، باز هم باید قیمت را واضح و در دید قرار دهید، مثلاً نزدیک عنوان محصول یا نزدیک دکمه “افزودن به سبد خرید” یک انتخاب هوشمندانه است. دلیل این امر این است که مشتری ها معمولاً به طور خودکار به این مناطق کشیده می شوند و قیمت آن به راحتی قابل تشخیص است.
روش های دیگر برای کمک به برجسته شدن قیمت عبارتند از:
با استفاده از اندازه قلم بزرگتر، قیمت شما باید یکی از بزرگترین عناصر صفحه باشد
استفاده از یک رنگ متضاد برای ایجاد “پاپ” بودن قیمت
برجسته کردن هر تخفیف، قیمت اصلی را در کنار قیمت جدید و ارزان تر نشان دهید
اگر به محض ورود به صفحه محصول، قیمت آن مشخص نیست، باید در مورد طراحی خود تجدید نظر کنید، ابتدا با استفاده از نکات بالا شروع کنید و سپس آن را روی دوستان، خانواده یا همکاران آزمایش کنید تا ببینید چقدر سریع هستند می تواند قیمت را تشخیص دهد
تمونه ای از نمایش واضح قیمت محصول
کال تو اکشن های قانع کننده ایجاد کنید
تماس برای عمل در صفحه محصول شما کجا قرار دارد؟ بالای فولد
کال تو اکشن (یا CTA) معمولاً یک دکمه یا لینک است که از کاربران می خواهد، اقدامی انجام دهند. به عنوان مثال می توان از دکمه های “افزودن به سبد خرید”، فرم “ثبت نام در اینجا” و “خرید کلی” به عنوالن کال تو اکشن ها نام برد.
CTA شما باید همیشه بالای فولد باشد، زیرا این یک قسمت اساسی در دریافت تبدیل است. اگر مردم محصول شما را دوست دارند، اما دکمه خرید آن را پیدا نمی کنند، فروش شما ضرر خواهد کرد! دکمه های کال تو اکشن (یا CTA) بخش مهمی از سفر مشتری از مرور تا خرید است. وادار کردن خریداران به کلیک بر روی CTA شما هدف اصلی صفحه محصول شما است، بنابراین ارزش دارد که برای درست کردن آن وقت بگذارید.
بدون CTA، خریداران نمی توانند محصولات مورد علاقه خود را به سبد خود اضافه کنند، به این معنی که شما خرید آن ها را از دست می دهید، که وقتی می خواهید سود کسب کنید، این اصلاً ایده آل نیست! این بدان معنی است که بالا بودن CTA در صفحه بسیار حیاتی است، باید به راحتی قابل مشاهده باشد، کلیک آن آسان و قابل فهم باشد در اینجا نکات مهم ما برای استفاده بیشتر از دعوت به عمل خود آورده شده است:
آن را بالای صفحه، بالای فولد قرار دهید، معمولاً CTA ها را در کنار تصویر محصول، در زیر اطلاعات اصلی محصول مشاهده می کنید. باید بتوانید CTA را در کمتر از سه ثانیه تشخیص دهید!
با استفاده از یک رنگ روشن یا متضاد آن را برجسته کنید، این به جلب توجه کمک می کند و نگاه مشتری را به سمت دکمه هدایت می کند.
دکمه را به اندازه کافی بزرگ کنید تا کلیک کردن آسان باشد، چه با ماوس روی دسک تاپ و چه با انگشت در موبایل، دکمه CTA باید به اندازه کافی بزرگ و در دسترس باشد.
به زبان خود فکر کنید، بیشتر CTA های صفحه محصولات می گویند “افزودن به سبد خرید” یا “اکنون بخر” که نمونه هایی از زبان مستقیم و فرمان دهنده هستند. هر کلمه ای را که انتخاب کردید، اطمینان حاصل کنید که با کلیک روی دکمه به وضوح به مشتری می گوید که چه اقدامی انجام می دهد.
نمونه از بهترین کال تو اکشن در سایت Netflix
توضیحات محصول را کامل بنویسید
توضیحات محصول در صفحه محصول شما کجا قرار دارد؟
توضیحات محصول اطلاعات بیشتری در مورد محصول به مشتریان می دهد. بهتر است یک توضیح کوتاه و شیرین از کالای بالای فولد داشته باشید که به راحتی خوانده شود، و سپس نسخه طولانی تر و دقیق تر در پایین صفحه برای مشتریانی که اطلاعات بیشتری می خواهند جایگذاری کنید.
توضیحات باید مانند داربست ساخته شده در اطراف تصاویر محصول شما باشد. توضیحات از عکس های محصول پشتیبانی می کنند، به مشتری کمک می کنند تا درک کند محصول چیست و چرا باید آن را خریداری کند. به طور خلاصه، توضیحات محصول فرصتی برای اقناع و فروش واقعی محصول است، گویا در فروشگاه کنار مشتری خود ایستاده اید.
اکثر خریداران به دنبال صفحات سریع، آسان و قابل اسکن محصولات هستند، بنابراین شما باید یک توضیح کوتاه، خلاصه و شیرین بنویسید تا بالای فولد در کنار تصاویر محصول بنشینید. سپس، در پایین صفحه، می توانید توضیحات کمی طولانی تر و دقیق تری داشته باشید که به داخل و خارج محصول وارد شود.
اهرم تأیید اجتماعی
اهرم تأیید اجتماعی در کجای صفحه محصول شما قرار دارد؟
شما همیشه باید درجه ستاره محصول یا همان اهرم تأیید اجتماعی را بالای فولد نشان دهید، زیرا این یک نقطه فروش مهم است که اکثر خریداران می خواهند بلافاصله آن را ببینند. در هر صورت خریداران می خواهند نظرات دیگران را درباره محصول مرور کنند، نظرات کامل مشتری را در پایین صفحه قرار دهید.
اثبات اجتماعی پدیده ای است که در آن افراد به احتمال زیاد کاری را انجام می دهند (یا خرید می کنند)، زیرا دیگران را مشاهده می کنند که همان کار را انجام می دهند. به همین دلیل است که به صف رستوران های شلوغ می پیوندیم و به سمت جمعیت جذب می شویم و به همین دلیل بررسی و رتبه بندی مشتری بسیار مهم است.
آیا می دانید 97٪ از مصرف کنندگان می گویند نقد های آنلاین بر تصمیمات خرید آن ها تأثیر می گذارد؟ به همین دلیل داشتن نوعی اثبات اجتماعی بالاتر از حد ضروری است، به طوری که بلافاصله برای خریداران آنلاین قابل مشاهده است. مشهورترین روش ارائه اثبات اجتماعی نشان دادن درجه ستاره محصول در نزدیکی عنوان محصول است.
از آنجا که این طرح طراحی بسیار رایج است، مشتریان شما انتظار دارند بلافاصله درجه بندی ستاره را ببینند – بنابراین آن ها را وادار نکنید که به دنبال آن بروند! همچنین باید نظرات مشتریان را در پایین صفحه قرار دهید تا خریداران بتوانند به راحتی محبوبیت این محصول را ببینند و چرا دیگران از استفاده از آن لذت می برند. این امر بسیار حیاتی است زیرا مشتریان 12 برابر بیشتر از توضیحات محصول نوشته شده توسط فروشنده اعتماد به نظرات مشتری دارند!
سایر نمونه های اثبات اجتماعی که می توانید در صفحه محصول خود استفاده کنید عبارتند از:
هشدارهای موجودی کم محصول: این مسئله فوریت و ترس از دست رفتن را ایجاد می کند.
پیامی که به خریدار می گوید چند مشتری دیگر در یک ساعت گذشته این محصول را مشاهده یا خریداری کرده اند: این به عنوان یک صف یا جمعیت مجازی عمل می کند و به خریدار نشان می دهد که افراد دیگر نیز به این محصول علاقه مند هستند.
توصیه های محصول “مشتریان همچنین مشاهده یا خریداری کرده اند”: این ترکیب اثبات اجتماعی و فروش متقابل است و یک روش عالی برای نگه داشتن خریدار در فروشگاه شما است.
محصولات مشابه را ارائه دهید
توصیه های محصول در کجای صفحه محصول شما قرار دارد؟
توصیه محصولات مشابه یک روش مفید و مؤثر برای حفظ مشتری در سایت شما، افزایش ارزش هر معامله و ایجاد یک تجربه خرید شخصی تر است. با این حال، توصیه های محصول برای جذب مشتری ضروری نیست و حتی می تواند آن ها را از محصولی که در حال حاضر مشاهده می کنند منحرف کند. به همین دلیل توصیه محصولات مشابه بهتر است در زیر فولد قرار بگیرند.
بنابراین، مشتری شما محصولی را به سبد خود اضافه کرده است، هورا! اما حالا چه؟ آن ها ممکن است به سادگی بررسی کنند یا کمی بی هدف در اطراف سایر محصولات شما کلیک کنند. مشکلی نیست، اما اگر بعد از مشاهده یک محصول راهی بهتر برای نگه داشتن مشتری برای خرید وجود داشته باشد، چه می کنید؟ توصیه های محصول بر اساس آنچه در حال حاضر مشاهده می کند، محصولات مختلفی را پیشنهاد می کند که مشتری ممکن است دوست داشته باشد.
اگر می توانید توصیه های محصولات مشابه دقیق و مفیدی از محصول را ارائه دهید، این یک روش عالی برای اطمینان از خرید دیگر است و مشتری را در محل نگه دارید حتی اگر محصول اول را مشاهده نکرده باشد. شما می توانید از موارد زیر به عنوان توصیه محصول استفاده کنید.
لیست های “مشتریان نیز خریداری کرده اند”
پیشنهاد های “موارد مشابه”
توصیه های “بهترین گزینه ها برای شما”
حتی می توانید با وعده توصیه های بهتر و متناسب، افراد بیشتری را به ایجاد حساب برای فروشگاه خود ترغیب کنید، این یک تجربه خرید شخصی تر ایجاد می کند و همچنین می تواند تعامل را افزایش دهد. روش دیگر پیشنهاد محصولات، نمایش سایر محصولات برای فروش با عکس های محصول است. به عنوان مثال، ممکن است یک مدل از چکمه و دامن و همچنین بلوز استفاده کند و مشتریان می توانند “همه را بخرند” یا “مجموعه را کامل کنند” و سبد خود را در طول راه پر کنند!
سخن آخر
سعی کنید ثابت قدم بمانید. این یک قانون مهم طراحی است. تصمیم بگیرید که همه ویژگی های قید شده را در صفحه محصول خود پیاده سازی کنید (که ما به شدت توصیه می کنیم)، موارد بیشتر را اضافه کنید یا فقط عناصر اصلی را انتخاب کنید، صفحات محصول شما همیشه باید سازگار باشد.
هر کاری انجام می دهید، گزینه های طراحی خود را تغییر ندهید، زیرا باعث سردرگمی مشتریان می شود و توجه آن ها را از محصولات شما منحرف می کند! از جمله موارد دیگری که ممکن است در طراحی به کمی راهنمایی نیاز داشته باشد می توان به موارد زیر اشاره کرد:
اکنون که مهم ترین عناصر موجود در صفحه محصول شما را مرور کرده ایم، شاید از خود بپرسید که چگونه باید همه آن ها را در کنار هم قرار دهید. برای این کار شما می توانید از مشاوران و متخصصان ممتاز دیزاین استفاده کرده و بهترین طراحی وب سایت مناسب خود را ایجاد کنید.
