Download - Designing For Use Not Visuals
![Page 1: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/1.jpg)
Designing for interactions not visuals
Creative Commons
![Page 2: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/2.jpg)
• Designers design for
• Visuals
• Brand
• Use
Gritty Reality
Web 2.0 QuickTime and aᆰ GIF decompressor .are needed to see this picture
QuickTime and aᆰ GIF decompressor .are needed to see this picture
QuickTime and aᆰ GIF decompressor .are needed to see this picture
![Page 3: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/3.jpg)
Turning Design into Interaction
• Basic interaction is already solved
• Most complex interactions are actually combinations of basic interactions
![Page 4: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/4.jpg)
For example
• <a href=”http://www.yahoo.com”>Yahoo</a>
• <a href=”#” onclick=”window.location(‘http://www.yahoo.com’);”>Yahoo</a>
![Page 5: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/5.jpg)
Case Study 1Search Tabs
![Page 6: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/6.jpg)
Tabs
• What are tabs?
• Unordered list
• Link to each section
• Javascript to do tab switching
![Page 7: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/7.jpg)
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
![Page 8: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/8.jpg)
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
![Page 10: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/10.jpg)
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
![Page 11: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/11.jpg)
Case Study 2Tree View
![Page 12: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/12.jpg)
The visual way
• Design hierarchy / nesting
• Design states
• open -
• closed +
![Page 13: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/13.jpg)
The Result?
Epic Fail
2.0
![Page 14: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/14.jpg)
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
![Page 15: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/15.jpg)
What is a tree menu?
• Interactions
• Open/Close Branch
• Skip Branches
• Information
• Position in hierarchy
• Branch open/closed
![Page 16: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/16.jpg)
Tree Structure in HTML
<ul><li><ul><li>Leaf 1</li><li>Leaf 2</li></ul></li><li>Leaf 3</li></ul>
![Page 17: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/17.jpg)
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>
![Page 18: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/18.jpg)
Conclusions
![Page 19: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/19.jpg)
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!
![Page 20: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/20.jpg)
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
![Page 21: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/21.jpg)
Authors of this talk
• Tom Hughes-Croucher
• Ben Hawkes-Lewis
• Christian Heilmann-Nobarrel
![Page 22: Designing For Use Not Visuals](https://reader034.vdocuments.us/reader034/viewer/2022042816/5599aa821a28abd2498b46ab/html5/thumbnails/22.jpg)
Thanks CCFlickr PhotosFlickr 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/