10 سَرخوردگی کاربران در وب

ناامید کننده ترین چیزهایی که امروزه با اونها روبرو میشیم چه چیزهایی هستن؟
ویتالی فریدمن از مجله ی Smashing Magazine تمام ناامیدی های کلیدی کاربران در سال 2020 رو به خوبی جمع آوری کرد.

https://twitter.com/smashingmag?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1285689122762498052%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Ftype%3Dtext2Fhtmlkey%3Da19fcc184b9711e1b4764040d3dc5c07schema%3Dtwitterurl%3Dhttps3A%2F%2Ftwitter.com%2Fsmashingmag%2Fstatus%2F1285689122762498052image%3D

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

· سایز فونت باید حداقل 16 پیکسل باشه. 16 پیکسل برای متن بدنه (Body Text) خوبه اما اینو به یاد داشته باشین که هرچه اندازه صفحه بزرگتر باشه، متن هم باید بزرگتر باشه.

· برای خوانایی بهتر ارتفاع خط 1.5em یا 1.6em در نظر گرفته بشه.

· همیشه طرح های خودتون رو روی دستگاه های واقعی تست کنین.

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

در اینجا چند نکته خوب وجود داره:

· اهداف لمسی باید دوست دار انگشت باشن. اندازه متوسط هدف لمسی باید 9میلی متر باشه. متریال دیزاین بیان میکنه که اهداف لمسی باید حداقل 48 پیکسل باشن.

· فاصله (Padding) های مناسبی رو در اطراف اهداف لمسی در نظر بگیرین. گاید لاین مایکروسافت Padding 10 میلی متری رو بین هدف های قابل لمس پیشنهاد میده.

3. تغییر غیرمنتظره محتوا

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

https://css-tricks.com/content-jumping-avoid/#examples-from-around-the-web

برای حل این مسئله، شما میتونین ارتفاع محتوای پویا رو اندازه بگیرین و اون رو به عنوان min-height توی css اعمال کنین.

4. از دست دادن داده بخاطر خطا
شما 10 دقیقه رو برای پر کردن اینپوت ها در یک صفحه وب صرف میکنید و بالاخره بر روی دکمه ارسال کلیک میکنید. صفحه وب مجدد ا بارگیری میشه و شما همون صفحه وب رو بدون اطلاعاتی که براش وقت گذاشتین مشاهده میکنین. تنها چیز جدید روی صفحه پیامی به رنگ قرمزه که پیغام خطا رو نشونتون میده. سطح ناامیدی شما به حداکثر میرسه.
یکی از مهم ترین و ساده ترین قوانین طراحی:
داده های کاربر مقدس است.
همیشه مانع از دست رفتن اطلاعات بشین. از LocalStorage و SessionStorage برای ذخیره ی جفت های Key-Value استفاده کنید و داده هایی رو که قبلا کاربر در فیلد های مربوطه وارد کرده رو از قبل پر کنید. حتی وقتی که کاربر تصادفی صفحه رو Refresh میکنه.

 = function() {

    var var1 = localStorage.getItem(var1);
    if (var1 !== null) document.getElemenyById(&quotvar1&quot).value = var1;

}

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

window.addEventListener(&quotbeforeunload&quot, function(event) { ... }); = function(event) { // notify about potential data loss here };

6. Scroll hijacking

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

7. سد هایی به نام ثبت نام
سد های ثبت نام یک درخواست اجباری برای ایجاد حساب کاربری به منظور استفاده از یک سرویس هستن. سد های ثبت نامی مانع جستجوی کاربران در سرویس میشن.

نیویورک تایمز برای ادامه ی مطالعه از ثبت نام استفاده میکنه

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

8. پخش خودکار ویدیو همراه با صدا
وقتی کاربران وارد یک صفحه میشن، انتظار ندارن محتوای صوتی که بدون رضایت اونها شروع به پخش شده رو بشنون. وقتی وب سایت ها ویدیو هایی همراه با صدا رو به صورت خودکار پخش میکنن، خیلی از کاربران بلافاصله سایت رو ترک میکنن و کسانی که میمونن باید کلی تلاش کنن تا بفهمن چطور میتونن صدا رو قطع کنن یا مکث کنند تا به اهدافشون بپردازن.
استفاده از فیلم هایی که بصورت خودکار پخش میشن خوبه، اما به شرطی که مطمئن باشین بصورت پیش فرض بی صدا هستن. با پخش شدن ویدیو بصورت دیفالت صدا رو روی حالت OFF قرار بدین.

فیلم های فیس بوک به صورت خودکار تنظیم شدن، اما هیچ صدایی ظاهر نمیشه مگر اینکه کاربران با ویدئو تعامل داشته باشن.

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

درخواست وب سایت برای ارسال نوتیفیکیشن ها

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