making your interface invisible - refresh seattle - july 2009

30
Making Your Interface Invisible Seattle, July 2009 Dan Rubin Sidebar Creative

Upload: dan-rubin

Post on 01-Nov-2014

1.691 views

Category:

Design


2 download

DESCRIPTION

A short session (~30 minutes) for Refresh Seattle.Application design is about the experience: allowing users to perform specific tasks quickly and easily. When this is done correctly, the interface becomes transparent — users only notice your application's interface when it gets in their way.By taking cues from the world of product design, and testing with real people throughout the design process, we can create interfaces that users never even notice.

TRANSCRIPT

Page 1: Making Your Interface Invisible - Refresh Seattle - July 2009

Making Your Interface Invisible

Seattle, July 2009

Dan RubinSidebar Creative

Page 2: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Me, according to nGen works @ http://happywebbies.com/

Hi!Dan Rubinsuperfluousbanter.org@danrubin

Page 3: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Web StandardsCreativity

Dan Rubin(and 9 other guys)

by

Page 4: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Pro CSSTechniques

Jeff CroftIan LloydDan Rubin

by

Page 5: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

What is an invisible interface?

Page 6: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

“Invisible” doesn’t mean “not there.”

Page 7: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

“The better the design, the more invisible it becomes.”

— Jared M. Spool

Page 8: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

“What makes a design visible is the frustration it brings.”

— Jared M. Spool

Page 9: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Designing for Intuition.

Page 10: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Focus on the Experience.

Page 11: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Mimic physical interfaces.

Page 12: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Page 13: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Photo: Pascal Montsma (http://www.sxc.hu/photo/230015)

Page 14: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359)

Page 15: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

If your interface needs instructions...

Page 16: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Redesign it.

Page 17: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Page 18: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Page 19: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Page 20: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Page 21: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Intuitive interfaces are invisible.

Page 22: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Learn fromthe desktop.

Page 23: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

vs.

Page 24: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Be consistent.

Page 25: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Navigational elements.

Be Consistent:

Page 26: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Button style and placement.

Be Consistent:

Page 27: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Cursor treatments.

Be Consistent:

Page 28: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

Resources

Page 29: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

VirtualGreat Designs Should Be Experienced and Not Seen –

Jared M. Spoolhttp://www.uie.com/articles/experiencedesign/

PhysicalDon’t Make Me Think – Steve Krug

The Design of Everyday Things – Donald Norman

Page 30: Making Your Interface Invisible - Refresh Seattle - July 2009

©2009 Dan Rubin » http://sidebarcreative.com

Making Your Interface Invisible Seattle, July 2009

fin.slideshare.net/danrubintwitter: @danrubin