1

2

WEB/APP Design

Data Analyst

UX Writer

DeveloperUI

DesignerUX

DesignerProduct Manager

Product Owner

شما اینجا هستید

3

تجربه

تجربه برند

تجربه مشتری

تجربه کاربر

BX

CX

UX

4

5

UXD

6

:هاایدهانواع

کنیدخلقداریددوستکههستندچیزهاییایده هاازبرخی•

هستندمعنی دارشخصیصورتبهمابرایدیگرایده هایازبعضی•

دارندمعنادیگرانبرایوهستندمشکالتبرایراه حل هاییایده هابرخیو•

ابتدادراستممکنوندارند،شماایبرمعناییهیچکهکنیدمشالکتیدرکصرفزیادیزمانباید

.تاسارزشمندومنحصربفرداکریکUXکهاستدلیلهمینبه.باشدمشلکبرایتاناکراین

ازدیگربرخیبهنسبتتخالقیازماتعریفاما.دهندخرجبهخالقیتروزهربایدUXطراحان

ارائهحلراهوکنیدنمیحلراالکتمشاگر.استتحلیلگرانهبیشتروهنرمندانهکمترطراحان،

.نمیدهیدانجاماکربریتجربهطراحیاکرنمیدهید،

7

UX ک نگرش استقوانین و قواعد نیست ، بلکه ییکسری

یک دید حاکم بر لک پروژه

8

.تیجه آن بهتر خواهد بودتری از فرآیند تولید وارد فرآیند شود، نمراحل ابتداییدر UXهر چه

UXتباهاشکهکنیمثابتمیتوانیمماوباشداشتباهمیتواندکهنوعیاست،طراحیازخاصنوعیک

.اشتباهدیگریبرایودباشصحیحدیگروبسایتیکبرایمیتواندحلراههمینواست

9

UX ICEBERG

10

11

Desirable

Adopted

Accessible

Credible

Findable

Usable

Valuable

یویژگی های یک محصول در حوزه تجربه کاربر

12

ریقسمت کلی تجربه کارب3

13

فرایند

14

.ن بهتر از اطالعات بقیه باشدتااما اکری کنید که اطالعات. نظر شما بهتر از نظر سایرین نیست

15

تحقیقات

16

کسب و کاراهداف

!اهداف را هم راستا کنیدکسب و کار به سود برسد و در عین حال کاربر هم به اهداف خود

!(و نه برعکس. )دسترسی پیدا کند

17

تحلیل رقبا

! کنیدنقاط ضعف و قوت آنها را بررسی

!تاال یا فن آوری اکرآمد محصول اکفی نیسبرای موفقیت یک محصول یا یک خدمت،تنها دیداگه مثبت شما، کیفیت ب

.باید درعین حال شناخت خوبی از مشتریان یا اکربران داشته باشیم

18

کاربر پژوهی

19

انگیزه کاربر از حضور در این صفحه چیست؟•

شوند ؟کاربر تحت تاثیر چه مواردی قرار خواهد گرفت و کدام بخش از احساسات وی بیشتر تحریک می•

کاربر برای دستیابی به هدف مورد نظر خود چه کارهایی باید انجام دهد؟•

در صورت تکرار فرآیندهای ارایه شده، چه عادتی به وجود خواهد آمد؟•

پس از کلیک کردن چه انتظاراتی باید برآورده شود؟•

اند؟شود که تا کنون از آن آگاهی نداشتهآیا به کاربران اطالعاتی ارایه می•

ها مجدد طی خواهند کرد؟ به چه دلیل؟ چندبار؟آیا این مسیری است که آن•

اید یا دیدگاه خودتان را؟شما نیازهای کاربر را مدنظر قرار داده•

شود؟چه پاداشی برای رفتار مناسب ارایه می•

UCD

20

پرسونا

21

22

BODY STORMING

23

BRAIN STORMING

24

FOCUS GROUP

25

درک مدل ذهنی کاربر

26

User Journey

27

USER STORY

28

نقشه همدردی کاربر

29

30

نمونه سایت های تعاملی از نظر بصری

www.antonandirene.com

Smallstudio.com.au

www.bagigia.com

www.thenewmobileworkforce.com

www.awwwards.com

