ساختار صفحه اصلی سایت و نکاتی در طراحی آن

لازم به گفتن نیست که صفحه اول سایتتون چقدر اهمیت داره. یکی از مهم‌ترین جاها برای تبدیل ترافیک ورودی به کاربر و در ادامه تبدیل اونها به مشتری صفحه اصلی سایت هست. کافیه یه سری موارد رو در نظر بگیرید تا صفحه‌ای داشته باشید که بالاترین میزان تبدیل به مشتری رو شاهد باشید!

تفاوت این صفحه با صفحات دیگه (Landing Pageها) اینه که در صفحه اول، شما ترافیکی از آدم‌های متفاوت و از منابع مختلف خواهید داشت. بنابراین شما به صفحه‌ای نیاز دارید که سه کار رو همزمان بتونه انجام بده: جذب کردن بیننده، آموزش و درنهایت تبدیل اونها به چیزی که میخواید.

برای رسیدن به این اهداف، من روشی که خودم از ابتدا تا انتها انجام میدم رو براتون شرح میدم.

استفاده از ساختار WHY, HOW, WHAT

من خیلی از سایت‌ها رو دیدم که همون ابتدا میان سرویس رو معرفی میکنن و از فیچر‌هاش میگن و اسکرین‌شات از محصولشون میذارن. یه جوری با بیننده برخورد میکنن که انگار کاربر از همون اول میدونه دنبال چی هست و فقط اومده ببینه محصول ما کارشو راه میندازه یا نه. اگه اینطوری درنظر بگیرید،‌ یه بخش بزرگی از ترافیک سایتتون که نمیدونن فواید محصول شما چیه رو از دست میدید.

برای اینکه یه ساختار خوب ایجاد کنید من توصیه میکنم این TED Talk از آقای Simon Sinek رو ببینید تا با روش پرزنت کردن محصول آشنا بشید. ایشون معتقده که ساختار معرفی یک محصول باید از "چرا" آغاز بشه. بگیم "چه مشکلی قراره حل بشه؟". در قدم بعد به "نحوه حل مشکل" پرداخته بشه و در نهایت بگیم "حالا ما چی ساختیم" که این مشکل رو حل میکنه. قرار نیست همون اول از ویژگی‌های محصولمون بگیم. قرار نیست بگیم چه تیم مجربی پشت این محصوله. قرار نیست بگیم چقدر این محصول خفنه! قراره بگیم چرا باید از محصول ما استفاده بشه. کاربرا به خاطر اینکه ما چقدر خوبیم و یا ما چه محصول درجه یکی ساختیم ازمون خرید نمیکنن. خرید میکنن چون دلیلی که پشت ساختن این محصول هست براشون مهمه. شما یه زمانی از دیجی‌کالا خرید میکردین "چون" از اصالت کالا و قیمتش مطمئن بودین، نه بخاطر اینکه سایت قشنگی دارن و یا همه میشناسنش. حالا اگه دیجی‌کالا این "دلیل" رو از دست بده و خرابش کنه، شما چون کلی ویزیتور داره ازش خرید نمی‌کنید. چون تیم خفنی داره ازش خرید نمی‌کنید.

فرض کنید که میخوایم یه محصول ToDo List داشته باشیم به اسم Smart ToDo و میخوایم براش ساختار معرفی درست کنیم.

"چرا" به ToDo List نیاز دارید؟

  • وظایفتون رو فراموش نکنید
  • به کارهاتون نظم بدید
  • اولویت کارهاتون رو مشخص کنید
  • در کمترین زمان ممکن مهم‌ترین کارهاتونو انجام بدید
  • از وقتتون به‌طور موثر استفاده کنید

"چطوری" ToDo List میتونه این کارا رو انجام بده؟

  • یه لیستی داشته باشید و هرکاری که انجام میدید رو تیک بزنید
  • به ازای هرکاری که عقب میفته هشدار دریافت کنید
  • لیستتون همیشه در دسترستون باشه

چرا برنامه Smart ToDo بهترین برنامه‌ برای اینکاره و "چه" ویژگی‌هایی داره؟

  • طراحی بسیار زیبا و امروزی
  • دارای اپ موبایل، دسکتاپ و همچنین دسترسی از طریق وب
  • قابلیت sync بر روی همه دستگاه‌ها
  • قابلیت به اشتراک‌گذاری وظایف با افراد دیگر

