6 تفاوت اساسی UI و UX

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

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

۶ تفاوت UI و UX که با مثال واقعی می‌فهمی!

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

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

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

اصلاً UI چیه و چرا فقط خوشگل‌کردن صفحه نیست؟

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

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

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

یه دکمه خوشگل لزوماً دکمه خوبی نیست

مثلاً یه دکمه خاکستری کم‌رنگ رو روی پس‌زمینه سفید در نظر بگیر. شاید توی طرح اولیه مینیمال و تمیز به نظر بیاد، ولی اگه متنش خوانا نباشه، کاربر اصلاً نمی‌فهمه باید کجا بزنه. طبق استاندارد دسترس‌پذیری WCAG درباره کنتراست متن، برای متن‌های معمولی نسبت ۴٫۵ به ۱ معیار سطح AA هست؛ البته برای متن بزرگ و بعضی حالت‌ها قواعد متفاوتی وجود داره.

حتی اندازه ناحیه کلیک هم مهمه. توی معیار اندازه هدف در WCAG 2.2، حداقل ۲۴ در ۲۴ پیکسل CSS همراه با استثناهای مشخص مطرح شده؛ قرار نیست فکر کنیم با ساختن یک آیکون ۱۲ پیکسلیِ خوشگل مشکل حل می‌شه. می‌بینی؟ طراحی رابط کاربری هم حساب‌وکتاب داره. اگه فرق بین UI و UX رو فقط به زیبایی محدود کنیم، همین نکته‌های کاربردی رو از دست می‌دیم.

از طرف دیگه، «زبان بصری» مهمه؛ یعنی اگه دکمه تأیید توی یک صفحه سبزه، بهتره توی صفحه بعدی هم بی‌دلیل نقش و ظاهرش عوض نشه. تیم‌ها معمولاً برای همین از سیستم طراحی یا Design System کمک می‌گیرن؛ مجموعه‌ای از رنگ‌ها، فاصله‌ها، تایپوگرافی، کامپوننت‌ها و قواعد استفاده از اون‌ها. اینجوری هر بار مجبور نیستی طراحی UI رو از صفر حدس بزنی.

خب، UX چیه و از کجا شروع می‌شه؟

حالا بریم سراغ UX یا User Experience که بهش می‌گیم تجربه کاربری. این یکی فقط مربوط به چیزی نیست که توی صفحه می‌بینی. سوال اصلیش اینه: کاربر با محصول ما واقعاً تونست به هدفش برسه؟ چقدر راحت بود؟ کجا گیج شد؟ چه انتظاری داشت و آخرش چه برداشتی از اون تجربه پیدا کرد؟

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

یکی از آدم‌های مهم این حوزه دان نورمن (Don Norman)ـه که توی دهه ۹۰ اصطلاح تجربه کاربری رو مطرح کرد و در اپل روی این نگاه کار می‌کرد. حرف اصلی این مکتب ساده‌ست: تجربه کاربر فقط یک صفحه یا یک دکمه نیست؛ کل برخوردش با محصول و خدمات رو باید ببینی. برای همین نمی‌تونیم UX رو فقط «قشنگ بودن حس کاربر» معنی کنیم. UI و UX با هم کار می‌کنن، اما اندازه و جنس مسئله‌شون یکی نیست.

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

حواست باشه UX با «فقط احساس» فرق داره

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

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

حالا بریم سراغ ۶ فرق UI و UX؛ دونه‌دونه و بی‌حاشیه

تا اینجا فهمیدیم UI و UX دو اسم برای یک کار نیستن و تفاوت‌های UI و UX رو باید توی کار واقعی دید. حالا می‌خوام ۶ تفاوت UI و UX رو با یه مثال مشترک جلو ببریم: یک سایت فروش دوره که کاربر می‌خواد یک آموزش رو پیدا کنه، جزئیاتش رو بخونه و در نهایت ثبت‌نام کنه. این مثال کمک می‌کنه به‌جای حفظ‌کردن تعریف‌ها، کاربرد واقعی‌شون رو بفهمی.

۱. یکی روی رابط تمرکز می‌کنه، اون یکی روی رسیدن به نتیجه

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

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

۲. یکی از جزئیات تعامل می‌پرسه، اون یکی از کل مسیر

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

حواست باشه این حرف به معنی «UI فقط یک صفحه‌ست و UX همه دنیا» نیست. رابط کاربری می‌تونه در چند دستگاه و حتی در تعامل صوتی هم وجود داشته باشه. بحث سر زاویه دید و دامنه مسئله‌ست. وقتی درباره تفاوت رابط کاربری و تجربه کاربری حرف می‌زنیم، داریم دو جور نگاه به یک محصول رو مقایسه می‌کنیم، نه دو تا اتاق قفل‌شده که کسی اجازه ورود به کار اون یکی رو نداره.

۳. یکی ظاهر تعامل رو می‌سازه، اون یکی مسیر رو آزمایش می‌کنه

سومین تفاوت UI و UX رو توی فرایند کار می‌بینی. طراح UX ممکنه اول با کاربران حرف بزنه، مشکل‌های پرتکرار رو پیدا کنه، جریان کاربر یا User Flow بکشه و یک وایرفریم اولیه بسازه. طراح UI می‌تونه در همون فرایند، روی چیدمان، تایپوگرافی، الگوهای دکمه و سیستم کامپوننت‌ها کار کنه. بعد هر دو کنار هم طرح رو تست و اصلاح می‌کنن.

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

