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


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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

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

titanpad

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

 

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

highrise

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

 

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

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

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

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

 

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

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

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

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

 

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

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

nirvana

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

 

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

خرید

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

shoply

فاکتور

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

invoicera

پاندورا

واضح است که طراحان پشت پاندورا رابط‌های موجود در پخش‌کننده‌های MP3 را در نظر گرفته‌اند. و سایر دستگاه های رسانه ای در طراحی رابط کاربری خود. این یک طراحی بصری و آسان برای استفاده و تقریباً بدون منحنی یادگیری است.

pandora

Wufoo

رابط طراحی فرم

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

wufoo

Grooveshark

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

grooveshark

Wridea

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

wridea

کوله پشتی

کوله‌پشتی از دکمه‌ها برای عملکردها و برگه‌ها برای پیمایش استفاده می‌کند و استفاده از آن را بصری‌تر می‌کند.

backpack

شیر را به خاطر بسپار

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

rememberthemilk

فهرست تادا

فهرست‌های Ta-da رابط کاربری خود را تا حد امکان ساده نگه می‌دارد. هیچ اطلاعات اضافی وجود ندارد، فقط وظیفه در دست است. این فوق العاده شهودی است و تجربه کاربری عالی را ایجاد می کند.

tadalist

Relenta

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

relenta

Viviti

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

viviti

پرش

رابط

Bounce بسیار سرراست و ساده است. ابزارهای موجود بصری هستند (برای یادداشت برداری کافیست روی یک منطقه بکشید، بازخورد بنویسید و سپس به اشتراک بگذارید).

bounce

Meetifyr

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

meetifyr

DoingText

DoingText با عدم نیاز به هر نوع فرآیند ثبت‌نام، استفاده را ساده می‌کند. اسناد به سادگی مبتنی بر URL هستند و همکاران فقط به URL نیاز دارند. این همکاری را به یک فرآیند تقریباً آنی تبدیل می‌کند.

doingtext

Writeboard

Writeboard در نوار کناری در کنار قسمت محتوای اصلی، راهنمای سبک‌سازی مفیدی دارد.

writeboard

نوشته شده به طور انحصاری برای WDD توسط کامرون چپمن.

طراحی رابط کاربری مورد علاقه شما چیست؟ نکات دیگری برای طراحی رابط های کاربری برجسته دارید؟ لطفاً آنها را در نظرات به اشتراک بگذارید!

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *