هدف UI/UX تنها زیبا به نظر رسیدن نبوده و نیست، بزرگ‌ترین فاکتوری که برای این موضوع مطرح است، استفاده آسان‌تر از رابط کاربری برای کاربران است. استفاده آسان‌تر نیز خود شامل تکنیک‌ها و معیارهایی می‌شود که یک طراح هوشمند و زیرک باید به خوبی روی آن‌ها تسلط داشته باشد. در این مطلب از وبسایت آموزشی راکت قصد داریم در رابطه با اشتباهاتی صحبت کنیم که با مرتکب شدن به هر کدام ضربه بزرگی را به تجربه کاربری و رابط کاربری اپلیکیشن‌تان خواهید زد.
تصاویر
تصاویر و به صورت کلی‌تر هر شکل از «مالتی مدیا» می‌تواند نقش بزرگی را در منتشر ساختن اطلاعات در هر اپلیکیشنی داشته باشد. اما این موارد هرچند که می‌توانند مفید عمل کنند به همان اندازه می‌توانند برای تجربه کاربری وبسایت آسیب‌پذیری به حساب بیایند. برای مثال استفاده از تصاویر حجیم باعث بارگذاری زمان‌بر اپلیکیشن می‌شود و چیزی که کاربران عادی و علل خصوص بنده نمی‌توانم آن را تحمل کنم، کند بودن یک اپلیکیشن برای اجراست.
طراحان و توسعه‌دهندگان همواره باید مطمئن باشند که در بین کیفیت تصاویر و حجمی که ارائه می‌دهند یک بالانس را رعایت کنند. برای انجام چنین کاری شما باید هوشمندانه تعیین کنید که در چه زمانی به چه شکلی باید از چه تصاویری و با چه کیفیتی استفاده کنید. برای مثال زمانی که قصد نمایش آواتار کاربران را دارید، نیازی به استفاده از تصاویر با حجم بالا نیست، چرا که مطمئنا اندازه هر آواتار به صورت کلی در وبسایت‌های مختلف کوچک است. از طرفی تصاویری نیز هستند که حاوی اطلاعات بسیار زیادی بوده و نیاز است که گاهی اوقات حجم بالایی را ارائه دهند.
در مورد دوم از مثال‌های بالا بجای آنکه تصویر را همانگونه که هست روی اپلیکیشن منتشر بسازید، سعی کنید از الگوریتم‌های فشرده‌سازی تصاویر بدون از دست دادن کیفیت‌شان استفاده کنید. مطمئنا با کم شدن ۱۰۰ کیلوبایت از اندازه یک تصویر ۳۰۰ کیلوبایتی سرعت وبسایت‌تان بالاتر می‌رود.
هشدارهای اعتبارسنجی
قرار دادن تمام هشدارهای اعتبارسنجی برای فرم‌ها در یک مکان مشترک کار اشتباهی‌ست. برای اجتناب کردن از این اشتباه، باید هر پیام خطا را در زیر یا بالای ورودی مختص به خود قرار دهید. در تصویر زیر می‌توانید بهتر متوجه این اشتباه شوید.
نمایش مداوم خطاها
سعی نکنید همزمان با وارد کردن اطلاعات از طرف کاربر به صورت همزمان و با وارد کردن هر کاراکتر، خطاهای اعتبارسنجی را به کاربر نمایش دهید. شما باید از تمام شدن فرایند ورود اطلاعات توسط کاربر مطمئن شده و پس از آن شروع به اعتبارسنجی و نمایش هشدارها کنید. می‌توانید زمان که کاربر بجایی خارج از ورودی اشاره کرد (با ماوس یا کیبورد) اعتبارسنجی را شروع کنید.
ناهماهنگی المان‌ها با همدیگر
زمانی که از یک استایل کلی برای یک Box استفاده می‌کنید، مطمئن شوید که المان‌های داخل آن Box نیز با استایل‌های المان مادر همخوانی و تطابق داشته باشد. برای مثال زمانی که border-radius المان مادر ۲۰ پیکسل است، نباید در استفاده کردن از این خاصیت برای المان‌های فرزند شک کنید. (البته این تنها یک مثال است چرا که در برخی شرایط می‌توان روش‌های دیگری را نیز به کار گرفت)
استفاده کردن از رنگ‌های متفاوت بدون در نظر گرفتن یک بالانس در بین آن‌ها نیز کار اشتباهی‌ست چرا که باعث می‌شود کاربران از دیدن رنگ‌های متفاوت با محتوا به خوبی ارتباط برقرار نکرده و دچار هواس پرتی شوند.
پاراگراف‌های طولانی
طول پاراگراف‌ها یکی از مشکلاتی بوده که همواره در مسیر طراحان تجربه کاربری وجود داشته و برای یک اپلیکیشن بزرگ به سادگی حل نمی‌شود. همواره سعی کنید تعداد کاراکترها یا حروفی که در یک خط قرار میدهید بین ۵۰ تا ۷۵ کاراکتر باقی مانده و از آن بیشتر نشود. همچنین از قرار گرفتن متن‌های‌تان در گوشه‌های صفحه خودداری کرده و همواره سعی کنید تا جای ممکن متون را در وسط صفحات قرار دهید.
نقاط کلیک‌پذیر کوچک
نقاط کلیک‌پذیر کوچک مانند دکمه‌ها همواره یکی از مشکلات بزرگ برای کاربران و علل خصوص افرادی که از موبایل استفاده می‌کنند بوده، بنابراین سعی نکنید با قرار دادن چنین المان‌هایی دسترسی‌پذیری به صفحات‌تان را دچار مشکل کنید.
از طرفی دیگر، المان‌هایی که کلیک‌پذیر هستند را از المان‌های کلیک‌ناپذیر باید از نظر طراحی جدا ساخت. برای مثال به لینکی فکر کنید که هیچ تفاوتی با بقیه متن پاراگراف ندارد، خب در این صورت کاربر هیچوقت نمی‌تواند متوجه وجود چنین لینکی شود. استفاده کردن از Underline، یک جعبه، بولد کردن، تغییر رنگ متن و... می‌تواند در فرایند نمایش المان‌های کلیک‌پذیر به شما کمک کند.
کامپوننت‌های غیر-واکنشگرا
بدون استثنا تمام المان‌های شما باید نسبت به صفحات مختلف واکنشگرا باشند. در این مسئله هیچ بهانه‌ای قبول نخواهد بود. بعد از آنکه مطمئن شدید تمام المان‌های‌تان واکنشگرا هستند با استفاده از چند دستگاه مختلف (موبایل‌های متفاوت، تبلت و لپ‌تاپ) با چند صفحه نمایش متفاوت، فرایند تست کردن را انجام دهید. برای این کار می‌توانید از شبیه‌سازهای دستگاه‌های مختلف در مرورگری مانند کروم استفاده کنید.
پخش خودکار
پخش خودکار یکی از بزرگ‌ترین مزاحم‌های کاربران برای تمرکز روی یک صفحه وب است. هیچوقت ویدیوهای‌تان را قبل از اینکه کاربر واقعا بخواهد آن را مشاهده کند، پخش نکنید. بنابراین بهتر است قابلیت autoplay را روی المان‌های ویدیو و صدا غیرفعال کنید.
در نظر نگرفتن موتورهای جستجوگر
درست است که این بخش از کار بیشتر به توسعه‌دهندگان و برنامه‌نویسان مربوط می‌شود، اما طراحی شما و البته بهینه بودن آن می‌تواند تاثیر بسیار زیادی را روی بهینه‌سازی موتورهای جستجوگر داشته باشد. به همین دلیل بهتر است این مسئله را نیز در نظر بگیرید.
در پایان
اشتباهاتی که طراحان و توسعه‌دهندگان رابط کاربری و تجربه کاربری انجام می‌دهند روی تمام قسمت‌های یک اپلیکیشن تاثیر می‌گذارد. از این رو بهتر است مراقب باشید. در این مطلب از وبسایت آموزشی ما مهمترین اشتباهاتی که ممکن است انجام دهید را بررسی کرده و راه‌حل‌های کلی را نیز ارائه دادیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید