Visual Hierarchy in Mobile Design

According to the first definition in dictionary.com, hierarchy is defined as “any system of persons or things ranked one above another”. Based on that definition, visual hierarchy would then simply be the visual system of ranked elements, one above another – or how the visual elements rank and relate to each other. Some elements on the page have more visual weight than others, these elements grab the attention of your eye and draw focus on them.

Since hierarchy means a “system of things ranked…” this indicates that the system of design elements must be “ranked” in order of heavier weight to lighter weight which hints that a good hierarchical design is more than just black and white. There must be other elements that progress from one extreme to the other. This visual progression from heavy to light, guides the viewer through the design and if designed right, you can guide the viewer right to where you want them.

Unfortunately, many of the new mobile apps are not designed with visual hierarchy in mind. While mobile apps (native and/or browser-based) react differently and look differently than a full display browser app or site, there is still a need to create an ordered and visually appealing design for a comfortable and enjoyable user experience. It seems that there is a lack of design basics in today’s mobile applications, most likely because of the restricted display size. But these basic design principles, like visual hierarchy, are still very important and shouldn’t be neglected.

Contrast

One of the easiest ways to create visual hierarchy in a small mobile display is to take advantage of contrasting elements. Contrast can be built in many different ways, but the basics include the use of color, shape, size and relationship. Contrast is about creating a difference between elements allowing certain elements to stand out and weigh more – visually. Generally, you’ll want just a handful of elements to grab the user’s eye while the others will need to blend into each other a bit more. If all your elements are trying to take center stage, you’ll just create chaos and confusion.

Creating Contrast: Color

Color is the quickest and easiest way to create contrast on your mobile design. You don’t have a lot of screen real estate on mobile devices (even tablets) like you do on a regular display, so the use of color in mobile can be more important. On a display you have room to create a color hierarchy and variations between elements to create a more subtle contrast amongst the overall view. This allows you to avoid sharp contrasts that can tend to be harsher on the eyes.

But with mobile screens you don’t really have a ton of room to create a nice color hierarchy, so sharper contrasts may be necessary in order to create visual emphasis. There is good news though, just the sheer function of mobile devices makes this more acceptable so don’t be afraid to use stark contrasting colors to create visual emphasis. Mobile users use their devices outside, the screens are smaller and put out less physical light than a larger display – this allows you to use brighter, bolder and sharper contrasting colors without piercing your user’s eyes.

Creating Contrast: Shape

Squares, circles, ovals, rounded rectangles, triangles – all these different shapes have visual weight and the use of differently shaped elements can be another great way to create contrast. For mobile, using shape to create contrast can be a difficult thing – it’s a bit harder to throw up a bold, circular shaped badge to grab your user’s attention with limited space to work with. But, mixing up sharper edged shapes with more rounded shapes (rectangles vs. rounded rectangles) can create a more subtle contrast that can guide your user’s eyes.

Creating Contrast: Size and Relationship

So, this one is pretty obvious. Bigger elements demand more attention than smaller ones. With mobile it’s a bit tricky to make elements really big because other elements will completely get lost on the screen. You may not want only on or two elements to stand out. If you think in terms of the objects’ relative sizes to each other than creating a visual hierarchy can be easier.

Think about the relationship between each element in the design – the proportional relationship between objects. Instead of having one big thing on the page amongst a bunch of other little things, create one not-so-big thing, a couple of medium sized things and then maybe a few smaller things. This way the size relationship can balance each other on the screen while at the same time creating a visual hierarchy. On the mobile screen, gigantic elements can be very demanding on the user and small elements can be quickly lost. Size can create contrast, but that lack of balance can create confusion.

Continuance

Continuance in design is essentially just the user’s eye moving smoothly from one element to the next, and to the next. In typical display sizes, this can be really easy. Mobile however, can be harder because of, you guessed it, screen size. You just don’t have the space to grab the user’s eye and then gently take them on a tour throughout the whole page. The entire mobile screen can be quickly seen, so the user can almost scan the entire view in one swipe – without one eye moving.

With mobile, instead of the stereotypical eye direction found in full display websites, continuance is more subtle and more of a way to directing the user to what comes next – or where to go next. Mobile sites generally don’t have nearly as much content in one view as its display counterpart view, so navigation (like list items and buttons) becomes more important and continuance is vital in directing the user to where you want them to go, or navigate. Three great techniques you can use to create a subtle continuance in mobile are: line, similarity and space.

Creating Continuance: Lines

The use of line is the easiest way. One of the best examples of this is on the basic list item. A very standard and user-friendly mobile element is the list. Not only does the list provide a simple and easy way to create a clean navigation, the list item itself is a great example of line being used to create continuance. Each list item generally has a top and bottom horizontal line or shadow that guides the user’s eye from the left aligned text or title of the list item over to the traditional arrow on the right side of the list item that indicates there is more to this list item.

This type of line is known as a contour line, a line that is used to define edges and create boundaries around elements. But other types of lines can be easily used for creating continuance on a mobile screen. Implied and psychic lines are a really great tool. Implied lines are generally elements (like dots) lined up in a row to create a line or direction for the eye. Psychic lines are similar to implied ones with the only difference being that the elements used will differ in size, shape, color – whereas the elements in implied lines are generally the same element repeated.

In combination with contrasting elements, psychic lines between elements can really create a “map” or a direction for the user’s eyes to follow. Start them out at a visually heavy focal point then move them over with another visual heavy point that may be slightly different – or use direction shapes like triangles, arrows, heavy long rectangles, or any other shape that can “point” to other elements.

Creating Continuance: Similarity

Similarity lends itself to line. Like implied line, similar elements “linked” together can create a nice line to move the user’s eye. Grouping similar items together tends to create emphasis and demand attention. So lining them up can guide your user from one point to another. Also, similar elements not lined up in a line, but grouped together in containing elements can create continuance when cascaded with other containing elements. For example: a containing box of navigation icons above a containing box of list items will move the user’s eyes from the box of icons down through to the list item box.

Creating Continuance: Space

It’s a myth that you have to squeeze in all your content into a little screen taking up all the negative space around each object. That is actually pretty annoying and confusing to look at – just plain messy. Negative space and the space between elements not only gives your design room to breathe, but it can also be used to create continuance. Just as a contour line, like a border or box shadow can be used to create eye movement, a blank space can also be used to create that same eye motion.

There is also a balance to the space between elements in implied and/or psychic lines. The space is really the critical part in creating and linking elements together to form a line. Too much space and the elements will be disjointed and not connect. If you have too little space between elements than your focus becomes more about the line itself and the connection, rather than the elements that are being connected. The point of an implied and/or psychic line is not to draw attention to the line itself but to guide the user from one element to the next.

Conclusion

Just because mobile devices have smaller physical screen sizes doesn’t mean that you have to ignore visual hierarchy. Mobile devices may be smaller but they have very high pixel density which means that images are sharper, lines are smoother and fonts are more crisp and sharper than on a regular display. This gives you plenty of space to allow for creating an impactful visual experience – ignoring visual hierarchy for mobile is really just an injustice to the high quality screen resolutions of mobile phones.

Credits: Examples from mobileawesomeness.com