Jesse James Garrett's "Meet the Elements"

Jesse James Garrett’s seminal work, The Elements of User Experience, offers a great introduction to the field of user experience, and remains a must-have for both novices and experienced practitioners alike even today, nearly twelve years since its first publication. The chapter read and discussed today, Meet the Elements, introduces Garrett’s widely-popularized and talked-about diagram of the five planes of user experience and the mutually-dependent relationships they have with each other in the implementation of large-scale web sites and commercial web applications. Garrett defines the five planes – strategy, scope, structure, skeleton, surface – as moving on a scale from abstract and broad to concrete and particular, and representing differing points temporally in the overall design process. Starting at the beginning of the design process, with the most abstract plane, is the strategy plane. Garrett defines it as not only the business and corporate interests behind making the site, but also the needs and wants of the users and target audiences directly interacting with the site itself. Next comes the scope plane, which refers to the overall functions, features and specifications the site will contain, in order to fulfill its objective and the strategy implemented earlier. Following the scope plane is the structure plane, or the overall navigation layouts and workflows which allow users to easily navigate the site through mouse clicks in order to accomplish their desired tasks. After the structure plane comes the skeleton plane, which Garrett defines as the placement and layout of elements along the interface, like any buttons, links, images, diagrams and blocks of text that compose the site’s overall layout. Lastly, and at the front-end of the site or web application is the surface plane, or the front-end graphical interfaces and visual designs that users directly interact with, in order to carry out the specific function they came to the site to fulfill.

The five planes of user experience offer a conceptual framework for designers and developers alike to begin to think about solving problems in the lead-up to launching commercial websites and applications. While each plane is directly influenced and defined by its preceding plane, Garrett says it’s a two-way street, and that the design process must always remain recursive and iterative, with designers sometimes reevaluating or rethinking certain design decisions on lower planes in response to questions or problems that arise on higher planes. Accordingly, Garrett also says that rather than making sure each preceding plane has been thoroughly completed before moving onto the next one, like finishing outlining the scope of the site before moving onto the overall structure and navigation flow, designers must only make sure to not finish a preceding plane before finishing a higher plane. Garrett then moves on to discussing the way that the Internet changed from hypertext information systems responsible solely for transmitting information, like in the early days, to complex graphical and software interfaces that change and adapt in response to user interaction and input. While it’s very rare that sites and applications fit neatly into either category, hypertext information space or software interface, terminology and specializations will vary depending on which side of the five planes they fall on. Having an understanding of the difference between either category of the Web leads to the diagram being divided among the five panels, so that strategy is composed of both user needs, or the goals for the site from a user’s perspective, and site objectives, or the business goals and objectives that go into launching a site or application. Moving up to the scope plane, on the software side are functional specifications, or detailed descriptions of the features that should be included on a site, and on the information space side are content requirements, or a list of the total content and information that should be included in the site. On the structure plane, interaction design takes place on the software side, where the overall interactions a user has with the system are defined, and information architecture takes place on the information side, where content elements are arranged and structured logically and intuitively. The skeleton plane is composed of information design on both sides, or the effective and intuitive presentation of information and content elements, interface design on the software side, or the arrangement of elements along the interface to facilitate easy navigation and understanding, and navigation design on the information side, or the arrangement of screen elements that allow users to effectively move through information architectures. Lastly, on the surface plane comes visual design on both sides, or the “look” in look and feel of graphical interfaces and web elements that the user first sees and interacts with.