طراحی تجربه کاربری چیست؟ توضیح ساده طراحی تجربه کاربری، اجزای تشکیل دهنده آن و فرآیند خلق یک تجربه کاربری خوب

1. UX
طزاحـی تجزب کاربــزی
User Experience Design
حٍیذ اب اَلحغ یٌ ضًاد

2. تجزب کاربزی
تجزب کاربزی ؽزح هی د ذّ ک کاربز در سهاى اعتفاد اس یک هحص لَ چ احغاعی دارد.
اپلیکیؾي ه بَایل، بٍ عایت، زًم افشار ر هٍیشی ...
UX = User Experience

3. تجزب کاربزی چیغت؟
تجزب کاربزی هخص ؿَ کاربز اعت طزاح
تجارب کاربزی خ بَ دیذ وً یؽ دَ
تجارب کاربزی در لحظ ایجاد وً یؽ دَ
تجارب کاربزی خ بَ در ه رَد در اختیار داؽتي اعت
تجارب کاربزی بشرگ عاد غّت ذٌ.
ارتباط د طزف یک تجزب کاربزی خ بَ اعت

4. طزاح تجزب کاربزی
خلق یک حظ خ بَ بزای کاربزاى گٌّام اعتفاد اس هحص لَ

5. ظٍیف یک طزاح تجزب کاربزی عاخت هحص لَی :
اعت.

6. چزا تجزب کاربزی؟
UX خ بَ اعتفاد اس تک لٌَ صَی را آعا ىتز هی ک ذٌ
UX خ بَ باعث افشایؼ اعتفاد ها اس تک لٌَ صَی خ اَ ذّ ؽذ
کا ؼّ شّی اّی ت عَع هحص لَ
اعتفاد هجذد هؾتزیاى اس هحص لَ
افشایؼ فز ػٍ هحص لَ
کا ؼّ خطا اّی کاربزی
کا ؼّ شّی اّی پؾتیبا یً هحص لَ

7. عیز تکاهلی تجزب کاربزی
فزدریک یٍ غٌل تیل رَ
پض ؼٍّ در ه رَد تعاهل کارگزاى تا اتشار اّیؾاى )ا لٍیي پض ؼٍّ UX تاریخ(
1900 عال
د 1940
عال 1955
د 1970
ا اٍعط د 1990

8. عیز تکاهلی تجزب کاربزی
عیغتن ت لَیذ ت یَ تَا
ایي عیغتن خط ت لَیذ هحص لَ را تز اعاط راحتی کارک اٌى احتزام ت آى اّ تاس تعزیف کزد
1900 عال
د 1940
عال 1955
د 1970
ا اٍعط د 1990

9. عیز تکاهلی تجزب کاربزی
زٌّی دریف طَ
یًَغ ذٌ کتاب Designing for People
1900 عال
د 1940
عال 1955
د 1970
ا اٍعط د 1990

10. عیز تکاهلی تجزب کاربزی
عصز پیذاػ کاهپی تَز اّی ؽخصی
آسهایؾگا سیزاکظ پارک ت اٌْ پیؾز هثذع در ح سَ هفا یّن طزاحی کاهپی تَز
1900 عال
د 1940
عال 1955
د 1970
ا اٍعط د 1990

11. عیز تکاهلی تجزب کاربزی
د ىٍ رًَهي
هثذع اٍص تجزب کاربزی تزای هج عَ فعالیت اّیی ک تا تیوؼ در اپل ا جًام هی داد
1900 عال
د 1940
عال 1955
د 1970
ا اٍعط د 1990

12. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی

13. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
فزآی ذٌ کاربزپض یٍّ
کاربزپض یٍّ ) User Research )

14. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
کاربزپض یٍّ ) User Research )
هتذ اّی کاربزپض یٍّ
•Eyetracking
• ظًزع جٌی اس طزیق ایویل
• هصاحب •Card Sorting
• گز اّی هتوزکش
• بزرعی جزیاى کلیکی
• تغت A/B
• فیلن بزداری اس فعالیت اّی کاربز
• هصاحب چ زْ ب چ زْ

15. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
هحص لَی ک ایي یٍضگ ی اّ را دارد، یک هحص لَ کاربزدپذیز اعت
کارآیی
اهکا اًت
ایو یٌ
آه سَػ پذیزی
یادآ رٍدپذیزی
کاربزدپشیزی ) Usability )

16. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
هزاحل تغت کاربزدپذیزی
• ا تًخاب کارتزاى وًاییذ • هح لَ کزدى چ ذٌ فعالیت ه تٌخة ت آ ى اّ
• هؾا ذّ فعالیت آ ى اّ
• تحلیل تًایج، آیا کارتزاى ه فَق ه یؽ ذًَ یا خیز؟
کاربزدپشیزی ) Usability )

17. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
کاربزدپشیزی ) Usability )
ابشار اّی ه نْ تغت کاربزدپذیزی
• کاغذ خ دَکار!
• ردیاتی کلیک کارتز (ClickTale, ClickHeat, Clixpy)
• ردیاتی حزکت ؾًا گًز (Simple Mouse Tracking)
• تغت 5 ثا یً (Five Second Test)
• ک تٌزل پایؼ اس را د رٍ (Loop 11, Usabilla)

18. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
الگ اَّی طزاحی رابط کاربزی
طزاحی رابط کاربزی ) User Interface Design )

19. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
UX UI چ تفا تٍی با نّ دار ذً؟
طزاحی رابط کاربزی ) User Interface Design )

20. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
طزاحی رابط کاربزی ) User Interface Design )
ق اَ یًي گؾتالت
قا ىًَ وّج اَری
قا ىًَ ؽبا تّ
قا ىًَ قًط کا یًًَ
قا ىًَ عادگی
قا ىًَ تص یَز سهی قا ىًَ تقارى

21. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
اجشای هعواری اطلاعات
• عاسها ذً یّ عاختار : حً دعت ت ذٌ اطلاعات
• تزچغة س یً : حً وًایؼ اطلاعات
• اً تٍزی : پیوایؼ کارتزاى در هیاى اطلاعات
• جغتج : حً پیذا کزدى اطلاعات ت عَط کارتزاى
هعواری اطلاعات ) Information Architecture )

22. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
هثال اّی اس هعواری اطلاعات
قطع تِ ذٌی اطلاعات
0989123474557 (098) 912 34 74 557
پ جٌ ر ػٍ عاسها ذً یّ اطلاعات
Location | Alphabet | Time | Category | Hierarchy
پذیذ ه قَعیت در ردیف اّ
وًایؼ تذریجی هحت اَ
قا ىًَ Hick’s
هعواری اطلاعات ) Information Architecture )

23. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
5 بعذ تؾکیل د ذٌّ طزاحی تعاهلی
عاخت یک رابط کاربزی بزای اعتفاد ا غًاى اس آى هاؽیي
کلوِ
الواى اّی
تصزی
هحیط
فیشیکی
سهاى
رفتار
طزاحی تعاهلی ) Interaction Design )

24. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
طزاحی تعاهلی ) Interaction Design )
کًاتی بزای طزاحی یک رابط کاربزی تعاهلی
• را اّی ارتثاط هحص لَ تا کارتز را هؾخص ک یٌن )ا گًؾت، ؾًا گًز(
• تزای ا جًام فعالی ت اّ ت کارتزاى عز خً تذ یّن )رگً ا ذًاس اؽیا(
• کا ؼّ خطا اّی راتط کارتزی )اعتفاد اس رگً قزهش تزای فعالیت اّی ه نْ(
• کا ؼّ سهاى پاعخگ یَی عیغتن )افشایؼ عزعت تارگذاری صفحات(
• زّ الواى حزفی تزای گفتي دارد. )الواى اّی ه تْز تشرگتز در اتتذا غّت ذٌ(
• خلق عادگی تزای افشایؼ قذرت یادگیزی )قطع ت ذٌی،(

25. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
اعتزاتضی هحت اَ ) Content Strategy )
پز عٍ ت لَیذ، ا تًؾار هذیزیت هحت اَی کارآهذ
اتشار ا تًؾار هحت اَ چیغت ؟
چ هحذ دٍیت اّیی تزای
ا تًؾار هحت اَ جٍ دَ دارد؟
چ کغی هحت اَ را ت لَیذ گً داری هی ک ذٌ؟
چ ق اَ یًي هحذ دٍیت اّیی
تزای ت لَیذ هحت اَ جٍ دَ دارد؟
چ چیشی را قزار اعت ه تٌؾز ک یٌن؟ چزا؟
چ سها یً تایذ هحت اَ را ت ر سٍرعا یً ک یٌن؟
عاختار هحت اَ ت چ ؽکل اعت ؟

26. اجشای تؾکیل د ذٌّ طزاحی تجزب کاربزی
اعتزاتضی هحت اَ ) Content Strategy )
تفا تٍ اعتزاتضی هحت اَ هعواری اطلاعات
• هعواری اطلاعات
هکاى اطلاعات
• اعتزاتضی هحت اَ
سهاى اطلاعات

27. هغت ذٌ عاسی در طزاحی تجزب کاربزی
• Personas تزعین ؽخصیت کارتزاى ذّف
•Scenarios ؽاهل پزع اًَ ت وّزا تعزیف عولیات اّی عایت تعاهل ایي د •Prototypes وً ا لٍی ای اس طزح عایت
• Experience Maps هغیزی ک کارتز تزای رعیذى ت ا ذّاف هختلف طی ه یک ذٌ
•Sitemaps وًایؼ صفحات تؾکیل د ذٌّ بٍ عایت
•Wireframes وًایؼ عایت ؽوا تز ر یٍ کاغذ

28. فزآی ذٌ طزاحی تجزب کاربزی

29. پایاى
@myvahid حٍیذ اب اَلحغ یٌ ضًاد