خانه / کارگاه‎ها / آموزش طراحی بر مبنای تجربه کاربری / چک لیست امتیازدهی برای افزایش کاربردپذیری سایت شما – بخش سوم

چک لیست امتیازدهی برای افزایش کاربردپذیری سایت شما – بخش سوم

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

تجربه کاربری

کیفیت نوشته و محتوا

تولید محتوا برای وب‌سایت‌ها با تولید محتوا برای بروشور و کاتالوگ‌های چاپی بسیار متفاوت است. کاربران به شکل متفاوتی روی وب محتوا را می‌خوانند. آن‌ها برای پیدا کردن محتوای موردنظرشان، وب‌سایت شما را اسکن می‌کنند.

  1. سایت دارای محتوای قانع‌کننده و منحصربه‌فرد است.
  2. متن مختصر و بدون هیچ‌گونه توضیحات غیرضروری یا نوشته‌های خوشامدگویی است.
  3. هر صفحه‌ی محتوا‌ با نتیجه‌گیری یا مفاهیم و متن‌هایی به پایان می‌رسد که به سبک هرمی معکوس نوشته شده است.
  4. در صورت نیاز صفحات از لیست‌های بولت دار و شماره گذاری شده استفاده می‌کنند، نه متن روایی.
  5. لیست‌ها با یک مقدمه دقیق آغاز شده‌اند (مثلاً یک کلمه یا عبارت)، که به کاربران نشان می‌دهد چطور آیتم‌ها با یکدیگر در ارتباط هستند.
  6. پاراگراف‌ها به‌صورت مناسب و بافاصله‌ی منطقی از یکدیگر نوشته شده‌اند.
  7. مهم‌ترین آیتم‌های لیست از بالا به پایین مرتب شده‌اند.
  8. اطلاعات به‌صورت ترتیبی، از کل به جزء، مرتب شده‌اند و این ترتیب کاملاً واضح و منطقی است.
  9. محتوا به‌صورت ویژه برای وب ایجاد شده است (صفحات وب شامل مطالب کپی شده از نشریات چاپی نیستند).
  10. صفحات محصول شامل جزئیات غیرضروری برای انجام خرید هستند، بنابراین کاربران فقط می‌توانند بر روی تصاویر محصولات زوم کنند.
  11. لینک‌ها به‌طور مناسب در محتوای سایت استفاده شده‌اند.
  12. جملات با فرمت صدای فعال نوشته شده‌اند.
  13. صفحات را می‌توان با تیترهای طولانی و تیترهای فرعی و بندهای کوتاه به‌سرعت اسکن کرد. سایت به‌جای بلوک‌های متنی پر لغت، از تصاویر، نقشه‌ها، نمودارها، گراف‌ها، فلوچارت‌ها و سایر ابزارهای بصری استفاده کرده است.
  14. هر صفحه به‌وضوح با یک عنوان توصیفی و مفید توضیح داده شده که مانند یک بوک مارک به نظر می‌رسد.
  15. لینک‌ها و عناوین لینک‌ها توصیفی و پیش‌گویانه هستند هیچ‌گونه لینک «کلیک کنید!» وجود ندارد.
  16. سایت از تیترهای مرموز و غیرقابل فهم استفاده نکرده است.
  17. اسامی لینک‌ها با عنوان صفحات مقصد هماهنگی دارند، بنابراین کاربران می‌دانند که چه زمانی به صفحه موردنظر خود رسیده‌اند.
  18. برچسب دکمه‌ها و لینک‌ها با واژه‌های عمل‌گرا آغاز می‌شوند.
  19. تیترها و تیترهای فرعی کوتاه، ساده و توصیفی هستند.
  20. واژه‌ها، عبارات و مفاهیم به‌کار رفته برای کاربران عادی آشنا هستند.
  21. لیست‌ها از شماره «۱» شماره گذاری شده‌اند نه از «۰».
  22. مخفف‌ها و اختصارات فقط در اولین کاربرد تعریف شده‌اند.
  23. لینک‌های متنی به‌اندازه‌ای طولانی هستند که قابل درک باشند، و به‌اندازه‌ای کوتاه هستند که باعث کاهش سردرگمی می‌شوند (به‌خصوص وقتی‌که در منوها استفاده می‌شوند).

