26
UNDERSTANDING INTERFACES MoMA DESIGN Online STORE

The Elements of User Experience

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: The Elements of User Experience

UNDERSTANDINGINTERFACESMoMA DESIGN Online STORE

Page 2: The Elements of User Experience

THE FIVE PLANESOF USER EXPERIENCEUser-centered design for the web

Page 3: The Elements of User Experience

SURFACEPLANEOn the surface you see a series of web pages, made up of images and text. Some of these images are things you can click on, performing some sort of function such as taking you to a shopping cart. Some of these images are just illustrations, such as a photograph of a book cover or the logo of the site itself.

Page 4: The Elements of User Experience
Page 5: The Elements of User Experience
Page 6: The Elements of User Experience
Page 7: The Elements of User Experience
Page 8: The Elements of User Experience
Page 9: The Elements of User Experience

Logo

Photographs of the products

images

Icons

Page 10: The Elements of User Experience

Main: Blue and Black

Negative Space: White and Gray

New Products: Green

Sales: Red

Best Sellers: Purple

MoMA Exclusive: Orange

colors

Page 11: The Elements of User Experience

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 shopping cart button when you need it.

Page 12: The Elements of User Experience
Page 13: The Elements of User Experience

User & SearchUpper Right

Page 14: The Elements of User Experience

Menu Upper Left

Page 15: The Elements of User Experience

CategoriesUp & Left

Page 16: The Elements of User Experience

ProductsMiddle

Page 17: The Elements of User Experience

STRUCTUREPLANEThe structure is a more abstract skeleton of the site. The skeleton might define the placement of the elements on the page; the structure would define how users got to that page and where they could go when they were finished there. The skeleton might define the arrangement of navigational items allowing the users to browse categories; the structure would define what those categories actually were.

Page 18: The Elements of User Experience

STRUCTURE PLANE

Page 19: The Elements of User Experience

STRUCTURE PLANE

Page 20: The Elements of User Experience
Page 21: The Elements of User Experience

STRUCTURE PLANE

Page 22: The Elements of User Experience

SCOPEPLANEThe structure defines the way in which the various features andfunctions of the site fit together. Just what those features and functions are 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.

Page 23: The Elements of User Experience

SCOPE PLANE• Products

• Categories

• Login/Account

• Join

• Cart/Checkout

• Search

• Registry

• Favorites

• What’s popular

• Customer Reviews

• Related Items

• You/Other people may also like(d)

• Stores Info

• Museum Info

• Order Status/History

• Newsletter

• FAQ

• Customer Service

• Moma.org

• Facebook

Page 24: The Elements of User Experience

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.

Page 25: The Elements of User Experience

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 return

User 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

Page 26: The Elements of User Experience

Presented by: Bruna Calheiros - [email protected]

BE HERE NOWITP 2012