designing for use not visuals

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

Degraded statesuk.tv.yahoo.com www.yahoo.com

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/