# مشخصات درس‌نامه: مبانی تجربه کاربری و جریان کاربر (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 و نحوه بهره‌برداری از الگوهای آن معرفی شده باشد.