Designing For Use Not Visuals

1,529 views
1,477 views

Published on

This was a talk about "accessibility" I gave the the Web Developers conference at Yahoo in London in December 2007.

The basic premise is that accessibility isn't something special but comes from designing for use from the beginning.

While one of the examples in the slides showing bad practice is from the Yahoo User Interface library I'd like to emphasise that that the YUI is mostly excellent for accessibility. It only goes to show that even great developers can make mistakes when they don't think things through all the way. This was covered in the talk but isn't in the slides.

While one of

Published in: Business, Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,529
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
46
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Designing For Use Not Visuals

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

×