چگونه یک رابط کاربری عالی طراحی کنیم

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

افراد (عمدتا) از برنامه‌ها به دلیل مفید بودن استفاده می‌کنند، نه به این دلیل که زیبا به نظر می‌رسند. اما این بدان معنا نیست که می‌توانید طراحی رابط کاربری خوب را نادیده بگیرید، یا فقط یک رابط کاربری با ظاهر عمومی را کنار هم بگذارید. طراحی رابط کاربری خوب به رضایت کلی کاربر از هر برنامه وب می‌افزاید.

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

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

در زیر تعدادی از اصول و ایده‌ها برای طراحی یک رابط کاربری عالی آورده شده است.

 

انسجام حیاتی است

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

به عنوان مثال، اگر در صفحه اصلی برنامه شما کاربران بین صفحات دارای نوار پیمایش بالا حرکت می کنند، مطمئن شوید که همان نوار پیمایش بالا در صفحات بعدی ظاهر می شود و صفحات پیوند داده شده از آن به همان ترتیب ظاهر می شوند.

موارد دیگری که باید ثابت نگه داشته شوند عبارتند از طرح رنگ و طرح کلی شما، و همچنین پیوندهایی به صفحات مهمی که ممکن است مستقیماً در برنامه مورد استفاده قرار نگیرند (مانند صفحه حساب یا سؤالات متداول).

 

کاربران شما مرتکب اشتباه خواهند شد

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

در هر صورت، مهم است که کاربران بتوانند به راحتی اشتباهاتی را که مرتکب می‌شوند، لغو کنند.

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

 

تغییرات را برجسته کنید

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

چند راه برای برجسته کردن محتوا وجود دارد. یکی از محبوب ترین آنها قرار دادن پس زمینه سایه دار در پشت محتوای جدید است.

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

TitanPad از کدگذاری رنگی برای نشان دادن تغییرات ایجاد شده توسط هر کاربر استفاده می کند.

 

فعال کردن میانبرهای صفحه کلید

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

به متداول‌ترین اقداماتی که کاربران در وب‌سایت شما انجام می‌دهند فکر کنید و مطمئن شوید میان‌برهای صفحه‌کلید برای آن‌ها در دسترس است.

همچنین مطمئن شوید که از میانبرهای صفحه کلیدی که استفاده می کنید منطقی هستند. برخی از میانبرها معمولاً برای عملکردهای خاصی استفاده می‌شوند (مانند Ctrl+Z برای لغو یا Ctrl+V برای چسباندن)، بنابراین مطمئن شوید که آن‌ها مانند سایر برنامه‌ها به کار خود ادامه می‌دهند.

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

 

استفاده از استانداردها و قراردادهای آشنا

برنامه‌های کاربردی پرکاربرد استانداردهای خاصی را برای روشی که انتظار می‌رود چیزها در یک برنامه کار کنند، تعیین کرده‌اند. برای مثال، مردم عادت دارند نماد پوشه را برای «باز کردن» یا کلیپ‌بورد «جای‌گذاری» ببینند.

آنها همچنین عادت دارند که گزینه‌ها و اقدامات خاصی در زیر منوهای برنامه خاص ظاهر شوند (ایجاد یک سند یا فایل جدید تقریباً همیشه در زیر منوی کشویی «فایل» قرار دارد؛ کپی و جای‌گذاری تقریباً همیشه در زیر «ویرایش» یافت می‌شود. منوی کشویی).

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

اگر بین برنامه‌های مختلف سازگاری می‌بینید، باید به طور جدی از نمادهای مشابه یا مشابه برای برنامه خود استفاده کنید. این برنامه را برای کاربرانی که از برنامه دیگری به برنامه شما تغییر می‌دهند شهودی‌تر می‌کند و تجربه آنها را بهبود می‌بخشد.

 

گزینه‌های شخصی‌سازی پیشنهاد

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

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

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

Highrise به کاربران امکان می دهد طرح رنگ داشبورد خود را سفارشی کنند. گزینه‌های سفارشی‌سازی کوچک مانند این می‌توانند تا حد زیادی رضایت کاربر را افزایش دهند.

 

استفاده از راهنمای ابزار و پیام‌های راهنما یکپارچه

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

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

این یک راه بی‌نقص برای ارائه کمک در زمانی است که شخصی واقعاً از برنامه شما استفاده می‌کند، که در وقت آنها صرفه‌جویی می‌کند و کل تجربه را لذت‌بخش‌تر می‌کند.

 

از پیمایش Tabbed و دکمه‌ها برای عملکردها استفاده کنید

پیمایش برگه‌ها مزایای زیادی نسبت به دکمه‌ها یا پیوندهای متنی دارد. با این حال، مهمترین آن تأثیر روانی ظریفی است که دارد.

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

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

 

همه چیز را در پشت یک پنجره مدال قرار دهید

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

نمونه خوبی از پنجره مودال با پس‌زمینه سایه‌دار.

 

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

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

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

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

گزینه دیگر این است که کاربران خود بتوانند برچسب‌ها را پنهان کنند، هرچند مطمئن شوید که گزینه پیش‌فرض برای نمایش آنهاست.

 

چیزها را ساده نگه دارید

بهترین رابط‌ها به همان اندازه که می‌توانند مؤثر باشند، ساده هستند. به خاطر اضافه کردن زنگ و سوت، زنگ و سوت اضافه نکنید. اگر یک تابع هدف مشخصی دارد، آن را اضافه کنید. اگر اینطور نیست، انجام ندهید.

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

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

 

جریان کاری کارآمد

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

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

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

 

15 نمونه از رابط های کاربری عالی

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

خرید

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

فاکتور

Invoicera از پیمایش نوارها و دکمه‌ها برای انجام اقدامات استفاده می‌کند. همچنین طرح و طرح رنگی نسبتاً ساده و مستقیمی را حفظ می کند.