Whether you’re designing a page for a company, or an online portfolio for yourself, you need to keep in mind the audience you’re targeting, as well as the accessibility of the website. Jesse Garrett’s book The Elements of User Experience focuses on these aspects. Garrett puts across the importance of what he calls “The Five Planes,” listed below:
- Surface Plane
- Skeleton Plane
- Structure Plane
- Scope Plane
- Strategy Plane
The five planes
The surface plane is what you see initially when you visit a webpage. It’s the visual representation of the content through the use of the not visible HTML and CSS coding. Consider: visual design/appearance.
The Skeleton plane is just underneath the surface plane layer—it’s the positioning of all the buttons, pictures, text, etc. Consider: information/presentation of content, interface/arrangement, and navigation/mobility design.
The Structure plane is the wireframe stage—the mapping out of each individual page of the website and how they interact/connect with each other. Like a flow chart, it depicts how you get from one place to another, summarizing the navigation basics. Consider: interactive design/how it’s able to be used, information architecture/ organization of the content.The Scope plane lists the features of the site. This is where you take into account what your site needs to have, like an email subscription option, a shopping cart if it’s a store, or a comment box. Consider: functional specifications/feature lists, content requirements/description of those lists.
- Keep in mind what you are, and are not, building. This allows you to more easily separate out things that are necessary and things that are not.
Things to remember:
The strategy plane is when you consider what you want to get out of your site, as well as what you want the audience to get out of the site. Why are you making the site? What will it do and how will it affect people? How do you want it to affect people? Consider: User needs, site objectives.
- Brand identity: logos, colors, typeface, but also associations and the emotional reaction from the users. Some people choose not to pick a set identity, but many more decide to, as a way of controlling their image.
- Success metrics: This is where you find out if the site is meeting your goals. This aspects logs things like how long people spend on your site, how many visit, how many people email you with questions and about what—but these are all best to be viewed as one, instead of single elements, so you have the best understanding possible and aren’t accidentally misled.
- User/audience: in making your site as accessible as possible, sometimes it’s a good idea to utilize “user segmentation”—that is, separating them into different, smaller groups based on certain characteristics. Some of these include demographics (age, gender, education, etc) and psychographic (the user’s perception of the world, often relating to demographics).
Things to remember:
It’s important to perform research to figure out the usability of your site. You can use surveys, interviews, focus groups, or actual user tests to ascertain this. To make it easier to look at your site from different angles, Garrett suggests card sorting, in which you develop a few different profiles for very different people, assigning them specific personas (including history, education, work experience, and goals) in order to make it easier to imagine how certain people would react to your site’s content and layout.
Each of these planes are layered on top of one another in the order listed above. The
topmost layers are the more concrete and defined areas, while the lower ones are much
more abstract and conceptual. Like building blocks, they depend on each other for stability
and each are equally important.
Now, Garrett divides each category further into software and hypertext
interfaces. Software interface considers the site as a tool, and it’s concerned with the
tasks (or process people go through) that need to be accomplished to meet a goal. The
hypertext interface is focused on information that is relevant and easily digestible.