UI در برابر UX: تفاوت واقعی (و چرا اکثر توضیحات اشتباهاند)
UI کاغذ کادو نیست. UX هدیه نیست. تفاوت واقعی میان UI و UX، اینکه هر نقش واقعاً چه کاری انجام میدهد، و برای چه کاری چه کسی را استخدام کنید.
UI کاغذ کادو نیست. UX هدیه نیست. همچنین UI بطری کچاپ نیست، و UX هم ریختن کچاپ نیست.
هر توضیح «UI در برابر UX» که در اینترنت پیدا میکنید پشت یک تمثیل پنهان میشود، چون نویسنده هرگز واقعاً هیچکدام از این کارها را نکرده. تمثیل بطری کچاپ به نسلی از طراحان هیچ نیاموخت. یک بطری کچاپ سلسلهمراتب وظایف ندارد، تحقیق کاربری ندارد، حالتهای شکست ندارد، معیارهای موفقیت ندارد، edge case در ۳۹۰ پیکسل ندارد. شما یک چاشنی ارسال نمیکنید. شما نرمافزار ارسال میکنید.
این مقاله تمثیلها را کنار میگذارد، هر حوزه را در یک جمله تعریف میکند، نقشهای از آنچه هر نقش در روز کاری واقعی تحویل میدهد ترسیم میکند، و یک چارچوب استخدام ارائه میدهد که فردا میتوانید از آن استفاده کنید.
تمثیلها خودشان مشکل هستند
توضیحات رایج UI و UX را با استعارههای فیزیکی تعریف میکنند، چون استعارهها راحتتر از تعریف واقعی نوشته میشوند. هزینهاش این است که هر طراح تازهکار با این باور وارد اولین شغلش میشود که UI «رنگها و فونتهاست» و UX «حس کلی». هر دو اشتباهاند.
«UI ماشین است، UX رانندگی» چیزی درباره معماری اطلاعات به شما نمیگوید. «UI خانه است، UX زندگی در آن» چیزی درباره journey mapping نمیگوید. «UI بصری است، UX تعاملی» رایجترین نسخه است و در عین حال اشتباهترین. طراحان UI بخش بزرگی از هفتهشان را روی حالتهای تعامل میگذرانند. طراحان UX بخش بزرگی از هفتهشان را روی تصمیمات بصری مثل تراکم اطلاعات و سلسلهمراتب چیدمان میگذرانند. خط مرزی آنجایی که تمثیلها میگویند رسم نشده.
همه را دور بیندازید. از آنچه هر حوزه واقعاً تصمیم میگیرد شروع کنید.
تعریف واقعی، یک جمله برای هر کدام
UX معماری تصمیم است. UI بیان آن تصمیمات روی صفحه. همین.
UX میپرسد چه چیزی باید وجود داشته باشد و چه زمانی. این محصول به چه صفحاتی نیاز دارد. کاربر به چه ترتیبی از آنها عبور میکند. در هر مرحله چه اطلاعاتی نمایش داده میشود. وقتی کاربر گیج، اشتباه، یا عجله دارد چه اتفاقی میافتد. موفقیت چه شکلی است، و چطور میفهمیم.
UI میپرسد آن تصمیمات وقتی روی صفحه میآیند چه شکلی دارند، چه حسی میدهند، و چطور حرکت میکنند. سلسلهمراتب چیست، تایپوگرافی چه میگوید، یک دکمه وقتی فشار داده میشود چطور رفتار میکند، یک modal چطور ظاهر میشود، یک حالت غیرفعال چه چیزی منتقل میکند، و کل سیستم چطور در پنجاه صفحه و سه دستگاه یکپارچه میماند.
یک محصول. دو لایه تصمیم متفاوت. یکی بدون دیگری ارسال نمیشود.
یک طراح UX واقعاً چه کاری انجام میدهد
هفته یک طراح UX بیشتر صرف تحقیق و ساختار میشود، نه صفحات.
مصاحبههای کاربری برگزار میکنند، ضبطهای session را بررسی میکنند، و journey map میسازند. معماری اطلاعات طراحی میکنند، taxonomy تعیین میکنند، و با product manager ها بر سر اینکه یک feature اصلاً چیست بحث میکنند. flow ها را طراحی میکنند. wireframeهایی میسازند که کسی نمیخواهد نگاهشان کند، چون عمداً زشت هستند. فرضیات را با آزمایش prototype ها روی کاربران واقعی تأیید میکنند، و feature هایی که در آزمایش ضعیف بودند را حذف میکنند.
نتایج معمول UX:
- سنتز تحقیق کاربری و persona ها
- Journey map و نمودارهای flow
- معماری اطلاعات و مدلهای محتوا
- Wireframe های low-fidelity
- برنامهها و گزارشهای usability testing
- معیارهای موفقیت و مشخصات instrumentation
طراح UX کسی است که میپرسد «آیا این صفحه اصلاً باید وجود داشته باشد» قبل از اینکه کسی بپرسد «رنگ دکمه چیست».
یک طراح UI واقعاً چه کاری انجام میدهد
هفته یک طراح UI برعکس است. آنها تصمیم میگیرند چیزی که UX مشخص کرده چه هست، وقتی روی صفحه میآید چه شکلی داشته باشد و چطور رفتار کند.
سیستمهای بصری میسازند. مقیاس type، color token ها، ریتم فاصلهگذاری، و مشخصات component را تعیین میکنند. هر حالت تعامل را طراحی میکنند (پیشفرض، hover، active، focus، غیرفعال، loading، خالی، خطا). قوانین motion تعریف میکنند. با دقت روی سلسلهمراتب pixel در breakpoint ها کار میکنند و مطمئن میشوند محصول در هر صفحه مثل یک محصول واحد احساس میشود. کتابخانه component و design token هایی که مهندسان واقعاً مصرف میکنند را ارسال میکنند.
نتایج معمول UI:
- سیستم طراحی بصری (type، color، spacing، grid)
- کتابخانه component با تمام حالتهای تعامل
- Design token های exported به کد
- مشخصات motion و transition
- صفحات high-fidelity و mockup های با رزولوشن بالا
- مستندات تحویل برای مهندسی
طراح UI کسی است که مسئول است محصول یکپارچه و زنده احساس شود، نه فقط کارکردی.
محل تداخل
وسط جایی است که محصولات خوب ساخته میشوند.
Prototyping مشترک است. هر دو نقش prototype میسازند، UX برای تأیید flow ها، UI برای تأیید motion و polish. User testing مشترک است. UX آزمایش را طراحی میکند، UI تماشا میکند ببیند انتخابهای بصریاش به درک کمک میکند یا آسیب میرساند. Design review ها طبیعتاً مشترک هستند و فقط وقتی کار میکنند که هر دو دیدگاه در اتاق حضور داشته باشند.
اینجا حقیقت ناراحتکننده است: طراح UI که UX را نمیفهمد، بنبستهای زیبا ارسال میکند. طراح UX که نمیتواند بصری اجرا کند، سندهای استراتژی که کسی پیادهسازی نمیکند ارسال میکند. آنهایی که خوب هستند در طرف مقابل هم به اندازه کافی مهارت کسب میکنند تا کاری ارسال کنند که از اولین برخورد با کاربران جان سالم به در ببرد. بهترینها product designer میشوند، که بعداً به آن میرسیم.
سوال product designer
«Product designer» عنوانی است که وسط ماجرا را بلعیده، و در سال ۲۰۲۶ یعنی یک نفر که هم UI و هم UX را به سطحی قابل قبول انجام میدهد.
در یک startup، یک product designer اغلب تنها طراح شرکت است. تحقیق، flow ها، wireframe ها، سیستم بصری، component ها، و motion را مالک است. یک تیم طراحی تکنفره هستند، و موثر عمل میکنند چون یک startup فقط میتواند یک نفر بپردازد و به هر دو نیمه حوزه نیاز دارد.
در یک شرکت بزرگتر، یک product designer معمولاً یک حوزه محصول را سر تا ته مالک است و با محققان UX متخصص، تیمهای design system، و گاهی یک motion designer همکاری میکند. اپراتور generalist هستند، نه یک ترکیب junior.
اشتباهی که اکثر بنیانگذاران مرتکب میشوند استخدام «product designer» است در حالی که واقعاً به یک UX researcher ارشد نیاز دارند، یا «طراح UI» در حالی که واقعاً به یک product designer نیاز دارند. تورم عنوان سوال واقعی را پنهان میکند: مشکل واقعی چیست، و چه ترکیب مهارتی آن را حل میکند.
ابزارها، فرآیندها، نتایج
یک مقایسه سریع. این نسخه فشرده است، نه یک مشخصات کامل.
| بعد | طراح UX | طراح UI | Product Designer |
|---|---|---|---|
| سوال اصلی | چه چیزی باید وجود داشته باشد، و چه زمانی | چطور باید به نظر برسد، حس دهد، حرکت کند | هر دو، سر تا ته |
| ابزارهای اصلی | Figma، Miro، Dovetail، Maze | Figma، Framer، Principle | Figma، Framer، کد سبک |
| نتایج کلیدی | تحقیق، flow ها، IA، wireframe ها | سیستم بصری، component ها، states | همه موارد بالا، برای یک حوزه محصول |
| ارسال میکند | برنامههای تأیید شده | صفحات pixel-perfect + component ها | Feature های تأیید و ارسال شده |
| معیار موفقیت | نرخ موفقیت وظیفه، زمان در وظیفه | انسجام بصری، امتیازات usability | معیارهای محصول (فعالسازی، retention) |
| نزدیکترین همکاری با | PM ها، محققان، آنالیستها | Brand، design systems، frontend | PM ها، مهندسان، همه |
طراحان UI روی سلسلهمراتب بصری، سیستمهای token، و الگوهای چیدمان مثل bento grid تمرکز میکنند تا صفحات در یک نگاه خوانا باشند. طراحان UX روی حلقههای تحقیق، آزمایش flow، و ممیزیهای دسترسپذیری تمرکز میکنند تا مطمئن شوند محصول برای همه کسانی که باید کار کند کار میکند. Product designer ها در هر دو اتاق زندگی میکنند و معمولاً ساختار landing page را هم مالک میشوند، چون کار conversion به تمیزی داخل هیچکدام از نقشهای متخصص قرار نمیگیرد.
از نظر ابزار، همه از Figma استفاده میکنند. بحث درباره ابزارها روشی است که طراحان بحث درباره کار واقعی را اجتناب میکنند. اگر میخواهید لیست کوتاهی از آنچه ارزش نصب دارد، مقاله Figma plugin های ارزش نصب آن را دارد.
چه زمانی UI، UX، هر دو، یا product designer استخدام کنید
این بخشی است که باید bookmark کنید.
از جدول استفاده کنید. وضعیت خود را به یک ردیف نگاشت کنید، نقش ستون آخر را استخدام کنید.
| مرحله | مشکل اصلی | تیم فعلی | استخدام کنید |
|---|---|---|---|
| قبل از راهاندازی، بدون طراح | همه چیز باید تصمیمگیری و ساخته شود | فقط یک بنیانگذار و مهندسان | Product designer |
| قبل از راهاندازی، یک پیمانکار UI دارد | محصول خوب به نظر میرسد اما کاربران گم میشوند | پیمانکار UI، بدون UX | طراح UX (تماموقت یا freelance ارشد) |
| درآمد اولیه، در حال رشد | Flow ها کار میکنند اما محصول قدیمی و ناهماهنگ به نظر میرسد | ۱ طراح UX / product designer | طراح UI یا design systems lead |
| در حال رشد، حجم کاربر بالا | ریزش در flow های خاص، دلیل نامشخص | ۱ product designer، زیر فشار | UX researcher (متخصص)، نه یک generalist دیگر |
| بالغ، چند محصول | مشکلات انسجام در محصولات مختلف | چند product designer | تیم design systems + UX ارشد |
| آژانس، کار مشتری | نیاز به ارسال پروژههای کامل سر تا ته | تیم کوچک | Product designer ها + یک UX researcher مشترک |
سه میانبر که اکثر بنیانگذاران را از اشتباهات استخدام نجات میدهد:
- اگر محصول شما مشکل UX دارد که لباس مشکل UI پوشیده، استخدام طراح UI آن را بدتر میکند. نسخه زیبایی از یک محصول گیجکننده به شما میدهند. رفع سردرگمی گرانتر خواهد بود چون حالا عمدی به نظر میرسد.
- اگر یک جایگاه طراحی دارید، product designer استخدام کنید. متخصصان فقط وقتی منطقی هستند که حجمی داشته باشید که آنها را کاملاً پر نگه دارد.
- اگر بین «به طراح UX نیاز داریم یا طراح UI» بحث میکنید، احتمالاً به یک product designer و یک brief محصول واضحتر نیاز دارید.
سوالات متداول
UI مهمتر است یا UX؟
هیچکدام. محصولی با UX عالی و UI بد در کیفیت ادراکی به رقیبش میبازد. محصولی با UI عالی و UX بد در استفاده واقعی میبازد. آنها دو نیمه یک کار هستند، و ارسال فقط یکی یعنی ارسال نیمه یک محصول.
آیا یک نفر میتواند هم UI و هم UX را انجام دهد؟
بله، و این نفر معمولاً product designer نامیده میشود. اکثر startup های مرحله اولیه از یک generalist قوی بهتر سود میبرند تا یک تقسیم junior در UI/UX. تخصصگرایی فقط وقتی ارزش دارد که تیم از یک طراح فراتر برود.
آیا طراحان UX باید کد بنویسند؟
نه، اما فهمیدن چگونگی ساخته شدن چیزها آنها را بهتر میکند. یک طراح UX که میداند در کد چه چیزی ارزان، گران، یا غیرممکن است، flow هایی ارسال میکند که مهندسی واقعاً میتواند پیادهسازی کند. این یک کار کدنویسی نیست. یک کار سواد سیستمی است.
تفاوت حقوق طراحان UI و UX چقدر است؟
در اکثر بازارها دو عنوان در همان سطح ارشدیت به طور مشابه پرداخت میکنند. عنوان product designer معمولاً بیشتر از هر دو عنوان متخصص در همان سطح میپردازد چون نقش هر دو مجموعه مهارت را میطلبد. محرک بزرگتر حقوق، مرحله شرکت و صنعت است، نه UI در برابر UX.
نقشی استخدام کنید که با مشکل مطابقت دارد
دیگر نپرسید تفاوت UI و UX چیست. شروع کنید بپرسید کدام مشکل خاص را میخواهید حل کنید و کدام نتایج شما را به آنجا میرسانند.
UX برنامههایی ارسال میکند که از برخورد با کاربران واقعی جان سالم به در بردند. UI صفحاتی ارسال میکند که در پنجاه سطح مثل یک محصول واحد احساس میشوند. Product designer ها هر دو را، سر تا ته، برای یک حوزه محصول ارسال میکنند. نقشی را انتخاب کنید که با مشکلی که واقعاً دارید مطابقت دارد، نه عنوانی که در یک نمودار سازمانی گرانترین به نظر میرسد.
هر توضیح متوسطی در اینترنت به بازیافت بطری کچاپ ادامه خواهد داد. شما مجبور نیستید. یک محصول برای ارسال و یک تیم برای ساختن دارید.
Need to figure out whether your product needs a UI designer, a UX designer, or both? Brainy builds the team for the problem, then ships the work.
Get Started
