JohnMees from High to Low

desirabilityQuick-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 Clear Visual Hierarchy, representing a Layout value of +0.4.

Example: Clear Visual Hierarchy (value = +0.4)

JohnMees.com provides a very good, simple example of a Clear Visual Hierarchy.

00_john_mees_homepage

The most important section within the page hierarchy is the middle section of the page clearly indicated through its prominent centralized placement, large font headers, elegantly large and simple iconography, and high-contrast text on non-complex backgrounds. This section is valuable in its efforts of branding and immediately conveying the purpose of the site and the content to expect within.

01_john_mees_key_messaging

The obvious next level in the page hierarchy is the title region of the page, the individual’s name, John Mees. While having large, bold text, it is visually stressed to a lesser degree through the placement of a lower contrasting, patterned background behind the producer’s name.

02_john_mees_title

Finally, in the Visual Hierarchy of the page is the footer region, with decreased text and hierarchically organized from right, Contact John, to left, John’s details, from highest contrast section header to lowest contrasting.

03_john_mees_footer

The Clear Visual Hierarchy of JohnMees.com is immediately obvious to everyone who visits, organized into basic layers, presenting a very pleasing and Desirable experience, both in graphic design, and in the coincident advancement of the marketing from most important to least important.

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

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Magnolia Google Add to Mixx!
Advertisements
This entry was posted in user experience and tagged , , , , , , , , by Jeremy Horn. Bookmark the permalink.

About Jeremy Horn

Jeremy Horn is an award-winning, product management veteran with 2 decades of experience leading and managing product teams. Jeremy has held various executive and advisory roles, from founder of several start-ups to driving diverse organizations in online services, consumer products, and wearables. As founder of The Product Group, he has created the largest product management meetup in the world and hosts the annual awarding of The Best Product Person. Accelerating the next evolution of product management, Jeremy acted as creator and instructor of the 10-week product management course at General Assembly and The New School, and mentoring at Women 2.0 and Lean Startup Machine (where is he also a judge). To see where Jeremy is now check him out at (1) http://linkedin.com/in/TheProductGuy and (2) http://TheProductGuy.com