MOBILE INTERACTION DESIGN

Transcription

1 MOBILE COMPUTING HUGO NICOLAU MOBILE INTERACTION DESIGN

2 TODAY Mobile interaction design Challenges Design for mobile experiences Implementing: Android and others Top-level research

3 MATRYOSKA DOLL

4 01 WHY MOBILE INTERACTION DESIGN?

5 MOBILE DEVICES ARE GREAT!

6 POWERFUL TOOLS

7 PRODUCTIVITY

8 LEISURE

9 NEWS

10 SHOPPING

11 TRANSPORTATION

12 WORLD IN OUR HANDS

13 MOBILE INTERACTION DESIGN Human-Computer Interaction How people use devices On-the-go (mobile) interaction Devices we carry

14 WHY DO I NEED TO CARE?

15 MOBILE APP INDUSTRY $77 BILLION

16 02 GOALS FOR TODAY

17 CHALLENGES

18 DESIGN FOR MOBILE EXPERIENCES

19 PROTOTYPING

20 ANDROID USER INTERFACES

21 GOALS Challenges of Mobile Interaction Interaction Design Principles Prototyping Implementing Android User Interfaces

22 03 CHALLENGES OF MOBILE DESIGN

23 MOBILITY IS KEY!

24 SPLIT-ATTENTION

25 LIMITED INTERACTION TIME

26 POST-WIMP

27 TOUCH INPUT Content in the UI Direct manipulation Gestures Feedback

28 FAT-FINGER PROBLEM

29 HAND-HELD USAGE

30 THUMB-INTERACTION

31 SMALL SCREENS

32 SMALL SCRENS But I have lots to fit on the screen!

33 MINIATURIZATION

34 MINIATURIZATION - NOT!

35 SIMPLIFICATION THROUGH PRIORITIZATION Mobile forces simplification Decide which actions are important

36 04 INTERACTION DESIGN PRINCIPLES

37 INTERACTION DESIGN PRINCIPLES 1. Learnability 2. Visibility 3. Memorability 4. Efficiency 5. Mapping 6. Control 7. Consistency 8. Simplicity 9. Error Prevention and Recovery 10. Satisfaction

38 LEARNABILITY Easy boarding experience Functionality limited to what is needed to achieve goal

39 VISIBILITY Important information should be the most visible Appropriate and realtime feedback

40 VISIBILITY Important information should be the most visible Appropriate and realtime feedback

41 MEMORABILITY Easy to use each time user interacts with it

42 EFFICIENCY Number of steps to complete a task Time taken to perform a task

43 MAPPING Real-world conventions Result of an action is expected

44 USER CONTROL User always in the control and not the other way around

45 CONSISTENCY Similar items, look and act alike UI standards

46 SIMPLICITY Avoid unnecessary functionality Usual tasks should be easy Less common tasks should be possible

47 ERROR PREVENTION AND RECOVERY Aim to prevent errors Be explicit Use plain language Indicate problem Suggest a solution

48 SATISFACTION How much the user enjoys or dislikes software

49 05 PROTOTYPING TOOLS

50 PROTOTYPING MATTERS Think before you act!

51 PROTOTYPING MATTERS Define problem and solution Ideation

52 SHARE AND ITERATE Communication and collaboration tool Review, review, review

53 PROCESS Exploratory Refinement

54 LESS IS MORE

55 WIREFRAMES - UI FLOWS Define key screens How do they work together?

56 WIREFRAMES UI FLOWS Forces you to think about: 1. Goals 2. Concepts 3. Screens 4. UI Elements 5. Navigation

57 RESOURCES Sketching templates: oard.pdf

58 RESOURCES Prototyping Tools: JustInMind, Balsamiq, NinjaMockup,

59 06 IMPLEMENTING ANDROID UIS

60 TOUCH TARGET SIZES 40x40px Commonly used control size (10mm) 5px Minimum space between (2mm)

61 TARGET SIZE INFLUENCES ERROR RATE 30% 25% 1 in 3 taps (30%) will miss the target 20% 15% 10% 5% 0% 1 in 10 taps (10%) 1 in 20 taps (5%) 1 in 30 taps (3%) 1 in 50 taps (2%) 4mm 6mm 8mm 10mm 12mm

62 TOUCH TARGET SIZE 7mm Minimum control size 10mm Recommended size 10mm Common

