طراحي انسان‌محور (چگونه طراحي را ارزيابي كنيم؟)

در پست قبلي مشكلات كاربردپذيري را معرفي كرديم و گفتيم كه 10 قاعده وجود دارد كه با استفاده از آن‌ها مي‌توانيم به صورت اصولي، كاربردپذيري يك طراحي را مورد بررسي و ارزيابي قرار دهيم. اين قواعد در شكل زير نمايش داده شده‌است.

قواعد مكاشفه‌اي براي بررسي طراحي
قواعد مكاشفه‌اي براي بررسي طراحي

اين قواعد به سه دسته‌ی اصلي تقسيم مي‌شوند:

  • فهم كاربر: طراحي بايد به گونه‌اي باشد كه كاربر سيستم، واسط آن را به سادگي بفهمد و درك كند.
  • عمليات كاربر: طراحي بايد به گونه‌اي باشد كه كاربر بتواند به سادگي با سيستم كار كند.
  • ارائه‌ی بازخورد به كاربر: سيستم بايد بازخورد مناسب به كاربران بدهد.

در اين پست قاعده‌ی اول و دوم را بررسي مي‌کنیم.

فهم كاربر

سازگاري (Consistency)

به زبان ساده يعني واسط كاربري سيستم بايد با خودش و ساير نرم‌افزارهاي هم‌رده سازگار باشد. به بياني ديگر، لازم نيست واسط كاربري بسيار جديدي خلق كنيم و كافي است از نرم‌افزارهاي موجود و پركاربرد ايده بگيريم. شكل زير را ببنيد، كدام براي شما بيشتر آشناست؟

جای کلیدها نباید عوض شود؛ سازگاري با ذهن و حافظه‌ی كاربر بايد حفظ شود.
جای کلیدها نباید عوض شود؛ سازگاري با ذهن و حافظه‌ی كاربر بايد حفظ شود.

مثال ديگر از سازگاري، اين است كه اسم برچسب‌ها، فرم‌ها و ... بايد براي كاربر آشنا و تداعي‌كننده باشد. حتماً تا به حال براي شما پيش آمده‌است با فرمي مواجه شويد كه معني گزينه‌هايی که باید انتخاب کنید برایتان واضح نباشد مثل فرم زير:

براي كاربر واضح نيست كدام گزينه را بايد انتخاب كند!
براي كاربر واضح نيست كدام گزينه را بايد انتخاب كند!

نکته‌ی ديگر اين است كه رفتار نرم‌افزار بايد شبيه به نرم‌افزارهاي هم‌رده باشد. براي مثال، در خط فرمان (Command Line) وقتي با گزينه‌ی «Yes/No» مواجه مي‌شويم، انتظار داريم معني Yes ادامه دادن فرآيند (Continue) باشد و نه اتمام آن. اما در شكل زير رفتار نرم‌افزار برعكس آن چيزي است كه انتظار داريم.

رفتار عجيب!
رفتار عجيب!

ديالوگ زير يك مثال خوب است؛ به جاي اينكه كاربر را با سوال Yes/No مواجه كند، گزينه‌هايي پيش رویش گذاشته كه تصميم‌گيري را براي وي ساده‌تر مي‌كند.

زبان مشترك (Using Familiar Language)

بخش دوم در بهبود فهم كاربر، استفاده از زبان نزديك به ذهنيت كاربر است كه در شكل زير نشان داده شده‌است.

به زبان ساده، کلمات و اسامي باید طوری انتخاب شوند که کاربر سردرگم نشود و اسامي انتخاب شده با ذهنيت كاربر تناقض نداشته باشند. براي مثال، شكل زير را در نظر بگيريد. اسامي كامپيوتري طوري انتخاب شده‌اند كه با دنياي فيزيكي و ذهنيت كاربران تناسب داشته باشند.

طراحي تميز و متناسب با عملكرد (Clean and Functional Design)

بخش سوم در بهبود فهم كاربر، طراحي تميز است كه در شكل زير نشان داده شده‌است.

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

