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