So, what makes a powerful visual hierarchy? Of course, different kinds of products require different methods of building it still there are some common solutions helpful for UI content organization. Today’s article provides useful tips on creating a compelling visual hierarchy for web and mobile products.

Keep business goals in mind

There are often business goals standing behind a digital product. To achieve them, the creative team needs to work out which UI elements are more important and prioritize them according to their roles. For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item. By considering business and marketing goals set for the website or app, the creative team can effectively prioritize visual content and make a product stand out of the crowd.

Design Agency Landing Page

Consider scanning patterns

In our previous articles, we mentioned that before reading a web page people scan it to get a sense of whether they are interested. Different studies, including the ones by Nielsen Norman Group , have revealed several popular scanning patterns among which “F” and “Z”-shaped.

F-pattern appears mainly on digital pages or screens with a big amount of content such as blogs, news platforms, etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

Knowing these patterns designers organize content putting all the core UI elements on the most scanned spots to draw users’ attention.

Food Order Website Design

Functionality first

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that. First of all, by structuring and organizing visual elements designers need to make sure a product is clear to use and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively. User interface with the badly structured content leads to the bad UX. So, while building visual hierarchy designers need to consider functions of UI elements and a role they play in the navigation process.

Action Figures Ecommerce App

Remember that white space is a visual element

White space, or negative space, is not just an area between design elements, it is actually a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Designers can group or separate UI components so that they could create an effective layout. Moreover, negative space helps to emphasize particular elements which require deep attention from users. White space is an effective instrument for creating a visual hierarchy so designers need to work on its balanced usage.

Scientific Web Platform Design

Apply the golden ratio

We devoted one of our latest articles to the golden ratio applied in design. It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The proportion equals 1:1.618 and it is often illustrated with seashell-shaped spirals which many of you could have probably seen.

Designers often apply the golden ratio at the stage of wireframing. It helps to plan a structure for the layout placing and sizing user interface elements in the right proportion which will be pleasant for users.

Tracking Widget

Use a grid

A grid is one of the key tools applied at the different stages of the creative process and visual hierarchy is not an exception. A grid helps to structure all the components and put them into the appropriate sizes and proportion. What’s more, designers can effectively work with the negative space since a grid shows if the elements are placed proportionally and even.

Add some colors

Color choice and combinations are essential for visual hierarchy as they help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ minds. There are bold colors such as red and orange as well as the weak ones like white and cream. Bold colors are easy to notice so designers often use them as the means of highlighting or setting contrast.

Moreover, applying one color to the several elements you can show that they are somehow connected. For example, you can choose a particular color for purchase buttons or buttons of adding content so that people could intuitively find them when they need to.

Travel Planner App Design

Pay attention to the fonts

Visual hierarchy includes a core subsection called typographic hierarchy which aims at modifying and combining fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts can be transformed by regulating sizes, colors, and families as well as their alignment. Different fonts can divide the copy content into different levels so that users could perceive the information gradually. However, designers are recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

Three levels for web, two for mobile

As we mentioned above, different fonts form typographic levels which consist of such elements as headlines, subheaders, body copy, call-to-action elements, and captions. There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via a relatively small type.

In many cases, web products include all three levels since they are more likely to provide a big amount of content. On the other hand, designers are recommended to keep the number of layers within two while creating typography for mobile. The small screens don’t provide enough space for three levels so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

WineYard App

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, designers need to organize all UI elements considering the functionality and business goals.

Useful articles

The topic of visual hierarchy is wide and complex, so we gathered some helpful articles revealing various aspects.

Visual Hierarchy: How to Organize UI Content

How Golden Ratio Works in User Interfaces

How to Make Interface Effort-Saving

Copy Content in User Interfaces

Information Architecture. Techniques for Designers

Typography in UI: Guide for Beginners

Originally written for Tubik Blog

Сообщение User Experience: Best Practices on Effective Visual Hierarchy появились сначала на Design4Users.

To organize content in UI clearly for users, designers apply a well-known technique called visual hierarchy. Today’s article gives a general insight into the essence of this approach and the tools helping to organize the content properly.

What’s visual hierarchy?

Visual hierarchy is one of the core techniques which are applied to the design process. It is initially based on Gestalt psychological theory which examines users’ visual perception of elements in relation to each other and shows how people tend to unify the visual elements into groups.

Visual hierarchy strives at presenting the content of a product that way so users could comprehend the level of importance for each element. It organizes UI components so that the brain could distinguish the objects on the basis of their physical differences, such as size, color, contrast, style, etc.

