@usertesting @michaelmace @usertesting @michaelmace - - PowerPoint PPT Presentation

▶
usertesting michaelmace usertesting michaelmace
SMART_READER_LITE
LIVE PREVIEW

@usertesting @michaelmace @usertesting @michaelmace - - PowerPoint PPT Presentation

Dec 22, 2023 176 likes •743 views

@usertesting @michaelmace @usertesting @michaelmace UserTesting.com The fastest way to get feedback Methodology: Analyzed thousands of real- world user tests of mobile apps and websites to identify common problems and their root

slide-1
SLIDE 1

@usertesting @michaelmace @usertesting @michaelmace

slide-2
SLIDE 2

@usertesting @michaelmace

UserTesting.com

  • The fastest way to get feedback
  • Methodology: Analyzed thousands of real-

world user tests of mobile apps and websites to identify common problems and their root causes

@usertesting @michaelmace

slide-3
SLIDE 3

@usertesting @michaelmace

About Me

  • Ten years at Apple, six years at Palm/

PalmSource

  • Founded two startups
  • Blog: http://mobileopportunity.blogspot.com

@usertesting @michaelmace

slide-4
SLIDE 4

@usertesting @michaelmace

Summary

  • New computing paradigms usually cripple

the current leaders

  • Four mobile traps
  • Mobile requires new reflexes
  • Ten steps to success

@usertesting @michaelmace

slide-5
SLIDE 5

@usertesting @michaelmace

Agenda

  • Why transitions are dangerous
  • The four traps
  • How to avoid the traps
  • Why transitions are dangerous

@usertesting @michaelmace

slide-6
SLIDE 6

@usertesting @michaelmace @usertesting @michaelmace

slide-7
SLIDE 7

@usertesting @michaelmace

Leading applications

@usertesting @michaelmace

slide-8
SLIDE 8

@usertesting @michaelmace

Leading applications

@usertesting @michaelmace

slide-9
SLIDE 9

@usertesting @michaelmace

Leading vendors

@usertesting @michaelmace

slide-10
SLIDE 10

@usertesting @michaelmace

Leading vendors

@usertesting @michaelmace

slide-11
SLIDE 11

@usertesting @michaelmace

slide-12
SLIDE 12

@usertesting @michaelmace

Why?

  • Users reconsider commitments

@usertesting @michaelmace

slide-13
SLIDE 13

@usertesting @michaelmace

Why?

  • Rules of good product design

change

@usertesting @michaelmace

slide-14
SLIDE 14

@usertesting @michaelmace

Why?

  • Leaders usually underestimate

the challenge

@usertesting @michaelmace

slide-15
SLIDE 15

@usertesting @michaelmace

Agenda

  • Why transitions are dangerous
  • The four traps
  • 1. Legacy
  • How to avoid the traps

@usertesting @michaelmace

slide-16
SLIDE 16

@usertesting @michaelmace

Legacy

  • “Porting” your app or website to mobile
  • Usage flow driven by computer version
  • Too many or too few features
  • Broken features

@usertesting @michaelmace

slide-17
SLIDE 17

@usertesting @michaelmace

PC Education Site

@usertesting @michaelmace

slide-18
SLIDE 18

@usertesting @michaelmace

PC Education Site

@usertesting @michaelmace

slide-19
SLIDE 19

@usertesting @michaelmace

slide-20
SLIDE 20

@usertesting @michaelmace

Rethink, Don’t Port

  • Learn the mobile paradigm
  • 1. Best practice: Mobile teams
  • 2. Minimum necessary: Dedicated mobile

product manager

  • Separate what you do from how you do it
  • 1. Windows Mobile vs. Windows Phone
  • Break down your app
  • 1. What do they need when mobile?
  • 2. Multiple apps?
  • Focus on the mainstream 80%

@usertesting @michaelmace

slide-21
SLIDE 21

@usertesting @michaelmace

Agenda

  • Why transitions are dangerous
  • The four traps
  • 1. Legacy
  • 2. Fear
  • How to avoid the traps

@usertesting @michaelmace

slide-22
SLIDE 22

@usertesting @michaelmace

Smartphone Fears

  • Hackers
  • 1. Handset company, OS vendor,

carrier, app developer

@usertesting @michaelmace

slide-23
SLIDE 23

@usertesting @michaelmace

Smartphone Fears

  • Hackers
  • 1. Handset company, OS vendor,

carrier, app developer

  • Accidentally opting in

@usertesting @michaelmace

slide-24
SLIDE 24

@usertesting @michaelmace

Smartphone Fears

  • Hackers
  • 1. Handset company, OS vender,

carrier, app developer

  • Accidentally opting in
  • Automatic social posts

@usertesting @michaelmace

slide-25
SLIDE 25

@usertesting @michaelmace

We All Pay

@usertesting @michaelmace

slide-26
SLIDE 26

@usertesting @michaelmace

Quotes

  • “I’m not going to like or

dislike.”

  • “As soon as I’m done with

this test I’m going to be checking on Facebook to see what kind of posting it did.”

  • “What are ‘social choices’?

Are those apps I have to use with other people, or apps my friends shared with me?”

Greg Nudelman, Android Design Patterns

@usertesting @michaelmace

slide-27
SLIDE 27

@usertesting @michaelmace

Securing Personal Information

slide-28
SLIDE 28

@usertesting @michaelmace

What to Do

  • Use trustmarks
  • Display the opt-ins
  • Give absolute social clarity

@usertesting @michaelmace

slide-29
SLIDE 29

@usertesting @michaelmace

Doing Notification Right

  • Any.DO Facebook login

@usertesting @michaelmace

slide-30
SLIDE 30

@usertesting @michaelmace

