7 نکته اساسی در طراحی یک Header جذاب
یک Header جذاب برای وب سایت اغلب اولین چیزی است که کاربر مشاهده می کند. این آیتم می تواند تجربه کاربری را بهبود بخشیده و یا از بین ببرد؛ کیفیت برند شما را افزایش داده و تاثیرات دیگری بیشمار دیگری داشته باشد. برای کمک به حفظ کاربران و ارتباط برقرار کردن آنها با طراح شما، نیاز به داشتن یک هدر جذاب و زیبا دارید که نه تنها در صفحه اصلی، بلکه در تمامی صفحات داخلی وب سایت شما قابل رویت باشد (به خاطر داشته باشید، بسیاری از کاربران، ابتدا وارد صفحه اصلی وب سایت شما نشده و از طریق موتورهای جستجو به صفحات داخلی ورود می کنند). در اینجا نحوه انجام این کار را برای شما شرح می دهیم.(در دوره ویدئویی و رایگان HTML5 با نحوه راه اندازی و طراحی هدر آشنا شدهایم).
1.استفاده از یک تصویر خیره کننده
یک تصویر فوق العاده همیشه می تواند اولین تاثیر را داشته باشد. فارغ از اینکه تصویر شما بصورت یک عکس، ویدئو، انیمیشن یا سایر المان های هنری مانند طراحی گرافیکی باشد، می بایست به گونه ای انتخاب شده باشد که کاربران از دیدن آن لذت برده و با فضای وب سایت ارتباط برقرار کنند. تصویر هدر، چیزی بیشتر از یک تصویر زیبا است. این تصویر، دروازه ای به سمت تمامی محتوای داخل صفحه می باشد. یک تصویر به تنهایی یک نقطه شروع بده اما می بایست با المان های دیگر همخوانی داشته تا ارزش و اعتبار محتوایتان را بالاتر ببرد. المان های دیگری که ممکن است در هدر به نمایش گذاشته شوند شامل:
- متن هدر
- لوگو یا نشانه برند
- دکمه CTA (Call to action)
- عناصر نويگیشن
- باکس جستجو
مطلب مرتبط:تمامی مقالات مربوط به طراحی وب
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۶۹ هزار تومان
تصاویری را انتخاب کنید که واضح بوده و رزولوشین بالایی داشته باشد؛ بعلاوه تصویر شما می بایست کنتراست زیادی برای سایر عناصر موجود در هدر مانند متن یا دکمه ها فراهم آورد. کاربران اغلب تمایل به دیدن چهره ها دارند، بنابراین این دقت کنید که در صورت امکان از تصاویر افراد در هنگام استفاده از محصولات یا خدمات خود استفاده کنید.
2.عناصر نویگیشن را در تصویر ترکیب کنید
در طراحی یک Header جذاب باید به ترکیب عناصر دقت داشته باشیم،هدر و نویگیشن عناصر جداگانه ای نیستند؛ این دو آیتم اغلب مفاهیم دیداری یکسان و مشابهی دارند. خواه شما یک نویگیشن منو کامل را انتخاب کنید یا ترجیحتان استفاده از آیکون های کوچک باشد، عناصر نویگیشن بخشی از برنامه شما برای طراحی هدر باشند. هنگامی که مشغول طراحی سایت شرکتی خود بوده و برای هدر و نویگیشن خود برنامه ریزی می کنید، باید دقت کنید که استفاده از الگوی نویگیشن استیکی، کاملا مناسب می باشد. با این کار، حتی اگر کاربران دورتر از هدر وب سایت اسکرول کرده باشند نیز همچنان به سرعت می توانند با استفاده از این الگو در طرح وب سایت شما جا به جا شوند.
وظیفه ای که عناصر نویگیشن در هدر شما انجام می دهند، از انتظار شما خارج خواهد بود. زیرا این عناصر اغلب بیش از چندین متن و یا آیکون اهمیت داشته و به ایجاد تمامیت و سلسله مراتبی در هدر کمک کرده و همچنین به کاربران راه برقراری ارتباط با طرح را نشان می دهند.
3.ایجاد پیام متمایز
تنها به کار بردن یک تصویر خوب و مناسب در هدر کافی نیست بلکه باید توجه کنید که پیام هدر شما چگونه به مخاطبان القا شده و آیا هدر توانایی رساندن آنچه در ذهن شما می گذرد را به کاربران دارد؟
- آیا این هدر می تواند آنچه شما از محتوای درج شده در سایت انتظار دارید را برای کاربران بازگو کند؟
- آیا تمامی عناصر موجود، پیامی منحصر به فرد را که درک آن ساده باشد به مخاطب می رساند؟
- آیا این طرح به کاربران مسیر حرکت بعدی در وب سایت و یافتن مسیری که نیازمند آن هستند را نشان خواهد داد؟
اطمینان حاصل کنید که عناصر گوناگونی را استفاده کرده اید که ضمن ایجاد تاثیرات گوناگون در مخاطب، یک پیام واحد را به وی منتقل کند.
4.سعی کنید تایپوگرافی فوق العاده داشته باشید
تایپوگرافی بزرگ یک راه مناسب برای تاثیر بر مخاطب است. استفاده از این تکنیک منجر به جلب توجه مخاطب به هدر، پیش از شروع به خواندن سایر مطالب موجود در صفحه می شود. از آنجا که جایگاه قرارگیری تایپوگرافی متفاوت است، بنابراین سعی کنید از دو مکان عمده که برای قرار دادن تایپوگرافی در هدر بیشترین استفاده را دارد استفاده کنید.
5.توجه به الگوهای خواندن
طبق با تحقیقات انجام شده توسط گروه نیلسن نورمن، خواندن وب سایت تحت تاثیر سه الگوی گوناگون و اصلی حرکت چشم انجام می شود. تمامی این الگوهای خوانش بستگی به متنی دارد که مخاطب در هنگام خواندن آن را مقابل خود داشته و به عبارت ساده تر، دسته از عوامل دیداری که منجر به حرکت چشم ها می شوند در این مسیر دخیل هستند. مطالعات انجام شده در مورد نحوه خواندن مخاطبان از اهمیت بالای برخوردار هستند زیرا به شما در قرار دادن عناصر نوشتاری گوناگون در طراحی وب سایت، طراحی پوستر و یا سایر طرح هایی که نوشتار در آنها تاثیر زیادی دارد کمک خواهد کرد.
- الگوی F: خوانندگان ابتدا با یک حرکت افقی چشم بخش های بالایی صفحه را خوانده و سپس با ایجاد یک فاصله کوتاه و حرکت افقی چشم بخش های پایین تر مطلب را می خوانند و در نهایت به سمت چپ محتوا رجوع کرده که به صورت عمودی انجام می شد.
- الگوی گوتنبرگ: این الگو عمدتا برای صفحاتی که از چپ به راست نوشته می شوند (زبان هایی غیر از فارسی) دیده می شود. در این الگو، چهار ناحیه فعال خواندن وجود دارد که با دو توقف افقی در بالا صفحه از چپ به راست شروع شده و سپس از بخش بالایی سمت راست به بخش پایینی سمت چپ ادامه می یابد (مانند حرف z).
دقت کنید عناصر مختلف، علی الخصوص عناصر کلیدی را با توجه به الگوی خوانش متن خود در مکان های مناسبی که خواننده آن را می بیند قرار دهید تا بیشترین ارتباط را با مخاطب خود گرفته و بالاترین تاثیر را در وی ایجاد کنید.
6.قرار دادن عناصر قابل کلیک
آیا تصویر وب سایت شما تعاملی است؟ آیا شامل عناصر قابل کلیک (یا tappable) برای تشویق تعامل کاربران است؟سربرگ می تواند مکان مناسب برای تماس با دکمه اقدام ساده مانند فرم جمع آوری آدرس ایمیل باشد.با کلیک بر روی عناصر کاربر را به صفحات داخلی سایت هدایت کنید یک عنصر اقدام ساده می تواند در این زمینه از طراحی موثر باشد.
اگر مطمئن نیستید که کدام عناصر سایت را بر روی هدر قرار دهید؟شما می تواند یک دکمه اقدام ساده را با طراحی دلخواه در هدر سایت قرار دهید،مانند دکمه ثبت نام رایگان،یا دکمه خرید،دکمه دریافت تخفیف و یا اینکه با قرار دادن یک دکمه تماس با ما با کاربران سایت تعامل داشته باشید.
7.استفاده از لایههای ساده
اگر می خواهید تمامی عناصر ذکر شده در بالا را در هدر وب سایت خود استفاده کنید یک راه ساده پیشرو دارید آن هم استفاده از لایه های ساده است.بهترین و جذابترین هدر،هدری است که با کاربران براحتی تعامل داشته باشد.این قانون قوانین تئوری طراحی را دنبال می کند و از یک عنصر غالب برای جلب کاربران و حمایت از تکنیک های طراحی استفاده می کند تا به آنها کمک کند که اهداف سایت را شناسایی کنند.
منبع:*