The visual presentation of UI elements has a great influence on the user experience of a product. If content components look like a mess, people can’t navigate within a product or interact with it properly. Moreover, unstructured copy content has a low level of legibility, so users can’t scan it quickly and they need to make a significant effort to distinguish the data they’ve been looking for. Such bad UX can lead to poor user satisfaction which means a product wouldn’t be much sought-after.

Typographic hierarchy

Copy content is a significant part of any UI design. That’s why visual hierarchy often highly depends on typography. Specialists decided to emphasize the importance of copy presentation by creating a separate system of visual hierarchy called the typographic hierarchy.

The system aims at organizing copy content in the best way for users’ perception. Designers modify and combine fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts are modified by regulating sizes, colors, and families as well as their alignment.

Typographic hierarchy includes different elements of copy content which are headlines, subheaders, body copy, call-to-action elements, captions, and some others. To build an effective visual hierarchy, all the elements need to be segmented into different levels. Let’s see what they are.

The primary level. It includes the biggest type like in headlines. The primary level aims at providing users with the core information as well as drawing people’s attention to a product.

The secondary level. This is the type of copy elements which should be easily scanned. They usually involve subheaders and captions which help users quickly navigate through the content.

The tertiary level. Body text and some additional data build the tertiary level. Designers often apply relatively small type still it should remain readable enough.

As the copy content is usually a major source of information in UI, designers need to present the data gradually. By segmenting copy elements into different levels, designers help users easily go from one piece of copy to the other and perceive the information in the right order.

One more thing to mention is that while creating typography for mobile products, designers are recommended to keep the number of layers within two. The thing is that small mobile screens don’t provide enough space for three levels. That is why the elements of a secondary level such as subheaders step aside to make mobile UI look clean.

Vinny’s Bakery website

Visual hierarchy tools

When designers have already chosen all the content components, it’s time to create an order. Let’s find out what helps designers to set the effective visual hierarchy of UI components.

Size

One of the most powerful tools for visual material transformation is size. It is rooted in human’s mind that big things are somehow more important than the small ones. That’s why users’ attention automatically goes first to the large words or big pictures.
Designers need to distinguish the level of significance for each content element and based on this data transform the components into big and small.

Color

In our previous articles, we’ve mentioned that color has a great impact on the users’ perception the reason why it serves as an effective tool for visual hierarchy creation.

Colors have their own hierarchy which is defined by the power of influence on users’ minds. There are bold colors such as red, orange, and black which can easily draw attention. On the other hand, there are weak, or soft, colors like white and cream which work better as the background.

Using the different colors designers can support a slight hierarchy of the UI elements. For example, CTA buttons in bold colors will definitely be the first thing that users see if the other UI elements are created in a softer palette.

Contrast

Hierarchy is based on contrast itself. One element contrasts with the other and that’s how users can see the differences between the content elements. Contrast can be created via visual differences including size, color, and style. Still, it’s recommended to keep the contrast in balance so that one object wouldn’t completely obscure the others.

Negative space

There can be many components in a user interface and to make them all noticeable for users’ eyes designers need to give them some private space. Negative space, or white space, is the area between elements in a design composition. Some designers usually don’t think of the white space as a component of design still the experts apply it as a useful tool helping to build an appropriate composition. A right amount of negative space between the elements will help users to notice and perceive each of them to each of them.

Proximity

As we said above, visual hierarchy is built upon Gestalt principles, so designers pay deep attention to the proximity of UI elements. As people tend to unify the visual elements into groups, UI components need to be placed that way so users could categorize them. If some elements are placed in a certain proximity, users automatically perceive them as a group. Designers can use proximity as a tool which helps to divide the content into subcategories.

Repetition

If people notice that some elements look similar, they may automatically unify them into one group. That’s how repetition works. Designers repeat some patterns for different objects on purpose so that users could unify them. For example, a website with a great amount of body copy at a page can highlight the most important sentences with another color. Seeing the sentences in this color users can follow from one key point to another.

Visual hierarchy is a foundation of effective information architecture. When UI elements are structured and organized, people enjoy using a product and it will be more effective in solving their problems. Moreover, powerful visual hierarchy improves the navigation system since people can better orient within a product. Stay tuned and be ready for the next article about visual hierarchy.

Recommended reading

Copy Content in User Interface: Tips and Practices
Basics of Information Architecture for Designers
Information Architecture: Techniques For Designers
Gestalt Theory for Efficient UX: Principle of Similarity
Gestalt Theory for UX Design: Principle of Proximity

Originally written for Tubik Blog

Сообщение Visual Hierarchy: How to Organize UI Content появились сначала на Design4Users.

One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. For a brief reminder, Gestalt theory is based on the following idea: when people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. We have already presented the definition of Gestalt theory, the principles of grouping in particular, as well as looked into the principle of similarity for user interfaces. This time let’s discuss the principle of proximity for UX design.

