Designing for Mobile - Off Canvas Interface
•
2 gefällt mir•1,406 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (13)
Ähnlich wie Designing for Mobile - Off Canvas Interface
Ähnlich wie Designing for Mobile - Off Canvas Interface (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Designing for Mobile - Off Canvas Interface
- 2. Design for mobile • What are we designing? • Why should you care? • The past, present and future
- 3. Mobile design is… • Content • Information Architecture • Interactions • UI / Graphical • Other senses… (among other things)
- 4. Constraints
- 5. The Problem
- 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
- 7. The past • The dashboard is dead
- 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
- 9. Off-canvas layouts • Table layout
- 10. • Conceptually moving the viewport right and left
- 11. The Burger and The Basement
- 12. What was wrong with what we had? • Bottom nav is fine, except it takes up precious pixels
- 13. Hide and show with a tap
- 14. Above-content and follow-me nav
- 15. Even seeing it on the full web
- 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?
- 17. Interactions • Pull to refresh
- 18. Interactions • Push to dismiss
- 19. • Use the richness of touch gestures
- 21. Interactions • Tap to reveal controls
- 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
- 24. The future • Do you need a UI at all?
- 25. UI as backup
- 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
Hinweis der Redaktion
- 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