Embed Size (px)
DESCRIPTION
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
Citation preview
Designing for interactions not visuals
Creative Commons
• 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
Turning Design into Interaction
• Basic interaction is already solved
• Most complex interactions are actually combinations of basic interactions
For example
• <a href=”http://www.yahoo.com”>Yahoo</a>
• <a href=”#” onclick=”window.location(‘http://www.yahoo.com’);”>Yahoo</a>
Case Study 1Search Tabs
Tabs
• What are tabs?
• Unordered list
• Link to each section
• Javascript to do tab switching
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
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
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
Case Study 2Tree View
The visual way
• Design hierarchy / nesting
• Design states
• open -
• closed +
The Result?
Epic Fail
2.0
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
What is a tree menu?
• Interactions
• Open/Close Branch
• Skip Branches
• Information
• Position in hierarchy
• Branch open/closed
Tree Structure in HTML
<ul><li><ul><li>Leaf 1</li><li>Leaf 2</li></ul></li><li>Leaf 3</li></ul>
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>
Conclusions
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!
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
Authors of this talk
• Tom Hughes-Croucher
• Ben Hawkes-Lewis
• Christian Heilmann-Nobarrel
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/
