وبلاگ کاسپید

طراحی سایت و 7 نکته کلیدی در طراحی هدر

طراحی سایت و 7 نکته کلیدی در طراحی هدر

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

1- از یک تصویر خیره کننده و جذاب در طراحی سایت استفاده کنید.

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

  •  متن یا هدلاین
  •  لوگو یا علامت برند
  •  المان های ناوبری
  •  جستجو یا سرچ

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

2- از المان های ناوبری در هدر استفاده کنید

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


المان های ناوبری در هدر

3- سعی کنید پیامی متمایز در هدر سایت ایجاد کنید.

در طراحی سایت، قرار دادن یک تصویر زیبا در هدر به تنهایی کافی نیست. نکته مهم پیامی است که می رساند. پیامی که هدر به کاربران منتقل می کند باید:

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

4- سعی کنید از تایپوگرافی های فوق العاده بزرگ در طراحی سایت خود استفاده کنید.

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

  •  تایپوگرافی شما در صفحه اصلی (homepage)، چشمگیرتر و متمایز از سایر صفحات باشد.
  •  سایر صفحات (به جز صفحه اصلی) دارای یک چارچوب ساده و یکپارچه باشد.

5- سعی کنید در طراحی سایت خود الگوهای خواندن را در نظر بگیرید

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

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

6- سعی کنید حداقل یک عنصر قابل کلیک در هدر خود جای دهید.

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

7- از لایه های ساده در طراحی سایت خود استفاده کنید.

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



نتیجه گیری

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

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