هدر سایت و طراحی آن

4423 بازدید

دسته بندی: فناوری - مقالات آموزشی منتشر شده در دسامبر 14, 2021 نویسنده: darolfunun زمان مطالعه: 6 دقیقه 0 نظر به روز شده در جولای 27, 2022

5/5 - (1 امتیاز)

هدر سایت چیست؟

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

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

وجود چه المان هایی در هدر سایت ضروری است؟

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

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

لوگو:

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

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

منو:

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

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

CTA :

به صورت کلی CTA یا (Call To Action) به نوعی دعوت به اقدام می باشد
کال تو اکشن یا CTA انواع مختلفی دارد به طور مثال:

دکمه ورود و عضویت در سایت
دکمه پرداخت، دکمه خرید یا دکمه افزودن به سبد خرید در فروشگاه های آنلاین
لینک برای بازدید از صفحات یا محصولات دیگر
فرم دریافت ایمیل یا شماره تماس
لینک های (ادامه مطلب یا مشاهده بیشتر) در وبلاگ ها
بنر های تبلیغاتی دارای لینک
دکمه‌ به‌ اشتراک‌گذاری مطالب و …

در هدر ها اصولا از دکمه ورود و ثبت نام و پیوند بخش های اصلی سایت استفاده می شود.
توجه داشته باشید در دکمه های کال تو اکشن از رنگ هایی استفاده کنید که کاربران را به کلیک ترغیب کند.

فرم جستجو:

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

اطلاعات تماس:

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

اندازه هدر سایت باید چقدر باشد؟

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

استفاده از تصاویر و ویدیو ها در هدر سایت

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

استفاده از یک عکس نسبت به متن به مراتب تاثیر بهتری روی مخاطب دارد زیرا عناصر بصری توجه مخاطبان را بیشتر جلب خواهند کرد.
اگر عکس های با کیفیت باشد و خوبی دارید می توانید به صورت اسلاید و یا از تصویر های Illustrations استفاده کنید.

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