User Experience Workshop

1

user experience WORKSHOP

2

THE “GOOD DESIGN” WORKSHOP

3

Chapter 1: introduction

4

What exactly is good design?

Write down your answer

5

INTRODUCTIONS

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

7

Q What is the difference between good design

and user-centered design?

A

all we need is good design?

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

9

Function Behavior Emotion

Where to focus?

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?

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

12

WHYGOOD...AND NOT GREAT?

13

Q Why has current thinking evolved from user-centered

design to user experience design?

A

14

CHAPTER 2: user experience design

15

User ExperienceWhat it is

16

User ExperienceWhat it is Not

17

Step 1: capture • Functionality

• Content

• Design

Step 2: ENGAGE

step 3: CONVERT

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

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

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

21

Provide context with cues and signposts

6

Use constraints appropriately

7 Makes actions reversible

8

Provide feedback9

Makeagoodfirstimpression10

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.

23

DO NOT FOCUS ON EXECUTING AN IDEA...

24

FOCUS ONEVOKING A SENSATION AND

DESIGNING AN OUTCOME.

25

26

Chapter 3: a focus on users

27

A SHIFT IN PERSPECTIVE

Let’s think about...

thinking.

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

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.

30

What is a persona?

31

Elements of personas

DEMOGRAPHICS PRIMARY GOALS ROLES

EXPERIENCE ORGANIZATIONAL ATTRIBUTES

MINDSET OR MOTIVATION

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

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?

34

Activity

1. Identify a persona

2. Define a customer journey

35

Chapter 5: interaction design

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.”

37

The main question

How can we use psychology to create fun, engaging and effective interactions with customers?

38

The activities of interaction design

• Gather&DefineRequirements

• Create Scenarios

• Structure the Framework

• Design the Solutions

• Evaluate

• Refine

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

40

site map structure types

Linear structure

•No active user intervention possible

•Each item of information built on others

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)

42

Single frame structure

site map structure types

•Experienced as a single page by users

•No hierarchies

43

Jump-line structure

site map structure types

•Linear screen arrangement

•User can reach any page from the homepage

•Little interactivity

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?

45

swimlanes

• Alignandintegratetaskflowwithbusinessprocesses, technicalrequirements,andonline/offlinedependencies.

BU

SIN

ESS A

NA

LYST

TASK

FLO

WTECH

NIC

AL

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.

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

48

The tools

• Microsoft Visio

• Balsamiq

• Axure

• OmniGraffle

• Adobe InDesign

• Adobe Illustrator

• Keynote or PowerPoint

49

navigation

Users should always know where they are, where they came from, how to get back, and where to go next.

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?

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

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.)

53

buttons

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

55

WHEN TO USE TABS

•Grouping related information

•Information that does not need to be compared or accessed simultaneously

•Terse content

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.

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.

58

forms

•Forms have undergone a similar evolution to shopping carts.

•Originally,eachfieldwasfilledoutmanually.

•Now,thereauto-fillpullsyourinformationfromothersitesand

browser history.

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.

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.

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.

62

What percentage of smartphone owners use their devices to check prices in stores?

63

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.

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?

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

67

• Users will not wait.

• “Every millisecond counts.” -Google

OPTIMIZE FLOWS AND UI ELEMENTS

68

balance: functionality aesthetics usability performance

69

DO:

Bigger the better

Limited options

DON’T:

Switchfromfingerpadtofingertip

Group targets near each other

touch points

70

“Don’t shrink, rethink.”NOKIA

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

72

73

responsive design

• Codethewebsiteoncebutallowittobeflexibletofitthedevice.

Good news: Bad news:

Coded once Many more wireframes

74

75

Fun THeory VIdeos

76

REASON OR EMOTION ?

77

You can’t make decisions without EMOTionsSaver and Damasio (1991)

78

CAN DO WILL DO

79

80

excitement

81

social

82

love

83

effort

84

why did you join facebook?

85

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.”

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.)

88

• Theonlineshoppingcartismoreflexiblethanitsphysicalcounterpart.

• Improvements come about from thinking outside the box.

today’s shopping cart

THINK OUTSIDE THE BOX

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.

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.

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.)

92

BROWSING

93

Outfit Builders

94

95

Multiple Views

96

what are GREAT INTERACTIONS IN E-COMMERCE?

97

LIVE FEEDS

98

99

SHOPPABLE MEDIA

100

101

EXPERTS’ PICKS

102

DIRECT CONTacT

103

CUSTOMIZED EXPERIENCES

104

Q What is the difference between navigation and

information architecture?

A

pop quiz

105

CLOSING