اشتباهات UI که به UX لطمه می‌زند

شما یک طراح حرفه‌ای برای سایت خود استخدام کرده‌اید، اما آیا همین کافی است؟ حتی خیلی از طراحان حرفه‌ای به برخی نکات ریز که باعث آزار کاربران شده و نهایتاً به تجربه کاربری آسیب می‌زند توجه ندارند.

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

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

اما طراحان وظیفه‌دارند که طراحی‌های نادرست را کنار زده و برای ارائه یک تجربه کاربری خوب تلاش کنند. در ادامه نمونه‌های نامناسب را بررسی و شمارا به انجام طراحی‌های کاربردی تشویق خواهیم کرد.

۱. Modal های ناخواسته

باید اعتراف کرد که ایده کلی پنجره‌های مودال (Modal) بسیار هوشمندانه است. آن‌ها این امکان را به توسعه‌دهندگان می‌دهند تا بدون نیاز به استفاده از جاوا اسکریپت برای باز کردن یک Tab جدید، بتوانند محتوای بیشتری را در صفحه‌نمایش دهند. اما مشکل بر سر پنجره‌های مودال نیست، بلکه این مودال‌های ناخواسته‌اند که دردسر ایجاد کرده و همیشه باعث افت کیفیت تجربه کاربری می‌شوند.

مودال‌های ناخواسته به سه دسته تقسیم می‌شوند:

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

آیا نارضایتی اکثر کاربران صرفاً برای به دست آوردن نرخ تبدیل بالاتر ارزشش را دارد؟

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

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

اما این پاپ آپ ها می‌توانند پیام‌های تبلیغاتی آزاردهنده‌ای هم باشند که از غیب ظاهر می‌شوند. مودال‌هایی که حتی با کلیک روی پس‌زمینه هم  بسته نمی‌شوند که جای خود دارند!

البته باید اعتراف کرد که از دید یک بازاریاب این مودال ها بسیار مؤثر و نتیجه‌بخش هستند. اما از سوی دیگر تجربه کاربری را برای دیگر افراد حاضر در فضای وب تخریب می‌کنند.

۲. ایجاد احساس گناه در کاربر

در این روش کاربر را با ایجاد احساس شرمندگی آزار داده و موجب افزایش آمار ثبت‌نام سایت می‌شوند. این لحن گفتار با کاربر را در چندین نمونه از این مودال‌ها دیده‌ایم، یکی از انواع این ترفند مربوط به سایت Good Housekeeping است.

هدف این شیوه که با ایجاد حس ندامت در کاربر عمل می‌کند این است که کاربر از اینکه برای بار دوم می‌خواهد پنجره را ببند احساس بدی پیدا کند. در این روش کاربر مجبور است برای بستن پنجره روی عبارتی بی‌معنی و بیهوده کلیک کند. برای مثال، ممکن است یکی از این مودال‌ها یک کتاب الکترونیکی رایگان در مورد طراحی وب به شما پیشنهاد دهد. دکمه تأیید طراحی عادی دارد، اما دکمه لغو چنین نوشته‌ای دارد: «نه ممنون، من دوست دارم در طراحی سایت افتضاح باشم».

۳. پنجره‌های تبلیغاتی تمام صفحه

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

Backlinko یکی از بهترین سایت‌های حاوی نکات مربوط به SEO است، اما قبلا تبلیغات اجباری‌اش فاجعه بود! کاربرانی که اولین بار است از سایت دیدن می‌کرد با یک مودال که تمام صفحه را فراگرفته روبرو می‌شد. در پس‌زمینه نیز ویدئویی از نتایج گوگ دیده می‌شد. علامت x برای بستن پنجره، بسیار کوچک در گوشه بالا و راست آن قرارگرفته و عبارت «نه ممنون» نیز بسیار ریزتر از نوشته‌های دیگر است و خواندنش هم چندان آسان نیست. چنین چیزی برای کاربری که سایت را روی موبایل می‌بینید یک کابوس واقعی است. این مورد ازجمله تبلیغاتی است که باید از استفاده آن صرف‌نظر کرد.

۴. تبلیغات و پیشنهاد‌هایی که از کنار صفحه ظاهر می‌شوند (slide-in)

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

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

۵. نحوه پیمایش متفاوت صفحه

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

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

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

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

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

۶. حاشیه در منوی ناوبری (Navigation)

هر سایتی دارای یک منوی ناوبری است و اکثر لینک‌های داخل آن یک کادر یا حاشیه دور خود دارند. اما گاهی اوقات این کادر قابلیت کلیک شدن ندارد و شما برای رفتن به آن لینک موردنظر مجبورید دقیقاً روی نوشته کلیک کنید. این مورد مشکل بسیاری از سایت ها محسوب می‌شود!

منتقل کردن فضای حاشیه CSS از بخش دربرگیرنده لینک به خود لینک تنها ۳۰ ثانیه زمان می‌برد. با این کار تغییری در ظاهر نوار ناوبری ایجاد نمی‌شود، اما کاربران می‌توانند بر روی فضای اطراف آن کلیک کنند که این موضوع باعث راحتی و رضایت کاربران می‌شود.

سعی کنید این نکته را در آینده به خاطر داشته باشید، چون تغییر بسیار ساده‌ای است اما می‌تواند تأثیر زیادی در راحتی استفاده از سایت شما داشته باشد.

۷. چندصفحه‌ای بودن بخشی از سایت

آخرین مورد یکی از مهم‌ترین مشکلات است. سایت‌هایی هستند که محتوای خود را به‌صورت چندصفحه‌ای ارائه می‌کنند و در هر صفحه شما تنها یک مورد را می‌بینید. هیچ‌کس از اینکه برای خواندن یک مطلب مدام روی دکمه «بعدی» (Next) کلیک کند خوشحال نخواهد شد. این نوع مطالب را می‌توانید در سایت‌های مختلف ببینید که هیچ‌کدام اهمیتی به تجربه کاربری نمی‌دهند.

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

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