نحوه طراحی بهترین صفحه اصلی در 3 مرحله نحوه طراحی بهترین صفحه اصلی در 3 مرحله

نحوه طراحی بهترین صفحه اصلی در 3 مرحله

طراحی سایت زمان مطالعه : ~ 12 دقیقه 10 آذر 1399

شما نمی توانید یک کتاب را بر اساس جلد آن قضاوت کنید. اگرچه ممکن است در مورد کتاب ها (و همچنین افراد) این درست باشد ، اما در مورد طراحی سایت صفحه اصلی یک وب سایت اینگونه نیست. صفحه اصلی شما می تواند تجربه کاربری عالی را ایجاد کرده یا از بین ببرد ، حتی منجر به ترک جستجو شود. اما اگر صفحه اصلی، یک عنصر حیاتی برای یک وب سایت است ، چگونه بسیاری آن را اشتباه می گیرند؟ در زیر بیشتر به این موضوع خواهیم پرداخت و برخی از اشتباهات رایج را که باید از آنها اجتناب کرد ، بررسی خواهیم کرد.

هیچ وب سایتی بدون صفحه اصلی وجود ندارد. البته ممکن است اولین جایی که همیشه مردم هنگام ورود به وب سایت شما فرود می آیند صفحه اصلی نباشد، اما در نهایت به آنجا می رسند. حضور آنلاین شما ابزار اصلی می باشد. وقتی بازدید کننده ای در صفحه اصلی شما فرود می آید، اصطلاحاً از درهای ورودی شرکت شما عبور می کند. باید برای آنها روشن باشد که شما چه کسی هستید، چه چیزی را ارائه می دهید و چگونه از آن بهره مند می شوند. در حالت ایده آل، کاربر شما می تواند همه اینها را در عرض چند ثانیه درک کند.

طراحی صفحه اصلی

قانون 10 ثانیه ای

در بیشتر موارد، تجربه بازدیدکننده در صفحه اصلی شما در مدت زمانی که وی در وب سایت شما صرف می کند تأثیر می گذارد. طبق مطالعه ای که انجام شد، مفهومی برای تجزیه و تحلیل "زمان به شکست" کاربر استفاده می شود. به عبارت دیگر ، مدت زمانی که کاربر برای جستجو احتیاج دارد بر اساس مدت زمانی می باشد که کاربر در صفحه اصلی صرف کرده است. تحقیقات نشان می دهد که 99٪  وب سایت ها 10 ثانیه فرصت دارند تا توجه کاربر را جلب نمایند. یعنی بازدیدکنندگان تصمیم می گیرند که آیا می خواهند ظرف 10 ثانیه بمانند یا آنجا را ترک کنند.

چرا توجه به این امر مهم است؟ زیرا این بدان معنی است که شما 10 ثانیه فرصت دارید تا ارزش خود را اعلام کنید. اگر بازدید کننده ای بیش از 10 ثانیه در صفحه بماند، احتمالاً به کار با سایت شما و بازدید از صفحات اضافی ادامه خواهد داد. اما اگر در طول این 10 ثانیه توجه آنها را جلب نکنید ، خطر ترک آنها وجود دارد.

نحوه طراحی صفحات اصلی با در نظر گرفتن تعاملات خرد

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

ریز تعاملات می توانند در اینجا کمک کنند ، زیرا بازخورد فوری را در اختیار کاربر قرار می دهند. یک مثال از تعاملات خرد متغیر، زمانی است که کاربر بر روی ناوبری اصلی حرکت می کند و یک منوی کشویی یا ناوبری ثانویه را نشان می دهد.

با این حساب ، سوالی که ممکن است از خود بپرسید این است: "از کجا شروع کنم؟"

1. با بازدید کننده شروع کنید

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

2. طرح را تعیین کنید

طرح صفحه اصلی شما باید از قابلیت کشف و یادگیری پشتیبانی کند. قابلیت کشف به این معنی است که یک کاربر به راحتی می تواند آنچه را که لازم است در سایت شما پیدا کند و قابلیت یادگیری به این معنی است که کاربر چگونه می تواند وب سایت و ویژگی های آن را مرور کند. نحوه برخورد شما با طراحی رابط کاربری (UI) موفقیت شما را در اینجا تعیین خواهد کرد ، به ویژه با توجه به زمان محدودی که برای انتقال ارزش خود دارید. اصول طراحی زیادی وجود دارد که باید برای چیدمان به خاطر بسپارید، اما سه مورد زیر عناوین خوبی برای شروع هستند.

تایپوگرافی

وب سایت بدون کلمات وجود ندارد و نحوه طراحی آنها مهم است. تایپوگرافی برای طراحی صفحه اصلی شما بسیار مهم است، زیرا گسترش اعتبار برند شما است. به عنوان مثال، کاربر شما برای خواندن کپی مجبور نیست به چشمانش فشار آورد. اندازه ، محل قرارگیری ، وزن و رنگ را در نظر بگیرید و اطمینان حاصل کنید که همه چیز قابل خواندن است. از قلم های فانتزی فاصله بگیرید. در عوض، یک قلم مدرن تر، مانند sans serif انتخاب کنید. به عنوان مثال Arial ، یک فونت محبوب sans serif است.

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

تصویرسازی

