12 اصول طراحی رابط کاربری که تاثیرات بزرگی دارند

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

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

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

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

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

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

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

۱. استفاده از فضا برای گروه‌بندی عناصر مرتبط

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

شما می‌توانید با استفاده از روش‌های زیر، عناصر مرتبط را گروه‌بندی کنید:

1. قرار دادن عناصر مرتبط در یک فضای مشترک (کانتینر)
2. نزدیک به هم قرار دادن عناصر مرتبط با استفاده از فضا
3. ایجاد ظاهری مشابه برای عناصر مرتبط
4. تراز کردن عناصر مرتبط در یک خط پیوسته

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

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

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

2. حفظ انسجام

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

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

برچسب‌های متنی به آیکون‌ها اضافه می‌شوند تا به درک کارکرد آنها توسط افراد، به ویژه کسانی که از خوانندگان صفحه (نرم‌افزاری که رابط کاربری را با استفاده از گفتار یا بریل برای افراد نابینا شرح می‌دهد) استفاده می‌کنند، کمک شود.

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

استفاده از برچسب‌های متنی به همراه آیکون‌ها، چند مزیت دارد:

بهبود درک: برچسب‌های متنی به افراد کمک می‌کنند تا به طور واضح و دقیق بفهمند که هر آیکون چه عملکردی دارد.

افزایش دسترسی‌پذیری: این کار به ویژه برای افرادی که مشکلات بینایی دارند یا از خوانندگان صفحه استفاده می‌کنند، مفید است.

کاهش خطا: با ارائه توضیحات واضح در مورد هر آیکون، احتمال کلیک اشتباه یا انجام اقدامات ناخواسته توسط کاربران کاهش می‌یابد.

در مثال ما، اضافه کردن برچسب‌های متنی به آیکون‌ها، رابط کاربری را برای همه کاربران، از جمله افراد نابینا یا کم‌بینا، قابل دسترس‌تر و قابل فهم‌تر می‌کند.

3. تطابق عملکرد با ظاهر

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

در مثال ما، باکس‌های حاوی آیکون‌ها، سبک بصری مشابهی با دکمه «رزرو همین حالا» دارند. این باعث می‌شود آن‌ها ظاهری تعاملی داشته باشند، در حالی که چنین نیستند. حذف رنگ آبی و استایل دکمه از آیکون‌ها به جلوگیری از اشتباه گرفتن آنها با عناصر تعاملی کمک می‌کند.

4. ایجاد سلسله مراتب بصری واضح

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

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

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

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

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

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

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

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

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

۵. حذف استایل‌های غیرضروری

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

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

6. استفاده هدفمند از رنگ

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

یک رویکرد ساده و مؤثر، اعمال رنگ سازمانی (برند) به عناصر تعاملی مانند لینک‌های متنی و دکمه‌ها است. این کار به کاربران آموزش می‌دهد که چه عناصری تعاملی هستند و چه عناصری نیستند. سعی کنید از رنگ سازمانی روی عناصر غیر تعاملی استفاده نکنید.

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

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

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

7. تضاد رنگ (Contrast) مناسب برای عناصر رابط کاربری

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

یکی از اصول طراحی رابط کاربری، اطمینان از خوانایی واضح جزئیات رابط برای افراد دارای اختلالات بینایی است. برای دستیابی به این هدف، حداقل باید الزامات استانداردهای راهنمای دسترسی به محتوای وب (WCAG) سطح AA نسخه ۲.۱ را رعایت کنید. این بدان معناست که عناصر رابط کاربری مانند فیلدهای فرم و دکمه‌ها باید حداقل نسبت تضاد ۳:۱ را داشته باشند.

در مثال ما، تضاد رنگ آیکون فلش بسیار کم است. افزودن سایه به آیکون و یک پوشش گرادیانت در یک‌سوم بالایی تصویر، به آیکون، صرف نظر از تصویری که روی آن قرار می‌گیرد،  تضاد مناسب ۳:۱ را می‌دهد.

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

ریسک استفاده از دکمه با تضاد پایین این است که افراد کم‌بینا ممکن است آن را به عنوان یک دکمه تشخیص ندهند، زیرا شکل دکمه را نمی‌بینند. افزایش نسبت تضاد رنگ دکمه به بالاتر از 3:1، باعث بهبود دسترسی به آن و همچنین کمک به اصلاح سلسله مراتب بصری می‌شود.

