مفاهیم کلیدی UI / UX و طراحی محصول (به زبان ساده)

اگه تازه وارد دنیای طراحی محصول شدی یا حس می‌کنی مسیر یادگیریت یه‌کم مبهمه، شناخت این مفاهیم پایه می‌تونه حسابی کمکت کنه.

بیاین دونه‌دونه مرورشون کنیم 👇

1️⃣ رابط کاربری UI (User Interface)

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

2️⃣ تجربه کاربری UX (User Experience)

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

3️⃣ تحقیق و بررسی کاربر User Research

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

4️⃣ وایر فریم Wireframe

یه طرح خیلی ساده از صفحه، بدون رنگ و جزئیات. فقط برای اینکه بدونیم هر چیز کجا قرار می‌گیره.

5️⃣ طرح تعاملی Prototype

خیلی ساده اش رو بخوام بگم یه نسخه قابل کلیک از طرح. کمک می‌کنه قبل از کدنویسی بفهمیم ایده جواب می‌ده یا نه. ( به مشتری هم خیلی کمک می کنه بتونه قبل از اینکه واسه کد هزینه کنه طرح رو حس کنه و با صفحات ور بره و کار کنه )

6️⃣ دیزاین سیستم (سیستم طراحی) Design System

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

7️⃣ تست کاربردپذیری Usability Testing

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

8️⃣ دسترس پذیری Accessibility

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

9️⃣ معماری اطلاعات Information Architecture

مرتب‌کردن محتوا و بخش‌ها به شکل منطقی. جوری که کاربر راحت چیزی که می‌خواد رو پیدا کنه. هر چی که دیتاها زیاد و گیج کننده باشه کاربر زودتر خسته میشه. ( کاربر الان تربیت شده سوشال مدیاهایی مثل اینستاگرام و ایکس هستش و حال و حوصله کاربرای قدیم دهه 60 رو نداره :)) )

🔟طراحی تعاملی Interaction Design

رفتار دکمه‌ها و عناصر: کلیک، هاور، انیمیشن و بازخوردها.
اینا به محصول جون می‌دن. و البته بخوام خودمونی و ساده اش بگم ادم قراره به سیستم ( کامیپوتر و کلا هر محصولی ) ارتباط برقرار کنه. این ارتباط از طریق 5 حسی که داریم اتفاق میوفته و در دنیای مجازی فقط دو حس بینایی و شنوایی کاربرد داره که این باعث میشه تعامل خیلی سخت تر بشه.

1️⃣1️⃣ طراحی واکنش گرا Responsive Design

محصول روی موبایل، تبلت و دسکتاپ درست و حسابی دیده بشه. نه فقط کوچیک بشه، بلکه هوشمندانه تطبیق پیدا کنه. ( امروزه اکثر کاربران شاید 80 درصد به بالا از موبایل و تبلت استفاده می کنند و خیلی از طراحان رابط کاربری ابتدا موبایل رو طراحی می کنند و بعد سراغ نسخه دسکتاپ میرن )

1️⃣2️⃣ ارزیابی و اکتشاف Heuristic Evaluation

بررسی UX با یه سری چک‌لیست معروف. یه راه سریع برای پیدا کردن مشکل‌ها. یعنی بررسی می کنیم مشکل رو پیدا می کنیم و برای مشکل راه حل می سازیم ( همین نقاط درد و راه حلش باعث رشد یا شکست یک محصول میشه )

1️⃣3️⃣ پرسونا ( کاربر خیالی )Persona

یه کاربر فرضی که نماینده یه گروه واقعیه. کمک می‌کنه بدونیم دقیقاً برای کی طراحی می‌کنیم. ( یک نظم کلی هم به پروژه میده که هر جاش یه اسم استفاده نکنیم و به عنوان مثال اگه در یک پروژه به 5 تا کاربر نیاز داریم از همونا در همه جای پروژه استفاده کنیم )

1️⃣4️⃣ جریان یا مسیر کاربر User Flow

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

1️⃣5️⃣ طراحی اتمی Atomic Design

ساخت رابط از تیکه‌های خیلی کوچیک تا کل صفحه ( طراحی از جزء به کل )یه روش مرتب برای ساخت UI حرفه‌ای. ( اینطوری همه چیز در نظر گرفته میشه و یک بار کل سیستم طراحی میشه و بعد برای صفحات مختلف اجزاء کنار هم قرار میگرند البته این نباید باعث میشه که خلاقیت زیر سوال بره و همیشه خلاقیت برای ادم خلاق راه ها و ایده های جدید داره :) )

اگه واقعا می خوای تو این مسیر رشد کنی، فقط خوندن و آموزش نگاه کردن کافی نیست. برای هر کدوم از این موارد تمرین کن، مثال ببین و سعی کن تو پروژه های کوچیک استفاده شون کنی.

یادگیری واقعی از عمل کردن و تمرین کردن و استمرار داشتن میاد ...🚀

خوشحال میشم نظرت رو بگی و همچنین اگه دوست داشتی یه سر به کانال تلگرام من بزنی

کانال تلگرام من