user experience workshop
DESCRIPTION
Selected chapters from a 2-day workshop we delivered surrounding user experience and "good design" methods. Enjoy!TRANSCRIPT
![Page 1: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/1.jpg)
1
user experience WORKSHOP
![Page 2: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/2.jpg)
2
THE “GOOD DESIGN” WORKSHOP
![Page 3: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/3.jpg)
3
Chapter 1: introduction
![Page 4: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/4.jpg)
4
What exactly is good design?
Write down your answer
![Page 5: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/5.jpg)
5
INTRODUCTIONS
![Page 6: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/6.jpg)
6
DIETER RaMSON GOOD DESIGN
Good design is innovative.1Good design makes a product useful.2Good design is aesthetic.3Good design makes a product understandable.4Good design is unobtrusive.5
Good design is honest.6Good design is long-lasting.7Good design is thorough, down to the last detail.8Good design is environmentally-friendly.9Good design is minimal.10
![Page 7: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/7.jpg)
7
Q What is the difference between good design
and user-centered design?
A
all we need is good design?
![Page 8: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/8.jpg)
8
Ergonomics
The history of ux19
50s
Usability
1980s
User Experience
1990s
iPad
Application
File Edit View Draw Object
New
Open
Close
Application
File Edit View Draw Object
New
Open
Close
![Page 9: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/9.jpg)
9
Function Behavior Emotion
Where to focus?
![Page 10: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/10.jpg)
10
• Users are sophisticated and demanding.
• People expect more than transactions; they want connections.
• The relationship between brands and people is ever-evolving.
why focus on users?
![Page 11: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/11.jpg)
11
Explore current standards and trends in user experience design, the conceptual foundation for these practices,
and how they create a more gratifying experience for the user.
***
***
Goal of the workshop
![Page 12: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/12.jpg)
12
WHYGOOD...AND NOT GREAT?
![Page 13: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/13.jpg)
13
Q Why has current thinking evolved from user-centered
design to user experience design?
A
![Page 14: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/14.jpg)
14
CHAPTER 2: user experience design
![Page 15: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/15.jpg)
15
User ExperienceWhat it is
![Page 16: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/16.jpg)
16
User ExperienceWhat it is Not
![Page 17: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/17.jpg)
17
Step 1: capture • Functionality
• Content
• Design
Step 2: ENGAGE
step 3: CONVERT
![Page 18: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/18.jpg)
18
• If a customers engages with your brand and the reward is clear, they will tune in.
Step 1: capture
Step 2: engage
step 3: convert
![Page 19: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/19.jpg)
19
• UX is successful when it conveys the brand’s purpose, engages the user’s emotion,andinfluencesbehavior.
Step 1: capture
Step 2: engage
step 3: convert
![Page 20: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/20.jpg)
20
user experience: 10 principles
Stay out of people’s way
1Create a hierarchy
that matches people’s needs
2Limit
distractions
3Provide a strong information scent
4Designflows
5
![Page 21: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/21.jpg)
21
Provide context with cues and signposts
6
Use constraints appropriately
7 Makes actions reversible
8
Provide feedback9
Makeagoodfirstimpression10
![Page 22: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/22.jpg)
22
A word on e-commerce sites
• Resultsarequantifiable.
• Designs tend to be results-oriented.
• There is less motivation to innovate.
• It is easy to fall into the trap of focusing only on numbers.
• Traditionally, metrics like page views, bounce rates, and conversion rates are not enough to measure user experience.
![Page 23: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/23.jpg)
23
DO NOT FOCUS ON EXECUTING AN IDEA...
![Page 24: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/24.jpg)
24
FOCUS ONEVOKING A SENSATION AND
DESIGNING AN OUTCOME.
![Page 25: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/25.jpg)
25
![Page 26: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/26.jpg)
26
Chapter 3: a focus on users
![Page 27: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/27.jpg)
27
A SHIFT IN PERSPECTIVE
Let’s think about...
thinking.
![Page 28: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/28.jpg)
28
Theory of “mindtime”how it works
We have thoughts that address the past, present, and future:
PAST: A record of successes and failures, the standard establishedtodefinetruth
PRESENT: Trends, assets, resources. Involves monitoring the environment to make plans to move forward
FUTURE: New possibilities, exploration, adaptation, scanning ahead
![Page 29: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/29.jpg)
29
our application of “mindtime”
• People come to a site with a purpose, rooted in a particular mindset.
• Understanding how the user’s thoughts are oriented (past, present, or future) can help you engage them with a meaningful experience.
• Understanding the user’s mindset is critical to user-centered design.
![Page 30: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/30.jpg)
30
What is a persona?
![Page 31: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/31.jpg)
31
Elements of personas
DEMOGRAPHICS PRIMARY GOALS ROLES
EXPERIENCE ORGANIZATIONAL ATTRIBUTES
MINDSET OR MOTIVATION
![Page 32: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/32.jpg)
32
User experience designparallels to dating
1st impression
engage
relate
connect
close*
branding, visuals
navigation, content
interaction,flow
content
conversion
*or stay on her mind so that she will call/is open to a relationship
![Page 33: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/33.jpg)
33
user experience designPoints to evaluate
Appearance: How does it look?
Interaction: How do I access it?
Information: What is it?
Structure: How is it presented?
Conceptual Model: Does it make sense to me?
Value: Does it matter to me?
![Page 34: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/34.jpg)
34
Activity
1. Identify a persona
2. Define a customer journey
![Page 35: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/35.jpg)
35
Chapter 5: interaction design
![Page 36: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/36.jpg)
36
introduction
AsdefinedbytheInteractionDesignAssociation:
“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world; join the conversation.”
![Page 37: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/37.jpg)
37
The main question
How can we use psychology to create fun, engaging and effective interactions with customers?
![Page 38: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/38.jpg)
38
The activities of interaction design
• Gather&DefineRequirements
• Create Scenarios
• Structure the Framework
• Design the Solutions
• Evaluate
• Refine
![Page 39: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/39.jpg)
39
site maps
• Identify the structure of websites
• Simplicity comes from structure
• GOAL: To help people understand where they can locate content
HOME
SUB TOPIC
SUB TOPIC
SUB TOPIC
SUB TOPIC
![Page 40: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/40.jpg)
40
site map structure types
Linear structure
•No active user intervention possible
•Each item of information built on others
![Page 41: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/41.jpg)
41
Tree structure
site map structure types
Users reach various subsidiary pages from the homepage.
•The branches offer various navigation possibilities
•Logical structure (hierarchical structure)
![Page 42: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/42.jpg)
42
Single frame structure
site map structure types
•Experienced as a single page by users
•No hierarchies
![Page 43: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/43.jpg)
43
Jump-line structure
site map structure types
•Linear screen arrangement
•User can reach any page from the homepage
•Little interactivity
![Page 44: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/44.jpg)
44
task flows
• Take site maps further by identifying the actions that users can take within a section of the site.
• Draw connections to error states.
Sign In
Error Screen Signed In View
YesNo
Did user provide valid credentials?
![Page 45: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/45.jpg)
45
swimlanes
• Alignandintegratetaskflowwithbusinessprocesses, technicalrequirements,andonline/offlinedependencies.
BU
SIN
ESS A
NA
LYST
TASK
FLO
WTECH
NIC
AL
![Page 46: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/46.jpg)
46
wireframes
• Show the layout of an interface screen.
• Describe each element and behavior.
• Focus on layout, labels, and interactions.
• Avoidfinisheddesignelementssuch as color and photos, instead use placeholders for copy and images.
![Page 47: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/47.jpg)
47
interaction design: Prototypes
• Mimic the functionality of a website
• Iterative
• Getting buy-in
• Can be used to evaluate with users
• It is part of a process, not an artifact
![Page 48: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/48.jpg)
48
The tools
• Microsoft Visio
• Balsamiq
• Axure
• OmniGraffle
• Adobe InDesign
• Adobe Illustrator
• Keynote or PowerPoint
![Page 49: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/49.jpg)
49
navigation
Users should always know where they are, where they came from, how to get back, and where to go next.
![Page 50: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/50.jpg)
50
Important questions for navigation
What is the purpose of the site?
What actions can the user perform on the site?
Do they understand how to get there?
Will the user’s goals be met?
![Page 51: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/51.jpg)
51
Navigation design: 10 principles
Let users know where they are
Let users know where they were
Let users know where they are going
Make it easy to get there
Provide the correct navigation options
Stay consistent
Follow web conventions
Do not surprise or mislead the user
Provide users with support and feedback
Give users an “out”
12345
6789
10
![Page 52: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/52.jpg)
52
buttons•Buttons serve the purpose of getting the user to perform an action.
•An effective call to action:
• Draws the user’s attention by being a larger size in comparison to surrounding elements.
• Is positioned prominently on the page.
• Is set apart with ample whitespace.
• Is usually a contrasting color.
• Offers a secondary, alternative action (Sign Up Now or Take A Tour.)
![Page 53: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/53.jpg)
53
buttons
![Page 54: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/54.jpg)
54
tabs
•Buttons that are usually aligned side-by-side horizontally
•Distinguished by the fact that they are connected to a larger container
•Websites started using tabs for navigation purposes (Amazon, 1998)
•Excellentmetaphorsofreal-lifefiletabs
•Improve content organization
•Visually pleasing
![Page 55: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/55.jpg)
55
WHEN TO USE TABS
•Grouping related information
•Information that does not need to be compared or accessed simultaneously
•Terse content
![Page 56: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/56.jpg)
56
TAB GUideLineS
•Tabs must look and behave like tabs.
•Place navigation at the top of the page.
•Only have one row of tabs.
•Always have one of the tabs pre-selected.
•Clearly indicate which tab is currently active
and which tabs are currently inactive.
•The active tab should appear connected to
the content area.
![Page 57: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/57.jpg)
57
TAB GUideLineS
•Consider grouping related tabs.
•Arrange tab labels in an order that makes
sense for your users.
•Use title style capitalization.
•Tab labels should be only one-to-two words
and written in plain language.
•Ensure fast response time.
•Do not use tabs to replace breadcrumbs.
![Page 58: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/58.jpg)
58
forms
•Forms have undergone a similar evolution to shopping carts.
•Originally,eachfieldwasfilledoutmanually.
•Now,thereauto-fillpullsyourinformationfromothersitesand
browser history.
![Page 59: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/59.jpg)
59
a successful form
•Indicates the user’s progress when multiple pages are involved.
•Asks only for information that is necessary (no marketing questions.)
•Keepsthefieldssimple,direct,andeasytoread.
•Confirmsthesubmissionoftheform.
![Page 60: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/60.jpg)
60
errors•Traditionally, errors were pointed out using red text or a dialog box.
•Today, the best error recovery indicators use alternatives to text.
•Consider human-to-human interactions and other types of language that a user
can understand beyond text alone.
![Page 61: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/61.jpg)
61
mobile
• People use their mobile devices to enhance productivity, comfort, and pleasure, everywhere and at anytime
• Mobile applications need to focus on a core utility; content must be relevant in the context that it is being used (on the go.)
• They need to be fast and reliable in order to be valuable in those environments.
![Page 62: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/62.jpg)
62
What percentage of smartphone owners use their devices to check prices in stores?
![Page 63: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/63.jpg)
63
![Page 64: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/64.jpg)
64
“Ifyouhaven’tusedyourmobilephonetoinitiatesomekindoffinancialtransac-tion, then you better get on board because it is quickly becoming the fastest-grow-ingsegmentintheconsumerfinancialworld.AccordingtoIDCFinancialInsights,thenumberofconsumersusingtheirsmartphonestocompleteonlineorofflinetransac-tions has doubled as of May 2012.
About 37 percent of consumers said they plan to compare prices on their mobile de-vices while at brick-and-mortar stores, according to PriceGrabber.com.”
-Bloomberg, July 2012.
![Page 65: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/65.jpg)
65
When planning an app:
What should our app do? Why?
What should our app do differently from its competitors?What should our app do better than its competitors?
![Page 66: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/66.jpg)
66
• Eachuserinteractionshouldreflectthestoryofthebrand.
• Features, visuals, wording, fonts, and animations make a difference.
i. Differentiateii. Represent key functionsiii. Set the pattern of the design language
define ui brand signatures
![Page 67: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/67.jpg)
67
• Users will not wait.
• “Every millisecond counts.” -Google
OPTIMIZE FLOWS AND UI ELEMENTS
![Page 68: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/68.jpg)
68
balance: functionality aesthetics usability performance
![Page 69: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/69.jpg)
69
DO:
Bigger the better
Limited options
DON’T:
Switchfromfingerpadtofingertip
Group targets near each other
touch points
![Page 70: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/70.jpg)
70
“Don’t shrink, rethink.”NOKIA
![Page 71: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/71.jpg)
71
responsive design
• The website responds to you, rather than making you deal with it (by scrolling or magnifying or whatever-else-ing in order to view it comfortably.) -Fast Company
![Page 72: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/72.jpg)
72
![Page 73: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/73.jpg)
73
responsive design
• Codethewebsiteoncebutallowittobeflexibletofitthedevice.
Good news: Bad news:
Coded once Many more wireframes
![Page 74: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/74.jpg)
74
![Page 75: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/75.jpg)
75
Fun THeory VIdeos
![Page 76: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/76.jpg)
76
REASON OR EMOTION ?
![Page 77: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/77.jpg)
77
You can’t make decisions without EMOTionsSaver and Damasio (1991)
![Page 78: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/78.jpg)
78
CAN DO WILL DO
![Page 79: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/79.jpg)
79
![Page 80: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/80.jpg)
80
excitement
![Page 81: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/81.jpg)
81
social
![Page 82: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/82.jpg)
82
love
![Page 83: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/83.jpg)
83
effort
![Page 84: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/84.jpg)
84
why did you join facebook?
![Page 85: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/85.jpg)
85
![Page 86: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/86.jpg)
86
PERSUASIVE design
There are seven main methods in the persuasive design “arsenal”:
1 Reciprocation - “I like to return favors.”
2 Commitment - “I like to do what I say.”
3 Social Proof - “I go with the flow.”
4 Authority - “I’m more likely to act on information if it’s told by an expert.”
5 Scarcity - “If it’s running out, I want it.”
6 Framing - “I’m influenced by the way prices are framed.”
7 Salience - “I care about what’s relevant to me right now.”
![Page 87: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/87.jpg)
87
The evolution of the shoppinG cart
• Theuserflowfromproductpagetoorder submission has evolved over time.
• Originally, it was a long process:
Add to Cart > Checkout > Register/Sign In >
Enter Billing/Shipping Info > Submit Order
• Today, there is 1-Click Checkout, paying through PayPal, having one shopping cart from multiple stores (or sellers, like on eBay.)
![Page 88: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/88.jpg)
88
• Theonlineshoppingcartismoreflexiblethanitsphysicalcounterpart.
• Improvements come about from thinking outside the box.
today’s shopping cart
THINK OUTSIDE THE BOX
![Page 89: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/89.jpg)
89
successful shopping cart traits
•Welcomes users by name.
•Points out that an item has been added (immediate feedback.)
•Links back to the original product.
•Gives users the option to keep shopping and brings users back to the
same place on the page.
•Estimates the total cost (plus shipping and discounts based on zipcode.)
•Allows for easy quantity edits/removal.
![Page 90: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/90.jpg)
90
successful shopping cart traits
•Saves items in cart across multiple sessions and windows.
•Saves items in cart for adequate time periods.
•Allows people to buy without registering.
•Allows to save for later.
•Can put on waitlist if out of stock.
•Gete-mailnotificationorauto-purchaseifoutofstock.
![Page 91: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/91.jpg)
91
CHECKOUT PROCESS
• Doesnothavesub-pagesorflows(e.g.,referredshippingaddress,createan
account.) It is a linear process.
• Provides the opportunity to gift wrap or include a personal message.
• Moves forward to the next step.
• Visualizes journey/show progress.
• Steers clear of ambiguous language such as back, next, proceed (e.g.,continue
could mean “continue shopping” or “continue checkout” depending on state of
mind of shopper.)
![Page 92: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/92.jpg)
92
BROWSING
![Page 93: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/93.jpg)
93
Outfit Builders
![Page 94: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/94.jpg)
94
![Page 95: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/95.jpg)
95
Multiple Views
![Page 96: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/96.jpg)
96
what are GREAT INTERACTIONS IN E-COMMERCE?
![Page 97: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/97.jpg)
97
LIVE FEEDS
![Page 98: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/98.jpg)
98
![Page 99: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/99.jpg)
99
SHOPPABLE MEDIA
![Page 100: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/100.jpg)
100
![Page 101: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/101.jpg)
101
EXPERTS’ PICKS
![Page 102: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/102.jpg)
102
DIRECT CONTacT
![Page 103: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/103.jpg)
103
CUSTOMIZED EXPERIENCES
![Page 104: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/104.jpg)
104
Q What is the difference between navigation and
information architecture?
A
pop quiz
![Page 105: User Experience Workshop](https://reader033.vdocuments.mx/reader033/viewer/2022042714/55522773b4c90520548b5277/html5/thumbnails/105.jpg)
105
CLOSING