63 ACTIONABLE CONTROLS Buttons List items Checkbox Radio button Switch

64 TARGET POSITIONING

65 READABILITY 24sp Headline 20sp Title 16sp Subheading 14sp Standard text

66 TEXT CONTROLS TextView EditText

67 GESTURES - TAP

68 COMMON GESTURES Drag Flick Pinch / Spread

69 COMMON GESTURES Drag move; scroll; delete Flick scroll (fast); switch tab Pinch / Spread zoom in-out

70 GUIDELINES FOR GESTURES Allow any number of fingers Gestures as shortcuts Provide immediate feedback Be aware of discoverability issues

71 DISCOVERABILITY

72 IMPLEMENTING GESTURES GestureDetectorCompat object Override ontouchevent redirect touch events to GestureDetectorCompat object Supported gestures: onfling, onlongpress, onscroll, ondoubletap,...

73 UI COMPONENTS Buttons Lists Menus Dialogs Selection controls Text fields Snackbar and toasts AppBar

74 BUTTONS Floating Raised Flat

75 BUTTONS Important and ubiquitous action Floating Raised Flat

76 BUTTONS Depends on the relative importance of the button on the screen Important and ubiquitous action Floating Raised Flat

77 BUTTONS - EXAMPLE

78 BUTTONS - EXAMPLE

79 LISTS Single column Set of rows Rows are containers of tiles Tiles hold content

80 LISTS - EXAMPLE

81 SELECTION CONTROLS

82 TEXT FIELDS TextView EditText

83 DIALOG Interruptive, use sparingly! AlertDialog

84 DIALOG - EXAMPLE

85 SNACKBAR AND TOAST Lightweight feedback about operations Snackbars can contain an action Snackbar.make(, Marked as read,...).setaction( undo,...).show()

86 SNACKBAR - EXAMPLE

87 SNACKBAR - EXAMPLE

88 ERROR MESSAGES Use AlertDialog or Snackbar (exception for forms - TextInputLayout) Communicate what is happening Describe how to solve it

89 NAVIGATION Buttons Tabs Navigation Drawer

90 NAVIGATION - BUTTONS Few top-level views Awareness of views Somewhat unrelated views

91 NAVIGATION - TABS Few top-level views Awareness of views Content is shown directly

92 NAVIGATION - DRAWER Higher number of items Reduced visibility of infrequent items

93 OTHER RESOURCES Android patterns and guidelines: c/components/ /best-ux.html UI galleries for inspiration:

94 07 TAKE-HOME MESSAGES

95 PRIORITIZE AND SIMPLIFY!

96 SKETCH AND PROTOTYPE!

97 THINK PEOPLE RATHER THAN TECH

98 THE ONLY STUPID QUESTIONS ARE THOSE THAT STAY WITH YOU What wasn t clear enough? What should be improved?

99 YOU KNOW NOW Challenges of mobile interaction design Context I/O Interaction design guidelines Implement mobile interfaces

100 WHAT CAN WE LEARN FROM THESE?

101

102 08 MOBILE INTERACTION RESEARCH

103 MY RESEARCH MOBILE INCLUSIVE TECH Haptic Feedback Rehabilitation Wearable Braille, Nicolau et al. (2013) HoliBraille, Nicolau et al. (2014) Rehab, Nicolau et al. (2012) Personalized Touch Input Eyewear Navigation Disabled R All, Nicolau et al. (2012) Accessible Touch, Nicolau et al. (2013) SlidePacer, Nicolau et al. (2016) Blobby, Nicolau et al. (2009)

104 MANIPULATING OBJECTS Estimating 3D Finger Angle on Commodity Touchscreens. (2015) Xiao, Schwarz, and Harrison

105 SELECTING TARGETS Back of device Interaction allows creating very small touch devices. (2009) Baudisch and Chu

106 SENSING OBJECTS ViBand: High-fidelity Bio-acoustic Sensing Using Commodity Smartwatch Accelerometers. (2016) Laput et al.

107 SMART TEXTILES procover: Sensory Augmentation of Prosthetic Limbs Using Smart Textile Covers. (2016) Leong et al.

108 FEELING IMPACT Impacto: A Wearable that simulates physical impact in VR (2015) Lopes et al.

109 INTERESTING BOOK