لی آوت و طراحی بصری

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

  1. چگالی اسکرین برای کاربران هدف و وظایفشان مناسب است.
  2. طرح کلی کمک می‌کند که در مرحله بعدی بر روی چه چیزی باید تمرکز کرد.
  3. در تمام صفحات، مهم‌ترین اطلاعات (مانند موضوعاتی که به‌طور مکرر به کار می‌روند، ویژگی‌ها و عملکردها) در نیمه بالایی صفحه اطلاعات نشان داده می‌شوند («Above the fold»)
  4. سایت و المان‌های رابط کاربری ریتم و هارمونی مناسبی دارند.
  5. سایت را می‌توان بدون اسکرول کردن افقی استفاده کرد.
  6. مواردی که قابل کلیک هستند (مانند دکمه‌ها) به‌راحتی قابل کلیک کردن هستند.
  7. آیتم‌هایی که قابل کلیک کردن نیستند دارای مشخصه‌هایی نیستند که نشان دهند قابل کلیک کردن هستند.
  8. کارایی دکمه‌ها و کنترل‌ها از برچسب‌ها یا طراحی‌شان مشخص است.
  9. تصاویر قابل کلیک شامل توضیحات متنی کوتاهی هستند.
  10. لینک‌ها را بدون نیاز به‌کلیک روی تمام متون برای یافتن لینک می‌توان به‌راحتی شناسایی کرد.
  11. فونت‌ها باهم سازگاری دارند. (ترکیب تایپ فیس ها مناسب است).
  12. رابطه بین کنترل‌ها و عملکردشان مشخص است.
  13. آیکون‌ها و گرافیک‌ها استاندارد و یا بصری هستند (واقعی و ملموس).
  14. در هر صفحه ‌یک «starting point» یا نقطه شروع کاملاً قابل رویت وجود دارد.
  15. هر صفحه در سایت یک طرح کلی هماهنگ را در ذهن کاربر تداعی می‌کند و لی آوت تمام صفحات یکپارچگی خاص خود رادارند.
  16. فرمت صفحات سایت برای پرینت گرفتن، یا یک ورژن متناسب برای پرینت گرفتن سازگار است.
  17. دکمه‌ها و لینک‌ها نشان می‌دهند می‌توان بر روی آن‌ها کلیک کرد.
  18. اجزاء GUI (مانند رادیو باتن‎ها و چک باکس‌ها) به‌طور مناسب استفاده شده‌اند.
  19. فونت‌ها خوانا هستند. (سایت دارای تایپوگرافی مناسبی است).
  20. سایت از متن‌های کج نویسی شده استفاده نکرده و زیر لینک‌ها خط کشیده است.
  21. تعادل خوبی بین چگالی محتوایی سایت و کاربرد فضای خالی وجود دارد.
  22. نمای سایت جذاب و دل‌نشین است.
  23. صفحات فاقد «Scroll stoppers» هستند. (باعث می‌شوند کاربر تصور کند با انتها یا ابتدای صفحه رسیده است درصورتی‌که این‌طور نیست).
  24. در سایت از کاربرد وسیع متن‌هایی با حروف بزرگ خودداری شده است.
  25. سایت دارای رابط بصری یکپارچه و آشنا است که باعث جلب توجه کاربر می‌شوند.
  26. برای نشان دادن جزئیات دقیق از رنگ آبی پررنگ استفاده نشده است (مثلاً متن، خطوط نازک و نمادها).
  27. برای ساختاربندی و گروه بندی آیتم‌ها در صفحه از رنگ استفاده شده است.
  28. المان‌های گرافیکی رابط بصری سایت با تبلیغات بنرها ترکیب نشده و اشتباه گرفته نمی‌شوند.
  29. بولد کردن متن برای مشخص شدن دسته‌بندی‌ها استفاده شده است.
  30. در صفحات محتوا، طول خطوط هنگامی‌که در یک پنجره با عرض استاندارد مرورگر دیده می‌شود نه زیاد کوتاه هستند (<50 کاراکتر به ازای هر سطر) نه خیلی بلند (>100 کاراکتر به ازای هر سطر).
  31. سایت با استفاده از گرید طراحی شده و ویجت ها و المان‌ها به‌طور افقی و عمودی باهم‌ تراز هستند.
  32. لیبل های معنی‌دار، رنگ‌های پس‌زمینه مؤثر و کاربرد مؤثر حاشیه‌ها و فضاهای خالی یا White Space به کاربر کمک می‌کنند تا درک بهتری از مجموعه‌های مجزا در صفحه داشته باشد.
  33. رنگ‌ها به‌خوبی باهم هماهنگ هستند و از پس‌زمینه‌های پیچیده استفاده نشده است.
  34. صفحات فاقد درهم ریختگی و اطلاعات نامربوط هستند.
  35. اجزاء استاندارد (مانند عناوین صفحه، منوی سایت، منوی صفحه، سیاست حریم خصوصی و غیره) را به‌راحتی در دسترس‌اند.
  36. لوگوی سازمان در هر صفحه در محل یکسانی قرارگرفته است، و کاربر با کلیک بر روی لوگو به (مثلاً صفحه اصلی) برمی‌گردد.
  37. ویژگی‌های جلب توجه کننده (مانند انیمیشن، رنگ‌های بولد و تفاوت اندازه‌ها) بسیار کم و فقط در مکآن‌های مرتبط استفاده شده‌اند.
  38. آیکون‌ها به‌طور بصری و مفهومی از یکدیگر مجزا با این‌ حال هماهنگ هستند (به‌درستی بخشی از یک گروه نظرات هستند).
  39. اطلاعات مرتبط و عملکردهای مرتبط، گردهم آمده و هر گروه را می‌توان به‌راحتی با چشم اسکن کرد (۵ درجه، با دایره‌ای با قطر حدوداً ۴٫۴ سانتی‌متر در صفحه نمایش).

