چطور بفهمیم طراحی محصولمان خوب است؟ + مثال‌

۲۷ سال پیش، جیکوب نیلسون ۱۰ اصل کلی را برای طراحی تعاملی(Interaction Design) شرح داد. این اصول اکنون با عنوان Usability Heuristics شناخته می‌شوند. این اصول بر اساس سالها تجربه در زمینه مهندسی کاربردپذیری تدوین شده و به عنوان اصولی اساسی برای تعامل انسان و کامپیوتر تبدیل شده اند.

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

#1: Visibility of system status - قابلیت دیدن وضعیت سیستم

سیستم باید کاربر را از آنچه در جریان است، آگاه کند.

سیستم باید به کاربر نشان دهد که اکنون در کجاست یا چقدر از کاری مانده تا انجام شود یا اینکه چه اتفاقی قرار است رخ دهد. کاری انجام شده یا نه. به قول دیالوگ معروفی از فیلم سربه مهر: «در جریان بودن مسئله مهمی است» :)

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

بطور کلی پشت بردکرامب (Breadcrumbs)، لودینگ‌ (Loadings)، اسکلت صفحه‌نمایش (Skeleton Screens)، Upload progress و... همین اصل قرار دارد.

#2: Match between system and the real world - مطابقت بین سیستم و دنیای واقعی

سیستم باید به گونه‌ای حرف بزند که کاربر متوجه شود.

خود ما چون با محصولمان زیاد سروکار داریم معمولا متوجه این مسئله نمی‌شویم. باید از خود بپرسیم آیا چیزی در برنامه وجود دارد که کاربر نتواند آن را درک کند؟ آیا تمام عبارت‌ها و پیام‌ها واضح هستند؟ آیا از لغات تخصصی استفاده کردیم که کاربر ممکن است متوجه نشود؟

مخاطب هدف محصول باید بتواند زبان محصول را بفهمد. واژه «کیف پول» یقینا بهتر از واژه «اعتبار حساب» به کاربر منظور را می‌فهماند. البته این اصل فقط به زبان خلاصه نمی‌شود. باید حتی بررسی کنیم که آیا آیکون‌های بکار رفته در سیستم می‌توانند بخوبی منظور ما را برسانند یا نه؟

سطل آشغال ویندوز «Recycle Bin» یکی از نمونه‌های اولیه رعایت این اصل در طراحی است.

بخش پر کردن شماره کارت در درگاه‌های پرداخت یکی از نمونه‌های خوب است.

#3: User control and freedom - دسترسی و آزادی کاربر

سیستم باید به کاربر اجازه دهد تا اشتباهات خود را تصحیح کند.

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

#4: Consistency And Standards - هماهنگی و استانداردها

سیستم نباید کاربر را متعجب کند و تا جای ممکن باید از استانداردهای طراحی پیروی شود.

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

هماهنگی در ظاهر محصول هم مهم است مثلا دکمه ارسال باید در همه جا به یک رنگ باشد. یا اینکه فرم ها ظاهری یکسان داشته‌باشند. حتی پیام‌های میکروکپی‌ها هم باید به یک لحن باشند. نباید در جایی عامیانه با کاربر حرف بزنیم و در جای دیگر پیام سیستمی بدهیم.

#5: Error prevention - جلوگیری از خطا

سیستم تا جای ممکن باید جلوی خطای کاربر را بگیرد.

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

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

#6: Recognition Rather than recall - تشخیص به جای یادآوری

سیستم تا جایی که می‌تواند باید به کاربر سرنخ دهد.

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

یکی از مصادیق این اصل نمایش آخرین صفحات دیده شده و در فروشگاه‌های آنلاین آخرین محصولات بازدید شده توسط کاربر است. با این عمل کاربر براحتی می‌تواند آخرین محصولاتی را که دیده دوباره پیدا کند. بطور کلی توصیه می‌شود از Checkbox، Radio Button و Drop-down List چون گزینه‌ها مشخص است (سرنخ بیشتری ارائه شده) به جای Text Box بیشتر استفاده شود.

#7: Flexibility and efficiency of use - انعطاف پذیری و کارایی

سیستم باید به کاربران میان‌بر ارائه دهد.

برای تعامل بهتر کاربر با محصول بهتر است همیشه میان‌بر هایی بگذارید تا کاربرانی که تازه وارد نیستند و مدت زیادی است که از محصول استفاده می‌کنند بتوانند سریع‌تر با سیستم تعامل کنند.

کاربر می‌تواند کلیک راست کند و گزینه copy را انتخاب کند و هم می‌تواند ctrl +c را فشار دهد. در اینستاگرام کاربران برای لایک کردن پست ها دو راه دارند لمس آیکون قلب و دو بار لمس کردن پست.

#8: Aesthetic and minimalist design - زیبایی و طراحی مینیمال

سیستم باید از اصول مینیمالیسم پیروی کند.

چندی سالی است مینیمالیسم از هنر و معماری به طراحی محصولات دیجیتال راه یافته است. البته که مینمالیسم فقط به معنای زیاد کردن فضای سفید نیست. مینیمالیسم در طراحی یعنی آنچه که ضروری است باشد و بقیه حذف شوند. بطور کلی توجه کاربران را نسبت به عملی که باید در انجام شود جلب کنید. یا داده های دقیقی را ارائه بدهید که آنها می خواهند ببینند. Google.com نمونه کاملی از طراحی زیبایی شناسانه و مینیمالیستی است.

#9: Help users recognize, diagnose, and recover from errors - بیان خطا و ارائه راه حل

سیستم باید با زبان ساده خطاها را به کاربر بیان کند و راه حل ارائه دهد.

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

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

#10: Help and Documentation - راهنمایی و مستندات

سیستم باید کاربر را‌ آموزش دهد و راهنمایی کند.

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

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

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

پی‌نوشت:

اگر به این مطلب علاقه دارید پیشنهاد می کنم پست امیر تقی آبادی با عنوان کوتاه در مورد Heuristic Evaluation را هم بخوانید.

از این مطلب هم برای نوشتن این پست کمک گرفتم.