Designing for Mobile - Off Canvas Interface


Published on

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.

Published in: Technology, News & Politics
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
  • Designing for Mobile - Off Canvas Interface

    1. 1. Design for mobile • What are we designing? • Why should you care? • The past, present and future
    2. 2. Mobile design is… • Content • Information Architecture • Interactions • UI / Graphical • Other senses… (among other things)
    3. 3. Constraints
    4. 4. The Problem
    5. 5. 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
    6. 6. The past • The dashboard is dead
    7. 7. 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
    8. 8. Off-canvas layouts • Table layout
    9. 9. • Conceptually moving the viewport right and left
    10. 10. The Burger and The Basement
    11. 11. What was wrong with what we had? • Bottom nav is fine, except it takes up precious pixels
    12. 12. Hide and show with a tap
    13. 13. Above-content and follow-me nav
    14. 14. Even seeing it on the full web
    15. 15. 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?
    16. 16. Interactions • Pull to refresh
    17. 17. Interactions • Push to dismiss
    18. 18. • Use the richness of touch gestures
    19. 19. Interactions • Item actions
    20. 20. Interactions • Tap to reveal controls
    21. 21. 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
    22. 22. Progressive reduction
    23. 23. The future • Do you need a UI at all?
    24. 24. UI as backup
    25. 25. 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?
    26. 26. 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
    27. 27. Vision • Technology not as cumbersome tool but intelligent and adaptive systems which extend our powers and smooth out annoyances • Mobile is a playground
    28. 28. Thanks Ricky Morris @uxdotvu