تجربه کاربری مسیر تمام شدن کار را مشخص میکند و رابط کاربری همان مسیر را روی صفحه روشن میکند. این مقاله فرق این دو و مسیر شروع طراحی رابط را توضیح میدهد. در آگهی‌های استخدام، «طراح UI/UX» را همیشه یک‌جا می‌بینی و طبیعی است که فکر کنی هر دو یک چیزند. این‌طور نیست. فرقشان را وقتی می‌فهمی که یک محصول واقعی را بشکافی: یکی تعیین میکند کاربر چه مسیری را طی کند، دیگری تعیین میکند آن مسیر روی صفحه چه شکلی باشد. در این مقاله فرق UX و UI را با یک مثال مشخص می‌کنیم و بعد قدم‌به‌قدم می‌گوییم کسی که می‌خواهد طراح رابط کاربری شود، از کجا شروع کند. جواب کوتاه: تجربه کاربری (UX) ترتیب کار، تصمیمها و راه بازگشت را مشخص میکند. رابط کاربری (UI) همان ترتیب را با نوشته، فاصله، رنگ، جزء و حالت روی صفحه نشان میدهد. طراح رابط از یک کار واقعی شروع میکند و خروجی‌اش صفحه و جزء است، نه گزارش تحقیق. تجربه کاربری (UX) چیست؟ تجربه کاربری به این سؤال جواب میدهد: کاربر آمده چه کاری را تمام کند، قدمها به چه ترتیبی پیش می‌روند، کجا باید تصمیم بگیرد و اگر چیزی غلط شد از کجا برگردد. یک فروشگاه آنلاین را در نظر بگیر. کار کاربر «رسیدن کالای درست به آدرس درست» است. تجربه خوب یعنی کالا راحت پیدا شود، زمان و هزینه ارسال پیش از پرداخت معلوم باشد، آدرس ناقص با پرداخت ناموفق قاطی نشود و وقتی موجودی تمام شد، کاربر راهی برای ادامه داشته باشد. این تصمیمها قبل از انتخاب رنگ دکمه گرفته می‌شوند. اگر ترتیب کار غلط باشد، قشنگ کردن ظاهرش کاربر را به مقصد نمی‌رساند. تجربه به قاب صفحه هم محدود نیست. متن پیامک، وضعیت نامعلوم سفارش و تماسی که کاربر بعد از یک خطا می‌گیرد، همه بخشی از همان تجربه‌اند. طراح رابط صاحب همه این نقطه‌ها نیست، ولی اگر آن‌ها را نبیند، صفحه‌ای می‌کشد که در محصول واقعی جایی ندارد. رابط کاربری (UI) چیست؟ رابط کاربری به این سؤال جواب میدهد: در این لحظه اقدام اصلی کدام است، چه چیزی قابل کلیک است، خطا کجا نوشته میشود و حالت خالی یا انتظار چه شکلی دارد. در همان فروشگاه، رابط یعنی این جزئیات: دکمه «افزودن به سبد» از قیمت جدا دیده شود. تمام شدن موجودی روی همان کالا نوشته شود، نه در یک نوار کلی بالای صفحه. خطای کد پستی کنار همان فیلد بیاید. و در لحظه پرداخت، صفحه روشن کند که کاربر باید صبر کند یا می‌تواند دوباره دکمه را بزند. بدنه کار رابط، جزءهای تکرارشونده‌اند: دکمه، فیلد، کارت کالا، پیام خطا. هر جزء هم بیش از یک حالت دارد: پیش‌فرض، غیرفعال، خطا و در حال انجام. مجموعهای که فقط خرید موفق را نشان بدهد رابط آن فروشگاه نیست، یک تصویر از بهترین حالت ممکن است. فرق UI و UX در یک نگاه سؤال اصلی تجربه کاربری: کار به پایان می‌رسد؟ رابط کاربری: این قدم روی صفحه پیدا میشود؟ خروجی تجربه کاربری: ترتیب، تصمیم، مسیر شکست رابط کاربری: صفحه، جزء، حالت بصری نشانه ضعف تجربه کاربری: کاربر قدم را عوضی برمی‌دارد رابط کاربری: کاربر قدم را فهمیده، ولی اقدام یا متن را پیدا نمی‌کند ابزار رایج تجربه کاربری: نقشه جریان و آزمون مسیر رابط کاربری: فیگما و جزءهای تکرارشونده موضوع تجربه کاربری (UX) رابط کاربری (UI) سؤال کار به پایان می‌رسد؟ این قدم روی صفحه پیدا میشود؟ خروجی ترتیب، تصمیم، مسیر شکست صفحه، جزء، حالت بصری نشانه ضعف کاربر قدم را عوضی برمی‌دارد کاربر قدم را فهمیده، ولی اقدام یا متن را پیدا نمی‌کند ابزار رایج نقشه جریان و آزمون مسیر فیگما و جزءهای تکرارشونده در یک محصول واقعی کدام اول میآید؟ در تیم‌های کوچک معمولاً یک نفر هر دو کار را انجام میدهد. ترتیب ولی همیشه یکی است: اول کار و مسیر، بعد صفحه. اگر مسیر را کس دیگری به طراح رابط تحویل داده و او در آن بن‌بست می‌بیند، برگرداندن مسیر هم بخشی از کار اوست. کشیدن صفحه‌ای که بن‌بستش از قبل معلوم است، فقط ظاهرسازی است. پژوهش هم جای صفحه را نمیگیرد. اینکه بدانی کاربر چه مشکلی دارد، سلسلهمراتب و حالت خطا را خودبه‌خود نمی‌سازد. آن بخش، خود طراحی رابط است. چه چیزی از طراحی گرافیک به کار رابط میآید؟ سلسلهمراتب بصری میآید: چشم اول به چه چیزی بیفتد، با چه اندازه و چه فاصله‌ای. اما عادت کار روی یک فریم در رابط جواب نمیدهد. پوستر یک پیام است در یک اندازه. رابط چند صفحه است که باید با عوض شدن جمله، عدد و حالت، نظم خودش را حفظ کند. به همین دلیل نمونه کار شبکه اجتماعی برای این عنوان کافی نیست. آن نمونه فقط نشان میدهد که می‌توانی فریم تبلیغاتی بسازی. برای طراح رابط، نمونه کار باید یک کار چندمرحله‌ای باشد. مسیر شروع طراحی رابط کاربری این ترتیب یک پیشنهاد تمرینی است و تضمین استخدام نیست. یک کار را روی کاغذ بنویس. محصولی را انتخاب کن که خودت واقعاً استفاده کرده‌ای و فقط یک کار از آن را بردار، نه کل محصول. مثلاً عوض کردن آدرس پیش از پرداخت. قدمها را به ترتیب بنویس و جایی را که خودت مردد می‌شوی علامت بزن. سقف این تمرین اول پنج صفحه است. این برگه حداقل تجربه کاربری لازم برای شروع رابط است. بدون آن، صفحه اول را می‌سازی و برای صفحه دوم دلیلی نداری. سواد بصری را روی همان صفحهها تمرین کن. مقیاس نوشته را از عنوان تا توضیح فرعی مشخص کن. فاصله‌ها را از یک پایه بساز؛ مضرب ۴ انتخاب رایجی است. یک رنگ برای اقدام اصلی، یک رنگ برای خطا و خاکستری برای حالت غیرفعال کافی است و رنگ اضافه فقط سلسلهمراتب را شلوغ میکند. متن را هم از همین تمرین فارسی بنویس. برچسب فارسی از کلمه انگلیسی بلندتر است و دکمه باید با جمله واقعی تنظیم شود. جای عدد قیمت و جهت دکمه بازگشت در چیدمان راستبهچپ هم همین‌جا معلوم میشود. اگر طرح را با متن لاتین ببندی، این مشکل‌ها تا آخر پنهان می‌مانند. یک ابزار را تا حد یک جریان قابل طی کردن یاد بگیر. ابزار رایج ساخت صفحه و پروتوتایپ فیگما است. در این مرحله باید صفحه، چیدمان خودکار (Auto Layout)، سبک نوشته، جزء و گونه (Variant) برای حالت پیش‌فرض، غیرفعال و خطا بسازی. بعد پنج صفحه را به هم وصل کن تا کسی بتواند مسیر را بدون توضیح تو طی کند. فایل کار طراح رابط، فایل صفحهها و جزءهاست و در فیگما ساخته میشود. فتوشاپ برای آماده کردن عکس و باز کردن کیت لایهباز به کار میآید و بعضی فایل‌های آماده هم XD هستند که دیدنشان مفید است. ولی جریان تمرین را در فیگما بساز. اول بازسازی کن، بعد طرح تازه بزن. یک صفحه از محصولی شناخته‌شده را بازسازی کن تا فاصله و اندازه‌ها از حدس بیرون بیایند. این بازسازی برای نمونه کار عمومی نیست و فقط برای دیدن نظم فاصله‌هاست. بعد جریان همان کاری را که روی کاغذ نوشته بودی در پنج تا هشت صفحه طراحی کن. حالت خالی، خطا و انتظار هم باید در مجموعه باشند. فقط صفحه موفق، تحویل این مرحله حساب نمیشود. نمونه کار را به شکل یک تصمیم بچین. برای هر جریان چهار مورد بنویس: کار کاربر، محدودیت، صفحهها و دلیل یک تصمیم. سه جریان کامل از بیست صفحه نامربوط قویتر است. دست‌کم یکی از جریان‌ها را فارسی و راستبهچپ بساز. از کیت آماده برای خواندن ساختار استفاده کن. کیت UI لایهباز نام گروه‌ها، حالت‌های دکمه و فاصله‌های آماده را نشان میدهد و دیدن یک فایل منظم خودش بخشی از یادگیری است. اما عوض کردن رنگ یک کیت و گذاشتنش در نمونه کار، هیچ تصمیمی درباره کار کاربر را نشان نمیدهد. کدنویسی کجای مسیر قرار دارد؟ پیادهسازی محصول خروجی طراح رابط نیست. خروجی او فایلی است که صفحهها و حالتها در آن تعریف شده باشند، طوری که برنامه‌نویس برای ساختنش به توضیح شفاهی احتیاج نداشته باشد. آشنایی با HTML و CSS کمک میکند عرض، شکستن متن و ترتیب واقعی صفحه را بهتر ببینی، ولی شرط شروع نیست. شرط شروع همان جریان پنج‌صفحه‌ای است. اشتباه‌های رایج یکی گرفتن UI و UX، یا فکر کردن به اینکه هر کدام اسم یک نرم‌افزار است شروع از پالت رنگ و لوگو، پیش از نوشتن کار کاربر تحویل فقط حالت موفق گذاشتن طرح شبکه اجتماعی به‌جای جریان محصول چیدمان انگلیسی که جمله فارسی در دکمه‌اش جا نمیشود ماندن در منوهای فیگما بدون ساختن پروتوتایپی که بشود طی‌اش کرد زدن عنوان UI/UX روی نمونه‌ای که نه مسیر دارد و نه جزء تکرارشونده جمع‌بندی UX می‌پرسد کار کاربر تمام میشود یا نه، UI می‌پرسد هر قدم روی صفحه پیدا میشود یا نه. برای شروع طراحی رابط لازم نیست همه‌چیز را بلد باشی: یک کار واقعی را روی کاغذ بنویس، پنج صفحه‌اش را در فیگما بساز و حالت خطا و خالی را هم فراموش نکن. همین یک تمرین از ده‌ها صفحه بی‌ربط ارزشمندتر است.