Principle of Proximity

This principle is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize a variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt for how to organize the interface along natural ways the brain absorbs and classifies data. The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.

Source

The important thing to bear in mind is that via research and experiments proximity proved itself more powerful than other distinctive features such as color or shape, for example. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.

In user interfaces, which are full of different content, the principle of proximity helps a designer to organize the layout to make it scannable and easily-perceived for users. It’s not a secret that users aren’t ready to spend much time learning how the complex interface works so intuitive screen which can be quickly scanned has much more chances to retain the users and give them the best features of the website or app.

In general, we could define two directions of applying proximity principle in user interfaces: for typography elements and copy content and for blocks of different content and controls. As well as in the previous article devoted to grouping principles, we will support them with examples by Tubik designers.

Typography and Copy

One of the domains in which proximity plays a crucial role is the organization of copy content in user interfaces. Scannability of the copy blocks in the layout is vital because readers don’t usually stay on the pages which look like a long homogenous thread of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why the copy should be arranged according to the laws of both quick perception and aesthetic looks.

White space, also known as negative space, plays a great role in this process. It allows a designer to activate the power of nothing:  the space without any content not only adds the air to the general layout but can be also used to organize its elements as groups and unities where it’s needed.

For copy content, it can be used in different ways. For example, with white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and visually pleasant for readers: this approach is often applied in blog articles and big copy blocks on websites. In this case, the principle of proximity signals that the copy lines which are closer to each other present the unified idea or piece of information and in this way makes all the text structured.

Here’s the interface concept of architecture blog. The principle of proximity works in this UI on several levels. First, it unites the lines of one copy block to be decoded as one piece of information. Secondly, every copy block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in general layout. The call-to-action element – link “See more” – also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. So, we can see that in this case, the designer activated proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of copy are beautifully composed around the theme illustration and are scannable in split seconds.

This approach also works well for extended lists like menus and catalogs. Proximity applied thoughtfully becomes an effective tool to organize all the positions and group them effectively.

For example, let’s look at Slopes website. The links to the core interaction zones of the websites in the header are quickly perceived as one unified group as they are placed close enough to each other and far from other content. The same works for the extended menu hidden behind the hamburger button: the links are organized in groups that are visually defined due to their close placement. Negative space used according to the principle of proximity strengthens the general visual hierarchy of the page.

Blocks of Content and Controls

One more domain where proximity can have a positive impact on user experience is an organization of diverse content blocks in the layout: except copy, these can be images, links, icons, controls, CTA elements, products cards and loads of other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception.

For example, here’s the e-commerce app for a jewelry store. The right screen shows the product card: we can see that the general data about the item – color, width, weight, and material –  is given in several lines which are close to each other and therefore are naturally perceived as a unified piece of content. At the same time, the detailed description of the item presenting quite a considerable piece of writing is placed further and in that way separated a bit from the data file. So, these content blocks don’t merge and users can easily differ key data from the detailed description.

Here’s another example, grounded heavily on the principle of proximity – a layout of an online magazine. All the content and control blocks are arranged on the basis of the broken grid and without any frames separating them from each other. The proximity of the elements allows users to quickly define core content zones: the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article, and the block of social network links in the footer. Moreover, inside this global block, the principle of proximity continues to separate or unify the elements: according to it, the designer arranges the positions in the list of latest publications around different topics as well as separates the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: symmetry, continuation, closure, and others.

Recommended Reading

Gestalt Theory for Efficient UX: Principle of Similarity
Cognitive psychology for UX: 7 Gestalt principles of visual perception
Design Principles: Visual Perception And The Principles Of Gestalt
Improve Your Designs With The Principles Of Similarity And Proximity
Gestalt Theory of Visual Perception
Gestalt Principles: How Are Your Designs Perceived?

Originally written for Tubik Blog

Сообщение Gestalt Theory for UX Design: Principle of Proximity in Interfaces появились сначала на Design4Users.

Typographic hierarchy makes things work

To create a design pleasant for users’ perception, all its elements should be well organized and clear to navigate. Designers set a proper structure by establishing a visual hierarchy. It organizes all the visual elements so that users could easily perceive content.

Visual hierarchy can be divided into different parts. One of them related only to the copy elements is called the typographic hierarchy. It aims at organizing copy content by dividing it into various types such as headings, subheadings, body copy, captions, and others. The differences between the types of copy are set by regulation of family, sizes, width, and colors of fonts.

Clear typographic hierarchy makes text legible and easy to scan. Moreover, it’s simple to highlight key parts of the text to draw users’ attention and hitch them to the expected actions.

Mood Messenger Landing Page

Consider context and audience

