Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
‫آموزش‬ ‫کارگاه‬‫پیشرفته‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫اول‬ ‫جلسه‬/۹‫اردیبهشت‬۹۸/‫پناه‬‫محمدی‬...
‫پناه‬‫محمدی‬ ‫اسماعیل‬
‫کاربری‬ ‫تجربه‬ ‫طراح‬/‫کاربری‬ ‫واسط‬ ‫طراح‬/‫خدمات‬ ‫طراح‬
esmailmp@gmail.com
‫دهیم‬‫می‬ ‫انجام‬ ‫دوره‬ ‫این‬ ‫در‬ ‫چه‬‫آن‬
‫جلسه‬‫سوم‬
‫تعاریف‬ ‫با‬ ‫آشنایی‬
‫عملی‬ ‫پروژه‬ ‫ارائه‬
‫جلسه‬‫دوم‬
‫تعاری...
‫کاربری‬ ‫تجربه‬
User Experience
“A person’s perceptions and responses that result from the use
and / or anticipated use of a product, system or service.”
۶‫تجربه‬ ‫ایجاد‬ ‫برای‬ ‫گام‬
۱.‫بشناسید‬ ‫را‬ ‫کاربرتان‬
‫ها‬‫محدودیت‬ ،‫ها‬‫توانایی‬ ،‫عالئق‬ ،‫نیازها‬
۲.‫تان‬‫محصول‬‫ج...
۶‫تجربه‬ ‫ایجاد‬ ‫برای‬ ‫گام‬
۴.‫پویا‬ ‫و‬ ‫ارزشمند‬ ٔ‫تجربه‬ ‫یک‬ ‫خلق‬
‫ارزیابی‬‫که‬ ‫افکار‬ ‫و‬ ‫احساسات‬ ،‫عملکرد‬ ‫از...
‫تماس‬ ‫نقاط‬
Touch Points
‫تماس‬ ‫نقاط‬
‫است‬ ‫سازمان‬ ‫یا‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫با‬ ‫کاربر‬ ‫بین‬ ‫تماس‬ ‫نقاط‬ ‫از‬ ‫ای‬‫مجموعه‬ ‫کاربر‬ ‫مسیر‬.
‫طراحی‬ ‫تفکر‬
Design Thinking
‫طراحی‬ ‫تفکر‬
‫کاربر‬ ‫نیازهای‬ ‫اساس‬ ‫بر‬ ‫ها‬‫حل‬‫راه‬ ‫طراحی‬ ‫برای‬ ‫چارچوبی‬
‫به‬ ‫جدید‬ ‫مدیران‬ ‫اما‬ ‫بود‬ ‫کمرن...
•‫نورمن‬ ‫دونالد‬(Donald Arthur Norman):
‫شک‬ ‫یعنی‬ ،‫دهند‬‫می‬ ‫انجام‬ ‫خالق‬ ‫افراد‬ ‫آنچه‬ ‫شرح‬ ‫برای‬ ‫است‬ ‫ای‬‫واژ...
‫طراحی‬ ‫تفکر‬ ‫معروف‬ ‫های‬‫چارچوب‬
•‫دست‬ ‫و‬ ‫سر‬ ،‫قلب‬
Heart, Head and Hand
‫برای‬ ‫نیازها‬ ‫و‬ ‫احساسات‬ ،‫اندازه‬‫چ...
‫های‬‫چارچوب‬‫تفکر‬ ‫معروف‬‫طراحی‬
•‫دی‬ ‫چهار‬
Design Council of the UK: 4 D’s
‫کشف‬/‫تعریف‬/‫توسعه‬/‫ارائه‬
•‫پرسش‬ ‫چها...
‫پردازی‬‫ایده‬ ‫های‬‫روش‬
Ideation methods
‫پردازی‬‫ایده‬ ‫های‬‫روش‬
•‫طوفان‬ ‫یا‬ ‫مغزی‬ ‫بارش‬‫فکری‬
Brainstorming
•‫زمانی‬ ‫محدوده‬ ‫تعیین‬/‫موضوع‬ ‫یک‬ ‫تنها‬ ‫ط...
‫پردازی‬‫ایده‬ ‫های‬‫روش‬
•‫بردن‬ ‫سوال‬ ‫زیر‬‫ها‬‫فرض‬‫پیش‬
•‫شدن‬ ‫خالص‬‫از‬‫ش‬ ‫پذیرفته‬ ‫فرضیات‬ ‫و‬ ‫تفکرات‬‫ده‬
‫خلق...
‫افوردنس‬
Affordance
‫افوردنس‬
‫بیان‬ ‫محصول‬ ‫آن‬ ‫خود‬ ‫توسط‬ ‫که‬ ‫محصول‬ ‫یک‬ ‫از‬ ‫استفاده‬ ‫برای‬ ‫هایی‬‫سرنخ‬‫شود‬‫می‬.
‫دهد‬‫می‬ ‫نشان‬...
‫افوردنس‬‫محصوالت‬ ‫در‬ ‫پتانسیلی‬‫است‬‫ک‬ ‫توسط‬ ‫عمل‬ ‫یک‬ ‫گیری‬‫شکل‬ ‫به‬ ‫که‬‫اربر‬
‫منتهی‬‫و‬ ‫شود‬‫می‬«‫موفق‬ ‫طراح...
‫گشتالت‬
Gestalt
‫گشتالت‬
‫است‬ ‫اجزا‬ ‫مجموع‬ ‫از‬ ‫فراتر‬ ‫چیزی‬ ،‫کل‬.
•‫گرایی‬‫طرح‬ ‫قانون‬
•‫قانون‬‫تک‬ ‫یا‬ ‫بستن‬‫میل‬
•‫قانون‬‫شباه...
‫تحلیل‬ ‫و‬ ‫نقد‬ ‫تمرین‬
۱.‫منف‬ ‫و‬ ‫مثبت‬ ‫نکات‬ ‫بررسی‬ ‫و‬ ‫وبسایت‬ ‫تحلیل‬ ‫و‬ ‫نقد‬‫ی‬
۲.‫منفی‬ ‫نقاط‬ ‫نمودن‬ ‫برط...
‫اول‬ ‫جلسه‬ ‫پایان‬
‫آموزش‬ ‫کارگاه‬‫پیشرفته‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫دوم‬ ‫جلسه‬/۱۰‫اردیبهشت‬۹۸/‫پناه‬‫محمدی...
‫چابک‬
Agile
‫چابک‬
‫محصول‬ ‫بهتر‬ ‫و‬ ‫تر‬‫سریع‬ ‫خلق‬ ‫و‬ ‫توسعه‬ ‫برای‬ ‫ها‬‫متودولوژی‬ ‫از‬ ‫ای‬‫مجموعه‬
‫طری‬ ‫از‬ ‫راهکارها‬ ‫و‬ ...
‫چابک‬ ‫روش‬ ‫مزایای‬
•‫کاربر‬:‫او‬ ‫نیازهای‬ ‫به‬ ‫بیشتر‬ ‫توجه‬
•‫کننده‬ ‫عرضه‬:‫بازار‬ ‫به‬ ‫رسیدن‬ ‫زمان‬ ‫کاهش‬
•‫توس...
‫اسکرام‬
Scrum
A Better Way Of Building Products
‫های‬‫ویژگی‬‫اسکرام‬:
• Framework
• Complex
• Adaptive
• Light weight
• S...
‫بینی‬‫پیش‬ ‫نه‬ ،‫است‬ ‫گرایی‬‫تجربه‬ ‫اسکرام‬ ‫پایه‬
‫اسکرام‬ ‫ارکان‬:Transparency/Inspection/Adaptation
Starting up the...
‫استوری‬ ‫یوزر‬
User Story
‫باشد‬ ‫داشته‬ ‫را‬ ‫ها‬‫شرط‬ ‫این‬ ‫باید‬ ‫استوری‬ ‫یوزر‬ ‫هر‬:
• Non-technical
• Independent
...
‫برای‬ ‫الزم‬ ‫های‬‫مهارت‬ ‫تمام‬‫انجام‬‫یک‬ ‫شدن‬‫یوزراستوری‬‫باش‬ ‫تیم‬ ‫در‬ ‫باید‬‫د‬.
Cross functional team
Daily scru...
‫چابک‬ ‫کاربری‬ ‫تجربه‬
Lean UX
Lean UX
Lean UX‫یک‬‫روش‬‫مفید‬‫روی‬ ‫بر‬ ‫کار‬ ‫هنگام‬ ‫در‬‫هایی‬‫پروژه‬‫آن‬ ‫در‬ ‫که‬ ‫است‬
‫توسعه‬ ‫روش‬‫چابک‬‫استفاده‬‫...
•‫طراحی‬ ‫سنتی‬ ‫روش‬ ‫در‬UX‫آغ‬ ‫منظور‬ ‫به‬ ‫کامل‬ ‫جزئیات‬ ‫با‬ ‫دقیق‬ ‫اطالعات‬ ‫کامل‬ ‫دریافت‬ ‫برای‬ ‫تالش‬‫از‬
‫گیر...
•‫برای‬‫ساختن‬‫مفروضات‬‫تمام‬‫تیم‬‫در‬‫یک‬‫جلسه‬‫حضور‬‫دارند‬.‫مشکل‬‫بیان‬‫شود‬‫می‬‫و‬‫همه‬‫افر‬‫اد‬‫طی‬
‫یک‬‫فرآیند‬‫طوفا...
‫یک‬ ‫ایجاد‬
‫در‬ ‫فرضیه‬
Lean UX
‫فرضیه‬ ‫یک‬ ‫ساختن‬ ‫برای‬:
•‫کنیم‬‫می‬ ‫بیان‬ ‫را‬ ‫است‬ ‫درست‬ ‫داریم‬ ‫باور‬ ‫چه‬‫آن...
The Minimum Viable Product (MVP) is a core concept in Lean UX.
‫فراگیر‬ ‫طراحی‬
Universal Design
‫فراگیر‬ ‫طراحی‬
‫است‬ ‫دیزاین‬ ‫در‬ ‫گیری‬‫جهت‬ ‫یک‬ ،‫نیست‬ ‫سبک‬ ‫یک‬ ‫فراگیر‬ ‫طراحی‬.
•‫نیست‬ ‫اندک‬ ‫تعدادی‬ ‫برای‬ ...
۷‫فراگیر‬ ‫طراحی‬ ‫اصل‬
•‫مساوی‬ ‫استفاده‬
•‫استفاده‬ ‫در‬ ‫انعطاف‬
•‫خودآموز‬ ‫و‬ ‫ساده‬ ‫استفاده‬
•‫درک‬ ‫قابل‬ ‫اطالعات...
‫پذیر‬‫دسترس‬ ‫های‬‫وبسایت‬ ‫خلق‬
‫فراگیر‬ ‫طراحی‬ ‫اصول‬ ‫از‬ ‫استفاده‬ ‫با‬
Create Accessible Websites with the Principl...
‫دو‬‫عکس‬‫چپ‬ ‫سمت‬:‫عادی‬ ‫بینایی‬ ‫با‬ ‫فرد‬ ‫دید‬
‫راست‬ ‫سمت‬ ‫عکس‬ ‫دو‬:‫بیند‬‫می‬ ‫کوررنگ‬ ‫فرد‬ ‫چه‬‫آن‬ ‫سازی‬‫شبی...
‫مختلف‬ ‫های‬‫خواسته‬ ‫و‬ ‫ها‬‫توانایی‬ ‫با‬ ‫افراد‬ ‫برای‬ ‫کار‬ ‫فضای‬ ‫سازی‬‫شخصی‬ ‫امکان‬
‫نوشتاری‬ ‫فیلدهای‬ ‫ای‬‫لحظه‬ ‫اعتبارسنجی‬ ‫با‬ ‫کاربر‬ ‫اشتباهات‬ ‫کاهش‬
‫موس‬ ‫از‬ ‫استفاده‬ ‫جایگزینی‬ ‫برای‬ ‫میانبرها‬ ‫دادن‬ ‫قرار‬
‫گیمیفیکیشن‬
Gamification
‫گیمیفیکیشن‬
‫کرد‬ ‫بیشتر‬ ‫چه‬ ‫هر‬ ‫منظور‬ ‫به‬ ‫بازی‬ ‫غیر‬ ‫فرآیند‬ ‫یک‬ ‫در‬ ‫بازی‬ ‫کارگیری‬ ‫به‬‫تعامل‬ ‫ن‬
‫است‬ ‫...
•‫سریع‬ ‫بازخورد‬:‫به‬ ‫پاسخ‬ ‫یا‬ ‫فوری‬ ‫بازخورد‬‫اقدامات‬
‫محصول‬ ‫های‬‫پیام‬ ‫به‬ ‫دادن‬ ‫واکنش‬ ‫به‬ ‫کاربر‬ ‫تشویق‬....
•‫مرحله‬ ‫افزایش‬:‫جمع‬ ‫میان‬ ‫در‬ ‫من‬ ‫جایگاه‬
‫افراد‬ ‫سایر‬ ‫میان‬ ‫در‬ ‫جایگاه‬ ‫یا‬ ‫ها‬‫صالحیت‬ ‫دادن‬ ‫نشان‬ ‫برا...
•‫اجتماع‬:‫موفقیت‬ ‫به‬ ‫دستیابی‬ ‫به‬ ‫برای‬ ‫ای‬‫زمینه‬
‫بخ‬‫می‬ ‫معنی‬ ‫ها‬‫مکانیسم‬ ‫سایز‬ ‫و‬ ‫رقابت‬ ،‫ها‬‫نشان‬ ‫در...
‫رقابت‬/‫کردن‬ ‫تکمیل‬
‫کاربری‬ ‫واسط‬ ‫و‬ ‫تجربه‬ ‫طراحی‬ ‫الگوهای‬
UI/UX Design Patterns
‫عملی‬ ‫پروژه‬
‫مسهله‬:
‫فروشی‬ ‫شیرینی‬ ‫از‬ ‫آنالین‬ ‫سفارش‬ ‫برای‬VIP‫کنید‬ ‫طراحی‬ ‫را‬ ‫مناسب‬ ‫ابزار‬.
‫پروژه‬ ‫انجا...
‫دوم‬ ‫جلسه‬ ‫پایان‬
‫آموزش‬ ‫کارگاه‬‫پیشرفته‬
‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬
‫سوم‬ ‫جلسه‬/۱۴‫اردیبهشت‬۹۸/‫پناه‬‫محمدی...
‫پرسونا‬
Persona
‫بسازیم‬ ‫را‬ ‫آن‬ ‫چطور‬ ‫و‬ ‫چیست‬ ‫پرسونا‬
‫دهد‬‫می‬ ‫پاسخ‬ ‫سوال‬ ‫این‬ ‫به‬ ‫پرسونا‬:‫کنیم؟‬‫می‬ ‫دیزاین‬ ‫کسی‬ ‫چه‬ ...
‫پرسونا‬ ‫انواع‬
‫بازاریابی‬ ‫پرسونای‬/‫دی‬ ‫پرسونای‬‫زاین‬
‫محصول‬ ‫یک‬ ‫مشتری‬ ‫معمولی‬ ‫شخصیت‬ ‫دهنده‬ ‫نشان‬
‫روابط‬ ،...
‫به‬ ‫را‬ ‫پرسونا‬ ‫تعداد‬۴‫کنید‬ ‫محدود‬ ‫عدد‬.‫مشترک‬ ‫اهداف‬ ‫روی‬ ‫بر‬ ‫تمرکز‬ ‫امکان‬ ‫این‬ ‫از‬ ‫بیش‬ ‫تعداد‬
‫کرد‬ ...
‫پرسونا‬ ‫ساخت‬ ‫مراحل‬
۱.‫ها‬‫داده‬ ‫دقیق‬ ‫بررسی‬
•‫است‬ ‫شده‬ ‫آوری‬‫جمع‬ ‫مختلف‬ ‫های‬‫روش‬ ‫با‬ ‫کاربران‬ ‫از‬ ‫این‬ ...
‫ندارید‬ ‫حقیقی‬ ‫کاربران‬ ‫تحقیق‬ ‫برای‬ ‫برای‬ ‫بودجه‬ ‫یا‬ ‫وقت‬ ‫اگر‬:
•‫کارفرما‬ ‫بینش‬ ‫و‬ ‫اطالعات‬ ‫از‬ ‫استفاده‬/...
‫پرسونا‬ ‫ساخت‬ ‫مراحل‬
۲.‫الگوها‬ ‫تعریف‬
•‫اشتراکات‬ ‫یافتن‬ ‫برای‬ ‫شده‬ ‫گذاری‬‫نشان‬ ‫و‬ ‫آوری‬‫جمع‬ ‫های‬‫داده‬ ‫برر...
‫پرسونا‬ ‫ساخت‬ ‫مراحل‬
۴.‫گذاری‬ ‫اشتراک‬
•‫ب‬ ‫اشتراک‬ ‫به‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫صاحبان‬ ‫و‬ ‫دیزان‬ ‫تیم‬ ‫همه‬ ‫با‬ ‫را‬ ‫...
‫خوب‬ ‫پرسونای‬ ‫یک‬ ‫های‬‫ویژگی‬
۱.‫به‬‫کافی‬ ‫اندازه‬‫ها‬‫داده‬‫منعکس‬ ‫را‬ ‫تحقیقات‬ ‫نتایج‬ ‫و‬‫کند‬.
۲.‫وضعیت‬‫فعلی‬‫...
‫دید‬ ‫الگوی‬
Eye Pattern
‫چشم‬ ‫ردگیری‬
Eye tracking
‫چشم‬ ‫ردگیری‬ ‫تکنولوژی‬:
‫حساس‬ ‫بسیار‬ ‫های‬‫دوربین‬ ‫و‬ ‫قرمز‬ ‫مادون‬ ‫نزدیک‬ ‫اشعه‬
near...
‫از‬ ‫استفاده‬ ‫موارد‬
‫چشم‬ ‫ردگیری‬
‫تبلیغات‬ ‫و‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫در‬ ‫چشم‬ ‫ردگیری‬ ‫اهمیت‬
‫الگوی‬F
‫ک‬‫می‬ ‫اسکن‬ ‫را‬ ‫ها‬‫آن‬ ‫بلکه‬ ،‫خواند‬‫نمی‬ ‫را‬ ‫صفحات‬ ‫کاربران‬ ‫چشم‬‫ند‬
•‫سال‬ ‫در‬ ‫پژوهشی‬ ‫در‬ ‫بار...
‫دید‬ ‫الگوهای‬ ‫سایر‬
•‫ای‬‫الیه‬ ‫کیک‬ ‫الگوی‬(Layer-cake pattern)
‫هم‬ ‫زیر‬ ‫در‬ ‫افقی‬ ‫موازی‬ ‫خطوط‬.‫جزئیات‬ ‫به‬ ‫...
‫دید‬ ‫الگوهای‬ ‫سایر‬
•‫بر‬‫میان‬ ‫الگوی‬(Bypassing pattern)
‫اشتراکات‬ ‫گرفتن‬ ‫نادیده‬.‫پست‬ ‫نوشته‬ ‫سطر‬ ‫چند‬ ‫در‬ ‫...
‫الگوی‬ ‫چرا‬F‫دهد‬‫می‬ ‫رخ‬
‫صورت‬ ‫به‬ ‫را‬ ‫صفحات‬ ‫باشند‬ ‫همراه‬ ‫هم‬ ‫با‬ ‫اتفاق‬ ‫سه‬ ‫این‬ ‫وقتی‬ ‫کاربران‬F‫کنند‬...
‫الگوی‬ ‫با‬ ‫سازگاری‬ ‫های‬‫راه‬ ‫بهترین‬F
•‫دهید‬ ‫قرار‬ ‫صفحه‬ ‫اول‬ ‫پاراگراف‬ ‫دو‬ ‫در‬ ‫را‬ ‫نکات‬ ‫ترین‬‫مهم‬
•‫کنی...
‫ارگونومی‬
Ergonomics
‫ارگونومی‬
‫و‬ ‫انسانی‬ ‫های‬‫اندازه‬ ‫مطابق‬ ‫محصوالت‬ ‫ساخت‬ ‫و‬ ‫دیزاین‬ ‫دانش‬
‫است‬ ‫او‬ ‫شناختی‬ ‫های‬‫توانایی‬.
‫تب...
‫ن‬ ‫خود‬ ‫همراه‬ ‫تلفن‬ ‫به‬ ‫بار‬ ‫چند‬ ‫روز‬ ‫در‬ ‫فرد‬ ‫هر‬ ‫متوسط‬ ‫صورت‬ ‫به‬‫گاه‬
‫کند؟‬‫می‬
‫الف‬.۰‫تا‬۲۵
‫ب‬:۲۶‫ت...
۸۵
‫روز‬ ‫در‬ ‫بار‬
‫پذیری‬ ‫دسترسی‬/Reachability
‫گرفتن‬ ‫دست‬ ‫در‬ ‫چگونگی‬/Hand position
‫خواندن‬ ‫و‬ ‫تعامل‬/Interaction vs reading
‫رفته‬ ‫دست‬ ‫از‬ ‫های‬‫تپ‬ ‫تعداد‬ ‫برابر‬ ‫در‬ ‫تپ‬ ‫فضای‬ ‫اندازه‬
‫فیتز‬ ‫قانون‬/Fitts’s Law
‫است‬ ‫هدف‬ ‫آن‬ ‫اندازه‬ ‫و‬ ‫آن‬ ‫تا‬ ‫شما‬ ‫فاصله‬ ‫از‬ ‫تابعی‬ ‫هدف‬ ‫یک‬ ‫به‬ ‫رسیدن‬ ‫برا...
‫نهایت‬‫بی‬ ‫های‬‫لبه‬ ‫و‬ ‫ها‬‫گوشه‬
‫عنصری‬ ‫هر‬ ‫از‬ ‫تر‬‫آسان‬ ‫بسیار‬ ‫باشد‬ ‫گرفته‬ ‫قرار‬ ‫مانیتور‬ ‫های‬‫گوشه‬ ‫در...
‫نهایت‬‫بی‬ ‫های‬‫لبه‬ ‫و‬ ‫ها‬‫گوشه‬
‫داریم‬ ‫را‬ ‫نهایت‬‫بی‬ ‫های‬‫لبه‬ ،‫نهایت‬‫بی‬ ‫های‬‫گوشه‬ ‫جای‬ ‫به‬ ‫همراه‬ ‫های...
‫قرارگیری‬ ‫وضعیت‬/Posture
‫وسی‬ ‫آن‬ ‫از‬ ‫استفاده‬ ‫در‬ ‫کاربر‬ ‫قرارگیری‬ ‫وضعیت‬ ‫به‬ ‫توجه‬ ‫با‬ ‫باید‬ ‫مختلف‬ ‫های‬...
‫انت‬ ‫که‬ ‫ای‬‫وسیله‬ ‫با‬ ‫کند‬‫می‬ ‫استفاده‬ ‫آن‬ ‫از‬ ‫لمسی‬ ‫صورت‬ ‫به‬ ‫کاربر‬ ‫که‬ ‫ای‬‫وسیله‬ ‫برای‬ ‫طراحی‬ ‫مثال...
‫محتوا‬ ‫استراتژی‬
Content Strategy
‫محتوا‬ ‫استراتژی‬
‫کارا‬ ‫و‬ ‫مفید‬ ‫محتوای‬ ‫نگهداری‬ ‫و‬ ‫انتشار‬ ،‫ایجاد‬ ‫برای‬ ‫ای‬‫برنامه‬
•‫وی‬ ،‫منتشر‬ ‫درست‬ ‫ز...
The Content Strategy Quad, copyright Brain Traffic
‫گیرد‬‫می‬ ‫قرار‬ ‫گروه‬ ‫دو‬ ‫در‬ ‫معمول‬ ‫صورت‬ ‫به‬ ‫محتوا‬ ‫استراتژ...
‫کاربری‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬
UX Writing
‫محتواهایی‬ ‫نوشتن‬‫در‬ ‫دقیقا‬ ‫که‬‫دارند‬ ‫وجود‬ ‫تماس‬ ‫نقاط‬.‫این‬‫باید‬ ‫ن...
•‫حذف‬‫کلمات‬‫تکنیکال‬‫یک‬ ‫جایگذاری‬ ‫و‬‫فهم‬ ‫قابل‬ ‫عبارت‬
‫مثال‬:‫وی‬ ‫برشمردن‬ ‫جای‬ ‫به‬ ‫است‬ ‫بهتر‬ ‫اپلیکیشن‬ ‫یک...
•‫نزدیک‬ ‫معنای‬ ‫به‬ ‫بلکه‬ ،‫است‬ ‫کوتاه‬ ‫معنای‬ ‫به‬ ‫تنها‬ ‫نه‬ ‫مختصر‬‫شدن‬
‫است‬ ‫مفهوم‬ ‫کارآمدترین‬ ‫به‬.
‫بودن‬ ...
•‫دار‬ ‫واضح‬ ‫بسیار‬ ‫کارکرد‬ ‫یک‬ ‫نمایش‬ ‫صفحه‬ ‫روی‬ ‫ای‬‫کلمه‬ ‫هر‬ ‫که‬ ‫شویم‬ ‫مطمهن‬ ‫و‬ ‫کنیم‬ ‫نگاه‬ ‫هایمان‬‫پی...
•‫بچینید‬ ‫جمله‬ ‫ابتدای‬ ‫در‬ ‫را‬ ‫مهم‬ ‫کلمات‬.‫دید‬ ‫الگوهای‬ ‫مطابق‬
•‫انتخاب‬«‫دوباره‬‫سعی‬‫کنید‬»‫به‬‫جای‬OK
•‫اند‬‫کرده‬ ‫فراموش‬ ‫را‬ ‫رمزشان‬ ‫که‬ ‫افرادی‬ ‫برای‬ ‫راهی‬ ‫گرفتن‬ ‫نظر‬ ‫د...
‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬
•‫نشان‬‫شوند‬ ‫گرفته‬ ‫جدی‬ ‫خواهند‬ ‫می‬ ،‫دارند‬ ‫مشکل‬ ‫آنها‬ ‫اگر‬ ‫کار...
‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬
•‫کاربر‬‫ما‬ ،‫اند‬‫نداده‬ ‫انجام‬ ‫اشتباهی‬ ‫کار‬ ‫هیچ‬ ‫ها‬‫آن‬ ‫نکنید‬ ‫...
‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬
•‫ملموس‬‫کنید‬ ‫استفاده‬ ‫ساده‬ ‫زبان‬ ‫از‬ ،‫بنویسید‬ ‫مستقیم‬ ‫و‬.‫کنی‬ ‫...
‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬
•‫خطا‬ ‫پیغام‬:‫کنید‬ ‫فراهم‬ ‫بعدی‬ ‫مراحل‬ ‫برای‬ ‫را‬ ‫اطالعات‬ ‫امکان‬ ...
‫کاربری‬ ‫تجربه‬ ‫ریزی‬‫برنامه‬ ‫های‬‫روش‬
UX Mapping Methods
۴‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫برای‬ ‫نمودار‬ ‫نوع‬
•Empathy mapping‫همدلی‬ ‫نقشه‬
•Customer journey mapping‫مشتری‬ ‫سفر‬ ‫نقش...
‫سوم‬ ‫جلسه‬ ‫پایان‬
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop
Prochain SlideShare
Chargement dans…5
×

کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop

48 vues

Publié le

این اسلاید ارائه کارگاه پیشرفته طراحی واسط کاربری و تجربه کاربری است که من (اسماعیل محمدی‌پناه) در اردیبهشت ۹۸ به دعوت از دوستان پر تلاش آکادمی جهش برگزار کردم.

اگر به تازگی می‌خواهید طراحی واسط کاربری یا تجربه کاربری را آغاز کنید این اسلای را ببینید:‌https://www.slideshare.net/esmailmp/uiux-150369840

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

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

کارگاه پیشرفته طراحی واسط و تجربه کاربری UX/UI Design Pro Workshop

  1. 1. ‫آموزش‬ ‫کارگاه‬‫پیشرفته‬ ‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬ ‫اول‬ ‫جلسه‬/۹‫اردیبهشت‬۹۸/‫پناه‬‫محمدی‬ ‫اسماعیل‬
  2. 2. ‫پناه‬‫محمدی‬ ‫اسماعیل‬ ‫کاربری‬ ‫تجربه‬ ‫طراح‬/‫کاربری‬ ‫واسط‬ ‫طراح‬/‫خدمات‬ ‫طراح‬ esmailmp@gmail.com
  3. 3. ‫دهیم‬‫می‬ ‫انجام‬ ‫دوره‬ ‫این‬ ‫در‬ ‫چه‬‫آن‬ ‫جلسه‬‫سوم‬ ‫تعاریف‬ ‫با‬ ‫آشنایی‬ ‫عملی‬ ‫پروژه‬ ‫ارائه‬ ‫جلسه‬‫دوم‬ ‫تعاریف‬ ‫با‬ ‫آشنایی‬ ‫عملی‬ ‫پروژه‬ ‫جلسه‬‫اول‬ ‫تعاریف‬ ‫با‬ ‫آشنایی‬ ‫تحلیل‬ ‫و‬ ‫نقد‬ ‫تمرین‬
  4. 4. ‫کاربری‬ ‫تجربه‬ User Experience
  5. 5. “A person’s perceptions and responses that result from the use and / or anticipated use of a product, system or service.”
  6. 6. ۶‫تجربه‬ ‫ایجاد‬ ‫برای‬ ‫گام‬ ۱.‫بشناسید‬ ‫را‬ ‫کاربرتان‬ ‫ها‬‫محدودیت‬ ،‫ها‬‫توانایی‬ ،‫عالئق‬ ،‫نیازها‬ ۲.‫تان‬‫محصول‬‫جذاب‬ ‫و‬ ‫آسان‬ ‫را‬‫بسازید‬ ‫آن‬ ‫جستجوی‬ ‫در‬ ‫کاربر‬ ‫که‬ ‫چیز‬ ‫آن‬ ‫جذاب‬ ‫ارائه‬‫است‬ ۳.‫ریزی‬‫برنامه‬ ‫هنر‬ ‫تمرین‬ ‫خلق‬ ‫برای‬ ‫توانایی‬ ‫ترین‬‫مهم‬ ‫و‬ ‫اولین‬ ‫تجربه‬ ‫طراحی‬ ‫شود‬‫می‬ ‫شامل‬ ‫را‬ ‫آن‬ ‫های‬‫جنبه‬ ‫تمام‬ ‫که‬ ‫است‬ ‫محصول‬.
  7. 7. ۶‫تجربه‬ ‫ایجاد‬ ‫برای‬ ‫گام‬ ۴.‫پویا‬ ‫و‬ ‫ارزشمند‬ ٔ‫تجربه‬ ‫یک‬ ‫خلق‬ ‫ارزیابی‬‫که‬ ‫افکار‬ ‫و‬ ‫احساسات‬ ،‫عملکرد‬ ‫از‬ ‫فردی‬‫در‬‫زم‬‫ان‬ ‫و‬‫ای‬‫زمینه‬‫تغییر‬ ،‫دهد‬ ‫می‬ ‫رخ‬ ‫آن‬ ‫در‬ ‫که‬‫کند‬‫می‬. ۵.‫انسانی‬ ‫های‬‫مولفه‬ ‫گرفتن‬ ‫نظر‬ ‫در‬ ‫ماشین‬ ‫با‬ ‫انسان‬ ‫تعامل‬ ‫های‬‫جنبه‬ ‫به‬ ‫توجه‬ ۶.‫جزئیات‬ ‫تمامی‬ ‫به‬ ‫توجه‬ ‫در‬ ‫کاربر‬ ‫با‬ ‫طریق‬ ‫این‬ ‫از‬ ‫شما‬ ‫کار‬ ‫و‬ ‫کسب‬ ٔ‫همه‬ ‫زیرا‬ ‫است‬ ‫ارتباط‬.
  8. 8. ‫تماس‬ ‫نقاط‬ Touch Points
  9. 9. ‫تماس‬ ‫نقاط‬ ‫است‬ ‫سازمان‬ ‫یا‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫با‬ ‫کاربر‬ ‫بین‬ ‫تماس‬ ‫نقاط‬ ‫از‬ ‫ای‬‫مجموعه‬ ‫کاربر‬ ‫مسیر‬.
  10. 10. ‫طراحی‬ ‫تفکر‬ Design Thinking
  11. 11. ‫طراحی‬ ‫تفکر‬ ‫کاربر‬ ‫نیازهای‬ ‫اساس‬ ‫بر‬ ‫ها‬‫حل‬‫راه‬ ‫طراحی‬ ‫برای‬ ‫چارچوبی‬ ‫به‬ ‫جدید‬ ‫مدیران‬ ‫اما‬ ‫بود‬ ‫کمرنگ‬ ‫مسائل‬ ‫حل‬ ‫در‬ ‫کاربر‬ ‫نقش‬ ‫مدیریت‬ ‫سنتی‬ ‫های‬‫شیوه‬ ‫در‬‫دنبال‬ ‫بازده‬ ‫بردن‬ ‫باال‬ ‫برای‬ ‫و‬ ‫باشد‬ ‫داشته‬ ‫را‬ ‫بازدهی‬ ‫بیشترین‬ ‫که‬ ‫بودند‬ ‫هایی‬‫راه‬ ‫یافتن‬‫به‬ ‫توجه‬ ‫ی‬ ‫امری‬ ‫عنوان‬ ‫به‬ ‫را‬ ‫کاربر‬‫ناپذیر‬‫اجتناب‬‫کردند‬ ‫لحاظ‬ ‫خود‬ ‫های‬‫روش‬ ‫در‬.
  12. 12. •‫نورمن‬ ‫دونالد‬(Donald Arthur Norman): ‫شک‬ ‫یعنی‬ ،‫دهند‬‫می‬ ‫انجام‬ ‫خالق‬ ‫افراد‬ ‫آنچه‬ ‫شرح‬ ‫برای‬ ‫است‬ ‫ای‬‫واژه‬ ‫دیزاین‬ ‫تفکر‬‫ستن‬ ‫نو‬ ‫از‬ ‫کردن‬ ‫فکر‬ ‫و‬ ‫موجود‬ ‫های‬‫پارادایم‬ ‫از‬ ‫رفتن‬ ‫فراتر‬ ‫و‬ ‫قوانین‬.‫ب‬ ‫دیزاین‬ ‫تفکر‬ ‫در‬‫ا‬ ‫است‬ ‫شده‬ ‫بنا‬ ‫خالقیت‬ ‫برمبنای‬ ‫که‬ ‫مواجهیم‬ ‫غیرخطی‬ ‫و‬ ‫پذیر‬‫انعطاف‬ ‫ساختاری‬. •‫الوسون‬(Bryan Lawson): ‫هست‬ ‫نیز‬ ‫آن‬ ‫یافتن‬ ‫پی‬ ‫در‬ ‫پردازد‬‫می‬ ‫مساله‬ ‫حل‬ ‫به‬ ‫که‬ ‫همانگونه‬ ‫دیزاین‬ ‫تفکر‬‫و‬ ‫است‬ ‫محور‬ ‫حل‬‫راه‬ ‫روشی‬.
  13. 13. ‫طراحی‬ ‫تفکر‬ ‫معروف‬ ‫های‬‫چارچوب‬ •‫دست‬ ‫و‬ ‫سر‬ ،‫قلب‬ Heart, Head and Hand ‫برای‬ ‫نیازها‬ ‫و‬ ‫احساسات‬ ،‫اندازه‬‫چشم‬ ‫درک‬ ‫ها‬‫ایده‬ ‫اجرای‬ ‫و‬ ‫ارزیابی‬ ‫و‬ ‫کردن‬ ‫فکر‬ ،‫فهمیدن‬ •‫عمیق‬ ‫شیرجه‬ Deep-Dive ‫فهم‬/‫مشاهده‬/‫مصورسازی‬/‫ارزیابی‬/‫اجرا‬ •‫فرآیند‬۵‫اسکول‬‫دی‬ ‫ای‬‫مرحله‬ d.school’s 5 Stage Process ‫پندازی‬‫همذات‬/‫تعریف‬/‫پردازی‬‫ایده‬/‫اولی‬ ‫نمونه‬‫ه‬/ ‫آزمودن‬ •‫دیو‬‫آی‬ ‫طراحی‬ ‫تفکر‬ ‫فرآیند‬ IDEO’s Design Thinking Process ‫بخش‬‫الهام‬ ‫درک‬/‫پردازی‬‫ایده‬/‫اجرا‬
  14. 14. ‫های‬‫چارچوب‬‫تفکر‬ ‫معروف‬‫طراحی‬ •‫دی‬ ‫چهار‬ Design Council of the UK: 4 D’s ‫کشف‬/‫تعریف‬/‫توسعه‬/‫ارائه‬ •‫پرسش‬ ‫چهار‬ What x 4 What is/ What if?/ What wows?/ What works?
  15. 15. ‫پردازی‬‫ایده‬ ‫های‬‫روش‬ Ideation methods
  16. 16. ‫پردازی‬‫ایده‬ ‫های‬‫روش‬ •‫طوفان‬ ‫یا‬ ‫مغزی‬ ‫بارش‬‫فکری‬ Brainstorming •‫زمانی‬ ‫محدوده‬ ‫تعیین‬/‫موضوع‬ ‫یک‬ ‫تنها‬ ‫طرح‬/ ‫ها‬‫ایده‬ ‫نکردن‬ ‫قضاوت‬/‫نظر‬ ‫ابراز‬ ‫فضای‬ ‫ایجاد‬ ‫کنندگان‬ ‫شرکت‬ ‫برای‬ •‫تکنیک‬‫مپر‬َ‫اسک‬ SCAMPER •Substitute:‫کردن‬ ‫جایگزین‬ •Combine:‫کردن‬ ‫ترکیب‬ •Adapt:‫دادن‬ ‫وفق‬ •Modify:‫کردن‬ ‫اصالح‬ •Put to another use:‫یافتن‬‫کاربرد‬‫دیگر‬ •Eliminate:‫کردن‬ ‫حذف‬ •Reverse:‫کردن‬ ‫وارونه‬
  17. 17. ‫پردازی‬‫ایده‬ ‫های‬‫روش‬ •‫بردن‬ ‫سوال‬ ‫زیر‬‫ها‬‫فرض‬‫پیش‬ •‫شدن‬ ‫خالص‬‫از‬‫ش‬ ‫پذیرفته‬ ‫فرضیات‬ ‫و‬ ‫تفکرات‬‫ده‬ ‫خلق‬ ‫تسهیل‬ ‫باعث‬‫های‬‫ایده‬‫جدید‬‫شود‬‫می‬ •‫برداری‬ ‫نقشه‬‫ذهنی‬ Mind mapping •‫باعث‬ ‫که‬ ‫است‬ ‫نموداری‬ ‫یا‬ ‫گرافیکی‬ ‫تکنیک‬ ‫ارتباطات‬ ‫شود‬‫می‬‫بین‬‫های‬‫مجموعه‬‫از‬ ‫مختلفی‬ ‫ها‬‫ایده‬‫یا‬‫اطالعات‬‫تصور‬ ‫یا‬ ‫درک‬‫شود‬. •‫کاله‬ ‫شش‬ ‫تکنیک‬‫تفکر‬ Six thinking hats •‫سفید‬ ‫کاله‬:‫و‬ ‫اطالعات‬ ،‫ها‬ ‫داده‬‫ها‬‫واقعیت‬ •‫قرمز‬ ‫کاله‬:‫احساسات‬ ‫و‬ ‫عواطف‬ •‫سبز‬ ‫کاله‬:‫خالقیت‬ ‫و‬ ‫نوآوری‬ •‫زرد‬ ‫کاله‬:‫و‬ ‫بودن‬ ‫مثبت‬‫بینی‬‫خوش‬ •‫سیاه‬ ‫کاله‬:‫نقادانه‬ ‫قضاوت‬ ‫یا‬ ‫بودن‬ ‫منفی‬ •‫آبی‬ ‫کاله‬:‫نظارت‬ ‫و‬ ‫کنترل‬
  18. 18. ‫افوردنس‬ Affordance
  19. 19. ‫افوردنس‬ ‫بیان‬ ‫محصول‬ ‫آن‬ ‫خود‬ ‫توسط‬ ‫که‬ ‫محصول‬ ‫یک‬ ‫از‬ ‫استفاده‬ ‫برای‬ ‫هایی‬‫سرنخ‬‫شود‬‫می‬. ‫دهد‬‫می‬ ‫نشان‬ ‫را‬ ‫محصول‬ ‫از‬ ‫استفاده‬ ‫احتمالی‬ ‫های‬‫راه‬ ‫که‬ ‫است‬ ‫ای‬‫شاخصه‬ ‫افوردنس‬. ‫شخص‬ ‫های‬‫ویژگی‬ ‫و‬ ‫قبلی‬ ‫دانش‬ ،‫فرهنگ‬ ‫به‬ ‫وابسته‬ ‫افوردنس‬ ،‫دیدگاه‬ ‫یک‬ ‫اساس‬ ‫بر‬‫یتی‬ ‫است‬.‫به‬ ‫توجهی‬‫بی‬ ‫با‬ ،‫کاربر‬ ‫های‬‫توانایی‬ ‫بر‬ ‫تمرکز‬ ‫تنها‬ ‫کند‬‫می‬ ‫بیان‬ ‫دیگر‬ ‫دیدگاه‬‫و‬ ‫دانش‬ ‫شکل‬ ‫را‬ ‫افوردنس‬ ،‫قبلی‬ ‫های‬‫زمینه‬‫پیش‬‫دهد‬‫می‬.
  20. 20. ‫افوردنس‬‫محصوالت‬ ‫در‬ ‫پتانسیلی‬‫است‬‫ک‬ ‫توسط‬ ‫عمل‬ ‫یک‬ ‫گیری‬‫شکل‬ ‫به‬ ‫که‬‫اربر‬ ‫منتهی‬‫و‬ ‫شود‬‫می‬«‫موفق‬ ‫طراح‬»‫مسلط‬ ‫کاربر‬ ‫احتمالی‬ ‫های‬‫العمل‬‫عکس‬ ‫و‬ ‫عمل‬ ‫بر‬ ‫کند‬ ‫بینی‬‫پیش‬ ‫را‬ ‫ها‬‫آن‬ ‫تواند‬‫می‬ ‫و‬ ‫است‬.
  21. 21. ‫گشتالت‬ Gestalt
  22. 22. ‫گشتالت‬ ‫است‬ ‫اجزا‬ ‫مجموع‬ ‫از‬ ‫فراتر‬ ‫چیزی‬ ،‫کل‬. •‫گرایی‬‫طرح‬ ‫قانون‬ •‫قانون‬‫تک‬ ‫یا‬ ‫بستن‬‫میل‬ •‫قانون‬‫شباهت‬ •‫مجاورت‬ ‫قانون‬ •‫قانون‬‫خوب‬ ‫ادامه‬ •‫قانون‬‫سادگی‬ •‫قانون‬‫زمینه‬ ‫و‬ ‫شکل‬
  23. 23. ‫تحلیل‬ ‫و‬ ‫نقد‬ ‫تمرین‬ ۱.‫منف‬ ‫و‬ ‫مثبت‬ ‫نکات‬ ‫بررسی‬ ‫و‬ ‫وبسایت‬ ‫تحلیل‬ ‫و‬ ‫نقد‬‫ی‬ ۲.‫منفی‬ ‫نقاط‬ ‫نمودن‬ ‫برطرف‬ ‫با‬ ‫وایرفریم‬ ‫طراحی‬
  24. 24. ‫اول‬ ‫جلسه‬ ‫پایان‬
  25. 25. ‫آموزش‬ ‫کارگاه‬‫پیشرفته‬ ‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬ ‫دوم‬ ‫جلسه‬/۱۰‫اردیبهشت‬۹۸/‫پناه‬‫محمدی‬ ‫اسماعیل‬
  26. 26. ‫چابک‬ Agile
  27. 27. ‫چابک‬ ‫محصول‬ ‫بهتر‬ ‫و‬ ‫تر‬‫سریع‬ ‫خلق‬ ‫و‬ ‫توسعه‬ ‫برای‬ ‫ها‬‫متودولوژی‬ ‫از‬ ‫ای‬‫مجموعه‬ ‫طری‬ ‫از‬ ‫راهکارها‬ ‫و‬ ‫ها‬‫نیازمندی‬ ،‫ها‬‫آن‬ ‫در‬ ‫و‬ ‫است‬ ‫شده‬ ‫بنا‬ ‫تکرارشونده‬ ‫توسعه‬ ‫بر‬ ‫ها‬‫متودولوژی‬ ‫این‬ ‫پایه‬‫ق‬ ‫یابد‬‫می‬ ‫تکامل‬ ‫دهنده‬‫خودسازمان‬ ‫و‬ ‫کارکردی‬ ‫چند‬ ‫های‬‫تیم‬ ‫میان‬ ‫همکاری‬.
  28. 28. ‫چابک‬ ‫روش‬ ‫مزایای‬ •‫کاربر‬:‫او‬ ‫نیازهای‬ ‫به‬ ‫بیشتر‬ ‫توجه‬ •‫کننده‬ ‫عرضه‬:‫بازار‬ ‫به‬ ‫رسیدن‬ ‫زمان‬ ‫کاهش‬ •‫توسعه‬ ‫تیم‬:‫محص‬ ‫خلق‬ ‫و‬ ‫وقت‬ ‫اتالف‬ ‫شدن‬ ‫کم‬ ‫دلیل‬ ‫به‬ ‫تیم‬ ‫رضایتمندی‬ ‫و‬ ‫وری‬‫بهره‬ ‫افزایش‬‫کارا‬ ‫ول‬ •‫محصول‬ ‫مدیر‬:‫کاربران‬ ‫رضایتمندی‬ ‫جلب‬ ‫به‬ ‫رسیدن‬ ‫مسیر‬ ‫تسهیل‬ •‫نفعان‬‫ذی‬ ‫سایر‬ ‫و‬ ‫محصول‬ ‫مالک‬:‫بهت‬ ‫مسیر‬ ‫انتخاب‬ ‫برای‬ ‫زمینه‬ ‫ایجاد‬ ‫و‬ ‫شفافیت‬ ‫افزایش‬‫ر‬
  29. 29. ‫اسکرام‬ Scrum A Better Way Of Building Products ‫های‬‫ویژگی‬‫اسکرام‬: • Framework • Complex • Adaptive • Light weight • Simple to understand • Difficult to master
  30. 30. ‫بینی‬‫پیش‬ ‫نه‬ ،‫است‬ ‫گرایی‬‫تجربه‬ ‫اسکرام‬ ‫پایه‬ ‫اسکرام‬ ‫ارکان‬:Transparency/Inspection/Adaptation Starting up the project ‫اسکرام‬‫ب‬ ‫از‬ ‫نماندن‬ ‫عقب‬ ‫منظور‬ ‫به‬ ‫بودن‬ ‫چابک‬ ‫برای‬‫ازار‬ ‫است‬ ‫آمده‬ ‫وجود‬ ‫به‬. •‫ها‬‫نیازمندی‬ ‫کردن‬ ‫پیدا‬ •‫مشتری‬ ‫های‬‫اولویت‬ ‫اساس‬ ‫بر‬ ‫سازی‬‫مرتب‬ •‫الگ‬‫بک‬ ‫لیست‬ ‫ساختن‬
  31. 31. ‫استوری‬ ‫یوزر‬ User Story ‫باشد‬ ‫داشته‬ ‫را‬ ‫ها‬‫شرط‬ ‫این‬ ‫باید‬ ‫استوری‬ ‫یوزر‬ ‫هر‬: • Non-technical • Independent ‫صحبت‬ ‫ها‬‫اکشن‬ ‫درباره‬ ‫استوری‬ ‫یوزر‬ ‫در‬،‫کنیم‬‫می‬‫چیزی‬ ‫داشتن‬ ‫به‬ ‫میل‬ ‫نه‬. As a …, I want to … [, so that …].
  32. 32. ‫برای‬ ‫الزم‬ ‫های‬‫مهارت‬ ‫تمام‬‫انجام‬‫یک‬ ‫شدن‬‫یوزراستوری‬‫باش‬ ‫تیم‬ ‫در‬ ‫باید‬‫د‬. Cross functional team Daily scrum standup 15 min/Standup/Only developers •‫اسکرام‬ ‫تیم‬ ‫های‬‫نقش‬: •Scrum master •Product owner •Team
  33. 33. ‫چابک‬ ‫کاربری‬ ‫تجربه‬ Lean UX
  34. 34. Lean UX Lean UX‫یک‬‫روش‬‫مفید‬‫روی‬ ‫بر‬ ‫کار‬ ‫هنگام‬ ‫در‬‫هایی‬‫پروژه‬‫آن‬ ‫در‬ ‫که‬ ‫است‬ ‫توسعه‬ ‫روش‬‫چابک‬‫استفاده‬‫شود‬‫می‬. •‫محصول‬ ‫کل‬ ‫روی‬ ‫بر‬ ‫تمرکز‬ ‫سنتی‬ ‫روش‬ ‫مانند‬ ‫نه‬ ‫و‬ ‫طراحی‬ ‫حال‬ ‫در‬ ‫بخش‬ ‫روی‬ ‫بر‬ ‫تمرکز‬ •‫توسعه‬ ‫تیم‬ ‫با‬ ‫زیاد‬ ‫و‬ ‫تنگاتنگ‬ ‫همکاری‬ •‫درست‬ ‫تصمیمات‬ ‫اتخاذ‬ ‫منظور‬ ‫به‬ ‫بازخوردها‬ ‫تر‬‫سریع‬ ‫دریافت‬ ‫برای‬ ‫زیاد‬ ‫تالش‬
  35. 35. •‫طراحی‬ ‫سنتی‬ ‫روش‬ ‫در‬UX‫آغ‬ ‫منظور‬ ‫به‬ ‫کامل‬ ‫جزئیات‬ ‫با‬ ‫دقیق‬ ‫اطالعات‬ ‫کامل‬ ‫دریافت‬ ‫برای‬ ‫تالش‬‫از‬ ‫گیرد‬‫می‬ ‫صورت‬ ‫پروژه‬. •‫در‬ ‫اما‬Lean UX‫است‬ ‫متفاوت‬ ‫کمی‬ ‫روش‬.‫نیستید‬ ‫متمرکز‬ ‫دقیق‬ ‫نتایج‬ ‫روی‬ ‫شما‬.‫د‬ ‫بمه‬ ‫شمما‬‫نبمال‬ ‫بهبود‬ ‫اکنون‬ ‫و‬ ‫اینجا‬ ‫در‬ ‫را‬ ‫محصول‬ ‫که‬ ‫هستید‬ ‫تغییراتی‬ ‫ایجاد‬‫بخشد‬‫می‬. •‫کمردن‬ ‫جمایگزین‬ ‫و‬ ‫ها‬‫نیازمنمدی‬ ‫از‬ ‫صمرفنظر‬ ‫با‬ ‫عمل‬ ‫در‬ ‫کار‬ ‫این‬«‫مسمهله‬ ‫بیمان‬»‫شمود‬‫می‬ ‫انجمام‬.‫ب‬‫یمان‬ ‫کند‬‫می‬ ‫رهنمون‬ ‫که‬ ‫مفروضات‬ ‫از‬ ‫ای‬‫مجموعه‬ ‫به‬ ‫را‬ ‫ما‬ ‫مسهله‬. •‫باشند‬ ‫غلط‬ ‫است‬ ‫ممکن‬ ‫مفروضات‬.‫ش‬ ‫خواهد‬ ‫روشن‬ ‫مسیر‬ ‫ادامه‬ ‫در‬ ‫اشتباه‬ ‫این‬ ‫صورت‬ ‫این‬ ‫در‬‫د‬.
  36. 36. •‫برای‬‫ساختن‬‫مفروضات‬‫تمام‬‫تیم‬‫در‬‫یک‬‫جلسه‬‫حضور‬‫دارند‬.‫مشکل‬‫بیان‬‫شود‬‫می‬‫و‬‫همه‬‫افر‬‫اد‬‫طی‬ ‫یک‬‫فرآیند‬‫طوفان‬‫فکری‬‫های‬‫ایده‬‫خود‬‫برای‬‫پاسخ‬‫را‬‫گویند‬‫می‬.‫مطالب‬‫مورد‬‫قبول‬‫همه‬‫اعضا‬ ‫مفروضات‬‫را‬‫شکل‬‫دهد‬‫می‬. ‫سؤاالت‬‫معمول‬‫عبارتند‬‫از‬: •‫کاربران‬‫ما‬‫چه‬‫کسانی‬‫هستند؟‬ •‫محصول‬‫مورد‬‫استفاده‬‫برای‬‫محصول‬‫چیست‬‫؟‬ •‫چه‬‫زمانی‬‫استفاده‬‫شود‬‫می‬‫؟‬ •‫در‬‫چه‬‫شرایطی‬‫از‬‫آن‬‫استفاده‬‫شود‬‫می‬‫؟‬ •‫مهمترین‬‫قابلیت‬‫چیست؟‬ •‫بزرگترین‬‫خطری‬‫که‬‫ارائه‬‫محصول‬‫را‬‫تهدید‬‫کند‬‫می‬‫چیست‬‫؟‬
  37. 37. ‫یک‬ ‫ایجاد‬ ‫در‬ ‫فرضیه‬ Lean UX ‫فرضیه‬ ‫یک‬ ‫ساختن‬ ‫برای‬: •‫کنیم‬‫می‬ ‫بیان‬ ‫را‬ ‫است‬ ‫درست‬ ‫داریم‬ ‫باور‬ ‫چه‬‫آن‬. •‫است‬ ‫مهم‬ ‫کسی‬ ‫چه‬ ‫برای‬ ‫و‬ ‫چرا‬ ‫کنیم‬‫می‬ ‫مشخص‬. •‫کنیم‬‫می‬ ‫مشخص‬ ‫را‬ ‫بیاید‬ ‫دست‬ ‫به‬ ‫طراحی‬ ‫از‬ ‫بعد‬ ‫داریم‬ ‫انتظار‬ ‫چه‬‫آن‬. •‫کرد‬ ‫خواهیم‬ ‫پیدا‬ ‫فرضیه‬ ‫اثبات‬ ‫برای‬ ‫را‬ ‫مستندی‬ ‫چه‬ ‫زنیم‬‫می‬ ‫حدس‬ ‫پایان‬ ‫در‬. ‫رویم‬‫می‬ ‫بعدی‬ ‫سراغ‬ ‫به‬ ‫و‬ ‫کنیم‬‫می‬ ‫رها‬ ‫را‬ ‫ایده‬ ‫آن‬ ‫نشد‬ ‫پیدا‬ ‫فرضیه‬ ‫تایید‬ ‫برای‬ ‫مستندی‬ ‫اگر‬.‫اگر‬ ‫م‬ ‫انجام‬ ‫آن‬ ‫از‬ ‫پس‬ ‫بازخورد‬ ‫دریافت‬ ‫فرآیند‬ ‫و‬ ‫شود‬‫می‬ ‫اجرا‬ ‫ایده‬ ،‫شد‬ ‫تایید‬ ‫مستندات‬ ‫با‬ ‫فرضیه‬‫شود‬‫ی‬.
  38. 38. The Minimum Viable Product (MVP) is a core concept in Lean UX.
  39. 39. ‫فراگیر‬ ‫طراحی‬ Universal Design
  40. 40. ‫فراگیر‬ ‫طراحی‬ ‫است‬ ‫دیزاین‬ ‫در‬ ‫گیری‬‫جهت‬ ‫یک‬ ،‫نیست‬ ‫سبک‬ ‫یک‬ ‫فراگیر‬ ‫طراحی‬. •‫نیست‬ ‫اندک‬ ‫تعدادی‬ ‫برای‬ ‫خاص‬ ‫شرایط‬ ‫یک‬ ‫معلولیت‬ ‫و‬ ‫ناتوانی‬. •‫آمد‬ ‫خواهد‬ ‫پیش‬ ‫زندگی‬ ‫از‬ ‫بخشی‬ ‫در‬ ‫ما‬ ‫اغلب‬ ‫برای‬ ‫و‬ ‫است‬ ‫معمولی‬ ‫امر‬ ‫یک‬ ‫این‬. •‫خواهد‬ ‫کار‬ ‫خوب‬ ‫حتما‬ ‫سالم‬ ‫افراد‬ ‫برای‬ ،‫کند‬ ‫کار‬ ‫خوبی‬ ‫به‬ ‫ناتوان‬ ‫افراد‬ ‫برای‬ ‫دیزاین‬ ‫یک‬ ‫اگر‬‫کرد‬. •‫هستند‬ ‫سازگار‬ ‫یکدیگر‬ ‫با‬ ‫استفاده‬ ‫قابلیت‬ ‫و‬ ‫شناسی‬‫زیبایی‬.
  41. 41. ۷‫فراگیر‬ ‫طراحی‬ ‫اصل‬ •‫مساوی‬ ‫استفاده‬ •‫استفاده‬ ‫در‬ ‫انعطاف‬ •‫خودآموز‬ ‫و‬ ‫ساده‬ ‫استفاده‬ •‫درک‬ ‫قابل‬ ‫اطالعات‬ ‫ارائه‬ •‫خطا‬ ‫برای‬ ‫تلورانس‬ •‫کم‬ ‫فیزیکی‬ ‫تالش‬ •‫استفاد‬ ‫برای‬ ‫مناسب‬ ‫فضای‬ ‫و‬ ‫اندازه‬‫ه‬
  42. 42. ‫پذیر‬‫دسترس‬ ‫های‬‫وبسایت‬ ‫خلق‬ ‫فراگیر‬ ‫طراحی‬ ‫اصول‬ ‫از‬ ‫استفاده‬ ‫با‬ Create Accessible Websites with the Principles of Universal Design •‫مثال‬ ‫عنوان‬ ‫به‬:‫با‬ ‫کانتراست‬ ‫با‬ ‫رنگی‬ ‫های‬‫پالت‬ ‫از‬ ‫استفاده‬‫ال‬ ۸‫و‬ ‫مردان‬ ‫از‬ ‫درصد‬۰/۵‫دارند‬ ‫کوررنگی‬ ‫زنان‬ ‫از‬ ‫درصد‬.
  43. 43. ‫دو‬‫عکس‬‫چپ‬ ‫سمت‬:‫عادی‬ ‫بینایی‬ ‫با‬ ‫فرد‬ ‫دید‬ ‫راست‬ ‫سمت‬ ‫عکس‬ ‫دو‬:‫بیند‬‫می‬ ‫کوررنگ‬ ‫فرد‬ ‫چه‬‫آن‬ ‫سازی‬‫شبیه‬! ‫نتیجه‬:‫هنگام‬‫قرمز‬ ‫ترکیبات‬ ‫از‬ ‫که‬ ‫شوید‬ ‫مطمهن‬ ،‫خود‬ ‫طراحی‬ ‫برای‬ ‫رنگ‬ ‫انتخاب‬/‫اجتناب‬ ‫سبز‬‫کنید‬.
  44. 44. ‫مختلف‬ ‫های‬‫خواسته‬ ‫و‬ ‫ها‬‫توانایی‬ ‫با‬ ‫افراد‬ ‫برای‬ ‫کار‬ ‫فضای‬ ‫سازی‬‫شخصی‬ ‫امکان‬
  45. 45. ‫نوشتاری‬ ‫فیلدهای‬ ‫ای‬‫لحظه‬ ‫اعتبارسنجی‬ ‫با‬ ‫کاربر‬ ‫اشتباهات‬ ‫کاهش‬
  46. 46. ‫موس‬ ‫از‬ ‫استفاده‬ ‫جایگزینی‬ ‫برای‬ ‫میانبرها‬ ‫دادن‬ ‫قرار‬
  47. 47. ‫گیمیفیکیشن‬ Gamification
  48. 48. ‫گیمیفیکیشن‬ ‫کرد‬ ‫بیشتر‬ ‫چه‬ ‫هر‬ ‫منظور‬ ‫به‬ ‫بازی‬ ‫غیر‬ ‫فرآیند‬ ‫یک‬ ‫در‬ ‫بازی‬ ‫کارگیری‬ ‫به‬‫تعامل‬ ‫ن‬ ‫است‬ ‫خدمت‬ ‫یا‬ ‫محصول‬ ‫یک‬ ‫با‬ ‫کاربر‬. ‫شود‬‫می‬ ‫ایجاد‬ ‫بازی‬ ٔ‫اولیه‬ ‫مکانیزم‬ ‫ده‬ ‫اساس‬ ‫بر‬ ‫گیمیفیکیشن‬.
  49. 49. •‫سریع‬ ‫بازخورد‬:‫به‬ ‫پاسخ‬ ‫یا‬ ‫فوری‬ ‫بازخورد‬‫اقدامات‬ ‫محصول‬ ‫های‬‫پیام‬ ‫به‬ ‫دادن‬ ‫واکنش‬ ‫به‬ ‫کاربر‬ ‫تشویق‬.‫ت‬ ‫و‬ ‫هدف‬ ‫یک‬ ‫به‬ ‫رسیدن‬ ‫برای‬ ‫تبریک‬‫بلیغ‬ ‫بعدی‬ ‫اهداف‬. •‫شفافیت‬:‫کجاست‬ ‫کس‬ ‫هر‬ ‫جایگاه‬ ‫دارند‬ ‫موقعیتی‬ ‫چه‬ ‫شما‬ ‫های‬‫متریک‬ ‫اساس‬ ‫بر‬ ‫دهید‬ ‫نشان‬ ‫کاربران‬ ‫به‬. •‫ها‬‫هدف‬:‫مدت‬ ‫بلند‬ ‫یا‬ ‫کوتاه‬ ‫دهند‬‫می‬ ‫بیشتر‬ ‫تعامل‬ ‫برای‬ ‫انگیزه‬ ‫کاربران‬ ‫به‬ ‫ها‬‫چالش‬ ‫یا‬ ‫ها‬‫ماموریت‬. •‫نشان‬:‫فرآیند‬ ‫یک‬ ‫اتمام‬ ‫تاییدیه‬ ‫ک‬‫می‬ ‫انگیزه‬ ‫ایجاد‬ ‫آن‬ ‫به‬ ‫رسیدن‬ ‫و‬ ‫بود‬ ‫خواهد‬ ‫شده‬ ‫شناخته‬ ‫کاربران‬ ‫جامعه‬ ‫میان‬ ‫در‬ ‫ها‬‫نشان‬‫ند‬.
  50. 50. •‫مرحله‬ ‫افزایش‬:‫جمع‬ ‫میان‬ ‫در‬ ‫من‬ ‫جایگاه‬ ‫افراد‬ ‫سایر‬ ‫میان‬ ‫در‬ ‫جایگاه‬ ‫یا‬ ‫ها‬‫صالحیت‬ ‫دادن‬ ‫نشان‬ ‫برای‬ ‫مدت‬ ‫بلند‬ ‫معموال‬ ‫فرآیند‬ ‫یک‬. •‫گرفتن‬ ‫قرار‬ ‫جریان‬ ‫در‬:‫یادگیری‬ ‫برای‬ ‫کننده‬ ‫قانع‬ ‫و‬ ‫جذاب‬ ‫راهی‬ ‫فرآیند‬ ‫با‬ ‫شدن‬ ‫درگیر‬ ‫و‬ ‫ساده‬ ‫کارهای‬ ‫با‬ ‫شروع‬. •‫رقابت‬:‫است‬ ‫چگونه‬ ‫سایرین‬ ‫با‬ ‫قیاس‬ ‫در‬ ‫من‬ ‫عملکرد‬ ‫رقابت‬ ‫حس‬ ‫افزایش‬ ‫برای‬ ‫یکدیگر‬ ‫به‬ ‫کاربران‬ ‫وضعیت‬ ‫نمایش‬. •‫همکاری‬:‫سایرین‬ ‫با‬ ‫همکاری‬ ‫در‬ ‫کار‬ ‫یک‬ ‫دادن‬ ‫انجام‬ ‫تیمی‬ ‫صورت‬ ‫به‬ ‫بزرگ‬ ‫کارهای‬ ‫دادن‬ ‫انجام‬ ‫برای‬ ‫یکدیگر‬ ‫به‬ ‫کاربران‬ ‫کردن‬ ‫وصل‬.
  51. 51. •‫اجتماع‬:‫موفقیت‬ ‫به‬ ‫دستیابی‬ ‫به‬ ‫برای‬ ‫ای‬‫زمینه‬ ‫بخ‬‫می‬ ‫معنی‬ ‫ها‬‫مکانیسم‬ ‫سایز‬ ‫و‬ ‫رقابت‬ ،‫ها‬‫نشان‬ ‫دریافت‬ ،‫گروهی‬ ‫های‬‫فعالیت‬ ‫به‬ ‫اجتماعی‬‫شد‬. •‫امتیاز‬:‫شده‬ ‫تمام‬ ‫کارهای‬ ‫و‬ ‫توانایی‬ ‫بر‬ ‫شاهدی‬ ‫واقعی‬ ‫یا‬ ‫مجازی‬ ‫صورت‬ ‫به‬ ‫امتیاز‬ ‫صرف‬ ‫توانایی‬ ‫آوردن‬ ‫دست‬ ‫به‬ ‫یا‬ ‫امتیاز‬ ‫افزایش‬.
  52. 52. ‫رقابت‬/‫کردن‬ ‫تکمیل‬
  53. 53. ‫کاربری‬ ‫واسط‬ ‫و‬ ‫تجربه‬ ‫طراحی‬ ‫الگوهای‬ UI/UX Design Patterns
  54. 54. ‫عملی‬ ‫پروژه‬ ‫مسهله‬: ‫فروشی‬ ‫شیرینی‬ ‫از‬ ‫آنالین‬ ‫سفارش‬ ‫برای‬VIP‫کنید‬ ‫طراحی‬ ‫را‬ ‫مناسب‬ ‫ابزار‬. ‫پروژه‬ ‫انجام‬ ‫مراحل‬: •‫کاربر‬ ‫شناخت‬:‫ها‬‫محدودیت‬ ،‫نیازها‬ ،‫ها‬‫توانمندی‬ ،‫عالئق‬ •‫محصول‬ ‫امکانات‬ ‫و‬ ‫ها‬‫ویژگی‬ ‫شناخت‬ •‫رقیبا‬ ‫و‬ ‫مشابه‬ ‫های‬‫نمونه‬ ‫بررسی‬‫ن‬ •‫تنظیم‬‫نامه‬‫طراحی‬(Design Brief) •‫وایرفریم‬ •‫اجرا‬
  55. 55. ‫دوم‬ ‫جلسه‬ ‫پایان‬
  56. 56. ‫آموزش‬ ‫کارگاه‬‫پیشرفته‬ ‫کارب‬ ‫واسط‬ ‫طراحی‬ ‫و‬ ‫کاربری‬ ٔ‫تجربه‬ ‫طراحی‬‫ری‬ ‫سوم‬ ‫جلسه‬/۱۴‫اردیبهشت‬۹۸/‫پناه‬‫محمدی‬ ‫اسماعیل‬
  57. 57. ‫پرسونا‬ Persona
  58. 58. ‫بسازیم‬ ‫را‬ ‫آن‬ ‫چطور‬ ‫و‬ ‫چیست‬ ‫پرسونا‬ ‫دهد‬‫می‬ ‫پاسخ‬ ‫سوال‬ ‫این‬ ‫به‬ ‫پرسونا‬:‫کنیم؟‬‫می‬ ‫دیزاین‬ ‫کسی‬ ‫چه‬ ‫برای‬ ‫محص‬ ‫یک‬ ‫بالقوه‬ ‫مخاطبان‬ ‫اکثریت‬ ‫تواند‬‫می‬ ‫که‬ ‫است‬ ‫خیالی‬ ‫شخصیت‬ ‫چند‬ ‫یا‬ ‫یک‬ ‫پرسونا‬‫یا‬ ‫ول‬ ‫کند‬ ‫نمایندگی‬ ‫را‬ ‫خدمت‬.‫س‬ ‫کمی‬ ‫و‬ ‫کیفی‬ ‫تحقیقات‬ ‫از‬ ‫زیادی‬ ‫مقدار‬ ‫نتیجه‬ ‫در‬ ‫شخصیت‬ ‫این‬‫اخته‬ ‫شود‬‫می‬.
  59. 59. ‫پرسونا‬ ‫انواع‬ ‫بازاریابی‬ ‫پرسونای‬/‫دی‬ ‫پرسونای‬‫زاین‬ ‫محصول‬ ‫یک‬ ‫مشتری‬ ‫معمولی‬ ‫شخصیت‬ ‫دهنده‬ ‫نشان‬ ‫روابط‬ ،‫خرید‬ ‫های‬‫ویژگی‬ ‫در‬ ‫هایی‬‫شباهت‬ ‫با‬ ‫شرکت‬ ‫یا‬ ‫و‬ ‫مصرف‬ ‫الگوی‬ ،‫اجتماعی‬...‫است‬. ‫چگون‬ ‫او‬ ‫مشتریان‬ ‫دهد‬‫می‬ ‫نشان‬ ‫شرکت‬ ‫به‬ ‫پرسونا‬‫ه‬ ‫بود‬ ‫خواهند‬. ،‫محصول‬ ‫نیازهای‬ ،‫استفاده‬ ‫چگونگی‬ ‫دهنده‬ ‫نشان‬ ‫یا‬ ‫محصول‬ ‫یک‬ ‫مشتریان‬ ‫مشابه‬ ‫اهداف‬ ‫و‬ ‫ها‬‫ویژگی‬ ‫است‬ ‫خدمت‬. ‫ک‬‫می‬ ‫بیان‬ ‫را‬ ‫دیزاین‬ ‫بالقوه‬ ‫مخاطبان‬ ‫نیاز‬ ‫پرسونا‬‫و‬ ‫ند‬ ‫خواسته‬ ‫اساس‬ ‫بر‬ ‫محصول‬ ‫توسعه‬ ‫بر‬ ‫تمرکز‬ ‫امکان‬‫های‬ ‫کند‬‫می‬ ‫فراهم‬ ‫را‬ ‫کاربر‬.
  60. 60. ‫به‬ ‫را‬ ‫پرسونا‬ ‫تعداد‬۴‫کنید‬ ‫محدود‬ ‫عدد‬.‫مشترک‬ ‫اهداف‬ ‫روی‬ ‫بر‬ ‫تمرکز‬ ‫امکان‬ ‫این‬ ‫از‬ ‫بیش‬ ‫تعداد‬ ‫کرد‬ ‫خواهد‬ ‫سردرگمی‬ ‫ایجاد‬ ‫خود‬ ‫و‬ ‫دهد‬‫می‬ ‫کاهش‬ ‫را‬ ‫محصول‬ ‫از‬ ‫استفاده‬ ‫در‬ ‫کاربران‬.
  61. 61. ‫پرسونا‬ ‫ساخت‬ ‫مراحل‬ ۱.‫ها‬‫داده‬ ‫دقیق‬ ‫بررسی‬ •‫است‬ ‫شده‬ ‫آوری‬‫جمع‬ ‫مختلف‬ ‫های‬‫روش‬ ‫با‬ ‫کاربران‬ ‫از‬ ‫این‬ ‫از‬ ‫پیش‬ ‫که‬ ‫هایی‬‫داده‬ ‫دقیق‬ ‫بازبینی‬. •‫داده‬ ‫آوری‬‫جمع‬ ‫های‬‫روش‬ ‫بهترین‬ ‫از‬ ‫یکی‬:‫کاربران‬ ‫با‬ ‫مصاحبه‬ •‫آمده‬ ‫دست‬ ‫به‬ ‫مهم‬ ‫های‬‫داده‬ ‫گذاری‬‫نشانه‬:‫کنید‬ ‫مشخص‬ ‫را‬ ‫ها‬‫مشکل‬ ‫یا‬ ‫نیازها‬ ‫ترین‬‫مهم‬. •‫سمت‬ ‫دو‬ ‫هر‬ ‫نیازهای‬ ‫گرفتن‬ ‫نظر‬ ‫در‬:،‫کار‬ ‫و‬ ‫کسب‬ ‫و‬ ‫کاربر‬‫موفق‬ ‫پرسونای‬ ‫یک‬ ‫داشتن‬ ‫برای‬
  62. 62. ‫ندارید‬ ‫حقیقی‬ ‫کاربران‬ ‫تحقیق‬ ‫برای‬ ‫برای‬ ‫بودجه‬ ‫یا‬ ‫وقت‬ ‫اگر‬: •‫کارفرما‬ ‫بینش‬ ‫و‬ ‫اطالعات‬ ‫از‬ ‫استفاده‬/‫کار‬ ‫و‬ ‫کسب‬ ‫نفعان‬‫ذی‬. •‫دارند‬ ‫کار‬ ‫و‬ ‫سر‬ ‫آن‬ ‫با‬ ‫که‬ ‫کاربرانی‬ ‫انواع‬ ‫شناخت‬ ‫و‬ ‫رقیب‬ ‫محصوالت‬ ‫اجتماعی‬ ‫های‬‫شبکه‬ ‫دقیق‬ ‫بررسی‬. •‫خود‬ ‫تصورات‬ ‫اساس‬ ‫بر‬ ‫و‬ ‫اساس‬ ‫و‬ ‫پایه‬ ‫بدون‬ ‫خیالی‬ ‫شخصیت‬ ‫ساخت‬ ‫از‬ ‫اجتناب‬.
  63. 63. ‫پرسونا‬ ‫ساخت‬ ‫مراحل‬ ۲.‫الگوها‬ ‫تعریف‬ •‫اشتراکات‬ ‫یافتن‬ ‫برای‬ ‫شده‬ ‫گذاری‬‫نشان‬ ‫و‬ ‫آوری‬‫جمع‬ ‫های‬‫داده‬ ‫بررسی‬ •‫آمده‬ ‫دست‬ ‫به‬ ‫اشتراکات‬ ‫اساس‬ ‫بر‬ ‫الگوها‬ ‫ساختن‬ ۳.‫پرسونا‬ ‫ساخت‬ •‫پرسونا‬ ‫ساخت‬ ‫برای‬ ‫مهم‬ ‫عناصر‬: ‫عکس‬/‫نام‬/‫شخصیت‬ ‫توصیف‬/‫ها‬‫خواسته‬ ‫و‬ ‫مشکالت‬
  64. 64. ‫پرسونا‬ ‫ساخت‬ ‫مراحل‬ ۴.‫گذاری‬ ‫اشتراک‬ •‫ب‬ ‫اشتراک‬ ‫به‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫صاحبان‬ ‫و‬ ‫دیزان‬ ‫تیم‬ ‫همه‬ ‫با‬ ‫را‬ ‫آن‬ ‫باید‬ ‫پرسونا‬ ‫کارکرد‬ ‫اثربخشی‬ ‫برای‬‫گذارید‬ •‫تیم‬ ‫اعضای‬ ‫همه‬ ‫توسط‬ ‫ها‬‫آن‬ ‫بندی‬‫گروه‬ ‫و‬ ‫مختلف‬ ‫کاربران‬ ‫اصلی‬ ‫مشکالت‬ ‫دقیق‬ ‫شناخت‬ ۵.‫پردازی‬ ‫سناریو‬ •‫م‬ ‫استفاده‬ ‫تان‬‫محصول‬ ‫از‬ ‫چگونه‬ ‫و‬ ‫چرا‬ ‫اید‬‫ساخته‬ ‫که‬ ‫پرسونایی‬ ‫آن‬ ‫در‬ ‫که‬ ‫کنید‬ ‫طراحی‬ ‫سناریوهایی‬‫کند‬‫ی‬. •‫شد‬ ‫خواهد‬ ‫گوناگون‬ ‫نظرات‬‫نقطه‬ ‫از‬ ‫خدمت‬ ‫یا‬ ‫محصول‬ ‫بهتر‬ ‫شناخت‬ ‫باعث‬ ‫مختلف‬ ‫سناریوهای‬.
  65. 65. ‫خوب‬ ‫پرسونای‬ ‫یک‬ ‫های‬‫ویژگی‬ ۱.‫به‬‫کافی‬ ‫اندازه‬‫ها‬‫داده‬‫منعکس‬ ‫را‬ ‫تحقیقات‬ ‫نتایج‬ ‫و‬‫کند‬. ۲.‫وضعیت‬‫فعلی‬‫آین‬ ‫از‬ ‫شما‬ ‫انتظارات‬ ‫نه‬ ‫دهد‬ ‫نشان‬ ‫را‬ ‫کاربران‬‫را‬ ‫ده‬. ۳.‫گرایانه‬ ‫آل‬‫ایده‬ ‫نه‬ ‫باشد‬ ‫واقعی‬. ۴.‫باشد‬ ‫داشته‬ ‫همراه‬ ‫به‬ ‫چالش‬ ‫یک‬ ‫گروه‬ ‫برای‬. ۵.‫به‬‫کمک‬ ‫گروه‬‫تا‬ ‫کند‬‫کاربران‬‫بهتر‬ ‫را‬‫درک‬‫کنند‬.
  66. 66. ‫دید‬ ‫الگوی‬ Eye Pattern
  67. 67. ‫چشم‬ ‫ردگیری‬ Eye tracking ‫چشم‬ ‫ردگیری‬ ‫تکنولوژی‬: ‫حساس‬ ‫بسیار‬ ‫های‬‫دوربین‬ ‫و‬ ‫قرمز‬ ‫مادون‬ ‫نزدیک‬ ‫اشعه‬ near-infrared technology / high-resolution camera ‫چشم‬ ‫ردگیری‬ ‫های‬‫تکنولوژی‬ ‫کارکرد‬ ‫مبنای‬:‫چ‬ ‫مردمک‬ ‫کردن‬ ‫دنبال‬‫شم‬ ‫قرنیه‬ ‫از‬ ‫نور‬ ‫بازتاب‬ ‫تشخیص‬ ‫و‬ ‫آن‬ ‫مرکز‬ ‫یافتن‬ ‫و‬
  68. 68. ‫از‬ ‫استفاده‬ ‫موارد‬ ‫چشم‬ ‫ردگیری‬
  69. 69. ‫تبلیغات‬ ‫و‬ ‫کار‬ ‫و‬ ‫کسب‬ ‫در‬ ‫چشم‬ ‫ردگیری‬ ‫اهمیت‬
  70. 70. ‫الگوی‬F ‫ک‬‫می‬ ‫اسکن‬ ‫را‬ ‫ها‬‫آن‬ ‫بلکه‬ ،‫خواند‬‫نمی‬ ‫را‬ ‫صفحات‬ ‫کاربران‬ ‫چشم‬‫ند‬ •‫سال‬ ‫در‬ ‫پژوهشی‬ ‫در‬ ‫بار‬ ‫اولین‬۲۰۰۶‫شد‬ ‫عنوان‬:‫حرف‬ ‫با‬ ‫مطابق‬ ‫کاربران‬ ‫چشم‬ ‫اسکن‬ ‫الگوی‬F‫است‬. •‫حرف‬ ‫مطابق‬ ‫همواره‬ ‫صفحات‬ ‫اسکن‬F‫دارد‬ ‫وجود‬ ‫نیز‬ ‫دیگری‬ ‫الگوهای‬ ‫و‬ ‫نیست‬. •‫الگوی‬F‫است‬ ‫منفی‬ ‫پدیده‬ ‫یک‬ ‫کاربران‬ ‫و‬ ‫کارها‬ ‫و‬ ‫کسب‬ ‫برای‬. •‫الگوی‬ ‫اساس‬ ‫بر‬ ‫اسکن‬ ‫از‬ ‫تواند‬‫می‬ ‫خوب‬ ‫طراحی‬ ‫یک‬F‫کند‬ ‫جلوگیری‬ ‫کاربر‬ ‫توسط‬.
  71. 71. ‫دید‬ ‫الگوهای‬ ‫سایر‬ •‫ای‬‫الیه‬ ‫کیک‬ ‫الگوی‬(Layer-cake pattern) ‫هم‬ ‫زیر‬ ‫در‬ ‫افقی‬ ‫موازی‬ ‫خطوط‬.‫جزئیات‬ ‫به‬ ‫توجه‬ ‫بدون‬ ‫سرتیترها‬ ‫و‬ ‫عناوین‬ ‫دیدن‬ ‫زمان‬ ‫در‬ ‫مثال‬ •‫الگوی‬‫ای‬‫نقطه‬(Spotted pattern) ‫صفحه‬ ‫مختلف‬ ‫جاهای‬ ‫در‬ ‫نقطه‬ ‫به‬ ‫نقطه‬ ‫نگاه‬.‫میان‬ ‫در‬ ‫خاص‬ ‫چیز‬ ‫یک‬ ‫جستجوی‬ ‫هنگام‬ ‫در‬ ‫مثال‬ ‫محتوا‬.‫یا‬ ‫عدد‬ ،‫لینک‬ ‫مانند‬... •‫الگوی‬‫گذاری‬‫نشانه‬(Marking pattern) ‫دید‬ ‫تعادل‬ ‫حفظ‬ ‫منظور‬ ‫به‬ ‫خاص‬ ‫جای‬ ‫یک‬ ‫روی‬ ‫بر‬ ‫چشم‬ ‫داشتن‬ ‫نگه‬.‫ی‬ ‫موس‬ ‫نشانگر‬ ‫روی‬ ‫مثال‬‫ا‬ ‫موبایل‬ ‫در‬ ‫ها‬‫صفحه‬ ‫دادن‬ ‫حرکت‬ ‫هنگام‬.
  72. 72. ‫دید‬ ‫الگوهای‬ ‫سایر‬ •‫بر‬‫میان‬ ‫الگوی‬(Bypassing pattern) ‫اشتراکات‬ ‫گرفتن‬ ‫نادیده‬.‫پست‬ ‫نوشته‬ ‫سطر‬ ‫چند‬ ‫در‬ ‫یکسان‬ ‫اول‬ ‫حرف‬ ‫گرفتن‬ ‫نادیده‬ ‫مثال‬‫هم‬ ‫سر‬. •‫الگوی‬‫پایبند‬(Commitment pattern) ‫دارد‬ ‫صفحه‬ ‫اجزای‬ ‫تمام‬ ‫روی‬ ‫زیادی‬ ‫تمرکز‬ ‫کاربر‬ ‫وقتی‬.‫بسیا‬ ‫برایش‬ ‫که‬ ‫متنی‬ ‫خواندن‬ ‫مثال‬‫جذاب‬ ‫ر‬ ‫است‬.
  73. 73. ‫الگوی‬ ‫چرا‬F‫دهد‬‫می‬ ‫رخ‬ ‫صورت‬ ‫به‬ ‫را‬ ‫صفحات‬ ‫باشند‬ ‫همراه‬ ‫هم‬ ‫با‬ ‫اتفاق‬ ‫سه‬ ‫این‬ ‫وقتی‬ ‫کاربران‬F‫کنند‬‫می‬ ‫اسکن‬: ۱.‫است‬ ‫نشده‬ ‫بندی‬‫صفحه‬ ‫وب‬ ‫برای‬ ‫که‬ ‫است‬ ‫متنی‬ ‫شامل‬ ‫صفحه‬ ‫وقتی‬.‫س‬ ‫پشت‬ ‫بلند‬ ‫متن‬‫بدون‬ ‫هم‬ ‫ر‬ ‫گذاری‬‫بولت‬ ‫یا‬ ‫شماره‬ ،‫بلد‬ ‫های‬‫بخش‬ ،‫تیتر‬‫میان‬ ۲.‫وقتی‬‫کند‬ ‫صرف‬ ‫بهینه‬ ‫را‬ ‫وقتش‬ ‫خواهد‬‫می‬ ‫کاربر‬. ۳.‫وقتی‬‫ندارد‬ ‫جزئيات‬ ‫تمام‬ ‫دیدن‬ ‫و‬ ‫خواندن‬ ‫برای‬ ‫انگیزه‬ ‫یا‬ ‫تعهد‬ ‫کاربر‬.
  74. 74. ‫الگوی‬ ‫با‬ ‫سازگاری‬ ‫های‬‫راه‬ ‫بهترین‬F •‫دهید‬ ‫قرار‬ ‫صفحه‬ ‫اول‬ ‫پاراگراف‬ ‫دو‬ ‫در‬ ‫را‬ ‫نکات‬ ‫ترین‬‫مهم‬ •‫کنید‬ ‫استفاده‬ ‫مهم‬ ‫عناصر‬ ‫دادن‬ ‫نشان‬ ‫برای‬ ‫تیتر‬‫میان‬ ‫و‬ ‫تیتر‬ ‫از‬. •‫کنید‬ ‫استفاده‬ ‫معنایی‬ ‫بار‬ ‫بیشترین‬ ‫با‬ ‫کلماتی‬ ‫از‬ ‫تیترها‬‫میان‬ ‫و‬ ‫تیترها‬ ‫برای‬( .۱۱‫اول‬ ‫کلمه‬ ‫دو‬ ‫یا‬ ‫کاراکتر‬) •‫جدا‬ ‫محتوا‬ ‫سایر‬ ‫از‬ ‫بصری‬ ‫صورت‬ ‫به‬ ‫را‬ ‫مرتبط‬ ‫محتواهای‬ ‫از‬ ‫کوچکی‬ ‫مقدار‬‫کنید‬. •‫کنید‬ ‫بلد‬ ‫را‬ ‫مهم‬ ‫کلمات‬ ‫و‬ ‫ها‬‫پاراگراف‬.‫بگی‬ ‫نظر‬ ‫در‬ ‫زمینه‬ ‫متن‬ ‫از‬ ‫متفاوت‬ ‫شمایل‬ ‫پیوندها‬ ‫برای‬‫آن‬ ‫و‬ ‫رید‬ ‫کنید‬ ‫متمایز‬ ‫واضح‬ ‫کلمات‬ ‫با‬ ‫را‬:‫مثال‬«‫کنید‬ ‫کلیک‬ ‫اینجا‬». •‫کنید‬ ‫استفاده‬ ‫ها‬‫لیست‬ ‫یا‬ ‫موارد‬ ‫برشماری‬ ‫برای‬ ‫گذاری‬‫بولت‬ ‫یا‬ ‫شماره‬ ‫از‬.
  75. 75. ‫ارگونومی‬ Ergonomics
  76. 76. ‫ارگونومی‬ ‫و‬ ‫انسانی‬ ‫های‬‫اندازه‬ ‫مطابق‬ ‫محصوالت‬ ‫ساخت‬ ‫و‬ ‫دیزاین‬ ‫دانش‬ ‫است‬ ‫او‬ ‫شناختی‬ ‫های‬‫توانایی‬. ‫تب‬ ،‫موبایل‬ ‫مانند‬ ‫الکترونیک‬ ‫های‬‫دیوایس‬ ‫دیزاین‬ ‫در‬ ‫ارگونومی‬ ‫کارگیری‬ ‫به‬ ‫و‬ ‫شناخت‬ ‫اهمیت‬،‫لت‬ ‫و‬ ‫تاپ‬‫لپ‬...‫شود‬‫می‬ ‫مشخص‬ ‫ها‬‫دستگاه‬ ‫این‬ ‫از‬ ‫کاربران‬ ‫استفاده‬ ‫باالی‬ ‫میزان‬ ‫به‬ ‫توجه‬ ‫با‬.
  77. 77. ‫ن‬ ‫خود‬ ‫همراه‬ ‫تلفن‬ ‫به‬ ‫بار‬ ‫چند‬ ‫روز‬ ‫در‬ ‫فرد‬ ‫هر‬ ‫متوسط‬ ‫صورت‬ ‫به‬‫گاه‬ ‫کند؟‬‫می‬ ‫الف‬.۰‫تا‬۲۵ ‫ب‬:۲۶‫تا‬۵۰ ‫ج‬:۵۱‫تا‬۷۵ ‫د‬:۷۶‫تا‬۱۰۰
  78. 78. ۸۵ ‫روز‬ ‫در‬ ‫بار‬
  79. 79. ‫پذیری‬ ‫دسترسی‬/Reachability
  80. 80. ‫گرفتن‬ ‫دست‬ ‫در‬ ‫چگونگی‬/Hand position
  81. 81. ‫خواندن‬ ‫و‬ ‫تعامل‬/Interaction vs reading
  82. 82. ‫رفته‬ ‫دست‬ ‫از‬ ‫های‬‫تپ‬ ‫تعداد‬ ‫برابر‬ ‫در‬ ‫تپ‬ ‫فضای‬ ‫اندازه‬
  83. 83. ‫فیتز‬ ‫قانون‬/Fitts’s Law ‫است‬ ‫هدف‬ ‫آن‬ ‫اندازه‬ ‫و‬ ‫آن‬ ‫تا‬ ‫شما‬ ‫فاصله‬ ‫از‬ ‫تابعی‬ ‫هدف‬ ‫یک‬ ‫به‬ ‫رسیدن‬ ‫برای‬ ‫حرکت‬. ‫خواه‬ ‫بیشتر‬ ‫آن‬ ‫به‬ ‫یابی‬ ‫دست‬ ‫زمان‬ ‫باشد‬ ‫کوچکتر‬ ‫هدف‬ ‫اندازه‬ ‫و‬ ‫بیشتر‬ ‫هدف‬ ‫تا‬ ‫فاصله‬ ‫چقدر‬ ‫هر‬‫بود‬ ‫د‬.
  84. 84. ‫نهایت‬‫بی‬ ‫های‬‫لبه‬ ‫و‬ ‫ها‬‫گوشه‬ ‫عنصری‬ ‫هر‬ ‫از‬ ‫تر‬‫آسان‬ ‫بسیار‬ ‫باشد‬ ‫گرفته‬ ‫قرار‬ ‫مانیتور‬ ‫های‬‫گوشه‬ ‫در‬ ‫که‬ ‫عنصری‬ ‫هر‬ ‫به‬ ‫دستیابی‬‫سایز‬ ‫در‬ ‫است‬ ‫نمایش‬ ‫صفحه‬ ‫نقاط‬.‫نمایشگری‬ ‫هر‬ ‫که‬ ‫است‬ ‫معنی‬ ‫این‬ ‫به‬ ‫این‬۴‫هر‬ ‫که‬ ‫دارد‬ ‫عالی‬ ‫بسیار‬ ‫نقطه‬ ‫یابد‬ ‫دست‬ ‫آن‬ ‫به‬ ‫آسانی‬ ‫به‬ ‫تواند‬‫می‬ ‫کسی‬.‫ویندوز‬ ‫در‬ ‫بستن‬ ‫و‬ ‫استارت‬ ‫دکمه‬ ‫مثال‬ ‫عنوان‬ ‫به‬.
  85. 85. ‫نهایت‬‫بی‬ ‫های‬‫لبه‬ ‫و‬ ‫ها‬‫گوشه‬ ‫داریم‬ ‫را‬ ‫نهایت‬‫بی‬ ‫های‬‫لبه‬ ،‫نهایت‬‫بی‬ ‫های‬‫گوشه‬ ‫جای‬ ‫به‬ ‫همراه‬ ‫های‬‫تلفن‬ ‫در‬.
  86. 86. ‫قرارگیری‬ ‫وضعیت‬/Posture ‫وسی‬ ‫آن‬ ‫از‬ ‫استفاده‬ ‫در‬ ‫کاربر‬ ‫قرارگیری‬ ‫وضعیت‬ ‫به‬ ‫توجه‬ ‫با‬ ‫باید‬ ‫مختلف‬ ‫های‬‫دیوایس‬ ‫برای‬ ‫طراحی‬‫باشد‬ ‫له‬. ‫هستند‬ ‫موارد‬ ‫این‬ ‫از‬ ‫عملگرها‬ ‫و‬ ‫ها‬‫نوشته‬ ،‫ها‬‫المان‬ ‫اندازه‬.
  87. 87. ‫انت‬ ‫که‬ ‫ای‬‫وسیله‬ ‫با‬ ‫کند‬‫می‬ ‫استفاده‬ ‫آن‬ ‫از‬ ‫لمسی‬ ‫صورت‬ ‫به‬ ‫کاربر‬ ‫که‬ ‫ای‬‫وسیله‬ ‫برای‬ ‫طراحی‬ ‫مثال‬‫ها‬‫خاب‬ ‫بود‬ ‫خواهد‬ ‫متفاوت‬ ‫شود‬‫می‬ ‫انجام‬ ‫موس‬ ‫نشانگر‬ ‫وسیله‬ ‫به‬ ‫آن‬ ‫روی‬.
  88. 88. ‫محتوا‬ ‫استراتژی‬ Content Strategy
  89. 89. ‫محتوا‬ ‫استراتژی‬ ‫کارا‬ ‫و‬ ‫مفید‬ ‫محتوای‬ ‫نگهداری‬ ‫و‬ ‫انتشار‬ ،‫ایجاد‬ ‫برای‬ ‫ای‬‫برنامه‬ •‫وی‬ ،‫منتشر‬ ‫درست‬ ‫زمان‬ ‫در‬ ‫محتوا‬ ‫کند‬‫می‬ ‫حاصل‬ ‫اطمینان‬ ‫که‬ ‫است‬ ‫فرآیندی‬ ‫محتوا‬ ‫استراتژی‬،‫رایش‬ ‫است‬ ‫شده‬ ‫بایگانی‬ ‫و‬ ‫مجدد‬ ‫گذاری‬‫هدف‬ ،‫بازنشر‬. •‫مشخص‬ ‫مخاطبان‬ ‫برای‬ ‫یا‬ ‫متفاوت‬ ‫های‬‫زمان‬ ‫در‬ ‫یا‬ ‫مکان‬ ‫چند‬ ‫در‬ ‫که‬ ‫محتواهایی‬ ‫برای‬ ‫ریزی‬‫برنامه‬ ‫گیرد‬‫می‬ ‫جای‬ ‫پروسه‬ ‫این‬ ‫در‬ ‫نیز‬ ‫شوند‬‫می‬ ‫ارائه‬.
  90. 90. The Content Strategy Quad, copyright Brain Traffic ‫گیرد‬‫می‬ ‫قرار‬ ‫گروه‬ ‫دو‬ ‫در‬ ‫معمول‬ ‫صورت‬ ‫به‬ ‫محتوا‬ ‫استراتژی‬: ۱.‫محتوا‬ ‫دیزاین‬ ‫مخاط‬ ‫نیاز‬ ‫مورد‬ ‫محتوای‬ ‫رساندن‬ ‫برای‬ ،‫اسناد‬ ‫و‬ ‫محتوا‬ ‫بردن‬ ‫کار‬ ‫به‬ ٔ‫پروسه‬‫در‬ ،‫ب‬ ‫دارد‬ ‫انتظار‬ ‫که‬ ‫روشی‬ ‫با‬ ‫و‬ ‫دارد‬ ‫نیاز‬ ‫آن‬ ‫به‬ ‫که‬ ‫زمانی‬. •‫برند‬ ‫های‬‫چارچوب‬ ،‫هدف‬ ‫مخاطبان‬ ،‫لحن‬ ‫مانند‬ ‫ویرایشی‬ ‫عناصر‬ •‫محتوا‬ ‫نوع‬ ،‫کاربر‬ ‫نیازهای‬ ،‫مشتری‬ ‫سفر‬ ‫نقشه‬ ‫مانند‬ ‫تجربه‬ ‫عناصر‬ ۲.‫دیزاین‬‫سیستم‬ ‫پروسه‬‫اطالعات‬ ‫ساختار‬ ‫تعریف‬‫های‬‫داده‬ ،‫کاربر‬ ‫تعامل‬ ‫واسط‬ ،‫آن‬ ‫اجزای‬ ، ‫مشخص‬ ‫نیازهای‬ ‫به‬ ‫پاسخگویی‬ ‫منظور‬ ‫به‬ ‫سیستم‬ •‫ب‬‫دسته‬ ‫و‬ ‫گذاری‬‫برچسب‬ ‫چگونگی‬ ،‫محتوا‬ ‫یافتن‬ ‫و‬ ‫جستجو‬ ‫چگونگی‬،‫ندی‬ ‫سازی‬‫شخصی‬ ‫چگونگی‬‫محتوا‬ •‫آن‬ ‫گیری‬‫انداه‬ ‫و‬ ‫مدیریت‬ ،‫محتوا‬ ‫عمر‬ ‫چرخه‬ ‫بررسی‬
  91. 91. ‫کاربری‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ UX Writing ‫محتواهایی‬ ‫نوشتن‬‫در‬ ‫دقیقا‬ ‫که‬‫دارند‬ ‫وجود‬ ‫تماس‬ ‫نقاط‬.‫این‬‫باید‬ ‫نوشته‬‫م‬ ‫کاربر‬ ‫برای‬‫و‬ ‫فید‬ ‫باشد‬ ‫کاربردی‬. ‫یک‬ ‫نقش‬‫نویسنده‬UX‫این‬‫یک‬ ‫گفتاری‬ ‫و‬ ‫کالمی‬ ‫عناصر‬ ‫که‬ ‫است‬‫واسط‬‫کنترل‬ ‫و‬ ‫مدیریت‬ ‫را‬ ‫کاربری‬‫ک‬‫ند‬. ‫اصول‬UX Writing: (Clear)‫واضح‬/(Concise)‫مختصر‬/(Useful)‫مفید‬
  92. 92. •‫حذف‬‫کلمات‬‫تکنیکال‬‫یک‬ ‫جایگذاری‬ ‫و‬‫فهم‬ ‫قابل‬ ‫عبارت‬ ‫مثال‬:‫وی‬ ‫برشمردن‬ ‫جای‬ ‫به‬ ‫است‬ ‫بهتر‬ ‫اپلیکیشن‬ ‫یک‬ ‫معرفی‬ ‫محتوای‬ ‫برای‬‫های‬‫ژگی‬ ‫کنب‬ ‫صحبت‬ ،‫بدهند‬ ‫انجام‬ ‫آن‬ ‫با‬ ‫توانند‬‫می‬ ‫کاربران‬ ‫که‬ ‫کارهایی‬ ‫از‬ ،‫تخصصی‬‫د‬. •‫بودن‬ ‫صریح‬:‫هدایت‬ ‫منظور‬ ‫به‬‫راهنمایی‬ ‫و‬‫کاربران‬ ‫درست‬ ‫کلمات‬‫اولویت‬ ‫در‬ ‫زیبا‬،‫نیستند‬‫که‬ ‫هایی‬‫آن‬‫تر‬‫واضح‬‫بهتری‬ ‫عملکرد‬ ‫هستند‬‫دارند‬. ‫بودن‬ ‫واضح‬
  93. 93. •‫نزدیک‬ ‫معنای‬ ‫به‬ ‫بلکه‬ ،‫است‬ ‫کوتاه‬ ‫معنای‬ ‫به‬ ‫تنها‬ ‫نه‬ ‫مختصر‬‫شدن‬ ‫است‬ ‫مفهوم‬ ‫کارآمدترین‬ ‫به‬. ‫بودن‬ ‫مختصر‬
  94. 94. •‫دار‬ ‫واضح‬ ‫بسیار‬ ‫کارکرد‬ ‫یک‬ ‫نمایش‬ ‫صفحه‬ ‫روی‬ ‫ای‬‫کلمه‬ ‫هر‬ ‫که‬ ‫شویم‬ ‫مطمهن‬ ‫و‬ ‫کنیم‬ ‫نگاه‬ ‫هایمان‬‫پیام‬ ‫به‬‫د‬.‫در‬ ‫نوشتن‬ ‫باال‬ ‫تصویر‬‫کند‬‫می‬ ‫خراب‬ ‫را‬ ‫کار‬ ،‫عنوان‬.
  95. 95. •‫بچینید‬ ‫جمله‬ ‫ابتدای‬ ‫در‬ ‫را‬ ‫مهم‬ ‫کلمات‬.‫دید‬ ‫الگوهای‬ ‫مطابق‬
  96. 96. •‫انتخاب‬«‫دوباره‬‫سعی‬‫کنید‬»‫به‬‫جای‬OK •‫اند‬‫کرده‬ ‫فراموش‬ ‫را‬ ‫رمزشان‬ ‫که‬ ‫افرادی‬ ‫برای‬ ‫راهی‬ ‫گرفتن‬ ‫نظر‬ ‫در‬ ‫بودن‬ ‫کارا‬
  97. 97. ‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬ •‫نشان‬‫شوند‬ ‫گرفته‬ ‫جدی‬ ‫خواهند‬ ‫می‬ ،‫دارند‬ ‫مشکل‬ ‫آنها‬ ‫اگر‬ ‫کاربر‬ ‫وضعیت‬ ‫درک‬ ‫با‬ ‫همدلی‬ ‫دادن‬. We hit problom……ok Oops!…………….not ok •‫اند‬‫کرده‬ ‫اشتباه‬ ‫چرا‬ ‫که‬ ‫نگویید‬ ‫ها‬‫آن‬ ‫به‬ ،‫کنید‬ ‫تشویق‬ ‫درست‬ ‫مسیر‬ ‫در‬ ‫را‬ ‫کاربران‬. Use numbers and letters only…ok You can’t use special characters…not ok •‫دهید‬ ‫ارائه‬ ‫مسهله‬ ‫حل‬ ‫چگونگی‬ ‫مورد‬ ‫در‬ ‫اطالعاتی‬. Use numbers and letters only…ok Incorrect name format…….not ok
  98. 98. ‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬ •‫کاربر‬‫ما‬ ،‫اند‬‫نداده‬ ‫انجام‬ ‫اشتباهی‬ ‫کار‬ ‫هیچ‬ ‫ها‬‫آن‬ ‫نکنید‬ ‫سرزنش‬ ‫را‬‫فقط‬‫ها‬‫آن‬ ‫به‬‫درست‬‫چ‬ ‫که‬ ‫ایم‬‫نداده‬ ‫نشان‬‫گونه‬ ‫دهند‬ ‫انجام‬ ‫درست‬ ‫را‬ ‫کار‬. We didn’t recognize the email address or password…ok Your login details are incorrect……………………..not ok •‫دهد‬ ‫انجام‬ ‫را‬ ‫کارها‬ ‫تا‬ ‫کنید‬ ‫تشویق‬ ‫را‬ ‫کاربر‬ ،‫فعاالنه‬ ‫نوشتن‬ ‫طریق‬ ‫از‬ ،‫بنویسید‬ ‫فعاالنه‬.‫ب‬ ‫فعال‬ ‫نوشتن‬‫معنی‬ ‫این‬ ‫ه‬ ‫کنید‬ ‫هدایت‬ ‫بعد‬ ‫مرحله‬ ‫سمت‬ ‫به‬ ‫را‬ ‫کاربر‬ ‫که‬ ‫است‬. You haven’t added any users yet. Click Add Users to get started……ok No users added……not ok
  99. 99. ‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬ •‫ملموس‬‫کنید‬ ‫استفاده‬ ‫ساده‬ ‫زبان‬ ‫از‬ ،‫بنویسید‬ ‫مستقیم‬ ‫و‬.‫کنی‬ ‫حذف‬ ‫را‬ ‫ضروری‬ ‫غیر‬ ‫لغات‬ ‫امکان‬ ‫صورت‬ ‫در‬‫زیرا‬ ،‫د‬ ‫دهند‬‫می‬ ‫کاهش‬ ‫را‬ ‫خواندن‬ ‫فرایند‬ ‫ها‬‫آن‬. Upload new version…ok Would you like to upload your new version?…. Not ok •‫به‬‫جای‬‫از‬ ‫نوشتار‬‫استفاده‬ ‫اعداد‬‫کنید‬: 2 users added…. Ok Two users added….not ok •‫ب‬ ‫داشته‬ ‫نیاز‬ ‫کاربر‬ ‫و‬ ‫باشید‬ ‫کرده‬ ‫اشاره‬ ‫خاصی‬ ‫سمت‬ ‫یا‬ ‫جهت‬ ‫به‬ ‫که‬ ‫ننویسید‬ ‫طوری‬ ‫را‬ ‫تان‬‫جمله‬ ‫گاه‬ ‫هیچ‬‫که‬ ‫اشد‬ ‫ببیند‬ ‫رو‬ ‫صفحه‬. Drag on to the layout area…ok Drag on to the panel below…not ok
  100. 100. ‫بهتر‬ ‫تجربه‬ ‫برای‬ ‫نوشتن‬ ‫درباره‬ ‫نکاتی‬ •‫خطا‬ ‫پیغام‬:‫کنید‬ ‫فراهم‬ ‫بعدی‬ ‫مراحل‬ ‫برای‬ ‫را‬ ‫اطالعات‬ ‫امکان‬ ‫صورت‬ ‫در‬ ‫و‬ ‫مسهولیت‬ ‫قبول‬ ،‫نکنید‬ ‫عذرخواهی‬.‫د‬‫ر‬ ‫دهید‬ ‫ارائه‬ ‫را‬ ‫خطا‬ ‫جزئیات‬ ‫لزوم‬ ‫صورت‬. We hit a problem getting your search results. Try searching again…ok There was an error loading search results….not ok •‫رسانی‬ ‫روز‬ ‫به‬ ‫های‬‫پیام‬:‫اگر‬ ‫و‬ ،‫افتد‬‫می‬ ‫اتفاقی‬ ‫چه‬ ‫بگویید‬ ‫ها‬‫آن‬ ‫به‬ ‫فقط‬ ‫باشد‬ ‫صبور‬ ‫که‬ ‫نخواهید‬ ‫کاربر‬ ‫از‬‫فوری‬ ‫کشد؟‬‫می‬ ‫طول‬ ‫چقدر‬ ،‫دهید‬ ‫نشان‬ ،‫نیست‬ Update installing… this may take a few minutes…ok Please be patient, installing now…not ok •‫برای‬ ‫لینک‬HELP:‫شود‬‫می‬ ‫کمک‬ ‫کاربر‬ ‫به‬ ‫چیزی‬ ‫چه‬ ‫برای‬ ‫که‬ ‫دهید‬ ‫توضیح‬ ‫کامل‬ ‫گذارید‬‫می‬ ‫لینکی‬ ‫اگر‬. See Setting up high availability systems for more details…ok Click here for more…not ok
  101. 101. ‫کاربری‬ ‫تجربه‬ ‫ریزی‬‫برنامه‬ ‫های‬‫روش‬ UX Mapping Methods
  102. 102. ۴‫کاربری‬ ‫تجربه‬ ‫طراحی‬ ‫برای‬ ‫نمودار‬ ‫نوع‬ •Empathy mapping‫همدلی‬ ‫نقشه‬ •Customer journey mapping‫مشتری‬ ‫سفر‬ ‫نقشه‬ •Experience mapping‫تجربیات‬ ‫نقشه‬ •Service blueprinting‫خدمت‬ ‫بلوپرینت‬
  103. 103. ‫سوم‬ ‫جلسه‬ ‫پایان‬

×