۱۰ مورد از رایج‌ترین اشتباهات طراحی رابط کاربری
زمانی که می‌خواهیم یک نرم‌افزار یا اپلیکیشن با کیفیت بسازیم، کوچک‌ترین جزئیات هم اهمیت حیاتی پیدا می‌کنند. اما بیشتر اشتباهات طراحان، در همین نکات ریز است و در بین رایج‌ترین اشتباهات طراحی رابط کاربری، درصد قابل توجهی به اشتباهات در طراحی جزئیات مربوط می‌شود.
بسیاری از افراد، بر سر اهمیت UI خوب یا UX خوب، اختلاف نظر دارند. اما اگر پاسخی صادقانه و فکر شده بخواهید، باید بگوییم که هردو اهمیت دارند. اگر هر کدام از این دو عنصر مهم طراحی ناقص باشند، عنصر دیگر هم کارکرد خود را از دست می‌دهد. هر چند که بیشتر افراد توجهی به UX یا تجربه کاربر ندارند و صرفا به ظاهر زیبای محصول توجه می‌کنند.
در این مقاله قصد داریم که نگاهی به ۱۰ اشتباه رایج در طراحی رابط کاربری بیندازیم و سپس راهکارهای طراحی UI بهتر را بررسی می‌کنیم. اما قبل از شروع و در ابتدا نگاهی به اهمیت طراحی رابط کاربری (UI) می‌اندازیم. با ما همراه باشید.
طراحی رابط کاربری (UI) چیست و چرا اهمیت دارد؟
طراحی رابط کاربری (User interface design)، فرایندی است که طراحان برای ساخت رابط کاربری محصولات دیجیتال، مانند نرم‌افزارها، برنامه‌های کاربردی، سیستم عامل‌ها و … طی می‌کنند. تمرکز اصلی طراحی UI، بهبود کاربری یک نرم‌افزار و تجربه کاربری آن است.
از آنجایی که امروزه تعداد زیادی از افراد از نرم‌افزارها و محصولات دیجیتال استفاده می‌کنند و تعداد شرکت‌هایی که به دنبال توسعه سیستم‌های دیجیتال هستند، روز به روز بیشتر می‌شود، داشتن یک رابط و تجربه کاربری خوب، به یک مزیت رقابتی برای شرکت‌ها تبدیل شده است.
به همین خاطر بهتر است همزمان با مراحل برنامه‌ریزی و توسعه محصول، به فکر طراحی رابط کاربری و تجربه کاربری آن هم باشید.
رایج‌ترین اشتباهات طراحی رابط کاربری
در ادامه به رایج‌ترین اشتباهات در طراحی رابط کاربری اشاره می‌کنیم. این اشتباهات شامل نکات ریزی هستند که ممکن است در وهله اول اصلا به چشم نیایند؛ اما اگر کمی بیشتر دقت کنیم، متوجه تفاوتی که این نکات ایجاد می‌کنند، می‌شویم.
طراحی غیرمنسجم
اگر قصد توسعه یک برنامه روان و کاربرپسند را دارید، نباید چندین سبک مختلف را باهم ادغام کنید. طراحی منسجم و استفاده از الگوها و عناصر یکپارچه، یک تجربه لذت‌بخش و متفاوت را برای کاربر رقم می‌زند. این یکپارچگی و سادگی به مسیری که کاربر در اپلیکیشن طی می‌کند (یا User Journey)، کمک می‌کند. برای پیشگیری از طراحی غیریکپارچه، بهتر است به نکات زیر توجه کنید:
- استفاده از پالت رنگی برای المان‌ها مختلف
- استفاده از فونت یکسان برای تمام نرم‌افزار
- استفاده یکپارچه از اشکال هندسی مثل گوشه تیز یا گرد
- توجه به ضخامت خطوط
- توجه به هم‌راستایی اشکال و وجود یک دلیل منطقی برای استفاده از المان‌های کج
مشخص نبودن عملگرهای اصلی و فرعی
هنگامی که از یک برنامه یا اپلیکیشن صحبت می‌کنیم، با تعداد زیادی اقدام (اکشن) روبرو هستیم که کاربر باید آن‌ها را انجام دهد. بسیاری از اقدامات توسط دکمه‌ها تعریف می‌شوند؛ برای مثال اقدام تایید یک فرم، با دکمه تایید نشان داده می‌شود.
به همین خاطر زمانی که در یک صفحه چند اکشن مختلف داریم، باید عملگر اولیه (اصلی) را از عملگرهای ثانویه (فرعی) متمایز کنیم. برای این کار می‌توانید از نکات زیر کمک بگیرید:
- وزن بصری متفاوتی را به عملگرهای اولیه و ثانویه بدهید. دکمه‌ای که وظیفه اصلی را به عهده دارد، باید بیشترین وزن بصری را داشته باشد.
- از رنگ‌های پررنگ، متن بولد و سایز بزرگ‌تر برای عملگرهای اولیه استفاده کنید. در مورد عملگر ثانویه باید دقیقا برعکس عمل کنید.
خطاهای آزاردهنده و فرم‌های پیچیده
وقتی در حال طراحی UI هستید، هدف اصلی، که فراهم کردن محیطی روان برای تعامل کاربر با سیستم است را فراموش نکنید. رابط کاربری جای ابهام، سوال‌های بدون پاسخ و عدم قطعیت نیست.
به عنوان یک طراح، باید به کاربر بازخورد واضحی از وضعیتی که در آن قرار دارد بدهید؛ به خصوص اگر به خطای خاصی برخورد کرده باشد. اگر بخواهیم دقیق‌تر بگوییم، خطاهای سیستمی باید ویژگی‌های زیر را داشته باشند:
- باید قابل فهم و تشخیص باشند؛ برای مثال رنگ قرمز به صورت پیش‌‌فرض برای اعلام خطا به کار برده می‌شود.
- باید به طور واضح، مشکلی که رخ داده است و روش حل آن توسط کاربر را توضیح دهند.
- خطاها باید موضوعی باشند؛ یعنی به یک مشکل و موضوع خاص اشاره کنند. بهتر است خطا نزدیک المانی باشد که به آن مربوط است.
- خطاها نباید آزاردهنده باشند. همینکه کاربر به خطا برخورده است به اندازه کافی آزادهنده است، پس نباید او را بیشتر تحریک کنیم.
علاوه بر موارد بالا، یک طراح باید به خطاهای غیرمنتظره (مانند خطای سرور و …) هم فکر کند. هر خطایی که رخ می‌دهد، مانعی در مسیر کاربر است و به عنوان یک طراح، وظیفه داریم که به کاربر در برداشتن این مانع کمک کنیم. برای مثال، طراحی انیمیشن یا المان‌های تعاملی برای صفحات ۴۰۰ یا ۵۰۰، می‌تواند یک گزینه خوب برای مقابله با این موقعیت باشد.
همچنین هنگام طراحی فرم، مانند فرم ثبت‌نام یا درخواست خدمات، باید به این نکته توجه کنید که تا حد ممکن، کاربر را اذیت نکنید. برای مثال، تصور کنید که یک فرم با فیلدهای اجباری دارید. اگر کاربر شما بدون ترتیب خاصی شروع به پر کردن فرم کند، احتمالا با ده‌ها خطا روبرو می‌شود که کنار هر فیلد اجباری ظاهر شده‌اند.
این موضوع می‌تواند تجربه بدی برای کاربر رقم بزند و به همین خاطر باید در هنگام طراحی، به این نکات ریز توجه کنید.
طراحی ناتراز
شاید در وهله اول فکر کنید که هم‌ترازی المان‌ها به خصوص در طراحی مدرن، آنقدر هم اهمیتی ندارد؛ اما به جرئت می‌گوییم که این تفکر (حداقل در بیشتر مواقع) اشتباه است. اگر شما هم به قدرت هم‌ترازی در طراحی پی‌ببرید، دیگر هیچ‌وقت این نکته را نادیده نمی‌گیرید.
بسیاری از طراحان تصور می‌کنند که استفاده از چارچوب، خلاقیت را محدود می‌کند؛ از یک دیدگاه این تصور درست است. اما اگر به تازگی وارد دنیای طراحی و به خصوص طراحی UI شده‌اید، بهتر از قبل از شکستن قوانین و چارچوب‌ها، آن‌ها را یاد بگیرید.
استفاده از فاصله‌گذاری داخلی و خارجی مناسب، به شما یک طراحی تمیز و مرتب می‌دهد و فهم مطلب را هم برای کاربر شما راحت‌تر می‌کند. اگر در حال طراحی یک بلوک یا صفحه هستید، باید به فواصل و برابری آن‌ها دقت کنید؛ برای مثال برابری فاصله بالا و پایین یک بلوک باهم و برابری فاصله‌های جانبی با یکدیگر، می‌تواند طراحی شما را مرتب جلوه دهد.
قوانین مختلفی برای فاصله‌گذاری مناسب (مارجین، پدینگ و …) وجود دارد؛ اما شما می‌توانید با الهام از این قوانین، فاصله بهینه را با توجه به طراحی خود پیدا کنید.
کنتراست کم
طراحی یک محصول دیجیتال، مشابه ساخت یک ساختمان برای عموم مردم است که باید برای همه افراد کاربردی باشد؛ این شامل افراد نابینا، کوررنگ و افرادی که مشکلات بینایی دارند، هم می‌شود. در زمان طراحی محصول، باید به کاربری آن توجه ویژه‌ای داشته باشید. یکی از نکات مهم در طراحی رابط کاربری، توجه به کنتراست است.
در یک ترکیب بصری، کنتراست حرف اول را می‌زند. اگر در طراحی خود به کنتراست توجه نکنید، تمام المان‌های شما با هم ادغام می‌شوند و تشخیص آن‌ها از یکدیگر سخت است. به عبارتی کنتراست پایین، تقریبا با کاربری نامناسب برابری می‌کند.
در هنگام طراحی، از کنتراست برای موارد زیر استفاده کنید:
- هدایت کاربر در رابط کاربری
- جدا کردن بخش‌های مختلف اپلیکیشن
- تمایز ایجاد کردن بین المان‌ها و پس‌زمینه
علاوه بر کنتراست، بهتر است که حتما به استفاده مناسب از فضای سفید هم دقت کنید. اگر هیچ فضایی بین بخش‌های مختلف طراحی وجود نداشته باشد، تمییز دادن المان‌ها از هم سخت می‌شود. در عین حال استفاده بیش از حد از فضای سفید هم طراحی را نامرتب و غیرحرفه‌ای نشان می‌دهد.
آیکون‌های نامناسب
معمولا انتخاب آیکون، ساده‌ترین بخش از طراحی به نظر می‌رسد؛ حتی بعضی از طراحان آیکون را به عنوان یک بخش تزئینی می‌بینند. اما در واقع آیکون‌ها یکی از المان‌های پایه‌ای در طراحی UI مدرن هستند. این اهمیت به خصوص در طراحی رابط کاربری موبایل بیشتر است؛ چرا که در واقع آیکون‌ها، حکم دکمه را دارند.
به همین خاطر بهتر است در هنگام انتخاب آیکون مناسب، به نکات زیر دقت کنید:
- آیکون را به صورت وکتور یا فایل SVG ذخیره کنید.
- یکپارچگی را در آیکون‌ها رعایت کنید.
- مطمئن شوید که پیام آیکون واضح به مخاطب می‌رسد.
عدم توجه به پلتفرم‌های مختلف
امروزه بیشتر کاربران از طریق تلفن همراه از خدمات اینترنتی استفاده می‌کنند. اما متاسفانه، بسیاری از طراحان این نکته را فراموش می‌کنند و یکی از اشتباهات رایج طراحی رابط کاربری، عدم توجه به نوع کاربری برنامه است.
بنابراین زمان طراحی یک رابط کاربری، باید همیشه این نکته را گوشه ذهن خود داشته باشید که درصد زیادی از کاربران، اول از موبایل خود استفاده می‌کنند و بعد از سایر دستگاه‌ها. برای این کار باید المان‌هایی که طراحی می‌کنید، به ویژه المان‌هایی که به اکشن کاربر نیاز دارند، به نوعی طراحی شده باشند که استفاده از آن‌ها ساده باشد.
دکمه‌های کوچک و به هم چسبیده، ضربدر خروج از صفحه که تقریبا دیده نمی‌شود و موارد این‌چنینی، فقط باعث می‌شوند که کاربر تجربه ناخوشایندی از محصول شما داشته باشد و تا زمانی که مجبور نباشد، از آن استفاده نکند.
ناوبری گیج‌کننده
یکی از اشتباهات رایج در طراحی رابط کاربری، ناوبری پیچیده است. بسیاری از شرکت‌ها تصور می‌کنند که روبرو کردن کاربر با حجم زیادی از اطلاعات و جابجا کردن او بین صفحات مختلف، می‌تواند شرکت را حرفه‌ای نشان دهد.
اما واقعیت اینجاست که این روش از دید کاربران منطقی نیست. یک کاربر زمانی که وارد صفحه سایت یا اپلیکیشن شما می‌شود، ترجیح می‌دهد در کوتاه‌ترین زمان ممکن به جواب برسد. بنابراین ناوبری پیچیده و صفحات تو در تو، می‌تواند به قاتل سایت شما تبدیل شود و باعث ریزش تعداد چشم‌گیری از کاربران شود.
عدم توجه به محتوا
محتوا معمولا از مواردی است که کم‌ترین توجه را از تیم محصول می‌بیند؛ اما برعکس تاثیر آن روی یک محصول کاملا محسوس است. یکی از مواردی که می‌تواند طراحی شما را تحت تاثیر قرار دهد، محتوا است.
استفاده از کلمات زیاد در فضای کوچک، استفاده از کلمات سخت و کلماتی که مفهوم را به کاربر نمی‌رسانند و حتی گاهی نبود محتوا در جایی که نیاز به کلمات دارد، می‌تواند کاملا کاربری محصول را تحت تاثیر قرار بدهد و یک محصول را خوب را، به یک محصول نه چندان محبوب تبدیل کند.
نبود سلسله مراتب و یکپارچگی در متن
همانطور که گفتیم، متن یکی از مهم‌ترین اجزای یک طراحی و از اولین روش‌های انتقال اطلاعات است. به همین خاطر متنی که در رابط کاربری استفاده می‌کنید باید خوانا و مرتب باشد. یک متن درست، برداشت درستی از اطلاعات به کاربر می‌دهد. شما به عنوان یک طراح، وظیفه دارید که متن را به ساده‌ترین و در عین حال جامع‌ترین شکل نمایش دهید.
نکات زیر می‌تواند در طراحی متون به شما کمک کند:
- بین بخش‌های مختلف متن کنتراست ایجاد کنید. تیتر با متن اصلی و زیر متن متفاوت است.
- برای نشان دادن سلسله مراتب، بهتر است تیتر بزرگ و زیرتیترها کمی کوچک‌تر باشند و به ترتیب سایر متن‌ها هم در اندازه و وزن تفاوت داشته باشند.
- از فاصله بین خطی و کرنینگ (فاصله بین حروف) مناسب استفاده کنید.
- بلوک‌های مختلف متن را از هم جدا کنید. بین متون مرتبط فاصله کم و بین متون نامرتبط، فاصله بیشتری بگذارید.
جمع‌بندی
طراحی رابط کاربری یکی از حوزه‌های کاری مهم عصر دیجیتال است. تمام محصولات دیجیتال برای اینکه بتوانند در فضای رقابتی امروز زنده بمانند و به کار خود ادامه دهند، باید تجربه کاربری و به طبع آن، رابط کاربری مناسبی داشته باشند.
اما اشتباهاتی وجود دارد که می‌تواند یک رابط کاربری خوب را به یک رابط کاربری بدون استفاده تبدیل کند. در این مقاله سعی کردیم به اشتباهات طراحی رابط کاربری اشاره کنیم و راه حل پیشگیری از آن‌ها را بررسی کنیم. به عنوان یک طراح UI، بهتر است که به کوچک‌ترین جزئیات طراحی دقت کنید تا در نهایت، به یک طراحی بی‌نقص برسید.
در کنار مواردی که در این مقاله گفته شد، خوب است که همیشه به دنبال تقویت مهارت خود باشید و از ترندهای روز دنیا هم غافل نشوید. یکی از راه‌های تقویت مهارت‌های طراحی، استفاده از بازی برای یادگیری UI/UX است که در عین مفرح بودن، می‌تواند تاثیر خوبی در بهبود مهارت‌های شما داشته باشد.
منابع:
نویسنده: سارا احمدیان