سعی کنید برای محصول خودتون این سه سوال رو پاسخ بدید و تا جای ممکن مواردی رو به هر قسمت اضافه کنید. کاری که خود من انجام میدم اینه که بعد از نوشتن مواردی که به ذهنم میرسه میرم سراغ رقبا. سایت رقبا رو بخونید و بدون در نظر گرفتن اینکه آیا اونا این ترتیب معرفی رو رعایت کردن یا نه، شروع کنید به خوندن تمامی متن‌ها. از بالا تا پایین. هر دلیل و یا ویژگی که امکانش هست تو یکی از این دسته‌ها قرار بگیره رو تو همون دسته بنویسید.

حالا شما یه ساختار معرفی بسیار عالی دارید که در قدم‌های بعدی میتونید ازش برای طراحی صفحه اول سایت استفاده کنید.

پیدا کردن و نوشتن تمامی کیووردهای مرتبط با محصول شما

قبل از اینکه بخوایم صفحه اول سایت رو طراحی کنیم، برای هر بخش نیاز به متن دارید. بهترین کار اینه که در بخش‌های مختلف از متونی استفاده کنید که در اون به تعداد مناسب از کیوورد‌های مرتبط با محصول شما به کار رفته باشه. اینطوری علاوه بر اینکه کلمات و یا اصلاحاتی که کاربرها بیشتر باهاش آشنا هستند رو استفاده میکنید، به بهتر شدن SEO سایتتون کمک بسیار زیادی کردید.

یه لیستی تهیه کنید و کیووردهایی که میدونید خیلی مهم هست رو بنویسید. در بخش قبلی همزمان با خوندن متن‌های رقبا، به کیووردهای اونا هم دقت کنید و موارد جدید رو به لیستتون اضافه کنید.

نکاتی که برای طراحی صفحه اصلی یا Home Page سایتتون باید در نظر بگیرید

۱. عنوان اصلی، عنوان فرعی، دکمه CTA، عکس یا فیلم در بالای fold*

شما به یک عنوان اصلی نیاز دارید تا در سریع‌ترین زمان ممکن، بلند و رسا بگید چی ارائه میدید. این عنوان میتونه شعارگونه باشه. ترجیحا ساده و کوتاه! مسلما از نظر طراحی هم فونت بزرگتری داره.

به یک عنوان فرعی نیاز دارید تا به اصلاح عنوان اصلی رو حمایت کنه. عنوان فرعی دقیق‌تر میگه که محصول شما کارش چیه و کیووردهای اصلی و مهم رو شامل میشه و احتمالا تگ H1 رو هم بهش میزنید که واسه SEOتون هم بسیار موثره. نباید شعاری باشه. فونتش هم نباید کوچیک باشه.

در بالای فولد میتونید چندتا دکمه Call to Action داشته باشید تا ترافیک رو به سمت چیزایی که مهمه هدایت کنید. دکمه CTA باید کنتراست خوبی داشته باشه تا به خوبی دیده بشه. از جملات امری کوتاه استفاده کنید: ثبت‌نام کن. همین الان سفارش بده. رایگان ببین.

میتونید از یه عکس مرتبط با محصولتون هم در بک‌گراند استفاده کنید. ولی حواستون باشه دکمه CTA تحت‌الشعاع عکس قرار نگیره و منجر به پایین اومدن نرخ کلیک شدنش بشه. ضمن اینکه میتونید از ویدئو استفاده کنید و یه دمو از محصولتون رو به نمایش بذارید.

یه نمونه خوب برای این قسمت سایت Hubspot هست:

Hubspot above the Fold
Hubspot above the Fold


۲. فواید محصول شما

