تعریف UI/UX به زبان ساده

مقدمه:

اگه تا حالا اسم UI و UX به گوشت خورده باشه، احتمالاً برات سؤال شده که اصلاً این دوتا چه فرقی با هم دارن؟ چرا همیشه کنار هم گفته می‌شن؟ و اصلاً وقتی می‌گیم طراحی UI/UX، دقیقاً داریم درباره چی حرف می‌زنیم؟
خیلی‌ها فکر می‌کنن UI و UX تقریباً یک چیزن یا UX فقط به قشنگ بودن یک اپلیکیشن مربوط می‌شه. در حالی که ماجرا خیلی بیشتر از این حرف‌هاست.
برای اینکه تفاوتشون رو راحت‌تر بفهمیم، اول ببینیم UI و UX دقیقاً چی هستن و بعد با چند مثال ساده ببینیم هرکدوم چه نقشی در طراحی یک محصول دارن.

اول از همه: UX چیه، UI چیه؟

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

حالا همین موضوع رو روی اپلیکیشن دیجی‌کالا ببینیم:
UX = آیا پیدا کردن گوشی موبایل مورد نظرت راحته؟ مسیر خرید چقدر ساده و قابل فهمه؟ مراحل ثبت سفارش چطور طراحی شدن؟ اگه محصولی موجود نباشه، کاربر چطور متوجه می‌شه؟
UI = دکمه افزودن به سبد خرید چه رنگیه؟ فونت قیمت چقدر خواناست؟ آیکون‌ها چه شکلی‌ان و کجا قرار گرفتن؟ عناصر صفحه چطور کنار هم چیده شدن؟

یک مثال ساده دیگه برای درک تفاوت UI و UX

فکر کن اپلیکیشن مثل یه آدمه:
UX = شخصیت و رفتارش مهربونه؟ (سریع جواب می‌ده؟ گیج‌کننده حرف می‌زنه؟)
UI = لباس و ظاهرش (شیک لباس پوشیده؟ رنگ لباسش به هم میاد؟)
می‌تونی یه آدم با ظاهر خیلی شیک (UI عالی) داشته باشی که رفتارش افتضاحه (UX بد) مثلاً اپی که خیلی خوشگله ولی مراحل ثبت‌نامش ۱۰ مرحله داره و کاربر فرار می‌کنه. برعکسش هم هست: اپی که UX فوق‌العاده داره (سریع، ساده) ولی UI‌ زشته و کهنه به نظر می‌رسه.

چرا این دوتا انقدر با هم قاطی می‌شن؟

خیلی هم عجیب نیست که UI و UX رو با هم اشتباه بگیریم. توی خیلی از شرکت‌ها یه نفر هم روی UX کار می‌کنه و هم روی UI و حتی عنوان شغلیشون هم UI/UX Designer هست. برای همین کم‌کم این دو تا مفهوم توی ذهنمون یکی می‌شن.اما وقتی وارد جزئیات کار بشی، می‌بینی تمرکزشون فرق داره.

• UX بیشتر روی این تمرکز می‌کنه که کاربر قراره چه مسیری رو طی کنه، چطور به هدفش برسه، کجا ممکنه گیر کنه و چطور می‌شه این مسیر رو ساده‌تر کرد.
• UI بیشتر روی این تمرکز می‌کنه که این مسیر چطور در رابط کاربری به کاربر نمایش داده بشه؛ از رنگ و فونت گرفته تا دکمه‌ها، آیکون‌ها و چیدمان عناصر.
  
  اگه بخوایم این تفاوت رو با یه تصویر ذهنی ببینیم:
  UX مثل اسکلت و ساختار یه ساختمونه، UI مثل ظاهر، نما و دکوراسیونشه.
  اگه ساختار ساختمان درست نباشه، هرچقدر هم نما و دکوراسیونش قشنگ باشه مشکل اصلی همچنان سر جاشه. توی طراحی محصول هم دقیقاً همین اتفاق می‌افته، یه UI زیبا نمی‌تونه UX ضعیف رو جبران کنه.

یه تست ساده برای تشخیص سریع

هر وقت شک کردی یه موضوع مربوط به UX هست یا UI، یه سؤال ساده از خودت بپرس: این چیزی که دارم بررسی می‌کنم، بیشتر به تجربه و راحتی کاربر مربوطه یا به ظاهر رابط؟

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

پس فقط خوشگل بودن یه اپلیکیشن کافی نیست؛ کار کردن باهاش هم باید راحت و بدون دردسر باشه.

نتیجه‌گیری

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