قوانین طلایی و اصول کلیدی طراحی رابط کاربری زیبا، موثر و ساده

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

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

بیشتر بخوانید:

قدرت مسکات ها(mascots) در برندسازی و طراحی رابط کاربری(UI)

Table of Contents

درباره UI بدانیم.

رابط کاربری (UI) بخش مهمی از هر محصول نرم افزاری است که اگر به خوبی انجام شود، کاربران حتی متوجه آن نمی شوند. اما وقتی این کار ضعیف انجام شود، کاربران نمی توانند برای استفاده موثر از یک محصول از آن عبور کنند و به سرعت متوجه ضعف طراحی خواهند شد!

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

به همین منظور در ادامه این مطلب به بررسی مهم ترین اصول طراحی رابط کاربری خواهیم پرداخت. اکثر این اصول برای هر سیستم تعاملی مانند محیط های رابط کاربری گرافیکی سنتی (مانند برنامه های دسکتاپ و موبایل، وب سایت ها) و رابط های غیر کاربری مانند سیستم های تعامل مبتنی بر صدا قابل اجرا هستند.

اصول طراحی UI عبارتند از:

کاربران را در کنترل رابط قرار دهید.

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

اعمال را برگشت پذیر کنید.

این ویژگی همانند UNDO/ REDO در ورد است. هنگامی که شما اشتباها مطلبی را تایپ یا کپی می کنید، می توانید آن را به حالت قبلی بازگردانید. این قانون به این معنی است که کاربر همیشه باید بتواند هر کاری را که انجام می دهد به سرعت پس بگیرد. این به کاربران اجازه می دهد تا محصول را بدون ترس دائمی از شکست جستجو کنند. وقتی کاربر می داند که خطاها به راحتی قابل بازگرداندن هستند، این امر آن ها را به جستجوی گزینه های ناآشنا را تشویق می کند. برعکس، اگر کاربر مجبور باشد با هر اقدامی که انجام می‌دهد بسیار مراقب باشد، ممکن است ناامید شود.

شاید رایج ترین رابط کاربری گرافیکی که در آن کاربران گزینه «Undo/Redo» را دارند ویرایشگرهای متن و گرافیک باشند. در حین نوشتن متن یا ایجاد گرافیک، «لغو» به کاربران اجازه می‌دهد تغییراتی را اعمال کنند و از طریق تغییرات ایجاد شده قدم به قدم به عقب برگردند. «Redo» به کاربران اجازه می‌دهد تا واگرد را لغو کنند، به این معنی که وقتی چند قدم به عقب برگردند، می‌توانند از طریق تغییرات خود دوباره به جلو حرکت کنند. اشنایدرمن توضیح می‌دهد: «این ویژگی اضطراب را تسکین می‌دهد، زیرا کاربران می‌دانند که خطاها قابل بازگرداندن هستند و کاوش در گزینه‌های ناآشنا را تشویق می‌کند.»

هنگامی که کاربران به اشتباه عملکرد سیستم را انتخاب می کنند، «واگرد» می تواند بسیار مفید باشد. در این حالت، تابع واگرد به عنوان «خروج اضطراری» عمل می‌کند و به کاربران اجازه می‌دهد حالت ناخواسته را ترک کنند. یکی از نمونه‌های خوب چنین خروجی‌های اضطراری، پیام اعلان Gmail با گزینه لغو زمانی است که کاربران به طور تصادفی ایمیلی را حذف می‌کنند.

بیشتر بخوانید:

فلت دیزاین چیست ؟ تاریخچه + مزایای استفاده

رابط های کاربری را سازگار کنید.

Mike Gilfillan، توسعه‌دهنده اصلی فنی در Edge of the Web می‌گوید: «ثبات امری کلیدی است – رنگ‌های چندگانه، فونت‌ها و سبک‌ها می‌توانند سردرگمی ایجاد کنند، در حالی که سازگاری باعث آشنایی می‌شود.»

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

به کاربران اجازه دهید به راحتی از طریق میانبرها حرکت کنند.

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

درست مانند روشی که اکثر کاربران ویندوز از میانبر CTRL + C برای کپی سریع متن و CTRL + V برای چسباندن آن استفاده می کنند، شما باید از طریق میانبرها، ناوبری و رابط های کاربری را آسان کنید.

با مخاطب از طریق طراحی جملات تاییدی یا قدردانی در ارتباط باشید.

به گفته اشنایدرمن، «توالی اقدامات باید در گروه هایی با آغاز، میانه و پایان سازماندهی شود. بازخورد آموزنده در تکمیل گروهی از اقدامات به کاربران رضایت از موفقیت، احساس آرامش، سیگنالی برای حذف برنامه های احتمالی از ذهن آنها و شاخصی برای آماده شدن برای گروه بعدی از اقدامات می دهد.»

به عنوان مثال سعی کنید کاربران را پس از تکمیل سفارش به صفحه تشکر همراه با خلاصه ای از آنها ببرید و به آنها اطلاع دهید که سفارششان تأیید شده است..

تا حد امکان از خطا جلوگیری کنید.

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

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

با این حال، گاهی اوقات اشتباهاتی رخ می دهد. بنابراین اگر کاربر خطایی مرتکب شده است، حتماً توضیح واضحی برای درک خطا و راه حلی آسان برای حل آن به او ارائه دهید.

بازخورد آموزنده ارائه دهید – تصدیق کنید.

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

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

نتیجه گیری

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