SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler 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

Mais conteúdo relacionado

Semelhante a Making Interfaces Intuitive

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 - SeattleDan Rubin
 
Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)Dan Rubin
 
Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)Dan Rubin
 
Web 2.0 - Teaching and Learning in the Cloud
Web 2.0 - Teaching and Learning in the CloudWeb 2.0 - Teaching and Learning in the Cloud
Web 2.0 - Teaching and Learning in the CloudChris Penny
 
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
 
Fabio Sergio: Design Thinking for the Future
Fabio Sergio: Design Thinking for the FutureFabio Sergio: Design Thinking for the Future
Fabio Sergio: Design Thinking for the Futurefrog
 
Impression To Expression
Impression To ExpressionImpression To Expression
Impression To ExpressionStephen Randall
 
Euruko 2009 - Software Craftsmanship
Euruko 2009 - Software CraftsmanshipEuruko 2009 - Software Craftsmanship
Euruko 2009 - Software CraftsmanshipPhillip Oertel
 

Semelhante a Making Interfaces Intuitive (8)

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
 
Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)Designing Virtual Realism (AEA09)
Designing Virtual Realism (AEA09)
 
Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)Designing Virtual Realism (@media 2009)
Designing Virtual Realism (@media 2009)
 
Web 2.0 - Teaching and Learning in the Cloud
Web 2.0 - Teaching and Learning in the CloudWeb 2.0 - Teaching and Learning in the Cloud
Web 2.0 - Teaching and Learning in the Cloud
 
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)
 
Fabio Sergio: Design Thinking for the Future
Fabio Sergio: Design Thinking for the FutureFabio Sergio: Design Thinking for the Future
Fabio Sergio: Design Thinking for the Future
 
Impression To Expression
Impression To ExpressionImpression To Expression
Impression To Expression
 
Euruko 2009 - Software Craftsmanship
Euruko 2009 - Software CraftsmanshipEuruko 2009 - Software Craftsmanship
Euruko 2009 - Software Craftsmanship
 

Mais de Vera Kovaleva (20)

44.Title slide.pdf
44.Title slide.pdf44.Title slide.pdf
44.Title slide.pdf
 
47.Thank you.pdf
47.Thank you.pdf47.Thank you.pdf
47.Thank you.pdf
 
49.Call to action.pdf
49.Call to action.pdf49.Call to action.pdf
49.Call to action.pdf
 
48.Questions.pdf
48.Questions.pdf48.Questions.pdf
48.Questions.pdf
 
42.Coordinate System.pdf
42.Coordinate System.pdf42.Coordinate System.pdf
42.Coordinate System.pdf
 
50.Last slide.pdf
50.Last slide.pdf50.Last slide.pdf
50.Last slide.pdf
 
43.Comparison.pdf
43.Comparison.pdf43.Comparison.pdf
43.Comparison.pdf
 
45.Second slides.pdf
45.Second slides.pdf45.Second slides.pdf
45.Second slides.pdf
 
46.Section.pdf
46.Section.pdf46.Section.pdf
46.Section.pdf
 
41.Continuum.pdf
41.Continuum.pdf41.Continuum.pdf
41.Continuum.pdf
 
36.Timeline.pdf
36.Timeline.pdf36.Timeline.pdf
36.Timeline.pdf
 
39.Cloud.pdf
39.Cloud.pdf39.Cloud.pdf
39.Cloud.pdf
 
34.Scheme.pdf
34.Scheme.pdf34.Scheme.pdf
34.Scheme.pdf
 
40.Circles.pdf
40.Circles.pdf40.Circles.pdf
40.Circles.pdf
 
35.Process.pdf
35.Process.pdf35.Process.pdf
35.Process.pdf
 
38.Multiplicity.pdf
38.Multiplicity.pdf38.Multiplicity.pdf
38.Multiplicity.pdf
 
37.Arrow.pdf
37.Arrow.pdf37.Arrow.pdf
37.Arrow.pdf
 
31.Mind.pdf
31.Mind.pdf31.Mind.pdf
31.Mind.pdf
 
32.Time.pdf
32.Time.pdf32.Time.pdf
32.Time.pdf
 
33.Orbit.pdf
33.Orbit.pdf33.Orbit.pdf
33.Orbit.pdf
 

Último

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024Janet Corral
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 

Último (20)

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 

Making Interfaces Intuitive

  • 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