آیکون به جای منو سایت ! خوب یا بد؟!

ایکون منو مترو

وقی که یک سبک از طراحی یا تکنیک مطرح میشه و طراحی به این سبک معنی مدرن و بروز بودن رو میده، کمتر کسی به این موضوع فکر میکنه که این سبک علاوه بر زیبایی ایا کاربردی هم هست یا نه؟!
اکثر وبمستر ها به داشتن یک سایت با سبک مدرن افتخار میکنن و به بروز بودن و مدرن بودن سبک مورد استفاده در سایتشون می بالند! در اکثر مواقع اول به سبک جدید سوئیچ می کنند و بعد در اینده، درباره کاربردی بودن سبک مورد استفاده فکر میکنند!

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


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

ایکون منو

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

یک نمونه با طراحی مناسب:

ایکون منو


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

 

f_reading_pattern_eyetracking

 

مسیر چشم کاربر در مشاهده سایت

این مقالات مطالعه شود:

+  و +

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

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

ایکون منو

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


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

ایکون منو

ایکون منو

ایکون منو


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


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


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


چند نمونه سایت با طراحی منوی مناسب:
beoplay.com ,apple.com ,opera.com و avira.com منوهایی خوب و کاربردی طراحی کردند و میتونند الگویی برای سایت های دیگه باشند.
سایت beoplay.com در ابتدا ایکون هایی را به عنوان زیر منو، منوهای اصلی قرار داده بود. اما اگر الان به این سایت مراجعه کنید، مشاهده خواهید کرد که منوها هیچ زیر منویی ندارند و ایکون ها به قسمتی پایین تر منتقل شده اند.

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

 

 

نظرات (3)

  • Avatar

    رضا

    |

    الان فکر میکنید هدر سایت شما خیلی کاربردی و جذابه؟!
    ایکون منو خیلی بهتر از منوی سادست ، هم جذاب هم کاربردی…

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      در اینده در یک پست، فاکتور های یک هدر خوب رو معرفی میکنم.
      در ضمن، عرض کردم که بنده متخصص ux نیستم و تجربیاتم رو بیان میکنم.
      موفق باشید

      Reply

  • Avatar

    کامیار

    |

    سلام
    کاملا موافقم، همیشه فکر میکردم فقط منم که از این ایکون منوی بالای سایت بدش میاد 🙂

    Reply

دیدگاهتان را بنویسید

لینک دوستان

template4
قالب جوملا | جومپلیت | دانلود قالب رایگان جوملا و فروشگاه قالب جوملا

جومپلیت ، مرکز دانلود قالب جوملا و ارائه دهنده قالب رایگان جوملا ، قالب جوملا 2.5 و قالب فارسی جوملا است.

joomplate [@] gmail.com

ورود کاربران

بازيابي رمز عبور!