SlideShare una empresa de Scribd logo
1 de 30
Descargar para leer sin conexión
Making Your
Interface Invisible
           Seattle, July 2009

                     Dan Rubin
                     Sidebar Creative
Making Your Interface Invisible Seattle, July 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 Seattle, July 2009




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




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




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
          Dan Rubin




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




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




   “Invisible”
   doesn’t mean
   “not there.”
©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


©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


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




   Designing for
   Intuition.

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




   Focus on the
   Experience.

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




   Mimic
   physical
   interfaces.
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible 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)
©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Seattle, July 2009




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




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




   Redesign it.

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




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




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




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




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




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




   Learn from
   the desktop.

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




                                               vs.


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




   Be consistent.

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




    Be Consistent:

   Navigational
   elements.

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




    Be Consistent:

   Button style
   and placement.

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




    Be Consistent:

   Cursor
   treatments.

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




     Resources

©2009 Dan Rubin » http://sidebarcreative.com
Making Your Interface Invisible Seattle, July 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 Seattle, July 2009




   fin.
   slideshare.net/danrubin
   twitter: @danrubin




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

Más contenido relacionado

Destacado

Király józsefné óravázlat
Király józsefné  óravázlatKirály józsefné  óravázlat
Király józsefné óravázlat
HUFR2C
 

Destacado (13)

Király józsefné óravázlat
Király józsefné  óravázlatKirály józsefné  óravázlat
Király józsefné óravázlat
 
zilver on the brand/design interface
zilver on the brand/design interfacezilver on the brand/design interface
zilver on the brand/design interface
 
Be Your Own Boss - An Introduction to freelancing
Be Your Own Boss - An Introduction to freelancingBe Your Own Boss - An Introduction to freelancing
Be Your Own Boss - An Introduction to freelancing
 
Mastering the Details in Interface Design - Web Design World 2009 - Seattle
Mastering the Details in Interface Design - Web Design World 2009 - SeattleMastering the Details in Interface Design - Web Design World 2009 - Seattle
Mastering the Details in Interface Design - Web Design World 2009 - Seattle
 
Freelancing for SMEs and startups
Freelancing for SMEs and startupsFreelancing for SMEs and startups
Freelancing for SMEs and startups
 
How to do freelancing
How to do freelancingHow to do freelancing
How to do freelancing
 
Design Thinking - Case Studies
Design Thinking - Case StudiesDesign Thinking - Case Studies
Design Thinking - Case Studies
 
Ux,UI & wireframes
Ux,UI & wireframesUx,UI & wireframes
Ux,UI & wireframes
 
User centered design in mobile app development
User centered design in mobile app developmentUser centered design in mobile app development
User centered design in mobile app development
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Interface Design Basics (english)
Interface Design Basics (english)Interface Design Basics (english)
Interface Design Basics (english)
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Prototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, PrototypesPrototyping Workshop - Wireframes, Mockups, Prototypes
Prototyping Workshop - Wireframes, Mockups, Prototypes
 

Más de Dan 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, Boston
Dan 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, Boston
Dan 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 2008
Dan Rubin
 

Más de Dan Rubin (8)

Designing Virtual Realism - AEA Chicago, 2009
Designing Virtual Realism - AEA Chicago, 2009Designing Virtual Realism - AEA Chicago, 2009
Designing Virtual Realism - AEA Chicago, 2009
 
Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)
 
Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)
 
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)
 
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
 

Último

怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
210303105569
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 

Último (20)

Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 

Making Your Interface Invisible - Refresh Seattle - July 2009

  • 1. Making Your Interface Invisible Seattle, July 2009 Dan Rubin Sidebar Creative
  • 2. Making Your Interface Invisible Seattle, July 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 Seattle, July 2009 Web Standards Creativity by Dan Rubin (and 9 other guys) ©2009 Dan Rubin » http://sidebarcreative.com
  • 4. Making Your Interface Invisible Seattle, July 2009 Pro CSS Techniques by Jeff Croft Ian Lloyd Dan Rubin ©2009 Dan Rubin » http://sidebarcreative.com
  • 5. Making Your Interface Invisible Seattle, July 2009 What is an invisible interface? ©2009 Dan Rubin » http://sidebarcreative.com
  • 6. Making Your Interface Invisible Seattle, July 2009 “Invisible” doesn’t mean “not there.” ©2009 Dan Rubin » http://sidebarcreative.com
  • 7. Making Your Interface Invisible Seattle, July 2009 “The better the design, the more invisible it becomes.” — Jared M. Spool ©2009 Dan Rubin » http://sidebarcreative.com
  • 8. Making Your Interface Invisible Seattle, July 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 Seattle, July 2009 Designing for Intuition. ©2009 Dan Rubin » http://sidebarcreative.com
  • 10. Making Your Interface Invisible Seattle, July 2009 Focus on the Experience. ©2009 Dan Rubin » http://sidebarcreative.com
  • 11. Making Your Interface Invisible Seattle, July 2009 Mimic physical interfaces. ©2009 Dan Rubin » http://sidebarcreative.com
  • 12. Making Your Interface Invisible Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 13. Making Your Interface Invisible Seattle, July 2009 Photo: Pascal Montsma (http://www.sxc.hu/photo/230015) ©2009 Dan Rubin » http://sidebarcreative.com
  • 14. Making Your Interface Invisible Seattle, July 2009 Photo: Ivaylo Georgiev (http://www.sxc.hu/photo/426359) ©2009 Dan Rubin » http://sidebarcreative.com
  • 15. Making Your Interface Invisible Seattle, July 2009 If your interface needs instructions... ©2009 Dan Rubin » http://sidebarcreative.com
  • 16. Making Your Interface Invisible Seattle, July 2009 Redesign it. ©2009 Dan Rubin » http://sidebarcreative.com
  • 17. Making Your Interface Invisible Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 18. Making Your Interface Invisible Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 19. Making Your Interface Invisible Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 20. Making Your Interface Invisible Seattle, July 2009 ©2009 Dan Rubin » http://sidebarcreative.com
  • 21. Making Your Interface Invisible Seattle, July 2009 Intuitive interfaces are invisible. ©2009 Dan Rubin » http://sidebarcreative.com
  • 22. Making Your Interface Invisible Seattle, July 2009 Learn from the desktop. ©2009 Dan Rubin » http://sidebarcreative.com
  • 23. Making Your Interface Invisible Seattle, July 2009 vs. ©2009 Dan Rubin » http://sidebarcreative.com
  • 24. Making Your Interface Invisible Seattle, July 2009 Be consistent. ©2009 Dan Rubin » http://sidebarcreative.com
  • 25. Making Your Interface Invisible Seattle, July 2009 Be Consistent: Navigational elements. ©2009 Dan Rubin » http://sidebarcreative.com
  • 26. Making Your Interface Invisible Seattle, July 2009 Be Consistent: Button style and placement. ©2009 Dan Rubin » http://sidebarcreative.com
  • 27. Making Your Interface Invisible Seattle, July 2009 Be Consistent: Cursor treatments. ©2009 Dan Rubin » http://sidebarcreative.com
  • 28. Making Your Interface Invisible Seattle, July 2009 Resources ©2009 Dan Rubin » http://sidebarcreative.com
  • 29. Making Your Interface Invisible Seattle, July 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
  • 30. Making Your Interface Invisible Seattle, July 2009 fin. slideshare.net/danrubin twitter: @danrubin ©2009 Dan Rubin » http://sidebarcreative.com