Two Diagrams of User Experience

J.J. Garrett and P. Morville have tried to describe user experience trough diagrams which provide the different aspects of user experience. The diagrams are quite different but they are both concentrated on the user experience of Web sites.

J.J. Garrett has worked as an information architect for a Web design consultancy. He got frustrated by the random use of different terms for the basic concepts like “information design” and “interface design” in the field. He created a diagram for himself to clarify the terms related to user experience. He found out that many people were downloading his diagram so he wrote a book about it.

The diagram and the book aren’t trying to tell how to create a good user experience but how to ask the right questions. Garrett calls them the elements of user experience. His opinion is that every possibility of every action the user could take has to be taken account to develop a user experience process. By braking the user experience into its component elements every problem can be solved.

The diagram consists of five planes: strategy, scope, structure, skeleton and surface. The five planes provide a conceptual framework for talking about user experience and the tools to solve the problems concerning UX. On each plane, the issues that must be dealt with become a little less abstract and a little more concrete. Each plane is dependent on the planes below it. For example, if the choices made on the surface plane won’t go together with the skeleton plane, the Web site might derail and the users wouldn’t like it. If some changes have to be made on a upper plane, the lower planes must bu re-evaluated also.

The planes have to be divided into two because of the duality in the nature of Web. Web can be seen as a software interface but also as a hypertext system. Web can be used to complete some tasks like paying bills or it can be used to get some information, for example from Wikipedia. This leads us to the final planes and terms to create the whole user experience.

The Strategy Plane: The strategy incorporates what the people running the site want to get out of it and what the users want to get out of the site. Both user needs and site objectives like business goals have to be taken into account.

The Scope Plane: This plane defines which features and functions are included on a site. On the software side the scope means the creation of functional specifications and on the information space side the content requirements are specified.

The Structure Plane: The structure tells how a user gets to a page and to which pages they can go from there. On the software side this is called interaction design and for information spaces the structure is the information architecture.

The Skeleton Plane: The skeleton shows the placement of different buttons, tabs, photos, and blocks of text on the site. Through the skeleton the arrangement is optimized. For software products, the skeleton includes interface design. The interface for an information space is called the navigation design. For both sides the information design must be addressed so that the presentation of information facilitates understanding.

The Surface Plane: The surface is the plane that can be seen as a Web pages made up of images and text. Here the visual design meaning the look of the finished product has to be created.

This division into planes provides a convenient way to think about user experience problems. In reality the lines between different areas are not so clearly drawn. Also, when creating a Web site, the content and the used technology must be considered thoroughly.

Another diagram of user experience has been made by P. Morville who has also worked as an information architect. This diagram is called the User Experience Honeycomb. The honeycomb was created to illustrate the different facets of user experience and to help clients understand why they must move beyond usability.

The diagram consists of seven hexagons:

Useful: The product or a system must be useful and designed with innovative solutions which will make the system even more useful.

Usable: A Web design can’t be made just with the interface-centered methods and perspectives of human-computer interaction but the ease of use is still very important. Usability is necessary but not sufficient.

Desirable: Emotional design (image, brand) must be considered, not only the efficiency of the system.

Findable: Web sites have to be designed so that the users can navigate and locate desired objects.

Accessible: Also people with disabilities should be able to access the Web sites.

Credible: A user must trust and believe the contents of a Web site and there’s certain design elements which can affect this.

Valuable: Sites must deliver value to the sponsors. If the Web site is non-profitable, the user experience must advance the mission.

Each facet of the honeycomb can serve as a singular looking glass, transforming what can be seen and done and enabling exploration beyond conventional boundaries.

In my opinion both of the diagrams can be considered at the same time while designing UX for a Web site. On the other hand they won’t provide a complete picture about user experience. The five elements give a concrete structure for a Web site as the honeycomb provides different viewpoints on the issue. The honeycomb helps to see the Web site from the users’ point of view and is useful when someone tries to explain user experience to the others. The elements ensure that all different aspects are observed and paid attention to in a right order and with correct relations. The elements also clarify the use of different terms on the field. The diagrams don’t define what user experience is but they bring up issues which could be considered while designing it.

Garrett, J.J. The Elements of User Experience. User-Centered Design for the Web.
Morville, P. User Experience Honeycomb.