Getting around the constraints of mobile form factors requires some innovative design. UX, interaction design, and information architecture are discussed in relation to usable mobile web and app designs and UI trends.
6. 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
8. 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
16. 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?
22. 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
26. 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?
27. 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
28. Vision
• Technology not as cumbersome tool but
intelligent and adaptive systems which
extend our powers and smooth out
annoyances
• Mobile is a playground
Content, UI / graphical elements, interactions, IA
Other senses – non-visual, ‘quiet,’ proactive
Web sites are copied lock and stock to the mobile. Column widths are changed, but little else is optimized.Content is hidden beneath dashboard icons – not a design which responds to the constraints of the platform and the context it is experienced in.Fat IA, low-popularity content, lack of focus
So cut, cut, cut
Good for simple top-down hierarchical data
And can also have modals which slide up from the bottom for one-shot interactions which are needed to clarify intent or capture data
The trend – left navflyout – The good – keeps navigation separate from contentThe basement – dark, scary, where everything gets chucked – like the menu button on AndroidCan break the ‘Up’ / ‘Back’ behavior on Android – not really a problem wince no-one knows how that is supposed to work anywayWhat about other affordances of nav? Giving the user awareness of where they are in the system, communicating what the app can do
If your top-level hierarchy has more than 5 elements, you probably need to do a bit more work
The advantage of having a large content area is it makes a nice tap target areaCan also infer intent from scroll direction
Which leads to a good point – where is the best place to put navigation and related articles on a mobile article?The bottom. Consider the path of entry for the user. Mobiles are for checking status – they probably came in from a twitter link. They read the article, now what? Are they going to have to scroll all the way back to the top to see if this site has anything else good?
Loren BrichterContinuous scrolling, search field
Loren BrichterContinuous scrolling, search field
Sometimes hard to discover and learn
We do lose the :hover state, but that can be a tap-toggle
The other sensors provide so much implicit context
Seeing this already with Google NowQualcomm UX guys building this into low-power silicon
Towards ‘calm’ and ‘ubiquitous’ computing as Mark Weiser envisioned it. Donald Norman, Kevin Ashton, Golden Krishna