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 Clean Grouping, representing a Layout value of +0.3.
Intro Grouping
Grouping by proximity, alignment, boxing, whitespace, or other visual methods is frequently done to convey similar (or dissimilar) concepts and/or functionality. The correct use of element Grouping and interaction between the various groups can enhance the understanding and pleasurable / Desirable effects of interface elements both near and far.
Grouping of Search
For example, picture your typical website search page. Perhaps there is a region, consisting of a Grouping of similar elements, that is used for filtering search results. This region will most likely be aligned so as to be visually related to the search results, that content upon which they will have direct influence. Yet another region may be established to save frequently performed searches. Depending on the type of web product, the importance of saving a search, and the sought after tone for the page, various Groupings and alignments between the region for saving and the region for initiating searches will exist. How the various elements relate to and interact with one another, and how they guide users’ behaviors around the page (and product) can quickly degenerate into a ‘painful’ experience, if not carefully considered. Depending on the target audience and the overall purpose for the web product, the various page element Groupings within the Layout may either constructively, or destructively, impact the overall Desirability of the web product.
Example: Clean Grouping (value = +0.3)
Digitaloop is a clear example of a web product with Clean Grouping.
A visitor to Digitaloop is presented with strata of simply organized groups.
The first group, isolated by margins and a horizontal line, is the name of the individual that the product is about..
In closest proximity to the ‘Nick Lee’ group is the ‘About’ group, also segmented from the other content of the page by horizontal lines and spacing. Through proximity it is easy to extrapolate a strongly relevant relationship between the ‘Nick Lee’ and ‘About’ groups, with the ‘About’ group providing an overview of the ‘Nick Lee’ group.
Together, the ‘Nick Lee’ and ‘About’ groups can further be seen to be contained within a super-group (‘Intro Group’), representing the introduction to the content of the web product, the group bounded by the top of the view and the middle visually contrasting ‘Latest Project’ group.
The next stratum presents the next group. This group, the ‘Latest Project’ group, provides a window into project names, summaries, links, and screenshots.
The bounds of this group are established through the contrasting of this region (lightness of the ‘Latest Project’ group, verses the darkness of the groups above and below). The ‘Latest Project’ group provides the next level of detail to its neighboring ‘Intro Group,’ and is controlled by the user interface elements within ‘Previous Projects.’
The ‘Previous Projects’ contains an aggregation of all projects. When one group controls or impacts the behavior of another group, that level of interaction represents a strong inter-group relationship. The proximity, alignment, and content descriptors of the groups ‘Latest Project’ and ‘Previous Projects’ reinforce a strong inter-group relationship. The grouped projects of the ‘Previous Projects’ group serve as an interface control mechanism (changing the content of the ‘Latest Project’ group to be that of whichever project was clicked within the ‘Previous Projects’ group) for the ‘Latest Project’ group, its immediate neighbor.
The second to last stratum, the ‘Nick Likes’ group, clusters all of the likes and interests of Nick Lee, from websites to photography.
Finally, the ‘Footer’ group creates the boundary for the bottom of the interface, strongly separated from all other content of the page through the use of its white background and spacing.
Grouping within this web product serves to convey relationships of one set of data (e.g. ‘Latest Project’) to another (e.g. ‘Previous Projects’), ensuring no unnecessary redundancy of information, keeping all similar information together, maintaining close proximity between groups that interact with one another, and thereby earning Digitaloop the recognition of being a very good, and easy to follow, example of Clean Grouping.
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)
Clean Grouping (value +0.3)
Inconsistent Grouping (value +0.15)
Poor Grouping (value +0)
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
Like this:
Like Loading...