کابردپذیری جستجو

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

 

  1. جستجوی پیش‌فرض سایت بدون هیچ تنظیم پیشرفته‌ی خاصی برای انجام جستجو است.
  2. صفحه نتایج جستجو به کاربران نشان می‌دهد که چه چیزی جستجو شده و به‌راحتی جستجو را می‌توان ویرایش یا مجدداً انجام داد.
  3. نتایج جستجو واضح و مفید هستند و بر اساس ارتباطشان رتبه‌بندی شده‌اند.
  4. صفحه نتایج جستجو مشخص می‌کند چه تعداد نتیجه پیدا شده است و تعداد نتایج صفحه‌بندی شده‌اند.
  5. اگر هیچ نتیجه‌ای به دست نیاید، سیستم ایده‌ها یا گزینه‌هایی برای بهبود جستار بر اساس مسائل قابل شناسایی با ورودی کاربر ارائه می‌دهد.
  6. موتور جستجو از عهده جستارهای خالی به شکل مناسبی برمی‌آید.
  7. رایج ترن جستارها (همان‌طور که در لاگ سایت آمده) نتایج مفیدی ارائه می‌دهند.
  8. جستجوی سایت شامل نمونه‌ها یا نکاتی درباره نحوه استفاده مؤثر است.
  9. سایت شامل یک واسط جستجوی قدرتمند است که به کاربر کمک می‌کند جستجوها را تصحیح کند تا به نتیجه‌ی موردنظر خود برسد.
  10. صفحه نتایج جستجو نشانگر نتایج تکراری نیست.
  11. کادر جستجو برای کنترل کردن طول عادی جستجو به‌اندازه کافی عریض است.
  12. به‌صورت پیش‌فرض کل سایت جستجو می‌شود نه بخش خاصی از آن.
  13. اگر سایت امکان جستجوی پیشرفته را برای کاربران فراهم آورد، آن‎گاه جستجوها ذخیره و بعدا کاربر می‌تواند به آن‌ها دسترسی داشته باشد.
  14. واسط جستجو در محلی قرارگرفته که کاربران بتوانند آن را پیدا کنند (سمت راست یا چپ).
  15. کادر جستجو و کنترل‌هایش به‌خوبی در سایت مشخص هستند (کادرهای جستجوی متعدد گیج‌کننده هستند).
  16. سایت افرادی را که می‌خواهند به گشت‌وگذار در سایت بپردازند و هم‌چنین افرادی که قصد جستجو دارند را پوشش می‌دهد.
  17. حیطه انجام جستجو به‌وضوح در صفحه نتایج جستجو مشخص شده و کاربران می‌توانند حیطه انجام جستجو را محدود کنند.
  18. سیستم جستجو اطلاعات متا را نمایش می‌دهند، مانند اندازه فایل، تاریخی که فایل یا مطلب ایجاد شده و نوع فایل (Word, pdf و غیره).
  19. جستجوی سایت به‌طور خودکار به غلط گیری املایی می‌پردازد و جمع‌ها و مترادف‌ها را جستجو می‌کند.
  20. جستجوی سایت گزینه‌ای برای پیشنهاد جستجوهای مشابه فراهم می‌آورد («موارد مشابه»).