۴. ابزارهاشون همپوشانی دارن، ولی سؤال‌هاشون یکی نیست

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

برای طراحی UI و UX و همکاری تیمی از فیگما، FigJam، Miro و Sketch استفاده می‌شه؛ برای تحقیق و تست هم بسته به پروژه می‌تونیم سراغ مصاحبه، مشاهده رفتار کاربر، ابزارهای تست و گزارش‌های آماری بریم. یه نکته به‌روز: Adobe XD طبق اعلام خود ادوبی در حالت Maintenance Mode قرار داره و توسعه قابلیت‌های جدیدش متوقف شده؛ برای کسی که تازه می‌خواد یاد بگیره، منطقی نیست بدون توضیح کنار ابزارهای فعال روز معرفی‌ش کنیم.

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

۵. یکی با جزئیات دیداری قضاوت می‌شه، اون یکی با رفتار واقعی کاربر

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

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

۶. خروجی‌هاشون فرق می‌کنه، اما آخرش باید به هم بخورن

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

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

یه جدول جمع‌وجور که فرق UI و UX یادت بمونه

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

بیا یه صفحه خرید رو با هم کالبدشکافی کنیم

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

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

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

طراح UI/UX باید کدنویسی بلد باشه یا نه؟

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

مثلاً طراح UI اگه بدونه طراحی واکنش‌گرا (Responsive) چطور کار می‌کنه، وقتی صفحه موبایل طراحی می‌کنه فضا و اندازه‌ها رو منطقی‌تر در نظر می‌گیره. طراح UX هم اگر محدودیت‌های فنی احراز هویت، پرداخت یا بارگذاری داده رو بشناسه، پیشنهادهایی می‌ده که قابل اجرا باشن. پس تفاوت UI و UX توی نیازهای روزانه‌شون وجود داره، ولی هیچ قانون مطلقی نداریم که «طراح UX حق نداره به کد نزدیک بشه».

یه نقش دیگه هم هست به اسم UX Engineer که معمولاً بین طراحی و پیاده‌سازی رابط پل می‌زنه؛ ممکنه نمونه‌های تعاملی رو با کد بسازه، رفتار کامپوننت‌ها رو بررسی کنه و با طراح‌ها و فرانت‌اند کار کنه. اما قرار نیست هرکسی UI و UX بلد بود خودبه‌خود UX Engineer بشه. برای این نقش، مهارت مهندسی نرم‌افزار هم مهمه.

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

اگه بخوای وارد بازار کار بشی، از کجا شروع کنی؟

اول از همه یکی دو تا پروژه کوچک انتخاب کن. مثلاً جریان ثبت‌نام یک اپلیکیشن آموزشی یا صفحه خرید یک فروشگاه. به‌جای اینکه فقط ده مدل دکمه قشنگ بسازی، یک مشکل واقعی انتخاب کن: «چرا کاربر وسط ثبت‌نام منصرف می‌شه؟» بعد روی کاغذ مسیرش رو بکش، یک نمونه اولیه بساز و به یکی دو نفر بده باهاش کار کنن. این کار هم طراحی رابط کاربری رو یاد می‌ده، هم طرز فکر تجربه کاربری رو.

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

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

این IA و IxD و CX دیگه چی‌ان؟

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

معماری اطلاعات یعنی کاربر هر چیزی رو راحت پیدا کنه

معماری اطلاعات یا IA یعنی محتوای محصول رو چطور دسته‌بندی و نام‌گذاری کنیم که آدم‌ها گیج نشن. توی فروشگاه، آیا «لوازم جانبی موبایل» باید زیر دسته «موبایل» باشه یا بخش جدا داشته باشه؟ آیا کاربر می‌تونه آموزش‌هایی که خریده رو به‌راحتی پیدا کنه؟ این مسئله به UX مربوطه و روی ظاهر منوهای UI هم اثر می‌ذاره. یکی از جاهایی که تفاوت UI و UX محو می‌شه، دقیقاً همین مرز بین ساختار اطلاعات و نمایش اونه.

طراحی تعامل یعنی بعد از کلیک چه اتفاقی بیفته

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

تجربه مشتری یعنی رابطه با برند فقط به اپ ختم نمی‌شه

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

هوش مصنوعی داره کار UI و UX رو عوض می‌کنه؛ اما چطوری؟

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

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

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

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

حالا خودت این ۵ تا سؤال رو از سایتت بپرس

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

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

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

حرف آخر؛ UI و UX قرار نیست با هم مسابقه بدن

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

به نظرم بهترین طراحی، اونیه که کاربر مجبور نباشه مدام فکر کنه «حالا باید کجا کلیک کنم؟». حالا این نتیجه با تغییر رنگ یه دکمه به دست میاد یا با حذف یک مرحله اضافی، فرقی نداره؛ مهم اینه مسئله واقعی حل شده باشه. وقتی UI و UX رو اینجوری نگاه کنی، به جای جنگ بین ظاهر و تجربه، دنبال محصولی می‌ری که هم واضح باشه، هم کاربر رو به نتیجه برسونه.

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

سؤال‌هایی که معمولاً درباره UI و UX پیش میاد