User Experience (UX) & Responsive Design - The Jesse James Garret Model Flashcards
5 planes of UX design
Surface
Skeleton
Structure
Scope
Strategy
Surface plane
On the surface you see a series of Web pages, made up of images and text. Some of the elements can be clickable and perform certain functions
Skeleton plane
The placement of buttons, tabs, photos, and blocks of text. The skeleton is designed to optimize the arrangement of these elements for maximum effect and
efficiency
Structure plane
The skeleton might define the placement of the interface elements on our checkout page; the structure would define how users got to that page and where they could go when they were finished there. The structure defines the actual movement across the site, such as page structure trees
Scope plane
The structure defines the way in which the various features and functions of the site fit together. Just what those features and functions are constitutes the scope of the site. Some sites that sell books offer a feature that enables users to save previously used addresses so they can be used again. The question of whether that feature—or any feature—is included on a site is a question of scope
Strategy plane
This strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well
eg: users want to buy products, site owners want to sell products
Ripple effect
Choosing “out of bounds” options on upper planes will cause reconsideration for decisions made on lower planes
To avoid this, begin working on the next plane before your current plane is fully solidified
eg: start working on your surface plane before you have finished your skeleton plane
Software side of a website
Mainly concerns “tasks”. The steps involved in a process and how people think about completing them. Here, we consider the site as a tool or set of tools that the user employs to accomplish one or more tasks
Hyper-text/information side of a website
What information the site offers and what it means to our users. Hypertext is about creating an information space that users can move through
Strategy plane (elements)
*For both software and information sides
User needs - the goals for the site
that come from outside our organization (specifically from the people who will use our site)
Site objectives - our own needs for the site (such as reaching $10,000 in sales)
Scope plane (elements)
Functional specifications - a detailed description of the “feature set” of the product (software side)
Content requirements - a description of the various content elements that will be required (information side)
Structure plane (elements)
Interaction design - we define how the system behaves in response to the user (software side)
Information architecture - the arrangement of content elements within the information space
Skeleton plane (elements)
Information design - the presentation of
information in a way that facilitates understanding
Interface design - arranging interface elements to enable users to interact with the functionality of the system (software side)
Navigation design - the set of screen elements that allow the user to move through the information architecture (information side)
Surface plane (elements)
Visual design - the look of the finished product (both software & information side)
Persona
Typical user of your site (has their specific needs)