کمک، بازخورد و تولرانس خطا

این موارد به شما در ارزیابی این‌که آیا سایت شما از خطای کاربر جلوگیری می‌کند یا نه. و یا در صورت بروز خطا چگونه سایت شما آن را هندل می‌کند.

  1. سوالات رایجی که پرسیده می‌شوند یا کمک آنلاین دستورالعمل‌های مرحله به مرحله برای کمک به کاربران فراهم می‌آورد تا مهم‌ترین کارها را انجام دهند.
  2. به‌راحتی می‌توان به بهترین شکل و در مناسب‌ترین زمان کمک گرفت.
  3. پیام‌های سیستمی، مختصر و بدون ابهام هستند.
  4. نیازی نیست که کاربر برای استفاده از سایت از راهنمای کاربر یا سایر اطلاعات خارجی کمک بگیرد.
  5. سایت از صفحه ۴۰۴ اختصاصی استفاده می‌کند که شامل نکاتی درباره نحوه یافتن صفحات موردنظر و لینک‌ها به صفحه اصلی و جستجو است.
  6. سایت در صورت لزوم (مثلاً در زمان بررسی) یا در زمان انتقال به درگاه بانک پیام مناسب و واضحی برای آگاهی کاربر نمایش می‌دهد.
  7. برای انتخاب محصولات کاربران راهنمایی می‌شوند.
  8. قبل از اجرای عمل‌های بالقوه «خطرناک» کاربران نیاز به تصدیق دارند (مثلاً حذف یک مورد).
  9. صفحات تایید واضح هستند و قابل فهم هستند.
  10. پیام‌های خطا شامل دستورالعمل‌های واضح درباره قدم بعدی هستند.
  11. بلافاصله قبل از خرید، سایت به کاربر یک صفحه خلاصه و واضح را نشان می‌دهد که نباید با صفحه تایید خرید اشتباه گرفت.
  12. هرگاه کاربر بخواهد بین گزینه‌های مختلف یکی را انتخاب کند (مثلاً در یک کادر دیالوگ)، گزینه‌ها واضح خواهند بود.
  13. سایت کاربران را درباره تأخیرهای اجتناب ناپذیر در سایت آگاه می‌سازد (مثلاً هنگام تایید تراکنش بعد از خرید که ممکن است در شرایطی به طول بیانجامد).
  14. پیام‌های خطا با لحن تمسخرآمیزی نوشته نشده‌اند و خطا را تقصیر کاربر نمی‌داند.
  15. صفحات به‌سرعت لود می‌شوند (۵ ثانیه یا کمتر).
  16. سایت بازخورد سریعی نسبت به اطلاعات ورودی توسط کاربر یا فعالیت‌های انجام شده‌ی کاربر نشان می‌دهد.
  17. به کاربر درباره صفحات حجیم و کند هشدار داده می‌شود (مثلاً «لطفا صبر کنید»)، و مهم‌ترین اطلاعات اول از همه نشان داده می‌شوند.
  18. هنگام استفاده از tooltip (توضیحاتی که با نگه داشتن ماوس روی اشیاء ظاهر می‌شوند)، راهنمایی و توضیحات بیشتر و مفیدتری فراهم می‌شود.
  19. هنگام ارائه راهنمایی‌ها، به کاربران می‌گویند که چه‌کاری انجام داده و از چه‌کاری صرف‌نظر کنند.
  20. سایت به کاربران نشان می‌دهد که چطور کارهای عادی را در صورت لزوم انجام دهند (مثلاً با دمویی از عملکرد و امکانات سایت).
  21. سایت بازخوردهایی ارائه می‌دهد (مثلاً «آیا می‌دانید که؟») که به کاربر درباره نحوه استفاده از سایت اطلاعات می‌دهد.
  22. سایت راهنمایی‌هایی مرتبط با موضوع ارائه می‌دهد.
  23. راهنمایی‌ها کاملاً واضح و به زبان ساده هستند و به زبان فارسی روان نوشته شده‌اند و از هرگونه واژه و حروف نامفهوم خودداری شده است.
  24. هنگامی‌که عملی به‌طور موفقیت آمیزی به انجام رسید، سایت بازخورد مناسبی ارائه می‌دهد. ( مانند نمایش پیام انجام شد یا ارسال شد).
  25. در صورت لزوم پیام‌های مهم بر روی صفحه باقی می‌مانند و نیازی نیست که کاربر باعجله اطلاعات را یادداشت کند.
  26. در سایت از قانون Fitts استفاده شده است (فاصله بین کنترل‌ها و اندازه کنترل‌ها مناسب است، اندازه متناسب بافاصله است).
  27. برای جلوگیری کاربر از کلیک بر روی لینک‌ها یا المان‌های نادرست فضای کافی بین آن‌ها وجود دارد.
  28. یک فضای خطی در حدود حداقل ۲ پیکسل بین آیتم‌های قابل کلیک وجود دارد.
  29. سایت مشخص می‌کند که چه زمانی و کجا خطایی رخ‌داده است (مثلاً هرگاه یک فرم ناقص پرشده باشد فیلدهای جاافتاده هایلایت می‌شوند).
  30. سایت از روش‌های انتخاب مناسب (مثلاً منوهای کشویی) به‌عنوان یک جایگزین برای تایپ کردن استفاده کرده است.
  31. سایت به‌خوبی برای جلوگیری از بروز خطا توسط کاربر او را آگاه می‌سازد.
  32. سایت قبل از اصلاح ورودی‌های اشتباه به کاربر هشدار می‌دهد (مثلاً در گوگل «Did you mean…»).
  33. سایت تضمین می‌کند که بین انجام کار اطلاعاتی از بین نرفته است (توسط کاربر یا خطای سایت).
  34. در صورت لزوم، کاربر می‌تواند اصلاح خطاها را تا موعد بعدی به تعویق بیندازد.
  35. پیام‌های خطا به زبان ساده با توضیحات کافی درباره مشکل نوشته شده‌اند.
  36. سایت می‌تواند اطلاعات بیشتری را در صورت لزوم درباره جزئیات خطا نمایش دهد.
  37. فعالیت‌های «undo» (یا «cancel») و «redo» به‌راحتی در دسترس و امکان‌پذیر هستند.

در جلسه‎ی آخر با عنوان چک لیست امتیازدهی برای افزایش کاربردپذیری سایت شما – بخش چهارم به ادامه‎ی این مطلب می‎پردازیم.

 

 

نویسنده: باران محمود آبادی

درباره تیم محتوای آکادمی فرانگر

بیشتر بخوانید

تجربه کاربری

بررسی وب‌سایت‌های گردشگری (قسمت پنجم)

Cheapflights.com Cheapflights یک وب‌سایت جست‌وجوی جهانی است که می‌توان از آن برای خرید بلیط هواپیما، …

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *