اکثر اپلیکیشن ها و وب سایت ها مشکلاتی مشابه در رابط کاربری (UI) خود دارند. می توان آنها را در دسته خطا های قابل پیشبینی قرار داد. ولی جای نگرانی نیست چون که این مشکلات با کمی تامل و دقت رفع می شود.
البته هر نوع رابط کاربری با تایپوگرافی بهتر، انتخاب رنگ مناسب می تواند بر روی این مشکلات سرپوش بگذارد اما این مثل آتش زیر خاکستر است و نمی توان از آن سر باز کرد.
در ادامه این مشکلات را مطرح کرده و راه حل را پیش روی شما خواهیم گذاشت؛
عدم وجود ساختار شبکه ای گرید (Grid)
یکی از رایج ترین مشکلاتی که وجود دارد، عدم وجود ساختار شبکه ای یا گرید است. یا ممکن است این ساختار به صورت رندوم یا تصادفی وجود داشته باشد که خیلی وضعیت بدتری دارد!
متاسفانه اکثر برنامه ها مانند تصویر سمت چپ در طراحی فوق هستند.
گرید به اسکن و مرور کمک کرده و چشم را به سمت المان ها مهم تر راهنمایی می کند.
عدم وجود گرید سبب کاهش بهره وری، نظم و تناسب المان ها شده و در نهایت پردازش مغز سخت می شود.
روش رفع مشکل:
المنت یا المانی از صفحه را پیدا و انتخاب کنید که حتی الامکان با برخی از شبکه ها هماهنگ بوده و متناسب باشد.
سپس این المان را طوری طراحی کنید که حداقل 10 ، 16 یا 20 نقطه از کناره صفحه فاصله داشته باشد.
برای مثال؛ یک خط عمودی را مانند تصویر زیر در نظر بگیرید و در طرف دیگر هم به همان شکل اضافه کنید تا باهم تراز و به یک اندازه باشند. و از این فاصله به عنوان الگو برای باقی المان ها در ساختار شبکه خود استفاده نمایید.
اگر در تراز کردن مشکل پیدا کردید می توانید با اعدادی دیگر امتحان کنید. مثلا یک عدد قابل تقسیم بر 8 یا 10 را انتخاب کنید و دوباره شروع به تراز کردن کنید.
یک روش سریع تر، ضرب اندازه پایه است؛ فرض کنید اندازه پایه یا الگو "کوچک" باشد، به همین ترتیب، 1.5 یا 2 برابر آن اندازه "متوسط" و 2 یا 3 برابر اندازه "بزرگ" خواهد شد.
برای مثال، اندازه پایه را 8 در نظر می گیریم؛ پس اندازه های کوچک، متوسط و بزرگ به ترتیب 8 ، 16 و 32 خواهد شد.
اکنون از این سه عدد در تمام صفحات با توجه به دو نکته زیر استفاده می کنیم:
1- برای تقسیم و چیدمان المان ها باید از اندازه "بزرگ" استفاده شود (مانند گروه هایی از اشیاء در کل صفحه)
2- برای نمایش اشیاء در داخل المان ها اصلی (مانند کارت های محصول) باید از اندازه "متوسط" و "کوچک" استفاده شود. هر چقدر این المان ها به هم نزدیک تر باشند، ارتباط آن ها با مغز ما بیشتر می شود.
تراز نبودن لیبل یا برچسب دکمه ها
بیش از 90 درصد محصولات این مشکل را دارا می باشند.
ریشه اصلی آن عبارت است از:
- عدم تراز عمودی متن داخل دکمه که یا خیلی کم یا خیلی زیاد است.
- متن داخل دکمه فاصله کمی از کناره های طرفین دکمه دارد و به آن چسبیده است. حتی اگر نچسبیده باشد اغلب خیلی زیاد یا خیلی کم است.
هر دو بر خوانایی تاثیر می گذارند و ناخودآگاه برنامه شما را تضعیف می کند. کاربران شاید مستقیما این اشتباهات را نبینند ولی متوجه می شوند که چیزی درست نیست!
این بر اعتماد کاربران به برند شما تاثیر می گذارد. اگر این اعتماد وجود نداشته باشد، منجر به ناکارآمد شدن محصول می شود.
راه حل سریع:
به سادگی می توانید اندازه ها را دوباره بر حسب دکمه ها تعریف و به قسمت داخلی دکمه اختصاص دهید. در اینجا به جای اندازه های "بزرگ" و "متوسط" بهتر است از اندازه های "کوچک" استفاده نمایید.
اگر انجام آن به مشکل برخوردید به راحتی می توانید با اضافه کردن دو حرف بزرگ "W" انگلیسی به طرفین کناره های دکمه آن را انجام دهید. اگر لیبل یا متن داخل دکمه به صورت صحیح بر اساس اندازه های تعریف شده جای بگیرد نشان دهنده موفقیت آمیز بودن آن است.
مشکل رایج دیگری که وجود دارد بالا یا پایین بودن لیبل دکمه است؛
متن داخل دکمه یا لیبل باید روی محور عمودی باشد؛ برای رفع این مشکل کافی است ارتفاع فونتی که استفاده می کنید با اندازه Container متناسب باشد. یعنی اگر فونت زوج باشد Container هم باید زوج باشد و اگر فونت فرد باشد Container هم بایستی فرد باشد.
همچنین برسی کنید که ارتفاع دکمه با اندازه الگو یا پایه متناسب باشد. البته در نظر داشته باشید که باید آن را به اندازه کافی بزرگ در نظر بگیرید تا به راحتی لمس یا کلیک شود. ارتفاع 40-50 برای آن مناسب است.
تراز نبودن مؤلفه ها در ورودی های فرم
یکی دیگر از مشکلات رایج تراز نبودن مؤلفه ها در ورودی (Input) های فرم است.
برسی کنید که چک باکس به صورت وسط چین در مرکز مربع کوچک قرار بگیرد. دقت کنید که فاصله های بین المان ها در ورودی های فرم باید اندازه "کوچک" (حداقل) باشد.
قدم بعدی؛ تایپوگرافی
یقیناً ارتقاء کیفیت تایپوگرافی برای تطابق با گرید یا ساختار شبکه بسیار مهم و قابل توجه است. اما این فرایند کمی پیچیده تر است و نیاز به زمان و توجه بیشتری دارد.
اگر تا اینجا مشکلات مربوط به تراز کردن المان ها را رفع کرده اید، متوجه تاثیر آن در بازده و مشاهده محصولتان خواهید شد؛ و این شما را ترغیب می کند که قوانین یکپارچه ای برای طراحی ایجاد کنید، شاید حدس زده باشید؛ یک دیزاین سیستم!
یک سیستم طراحی یا دیزاین سیستم می تواند به رتبه برند شما اثر ببخشد.
برای این که متوجه شوید که به دیزاین سیستم نیازی هست یا نه، کافیست خطوط شبکه یا گرید را بر دیزاین خود رسم کنید؛ اگر همه چیز بر وقف مراد بود و خطوط و المان ها باهم متناسب بودند، نشان دهنده وجود دیزاین سیستم است.
اگر متناسب نبودند مشکلی نیست! بهترین زمان برای شروع اکنون است!
ما به عنوان انسان، زیبایی طلب هستیم و توقع یک طراحی خوب را داریم؛ ولی اغلب نمی دانیم که چه باید کرد؟! به محصولات برند های روز دنیا می نگریم و چه کسی نمی خواهد اپلیکیشن یا وب سایت خود جزو این محصولات باشد؟ همه میخواهیم!
پس شروع کنید و در آن راه موفق باشید!
این مقاله چند وقت پیش هست که برای اولین بار در ویرگول پست کردم شاید به کسی کمک کنه.
ترجمه شده در : www.vandadsoft.ir
