vibe-coding-college-specs/chapters/05-design-and-ux/01-lesson-ux-basics-and-user-flow/spec.md

مشخصات درس‌نامه: مبانی تجربه کاربری و جریان کاربر (UX Basics & User Flows)

• شناسه در سیلابس: L5.2
• فصل: فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
• نوع محتوا: 📘 درس‌نامه متنی
• زمان تقریبی مطالعه: ۱۲ دقیقه
• پیش‌نیازهای مستقیم: L5.1 (اهداف فصل پنجم)

---

۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)

دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:

• درک کند (Understand): تفاوت ماهوی تجربه کاربری (UX - حس و کارکرد منطقی) با رابط کاربری (UI - ظاهر و جلوه‌های بصری) چیست.
• تحلیل/ارزیابی کند (Evaluate): قوانین طلایی تجربه کاربری (به ویژه قانون یاکوب و قانون هیک) را درک کرده و بداند چرا تبعیت از الگوهای رایج وب، اصطکاک ذهن کاربر را از بین می‌برد.
• به‌کار ببندد (Apply): مسیر گام‌به‌گام کاربر (User Flow) را برای دو سناریوی اصلی پروژه محوری (جریان بازدیدکننده از هدر تا ارتباط، و جریان ادمین از لاگین تا مدیریت سئو) ترسیم کند.
• به‌کار ببندد (Apply): از پایگاه داده و مرجع جهانی Mobbin (https://mobbin.com/) برای تحلیل و استخراج الگوهای واقعی طراحی جریان کاربری (داشبوردها، فرم‌های ورود و صفحات تنظیمات) استفاده کند.

---

۲. محدوده و مرزهای محتوا (Scope & Boundaries)

آنچه باید پوشش داده شود (In-Scope):

1. کالبدشکافی کوه یخ تجربه کاربری (The UX Iceberg):
   • رابط کاربری (UI) تنها بخش بیرونی و پیدای کوه یخ است؛ در حالی که تجربه کاربری (UX) بخش عظیم زیر آب است که تعیین می‌کند آیا محصول کارآمد، ساده و لذت‌بخش است یا خیر.
2. قوانین بنیادین UX برای هدایت هوش مصنوعی:
   • قانون یاکوب (Jakob's Law): کاربران بیشتر زمان خود را در سایر وب‌سایت‌ها می‌گذرانند؛ بنابراین انتظار دارند سایت شما هم از الگوهای شناخته‌شده پیروی کند (منو بالا یا گوشه، دکمه‌های واضح، اسکرول عمودی روان).
   • قانون هیک (Hick's Law): زمان تصمیم‌گیری کاربر با افزایش تعداد انتخاب‌ها به صورت لگاریتمی بالا می‌رود؛ هرچه گزینه‌ها متمرکزتر باشند، اقدام سریع‌تر رخ می‌دهد.
   • قانون فیتس (Fitts's Law): دکمه‌های اصلی و اقدامات کلیدی (CTA) باید اندازه مناسب داشته و در دسترس‌ترین نقطه صفحه باشند.
3. طراحی جریان کاربر (User Flow) در پروژه محوری (پورتفولیوی پویا):
   • جریان ۱: سفر بازدیدکننده و کارفرما (Visitor Journey):
     • ورود به صفحه اصلی \rightarrow نگاه سریع به بیو و موقعیت شغلی در هدر \rightarrow فیلتر پروژه‌ها با کلیک روی تگ مهارت \rightarrow باز کردن مودال جزئیات پروژه و مشاهده تصاویر \rightarrow کلیک روی دکمه تماس / لینکدین.
   • جریان ۲: سفر صاحب پورتفولیو در پنل مدیریت (Admin Journey):
     • رفتن به آدرس /admin \rightarrow صفحه ورود مینیمال با پسورد \rightarrow مشاهده لیست پروژه‌ها در داشبورد \rightarrow کلیک دکمه «پروژه جدید» \rightarrow پر کردن فرم و ذخیره \rightarrow سوییچ به تب «تنظیمات سئو» \rightarrow ویرایش متاتگ‌ها و خروج ایمن.
4. استفاده از مرجع طلایی Mobbin (https://mobbin.com/):
   • معرفی Mobbin به عنوان بزرگ‌ترین کتابخانه و اسکرین‌شات از جریان‌های کاربری واقعی موفق‌ترین نرم‌افزارهای دنیا.
   • شیوه جستجوی فلوهای آماده: جستجوی دسته‌بندی‌های Dashboard، Settings، و Authentication در Mobbin برای الهام گرفتن الگوهای استاندارد و ارائه آن به ایجنت هوش مصنوعی.
5. کال‌اوت‌های Quera:
   • <details class="violet">: قانون یاکوب در وایب کدینگ؛ چرا خلاقیت‌های نامتعارف و عجیب در چیدمان ناوبری کاربر را فراری می‌دهد؟
   • <details class="red">: تله اصطکاک بیهوده (Friction Trap)؛ هرگز کاربر را مجبور به پیمودن بیش از ۳ مرحله برای دیدن نمونه‌کارها یا ارتباط با خود نکنید.

آنچه نباید وارد آن شویم (Out-of-Scope):

• طراحی وایرفریم‌های بصری پیکسلی یا چیدمان رنگی (درس ۵.۳ و ۵.۴).
• کدنویسی کامپوننت‌های روتینگ در Next.js (فصل ۶).

---

۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

اصطلاح انگلیسی	معادل فارسی مصوب	توضیح یک‌خطی ساده
User Experience (UX)	تجربه کاربری	میزان سادگی، حس روانی و رضایت کاربر در حین تعامل با یک نرم‌افزار
User Flow	جریان / مسیر کاربر	نمودار متوالی مراحل و صفحاتی که کاربر برای رسیدن به یک هدف مشخص طی می‌کند
Jakob's Law	قانون یاکوب	اصل روان‌شناسی که می‌گوید کاربران رفتارهای نرم‌افزار شما را مشابه سایت‌های مشهور دیگر انتظار دارند
Hick's Law	قانون هیک	قاعده‌ای که بیان می‌کند هرچه تعداد گزینه‌های منو و تصمیم‌ها بیشتر شود، کاربر گیج‌تر و کُندتر می‌شود
Call to Action (CTA)	دعوت به اقدام	دکمه یا المان برجسته‌ای که کاربر را به انجام عمل اصلی مورد نظر هدایت می‌کند

---

۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)

راهنمای ایجنت نویسنده: تمام تصاویر باید در پوشهٔ images/ قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. تصویر کاور درس: images/cover.png
   • موضوع: کاور مدرن با تم تیره که نقشه جریان کاربر را با فلش‌های نئونی متصل به صفحات مختلف پورتفولیو به صورت سه‌بعدی نمایش می‌دهد.
2. کوه یخ تجربه کاربری (UX در برابر UI): images/ux-vs-ui-iceberg.png
   • موضوع: اینفوگرافیک کوه یخ: قله کوچک بیرون از آب (رنگ و دکمه‌های UI) در برابر پایه‌های عمیق زیر آب (معماری، جریان کاربر، دسترسی‌پذیری و حس راحتی).
3. نمودار جریان کاربر بازدیدکننده پورتفولیو: images/visitor-user-flowchart.png
   • موضوع: فلوچارت گام‌به‌گام: ورود \rightarrow بررسی هدر \rightarrow فیلتر دسته‌بندی \rightarrow مودال جزئیات \rightarrow کلیک دکمه CTA تماس.
4. نمودار جریان ادمین و تنظیمات سئو: images/admin-user-flowchart.png
   • موضوع: فلوچارت گام‌به‌گام: روت /admin \rightarrow صفحه لاگین \rightarrow پیشخوان مدیریت \rightarrow تب تنظیمات سئو \rightarrow تایید نهایی.
5. مرجع Mobbin و تحلیل جریان‌های استاندارد: images/mobbin-pattern-reference.png
   • موضوع: نمایی از جستجوی جریان‌های واقعی در پلتفرم Mobbin و تطبیق آن با ساختار پورتفولیوی شخصی.

---

۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (README.md)

1. تیتر اصلی: # مبانی تجربه کاربری و User Flow: طراحی مسیر بدون دست‌انداز
2. مقدمه: چرا یک ظاهر زیبا بدون مسیر کاربری درست، شبیه خودرویی لوکس بدون فرمان است؟
3. جدول کاور درس
4. تفاوت بنیادین UX با UI (کالبدشکافی کوه یخ): حس کارکرد در برابر جلوه بصری.
5. سه قانون طلایی تجربه کاربری که ایجنت‌ها باید بدانند:
   • قانون یاکوب (استانداردهای آشنا).
   • قانون هیک (کاهش گزینه‌ها).
   • قانون فیتس (اندازه و دسترسی دکمه‌ها).
6. باکس نکته Quera (<details class="violet">): چرایی اهمیت قانون یاکوب در طراحی بدون اصطکاک.
7. طراحی جریان‌های کاربر پروژه پورتفولیوی پویا:
   • مسیر روان بازدیدکننده و کارفرما.
   • مسیر امن و کاربردی صاحب پورتفولیو در پنل ادمین و سئو.
8. جعبه‌ابزار حرفه‌ای‌ها: بررسی الگوهای زنده در Mobbin (mobbin.com):
   • نحوه ایده گرفتن از جریان‌های اپ‌های مطرح جهان.
9. باکس هشدار Quera (<details class="red">): پرهیز از ایجاد اصطکاک و کلیک‌های غیرضروری در مسیر کاربر.
10. جمع‌بندی درس‌نامه: تثبیت جریان‌های شفاف پروژه و آماده‌سازی برای وایرفریمینگ و سلسله‌مراتب بصری.

---

۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)

• تمایز میان UX و UI به شکل کاربردی و قابل فهم تشریح شده باشد.
• قوانین تجربه کاربری (به ویژه یاکوب و هیک) در زمینه نرم‌افزار واقعی تحلیل گردند.
• جریان‌های کاربر برای هر دو بخش بازدیدکننده و ادمین پورتفولیو به طور کامل ترسیم شوند.
• پلتفرم معتبر Mobbin و نحوه بهره‌برداری از الگوهای آن معرفی شده باشد.