يا وب‌سايت اجاره‌ی خودرو در شکل زير كه حتماً شما را به ياد وب‌سايت‌هاي 20 سال پيش مي‌اندازد (اگر سنتون قد بده 😊)؛ پر از لينك و عكس اضافه است و طراحي تميزي ندارد.

يا گوگل فرم زير که با طراحي قديمي که دارد و پر از Border هست، حواس كاربر را پرت مي‌کند. این نمونه‌ای از يك طراحي نويزي است.

به عنوان آخرين مثال از اين بخش، وب‌سايت وام دانشجويي زير را ببنيد كه كاربر مي‌تواند به آن Widget اضافه كند. بديهي است وقتي شما به وب‌سايت وام مراجعه مي‌كنيد خيلي علاقه‌مند به اضافه كردن Widget آب و هوا يا چيزهاي مشابه نيستيد!

عمليات كاربر

بخش دوم از قواعد، مربوط به ساده‌سازي عملكرد كاربر است كه در شكل زير نمايش داده شده‌است. در ادامه هر كدام را توضيح مي‌دهيم.

آزادي عمل كاربر (Freedom)

در هنگام ارزيابي طراحي بايد از خود سؤال كنيم آيا به کاربر اين امكان را می‌دهیم که کارهایی که می‌خواهد را آزادانه انجام دهد؟

مثلاً اگر کاربر اشتباهی کرد، آیا می‌تواند عمل خود را Cancel کند؟ آيا كاربر توانايي Undo و Redo كردن را دارد؟ آيا كاربران را مجبور به طي يك مسير مشخص مي‌كنيم؟

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

شكل زير را به عنوان يك مثال در نظر بگيريد. كاربر بلافاصله قبل از پرداخت هم مي‌تواند تعداد سفارش‌هاي خود را تغيير دهد و اين يعني آزادي عمل كاربر.

يا وب‌سايت‌هاي خريد بليط که به كاربران اين امكان را مي‌دهند كه قيمت بليط را نه فقط در روزي كه انتخاب كرده‌اند بلكه در روزهاي مجاور هم مشاهده كنند.

انعطاف‌پذيري (Flexibility)

بخش دوم از عمليات كاربر مربوط به انعطاف‌پذيري است كه در شكل زير نمايش داده شده‌است.

طراحي باید انعطاف‌پذير باشد. در ادامه مثال‌های جالبی را بررسی می‌کنیم.

برای كاربران حرفه‌اي‌تر باید Shortcut هاي لازم براي دسترسي به منوها را فراهم كنيم.

جاهايي كه كاربر بايد يك انتخاب انجام دهد مقادير پيش فرض مناسب ارائه كنيم.

هر جایی که لازم است به كاربر اطلاعات زمينه‌اي مناسب بدهيم. مثلاً در Calendar، اگر اطلاعات آب و هوا را قرار دهيم كاربر بهتر برنامه‌ريزي مي‌كند.

مثال ديگر این است که وقتي كاربري قصد Unsubscribe از ليست ايميل ما را دارد به وي، گزينه‌هاي انعطاف‌پذيري پيشنهاد بدهيم. مثلاً پيشنهاد دهيم كه تعداد ايميل‌ها را محدود مي‌كنيم.

تشخيصِ به جاي يادآوری (Recognition over recall)

آخرين نكته‌ی اين بخش، شايد مهم‌ترين نكته‌ی اين بخش نيز باشد. به زبان ساده، كاربر در كار با نرم‌افزار نبايد به حافظه‌ی خود رجوع كند كه مثلاً فلان دكمه چه مي‌كرد. بلكه طراحي بايد به گونه‌ای باشد كه كاربر در لحظه‌ی استفاده، كاربرد دكمه را بفهمد.

مثال زير جالب است. كاربر چون فراموش مي‌كرده هر غذا چه شماره‌اي داشته، آن‌ها را روي كاغذ نوشته‌است!

به عنوان مثالی ديگر در اين بخش، وقتي در وب‌سایتی Navigation وجود دارد كاربر بايد بداند كجاي عمليات قرار دارد.

برگرفته از كلاس درس Scott Klemmer