Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Desirability, "Should I use it?" the sub-category of Layout is one of frequent discussion, especially in the latest wave of online products and how they handle content presentation and interaction.
The relationships between and among various page elements, how they play off of one another, constructively guiding a process, or organizationally segmenting a concept, can influence how accepted, by the user, the product is, and how Desirable, how much they (the users) will actually want to use it.
Today, we will look at an example of an Internet product with Fair Visual Hierarchy, representing a Layout value of +0.2.
Example: Fair Visual Hierarchy (value = +0.2)
Bellevue Community College‘s website presents an online experience that takes at least a few moments for both the new and somewhat familiar visitor to orient themselves and identify the important content and action elements of the page, resulting in this product being today’s example of Fair Visual Hierarchy.
The color scheme of Bellevue Community College drives two forms of immediately noticeable emphasis.
- All of the non-purple components of the website stand out in contrast to the very purple nature of the page, and
- Dark purple elements catch the user’s eyes and imply greater importance than the lighter colored elements.
Perhaps the element on this page that initially indicates a high degree of importance is the ‘Give to BCC’ button. The brightness of ‘Give to BCC’ with the heavy weighting given to its neighbors, marketing text ("flexible options for busy people", "emergency alerts") presents an initial, yet artificial, sense of greatest importance relative to the entire webpage and website.
Upon ‘escaping’ this visual local maximum of the page, two regions appear to compete for the next level in the visual hierarchy. They are…
- the menu section in the top-left of the page, and
- the large marketing / content region in the center of the page.
The top left menu prominently displays its content within a very dark, emphasized menu box, with the contrasting logo (containing a splash of red) further drawing attention and emphasis to the content within this region of the page.
The main content region of the page competes for attention through its use of non-purple (sometimes) and larger, bolder title fonts.
——————–
Given a few extra moments, the user can ascertain the most important elements, and from there, the appropriate degree of importance attributable to the various page elements and actions, with the help of colors, emphases, size, whitespace, and placement on the page. Through some simple changes the most important elements and user decisions can be engineered to be more readily apparent (along with secondary, tertiary, etc. elements) — immediately observable, not taking a few moments to sift through.
Menus
The page has many menu sections and supplemental actions scattered throughout. To better convey the hierarchical importance of the respective elements, the web product would be better served by bringing together the menus, collating the actions, and, on a local level, bringing attention to their respective subsets.
Color & Consistency
Consistency is a very important variable in understanding a product and assessing its overall User Experience (more information). Here too Consistency can be seen to impact the ease with which the Visual Hierarchy can be realized. The inconsistent use of such formatting tools as fonts, capitalization, and colors increases the difficulty of determining the hierarchy of the page content.
There do not appear to be any rules with respect to how the importance of an object correlates to colors, contrast, style (e.g. shadows, round corners), whitespace, or other visual elements of this product. Here, the visitors to Bellevue Community College’s website would benefit from designers’ implementation of some basic visual rules. For example, limit the darker colors and contrasting regions to the MOST IMPORTANT information on the page — pick 1. Also, use empty space between and among elements to create clear separations between concepts and informational groups.
——————–
The methods implemented on this website work against the observer in identifying and rapidly ascertaining the Visual Hierarchy of the webpage thereby resulting in Bellevue Community College’s website being a very good example of Fair Visual Hierarchy. The priorities of the page are not wholly elusive, but do take at least a few moments to judge and act upon.
Over the next several weeks I will be providing real-world examples of Layout values…
Clear Visual Hierarchy (value +0.4)
Fair Visual Hierarchy (value +0.2)
Poor Visual Hierarchy (value +0)
Non-negative Visual Flow (value +0.3)
Negative Visual Flow (value +0)
Poor Sequential Flow (value -0.15)
Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Desirability and Layout of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.
Enjoy!
Jeremy Horn
The Product Guy
| Add to Social Bookmarks: |  |
 |
 |
 |
 |
 |
 |
The Product Guy 