31

گاهویترین فروش

(HEAD) و قسمت باالی صفحه اول( LANDING PAGE) ، صفحه فرود(HOME PAGE) صفحه اصلی وبسایت

!جذاب،ساده و گویا باشید.را جذب میکنندمهمترین بخش وبسایت شما هستند چون به مثابه ویترین مغازه عمل کرده و اکربران

...اکربر با دیدن این صفحات تصمیم به ادامه روند یا انصراف میگیرد

32

گاهقفسه بندی فروش

SEARCH, FILTER, CATEGORIES را هرگز فراموش نکنید !

ربر احساس سردرگمی کرده و این قسمت ها به مثابه راهرو ها و قفسه های فروشاگه هستند، بدون آنها اک

...ار اکربر قرار دهیدآسانترین دسترسی را در صفحه اول در اختی. سایت شما را ترک خواهد کرد

33

کارکردن با محصول

محصول از زوایای متفاوت برای حس خرید واقعی را با عکس های واقعی و باکیفیت و قابلیت مشاهده

ر محصول را ببیند و با درجه استفاده کنید و به اکربر اجازه دهید انواع دیگ360از اسکرول های ! اکربر ایجاد کنید

...آن ها اکر کند

!ن اطالعات جامع، خسته شودتوضیحات اکمل اما با طراحی جذاب قرار دهید اجازه ندهید اکربر درعین گرفت

34

شابهپیشنهاد محصوالت م

با توجه به انتخاب های اکربر گزینه ! یدمانند یک فروشنده ماهر سلیقه اکربر را بشناسید و به آن اهمیت ده

...هوشمند در ارتباط استاجازه دهید اکربرحس کند با یک سیستم. های مشابه را پیشنهاد دهید

35

مقایسه محصول

را به صورت مقایسه ای در یک وقتی اکربر در سر چند راهی انتخاب محصول قرار گرفته تمامی اطالعات

ردرگمی میشوند و اکربران پس از مشاهده تعدادی محصول دچار س.صفحه به وی ارائه دهید

!اینجاست که شما باید هوشمندانه عمل کنید

36

پرداخت

!پروسه پرداخت را تا آنجا که میتوانید ساده طراحی کنید

. ینترنتی استپر کردن فرمهای پر از فیلد برای اکربران خسته کننده ترین بخش خرید ا

.روری بشدت پرهیز کنیدفرم های متفاوت، جذاب و تعاملی طراحی کنید و از گذاشتن فیلدهای غیرض

از اطالعات .ت اصالح و ادامه داشته باشیدخطاهای فرم ها را قبل از تایید و در همان لحظه به اکربر اعالم کنید و قابلی

.قبلی اکربر استفاده کنید37

پایان خرید

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

!یدتعامل را در هیچ مرحله فراموش نکن. خوشرویی از اکربر تشکر کنید

38

ینپشتیبانی آنال

.آن را داشته باشیددر بهترین حالت هم باز مشالکتی وجود دارد اما شما باید آمادگی حل لحظه ای

!نکنیدارید سیستم پشتیبانی راه اندازیتا زمانی که نیروی اکفی برای پاسخگویی به موقع به اکربران را ند

39

د انجام دهد؟کاربر با استفاده از ماوس، انگشت یا قلم چگونه می تواند با رابط ارتباط برقرار کند و چه کارهایی می توان1.

می تواند چه دستورهایی بدهد؟کاربر برای برقراری تعامل با رابط2.

آیا ظاهر رابط به کاربر سرنخی درباره طرز کار آن می دهد؟3.

چه اطالعاتی را در اختیار او قرار می دهید؟پیش از اینکه کاربر عملی را انجام دهد،4.

برای جلوگیری از اشتباه آیا محدودیت یا قیدی تعریف شده است؟5.

آیا اخطارهای خطا راهی را برای تصحیح در پیش پای کاربر قرار می دهد؟6.

گوشه ها به طور هدفمند برای قرار دادن المان های تعاملی استفاده کرده اید؟آیا از لبه ها و 7.

وقتی کاربر یک عملی را انجام می دهد و به پایان می رساند چه بازخوردی می گیرد؟8.

