USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure....
-
Upload
truongnhan -
Category
Documents
-
view
227 -
download
3
Transcript of USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure....
![Page 1: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/1.jpg)
USER EXPERIENCE DESIGN
• Customer journey
• Scenarios
• Use cases
• User stories
UX
![Page 2: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/2.jpg)
![Page 3: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/3.jpg)
UX værktøjskassen
![Page 4: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/4.jpg)
Disciplines
UX designninja
User research practices
Information architecture
Visual design
Interaction design
Editing & curating
Concept development
Design proces management
![Page 5: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/5.jpg)
PERSONAS
![Page 6: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/6.jpg)
DESIGN FOR USERS
needs
experiences
goals
thoughts
context of use
emotions
expectations
![Page 7: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/7.jpg)
CUSTOMER JOURNEY MAP
PERSONA
![Page 8: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/8.jpg)
Oracle . CX Design Bootcamp. http://bit.ly/cxdesign
What is a Customer Journey Map?
cus!tom!er jour!ney map
! visually illustrates customers’ processes, needs, & perceptions throughout their interaction and relationship with an organization
[ Example Journey Maps ] http://bit.ly/QrMfH3
http://bit.ly/NMdWZe http://bit.ly/PAsw6J
![Page 9: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/9.jpg)
SCENARIO
PERSONA
![Page 10: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/10.jpg)
SCENARIOS
Scenarios describe likely goal-driven interactions between types of users (personas) and the system.
• Consists of goals, expectations, motivations, actions and reactions
• Aims to mirror the real context and usage
• Does not yet include system-specific solutions E.g.: “Robert clicks on a green button...”Better : “Robert proceeds to...”
![Page 11: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/11.jpg)
USER CASE
PERSONA
![Page 12: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/12.jpg)
USE CASEA Use Case is "an end to end sequence of interactions between an actor and a system that yields a result of observable value to an actor”.
• Actor does something
• System does something
• Actor does something else
• System does something else
![Page 13: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/13.jpg)
USER STORIES
PERSONA
![Page 14: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/14.jpg)
USER STORIES
Written sequences of actions and events that lead to an outcome
• Good stories are standalone, short and testable
• Bridge between users, designers and developers
• A quick way to process new requirements
“As a <role>, I want to <do what >so that I could <benefit how>.”
![Page 15: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/15.jpg)
USER STORIES• Describes one specific need
• Not too detailed
• Testable
“As an organizer I want to click on various days in calendar
I want to provide several meeting day options.”
![Page 16: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/16.jpg)
NEXT UP:
Prototyping - continued
![Page 17: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/17.jpg)
Prototypes & wire frames
Prototype
Information architecture
Interaction design Graphic design
Purpose: for testing AND for exploring conceptual ideas the designer is putting into the solution!!
![Page 18: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/18.jpg)
Prototypes & wire frames
• Paper prototyping
• Low fidelity prototype
• High fidelity prototype
![Page 19: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/19.jpg)
Paper prototyping• Quick and cheap to produce. • Ease to redesign based on testing and findings
through the process
http://www.pinterest.com/unhaengels/paper-prototyping-ux/
https://www.youtube.com/watch/?v=9wQkLthhHKA
http://www.lynda.com/Web-Interaction-Design-tutorials/Foundations-UX-Prototyping/133349-2.html
![Page 20: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/20.jpg)
Low fidelity prototyping• Created on computer
• simple button links might work
• Get a sense of flow and experience
Tools:
Powerpoint/keynote
Balsamiq Mockups
Axure
![Page 21: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/21.jpg)
High fidelity prototyping• May include real content
• simple button links should work
• Get a sense of experience and aesthetics
• To get client buy-in and support
Tools:
Html
Adobe CS tools (Muse)
axure
Balsamiq mock ups
![Page 22: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/22.jpg)
Paper prototypingNote taker Facilitator “Computer”
![Page 23: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/23.jpg)
Case 1: use your real life project to come up with an app
example: An app with a point system for frequent bus travellers
Paper prototyping
![Page 24: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/24.jpg)
Case 2:
Restaurant wants to put their wine menu on a tablet, so guests can find the right wine that goes with their meal. Create a paper prototype to explore how a user interface could work.
Assignment:
Create together 4-5 screens on paper. (Remember your C.R.A.P learning)
Paper prototyping
![Page 25: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/25.jpg)
Example
![Page 26: USER EXPERIENCE DESIGN UX - WordPress.com · USER EXPERIENCE DESIGN ... Balsamiq Mockups Axure. High fidelity prototyping • May include real content • simple button links should](https://reader031.fdocuments.in/reader031/viewer/2022020412/5acbfe167f8b9a6a678bcece/html5/thumbnails/26.jpg)
Test your paper prototype
2-3 randomly selected groups will test their prototype on a subject!