When it comes to the choice of fonts, an essential thing to consider is a context of a copy and a potential audience. Each font brings its own mood to a layout. There are friendly, funny, serious, business, and many other fonts that will fit a certain design.

Before you choose a font, you need to learn your client’s goals as well as needs and preferences of a target audience. Visual performance of fonts influences the first impression users to get from the product. If the kind of font doesn’t fit the mood which the product aims at, there can be a misunderstanding with the audience. For example, if a designer chooses a font that looks too fun and silly for a business website, users will hesitate if the company is trustworthy. Or, if a product is meant for youngsters, too formal fonts may seem boring.

Florist E-Commerce Website

Deep attention to mobile typography

Designers often do experiments with typography to make a project original. However, when it comes to mobile UI design, typographers are literally short of space. Mobile screens are quite small which sets a new challenge for designers to cope with restrictions without loss of sense and functionality. Mobile typography requires deep attention to the details from the appropriate size of fonts to compelling tracking and line length.

Compared to web design, mobile typography is harder to reach good legibility. The font size shouldn’t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won’t fit the small screen too. In addition, designers need to care about the level of contrast since a screen with ambient light and high contrast can hurt users’ eyes.

Furthermore, a designer should think of the typography functionality. Smartphone UI includes clickable text parts and designers need to make sure users manage to use them. If these parts are too small, people can’t press it with a finger and it’s rather annoying.

Considering all the tiny details in mobile typography, designers can bring valuable products for users.

WineYard App

Minimalism can’t hurt

Sometimes, when designers aim at showing all the facets of a digital product, they try to use lots of various styles and fonts all in a single design. As a result, they get a design overloaded with unnecessary distracting details and lacking a proper mood.

Experts usually try to keep a number of fonts within two or three for the same layout. It allows making an essential contrast between copy elements along with saving the balance and right message of design. Applying different styles (bold, italic) should also be minimal. They are good for emphasizing really important parts but the overuse of them can make the text look messy.

Also, copy content shouldn’t overwhelm users with unnecessary information. Of course, it’s a writer’s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.

Upper App

Text needs to breath

Legibility level highly relies on how much space there is between letters, words, and text lines. Tracking, kerning and leading are the processes of white space adjustment between the typographic elements. White space is the area between elements in a design composition.

A lack of white space may end in the bad legibility of copy content because it is difficult to distinguish words that are placed too tight to each other. Appropriate white space brings a visual relief to users’ eyes and allows going easily from one word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.

Dance Academy landing page

Build typography like a scientist, revise like an artist

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it’s is not enough. Clients always require originality and emotion but it can’t be done only by following the written instruction.

Designers should never bury their artistic souls. Imagination and the sense of beauty bring uniqueness into any project, even the most casual one. Find the balance between the strict rules and unordinary choices, and the results may surprise you and your customers.

The Gourmet Website

Colorful typography needs thoughtfulness

The topic is actively debated. Some think there is no room for color in typography and some claim it’s a must-have for good-looking design. There is no point in looking for the right side of the dispute because there is no accounting for taste. Nevertheless, colorful typography does exist and designers apply it quite often.

Among the advantages of colorful typography, let’s mention the element of emotion it adds to any UI as well as the ability to highlight points of interest for users. Moreover, each color may transfer a certain message since it has an influence on users’ minds and behavior.

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it’s easy to turn UI into colorful chaos. Here is the useful checklist for this case:

Make it contrast. A big problem that colorful typography may bring is bad legibility. The proper contrast between the fonts and background will help to avoid it. However, make sure the contrast looks pleasant and doesn’t hurt the eyes.
Don’t use too many colors. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.
Color harmony. Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.
Be careful with effects. Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.

Book Swap App

Learn the basics of typography

It may sound too obvious still some designers ignore learning basics of typography science. They rely on modern tools which automatically choose the fonts or just hope aesthetic features of chosen fonts would be enough. Such an approach seems like learning to read without knowledge of the alphabet.

Designers who don’t know the concepts and the anatomy of typefaces can’t use the potential of typography at the full strength. Everyone decides for oneself if they need to learn the science in-depth but the basics are a foundation of every craft.

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that’s why there are so many useful books on typography for designers. As the recommended reading we can name

• The Elements of Typographic Style by Robert Bringhurst
• Typographie: A Manual of Design by Emil Ruder
• Just My Type: A Book About Fonts by Simon Garfield.

Recommended reading

Here are some articles providing useful tips and tricks in typography.

How to Make User Interface Readable

Do’s and Don’Ts of Typography

The 8 biggest typography mistakes designers make

10 typography tricks every designer should know

Typography in UI: Guide for Beginners

Copy Content in User Interfaces

Originally written for Tubik Blog

Сообщение 8 Typography Tips For Designers: Make Fonts Speak появились сначала на Design4Users.