9 اشتباه رایج در طراحی رابط کاربری اپلیکیشن
طراحی رابط کاربری (UI) یکی از مهمترین عوامل در موفقیت یک اپلیکیشن می‌باشد. طراحی UI قدرتی بسیار بزرگ دارد که می‌تواند تفاوت میان یک اپلیکیشن موفق و ناموفق را به وضوح نشان دهد. در کل، طراحی UI تاثیر بسیار زیادی بر روی تجربه کاربری دارد و می‌تواند به کاربران کمک کند تا به راحتی با اپلیکیشن شما ارتباط برقرار کنند و از آن استفاده کنند.
-
ناسازگاری بدون مفهوم میان عناصر رابط کاربری UI
جهت حصول اطمینان از یک برنامه مطلوب و دقیق، از به کاربردن سبک های مختلف می بایستی خودداری شود. این کار سیگنال های مختلفی را برای مخاطبان اپلیکیشن شما ارسال می کند. راه حل کلیدی این است که هر وقت می توانید، از تکرار الگوها و عناصر استفاده کنید. یک طراحی با ظاهر سازگار تا حد زیادی در ایجاد اعتماد با مخاطبان و ایجاد یک تجربه لذت بخش کمک می کند. به علاوه، این به کسب و کار شما کمک می کند تا مخاطبان بسیار سریع تر راه خود را در برنامه شما پیدا کنند. جهت جلوگیری از تناقض، پیشنهاد می شود تا به موارد زیر توجه نمایید:
- استفاده مداوم از پالت های رنگی برای مواردی همچون متن ها، پیوند ها، پاورقی ها و غیره
- فونت های ثابت با سبک هایی پیوسته برای عنوان، پاراگراف ها، پیوند ها وغیره
- استفاده از گوشه های گرد و مربع شکل در نماد ها، کارت ها، دکمه ها و غیره
- حفظ ضخامت خط برای آیکون ها و غیره
-
استفاده از سایه پیش فرض یا drop-shadow
وقتی صحبت از سایه ها می شود، استفاده کمتر از آن ها مناسب تر است. توصیه می شود که از سایه های بیش از حد استفاده نشود، اگر نه با یک طراحی شلوغ و خسته کننده مواجه می شوید. اما اگر مجبور به استفاده از آن هستید، این نکات را مد نظر قرار دهید:
- از سیاه پیش فرض یا drop-shadow تا حد ممکن استفاده نشود و اگر مجبور به استفاده از آن هستید، به طور تنظیم شده از آن استفاده شود.
- به صورت بسیار ظریف از آن استفاده کنید. از رنگ سیاه برای سایه ها استفاده نکنید زیرا بسیار تند می باشد، در عوض از نسخه تیره تر از رنگ پس زمینه خود استفاده کنید زیرا طبیعی تر به نظر می رسد.
-
تمایز بسیار کم میان دکمه های اصلی و فرعی (ثانویه)
هنگام کار با اپلیکیشن ها، کارهای بسیار زیادی خواهید داشت که کاربران قادر به انجام آن ها می باشند. اهمیت دادن بصری به اقدامات اصلی بسیار مهم و حیاتی است. همه ی پیمایش ها از طریق دکمه ها صورت میگیرند، بنابراین باید با ایجاد حروف برجسته، دکمه های اصلی را برای کاربران متمایز نمود. اقدامات ثانویه باید کمتر برجسته و در عین حال قابل مشاهده باشند. در ادامه نحوه ی تشخیص میان دکمه های اصلی و ثانویه آورده شده است:
- برای دکمه های اصلی و ثانویه از وزن بصری متفاوتی استفاده شود. دکمه با بیشترین وزن بصری بیشتر مورد توجه قرار می گیرد.
- برای دادن وزن بصری به دکمه های اصلی از رنگ های قوی، متن پررنگ استفاده شود، یعنی برخلاف دکمه های ثانویه عمل شود.
-
عدم توازن و سلسله مراتب در متن
متن، واحد اصلی محتوای اطلاعاتی است، دقیقا به همین دلیل است که باید همیشه خوانا و منظم باشد. متن با قالب بندی مناسب، درک کاربران از اطلاعات را تسهیل می کند. طراحان UI می بایست این کار را به جامع ترین و قابل هضم ترین شکل ممکن سازمان دهند.
- وجود تضاد زیاد میان هر عنوان سبک: برای جدا کردن هر سبک از اندازه، وزن و رنگ استفاده شود.
- برای مشاهده پذیری سلسله مراتب و توازن اطلاعات، همیشه با یک عنوان بزرگ شروع کنید که می بایستی برجسته ترین عنصر صفحه باشد. عناوین فرعی و سایر متن ها باید بطور قابل توجهی کوچکتر باشند.
- از فاصله و تناسب در فاصله گذاری استفاده شود.
- بلوک های متن خود را به وضوح از یکدیگر جدا کنید، از فضای کم برای اتصال اطلاعات مرتبط استفاده کنید.
-
آیکون نگاری ضعیف
گاهی اوقات به نظر می رسد که آیکون ها ساده ترین قسمت طراحی اپلیکیشن ها هستند. برخی از طراحان حتی آن ها را به عنوان یک عنصر تزئینی اضافی می پندارند، در حالی که آن ها در واقع یک بخش مهم و اساسی از رابط های مدرن هستند. به خصوص در اپلیکیشن های تلفن همراه که آیکون ها معادل دکمه ها می باشند، رابطی پیدا خواهید کرد که بیشتر از آیکون ساخته شده است. به همین دلیل بسیار مهم است که نمادی مناسب انتخاب شود که به طور واضح معنای عنصر را بیان کند و یک سبک ثابت را برای نماد ها در اپلیکیشن ایجاد کند.در مورد استفاده از آیکون ها، رعایت نکات زیر مهم می باشد:
- برای نمادهای خود از بردارها / SVG استفاده کنید. این ساده ترین راه برای اطمینان از بهتر به نظر رسیدن آیکون در اپلیکیشن ها است.
- از یک سبک ساده استفاده کنید.
- حصول اطمینان از این که پیام آیکون شما به صورت روشن و واضح به کاربران منتقل می شود.
-
عناصر تراز نشده
دو روش اساسی برای کمک به شما در سازماندهی رابط کاربری وجود دارد: یک شبکه 12 ستونی و یک شبکه پایه. هر دو در طراحی نهایی قابل مشاهده نیستند اما برای داشتن یک رابط کاربری متعادل حیاتی هستند. بسیاری از طراحان فکر میکنند استفاده از شبکه می تواند خلاقیت شما را محدود کند و به نوعی نیز واقعیت دارد.
- موارد مرتبط را با جوانب مختلف تراز نکنید. همیشه سعی کنید عناصر مرتبط را با یک طرف تراز کنید زیرا این عناصر از نظر بصری به یکدیگر مرتبط و متصل می شوند.
-
کنتراست پایین
کنتراست همه چیز در یک ترکیب بصری می باشد. وقتی کنتراست کمی میان عناصر رابط خود دارید، همه عناصر با هم ترکیب میشوند و در نهایت با یک رابط کاربری کسل کننده و یکدست مواجه خواهید شدT زیرا تمامی عناصر به یک شکل به نظر می رسند. کنتراست کم برابر است با قابلیت استفاده کم.
- برای هدایت توجه کاربر از طریق رابط کاربری از کنتراست استفاده کنید.
- برای جدا کردن بخش های مختلف برنامه از کنتراست استفاده کنید.
- از کنتراست برای جدا کردن عناصر از پس زمینه اپلیکیشن استفاده شود.
-
فرم های گیج کننده
فرم ها بخش مهمی از سفر کاربران در اپلیکیشن هستند. آن ها برای ورود به سیستم، ثبت نام، بررسی و غیره استفاده می شوند. بنابراین ارائه راهنمایی های واضح و قابل درک، قبل و بعد از ارسال فرم ها بسیار مهم می باشند.
- فقط برای نشان دادن خطا از رنگ های مخصوص استفاده کنید. همیشه بازخورد عملی داشته باشید تا روند ورود صحیح را تسهیل کنید.
- اگر فرم طولانی است، از بخش های تقسیم شده استفاده نمایید.
-
قدرت لمس یا Touch ضعیف در تلفن همراه و تبلت
اهداف کوچک (آیکون های کوچک) لمسی برای مخاطبان بسیار سخت هستند زیرا آن ها نمی توانند برای باز کردن اپلیکیشن خود به راحتی بر روی آن ها ضربه بزنند. همه ما از ضربه زدن روی دکمه ی اشتباه در تلفن همراه ناراحت می شویم و باید صبر کنیم تا صفحه اشتباه باز شده بارگیری شود.
- توجه به این نکته که متوسط عرض انگشت اشاره بزرگسالان 1.6 تا 2 سانتی متر می باشد.
- هدف لمسی خود را با عرض حداقل 45 تا 57 پیکسل هماهنگ کنید. این به شما فضای کافی برای برخورد به هدف را می دهد.
