Designing For Use Not Visuals
Download as PPT, PDF0 likes305 views
The document discusses the importance of designing for interactions rather than just visuals in web design, emphasizing that successful interactions often combine basic interaction elements. It provides case studies on search tabs and tree views to illustrate how understanding user needs and interaction management is critical for effective design. The conclusions highlight that design should focus on user requirements rather than aesthetic preferences, advocating for the selection of appropriate interactive elements.
Designing For Use Not Visuals
- 1. Designing for interactions not visuals Creative Commons
- 2. Designers design for Visuals Brand Use Gritty Reality Web 2.0
- 3. Turning Design into Interaction Basic interaction is already solved Most complex interactions are actually combinations of basic interactions
- 4. For example <a href=” http://www.yahoo.com ”>Yahoo</a> <a href=”#” onclick=”window.location(‘ http://www.yahoo.com ’);”>Yahoo</a>
- 5. Case Study 1 Search Tabs
- 6. Tabs What are tabs? Unordered list Link to each section Javascript to do tab switching
- 7. Why are search tabs different? Interaction with a form not navigation Tabs are playing the part of a form Which form element has multiple options is mutually exclusive indicates it’s current state
- 8. Radio Button In a form interaction radio buttons are normal Do all tabs really have to be a menu? Radio buttons allow any user to select the channel they wish to search
- 9. Degraded states uk.tv.yahoo.com www.yahoo.com
- 10. Why does this happen? Didn’t examine the users’ needs Assumption that all tabs contexts are the same Complex visual interaction were built before the basics
- 11. Case Study 2 Tree View
- 12. The visual way Design hierarchy / nesting Design states open - closed +
- 13. The Result? Epic Fail 2.0
- 14. The Interaction way Look for interactions Opening/closing leaves Look for information State (open/closed) and level of leaves Build the most semantic representation possible Add Style
- 15. What is a tree menu? Interactions Open/Close Branch Skip Branches Information Position in hierarchy Branch open/closed
- 16. Tree Structure in HTML <ul> <li> <ul> <li>Leaf 1</li> <li>Leaf 2</li> </ul> </li> <li>Leaf 3</li> </ul>
- 17. Checking criteria <ul> <li><span>1st Level, 2 Sub elements. Fully selected</span> <ul> <li><span>2nd Level, 0 Sub elements</span>Leaf 1</li> <li><span>2nd Level, 0 Sub elements</span>Leaf 2</li> </ul> </li> <li><span>1st Level, 0 Sub elements</span>Leaf 3</li> </ul>
- 18. Conclusions
- 19. Conclusions What people want out the Web is the same, no matter what technology they use Design for what people want from your site not what you want the site to look like Progressively enhancing from the wrong interaction to the right one isn’t progressive enhancement!
- 20. 3 Steps For Practice. Identify what users are trying to get from the site/part of the site (e.g search form) Choose the widget/solution that best represents the interaction they need Style those widget appropriately
- 21. Authors of this talk Tom Hughes-Croucher Ben Hawkes-Lewis Christian Heilmann-Nobarrel
- 22. Thanks CC Flickr Photos Flickr Photos http://www.flickr.com/photos/genewolf/147722350/in/photostream/ http://www.flickr.com/photos/11357110@N06/2078277259/ http://www.flickr.com/photos/projector/1407463013/