the elements of user experience
the five planes of UX SURFACE web pages or app screens; images, text, things you can click SKELETON the optimized organization and arrangement of onscreen elements STRUCTURE the number of places you can go, organized contextually SCOPE features and functions contained within the site, system or app STRATEGY the site, system or app s reason for being, to the creator and to users
the elements of user experience TASKS INFO SURFACE visual design concrete SKELETON interface design navigation design STRUCTURE interaction design information architecture SCOPE functional specification content requirements STRATEGY user needs business objectives abstract
the strategy plane STRATEGY user needs business objectives user needs come from the people who will use the product. what do they want from us? how does that fit in with their other goals? business objectives define success, and typically mean making money, saving money or both. how will we know if we have succeeded?
the scope plane SCOPE functional specification content requirements strategy becomes scope when user needs and business objectives are translated into requirements for content & functionality functional specifications describe the feature set of the product what are we creating? how the customer explained it how the project manager heard it how the designer designed it how the engineer & developer built it how the customer really wanted it content requirements detail what information is required to provide value to users images? audio? video? dynamic real-time data?
the structure plane STRUCTURE interaction design information architecture scope is given structure when we define how the system responds to the user s actions. interaction design creates a structured experience of patterns and sequences that present appropriate options to users. information architecture defines the volume of content, along with how it s arranged and organized on each screen as well as across the entire product.
the skeleton plane SKELETON interface design UX D navigation design structure informs the skeleton of the system specifically, what it may look like and how users move through tasks and information. interface design determines how to best arrange and present visual elements for the user to interact with. navigation design provides onscreen elements that allow the user to move through tasks and information in an intuitive way.
the surface plane SURFACE visual design visual design uses colors, images, typography and effects, each specifically chosen to: a) support and reinforce the meaning of the content being presented b) guide the user where applicable through data, tasks or information c) reduce cognitive load and enable recognition and intuitive learning d) be culturally/socially appropriate
these planes are interdependent SKELETON STRUCTURE choices made on each plane affect the choices available on other planes.
elements must be flexible effort STRATEGY SCOPE STRUCTURE SKELETON SURFACE time requiring work involved with each plane to finish before work on the next can start is problematic and results in a frustrating user experience.
elements must be flexible effort STRATEGY SCOPE STRUCTURE SKELETON SURFACE time a better approach is to have work on each plane finish while work on the next plane is in progress, so the two inform each other.
additional factors it s not always that clear cut it can be difficult to tell which element is responsible for a UX problem. is the visual design inappropriate? is the underlying navigation the problem? is the browser interpreting the code incorrectly? sometimes it s more than one thing, and sometimes it s multiple things combined.
additional factors content is still king it s why users come to a site or open an app is what the user wants available? is the variety appropriate? is the content relevant to the reason they re here? do we have ways to catalog, track and present the content when, where and how the user wants it?
additional factors appropriate technology design ux dev the right platform is critical in experience delivery technology enables to extend across multiple OS, browsers, devices and form factors technology can t be seen as an add-on or a nice to have it needs to be inherent in how we design touchscreen interaction, for example, has changed the way we navigate digital information