زمان بین انجام عمل توسط کاربر و مشاهده ی پاسخ چقدر است؟9.

المان های رابط دارای سایز و اندازه ی مناسبی هستند؟آیا 10.

آیا از استانداردها پیروی می کنید؟11.

آیا از فرمت های آشنا و معروف استفاده کرده اید؟12.

طراحی تعاملی

40

اشتباهات

تکراریاستفاده از عکس های

اجتماعیقرار ندادن لینک شبکه های

گراعدم طراحی سایت به صورت واکنش

شماپخش صدا هنگام ورود کاربران به وب سایت

آپاستفاده از تبلیغات پاپ

ندارنداستفاده از تیتر و متنی که با هم هماهنگی محتوایی

عدم استفاده از فرم های آنالین

41

آمار و ارقام

...( میلیون نفر در ایران و 30میلیون نفر درآمریکا و 50)درصد جمعیت جهان 15!دچار حداقل یک ناتوانی جسمی هستند

!میلیون نفر ناتوان در دنیا وجود داشت۷۵۰بیش از « اتحادیه دسترس پذیری وب»در زمان تاسیس

(...ونابیناییبینایی،کمرنگی،کور)بیناییناتوانی•

(...وناشوناییشنوایی،کم)شنواییناتوانی•

(...ومعلولیتوایماهیچهمشکالت)حرکتیناتوانی•

(...وفعالیبیشپایین،تمرکزقدرتضعیف،حافظه)ذهنیمشکالت•42

…معلولی وجود ندارهفرد

!کنیدی با اکرتون دیگران رو معلول مشما

43

44

هزینهتاسممکنپذیریدسترساصولرعایت

کننداگنیدبازدامادهد،افزایشدرصددوتایکراطراحی

.دادخواهدافزایشدرصد۲0راسایتوب

45

46

تطابق پذیر

احساس پذیر

قرارنیمتتوضیحیکسمبل ها،یاوتصاویرمثلمتنیغیرمولفه هایهمهبرای

.کندترجمهساده ترزبانبهراانهاتا.بدهید

زیرنویسمثلجایگزینیک(صدایاویدئومثل)دارزمانرسانه هایبرای

.کنیدتنظیم

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

.بشنودوببیندبهتررامحتوا هاکاربرکه

باشدپیش بینیقابلصفحاتظاهروعملکردکهکنیدکاری.

47

عمل پذیر

کنیداجراقابلکلیدصفحهوسیلهبهراعملکرد هاهمه.

هستندرویتقابلفوکوسحالتدارایعملکردیعناصرتمامیکهکنیدحاصلاطمینان.

کنیدارائهکاربرانبهمحتواازاستفادهوخواندنبرایکافیزمان.

بشودخوردیاعصابوتشنجباعثکهنکنیدطراحیجوریرامحتوا.

کنیدارائههستند،کهجاییتعیینومحتواکردنپیداحرکت،درکاربرانبهکمکبرایراه هایی.

کنیدارائهوبصفحهیکبهدسترسیبرایراهیکازبیش.

48

فهم پذیر

کنندپیداانتقالحسیویژگی هایطریقازصرفاًنبایددارمعنیاطالعات.

کنداصالحرااشتباهاتشکهبدهیدراامکاناینکاربربه.

کنیدارائهراصوتیرسانه هایکنترل.

باشدتغییرقابلراحتیبهبایدمتنسایزبندی.

49

تطابق پذیر

کنیدسازیبهینهمختلفمرورگر هایدرنمایشبرایرووب سایت.

باشهدسترسیقابلصفحه خوان هاطریقازوب سایتکهکنیدکاری.

راکمکیآوری هایفنجملهازکاربر،آیندهوفعلیعواملباسازگاریحداکثر

.دهیدارائه

50

تجربیات

جهت استفاده صفحه خوان هاHTMLدر تگ langوجود صفت •

واکنش گرایی و خوانایی در صفحات کوچک•

Tabدسترسی به تمامی سایت از طریق کیبورد و نقش مهم دکمه •

focusتغییر المان ها در حالت •

رنگ پس زمینهو focus outlineکنتراست مناسب بین •

pauseاسالیدر قابل •

عدم استفاده بیش از حد از انیمیشن•