افزایش تضاد رنگ فلش و دکمه به عددی بالاتر از 3:1، به ما طراحی زیر را می‌دهد. ما به تدریج در حال پیشرفت هستیم، اما هنوز هم مشکلات بیشتری برای رفع کردن وجود دارد.

8. تضاد رنگ متن

یکی دیگر از اصول طراحی رابط کاربری تضمین خوانایی واضح متن برای افراد با اختلالات بینایی است. برای دستیابی به این هدف، متن باید الزامات کنتراست رنگ استانداردهای راهنمای دسترسی به محتوای وب (WCAG) سطح AA نسخه ۲.۱ را رعایت کند:

• متن کوچک (۱۸ پیکسل و پایین‌تر) به حداقل نسبت تضاد ۴.۵:۱ نیاز دارد.
• متن بزرگ (بالاتر از ۱۸ پیکسل با وزن درشت یا بالاتر از ۲۴ پیکسل با وزن معمولی) به حداقل نسبت تضاد ۳:۱ نیاز دارد.

در مثال ما، متن کوچک موجود در عنصر شمارش عکس، از کنتراست کافی برخوردار نیست. ما با افزایش کدورتِ باکس خاکستری و همچنین اضافه کردن سایه متن، نسبت تضاد را به بالای ۴.۵:۱ افزایش می‌دهیم.

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

9. اتکا نکردن به رنگ به عنوان نشانگر

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

برای تضمین دسترسی‌پذیری یک رابط کاربری برای افراد کوررنگ، نمی‌توانید تنها بر رنگ برای انتقال معنا یا تمایز عناصر بصری تکیه کنید. شما نیاز به استفاده از نشانه‌های بصری اضافی برای تمایز عناصر رابط کاربری دارید.

در مثال ما، از رنگ آبی برای متن “نظرات” (reviews) استفاده شده است تا نشان دهد که یک لینک است. اگر رنگ حذف شود، متن لینک شبیه سایر متون به نظر می‌رسد، بنابراین افراد کوررنگ نمی‌توانند تشخیص دهند که یک لینک است. زیرخط‌دار کردن متن لینک آن را به طور واضح، در غیاب رنگ، از سایر متون متمایز می‌کند.

10. استفاده از یک فونت تکرار در طراحی رابط کاربری

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

در طراحی رابط کاربری، ایمن‌ترین کار استفاده از یک فونت تکرار (Sans Serif) است، زیرا آنها به طور کلی خواناترین، خنثی‌ترین و ساده‌ترین هستند.

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

11. اجتناب از متن سیاه خالص

یکی از اصول طراحی رابط کاربری  (UI)، معمولاً اجتناب از متن سیاه خالص، به دلیل کنتراست بسیار بالا با رنگ سفید، ایمن‌تر است. این کنتراست بالا در هنگام خواندن متن باعث خستگی و فشار چشم می‌شود.

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

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

12. استفاده از حداقل ۱.۵ خط فاصله برای متن اصلی

خط فاصله (Line height) فاصله عمودی بین دو خط متن است. فضای بین خطوط به افراد کمک می‌کند تا از خواندن مجدد همان خط متن جلوگیری شود. همچنین باعث می‌شود خواندن متن راحت‌تر به نظر برسد و احساس بهتری داشته باشد.

برای بهبود دسترسی‌پذیری و خوانایی، به ویژه برای متن‌های بدنه‌ی طولانی، اطمینان حاصل کنید که خط فاصله حداقل ۱.۵ (۱۵۰%) باشد. به طور کلی، حفظ خط فاصله بین ۱.۵ تا ۲ برای متون انگلیسی و حداقل 1.4 برای متون فارسی، معمولاً خوب عمل می‌کند.

در مثال ما، خط فاصله متن بدنه تنها ۱ (۱۰۰%) است. افزایش آن به ۱.۶ (۱۶۰%) به بهبود خوانایی متن کمک می‌کند.

مشاهده کردیم که با استفاده از چند نکته‌ی ساده اما کاربردی در طراحی رابط کاربری (UI)، به سرعت توانستیم مشکلات زیادی را در نمونه‌ی طراحی خود پیدا و برطرف کنیم. این راهنماها شاید محدودکننده به نظر برسند، اما هدفشان محدود کردن خلاقیت شما نیست. در عوض، به آن‌ها به عنوان یک بنیان محکم برای ساختن، کشف و آزمایش فکر کنید.

خوشبختانه، حالا متوجه می‌شوید که طراحی رابط کاربری (UI) اصلاً کار سختی نیست. و فقط نیازمند دانستن اصول طراحی رابط کاربری می‌باشید.

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