اینجا جاییه که شما در مورد "چرایی" محصول صحبت میکنید. قبل از اینکه در مورد ویژگی‌ها و نقاط مثبت سرویس خودتون نسبت به رقبا بپردازید، فواید استفاده از محصولتون رو شرح بدید. بگید که بعد از استفاده از محصول شما، کاربر چه نتایجی رو میگیره و انتظار چه روند مثبتی رو در خودش، محصولاتش و یا زندگیش میتونه داشته باشه. "چرا"هایی رو که لیست کردید اینجا به درد میخوره. سعی کنید دو یا سه دلیل بسیار مهم رو به صورت بولد نمایش بدید و مابقی رو (اگه وجود داره) خلاصه‌تر و گذرا توضیح بدید.

یه نمونه خوبی که پیدا کردم سرویس intercom هست:

Intercom Benefits
Intercom Benefits


۳. ویژگی‌ها و چگونگی آن در محصول

خب حالا که در مورد فواید استفاده از محصول گفتید، میتونیم بریم سراغ دو بخش دیگه یعنی "How" (چگونگی) و "What" (با چی). در ادامه براتون مثال از سرویس Digitalocean رو آوردم که به این دو قسمت جداگونه پرداخته:

نحوه ارائه
نحوه ارائه "چگونگی" منتفع شدن از سرویس Digitalocean

میبینید که این سرویس "چرایی" استفاده از سرویسشون رو Deploy seamlessly تعریف کرده و برای گفتن "چگونگی" (HOW) رسیدن به این هدف ۴ تا دلیل آورده. دقت کنید که هنوز به مرحله نمایش محصول نرسیده. فقط گفته که با این ۴ تا دلیل شما میتونید به هدف اصلی که Deploy کردن آسون هست برسید. در قدم بعد اومده به قسمت What پرداخته و بخشی از محصول رو به نمایش درآورده و گفته این اهداف و دلایل رو به چه صورت تو محصولشون پیاده‌سازی کردن.

البته شما میتونید این دو قسمت رو با هم ارائه بدین و به ازای هر ویژگی نحوه پیاده‌سازیش تو محصول رو هم شرح بدید و یا دمو کنید.

در نوشتن محتوای این بخش و بخش‌های قبلی حتما از لیست کیووردهایی که تهیه کردید استفاده کنید و تا جای ممکن سعی کنید کیووردهای مختلف رو در قالب توضیحاتی که ارائه میدید به کار ببرید. این کار نیاز به ظرافت داره و کمی زمان. چون کیووردها باید به نحوی استفاده بشه که هم کاربر به آسونی متوجه منظور ما بشه و هم در استفاده از کیووردها رفتار اسپم‌گونه نداشته باشیم و یا برعکس کم‌کاری نکنیم.

۴. سایر بخش‌ها: تاییدیه کاربران فعلی، تکرار CTA، شاخص‌های موفقیت

هر صفحه اولی به موارد دیگه‌ای جز ویژگی‌ها و فواید سرویس نیاز داره تا هم اعتبار محصول رو نمایش بده و هم میزان تبدیل شدن به مشتری رو افزایش بده.

  • اگه اشخاص یا شرکت‌های دیگه از محصول شما راضی هستند ازشون تقاضا کنید که براتون به متن کوتاه در وصف محصول شما بگن. و یا حتی یه case study در مورد تجربه استفاده از محصول شما بنویسن.
  • اگه مجله‌ای محصول شما رو معرفی کرده و یا جوایزی کسب کردید، برای افزایش اعتبار محصولتون تو صفحه اول بهش بپردازید.
  • یادتون نره در فواصل مختلف و بسته به میزان محتوا حتما از Call to Action مجددا استفاده کنید.

این سه موردی که در این بخش ذکر شد میتونن هر کدوم بسته به اهمیتی که دارن در قسمت‌های مختلف صفحه اصلی استفاده بشن.


سخن پایانی

بیشترین ترافیک سایتتون به صفحه اول میرسه و این ترافیک شامل دسته‌های مختلفی از کاربران میشه. پس باید طوری طراحی بشه که مورد توجه اکثر کاربران قرار بگیره و آموزش لازم بهشون داده بشه و درنهایت به هدفی که مورد نظرمون هست تبدیل بشه.

برای معرفی محصول به ترتیب از "دلیل" وجود محصول شروع کنید و بعد به "چگونگی رسیدن به هدف محصول" و "نحوه پیاده‌سازی" بپردازید.

در نهایت فراموش نکنید که سایتتون رو برای موبایل حتما بهینه کنید.