ling inter faceS...
revea                (aka. Progress
                                    ive Disc
                     ...
Q. What is a revealing interface?




                                    http://www.janchipchase.com/blog/archives/2007/1...
A. An interface that hides complexity until initiated.




                                                         http:/...
Revealing Interfaces...


     » can be initiated with a click or a hover.
     » lead people to explore the site and unco...
Revealing Interfaces not only
hide complexity, but reduce
the number of separate pages
needed to complete a task.
“Hiding complexity through
ingenious mechanical doors or
tiny display screens is an overt
form of deception. If the deceit...
“Progressive disclosure is the
best tool so far: show people the
basics first, and once they
understand that, allow them t...
Revealing Interfaces are similar but not equal to
Progressive Disclosure (which has been around for many, many years)
The main difference is:

    The main difference is between Progressive Disclosure and a
    Revealing Interface is that P...
Examples of Re vealing Interfaces
Target.com
Yahoo / flickr
Microsoft
Google
Text
Amazon.com
Netflix.com
songza.com
Apple.com
tripadvisor.com
linkedin.com
More Examples
http://www.nintendo.com/
http://www.handmark.com
https://www.linkedin.com/
http://extjs.com/deploy/dev/examples/menu/menus.html
http://www.istockphoto.com/
So next time you’re creating an
interface, conceal complexity
and create a simpler experience
for your audience.
Jeremy Johnson

Hello! I’m an interaction designer (among other things) living and
Designing in the Dallas, TX area. By da...
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Revealing Interfaces
Upcoming SlideShare
Loading in...5
×

Revealing Interfaces

12,245

Published on

If you're an Interaction Designer, I'm sure you've noticed a new design pattern in the past year - one that doesn't really seem to have a proper name yet. In fact, you're probably already incorporating this pattern into your designs. It seems like almost every major redesign is leveraging this pattern to help hide complexity: Amazon, Linkedin, TripAdvisor - and sites like Target, Google, and Yahoo have been using it for awhile. It's a design pattern I'm calling "reveling interfaces".

Read more here: http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/

Published in: Business, Technology
2 Comments
53 Likes
Statistics
Notes
  • interfaces
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey Jeremy, i really enjoyed this presentation, especially after reading this yesterday: http://uxd.forumone.com/archives/152-Fly-out-Menus-are-Evil.html I suppose there are different opinions in UX as well! Although I see the difference in both arguments, I like the idea of reducing complexity with revealing interfaces.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
12,245
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
481
Comments
2
Likes
53
Embeds 0
No embeds

No notes for slide

Revealing Interfaces

  1. 1. ling inter faceS... revea (aka. Progress ive Disc u losure 2.0) ction A quick introd http://flickr.com/photos/knowprose/103650244/
  2. 2. Q. What is a revealing interface? http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html
  3. 3. A. An interface that hides complexity until initiated. http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html
  4. 4. Revealing Interfaces... » can be initiated with a click or a hover. » lead people to explore the site and uncover “power” features. » can reveal more information without leaving the page. » create a certain joy when exposing just what someone is looking for. » can be used for site navigation or single elements/actions. Amazon.com “Your Lists” interactive element
  5. 5. Revealing Interfaces not only hide complexity, but reduce the number of separate pages needed to complete a task.
  6. 6. “Hiding complexity through ingenious mechanical doors or tiny display screens is an overt form of deception. If the deceit feels less like malevolence, more like magic, then hidden complexities become more of a treat than a nuisance.” - John Maeda http://lawsofsimplicity.com/
  7. 7. “Progressive disclosure is the best tool so far: show people the basics first, and once they understand that, allow them to get to the expert features. But don't show everything all at once or you will only confuse people and they will waste endless time messing with features that they don't need yet” - Jakob Nielsen (2000) http://developers.slashdot.org/article.pl?sid=00/03/03/096223&mode=thread
  8. 8. Revealing Interfaces are similar but not equal to Progressive Disclosure (which has been around for many, many years)
  9. 9. The main difference is: The main difference is between Progressive Disclosure and a Revealing Interface is that PD is used mostly for step-by-step processes, where RI can be more fluid – it may reveal an action, a list, site navigation, some photos or just more information for a product or area. But the underlining theme: “removing initial complexity” stays the same! Want to know more about Progressive Disclosure? http://www.useit.com/alertbox/progressive-disclosure.html http://www.time-tripper.com/uipatterns/Progressive_Disclosure http://experiencedynamics.blogs.com/site_search_usability/2004/03/progressive_dis.html
  10. 10. Examples of Re vealing Interfaces
  11. 11. Target.com
  12. 12. Yahoo / flickr
  13. 13. Microsoft
  14. 14. Google
  15. 15. Text
  16. 16. Amazon.com
  17. 17. Netflix.com
  18. 18. songza.com
  19. 19. Apple.com
  20. 20. tripadvisor.com
  21. 21. linkedin.com
  22. 22. More Examples
  23. 23. http://www.nintendo.com/
  24. 24. http://www.handmark.com
  25. 25. https://www.linkedin.com/
  26. 26. http://extjs.com/deploy/dev/examples/menu/menus.html
  27. 27. http://www.istockphoto.com/
  28. 28. So next time you’re creating an interface, conceal complexity and create a simpler experience for your audience.
  29. 29. Jeremy Johnson Hello! I’m an interaction designer (among other things) living and Designing in the Dallas, TX area. By day I create interfaces, evangelize user experience, paint with pixels, as well as try to create change within my organization. At night I consume video games, movies, TV and other electronic media - while saving a little time to take a photo here and there. Learn More: http://www.jeremyjohnsononline.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×