Mobile usability workshop - Android-iPhone-Google Glass - Jibo He
1. How Do You Design a Usable
Mobile App?
Jibo He & Barbara S. Chaparro
Department of Psychology, Human Factors
4/8/141
2. Agenda
§ Introductions"
§ Opportunity and Challenges for Mobile Design"
§ Mobile App Development Process"
§ Usability & Mobile Apps"
§ How to Assess Usability"
§ Mobile Usability Toolkit"
§ Interactive Demo"
3. What This Workshop is
- App development"
- App features that impact usability"
- Common mistakes"
- How to assess app usability"
!
4. What This Workshop is Not
§ Developer training"
§ Graphic design training"
"
If you need such
training, please call Jibo
5. Barbara S. Chaparro, Ph.D.
Research Interests
• Human-Computer Interaction
• Software/Website Design & Evaluation
• Usability Testing
• Mobile Computing
• Use of mobile devices in hospitals
• EMR usability
• Technology UX
Ph.D. Experimental Psychology
Texas Tech University
Associate Professor, Coordinator
Human Factors
Director
Software Usability Research Lab
Clients
6. Ph.D. Engineering Psychology
University of Illinois
Assistant Professor
Human Factors
Jibo He, Ph.D.
§ Research Interests:"
§ Human Computer Interaction"
§ Driving Safety"
§ Mobile Technology and Usability"
§ Google Glass "
§ Emerging Technologies in
Healthcare"
§ Alternative Input Methods"
7. Agenda
§ Introductions 12:30"
§ Opportunity and Challenges for Mobile Design
12:45!
§ Mobile App Development Process 1:00"
§ Design Guidelines for Mobile Apps 1:20"
§ How to Assess Usability 1:45"
§ Mobile Usability Toolkit 2:00"
§ Interactive Demo 2:30"
14. Mobile Product Challenges
§ Does it meet a need (the market or your customers)?"
§ Is it unique?"
§ Does it offer quality user experience (UX)?"
§ Is it being advertised/marketed? "
15. Agenda
§ Introductions"
§ Opportunity and Challenges for Mobile Design"
§ Mobile App Development Process!
§ Design Guidelines for Mobile Apps"
§ How to Assess Usability"
§ Mobile Usability Toolkit"
§ Interactive Demo"
16. Mobile App Development Process
§ Which platform to choose?"
§ What programming language?"
§ What tools are needed? "
§ Who do I hire to do the work?"
§ How do I advertise/market it? "
§ How can I make money? "
17. Mobile App Development Process
§ Which platform to choose? "
§ Android"
§ iOS"
§ Windows"
§ Blackberry"
§ Firefox mobile"
§ Ubuntu mobile"
§ Tizen"
§ Sybian"
19. Mobile App Development Process
§ What programming languages? "
§ Objective-C (iPhone & iPad)"
§ Java (Android)"
§ C# (Windows mobile)"
§ HTML5 (All platforms)"
20. Mobile App Development Process
What tools are needed? "
§ Android:"
§ A computer with any operating system"
§ An Android device for developing"
§ Many Android devices for testing"
§ iOS"
§ A Mac"
§ An iDevice for developing"
§ Several devices for testing (iPhone 5s, 5c, 4)"
§ $99 developer license fee per year"
21. Mobile App Development Process
Who do I hire to do the work? "
§ Developer"
§ Graphic designer"
§ User experience (UX) researcher"
§ Marketing specialist"
"
22. Mobile App Development Process
How do I advertise/market it?"
§ Submit to the app store"
§ Word of mouth"
§ Social network marketing"
§ Search engine optimization (SEO)"
§ Advertising"
"
23. Mobile App Development Process
How can I make money?"
§ App sales"
§ Mobile ads"
§ In-app purchase"
§ “Free” Promotion"
§ Get acquired by large
company"
"
24. Agenda
§ Introductions"
§ Opportunity and Challenges for Mobile Design"
§ Mobile App Development Process"
§ Design Guidelines for Mobile Apps!
§ How to Assess Usability"
§ Mobile Usability Toolkit"
§ Interactive Demo"
25. Design Guidelines for Mobile Apps
§ LOTS of design guidelines out there"
§ MANY of the WEB DESIGN guidelines also hold true
for APPS"
26. Design Guidelines for Mobile Apps
§ What is unique about APP design?"
§ Think about how apps are used "
§ Types of environments"
§ Under what circumstances"
§ The “cross-channel” experience: "
§ Consistent"
§ Seamless"
§ Available"
§ Context Specific"
27. Types of Mobile Solutions
§ Responsive website – adapts to any device; most
flexible"
§ Native app – Google Play, iOS App store (use when
speed is important)"
§ Web app – task oriented; e.g., booking tickets"
28. Types of Mobile Solutions
Question Responsive Design Site Native App
Does app use smartphone
features?
- Uses smartphone features
Is it better if customized to
user’s device?
- Personalization to user;
customized user interface
Is there a lot of data
transfer?
- Data transfer is faster
Do you want users to
make quick purchase?
- Faster with customized info
Are you trying to optimize
search engine traffic?
Better SEO -
Are frequent updates
likely?
Easier to update; no app
store approval
-
Do you want app to be
everywhere (universal)?
More universal -
Limited budget? Cheaper – one code base -
29. SURL App Design Guidelines
What contributes to the success of an app?"
§ User-focused – serves a unique need of user"
§ Well designed"
§ Engaging"
§ Easy to use"
"
30. Common Problems in App Design
§ Lack of Affordance"
§ Navigation/Link Confusion"
§ Inconsistency"
§ Target Size/Location"
§ Lack of Feedback"
§ Lack of Instructions or Help"
§ Bad/missing error messages"
34. Navigation/Link Confusion
Tapping
on
“Video
Schedule”
does
not
take
the
user
to
a
new
screen.
Instead
it
takes
the
user
back
to
the
last
page
viewed.
Users
do
not
realize
this…
36. Inconsistency
Tapping
on
the
events
on
the
le?
screen
result
in
more
detail.
Tapping
on
the
events
on
the
right
screen
does
nothing.
37. Inconsistency
Medal count is ordered by total number of medals (left) or by
the number of gold medals (right).Neither allowed user to sort
by medal type.
39. Return to Affordance? iOS 7.2
Accessibility option to bring the button shapes back!"
40. Target Size
What is link here? Why do only
some athletes have a picture?
Target size is very small
This shows you detail
of race.
This is not a link
41. Target Size & Location
Google Hangout GPS and camera
links are very small and can be
tapped by accident instead of Back
hardware button.
46. App Design Guidelines
§ Make touchable items look touchable"
§ Be consistent"
§ Use adequate target sizes AND think about how user
will interact with page"
§ Provide feedback to every action"
§ Provide instructions for first-time users"
§ Use meaningful error messages"
47. SURL App Design Guidelines
§ Aesthetics"
§ High quality images & media"
§ High quality logo"
§ Professional look-and-feel
"
§ Text Appearance & Format"
§ Uses adequate text size and appropriate style"
§ Adequate text contrast with background"
§ Text formatting facilitates scanning"
§ Writing style appropriate for mobile users"
48. Agenda
§ Introductions"
§ Opportunity and Challenges for Mobile Design"
§ Mobile App Development Process"
§ Design Guidelines for Mobile Apps"
§ How to Assess Usability!
§ Mobile Usability Toolkit"
§ Interactive Demo"
49. How to Assess Usability
§ “Heuristic” Evaluation"
§ Expert view of app design quality and ease of use based
on established heuristics and guidelines. "
§ iOS, Android, Windows design guidelines"
§ Usability.gov"
§ J. Nielsen useit.com"
§ usabilitynews.org"
"
50. App Design Usability Testing
App “ease of use” can be measured by:"
§ Learnability"
§ Efficiency"
§ Memorability"
§ Satisfaction"
Objective vs Subjective Measures"
"
51. Usability Testing
"
A method of systematically determining the
usability of an app from the end-user
perspective. "
52. Usability Testing - When?
§ As early as possible in the design phase"
§ As frequently as possible"
§ Before functional specs are completed"
§ Whenever a design decision needs to be made"
53. Usability Testing - Who?
§ 8-10 participants"
§ 1-2 observers"
§ Users representative of the targeted population"
§ NOT members of the design team"
54. Usability Testing - How?
§ Define usability goals - relative vs. absolute "
§ Create/test task scenarios"
§ Decide on usability measures"
§ Recruit appropriate test participants"
55. Usability Measures
§ success "
§ time to complete tasks "
§ number of steps/taps to complete tasks"
§ user perceptions of ease of use "
§ overall user satisfaction with the app "
§ eye tracking (optional)"
57. Example: Ordering Pizza using an App
§ Add a pepperoni pizza to an order"
§ Add a cheese pizza (alter the order to customize
toppings on the pizza)"
§ Order a variety of items using a $100 budget"
§ Delete an item from the order"
65. Agenda
§ Introductions"
§ Opportunity and Challenges for Mobile Design"
§ Mobile App Development Process"
§ Usability & Mobile Apps"
§ How to Assess Usability"
§ Mobile Usability Toolkit!
§ Interactive Demo"
66. Mobile Usability Toolkit
§ iOS"
§ Mirror on large display"
§ Display Recorder"
§ URL Logger"
§ Keyboard Logger
"
§ Android"
§ Mirror on large display"
§ Activity Monitor"
§ URL Logger"
§ Keyboard Logger"
§ Google Glass"
§ uSee Glass
"
§ Mobile eye-tracking"
§ Tobii eye tracker"
70. Mobile Usability Toolkit: Android
§ Activity Monitor"
§ Monitors activity on Android device"
§ Captures task completion time"
§ URL Logger"
§ Log URL visits"
§ Captures task completion time"
§ Can be used as a measure of lostness"
§ Keyboard logger"
§ Records keyboard entry"
§ Can be used as a measure of physical workload"
71. Mobile Usability Toolkit: Android
§ Touch Recorder"
§ Records number of touches"
§ Can be used as a measure of physical workload"
72. Activity Monitor installation
§ http://www.ueseo.org/download/Activity
%20Monitor/ActivityMonitor.apk!
§ http://tinyurl.com/ActivityMonitor!
§ Or Scan the QR code below to install Activity
Monitor!
73. URL Logger installation
§ http://www.ueseo.org/download/URL%20Logger/
URLLogger.apk!
§ http://tinyurl.com/URLLoggerInstaller!
§ Or Scan the QR code below to install URL Logger!
74. ASTRO File Manager installation
§ Search “ASTRO File Manager ” in Google Play store"
§ To see data collected by the tolls"
75. Touch Logger
§ Needs a computer with Android developing
environment;"
§ Log touches in Android devices"
77. Other Mobile Usability Tools
§ Google Glass – uSee Glass"
§ Participant point-of-view"
§ Facilitator logging "
78. uSee Glass for Google Glass
uSee Glass Traditional Software using Webcam
Participant and/or researcher POV Researcher perspective only
Log events through tap Log events from separate computer
No extra camera needed Webcam required
Text chat in Glass head-mounted display Text chat in heads-down-display
Manual video analysis Specialized software required
Mobile solution, portable Not portable
Low cost High cost
79. Agenda
§ Introductions"
§ Opportunity and Challenges for Mobile Design"
§ Mobile App Development Process"
§ Usability & Mobile Apps"
§ How to Assess Usability"
§ Mobile Usability Toolkit"
§ Demo!
80. Demo
§ Compare the auto-quote system of State Farm &
GEICO. Which system is more usable?"
§ Persona: "
§ John Doe SSN: 349-06-7488"
§ Age 29, male, single, born on Jan. 1, 1985"
§ Start to drive since 20 years old, rents an apartment"
§ 505 Rock Rd Apt 888"
§ Wichita, KS 67206"
§ 6000 yearly mileage, no accident or ticket history "
§ owns a 2008 Ford Taurus SEL 4D SED, 5000 yearly
mileage, purchased on June 1, 2010"
82. Results
State Farm GEICO
Task completion time 6.71 min 6.19 min
# of URL visits 9 21
# of key entries 109 93
# of taps 271 249
GEICO system was more efficient
• Shorter task completion time
• Fewer taps and key entry
87. References
§ www.usabilitynews,org
"
§ www.Usability.gov
"
§ www.useit.com
"
§ He, J., Chaparro, B., & Haskins, C. (submitted). USee
Glass: A Mobile Usability Research Tool Using Google
Glass. Proceedings of Human Factors and Ergonomics
Society, Chicago, IL.
"
§ He, J. , Chaparro, B., Siu, C., & Strohl, J. (2014). Mobile
eye tracking. Chapter 10 of Eye Tracking in User
Experience Design. Published by Morgan Kaufmann. "