Building User-Centered Mobile Applications
Mgr. Rastislav Mirek
CEO, TypeSoft
Consultant, Touch4IT
PV239 Mobile Application Development, Faculty of Informatics,
Masaryk University
Organization
Feel free to ask questions anytime.
Breaks?
Have something to add? Feel free to discuss.
The lecture will be interactive, 14 discussion topics are prepared.
Outline
1 Introduction
The Problem
Key Terms Definition
Motivation
2 General Human-Computer Interaction
The Goal
Method
Knowledge, Research & Related Fields
3 Creating Mobile User Experience
Specifics of Mobile User Experience
Modular Mobile Interfaces for Complex Interactions
Selected Mobile UX Topics
4 References and Summary
Introduction The Problem
The Problem
It is incompatible interface problem: Computers do not “think” like humans.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 4 / 54
Introduction Key Terms Definition
Definitions
Human-Computer Interaction (HCI)
Science field at intersection of computer science, cognitive science,
psychology and more.
Focused on interfaces between people and computers.
User experience (UX)
Person’s emotions and attitudes about using a particular product,
system or service.
Practical application of HCI.
Usability = Ease of use and learnability of a human-made object, tool
or device.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 5 / 54
Introduction Motivation
Discussion 1
Why is focus on UX in IT increasing? What is the key
reason?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 6 / 54
Introduction Motivation
Increasing Importance of UX
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 7 / 54
Introduction Motivation
Increasing Importance of UX
Processor time has become cheaper than human time.
→ Optimising for people not computers
Cheaper computers mean much broader audience.
Today, it is easier to adapt computes to people than vice versa.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 8 / 54
Introduction Motivation
Discussion 2
What technologies might be used in the future to take
mobile UX to the next level? How?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 9 / 54
Introduction Motivation
State of the Art and Future HCI Technologies
Voice recognition, intelligent assistants
Artificial Intelligence, Machine Learning
Augmented reality? 3D displays? Virtual reality?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 10 / 54
Introduction Motivation
Developers And User Experience?
Traditional responsibility of designer or dedicated UX designer.
Developer often does not know user’s needs because they are not
communicated.
Developer knows UI capabilities and constraints of the platform.
Some designers are used to think about static screens. Developer must
consider interactions, transitions, animations etc.
Increasing UX requirements on mobile developers.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 11 / 54
General Human-Computer Interaction The Goal
Discussion 3
What are key qualities of good/usable user interface?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 12 / 54
General Human-Computer Interaction The Goal
The Goal
Interactive systems that are well suited to users’ needs.
Not boss’s needs
Not developer’s needs - “I can easily add animation here”
Not user’s wishes - “... it would be great to have e-mail client in my
browser”
Users’ Needs: Defined & Measurable
1 Allow users to do what they need to do. Aim accurately.
2 Learning curve.
3 Users efficiency: Time to do particular task.
4 Number of errors made. How critical consequences?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 13 / 54
General Human-Computer Interaction The Goal
Making It Simple Is Difficult
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 14 / 54
General Human-Computer Interaction Method
UX Design Method in Short
Key Steps
1 Observe, study users needs, existing/legacy systems, understand,
specify
2 Analyse, brainstorm, create
3 Prototype
4 Evaluate, test - with users
5 Iterate, repeat 1-5
Key principle: Stay user centred.
Guessing can lead to bad results. Focus on steps 1. and 4. whenever
possible!
Many techniques for each step.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 15 / 54
General Human-Computer Interaction Method
UX Design Method in Short
Know your audience → personas
Priority tasks for your users (quantify frequency) → use cases (task
centred design)
Find out context of your users (knowledge, environment, situation, ...)
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 16 / 54
General Human-Computer Interaction Method
Prototyping Evaluating
Thanks to Let’s Cook for permission to use the sample.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 17 / 54
General Human-Computer Interaction Method
Discussion 4
Why scrolling feels intuitive on mobile devices?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 18 / 54
General Human-Computer Interaction Method
Principles to Keep in Mind in Creative Phases
Associations, familiar experiences, metaphors
From real world
From digital/virtual world
Internal integrity of the system
Consistency with platform
Providing feedback for actions
Similarity to existing system known to users
Legacy systems, real world processes, pen & paper
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 19 / 54
General Human-Computer Interaction Method
How to think about UX
Critically, analytically, creatively
You are not your user
The users do not know what you do
UX is everywhere not only on screen
You can observe, be critical and learn almost everywhere
Question common, typical solution
Experiment, evaluate assumptions
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 20 / 54
General Human-Computer Interaction Method
Discussion 5
Is there something wrong about folder based (hierarchical)
file systems from UX perspective?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 21 / 54
General Human-Computer Interaction Knowledge, Research & Related Fields
Discussion 6
What is human "clock rate" (perception speed) ?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 22 / 54
General Human-Computer Interaction Knowledge, Research & Related Fields
How Humans Perceive, Learn and React
Fastman can perceive event with duration 50 ms,
reacts in 30 ms
Short-term memory capacity is 7 ± 2 “chunks”
Cognitive models: Theory of Action, Rasmussen’s
model, The Model Human Processor, Fitts’ Law, ...
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 23 / 54
General Human-Computer Interaction Knowledge, Research & Related Fields
Fitt’s Law Experiment
MacKenzie, I. S. (1992). Fitts’ law as a research and design tool in human-computer
interaction. Human-Computer Interaction, 7, 91-139.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 24 / 54
General Human-Computer Interaction Knowledge, Research & Related Fields
Fitt’s Law
MacKenzie, I. S. (1992). Fitts’ law as a research and design tool in human-computer
interaction. Human-Computer Interaction, 7, 91-139.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 25 / 54
General Human-Computer Interaction Knowledge, Research & Related Fields
Related Course at FI MU
Interested? There much more to learn and try.
PV182 Human Computer Interaction
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 26 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Discussion 7
Where are key differences in desktop and mobile UX?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 27 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Mobile vs. Desktop UX
Touch screen
Control/input elements change dynamically
Gestures are easiest with touch screen
Small screen → Challenging
Usage patterns: It’s mobile
fast tasks
on the go, different environments, conditions
new types of tasks
Specific device capabilities
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 28 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Discussion 8
What are pros and cons of scrolling mobile keyboard to
switch character sets? Please compare with to traditional
swich button.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 29 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Scrollable Keyboard - Example of Using Gestures
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 30 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Comparison with Standard Keyboard
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 31 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Discussion 9
What is the key difference between mobile platforms (iOS,
Android, WP) in terms of UX?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 32 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Mobile Interface Guidlines
iOS Human Interface Guidelines
Android: Material Design (Patterns, Motion, Layout, ...)
Windows Phone?
Want to be great developer? Read it.
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 33 / 54
Creating Mobile User Experience Specifics of Mobile User Experience
Mobile Interface Guidelines - Examples
General principles
Balance between enabling users and avoiding unwanted outcomes
Fast apps, imediate feedback
Sense of depth, layers
More specific
Types of navigation
Delay sign-in
Suppress settings and file system (replace by lists/tables)
Very specific
Minimumbutton area
How to format dates
How to use components
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 34 / 54
Creating Mobile User Experience Modular Mobile Interfaces
Discussion 10
What is the difference between back and up navigation
button on Android? Is there UX issue related to it?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 35 / 54
Creating Mobile User Experience Modular Mobile Interfaces
Android Up and Back Navigation
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 36 / 54
Creating Mobile User Experience Modular Mobile Interfaces
Types of Navigation
Hierarchical Flat
Content-driven or experience-driven
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 37 / 54
Creating Mobile User Experience Modular Mobile Interfaces
Navigation Drawer
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 38 / 54
Creating Mobile User Experience Modular Mobile Interfaces
Combining Navigation Types
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 39 / 54
Creating Mobile User Experience Modular Mobile Interfaces
Navigation
Notion of location
To use hamburger or not to use hamburger ?
“Hamburger” = side menu :)
Breaks notion of location - where is the active screen located?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 40 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Animation and Motion
In real world there are no immediate transitions
Natural feeling is important
Elements should have momentum, accelerate and decelerate, respond
to gravity, interact, ...
Duration: Fixed duration vs. fixed speed
Motion provides meaning: hints function, gives feedback, focus, notion
of location
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 41 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Discussion 11
What might be problematic about icons on following slide
considering global audience?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 42 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Using Icons
Thanks to Mile One LLC for permission to use the sample (working version).
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 43 / 54
Creating Mobile User Experience Selected Mobile UX Topics
People Perceive Icons Much Faster Than Text
Thanks to Mile One LLC for permission to use the sample (production version).
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 44 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Common Problems
Trying to squeeze too much on one screen → modality, focus
Error handling
Harder than normal data entry - often makes big difference in UX
Guess input values
Shortcuts (e.g. emoji)
Use right keyboard type
Accesebility
Keep it simple. E.g. consider sending message via Facebook rather
than implementing in-app chat
Displaying complex data - tables and lists
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 45 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Handling Errors - Example
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 46 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Discussion 12
How would you design mobile calculator for visually
impaired?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 47 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Specific Interactions Enabled by Device Capabilities
3D touch
Fingerprint sensor
Voice control
Haptic feedback (be careful about overuse)
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 48 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Discussion 13
Is there a usability issue with iPhone home button?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 49 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Some Advices
Localize
Please, no save buttons
Consider undo and redo operations
Study guidelines and follow them
Prefer native components
Inform users about latency → activity indicators
Some useful tools: UsabilityHub, Invision, Moquaps, ...
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 50 / 54
Creating Mobile User Experience Selected Mobile UX Topics
Discussion 14
How could your programming UX be improved?
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 51 / 54
References and Summary
Many Thanks to...
Gaëlle Calvary & François Bérard
from ENSIMAG, INP Grenoble for kind permission to borrow some
information from their lecture Human Computer Interaction
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 52 / 54
References and Summary
Many Thanks to...
Dominika Polomská
from TypeSoft for preparing some of the images
Rastislav Mirek (TypeSoft) User-Centered Mobile Applications PV239, FI MU 53 / 54
Summary
Questions?
Thank you