طراحای رابط کاربری واقعاً توانمند همیشه به این موضوع و بیشتر از اون توجه می‌کنن. وب سایتی که رابط کاربری خوبی داره با هارمونی ظاهری و تجربه کاربری خوب برای کاربر و انجام کارش بدون دردسر باعث رضایت کاربرا میشه.
این قضیه شامل کلی از موارد میشه؛ مثلاً یه انیمیشن کپی نشده ساده که توجه کاربرو به یه المان خاص جلب می کنه، یه طرح تمیز و غیر درهم و استفاده هوشمندانه از فضای خالی که کاربر رو از احساس آرامش سرشار می‌کنه.
توی این مقاله به این سوال که “رابط کاربری خوب چطور ایجاد میشه” جواب می‌دیم. پس اگه دارید با خودتون فکر می‌کنید چطور میشه تشخیص داد که یه رابط کاربری خوبه -یا حتی عالیه- و اینکه چطور باید در موردش تصمیم گرفت؟ ادامه این مقاله رو مطالعه کنید.
طبیعتاً اگه از نظر ظاهری وبسایتو بپسندید و حین کار باهاش به عینه کارکرد بی‌دردسر و سر‌راستی رو تجربه کنید، می‌تونید رابط خوب رو تشخیص بدید. ولی آیا راه ملموس‌تری هم برای تشخیص رابط کاربری خوب وجود داره؟ راهی که شکل رسمی‌تری داشته باشه؟
بهترین رابط کاربری چطوره؟ از کجا متوجه شید که رابط کاربری وبسایت خوبه؟
برای تشخیص کیفیت رابط کاربری می‌تونیم از مشخصه‌های کارآمدی که برای همین کار تعیین شده استفاده کرد. 5 مشخصه کارآمد بودن شامل امکان یادگیری، بازدهی، امکان یادآوری، خطاها و رضایت هستن.
امکان یادگیری: آیا کاربرا می تونن بدون دردسر کاری که مد نظرشون بوده رو انجام بدن؟
بازدهی: آیا رابط کاربری این امکانو برای کاربر ایجاد می‌کنه که سریعتر به هدفش برسه؟
امکان یادآوری: بعد از ترک وبسایت، احتمال اینکه وقتی کاربر سری بعد وارد سایت میشه نحوه استفاده از سایت رو به یاد داشته باشه چقدره؟
خطاها: رابط برای اینکه احتمال بروز خطای کاربرو به حداقل برسونه چه قدمی رو برداشته؟ و اینکه چطور برای کاربر امکان رفع خطا رو فراهم می‌کنه؟
رضایت: آیا کاربر از تعامل با طراحی رضایت داره؟
و مهمتر از تمام این موارد، یه رابط کاربری عالی باید ماهیت برند رو هم بازتاب بده تا بین رقبا به چشم بیاد و برای کاربرا یه تجربه دلپذیر رو رقم بزنه. پس با این پیش زمینه بریم که چند تا نمونه از شرکتایی که تونستن بهترین رابط کاربری رو داشته باشن رو بررسی کنیم.
Medium
مدیوم یه پلتفرم آنلاین مطالعه و نشره و همونقدر که کارآمده جذاب هم هست. با استفاده حداقلی از رنگ، فاصله‌گذاری بین خطوط، ترکیب تایپوگرافی که به خوبی انتخاب شده این وبسایت همه چیزش خوبه.
توی مدیوم، محتوا فرمانروایی می‌کنه. وقتی یه کاربر وارد سایت میشه، یه پنجره بالای لیست مطالب باز میشه که توش نوشته “اینجا بنویس” که کاربرو تشویق می‌کنه سریع شروع به نوشتن کنه.
وقتی کاربرا روی لینک “نگارش داستان” کلیک کنن، یه صفحه سفید تقریباً خالی نصیبشون میشه که چیزای اضافه ازش حذف شده و یه فضای خالی برای تمرکز روی نوشتن رو ایجاد کرده.
مقالات توی فرمت تک ستونی نشون داده میشن که خوندن و درک متن رو ساده تر می‌کنه. با یه سری امکان ساده مثل “زمان تقریبی مطالعه” و امکان هایلایت کردن و پاسخ دادن مستقیم توی خود متن محتوا، مدیوم به معنای واقعی کلمه تجربه ویراستاری فوق العاده و بی‌دردسری رو برای کاربرا فراهم کرده
Virgin America
وقتی که هدف کمک به کاربرا برای تکمیل پروسه رزرو پرواز باشه، ویرجین آمریکا اگر اولین نبوده باشه، یکی از اولین وبسایت‌هایی بوده که خواسته مشتری رو در اولویت و اساس قرار داده. برای خیلیا رزرو یه پرواز کار عذاب آوریه.
همونطور که یه ماشین ظرفشویی مارو از سابیدن ظرف خلاص می‌کنه، ویرجین آمریکا رابط کاربریشو از هر محتوای دیگه‌ای خالی کرده که توجه رو به مهتمرین سوال “کجا می خواید برید؟” معطوف کنه تا کاربر بلافاصله رزرواسیونو شروع کنه.
درسته که الان ممکنه قدیمی به نظر بیاد، ولی به عنوان یه سایتی که توی طراحی رابط کاربری مشتری محور پیشگام بوده شایستگی حضور توی این لیستو داره. متاسفانه از وقتی با هواپیمایی آلاسکا تلفیق شدن به نسبت قبل رابط کاربریشون عمداً شلوغ و به هم ریخته شده.
برگردیم به چیزی که باعث شد سایت ویرجین آمریکا یه نمونه عالی باشه: توی تمام پروسه رزرو پرواز، با کمک یه نوار بالای صفحه که گزینه‌های ممکن رو نشون میداد، کاربرا می‌تونستن انتخابشون رو ببینن. با وجود یه چنین امکانی، ویرجین آمریکا برای کاربرا امکان مشاهده و ویرایش انتخابشون رو به جای اینکه لازم باشه به حافظه‌شون تکیه کنن و اطلاعات رو خودشون یادآوری کنن فراهم کرد.
توی این سایت رابط کاربری به وضوح با این هدف طراحی شده بود که مطمئن بشن کاربر می‌تونه با حداکثر سرعت و بازدهی ممکن روی انجام کارش تمرکز کنه.
البته ویرجین ترتیبی داده بود که توی فضای رقابتی به چشم بیاد. استفاده از رنگای روشن، گرادیان رنگی و تصویرای جالب که ماهیت برند و تجربه کاربری اون رو منحصر بفرد و از وبسایت سایر رقبا مجزا کرده بود.
Airbnb
طراحی رابط کاربری این وبسایت دو تا کارو به خوبی انجام میده: رزرو یه مکان برای موندن و اعتمادسازی بین دو شخص کاملاً غریبه
این سایت هم مثل ویرجین آمریکا ساده کردن رزرو جا از همون صفحه اول وبسایت رو اولویتش در نظر گرفته. بi کمک ویژگی دیگه وبسایت که استفاده از ادبیات محاوره ای مثل «ادوارد، واسه پیدا کردن چی می‌تونیم کمکت کنیم؟» و استفاده از عبارتهای راهنما، کاربر همزمان به شکل مودبانه دعوت و راهنمایی میشه که برنامه‌ریزی برای اقامتشو شروع کنه.
این دعوت محاوره‌ای برای شروع جستجو جدای از اینکه فرآیند پیدا کردن جای اقامتو ساده‌تر می‌کنه، یه شیوه دلنشین برای نشون دادن ماهیت برنده.
برای سرچ اولیه فقط لازمه که فیلدای مربوط به مقصد، مدت اقامت و تعداد نفراتو پر کنید. با انتقال محل ورود باقی اطلاعات مورد نیاز به مراحل بعد جستجو، فرآیند رزرو ساده‌تر، دوستانه‌تر و روان‌تر شده.
صفحه‌های لیست اقامتگاه با یه سری توضیحات در مورد انواع هزینه‌های اضافی که ممکنه اعمال بشه تکمیل میشه، برای هر کاربری این یه فرآیند سرراست و ساده هستش.
دکمه «درخواست رزرو» دقیقاً زیر بخش توضیحات قرار داده شده و یکی از شفاف‌ترین رنگها رو توی صفحه داره که کاربرا رو دعوت می‌کنه با کلیک روی اون اقامتشون رو نهایی کنن.
بعد از اینکه کاربر درخواست رزرو مکان رو ارسال کرد، به صفحه تسویه حساب منتقل میشن. لیست اقامتگاها، قیمت‌ها و اطلاعات رزرواسیون سمت راست صفحه نشون داده میشه تا نیاز مهمان برای دسترسی به اطلاعات صفحه قبل رو کاهش بده.
سمت چپ صفحه، جای اینکه مستقیماً سراغ پرداخت وجه بره، به مهمان میگه که «به میزبانت سلام کن و بهشون بگو برای چی داری میای». با در نظر گرفتن چنین چیزی قبل از تسویه حساب یه ارتباط و گفتگو بین مهمان و میزبان ایجاد می‌کنه و کاربر رو بیشتر درگیر این فرآیند می‌کنه.
Airbnb به اینکه مردم رو به هم وصل کنه و به ایجاد تعامل نسبت به پرداخت اولویت بده افتخار می‌کنه – رابط کاربری هم این رو به بهترین شکل نشون میده
این مجموعه هوشمندانه به وبسایتش پرداخته و برای اینکه بین غریبه‌ها اعتماد ایجاد کنه، با استفاده از عکسای جذاب و ویدیو سعی کرده رابط کاربریش فضای احساسی رو منتقل کنه.
Boosted Boards
این یه نمونه از طراحی رابط کاربری با شخصیت خاصه. به محض ورود، کاربرا با تصاویر پویا و مهیج محصولات قابل ارائه استقبال میشن.
از اولین عکس وبسایت Boosted boards که قابل حمل بودن اسکوتر برقیاشونو نشون میده تا عملکرد قوی اسکیت برداشون حین حرکت و نهایتاً عکس جدیدترین اسکوتر برقیاشون، با یه نگاه سریع متوجه تمام محصولاتی که عرضه می کنن میشید. دقیقاً بالای این عکسا یه نوار از محصولاتشون قرار داده شده که به سادگی قابل دسترسی باشن.
تا اینجا شما تحت تاثیر قرار گرفتید و کنجکاو شدید، حالا وقت اینه که ببینید پشت این تصویر‌پردازی قوی چی هستش. کلیک کردن برای ورود به صفحه تک محصول شمارو به اصل ماجرا میرسونه. رابط کاربری غیر از محتوای مربوط به ویژگیهای خاص محصول و اطلاعات شرایط ویژه فروش، هیچ رنگی نداره.
در کنار این ویژگی، یه خلاصه از مهمترین اطلاعات محصول همراه با مشخصات تفکیکی و البته دکمه “افزودن به سبد خرید” قرار داده شده. در کل، این یه نمونه عالی از نحوه ترکیب تصاویر ساده ولی شاخص با المانهای متنی برای ایجاد کلیت مطلوبه.
Dropbox
دراپ باکس با اختلاف یکی از ساده ترین رابط‌های کاربری قابل درک رو داره. ایجاد یه پوشه و ساختار ترتیبی فایلها برای هر کسی که با کامپیوتر کار کرده باشه شناخته شده هستش. توی زمینه امکان یادگیری، چیز خاصی نداره که یه کاربر معمولی کامپیوتر ندونه چطور باید از همون اول کار ازش استفاده کنه. برای اکثر کاربرا این یه چیز طبیعیه که فایلاشونو از دسکتاپ درگ کننو منتقلش کنن به یه صفحه دیگه بدون اینکه حتی بدونن این کار شدنی هست یا نه!، فقط بخاطر اینکه یه چیزیه که باهاش از قبل آشنا هستن.
فضای دوستانه دراپ باکس که با استفاده از تصاویر شاداب ایجاد شده به کاربر کمک می‌کنه که با انتخاب کردن این محصول احساس راحتی کنه. در کنار این ویژگی، رابط کاربری خوبش باعث میشه که این محصول حس یه دوست قدیمی رو بده که آماده کمک به کاربرا برای تکمیل کار اشتراک‌گذاری فایلاشون هستش.
شاید بشه گفت در حال حاضر بهترین طراحی بلاگ تو دنیا رو دارن. توجه بسیار زیادی به جزییات شده، با استفاده از پالت‌های رنگی متوالی و آیکونای انیمیشنی، یه تصویر‌پردازی فوق‌العاده مرتبط با تمام تصویرپردازیای عالی دیگه ایجاد کردن.
Pitch
وبسایت pitch متعلق به یه شرکت تکنولوژی طراحی محوره و در واقع یه اپلیکیشن موبایل و وب هستش که بهتون تو ساخت فایل‌های ارائه مطلب (مثل پاورپوینت) کمک می‌کنه. سعیشون اینه که متقاعدتون کنن که می‌تونن برای ارائه‌ها کاریو کنن که پلتفرم Slack تو زمینه ارتباطات کرد و البته تو این زمینه خوبم عمل کردن.
همین که وارد صفحه اصلی میشید، متوجه میشید که برای تک تک المانای موجود توی صفحه کلی فکر شده. بلافاصله با پیام خوشامدگوییشون که با عبارت«ارائه های خیره کننده. ساخته شده با همکاری همدیگه » یه جمع بندی از محصول رو ارائه میده. مثل خود وبسایت، شعارشون ساده، مستقیم و ظریفه. با دو خط کوتاه، دقیقاً بهتون میگه که انتظار چیو باید داشته باشید.
طراحای رابط کاربری سایت، به شکل فوق العاده کاربرو با یه مثال به سمتی میبرن که متوجه شن اگر از اپلیکیشن استفاده کنن قراره چه مسیری رو تجربه کنن. تعادل خیلی خوبی بین سادگی و کامل بودن برقرار کردن. بدون اینکه طراحی رو شلوغ کنن مطمئن شدن که تمام ویژگیهای اولیه محصولشون پوشش داده شده.
این سایت با استفاده از تصویرای مختلف، از الگوهای رایج طراحی استفاده کرده ولی مثل بقیه سایتا از یه سری کارکتر ساده کارتونی که این روزا خیلی میبینید استفاده نکرده. استفاده از طراحی سه‌بعدی شبیه پیکسار تو این فضا یه مقداری غیرعادیه و همین باعث شده کاملاً به چشم بیاد.
مزایای طراحی رابط کاربریشون محدود به همین موارد نمیشه. یه سری انیمیشن و المانای پویا ظریف و هوشمندانه استفاده کردن که باعث شده سایت زنده باشه و کاربر رو هل میده جلو و تشویق به اسکرول می‌کنه. خیلی آروم توجهتونو از راست به چپ صفحه معطوف می‌کنن و انیمیشنایی که استفاده کردن با تاخیری نشون داده میشن که باعث میشن سر هر کدوم از ویژگیها و مزایای سایت مکث کنید.
نهایتاً یه احساس ظریف خودمونی بودن، شیطنت و حرفه‌ای بودن براتون باقی می‌مونه. دیگه هرگز آماده کردن یه ارائه خسته کننده نمیشه!
Cleo
cleo یه اپلیکیشن موبایلی چت محوره که بهتون توی مدیریت و سازماندهی مخارج کمک می‌کنه هم یه روش کنجکاوانه و پویا توی طراحی رابط کاربریش استفاده کرده که ممکنه برای اون دسته ازافرادی که دنبال استفاده از تصویرایی هستن که جلب توجه کنه جالب باشه. مشخصاً تمرکزشون روی دانلوده، ولی از طراحی کارتونی و انیمیشنای گرافیکی کنار ویژگیهای محصول استفاده کردن، و از روش اسکرول برای معرفی ویژگیهای قابل ارائه‌شون استفاده کردن.
این روششون جالبه ولی در کل استفاده از اختلاف کنتراست بالای بین رنگ آبی نه چندان خوشرنگ و رنگ سفید، انیمیشنایی که حرکتشون تنده و اینکه نمیشه رو یه بخش خاصی تمرکز کرد، یه مقداری نگران کننده‌ست. در مورد طراحی رابط کاربری، این ضرب‌المثل قدیمی که “کمم زیاده” همیشه صدق می کنه. اپلیکیشنای دیگه ای مثل Slack یا Blinkist هستن که صفحات لندینگ خیلی خوبی دارن. بلینکیست که یه اپ کتابخونیه واسه طراحی محصولش چندتا جایزه برده. مشخصه که طراحی خوب تو ذات شرکتشونه.
به پالت رنگی جذابی که تو عکس پایین هست نگاه کنین، اینکه چطور توجه کاربرو از شعارضرورت محورشون به سمت دکمه اقدام به عمل هدایت می کنن و اینکه چطور محصولشونو تو رنگ کناریش گذاشتن.
طراحی صفحه طوریه که همزمان که چشم تو حالت طبیعی دنبال نمونه‌های محصول که به بهترین شکل سمت راست صفحه نشون داده شده میره، تمرکزتونو به توضیحات چپ صفحه جلب می‌کنه. یه طراحی تعاملی و پربازده
Frank and Oak
سایت Frank and oak که مربوط به یه مجموعه فروش پوشاکه که شدیداً روی فعالیتای رسانه‌ای و سبک زندگی تمرکز داره، از رابط کاربریش برای جلب توجه کاربراش و درک سبک و سلیقه شون استفاده می‌کنه.
از دید تجربه کاربر، خرید آنلاین از این وبسایت یه تجربه سرراست و ساده هستش، در کنارش شرکت با استفاده از عکسای جسورانه و فونت ساده sans-serif ماهیت برند و مخاطبای هدفشو نشون میده.
بعد از کلیک روی یه آیتم، صفحه تک محصول روی دوتا چیز تکیه داره: تصویر محصول و دکمه اقدام به خرید، چون این دوتا بخش تنها قسمتای رنگی تو صفحه هستن.
پر کردن اطلاعات شخصی برای فرآیند تسویه حساب توی اولین خرید هیچ وقت تجربه جالبی نیست. یه کار آزاردهنده‌ست که اجباراً باید انجام بشه یا اقلاً تا الان کسی راهی برای جذاب‌تر کردنش پیدا نکرده.
هر چند این وبسایت تو این زمینه خوب کار کردن، اونا با تقسیم فرم به قسمتای کوچیک‌تر، اطلاعات ورودی مورد نیازو به تدریج از کاربر می‌گیرن تا فشار کمتری رو بهشون وارد کنن. و البته خود فرم هم ساده‌ست و در هم ریختگی نداره.
اینا که گفتیم یه سری از نمونه سایتای با طراحی رابط کاربری خوب بودن. طراحی یه رابط کاربری کاربردی و بی‌دردسر بخش اساسی ایجاد ارتباط مثبت با کاربره، که البته لازم به یادآوری نیست که باید به کاربر پسند بودنش ضروریه. وقتی می‌خواید برای یه وبسایت رابط کاربری طراحی کنین 5 تا مشخصه ای که توی ابتدای این مقاله بهش اشاره کردیم رو حتما مد نظر داشته باشید.
ما تو مقالات دیگه ای که در آینده به وبسایت اضافه می‌کنیم اطلاعات بیشتری تو این زمینه در اختیارتون می‌ذاریم ولی اگه می‌خواید یه طراح رابط خوب و حرفه‌ای بشید حتما براش دوره‌های آموزشی لازم رو طی کنید.
بدون دیدگاه