بررسی Heuristic evaluation در آیکون ها

یکی از موارد مهمی که طراحان تجربه و رابط کاربری باید بلد باشند؛ 10 قانون جیکوب نیلسون برای ارزیابی ابتکاری یا همون Heuristic evaluation هست که اگر آشنایی ندارید بهتره قبل از خوندن این مقاله به مقاله امیر تقی آبادی که درباره این موضوع نوشتن مراجعه کنید.

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

ویژگی های یک آیکون مناسب:

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

مشکلات و راه حل مناسب در طراحی آیکون ها:

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

یا مورد دیگه که مربوط به آیکون لایک (قلب) و ستاره هست، این دو آیکون برای نشان دادن علاقه و رتبه بندی استفاده میشوند اما در سایت های متفاوت عملکرد مختلفی دارند.

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

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

آیکون ها در موبایل در مقایسه با دسکتاپ (تمامی اسکرین های بزرگ مثل تلویزیون، مانیتور و لپتاپ) اهمیت بسیاری دارد به این خاطر که صفحه نمایش کوچکتر میشه عناصر کمتری هم برای جلب توجه کاربر استفاده میشه، برای مثال اندازه نسبی آیکون منوی همبرگری یک وبسایت در موبایل حدود 25-20% صفحه رو شامل میشه و زمانی که این آیکون در دسکتاپ نمایش داده میشه بطور کلی اندازه یکسانی با نسخه موبایل داره اما چون صفحه نمایش بزرگتر هست حدود 3.5% فضا رو اشغال میکنه و کوچکتر دیده میشه؛ برای رفع این مشکل بهتره از منوی ناوبری (Navigation menu) استفاده بشه تا عناصر قابل کشف باشند.

و در آخر اگر طراحی آیکون انجام میدید و یا طراح رابط کاربری هستید بهتره این موارد رو به یاد داشته باشید:

• آیکون های رقبا رو تحلیل کنید، به این دلیل که طبق قانون هماهنگی و رعایت استاندارد جیکوب نیلسون (Consistency and standards) به مرور در ذهن افراد برای استفاده از سایت یا اپلیکیشن‌ ها چهارچوب‌ هایی شکل گرفته که بهتره رعایت بشوند.
• اگر آیکون جدیدی طراحی میشه با رعایت دستورالعمل ها باشه تا به راحتی قابل شناسایی و به یاد ماندنی باشند.
• ساده و شماتیک باشند.
• از قانون 5 ثانیه استفاده شود، اگر فکر کردن به یک آیکون مناسب برای چیزی بیش از 5 ثانیه طول بکشد، بعیده که اون آیکون بتونه به طور موثر اون معنا رو بیان کند.
• با کاربر واقعی تست شود، برای تست شناسایی از کاربر، معنای آیکون پرسیده بشه و برای تست به یاد ماندن هم بعد از مدت زمانی که از تست اول گذشت تست دوم با همون کاربرها انجام شود.
• تا جای ممکن آیکون ها دارای متن باشند.

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