Agenda

  • Why transitions are dangerous
  • The four traps
  • 1. Legacy
  • 2. Fear
  • 3. Confusion
  • How to avoid the traps

@usertesting @michaelmace

slide-31
SLIDE 31

@usertesting @michaelmace

Sources of Confusion

  • Unreadable elements
  • 1. Too small

@usertesting @michaelmace

slide-32
SLIDE 32

@usertesting @michaelmace

  • Unreadable elements
  • 1. Too small
  • 2. Low contrast: Sunlight, saving batteries

This text may disappear in direct sunlight This text may disappear in direct sunlight

Sources of Confusion

@usertesting @michaelmace

slide-33
SLIDE 33

@usertesting @michaelmace

  • Unreadable elements
  • 1. Too small
  • 2. Low contrast: Sunlight, saving batteries

This text may disappear in direct sunlight This text may disappear in direct sunlight

Sources of Confusion

@usertesting @michaelmace

slide-34
SLIDE 34

@usertesting @michaelmace

Sources of Confusion

  • Unreadable elements
  • 1. To small
  • 2. Low contrast: Sunlight, saving batteries
  • Unusable elements

@usertesting @michaelmace

slide-35
SLIDE 35

@usertesting @michaelmace

Sources of Confusion

  • Unreadable elements
  • 1. To small
  • 2. Low contrast: Sunlight, saving batteries
  • Unusable elements

@usertesting @michaelmace

slide-36
SLIDE 36

@usertesting @michaelmace

Sources of Confusion 2

  • Cryptic buttons and text
  • Slow response
  • Lack of help
  • Unintuitive success path
  • 1. “What am I supposed to do?”
  • Beauty vs. productivity

@usertesting @michaelmace

slide-37
SLIDE 37

@usertesting @michaelmace

Confusing Terms & Buttons

slide-38
SLIDE 38

@usertesting @michaelmace

Icon Confusion

@usertesting @michaelmace

slide-39
SLIDE 39

@usertesting @michaelmace

Bad News

  • Where there is no standard,

Icons are just pretty pictures

  • Gestures and swipes too

@usertesting @michaelmace

slide-40
SLIDE 40

@usertesting @michaelmace

Unresponsive

slide-41
SLIDE 41

@usertesting @michaelmace

What to Do

  • Functionality is the highest form of beauty
  • Avoid confusing UI
  • 1. When in doubt, use text
  • 2. Avoid multilevel menus
  • Respond instantly
  • 1. Button and window animation mask

delays

  • Great help
  • 1. Context sensitive, searchable, always

available

@usertesting @michaelmace

slide-42
SLIDE 42

@usertesting @michaelmace

Help Done Right: WebMD

@usertesting @michaelmace

slide-43
SLIDE 43

@usertesting @michaelmace

Help Done Right: Snapseed

@usertesting @michaelmace

slide-44
SLIDE 44

@usertesting @michaelmace

Agenda

  • Why transitions are dangerous
  • The four traps
  • 1. Legacy
  • 2. Fear
  • 3. Confusion
  • 4. Boredom
  • How to avoid the traps

@usertesting @michaelmace

slide-45
SLIDE 45

@usertesting @michaelmace

Mobile = Short Attention Span Theatre

@usertesting @michaelmace

slide-46
SLIDE 46

@usertesting @michaelmace

Top Turnoffs

  • What’s the point?
  • Too hard to learn
  • Too many social prompts
  • Too many or too few controls
  • B-o-r-i-n-g

@usertesting @michaelmace

slide-47
SLIDE 47

@usertesting @michaelmace

Tone of Voice

slide-48
SLIDE 48

@usertesting @michaelmace

Web App Design

Ship an embarrassingly primitive version Where do we lose people? Guess why Build a fix

@usertesting @michaelmace

slide-49
SLIDE 49

@usertesting @michaelmace

Web App Design

Ship a slightly less embarrassing version Where do we lose people? Guess why Build a fix

@usertesting @michaelmace

slide-50
SLIDE 50

@usertesting @michaelmace

Mobile App Design

Ship an embarrassingly primitive version Get trashed in the App Store Desperately try to fix it “Mobile isn’t a good match for our business”

@usertesting @michaelmace

slide-51
SLIDE 51

@usertesting @michaelmace

What to Do

  • Don’t test only for usability, test for

emotional engagement

  • 1. Quantitative and qualitative research
  • Test before you ship

@usertesting @michaelmace

slide-52
SLIDE 52

@usertesting @michaelmace

Agenda

  • Why transitions are dangerous
  • The four traps
  • 1. Legacy
  • 2. Fear
  • 3. Confusion
  • 4. Boredom
  • How to avoid the traps

@usertesting @michaelmace

slide-53
SLIDE 53

@usertesting @michaelmace

How to Integrate User Tests

  • Three-screen user testing

(smartphone, tablet, computer)

  • Apps turned every week

@usertesting @michaelmace

slide-54
SLIDE 54

@usertesting @michaelmace

Rethink, Don’t Port

  • 1. Rethink for mobile
  • 2. Design for the mainstream
  • 3. When in doubt, use text
  • 4. Avoid multilevel menus
  • 5. Make it work, then make it pretty
  • 6. Respond instantly
  • 7. Give superb help
  • 8. Show them that they’re safe
  • 9. Avoid social anxiety
  • 10. Test early, test often

@usertesting @michaelmace

slide-55
SLIDE 55

@usertesting @michaelmace

  • For a free test:

http://bit.ly/MobileTrapSurvey

  • Download the whitepaper:

http://info.usertesting.com/ TheFourMobileTraps.html

  • mike@usertesting.com

@usertesting @michaelmace