10 دستورالعمل اساسی در طراحی UI

برای طراحی UI چه کاری باید انجام دهیم؟

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

در ادامه مقاله، چند دستور در طراحی Ui را که به شما در طراحی وب کمک می کند را خواهید خواند.

1. فضا را خالی کنید

شما باید بیشتر فضای خالی ایجاد کنید تا صفحه نمایش خالی.

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

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

شما باید از فضاهای خالی صفحه برای جهت دادن به کاربر استفاده کنید.

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

هر کاری که انجام می دهید،مطمئن شوید که نگویید”چیزی برای اینجا قرار دادن ندارم”

1. اسلایدر

نباید از اسلایدر برای مقادیر قابل اندازی گیری استفاده کنید

تا حالا از استفاده اسلایدر ها خسته شدید؟ می خواهید به روی اسلاید 6 بروید، اما همچنان روی 7 و 5 باقی می ماند؟این تقصیر شما نیست- این به عهده طراح UI تان است.

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

1. منو کشویی

در طراحی UI باید تنها زمانی از منو کشویی استفاده کنید که گزینه های زیادی وجود دارد

زمانی که چندین گزینه وجود دارد، مانند انتخاب کشور یا غذای مورد علاقه، پس استفاده از منوی کشویی انتخاب مناسبی است، البته به شرطی که قوانین مربوط به لیست کشویی را برای بهبود کارایی رعایت کنید.

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

اگر منوی کشویی شما شامل گزینه های زیادی است،پس از یک جستجو یا فیلتر برای دسترسی بهتر کاربر به نرم افزار استفاده کنید.

1. اندازه

طراحی UI باید به اندازه انگشت کاربران بزرگ باشد

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

دستور العمل های طراحی Ui برای آیفون حداقل اندازه 44 عرض پیکسل و طول 44 پیکسل است. راهنمای طراحی Ui و تعامل رابط کاربری مایکروسافت اندازه بین 26 تا حداکثر 36 پیکسل توصیه کرده اند.

1. نوار پیمایش بی نهایت

در طراحی Ui باید فقط در محتواهای سبک از پیمایش بی نهایت استفاده کنید.

پیمایش بی نهایت چیزی است که اکثر نرم افزارهای فضای مجازی از آن استفاده می کنند. نیازی به کلیک “بعدی” برای رفتن به صفحه دیگر نیست.بارگیری و نمایش محتوا همزمان با پیمایش کاربر انجام می شود.

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

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

1. صفحه بندی

در طراحی ui باید در محتواهایی که ابتدا، انتها و وسط دارند از صفحه بندی استفاده کنید

صفحه بندی ممکن است که منسوخ شده ب نظر برسد، اما مزایایی نیز دارد:

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

1. نمایش بده توضیح نده

نباید از مطالب طولانی برای درک اینکه برنامه چطور کار می کند استفاده کنید

عبارت “عمل کن حرف نزن”،تکنیکی ست که به خواننده اجازه می دهد که داستان را از طریق حواس و احساسات خودش به جای توضیح و راهنمایی طراحی، بفهمد.

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

مثلا دمو ویدئو برای نرم افزار و طراحی ui هایی که پیچیده هستند انتخابی ایده ال است.حتی نکات روی صفحه هم می تواند در طراحی Ui موفق به شما کمک کند.

1. برچسب ها

در طراحیUi باید به برچسب ها آیکون های توصیفی بدید

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

البته همه آیکون ها معنی مشابهی ندارند، ممکن است که یک آیکون دو معنی داشته باشد پس برچسب ها هم کمک می کنند که دقیقا هدف از کار چیست.مثلا علامت ذره بین هم به معنای جستجو و هم به معنای بزرگنمایی ست.

1. مولفه های اصلی

در طراحی ui شما باید از اجزای اصلی رابط کاربری دستگاه استفاده کنید

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

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

1. بارگذاری

در طراحی Ui اگر بارگذاری طول می کشد شما باید از چرخش(spinner)استفاده کنید،

استفاده از نماد بارگذاری به کار نشان می دهد که کارهایی در حال انجام است، اما مقداری زمان می برد.اما اگر می دانید که زمان انجام یک کار چقدر طول می کشد،از یک نوار پیشرفت استفاده کنید.

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

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

امیدوارم که از 10 دستورالعمل اساسی برای طراحی ui لذت برده باشید و بتوانید از آنها برای بهینه سازی طراحی خود استفاده کنید