SlideShare a Scribd company logo
1 of 28
Download to read offline
Making Your
Interface Invisible
           Leeds, May 2009

                   Dan Rubin
                   Sidebar Creative
Making Your Interface Invisible Leeds, May 2009




   Hi!
    Dan Rubin
    superfluousbanter.org
    @danrubin




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




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




      Web
      Standards
      Creativity
       by Dan Rubin
          (and 9
          other guys)




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
          Dan Rubin




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   What is an
   invisible
   interface?
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   “Invisible”
   doesn’t mean
   “not there.”
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   “The better the
   design, the more
   invisible It
   becomes.”
                                               — Jared M. Spool


©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   “What makes a
   design visible is
   the frustration it
   brings.”
                                               — Jared M. Spool


©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Designing for
   Intuition.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Focus on the
   Experience.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Mimic
   physical
   interfaces.
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




                                               Photo: Pascal Montsma (http://www.sxc.hu/photo/230015)
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




                                                  Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359)
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   If your
   interface needs
   instructions...
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Redesign it.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Intuitive
   interfaces are
   invisible.
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Learn from
   the desktop.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




                                               vs.


©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   Be consistent.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




    Be Consistent:

   Navigational
   elements.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




    Be Consistent:

   Button style
   and placement.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




    Be Consistent:

   Cursor
   treatments.

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




     Resources

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




     Virtual
     Great Designs Should Be Experienced and Not Seen –
     Jared M. Spool
     http://www.uie.com/articles/experiencedesign/


     Physical
     Don’t Make Me Think – Steve Krug
     The Design of Everyday Things – Donald Norman




©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Leeds, May 2009




   fin.
   slideshare.net/danrubin
   twitter: @danrubin




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

More Related Content

More from Dan Rubin

Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)Dan Rubin
 
Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Dan Rubin
 
Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009Dan Rubin
 
Reaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, BostonReaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, BostonDan Rubin
 
Details Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, BostonDetails Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, BostonDan Rubin
 
Design Is In The Details - WV 2008
Design Is In The Details - WV 2008Design Is In The Details - WV 2008
Design Is In The Details - WV 2008Dan Rubin
 

More from Dan Rubin (6)

Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)Designing Virtual Realism (Web09)
Designing Virtual Realism (Web09)
 
Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)Designers & Developers Sitting in a Tree (Web09)
Designers & Developers Sitting in a Tree (Web09)
 
Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009Design and the Art of Freelancing - AWDG April 2009
Design and the Art of Freelancing - AWDG April 2009
 
Reaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, BostonReaching Stylesheet Nirvana, Web Design World 2008, Boston
Reaching Stylesheet Nirvana, Web Design World 2008, Boston
 
Details Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, BostonDetails Make the Difference, Web Design World 2008, Boston
Details Make the Difference, Web Design World 2008, Boston
 
Design Is In The Details - WV 2008
Design Is In The Details - WV 2008Design Is In The Details - WV 2008
Design Is In The Details - WV 2008
 

Recently uploaded

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryrioverosanniejoy
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一F dds
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 

Recently uploaded (20)

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 

Making Your Interface Invisible - FOWA Tour 2009 - Leeds

  • 1. Making Your Interface Invisible Leeds, May 2009 Dan Rubin Sidebar Creative
  • 2. Making Your Interface Invisible Leeds, May 2009 Hi! Dan Rubin superfluousbanter.org @danrubin Me, according to nGen works @ http://happywebbies.com/ ©2009 Dan Rubin » http://sidebarcreative.com
  • 3. Making Your Interface Invisible Leeds, May 2009 Web Standards Creativity by Dan Rubin (and 9 other guys) ©2009 Dan Rubin » http://sidebarcreative.com
  • 4. Making Your Interface Invisible Leeds, May 2009 Pro CSS Techniques by Jeff Croft Ian Lloyd Dan Rubin ©2009 Dan Rubin » http://sidebarcreative.com
  • 5. Making Your Interface Invisible Leeds, May 2009 What is an invisible interface? ©2009 Dan Rubin » http://sidebarcreative.com
  • 6. Making Your Interface Invisible Leeds, May 2009 “Invisible” doesn’t mean “not there.” ©2009 Dan Rubin » http://sidebarcreative.com
  • 7. Making Your Interface Invisible Leeds, May 2009 “The better the design, the more invisible It becomes.” — Jared M. Spool ©2009 Dan Rubin » http://sidebarcreative.com
  • 8. Making Your Interface Invisible Leeds, May 2009 “What makes a design visible is the frustration it brings.” — Jared M. Spool ©2009 Dan Rubin » http://sidebarcreative.com
  • 9. Making Your Interface Invisible Leeds, May 2009 Designing for Intuition. ©2009 Dan Rubin » http://sidebarcreative.com
  • 10. Making Your Interface Invisible Leeds, May 2009 Focus on the Experience. ©2009 Dan Rubin » http://sidebarcreative.com
  • 11. Making Your Interface Invisible Leeds, May 2009 Mimic physical interfaces. ©2009 Dan Rubin » http://sidebarcreative.com
  • 12. Making Your Interface Invisible Leeds, May 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 13. Making Your Interface Invisible Leeds, May 2009 Photo: Pascal Montsma (http://www.sxc.hu/photo/230015) ©2009 Dan Rubin » http://sidebarcreative.com
  • 14. Making Your Interface Invisible Leeds, May 2009 Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359) ©2009 Dan Rubin » http://sidebarcreative.com
  • 15. Making Your Interface Invisible Leeds, May 2009 If your interface needs instructions... ©2009 Dan Rubin » http://sidebarcreative.com
  • 16. Making Your Interface Invisible Leeds, May 2009 Redesign it. ©2009 Dan Rubin » http://sidebarcreative.com
  • 17. Making Your Interface Invisible Leeds, May 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 18. Making Your Interface Invisible Leeds, May 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 19. Making Your Interface Invisible Leeds, May 2009 Intuitive interfaces are invisible. ©2009 Dan Rubin » http://sidebarcreative.com
  • 20. Making Your Interface Invisible Leeds, May 2009 Learn from the desktop. ©2009 Dan Rubin » http://sidebarcreative.com
  • 21. Making Your Interface Invisible Leeds, May 2009 vs. ©2009 Dan Rubin » http://sidebarcreative.com
  • 22. Making Your Interface Invisible Leeds, May 2009 Be consistent. ©2009 Dan Rubin » http://sidebarcreative.com
  • 23. Making Your Interface Invisible Leeds, May 2009 Be Consistent: Navigational elements. ©2009 Dan Rubin » http://sidebarcreative.com
  • 24. Making Your Interface Invisible Leeds, May 2009 Be Consistent: Button style and placement. ©2009 Dan Rubin » http://sidebarcreative.com
  • 25. Making Your Interface Invisible Leeds, May 2009 Be Consistent: Cursor treatments. ©2009 Dan Rubin » http://sidebarcreative.com
  • 26. Making Your Interface Invisible Leeds, May 2009 Resources ©2009 Dan Rubin » http://sidebarcreative.com
  • 27. Making Your Interface Invisible Leeds, May 2009 Virtual Great Designs Should Be Experienced and Not Seen – Jared M. Spool http://www.uie.com/articles/experiencedesign/ Physical Don’t Make Me Think – Steve Krug The Design of Everyday Things – Donald Norman ©2009 Dan Rubin » http://sidebarcreative.com
  • 28. Making Your Interface Invisible Leeds, May 2009 fin. slideshare.net/danrubin twitter: @danrubin ©2009 Dan Rubin » http://sidebarcreative.com