رابط کاربری مناسب نقشی کلیدی در ذهنیت، برند سازی، اعتماد سازی و جذب کاربر دارد و بی توجهی به آن می‌تواند محبوبیت شما را در میان مخاطبانتان به شدت کاهش دهد و باعث شود آنها جذب رقبایتان شوند. برای این که بتوانید وبسایت و اپلیکیشن‌های با کیفیت طراحی کنید باید به جزئیات دقت کنید. به همین دلیل در این مطلب تصمیم گرفتیم برخی از اشتباهات طراحی رابط کاربری که بسیار رایج هستند به همراه راه‌حل‌هایی برای رفع آن بیان کنیم. در صورتی که قصد طراحی سایت حرفه‌ای برای کسب و کار خود دارید می‌توانید از خدمات آی وحید استفاده کنید. این شرکت جز بهترین‌های ایران به حساب می‌آید و تا به حال وبسایت های بسیاری از شرکت های مطرح ایران را طراحی کرده است، می‌توانید در بخش نمونه کارها این موارد را مشاهده نمایید.
ناهماهنگی بین عناصر Ui
برای این که یک اپلیکیشن یا وبسایت با رابط کاربری آسان داشته باشید نباید از چندین سبک در کنار هم استفاده نمایید. نکته کلیدی در این مورد این است که الگوها و عناصر را هر زمان که لازم است تکرار کنید. یک دیزاین منسجم به ایجاد اعتماد بین بازدیدکنندگان و داشتن یک تجربه لذت بخش کمک می‌کند. علاوه بر این به مخاطب کمک می‌کند تا سریع‌تر نحوه استفاده از برنامه شما را یاد بگیرد. برای جلوگیری از این مورد می‌توانید اقدامات زیر را انجام دهید:
- استفاده از پالت رنگی برای عناصر موجود در صفحه مانند دکمه‌ها، متن‌ها، پیوندها و …
- به کارگیری فونت‌های ثابت برای عنوان‌ها، پاراگراف‌ها و لینک‌ها
- استفاده از گوشه‌های گرد یا مربع برای اشکال هندسی
- به کارگیری خطوطی باضخامت ثابت
استفاده نادرست از سایه‌ها
استفاده بیش از حد از سایه‌ها باعث خواهد شد طراحی شما شلوغ به نظر برسد. اگر قصد استفاه از Shadow ها را دارید نکات زیر را مد نظر قرار دهید :
- از سایه انداز پیش فرض استفاده نکنید بلکه از منو تنظیمات آن را ظریف تر کنید.
- به کار بردن رنگ مشکی باعث می‌شود طرح شما خشن به نظر برسد، برای این که سایه شما بهتر به نظر برسد در از یک نسخه تیره تر از رنگ پس زمینه خود استفاده کنید. با این کار طرح طبیعی تر به نظر می رسد.
تفاوت ایجاد نکردن بین دکمه های اولیه و ثانویه
یکی از اشتباهات طراحی رابط کاربری که اهمیت زیادی هم دارد این است که به اقدامات اولیه نسبت به اقدامات ثانویه به یک اندازه جلوه بصری بدهید. تمام مسیریابی طراحی شما از طریق دکمه‌ها انجام می‌شود بنابراین با برجسته سازی دکمه‌های اولیه شناسایی آن را برای کاربر آسان کنید. اقدامات ثانویه باید کمتر جلب توجه کند اما باید به گونه ای باشد که اگر کاربر به دنبال آن بود به راحتی قابل دسترس باشد. برای ایجاد تفاوت بین دکمه های اصلی و ثانویه موارد زیر را هنگام طراحی رعایت کنید :
- از وزن بصری متفاوت برای دکمه‌های مختلف استفاده کنید. دکمه‌هایی که قوی‌ترین وزن بصری را دارند توجه بیشتری به خود جلب می‌کنند.
- از رنگ‌های پر رنگ و متن‌هایی با وزن بالا و اندازه بزرگ برای دکمه‌های اصلی استفاده کنید و برای اعمال ثانویه برعکس عمل کنید.
عدم توجه به سلسله مراتب در متن
متن، واحد اولیه محتوای اطلاعاتی است، بنابراین باید همیشه خوانا و سازماندهی شده باشد. متنی که دارای قالب بندی مناسب باشد درک کاربر از محتوا را تسهیل می‌کند.
وظیفه ما به عنوان یک طراح این است که این متون را به قابل هضم ترین و جامع ترین راه سازماندهی کنیم. برای این کار مواردی وجود دارد که باید در نظر داشته باشید :
- کنتراست زیادی برای عناوین ایجاد کنید. برای این کار از اندازه، وزن و رنگ استفاده نمایید.
- برای این که سلسه مراتب به وضوح دیده شود همواره از یک عنوان بزرگ استفاده کنید. این مورد باید بزرگ‌ترین عنصر صفحه باشد و سرتیترهای فرعی و سایر متن ها باید به میزان قابل توجهی کوچکتر باشند.
بلوک های متن خود را به وضوح جدا کنید، از فضای کمی بین خطوط پاراگراف استفاده کنید و فاصله زیادی برای جداسازی بصری بلوک های مختلف اطلاعات به کار ببرید.
آیکون گرافی نامناسب
گاهی اوقات دیزاینرها فکر می‌کنند آیکون ها ” آسان ترین ” بخش طراحی هستند و حتی برخی از طراحان آنها را به عنوان یک عنصر تزئینی «اضافی» می بینند، در حالی که آیکون‌ها بخشی اساسی از رابط کاربری های مدرن هستند، به خصوص در موبایل که آیکون ها معادل دکمه ها هستند.
به همین علت بسیار مهم است که نماد مناسبی را انتخاب کنید که معنای المان را به وضوح بیان کند و یک سبک ثابت برای آیکون‌ها در سراسر برنامه خود داشته باشید. برای اجتناب ازاین مورد از اشتباهات طراحی رابط کاربری نکات زیر را مد نظر قرار دهید :
- مطمئن شوید که پیام آیکون واضح است.
- از یک سبک ثابت استفاده کنید: اول از همه مشخص کنید که می‌خواهید Iconها تو پر باشند یا تو خالی، علاوه بر این ضخامت خطوط و شعاع گوشه ها نیز باید ثابت باشد.
- سعی کنید نمادی که به کار می‌برید به صورت SVG باشد. این ساده ترین راه برای اطمینان از این است که نماد شما در هر دستگاهی واضح به نظر می رسد.
عدم توجه به تراز بندی عناصر
کلید زیبایی و متعادل جلوه دادن هر چیدمانی، استفاده از قدرت همسویی در اشیا است. برای سازماندهی به عناصر می‌توانید از شبکه‌ها استفاده کنید، درست است که آنها نامرئی به نظر می‌رسند اما برای متعادل سازی رابط کاربری ضروری هستند.
بسیاری از طراحان فکر می‌کنند استفاده از راهنما می‌تواند خلاقیت را محدود کند و این به نوعی درست است. اما اگر شما به تازگی در حال یادگیری طراحی رابط کاربری هستید بهتر است قبل از شکستن قوانین ابتدا آنها را به خوبی یاد بگیرید.
نکته کلیدی که می‌توانید برای تراز بندی در طراحی رابط کاربری از آن استفاده کنید مورد زیر است :
عناصری که با هم مرتبط هستند را در جهات مختلف تراز نکنید، سعی کنید همیشه عناصر مرتبط را در یک طرف تراز کنید زیرا آنها از نظر بصری به هم متصل هستند.
استفاده از کنتراست کم
کنتراست یکی از مهم‌ترین موارد در ترکیب بصری است. هنگامی که بین عناصر رابط کاربری کنتراست پایینی وجود داشته باشد، همه عناصر با هم ادغام می شوند و در نهایت یک UIکسل کننده و ناخوانا خواهید داشت. برای استفاده از کنتراست مناسب در رابط کاربری به نکات زیر توجه کنید :
- از کنتراست برای هدایت توجه کاربر استفاده کنید. به عنوان مثال در قسمتی که قصد فراخوان عمل دارید از رنگ‌هایی که کنتراست بالا دارند استفاده نمایید.
- از کنتراست برای جداسازی بخش‌های مختلف صفحات وبسایت یا اپلیکیشن استفاده نمایید. مثلا از رنگ‌های مختلف برای نشان دادن تفاوت بین سر تیترها، محتوا و پاورقی استفاده نمایید.
برای این که مطمئن شوید که از رنگ‌های مناسب استفاده کرده اید می‌توانید از وبسایت Colorable استفاده نمایید.
استفاده از فرم‌های گیج کننده
یکی دیگر از اشتباهات طراحی رابط کاربری استفاده از Form های گیج کننده است. فرم‌ها بخش مهمی از سفر کاربر در طراحی شما هستند و از آنها برای ورود به سیستم، ثبت نام و … استفاده می‌شود. بنابراین به کار بردن راهنما قبل و بعد از ارسال فرم ضروری است. موارد زیر می‌تواند به شما برای طراحی بهتر فرم‌ها کمک کند :
- اگر فرم شما خیلی طولانی است، آن را به چند بخش تقسیم کنید و با یک نوار، پیشرفت کاربر را نشان دهید تا مخاطب بداند در چه مرحله ای است.
- برای نشان دادن خطا فقط از رنگ استفاده نکنید. همیشه بازخورد عملی نشان دهید تا فرآیند ورود تسهیل شود.
استفاده از هدف لمس‌های کوچک
استفاده از دکمه‌های کوچک برای کاربر خسته کننده است زیرا انجام عمل مورد نظر کاربر را دشوار می‌کند. احتمالا تا به حال شما هم احساس نا امیدی ناشی از ضربه زدن بر روی یک دکمه اشتباه و منتظر ماندن برای باز شدن یک صفحه اشتباه را تجربه کرده‌اید. بنابراین هنگام طراحی کلیک‌ها این نکته را در بگیرید که اندازه انگشتان کاربران متفاوت است! اندازه مناسب برای دکمه ها عبارتست از :
- میانگین عرض انگشت یک بزرگسال 1.6 تا 2 سانتی متر است. بنابراین دکمه هایی با اندازه مناسب ایجاد کنید تا کاربر فضای کافی برای ضربه زدن بدون نگرانی را داشته باشد.
استفاده از تصاویر بی ربط یا بی کیفیت
عکس ها در رابط کاربری به بیان بهتر داستان کمک می‌کنند. بنابراین تصویری انتخاب کنید که مکمل داستان و ظاهر برنامه شما باشد. هنگام انتخاب تصویر عوامل زیر را در نظر بگیرید :
- از انتخاب عکس های بی ربط خودداری کنید. عکس هایی به کار ببرید که مربوط به خدمات یا محصولتان باشد.
- از تصاویر با کیفیت بالا استفاده کنید.
سخن پایانی
هدف نهایی طراحان UI، تولید رابط های بصری منطبق بر اصول زیبایی شناسی است تا در نهایت منجر به اعتماد سازی و جذب کاربر به محصول شود. در این مطلب از آی وحید به بررسی اشتباهات طراحی رابط کاربری و راه‌حل‌های پرداختیم. شما می‌توانید از این موارد لیستی تهیه نمایید و هنگام دیزاین آن ها را مدنظر قرار دهید. با انجام چندین باره این کار دیگر نیازی به لیست نیز نخواهید داشت.