The Elements of User Experience


Published on

Published in: Technology, Design

The Elements of User Experience

  2. 2. THE FIVE PLANESOF USER EXPERIENCEUser-centered design for the web
  3. 3. SURFACEPLANEOn the surface you see a series of web pages, made up of images andtext. Some of these images are things you can click on, performing somesort of function such as taking you to a shopping cart. Some of theseimages are just illustrations, such as a photograph of a book cover or thelogo of the site itself.
  4. 4. images Photographs of the products Logo Icons
  5. 5. colors Main: Blue and Black Negative Space: White and Gray New Products: Green Sales: Red Best Sellers: Purple MoMA Exclusive: Orange
  6. 6. SKELETONPLANEBeneath that surface is the skeleton of the site: the placement ofbuttons, tabs, photos, and blocks of text. The skeleton is designed tooptimize the arrangement of these elements for maximum effect andefficiency—so that you remember the logo and can find that shoppingcart button when you need it.
  7. 7. User & SearchUpper Right
  8. 8. MenuUpper Left
  9. 9. CategoriesUp & Left
  10. 10. ProductsMiddle
  11. 11. STRUCTUREPLANEThe structure is a more abstract skeleton of the site. The skeleton mightdefine the placement of the elements on the page; the structure woulddefine how users got to that page and where they could go when theywere finished there. The skeleton might define the arrangement ofnavigational items allowing the users to browse categories; the structurewould define what those categories actually were.
  15. 15. SCOPEPLANEThe structure defines the way in which the various features andfunctions of the site fit together. Just what those features and functionsare constitutes the scope of the site. Some sites that sell booksoffer a feature that enables users to save previously used addressesso they can be used again. The question of whether that feature—orany feature—is included on a site is a question of scope.
  16. 16. SCOPE PLANE• Products • Order Status/History• Categories • Newsletter• Login/Account • FAQ• Join • Customer Service• Cart/Checkout •• Search • Facebook• Registry• Favorites• What’s popular• Customer Reviews• Related Items• You/Other people may also like(d)• Stores Info• Museum Info
  17. 17. STRATEGYPLANEThe scope is fundamentally determined by the strategy of the site.This strategy incorporates not only what the people running the sitewant to get out of it but what the users want to get out of the site aswell. In the case of our bookstore example, some of the strategicobjectives are pretty obvious: Users want to buy books, and we wantto sell them. Other objectives might not be so easy to articulate.
  18. 18. STRATEGY PLANEMoMa Design Store Strategic Objectives: • Generate sales of design store items • Increase sales by suggesting items that users may like, based on their browsing history • Display appealing photography of items for sale • Provide a user friendly experience, to encourage customers to returnUser Objectives: • Purchase uniquely designed objects for oneself for as a gift • Easily browse items to make the perfect selection • Receive as much detailed information about the objects as possible • Sort items based on different criteria (i.e. price) • Hassle free returns and/or a satisfaction guarantee
  19. 19. BE HERE NOWITP 2012 Calheiros - bru.calheiros@nyu.eduPresented by: Bruna
  1. A particular slide catching your eye?

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