MOBILE INTERACTION DESIGN Dr. Barbara Rita Barricelli
PhD Course, 21-22-23 January 2020
OVERVIEW
Unit 1
Interaction design
Unit 2
Mobile Interaction Design
Unit 3
User research
Unit 4
Prototyping
Unit 5
iOS Human Interface Guidelines,
Google Material Design
Unit 6
Hands-on activity
UNIT 2 Mobile Interaction Design
WHAT DOES MOBILE MEAN?
Smartphones
Tablets
eReaders
Portable game systems
Printers
Scanners
Weareable devices
Industrial automation
Portable surveying, measuring and metering equipment
EVOLUTION OF MOBILE TECHNOLOGY
Voice
Paging and text messages
Pervasive network connectivity
General computingdevices
MAIN CHARACTERISTICS
Small (enough to be carried around)
Portable (battery-powered)
Connected (wirelessly)
Interactive (more than just a few options)
Contextual aware (sensors)
PRINCIPLES OF MOBILE DESIGN
Respect user-entered data
Realize that mobiles are personal
Realize that mobiles must work in all contexts
User your sensors and use your smarts
Realize that user tasks usually take precedence
Ensure consistency
RESPECT USER-ENTERED DATA
Do whatever it takes to preserve user data:
Saving as the user types so auto-complete can bring lost input back
Do not clear forms on error
Context must be always take into consideration:
Users slip
Have to deal with a new phone
Are borrowing someone else’s phone
Someone jugs their arm
REALIZE THAT MOBILES ARE PERSONAL
Mobile can be presumed to be «one device for one person»
No one wants to have to regularly tell their device the same information over and over (name, address, …)
MOBILES MUST WORK IN ALL CONTEXTS
Most devices are too bright at night
Or the brightness of the screen is too low when a barcode needs to be scanned in a shop
You can ovverride the brightness with your app to assure efficacy and efficience in any context.
USER YOUR SENSORS AND YOUR SMARTS
Whenever possible, perform an action for th user based on sensors and user data
Why should you have to silence your phone for a meeting, when the phone knowswhere you physically are and knows from your calendar that you have a meeting in that room in that moment?
USER TASKS USUALLY TAKE PRECEDENCE
If the user initiates a task or is in the middle of one, do not interrupt them.
Do not change the focus
And never cancel the ongoing operation to take the user to another page (losingtheir information)
ENSURE CONSISTENCY
Your app should follow what the other standard apps do and what the OS does
Changing the paradigm generally results in more problems than solutions
DESIGN PATTERNS
Concept developed in 1977 by the architect Christopher Alexander.
A formal way of documenting a solution to a common design problem. Based on the concept of reusing and reapplyingknown best cases in design.
“Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice”.
MOBILE INTERACTION DESIGN PATTERNS
Often confused with graphical templates (a template is a model, ready to be usedas it is or adapted)
Mobile interaction design patterns evolve in time, to address the continuous changesin technology
PATTERNS ORGANIZATION
Navigation
Forms
Tables
Search, sort and filter
Tools
Charts
Social patterns
Feedback and affordance
Help
NAVIGATION
Primary: allows to navigating from one primary category to another, as with the top-level menus of a desktop application
Secondary: moving about within a selected module
PRIMARY NAVIGATION
Persistent: as soon as you open an app with persistent navigation, it is immediately clear what the primary navigation options are.
Transient: must be explicitly revealed with a tap or gesture. These patterns arise from the constraints of smartphone screen sizes.
PRIMARY NAVIGATION PATTERNS
Springboard
List menu
Dashboard
Gallery
Tab menu
Side drawer
Toggle menu
PERSISTENT
TRANSIENT
SPRINGBOARD (AKA LAUNCHPAD)
LIST MENU
DASHBOARD
GALLERY
TAB MENU
SIDE DRAWER
TOGGLE MENU
SECONDARY NAVIGATION PATTERNS
Page swiping
Expand/collapse panel (Accordion)
PAGE SWIPING
EXPAND/COLLAPSE PANEL (ACCORDION)
FORMS
Sign In
Registration
Checkout
Calculator
Search form
Multi-step form
SIGN IN
REGISTRATION
CHECKOUT
CALCULATOR
SEARCH FORM
MULTI-STEP FORM
TABLES
Basic table
Headerless table
Overview plus data
Grouped rows
Tables with visual indicators
BASIC TABLE
HEADERLESS TABLE
OVERVIEW PLUS DATA
GROUPED ROWS
TABLE WITH VISUAL INDICATORS
SEARCH, SORT AND FILTER
Implicit search
Explicit search
Auto-complete
Scoped search
Dynamic search
Search form
Search results
Onscreen sort
Filter form
Filter drawer
Gesture-based filter
IMPLICIT SEARCH
EXPLICIT SEARCH
AUTO-COMPLETE
SCOPED SEARCH
DYNAMIC SEARCH
SEARCH FORM
SEARCH RESULTS
ONSCREEN SORT
FILTER FORM
FILTER DRAWER
GESTURE-BASED FILTER
TOOLS
Toolbar
Toolbox
Call to action button
Inline actions
Multi-state buttons
Contextual tools
Bulk actions
Lock screen controls
TOOLBAR
TOOLBOX
CALL TO ACTION BUTTON
INLINE ACTIONS
MULTI-STATE BUTTONS
CONTEXTUAL TOOLS
BULK ACTIONS
LOCK SCREEN CONTROLS
CHARTS
Chart with filters
Interactive timeline
Drill down
Overview plus data
Interactive preview
Dashboard
Zoom
Integrated legend
CHART WITH FILTERS
INTERACTIVE TIMELINE
DRILL DOWN
OVERVIEW PLUS DATA
INTERACTIVE PREVIEW
DASHBOARD
ZOOM
INTEGRATED LEGEND
SOCIAL PATTERNS
Social registration
Connecting
Following
Profiles
Groups
Gamification
SOCIAL REGISTRATION
CONNECTING
FOLLOWING
PROFILES
GROUPS
GAMIFICATION
FEEDBACK AND AFFORDANCE
Error messages
Confirmation
System status
Tap
Swipe
Drag
ERROR MESSAGES
CONFIRMATION
SYSTEM STATUS
TAP
SWIPE
DRAG
HELP
How-tos
User guide/help system
FAQs
Feature tours
Tutorials
Contextual help
HOW-TOS
USER GUIDE/HELP SYSTEM
FAQS
FEATURE TOURS
TUTORIALS
CONTEXTUAL HELP
REFERENCES
Hoober, S. (2012) Designing Mobile Interfaces. O’Reilly
Neil, T. (2014) Mobile Design Pattern Gallery. O’Reilly
https://www.flickr.com/photos/mobiledesignpatterngallery/sets/
https://www.flickr.com/photos/mobiledesignpatterngallery/sets/