آنچه می بینیم بر تصمیمات، احساسات و انتظارات ما تأثیر می گذارد. حتی در دنیای آشپزی یک جمله وجود دارد که می گوید: "شما با چشم خود غذا می خورید." همین مورد برای صفحه اصلی یک وب سایت نیز صدق می کند. ما ابتدا با چشم خود تصمیم می گیریم ، بنابراین مطمئن شوید تصویرهایی را انتخاب کنید که بازدیدکننده شما می تواند با آنها ارتباط برقرار کند.

نکته: برای وب سایت تجارت الکترونیکی، تصاویر حرفه ای را انتخاب کنید تا نشان دهنده آن چیزی باشد که کاربر شما در صورت خرید از فروشگاه به طور معمول مشاهده می کند. یا اگر در حال طراحی صفحه اصلی آژانس پذیرش حیوانات خانگی هستید، تصاویری را نشان دهید که نه تنها مربوط به حیوانات باشد بلکه تصاویر، احساسی از تعامل مردم با آن ها را نیز نشان دهد. Adobe Stock ،  Freepickو... یک منبع عالی برای یافتن تصاویر هستند.

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

ترکیب بندی

انتخاب تایپوگرافی و تصاویر مناسب کافی نیست. گردآوری همه چیز مهم است. یکی از راه های این کار ترکیبی از تصاویر و قرار دادن دکمه ها است. به عنوان مثال، یک دکمه می تواند تمام عرض صفحه باشد یا ممکن است یک چهارم عرض کامل را اشغال کند. فضایی که در صفحه اصلی اشغال می شود، می تواند بازدید کننده را درگیر خود کند یا باعث حواس پرتی شود.
برای تعیین این موضوع ، باید به این فکر کنید که بازدید کننده شما در صفحه اصلی چه کاری انجام می دهد. بهترین طراحی های صفحه اصلی، این موضوع را کاملاً واضح نشان می دهد. صفحه اصلی اپل با درخواستهای واضح و قوی ، مثال خوبی درباره ی ترکیب است.

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

طراحی صفحه اصلی سایت

3. بستر را در نظر بگیرید

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

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

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

روانشناسی طراحی سایت

روانشناسی نقش بسزایی در طراحی UX بازی می کند و طراحی صفحه اصلی مناسب از این مزیت استفاده خواهد کرد. دو اصل روانشناختی که بسیار مفید می باشد قانون Hick و اثر Von Restorff هستند. قانون هیک می گوید که زمان لازم برای تصمیم گیری با تعداد و پیچیدگی انتخاب های ارائه شده به کاربر افزایش می یابد. به عبارت دیگر، هرچه گزینه های بیشتری به شخصی دهید ، تصمیم گیری سریع برای او سخت تر خواهد بود. ایجاد تأثیر در کمتر از 10 ثانیه ، باید در اولویت باشد. سعی کنید مقدار اطلاعات ، تعامل و درهم و برهمی کلی صفحه را محدود کنید.

اصول طراحی مانند جابجایی ، پنهان کردن و گروه بندی به عنوان ابزاری عالی برای ساده سازی یک رابط کاربری می باشد:

  • جابجایی زمانی است که شما محتوا را به روش های دیگر توزیع می کنید ، مانند در دسترس قرار دادن آن از طریق یک دکمه یا تصویر ، برای کاهش تعداد نام ها یا دسته ها در منو.
  • پنهان کاری به پوشاندن یا عدم افشای اطلاعات بیشتر مربوط می شود تا زمانی که یک اقدام خاص باعث اقدام به عمل آن شود. یک مثال خوب برای این مورد ، منوی کشویی است ، زیرا تا زمانی که بازدید کننده روی عنوان صفحه مربوطه کلیک نکند یا نشانگر را روی آن قرار ندهد، مشخص نمی شود.
  • گروه بندی اطلاعات مشابهی ترتیب می دهد تا بازدید کننده تحت فشار قرار نگیرد. به عنوان مثال، یک چرخ فلک تصاویر را گروه بندی می کند و آنها را به صورت افقی در صفحه، نمایش می دهد، که معمولاً با یک حاشیه جدا می شوند. هدف در اینجا کاهش بار شناختی برای کاربر است.

اثر Von Restorff ، که به عنوان "اثر انزوا" شناخته می شود ، نشان می دهد هنگامی که چندین محرک همگن را به کاربران ارائه می دهید ، آنها فقط یک محرک را که با بقیه متفاوت است به خاطر می آورند. ایجاد سلسله مراتب بصری که از کنتراست بالا استفاده کند، راهی عالی برای دستیابی به این هدف است. به عنوان مثال ساختن یک نماد با رنگ متفاوت از سایر نمادها آن را جدا می کند و به بازدید کننده می گوید که چیز منحصر به فرد یا مهمی در آن وجود دارد. این امر همچنین برای قابلیت جستجو مهم است ، بنابراین بازدید کننده شما می تواند به سرعت بررسی کند که آیا وب سایت مناسب آنها است یا خیر. اجرای نوعی استطاعت الگویی نیز به کشف کمک می کند و می تواند از آن پشتیبانی کند.

نتیجه

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

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

صفحات مشابه

ارسال نظر
توجه داشته باشید، درج اطلاعات "ایمیل" ، "وبسایت" و "شماره تماس" اختیاری بوده و به هیچ وجه منتشر نخواهد شد. این اطلاعات صرفا جهت پاسخگویی در موارد نیاز استفاده می شوند.