UI و UX چیست؟ تفاوتی که قبل از شروع طراحی باید بدانیم.
یک بار در جلسهای همه از نسخهٔ جدید یک اپلیکیشن راضی بودند. رنگها تازهتر شده بود، آیکنها هماهنگ بودند و صفحهٔ اصلی واقعاً حرفهای به نظر میرسید. چند دقیقه بعد یکی از همکارها خواست یک کار ساده را انجام دهد: سفارشش را لغو کند. سه صفحه رفت جلو، برگشت، دوباره منو را باز کرد و در آخر پرسید: «اصلاً از کجا باید لغوش کنم؟»
همانجا تفاوت UI و UX خودش را نشان داد. ظاهر محصول خوب بود، اما تجربهٔ انجام کار خوب نبود.
اگر بخواهم خیلی کوتاه بگویم، UI یا رابط کاربری چیزی است که کاربر میبیند و با آن تعامل میکند؛ UX یا تجربه کاربری کیفیت کل مسیری است که کاربر برای رسیدن به هدفش طی میکند. این دو از هم جدا نیستند، اما یکی هم نیستند. رابط خوب میتواند تجربه را تقویت کند، ولی ظاهر زیبا بهتنهایی تجربهٔ خوب نمیسازد.
UI یا رابط کاربری دقیقاً چیست؟
UI مخفف User Interface است. دکمهها، رنگها، تایپوگرافی، آیکنها، فرمها، کارتها، فاصلهها و وضعیتهای تعاملی بخشی از رابط کاربریاند. وقتی روی یک دکمه میروید و رنگش تغییر میکند، وقتی یک فیلد خطا را واضح نشان میدهد یا وقتی ساختار بصری صفحه کمک میکند مهمترین اطلاعات را زودتر ببینید، با UI طرف هستید.
اما طراحی رابط کاربری صرفاً انتخاب رنگ قشنگ نیست. طراح باید سلسلهمراتب اطلاعات، خوانایی، کنتراست، سازگاری اجزا، وضعیتهای مختلف و رفتار صفحه در موبایل را ببیند. یک دکمه فقط یک مستطیل رنگی نیست؛ باید معلوم باشد قابل کلیک است، در حالت غیرفعال چه شکلی دارد، هنگام بارگذاری چه اتفاقی میافتد و اگر متنش طولانی شد چطور رفتار میکند.
من UI را لایهای میبینم که تصمیمهای محصول را برای کاربر قابل دیدن و قابل استفاده میکند. اگر تصمیم پشت صفحه اشتباه باشد، طراحی بصری فقط میتواند آن اشتباه را مرتبتر نمایش دهد.
UX یا تجربه کاربری چیست؟
UX مخفف User Experience است و دامنهٔ بزرگتری دارد. تجربهٔ کاربر از قبل از ورود به محصول شروع میشود و حتی بعد از خروج ادامه دارد. آیا کاربر میفهمد این سرویس برای اوست؟ ثبتنام چقدر سخت است؟ اطلاعاتی که خواسته میشود منطقی است؟ خطاها قابل فهماند؟ کاربر بعد از انجام کار مطمئن است که نتیجه ثبت شده؟ اگر مشکلی پیش آمد، راه برگشت یا دریافت کمک دارد؟
طراحی تجربه کاربری یعنی فهمیدن نیاز، زمینه و محدودیت کاربر و ساختن مسیری که او بتواند با کمترین ابهام به هدف واقعیاش برسد. این کار میتواند شامل تحقیق کاربر، تعریف مسئله، معماری اطلاعات، طراحی جریان، وایرفریم، نمونهسازی، تست کاربردپذیری و تحلیل رفتار باشد.
UX همیشه به معنی کوتاهتر کردن مسیر نیست. گاهی یک مرحلهٔ تأیید اضافه در پرداخت یا حذف اطلاعات، تجربه را امنتر میکند. معیار درست، کمترین کلیک نیست؛ میزان مناسبی از وضوح، کنترل و اطمینان برای همان موقعیت است.
تفاوت UI و UX با یک مثال ساده
فرض کنید میخواهید با یک اپلیکیشن بلیت قطار بخرید.
بخشهای UI شامل شکل تقویم، رنگ دکمهٔ جستوجو، اندازهٔ قیمتها، آیکن انتخاب صندلی و فاصلهٔ میان کارتهاست. بخشهای UX شامل این است که آیا انتخاب مبدأ و مقصد واضح است، تاریخ رفت و برگشت اشتباه نمیشود، قیمت نهایی قبل از پرداخت معلوم است، صندلی قابل مقایسه است و بعد از خرید میدانید بلیت کجا ذخیره شده.
حالا ممکن است اپلیکیشن بسیار زیبا باشد ولی هزینهٔ نهایی را در آخرین مرحله نشان دهد. UI میتواند چشمنواز باشد، اما UX به اعتماد کاربر آسیب زده است. برعکس، ممکن است مسیر خرید منطقی باشد ولی متنها ریز، کنتراست ضعیف و دکمهها نامشخص باشند. در این حالت ساختار تجربه درستتر است، اما رابط اجازه نمیدهد کاربر آن را راحت طی کند.
بهترین نتیجه زمانی ساخته میشود که UI و UX روی یک مسئلهٔ مشترک کار کنند.
آیا UI مهمتر است یا UX؟
این سؤال شبیه این است که بپرسیم نقشهٔ یک ساختمان مهمتر است یا درها و راهروهای قابل استفادهٔ آن. اگر ساختار کلی بد باشد، ظاهر زیبا نجاتش نمیدهد. اگر جزئیات اجرا بد باشند، ساختار خوب هم برای آدمها قابل استفاده نیست.
در پروژهٔ واقعی ترتیب کار مهم است. بهتر است قبل از پرداختن به جزئیات بصری، مسئله، کاربر، محتوا و جریان اصلی روشن شوند. بعد رابط کاربری به آن ساختار شکل میدهد. این ترتیب به معنای بیاهمیت بودن زیبایی نیست؛ زیبایی بخشی از فهم، اعتماد و هویت محصول است. فقط باید در خدمت تجربه باشد.
من معمولاً قبل از طراحی صفحه این سؤالها را میپرسم:
- کاربر چرا وارد این صفحه شده است؟
- مهمترین تصمیم یا اقدام او چیست؟
- چه اطلاعاتی برای تصمیمش لازم است؟
- کجا ممکن است مردد یا متوقف شود؟
- رابط چطور میتواند این مسیر را واضحتر کند؟
وقتی پاسخها روشن باشند، انتخابهای بصری هم کمتر سلیقهای میشوند.
طراح UI و طراح UX چه تفاوتی دارند؟
در بعضی شرکتها نقشها جدا هستند. طراح UX بیشتر روی تحقیق، جریانها، ساختار، تست و مسئله کار میکند و طراح UI روی زبان بصری، اجزا، جزئیات و کیفیت رابط تمرکز دارد. در تیمهای کوچکتر ممکن است یک نفر هر دو مسئولیت را انجام دهد. عنوان «طراح UI/UX» در بازار کار ایران هم زیاد دیده میشود، هرچند در عمل دامنهٔ این نقش از یک شرکت تا شرکت دیگر فرق دارد.
عنوان بهتنهایی کافی نیست. مهم است بدانیم از آن نقش چه خروجیای انتظار میرود. آیا قرار است فقط صفحه تحویل دهد یا در تعریف مسئله هم حضور داشته باشد؟ آیا با کاربر گفتوگو میکند؟ آیا نتیجهٔ طراحی بعد از انتشار اندازهگیری میشود؟ آیا مسئول سیستم طراحی هم هست؟
طراح محصول معمولاً دامنهٔ گستردهتری دارد و علاوه بر UI و UX، به هدف کسبوکار، محدودیت فنی، اولویتها و نتیجهٔ محصول هم نزدیک است. در مقالهٔ «طراح محصول کیست» این نقش را جداگانه باز میکنم.
برای شروع، اول UI یاد بگیریم یا UX؟
بهنظر من لازم نیست یکی را تمام کنید و بعد سراغ دیگری بروید. از یک مسئلهٔ کوچک شروع کنید و هر دو را کنار هم تمرین کنید. مثلاً جریان رزرو وقت یک کلینیک را انتخاب کنید:
- ابتدا بفهمید کاربر چه اطلاعاتی لازم دارد و کجا ممکن است اشتباه کند.
- جریان را با کاغذ یا وایرفریم ساده بسازید.
- متن دکمهها و پیام خطا را مشخص کنید.
- بعد روی تایپوگرافی، رنگ، فاصله و اجزای بصری کار کنید.
- نمونه را به یک نفر بدهید و فقط مشاهده کنید چطور از آن استفاده میکند.
این تمرین خیلی بیشتر از کپی کردن یک صفحهٔ زیبا به شما یاد میدهد، چون رابطهٔ میان تصمیم تجربه و اجرای رابط را میبینید. برای مسیر کاملتر میتوانید مقالهٔ «مسیر یادگیری UI UX از صفر» را بخوانید.
چند سوءتفاهم رایج دربارهٔ UI و UX
اولین سوءتفاهم این است که UX یعنی وایرفریم و UI یعنی رنگآمیزی همان وایرفریم. وایرفریم فقط یکی از ابزارهای فکر کردن است و طراحی رابط هم فقط تزئین نیست.
دوم اینکه تجربه کاربری را با «نظر شخصی کاربر» یکی بدانیم. تحقیق UX جمع کردن جملههای پراکنده نیست؛ باید رفتار، زمینه و الگوها را تحلیل کنیم و بین خواستهٔ گفتهشده و نیاز واقعی فرق بگذاریم.
سوم اینکه هرچه رابط مینیمالتر باشد، تجربه بهتر است. حذف کردن زمانی خوب است که ابهام را کم کند. اگر اطلاعات ضروری یا کنترل کاربر حذف شود، مینیمالیسم به سردرگمی تبدیل میشود.
و آخر اینکه یک بار طراحی میکنیم و تمام میشود. تجربه بعد از انتشار تازه قابل مشاهده است. داده، بازخورد و تغییر رفتار کاربران نشان میدهد کدام فرض درست بوده و کجا باید اصلاح کنیم.
پرسشهای متداول
آیا UI بدون UX وجود دارد؟
بله، میتوان رابطی زیبا ساخت که مسئلهٔ کاربر را درست حل نکند. اما چنین رابطی محصول موفقی نمیسازد. UI باکیفیت زمانی ارزش کاملش را نشان میدهد که روی یک تجربهٔ سنجیده سوار باشد.
آیا برای ورود به UI/UX باید برنامهنویسی بلد باشیم؟
برای شروع ضروری نیست، اما فهم محدودیتهای وب و اپلیکیشن همکاری با توسعهدهنده را بهتر میکند. مهمتر از کدنویسی در شروع، درک مسئله، اصول تعامل، تایپوگرافی، ساختار و توانایی آزمودن طرح است.
ابزار اصلی طراحی UI/UX چیست؟
فیگما امروز یکی از ابزارهای اصلی طراحی رابط، نمونهسازی و همکاری تیمی است. با این حال ابزار جای تفکر طراحی را نمیگیرد. مقالهٔ «فیگما چیست» را برای شناخت کاربردهای واقعی آن آماده کردهام.
جمعبندی من
من، محمد عبدی، وقتی دربارهٔ طراحی یک محصول حرف میزنم UI و UX را دو بخش یک تجربه میبینم. UI کمک میکند محصول قابل دیدن، قابل فهم و قابل تعامل باشد. UX مطمئن میشود کل مسیر با نیاز و هدف کاربر هماهنگ است.
اگر تازه وارد این حوزه شدهاید، خودتان را درگیر مرزبندیهای خشک نکنید. مسئلهای واقعی انتخاب کنید، مسیر را بفهمید، رابط را بسازید و نتیجه را با آدمها امتحان کنید. تفاوت UI و UX دقیقاً وسط همین تجربه برایتان روشن میشود، نه با حفظ کردن دو تعریف.
نوشتهٔ محمد عبدی، طراح محصول و تجربهٔ کاربری.