مسیر یادگیری UI UX از صفر؛ نقشهٔ راهی که واقعاً میشود اجرا کرد.
وقتی کسی از من میپرسد «UI UX را از کجا شروع کنم؟» معمولاً قبلش فهرستی از دورهها، ویدیوها و ابزارها باز کرده است. مشکل کمبود منبع نیست؛ زیادی مسیرهای ممکن است. یک نفر میگوید اول فیگما، یکی میگوید روانشناسی، دیگری پیشنهاد میکند صد صفحه را کپی کنید. نتیجه این میشود که چند ماه میگذرد و هنوز پروژهای که بتوان دربارهاش حرف زد شکل نگرفته است.
اگر بخواهم پاسخ کوتاه بدهم، آموزش UI UX از صفر باید با یک چرخهٔ ساده جلو برود: اصول را یاد بگیرید، یک مسئلهٔ کوچک را طراحی کنید، آن را با آدمها بسنجید، بازخورد بگیرید و پروژه را مستند کنید. ابزار لازم است، اما نقشهٔ راه نباید به آموزش دکمههای فیگما تبدیل شود.
قبل از شروع، بدانیم وارد چه کاری میشویم
UI لایهٔ دیداری و تعاملی محصول است؛ UX کل مسیر و کیفیت تجربهٔ کاربر. در بازار کار این دو گاهی در یک نقش جمع میشوند، اما مهارتهایشان دقیقاً یکی نیست. لازم است هم منطق جریان و رفتار کاربر را بفهمید و هم بتوانید آن را به رابطی خوانا و منسجم تبدیل کنید.
برای شروع لازم نیست انتخاب کنید تا ابد UI Designer یا UX Researcher میمانید. چند پروژهٔ کوچک انجام دهید تا بفهمید به کدام بخش علاقه و توان بیشتری دارید. شناخت گرایش باید نتیجهٔ تجربه باشد، نه اضطراب انتخاب عنوان.
مرحلهٔ اول: پایههای بصری را جدی بگیریم
قبل از ساخت صفحههای پیچیده، تایپوگرافی، رنگ، کنتراست، فاصله، شبکه، تراز و سلسلهمراتب را تمرین کنید. اینها قوانین تزئینی نیستند؛ کمک میکنند کاربر اطلاعات را بفهمد.
یک تمرین خوب این است که یک صفحهٔ واقعی را انتخاب کنید و فقط ساختار آن را تحلیل کنید: چشم اول کجا میرود؟ چرا این عنوان مهمتر دیده میشود؟ فاصلهها چه گروههایی ساختهاند؟ رنگ تأکیدی کجا استفاده شده؟ سپس همان ساختار را با محتوای دیگری بازسازی کنید.
کپی برای یادگیری مشکلی ندارد، اگر تحلیل کنید و آن را بهعنوان نمونهکار شخصی جا نزنید. هدف این تمرین تقویت چشم و فهم تصمیمهای بصری است.
مرحلهٔ دوم: فیگما را به اندازهٔ نیاز یاد بگیریم
در شروع لازم نیست تمام قابلیتهای فیگما و دهها پلاگین را بلد باشید. فریم، Auto Layout، Component، Variant، Style، Grid و Prototype برای ساخت پروژههای اولیه کافیاند. هر قابلیت را داخل یک مسئلهٔ واقعی یاد بگیرید.
مثلاً به جای دیدن پنج ساعت آموزش Auto Layout، یک کارت محصول بسازید که با متن کوتاه و بلند، تصویر و حالت تخفیف درست کار کند. وقتی به مشکل میخورید، آموزش دقیق همان بخش را پیدا کنید. یادگیری مسئلهمحور ماندگارتر از تماشای پشتسرهم ویدیو است.
فیگما ابزار فکر و همکاری است، نه مدرک طراح بودن. مقالهٔ «فیگما چیست» کاربردها و محدودیتهایش را جداگانه توضیح میدهد.
مرحلهٔ سوم: اصول تجربه کاربری را وارد تمرین کنیم
از یک جریان کوچک مثل رزرو وقت، بازیابی رمز، افزودن آدرس یا ثبت هزینه شروع کنید. کاربر چه هدفی دارد؟ چه اطلاعاتی لازم است؟ کجا ممکن است اشتباه کند؟ بعد مسیر را روی کاغذ رسم کنید.
مفاهیمی مثل affordance، feedback، consistency، mental model، error prevention و cognitive load را در همان جریان پیدا کنید. اگر فقط تعریفها را حفظ کنید، در پروژه بهسختی به تصمیم تبدیل میشوند.
برای هر طرح توضیح کوتاهی بنویسید: چرا این اطلاعات اینجاست؟ چرا این مرحله جدا شده؟ اگر کاربر دادهٔ ناقص وارد کند چه میبیند؟ همین توضیحها قدرت استدلال شما را میسازند.
مرحلهٔ چهارم: با کاربر واقعی حرف بزنیم
برای تمرین لازم نیست بودجهٔ پژوهش بزرگ داشته باشید. پنج نفر مناسب میتوانند دربارهٔ مشکلات واضح یک جریان اطلاعات زیادی بدهند. مهم است آدمهایی را انتخاب کنید که به مخاطب مسئله نزدیکاند، نه فقط دوستان طراح شما.
در مصاحبه دنبال تأیید ایده نباشید. دربارهٔ تجربهٔ واقعی گذشته بپرسید. در تست هم طرح را توضیح ندهید؛ هدفی بدهید و مشاهده کنید. جایی که کاربر مکث میکند یا برداشت متفاوتی دارد، دادهٔ یادگیری است نه شکست شخصی.
بعد یافتهها را اولویتبندی کنید و طرح را تغییر دهید. نسخهٔ قبل و بعد و دلیل تغییر، مادهٔ ارزشمند کیساستادی شماست.
مرحلهٔ پنجم: یک پروژهٔ کامل اما کوچک بسازیم
پروژهٔ خوب لازم نیست اپلیکیشنی با چهل صفحه باشد. یک مسئلهٔ محدود را از ابتدا تا نتیجه طی کنید:
- زمینه و کاربر را تعریف کنید.
- چند مصاحبه یا مشاهده انجام دهید.
- مسئله و معیار موفقیت را بنویسید.
- چند جریان و وایرفریم بسازید.
- یک مسیر را به رابط باکیفیت تبدیل کنید.
- نمونه را تست و اصلاح کنید.
- محدودیتها و آموختهها را مستند کنید.
یک جریان هشتصفحهای که پشت هر تصمیمش فکر وجود دارد، از پروژهٔ بزرگ و بیزمینه قانعکنندهتر است.
مرحلهٔ ششم: بازخورد حرفهای بگیریم
بازخورد «قشنگه» کمک زیادی نمیکند. سؤال مشخص بپرسید: سلسلهمراتب صفحه روشن است؟ متن دکمه نتیجه را میگوید؟ کدام تصمیم بدون شواهد مانده؟ کیساستادی در کجا گیجکننده است؟
همهٔ نظرها را اجرا نکنید. بازخورد را بفهمید، الگوها را ببینید و با هدف پروژه بسنجید. توان دفاع از تصمیم به معنی مقاومت در برابر تغییر نیست؛ یعنی بتوانید بگویید چرا انتخابی را نگه داشته یا عوض کردهاید.
همچنین از افراد خارج از طراحی بازخورد بگیرید. محصول برای طراحان ساخته نمیشود و زبان تخصصی میتواند ضعف وضوح را پنهان کند.
مرحلهٔ هفتم: پورتفولیو را همزمان بسازیم
جمع کردن مستندات را به پایان پروژه موکول نکنید. سؤالها، نسخههای ردشده، یادداشت تست و تصمیمهای مهم را در طول کار نگه دارید. پورتفولیو قرار نیست خاطره را بازسازی کند؛ باید رد فکر کردن شما را نشان دهد.
در کیساستادی نقش خودتان را دقیق بنویسید. اگر پروژه تمرینی است صادقانه بگویید. نتیجه را اغراق نکنید. اگر دادهٔ کسبوکاری ندارید، از نتیجهٔ تست، کاهش خطا یا آموختهٔ مشخص حرف بزنید.
مقالهٔ «ساخت پورتفولیو UI UX» ساختار کامل یک کیساستادی خواندنی را ارائه میکند.
برنامهٔ پیشنهادی دوازدههفتهای
هفتهٔ ۱ تا ۳
اصول بصری و فیگمای پایه را با بازسازی تحلیلی چند کامپوننت و صفحه تمرین کنید. هر روز خروجی کوچک بسازید، نه فقط ویدیو ببینید.
هفتهٔ ۴ تا ۶
یک جریان موجود را نقد کنید، مسئلهها را بنویسید و نسخهٔ سادهٔ بهبود را بسازید. حالتهای خالی، خطا و موبایل را فراموش نکنید.
هفتهٔ ۷ تا ۱۰
یک پروژهٔ مستقل کوچک را با تحقیق، جریان، رابط و تست انجام دهید. فرایند را از روز اول مستند کنید.
هفتهٔ ۱۱ و ۱۲
کیساستادی را بنویسید، از چند نفر بازخورد بگیرید، اصلاح کنید و یک ارائهٔ کوتاه تمرین کنید. هدف دوازده هفته متخصص شدن نیست؛ ساختن چرخهٔ یادگیری و اولین شواهد توانایی است.
اشتباههایی که مسیر را کند میکنند
پریدن بین منابع، منتظر ماندن برای کامل شدن دانش، ساختن فقط صفحههای ترندی، استفاده از متنهای غیرواقعی و نپذیرفتن بازخورد از خطاهای رایجاند. مقایسهٔ دائمی خود با خروجی طراح باتجربه هم انرژی تمرین را میگیرد.
یک اشتباه دیگر خرید دورههای متعدد بدون تمام کردن پروژه است. منبع خوب مهم است، اما رشد در فاصلهٔ میان دیدن آموزش و تلاش برای اجرا اتفاق میافتد.
پرسشهای متداول
یادگیری UI UX چقدر زمان میبرد؟
برای ساختن پایه و چند پروژهٔ قابل ارائه معمولاً چند ماه تمرین منظم لازم است، اما زمان دقیق به پیشزمینه، کیفیت تمرین و بازخورد بستگی دارد. این حوزه نقطهٔ پایان ندارد و یادگیری با کار ادامه پیدا میکند.
آیا مدرک دانشگاهی لازم است؟
نه. مدرک مرتبط میتواند کمک کند، اما پورتفولیو، فرایند فکر کردن، مهارت و همکاری در استخدام نقش پررنگتری دارند.
از UI شروع کنیم یا UX؟
پایههای هر دو را کنار هم یاد بگیرید و با پروژه بفهمید کدام گرایش برایتان مناسبتر است. جداسازی کامل در شروع معمولاً مصنوعی است.
جمعبندی من
من محمد عبدی هستم و اگر بخواهم این نقشهٔ راه را در یک جمله خلاصه کنم: کمتر منبع جمع کنید و بیشتر چرخهٔ کامل طراحی را تجربه کنید. چیزی یاد بگیرید، بسازید، به کاربر بدهید، اشتباه را ببینید و دوباره بسازید.
هدف ماههای اول پیدا کردن سبک شخصی یا ساختن محصول عظیم نیست. هدف این است که بتوانید یک مسئلهٔ کوچک را با دلیل و شواهد حل کنید و داستان تصمیمهایتان را واضح تعریف کنید. از همین نقطه مسیر حرفهای واقعی شروع میشود.
نوشتهٔ محمد عبدی، طراح محصول و تجربهٔ کاربری.