توی فرایند طراحی UI/UX یه سری اصل وجود داره که بهشون میگیم heuristics (یا اصول جیکوب یا جاکوب) که به دیزاینرها و محققان می‌تونن با کمک اونها به راحتی یه رابط کاربری رو ارزیابی کنن. این ده اصل توی مقاله به اسم usability heuristics میشناسیم. با این بررسی شما می‌تونین تا حدودی محصولتون رو از بیرون ببینین و تشخیص بدین که کدوم بخش‌هاش نیاز به بهبود دارن.
بعلاوه می‌تونین رقباتون رو بررسی کنین تا بفهمین که کجای کارشون نقصی هست یا چیزی رو درست انجام ندادن تا شما بتونین اصلاحش کنین. و از همه مهمترین این بررسی یه زبان یکسان و استاندارد در اختیار ما می‌ذاره که بتونیم باهاش طراحی‌ها رو بررسی کنیم.
این مدت دارم با یه تیمی که قراره یه محصول در زمینه فروش میوه و سبزیجات آماده کنن کار میکنم. یکی از وب‌سایت/اپلیکیشن‌هایی که بررسی کردم مسترمیوه بود. چطوره که یه بررسی usability heuristics رو روی یه محصول واقعی با هم ببینیم؟
معیار عمل usability heuristics در واقع همون ده اصل جاکوب هست که تو سال 1994 ارائه شده و اصول کلی طراحی یه رابط کاربری رو تشکیل می‌دن.
من توی این مقیاس یه عددی بین صفر تا 4 به میزان بد بودن طرح میدم. صفر یعنی همه چیز خوبه و 4 یعنی شدیدا بد و افتضاحه. نهایتا با مقایسه این عدد ها میشه فهمین که یه محصولی کجاهاش بد طراحی شده
این اصل به صورت خلاصه می‌گه کاربر همیشه باید بدونه کجاست.
سیستم همیشه باید بگه در حل انجام چه کاریه. چقدر از کار مونده و بعدش باید چیکار کنه. اگه مشکلی هست واضح باشه که مشکل چیه. و خلاصه اینکه کاربر چقدر دیگه باید راه بره تا به مقصدش برسه
مشخصه که این موضوع توی یه صفحات خیلی مهمتره. جاهایی که کاربر وارد یه روند مشخص شده باید بهش بگیم انتظارمون از قدم‌های بعدیش چیه. همونطور که تو عکس مشخصه مثلا توی سبد خرید خوبه که کاربر بدونه کجای مسیره. یا توی صفحات داخلی بهتره که از بردکرامب استفاده کنیم که کاربر گیج نشه (البته توی سایت). از این نظر مستر میوه تقریبا خوب عمل کرده. البته طراحی مراحل یه جوریه که انگار وزن همشون یکسانه. در واقع حس درستی از زمانی که من باید تا آخر این مسیر طی کنم بهم نمی‌ده. بنابراین من بهش یک میدم.
امتیاز:1 (مشکل قابلیت استفاده(usability heuristics) جزئی: رفع این مشکل باید با اولویت کم باشد)
این اصل چی می‌گه؟ خیلی خلاصه می‌گه سیستم باید جوری حرف بزنه که کاربرش بفهمه این چی می‌گه.
اگه سیستم مثلا یه سایت مرتبط با پزشکیه و مخاطب‌ها اقراد معمولی هستند نباید از اصطلاحات تخصصی پزشکی استفاده کنه ولی اگه مخاطبش پزشکه استفاده از لغات تخصصی خوبه. اگه از آیکن استفاده میشه تا جایی که میشه شبیه به خود همون شیء توی دنیای واقعی باشه.
توی مستر میوه در این زمینه هم من ایراد زیادی ندیدم. بعضی آیکن‌ها (مثل ضمانت تعویض محصول) به نظرم می‌شد که بهتر باشن. ولی به صورت کلی انیمیشن‌هایی که موقع هاور و ... توی سایت اتفاق می‌افته به نظرم چندان خوب نیست و زیادی سریعه. شاید اگه واسه انیمیشن ها از easy-in-easy-out استفاده می‌کرد بهش صفر می‌دادم. اما توی این مورد هم بهش امتیاز یک میدم.
امتیاز:1 (مشکل قابلیت استفاده(usability heuristics) جزئی: رفع این مشکل باید با اولویت کم باشد)
کاربر باید بتونه کارهای مختلف انجام بده و آزاد باشه اما اگه اشتباها یه کاری انجام داد باید دکمه «اشتباه کردم» هم داشته باشیم. کاربر باید بتونه کاری که کرده رو برعکس کنه و از مسیری که رفته برگرده. مثلا اگه شما چیزی رو اشتباه واسه کسی فرستادین یه امکان آندو داشته باشه. یه چیزی شبیه به دکمه کنترل زد تو اکثر نرم‌افزارها.
از این نظر مسترمیوه خیلی خوب عمل کرده. مثلا توی سبد خرید می‌تونم تعداد انتخابیم رو تغییر بدم یا محصول رو از سبد حذف کنم. یا جلوتر توی مسیر پرداخت، می‌تونم آدرسم رو راحت عوض کنم. حتی ضمانت تعویض محصول هم در همین رابطه به ایجاد کنترل و آزادی مناسب واسه کاربر خیلی کمک کرده. من مشکلی نمی‌بینم پس صفر میدم.
امتیاز:0 (مشکل قابلیت استفاده وجود ندارد.)
یه سری چیزها توی سایت‌ها و اپلیکیشن‌ها معمولا یکسانه. ما به مرور بهشون عادت می‌کنیم و به صورت کلی اون انتظار رو ازشون داریم. مثلا ما از یه علامت ضربدر قرمز بالای یه صفحه انتظار داریم که صفحه رو ببنده. از آیکن ذره‌بین انتظار جست‌جو داریم و .... رعایت این موارد رو اصطلاحا می‌گن external consistency یا هماهنگی بیرونی. اما هماهنگی داخلی هم مهمه. مثلا اگر یه جا آیکن‌ها به صورت طیف رنگی هستن یه جای دیگه نباید بی‌دلیل تک رنگ باشن.
حتی دیدن همین بخش کوچیک از سایت هم نشون می‌ده که هماهنگی بیرونی اصلا موضوعیتی نداشته! تقریبا هیچ چیزی سر جای خودش نیست. سبد خرید می‌تونست سمت چپ بالا توی منوی بالایی باشه. علاقه‌مندی‌ها معمولا داخل پروفایله و نه اولین چیز توی سایت. باکس سرچ و منوی سه قسمتی زیر خیلی بدجا نشستن. حتی منوی اصلی سایت اینقدر بد طراحی شده که توی لپ‌تاپ 14 اینچی من هم دو خط شده. آخرین چیزی که توی این تصویر مشخصه بردکرامب صفحه است که واسه صفحه اصلی به جای آیکن خونه (هوم) از آیکن مکان (لوکیشن) استفاده کرده.
سایت اهمیت زیادی هم به اینترنال کانسیستنسی هم نداده. که دیگه از خیرش می‌گذرم. من تا همین‌جا هم بهش 4 میدم!
امتیاز:4 (مشکل قابلیت استفاده بسیار شدید: رفع این مشکل باید با اولویت بالا باشد)
این کافی نیست که اگر کاربر اشتباه کرد بهش بگیم که اشتباه کرده. باید جلوی اشتباه کردن کاربر رو بگیریم.
به عنوان مثال توی فرم ثبت‌نام مستر میوه یه سری از فیلدها اجباریه. زیر فرم این توضیح داده شده که کاربر بدونه که باید این فیلد رو حتما پر کنه. اما برای کپچا ستاره نذاشتن. یعنی کاربر ممکنه کپچا رو خالی بذاره. که در این صورت بهش خطا می‌ده. این مورد جاهای دیگه‌ای از سایت هم رعایت نشده. من توی این بررسی به سایت نمره 2 میدم.
امتیاز:2 (مشکل قابلیت استفاده کم: رفع این مشکل باید با اولویت پایین باشد)
این اصل یعنی باید با متن، تصویر و ... توضیحی به کاربر بدیم که نیاز نباشه به حافظه‌ش مراجعه کنه و به جای یادآوری چیزی با دیدنش تشخیصش بده.
از این نظر من توی سایت مشکل خاصی ندیدم. توی فرم ثبت نام یه گزینه شهر داره که بهتر بود وقتی استان رو انتخاب میکنم لیست شهرها رو بهم نشون می‌داد ولی چون اجباری نبود من پرش نکردم و زیاد مهم نبود.
یه مشکل تقریبا مرتبط شاید دکمه بازگشت با بالا باشه که وقتی اسکرول میکنم روی فوتر و با رنگ زمینه همون فوتره. تقریبا نمیشه تو نگاه اول دکمه رو دید. به همین خاطر من امتیاز یک رو میدم.
امتیاز:1 (مشکل قابلیت استفاده جزئی: رفع این مشکل باید با اولویت کم باشد)
کاربرها بسته به سطح تجربه‌شون با سیستم کار می‌کنن. کاربر بی‌تجربه‌ای که برای اولین‌بار از سیستم استفاده می‌کنه حتما نوع استفاده‌ش با کاربری که بارها به سیستم سر زده و راه‌های میان‌بر رو بلده فرق داره. اگه توی سایت یا اپلیکیشن، نکته خاص و روش کار خاصی باشه، کاربر کم‌تجربه ممکنه متوجه اون نشه. مثلا لایک کردن توی اینستاگرام با دوتا کلیک روی تصویر اتفاق می‌افته. کاربر بی‌تجربه ممکنه این رو ندونه. به همین‌خاطر اینستاگرام یه دکمه لایک کردن هم پایین پست می‌ذاره. بنابراین سیستم هر کارایی بالایی داره و هم انعطاف‌پذیری خوبی.
حداقل چیزی که از یه فروشگاه انتظار دارم اینه که با هر بار فشار دادن دکمه خرید نخواد من رو به زور ببره توی سبد خرید و اجازه بده من خریدم رو بکنم.
واسه من هر دفعه دیدن این پاپ‌آپ خیلی عذاب‌آور بود. و نمره ۲ میدم.
امتیاز:2 (مشکل قابلیت استفاده کم: رفع این مشکل باید با اولویت پایین باشد)
اینقدر راجع به تاثیر زیبایی صحبتت شده که هر حرفی به نظر اضافه بیاد. مینیمالیسم هم باعث میشه کاربر واسه رسیدن به هدف کمترین انرژی رو مصرف کنه. مثلا چرا من تو ویرگول می‌نویسم به جای اینکه وبلاگ داشته باشم؟ چون زیبا و مینیماله!
خیلی وارد جزئیات نشم ولی بعید می‌دونم خود طراح سایت هم نمره کمتر از ۲ بده. پس من هم با ارفاق ۲
امتیاز:2 (مشکل قابلیت استفاده کم: رفع این مشکل باید با اولویت پایین باشد)
علی‌رغم اینکه ما تلاشمون رو می‌کنیم که جلوی خطا رو بگیریم باز هم کاربر ممکنه دچار خطا بشه. تو این مواقع باید خطا رو دقیقا به توضیح بدیم. متن توضیح باید به زبان کاربر باشه نه زبان سیستم. باید جوری خطا رو بگیم که کاربر به سرعت بفهمه کجا چی رو اشتباه کرده و حالا باید چه کاری انجام بده.
تو این زمینه مسترمیوه بد عمل کرده. مثلا اگر توی فرم ثبت نام کپچا رو اشتباه بزنین اصلا معلوم نیست چرا به مرحله بعد نمی‌ریم! چون خطا رو بالای فرم نشون داده ولی ما تا پایین فرم اسکرول کردیم. بعلاوه متن کپچا هم بعضی جاها اتومات رفرش نشد! که یعنی من باید یه بار هم متن رو رفرش کنم. از من ایمیل و شماره موبایل خواست درحالی که اصلا وریفای نکرد که من درست وارد کرده باشم یا نه و ....
مستر میوه اینجا هم نمره بالایی می‌گیره. شرمنده مستر میوه ولی ۴
امتیاز:4 (مشکل قابلیت استفاده بسیار شدید: رفع این مشکل باید با اولویت بالا باشد)
واسه هر سیستمی خیلی بهتره که اصلا نیاز به آموزش نداشته باشه. یه جمله معروف هست که می‌گه:
طرح خوب مثل جوک خوبه. اگه لازمه توضیحش بدی خوب نیست!
با این حال، این موضوع همیشه صادق نیست. خیلی وقت‌ها نیاز به یک‌سری آموزش‌ها هست خصوصا اگه کاربر با چیزی اولین باره که داره روبرو میشه.
به همین خاطر مستر میوه توی فوتر سایتش چندتا گزینه گذاشته:
خبر بد اینکه هیچ‌کدوم کار نمی‌کنن. اگه قرار بود کار نکنن اصلا چرا اونجا نوشتینشون؟ این دفعه با افتخار ۴
امتیاز:4 (مشکل قابلیت استفاده بسیار شدید: رفع این مشکل باید با اولویت بالا باشد)
این بررسی واسه خود من که مفید بود. امیدوارم برای شما هم مفید باشه و تونسته باشم ده اصل جاکوب رو خوب توضیح داده باشم.
قابل مشاهده بودن وضعیت سیستم: ۱
مطابقت بین سیستم و دنیای واقعی: ۱
کنترل و آزادی کاربر: ۰
هماهنگی و رعایت استانداردها: ۴
جلوگیری از خطا: ۲
شناخت به‌جای یادآوری: ۱
انعطاف‌پذیری و کارایی سیستم: ۲
زیبایی و مینیمالیسم: ۲
بیان شفاف خطا و راه‌حل: ۴
راهنمایی و مستندات: ۴
