Design for mobile
• What are we designing?• Why should you care?• The past, present and future
Mobile design is…
• Content• Information Architecture• Interactions• UI / Graphical• Other senses…
(among other things)
Constraints
The Problem
Constraints
• Teeny-tiny screens for ants• Uncertain and variable context of use• Not much user attention
• However, richer interaction, more degrees of freedom with touch gestures, other sensors
The past
• The dashboard is dead
The present
• Mobile first FTW!– Pare down the content to the absolute
essential-est of the essential– IA is wide and flat
• Make the content the focus• If what you have left still needs more
than a few screens, pile it up, push it out
Off-canvas layouts
• Table layout
• Conceptually moving the viewport right and left
The Burger and The Basement
What was wrong with what we had?
• Bottom nav is fine, except it takes up precious pixels
Hide and show with a tap
Above-content and follow-me nav
Even seeing it on the full web
Interactions
• Minimize ‘computer admin debris’• “The information is the interface” –
interaction is direct through touch
• Can a button be replaced with a touch gesture, shake, speech?
Interactions
• Pull to refresh
Interactions
• Push to dismiss
• Use the richness of touch gestures
Interactions
• Item actions
Interactions
• Tap to reveal controls
Invisible space
• Generally, it takes more cognitive and working memory effort to keep space off-screen in the users’ memory
• Repeated patterns and visual cues make it easy and automatic
Progressive reduction
The future
• Do you need a UI at all?
UI as backup
Sensor-led interaction
• Is this user late for their train? • Are they running or walking?• Can I reassure them that the train is
running a few minutes late / re-route?
The future
• Context-aware just-in-time computing• No downloading apps• Phone is like a limb, your life is the OS• Available networks, recent movement,
device orientation, light levels, GPS• Suggest data and interactions which are
useful for the user based on patterns and feedback
• Speech input
Vision
• Technology not as cumbersome tool but intelligent and adaptive systems which extend our powers and smooth out annoyances
• Mobile is a playground
Recommended
