Designing for Mobile - Off Canvas Interface

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

Thanks

Ricky Morris

r.morris@me.com

@uxdotvu