(/https://webaim.org/resources/contrastchecker)کنتراست مناسب بین رنگ نوشته و پس زمینه •

در فرم ها placeholderبجای labelوجود •

با کیبورد popupو modalامکان بسته شدن •

(/https://www.w3.org/TR/WCAG20) استفاده برنامه نویسان از استاندارهای •

51

مقاالت

•https://medium.com/bpxl-craft/a-few-considerations-for-designing-accessible-products-c2764a01f8ac#.cjah8qt4f

•http://colorsafe.co/

•http://www.checkmycolours.com/

•https://blog.prototypr.io/why-designing-accessible-website-benefits-your-company-and-all-its-users-de7f26a12146#.kptag33sm

•https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.1f60l1d6k

•https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/

•http://maya-benari.com/empathy-maker/

•http://www.deque.com/blog/inclusive-design-tips-presenting-information-multiple-ways/

•https://alistapart.com/article/accessibility-whack-a-mole?utm_content=bufferf3e06&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

•https://uxdesign.cc/we-need-to-talk-about-accessibility-on-chatbots-98cf93c54963#.y590cxu5b

•https://developer.apple.com/library/prerelease/content/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html

•https://medium.com/bpxl-craft/ios-accessibility-6e2093386ddd#.b6q3ps2at

•https://developer.apple.com/videos/play/wwdc2016/407/

•http://w3c.github.io/aria-practices/

•http://stevefaulkner.github.io/HTML5accessibility/

52

53

یافت پذیری

اشد دسترسی یا یافتن آسان یک شیء و یا یک داده و هر مقدار این سهولت بیشتر ب

.میباشدمیزان یافت پذیری باالتر

« و کاربردپذیری میباشدیکی از مهمترین مسائل معماری اطالعات یافت پذیری »

54

single page

55

flat structure

56

Index

57

Strict Hierarchy

58

Co-Existing Hierarchies

59

60

Usability

61

usabilityکاربردپذیری

Learnability

آموزش پذیری

Effectiveness

اثربخشی

Memorability

یادآورپذیری

Safety

امنیت

Efficiency

کارآیی

Findability

یافت پذیری

Errors

خطاها

Satisfaction

رضایت بخشی

Utility

امکانات

Heuristic Evaluation

oوضعیت سیستم

o واقعیبین سیستم و دنیای مطابقت

o کاربرو کنترل آزادی

o استانداردهاثبات و

o خطاپیشگیری از

oکمک به تشخیص کاربری، پیشگیری و بازگردانی از خطاها

o یادآوریتشخیص به جای

o استفادهانعطاف پذیری و کارآیی

oطراحی زیبا و مینیال

oراهنما و مستندات

62

63

A/Bتست

64

یریانواع تست کاربردپذ

65

دمات در یک نوع ارزیابی کاربردپذیری است که به صورت کیفی به شکل دهی و بهبود فرآیند طراحی محصول یا خ

طول توسعه کمک می کند، هدف از انجام این نوع آزمون شناسایی و حذف مشکالت کاربردپذیری است

Formative

Summative

ربردپذیری است که با استفاده از معیارها و نتایج به بهبود کاکمی صورت است به یک نوع ارزیابی کاربردپذیری

.کمک می کند

.می آیدبدستکاربرانتست هایوکاربرانسناریوهایپرسناها،براساستحلیل هااین

.شودسنجیدهکاربررضایتوخطامیزانوظایف،انجامزمانمدتشده،تکمیلوظایفنظیرمواردیطریقازمی تواند

تست های کاربردپذیری

66

oEye Tracking

oMouse Tracking

oFirst Click

oTree Testing

oCard Sorting

o5 Second

oSystem Usability Scale

ریدیگر تست های کاربردپذی

67

oEye Tracking

ریدیگر تست های کاربردپذی

68

oEye Tracking

ریدیگر تست های کاربردپذی

69

oMouse Tracking

ریدیگر تست های کاربردپذی

70

ocard sorting

ریدیگر تست های کاربردپذی

71

oTree Testing

ریدیگر تست های کاربردپذی

72

oFirst Click

ریدیگر تست های کاربردپذی

73

o5 Second

74

CrazyEgg

Full Story

MouseFlow

Hotjar

Appsee

معرفی ابزار

ریدیگر تست های کاربردپذی

75

oSystem Usability Scale

آیا مجدد از این محصول استفاده خواهید کرد

استفاده از این محصول آسان است

محصول نیاز به یادگیری برای استفاده از محصول دارند

امکانات این محصول کاربردی است

در این محصول پیچیده استفرآیندها

ریتست کاربردپذی

76

اولویت حل مشکالت کاربردپذیری

با امتیازبندی

!نفر حل کنید5ط با تست توسرا درصد مشالکت اکربردپذیری وب سایت خود 85

77

تجربیات استبصری در تجارت الکترونیک حیاتی محتوای!

8۰ % بازمی مانندبه دلیل خطای فرم ها، از ادامه فرآیند مورد نظر کاربران!

می کنندکاربران به دلیل اطالعات اضافه ای که از آن ها خواسته می شود فرآیند خرید را رها!

داردپشتیبانی شما تاثیر بسزایی بر رضایت کاربران!

مراقب تکنولوژی روز باشید و نگاهی به آینده داشته باشید.

62%میکشنددستجستجوازمدتیازبعدهستندمحصولیخریدبدنبالکهکاربرانیاز!

۵۰%میمانندناتمامآیدمیوجودبهخریدعملیاتطیکهمشکالتییامحصولبودنپذیریافتعدمدلیلبهاینترنتیهایفروشاز!

4۰%نمیگردندبازدیگرمحصولازاستفادهبدتجربهعلتبهکاربراناز!

8۵%بازنمیگردنددیگرومیشوندخارجآنازآن،ضعیفبصریطراحیعلتبهسایتی،ازبازدیداولینازبعدکاربراناز!

میبندندبکارراکاربردپذیریقواعدواصولهاسایتاز%۵۰حدودتنها!78

تجربیات شما

79

مقایسه

80

زودترهرچهآوریجمعازاکربریتجربهدربهبودبزرگترین

میشهناشیاکربردپذیریاطالعات

81

82

wireframe

83

SKETCH

84

جیسنامکانوکلیایدهومفهومسازیپیاده

کاربربرایارزشمندیوفنی

کمبا جزئیات وایرفریم

Low-fidelity wireframes

85

عملکرد•

محتوا•

ساختار•

اجزا

وایرفریم با جزئیات زیاد

High-fidelity wireframes

86

Wire Flow

87

prototype

88

ابزارهای ساخت وایرفریم و پروتوتایپ

89

https://www.uxpin.com/https://wireframe.cc/

https://www.invisionapp.com/https://www.axure.com/https://www.flinto.com/

https://protosketch.uistencils.com/https://play.google.com/store/apps/details?id=air.com.mockups.Mockups&hl=en

http://appery.io/https://framer.com/

https://moqups.com/https://www.hotgloo.com/

http://flairbuilder.com/http://macaw.co/

http://www.concept.ly/https://gomockingbird.com/

https://mockflow.com/https://balsamiq.com/

mockup

90

سلسله مراتب طراحی

91

UX KPI

92

UX KPI

93

Happiness خوشحالی

Engagement درگیرشدن و سرگرم شدن

Adoption پذیرش

Retention حفظ کاربران

Task Success موفقیت

HEART

UX KPI

94

نظر سنجی و امتیازدهی

...(تعداد پست،اشتراک گذاری و ) میزان فعالیت کاربر

نرخ پذیرش ویژگی ها و نسخه جدید محصول

تکرار خرید یا درخواست مجدد سرویس،میزان ریزش و بازگشت

...جستجوی موفق، تکمیل پروفایل، خرید موفق و

HEART

H

E

A

R

T

UX KPI

95

Hands Off

96

oاهداف تجاری و تحلیل رقبا

oپرسنا

oنقشه تجربه

oوایرفریم

oپروتوتایپ

oWire flow

oنتایج آزمون ها

USERX2018

97

تصمیم گیری در طراحی

98

تصمیم گیری در طراحی

99

تصمیم گیری در طراحی

100

طراحی متقاعدکننده

101

طراحی متقاعدکننده

102

نبوغ تجربه کاربری

103

نبوغ تجربه کاربری

104