UX Experience Design: Processes and Strategy
-
Upload
chi-ux-indonesia -
Category
Internet
-
view
355 -
download
2
description
Transcript of UX Experience Design: Processes and Strategy
![Page 1: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/1.jpg)
Designing for
UX Innovate Program | 2014.02.18
Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]
![Page 2: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/2.jpg)
Functional Spec UI/UX Wireframes Visual
Design
A typical UI-UX Project
This is reasonable, but the process is NOT GOOD enough!
Clients
![Page 3: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/3.jpg)
UX starts with People
![Page 4: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/4.jpg)
UX focuses on having a deep understanding of USERS,
what they need,
what they value,
their abilities,
and also their limitations.
User’s Needs
Business Needs
UX
![Page 5: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/5.jpg)
(Source: Google, 2013)
![Page 6: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/6.jpg)
:: Involving USERS from the beginning &
throughout the design process.
::Designing for Your
Users It is all about making
your design usable.
(Norman on ‘Thoughtful Design’, 2008)
![Page 7: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/7.jpg)
![Page 8: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/8.jpg)
USABILITY is at the heart of the user experience (UX). Poor usability can lead users to abandon sites and it can cost businesses thousands and thousands of dollars.
![Page 9: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/9.jpg)
(Source: www.goodui.org)
![Page 10: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/10.jpg)
Minimalist Design
(Source: onetrapixel, 2013)
![Page 11: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/11.jpg)
Skeuomorphism vs. Flat Design
(Source: Vukovic, 2013)
![Page 12: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/12.jpg)
Typical 404 Error Webpages
![Page 13: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/13.jpg)
User-friendly Error Webpage
![Page 14: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/14.jpg)
User-friendly Error Webpage
![Page 15: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/15.jpg)
![Page 16: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/16.jpg)
A B
(Source: Interaction Design Foundation)
Mapping refers to the relationship between an object, either in the physical or virtual world, and its functions.
UX and Mapping
![Page 17: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/17.jpg)
![Page 18: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/18.jpg)
Top-down support
and implementation
![Page 19: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/19.jpg)
![Page 20: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/20.jpg)
User Research
Design Ethnography on Mobile Application & Social Interactions
© 2014. Interface Design Dept., FCM, MMU
![Page 21: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/21.jpg)
User persona
User Persona & Scenario
© 2014. Interface Design Dept., FCM, MMU
![Page 22: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/22.jpg)
© 2014. Interface Design Dept., FCM, MMU
Focus Group for Future Service Design
![Page 23: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/23.jpg)
© 2014. Interface Design Dept., FCM, MMU
![Page 24: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/24.jpg)
Icon Design Development: Mom-i Case Study
© 2014. Interface Design Dept., FCM, MMU
![Page 25: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/25.jpg)
© 2014. Interface Design Dept., FCM, MMU
Lo-fi Prototyping & Wireframe
![Page 26: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/26.jpg)
Lo-fi Prototyping & Wireframe
© 2014. Interface Design Dept., FCM, MMU
![Page 27: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/27.jpg)
Lo-fi Prototyping & Wireframe
© 2014. Interface Design Dept., FCM, MMU
![Page 28: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/28.jpg)
Lo-fi Prototyping & Wireframe
© 2014. Interface Design Dept., FCM, MMU
![Page 29: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/29.jpg)
© 2014. Interface Design Dept., FCM, MMU
Hi-fi Prototyping
![Page 30: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/30.jpg)
(Extract from http://ewamalaysia.com.my/ (October 2011)
Web UI Prototyping (Before)
![Page 31: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/31.jpg)
© 2014. Interface Design Dept., FCM, MMU
Web UI Prototyping (After): Windows 8
![Page 32: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/32.jpg)
![Page 33: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/33.jpg)
Usability Testing © 2014. Interface Design Dept., FCM, MMU
![Page 34: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/34.jpg)
4.02 4.14 4.16 4.23 4.04
01234567
OverallReaction to
SoftwarePerformance
Screen Terminology& SoftwareFeedback
Learning SoftwareCapabilities
Aver
age
Ratin
g
Categories
Overall User Satisfaction Rating
Rating
User Satisfaction Rating
Overall user satisfaction scores towards ABC Software is 4.11 out of 7.00.
© 2014. Interface Design Dept., FCM, MMU
![Page 35: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/35.jpg)
© 2014. Interface Design Dept., FCM, MMU
Heuristic/Expert Review: UI Issue & Design Recommendations
• quick feedback with limited resources
• 5-6 respondents (1-2 experts and 4-5 novice users)
• uses a simple set of design/UI rules where quick judgement
can be made on the design/system being evaluated
• conducted in-house or anywhere convenient
![Page 36: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/36.jpg)
The UX machine (Source: keepitusable)
![Page 37: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/37.jpg)
![Page 38: UX Experience Design: Processes and Strategy](https://reader033.fdocuments.net/reader033/viewer/2022061103/53f927f68d7f7253318b4b03/html5/thumbnails/38.jpg)
Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]