طراحی رابط کاربری کاری دشواری است چون گاهی اوقات بین گزینه‌های زیادی قرار می‌گیریم که بین انها باید در مورد نحوه چیدمان، فاصله‌ها، تایپوگرافیکی، ترتیب و ترکیب رنگ‌ها انتخاب کنیم حالا به این انتخابات، اصول دسترسی پذیری و روانشناسی و قوم شناسی هم اضافه کنید و اینحا دقیقا جای ایی که طراحی رابط کاربری را دشوارتر می‌کند.
بیشتر تصمیمات برای طراحی بصری و تعاملی توسط سیستمی منطقی انتخاب میشه و شاید استعداد هنری یا شهودی در ابتدای کارطراحی کمک شایانی را به ما ده. ولی این قوانین ساده که در پایین‌تر اشاره کرده ام است، که بسیار کمک کننده می‌باشد.
داشتن سیستمی از قوانین منطقی به شما می‌کنه که تصمیمات آگاهانه و موثر بگیرید و بدانیم که بدون استفاده از این دستورالعمل و قوانین طراحی به سمت، تنها جابه‌جایی المان‌های رابط کاربری حرکت می‌کند.
حالا در این مقاله سعی کردم یه سری نکته‌هایی که بصورت عمومی و کلی اشاره کنم که شما هم میتونین بعنوان یه دستورالعمل مفید از انها استفاده کنید.
سریعترین راه یادگیری انجام داده است، پش شروع کنیم و بدانیم که تجریه کردن مطمئن ترین راه یادگیری است.
نقسیم اطلاعات مرتبط به گروه‌‌های کوچکتر به مرتبط شدن طرح و سازماندهی رابط کاربری کمک شایانی می‌کند و باعث درک سریعتر و اسان‌تر برای کاربران می‌شود تا این اطلاعات را راحتتر به خاطر بسپارند.
برای گروه بندی از قاعده‌های زیر استفاده کنید:
با دقت به شکل زیر متوجه می‌شوید که برای گروه بندی از فاصله‌ها برای استفاده شده است تا دسته بندی بین سکشن‌های محتوا ایجاد گردد.
یعنی عناصر مشابه را به روشی مشابه که بصورت مشابه، کار می‌کنند را در کنارهم گروه بندی کنید. این اقدام باعث می‌شود که طرح شما قابل پیش بینی تر باشد و طبیعتا ریسک اشتباهات کاربر را کم می‌کند.
برای مثال از ایکون‌های با ساختار یکسان استفاده کنید. اگر از ایکون پر استفاده می‌کنید حتمن در همه ایکون‌ها و در کل محصول از این الگو استفاده کنید و یا گوشه‌های خمیده ثابت ( سعی کنید ضریبی از 2pt باشد) یکسانی برای ایکون‌ها، برای یکپارچکی استفاده کنید.
از متن و تگ‌هامتنی برای ایکون‌ها استفاده کنید تا مطمئن شوید کاربران منظور شما را کامل متوجه شده اند.
همه اطلاعات و محتوا موجود یک رابط کاربری از اهمیت یکسانی برخودار نیستند. با کمک جلوه‌های بصری انها را برجسته‌تر از سایر محتوا کنید. وجود این ترتیب سلسله مراتب محتوایی باعث می‌شود که کاربران راحتتر صفحه را اسکن کنند و روی مناطق مورد نظر تمرکز کنند و حس نظم به کاربران انتقال می‌دهد.
با کمک کانتراست(تضاد رنگ‌ها)، اندازه، رنگ، فاصله‌ها، جایگاه عناصر و عمق عناص می‌توانید سلسله مراتب بصری واضح و شفاف ایجاد کنید.
در نمونه‌ی پایین بنری در قسمت اول وب سایت(hiro section) مشاهده می‌کنید که وجود سلسله مراتب بصری حس نظم و ترتیب را به کاربر انتقال می‌دهد.
یکی از روش های تست سلسله مراتب بصری استفاده از تست Squint است. در این روش صفحه را تار کنید، بعد بررسی کنید که ایا مهمترین عناصر قابل تشخیص هست هنوز ؟ و ایا با همین وضعیت موضوع محصول را متوجه می‌شوید؟
در نمونه پایین تست squint را مشاهده می کنید که عناصر متعددی وجود دارد که قابل درک هستند و باعث جلب توجه می‌شوند در حالی که اکشن اصلی در پایین صفحه برجسته نیست.
در نتیجه: در طرح بالا اکشن اصلی ( پایین سمت چپ) را با کمک کانتراست رنگ‌ها متمایزتر می‌کنیم.
مجدد برای طرح بالا تست squint رو اجرا می‌کنیم.
همانطور در طرح بالا مشاهده می‌کنید کمی بهتر و واضح‌تر شد ولی نقاط ابهامی مانند سکشن مربوط به هدر وجود دارد.
استایل‌ها و جلوه‌های بصری می‌تواند باعث حواس پرتی برای کاربران شوند و بار شناختی (میزان توانایی ذهن برای فهم طرح) را افزایش دهد. از استفاده غیرضروری از خطوط، پترن‌ها، رنگ‌ها و انیمیشن‌ها اجتناب کنید و رابط کاربری را در ساده ترین و متمرکزترین حالت نگه دارین.
در تصویر پایین استایل‌های حاشیه اطراف تصویر غیرضروری است و برای گروه‌بندی و انتقال اطلاعات هم سودمند و مفید نیست پس با خیال راحت این حاشیه حذف می‌گردد.
هر رنگ باید در ابتدا با هدف مشخص و سپس به اندازه مورد نیاز استفاده شود و فقط برای جلوه‌های بصری مورد استفاده قرار نگیرد چون رنگ‌ها باعث جلب توجه کاربر می شود و ممکن است عاملی برای حواس پرتی و سردرگمی آن‌هاشوند.
در ابتدای طراحی از رنگ‌های سیاه یا سفید با خاکستری استفاده کنید. هر جایی برای انتقال مفمومی لازم به رنگ‌ها داشتین از انها برای انتقال مفاهیم استفاده کنید و ان رنگ را به پاساژ رنگی خود اضافه کنید.
نکته مهم در این بخش این است که رنگ های اصلی و برند خود را در عناصر تعاملی استفاده کنید. این‌کار به کاربران یاد می‌دهد که چه چیزی تعاملی است و چه چیزی نیست! و از استفاده بی مورد از رنگ برند در عناصر غیرتعاملی خودداری کنید.
به مثال پایین دقت کنید.
کارت ها به خودی خود احساس تعامل با کاربر را دارند. در مثال بالا عناصر غیر تعاملی در کارت اقامتگاه حذف گردیده است و هر انچه که مورد نیاز به تعاملات با کاربر است از رنگ اصلی و برند استفاده شده است.
کانتراست نسبت اختلاف رنگ روشن و تاریک عناصر نسبت به هم هستند و این نسبت از ۱:۱ تا ۲۱:۱ تعریف می‌شود برای مثال متن مشکی روی پس زمینه مشکی کمترین کانتراست و مقدار نسبت ۱:۱ را دارد و متن مشکی روی پس زمینه سفید بیشترین کانتراست و مقدار نسبت ۲۱:۱ را داراست.
برای اطمینان از دسترسی پذیری رابط کاربری باید استاندارد WCGA کانتراست 2.1 با نشانه AA را داشته باشند در نتیجه عناصر رابط کاربری مانند فرم‌فیلد‌ها و دکمه ها باید حداقل کانتراست ۳:۱ را داشته باشند.
در مثال پایین کانتراست ایکون برگشت، خیلی کم است و با افزودن سایه روی تصویر و زیر ایکون، ان را اصلاح می‌کنیم.
نسبت کانتراست متنون باید 4.5:1 باشد تا رابط کاربری شما دسترسی پذیری مناسبی برای افرادی که اختلال بینایی دارند، باشد یا نمره AA از استاندار WCGA دریافت کند.
متن کوچک( کمتر از ۱۸پیکسل) به حداقل کانتراست 4.5:1 نیازمند است و متون بزرگ ( بزرگتر از ۱۸ پیکسل) به حداقل کانتراست ۳:۱ نیازمند هستند.
در مثال پایین نماد نمایشگر اسلاید برای تصویر و متن متا(meta) در زیر عنوان از کانتراست متن مناسبی برخودارد نیست .
یکی از المان دسترسی پذیری، در نظر گرفتن کوررنگی کاربرانتان است که عمدتا مردان درگیر این موضوع می‌باشند و معمولا برای افراد که دارای کوررنگی هستند تشخیص رنگ های قرمز و سبز کمی دشواری دارند. در رابطه با این موضوع رنگ‌ها نمی‌توانند انتقال معنا را برا این دسته افراد فراهم کنند.
برای حل این مورد باید از المان‌های بصری اضافی برای متمایز کردن عناصر رابط کاربری استفاده کنید.
برای مقال در تصویر پایین، برای اشاره به بازخودرها که یک المان تعاملی است علاوه بر رنگ یک نشانه لینک طور به ان اختصاص داده ایم (در این شرایط، استفاده از ایکون‌ها نیز پیشنهاد می‌شود).
تایپ فیس مجموعه‌ایی از وزن و اندازه فونت‌های مرتبط با سبک طراحی محصول شماست. برای تعیین فونت فیس چون حروف sans serfi خوانایی ساده تر و عامه پسندتری دارند بهتر است مورد استفاده قرار گیرد.
در مثال تصویر پایین فونت فیس را تغییر داده ایم که بر اساس شخصیت برند نیز مطابقت دارد.
در تعیین تایپ فیس باید ساختار و ارتفاع حروف چینی فونت‌ها را مسلط باشید.
از نظر من استفاده ار حروف بزرگ یعنی تون صداتون رو بلند کرده اید و تاکید زیادتری به اون موضوع دارین به مثال پایین دقت کنید:
از طرفی خوانایی حروف بزرگ کمی دشوارتر است چون کاربران هر حرف را، یک کلمه می‌بینند چون هر حرف یه شکل مستطیلی داره و این موضوع کاربران را مجبور می‌کند که حرف به حرف محتوا را مطالعه کنند.
وقتی که فایل فونتی را میخریم تمامی وزن‌ها آن فونت را مشاهده می‌کنید ولی نیاز به استفاده از همه فونت‌ها نیست. استفاده ار فونت‌های با وزن مختلف، متن شما را نویز دار می‌کند در نتیجه باعث بهم‌ریختگی طراحی شما می‌گردد.
یک سری نکات سریع برای برای وزن فونت ها :
در مثال پایین وزن فونت را کمی بیشتر کردیم تا خوانایی متون بیشتر شود.
چون کانتراست زیاد بین رنگ سفید و مشکی بالاست و باعث خستگی چشم کار هنگام خواندن محتوا می‌شود.
در انگلیسی کاربران متون را از چپ به راست میخوانند و برای انها اسکن محتوا بصورت F انجام می‌شود و هم‌ترازی متون باید از سمت چپ باشد ولی در فارسی دقیقا برعکس این عمل کنید و سطر‌های متون خود را از راست تراز کنید.
تراط وسط‌چین معمولا برای عناوین و سرفصل‌ها و متون کوتاه مورد استفاده قرار می‌گیرد چون در متون کوتاه قدرت خوانایی بالاتری دارد ولی در متون بلند کاربر باید در هر سطر به دنبال ابتدای سطر باشن امکان خستگی کاربر در خواندن متون، وجود دارد.
ارتفاع خط‌فاصله عمودی بین دو خط مرکزی سطر است.
وجود فاصله مناسب باعث افزایش خوانایی و احساس راحتی در کاربر می‌شود. برای این کار مطمئن شوید حداقل فاصله بین خطوط از هم ۱.۵ یا ۱۵۰٪ از هم باشد( این عدد باید بین ۱ تا ۲ باشد ).
حالا مقایسه طرح اولیه با طرح نهایی :
با رعایت و مرور ۱۶ دستورالعمل تفاوت را در رابط کاربری مشاهده می‌کنید که در نهایت باعث افزایش چشم‌گیری در دسترسی پذیری اپلیکیشن می‌شود.
