It Starts with a Z: Visual Hierarchy in Banner Design

Visual hierarchy defines the arrangement or presentation of elements on a screen by importance. More important elements are supposed to draw the attention of a website visitor first. UX designers use a variety of methods to assign visual hierarchy to design elements (also see my post on UX design principles). In this post, I will explain how UX design principle of visual hierarchy applies to designing website banners.

  • Color contrast
    • Light colors (less important elements) vs dark colors (more important elements)
    • Unsaturated colors (less important elements) to colors with high saturation (more important elements)
    • Use of complementary colors to highlight an important element (e.g. a red button on a blue background)
  • Shape (e.g. grouping important elements by placing them close to each other (proximity) or putting a boundary around them)
  • Size (more important elements are larger than less important ones)
  • Perspective (foreground vs background), also figure-ground relationship

For a banner, a common pattern for organizing content is called ‘Z-pattern’. It can be explained as follows: the eye movement starts in the upper left-hand corner, then the focus shifts to the right (where normally teaser text is placed), then moves to the left-hand side (e.g. with a visual) and then goes to the right-hand corner, mostly to a CTA.

Below we will look at how these principles are utilized in banners on websites of several skincare companies.

The first banner (LUSH) does not follow the Z-pattern, but arranges the information vertically and centered. This works for headlines, however, if the text was longer, aligning it to the left would achieve better readability. We also see that the color of the teaser text and the CTA are low contrast compared to the background, so they can barely be read. The navigation bar, however, achieves a high contrast compared to the banner. The text (especially the sub-headline and the CTA) is relatively small compared to the background elements, thus, there is no contrast by size.  Shape or perspective are also not used. When visiting the page, the user would notice the background and the navigation bar first.

banner lush

The next banner is by The Body Shop. We can see the Z-pattern being used in this banner, with the CTA placed in the bottom left corner. The teaser text has good contrast in color (white on a dark purple background) and in size. We can also see that the products’ visual and the text elements are arranged in groups that allows for better visual separation (proximity principle). However, the CTA has lower contrast in color and size than the headline, it is also not separated from the text by a boundary but only underlined (as with hyperlinks).

bodyshop banner

The next banner by Yves Rocher also incorporates the  Z-pattern. Red is used as complementary color to green to highlight more important elements on the screen. The visual hierarchy is supported by grouping the elements of the visual and the text against the background. The background is also less saturated than the visual and the text. Additionally, important parts are highlighted by a boundary (marketing claim: Limited Edition and the CTA)  by color contrast (CTA and price) and by size (price).  The text is also aligned to the left, which allows for better readability. However, the header is designed in pale yellow, the same as background elements, which makes it stand out less.

yvesrocher

The last banner I would like to have a look at is L’Occitaine, also with the Z-pattern. A good point in the design of this banner is that the text and the CTA are not only grouped together and surrounded by a boundary but are also put against a white background, different to that of the visual. CTA in yellow, however, has middle contrast to the background. The teaser text is rather long and is aligned to the center, which makes it more difficult to read. Although yellow is the main branding color of L’Occitaine, it is perceived by the brain as a signal color and its overuse in the design as well as in visuals causes the page to look a bit “busy”.

loccitaine banner

In this post, we have had a look at how visual hierarchy can be realized in banner design. We saw that not only corporate identity, design guidelines or aesthetics play a role, but also UX/UI factors, that is how users perceive the banner and get motivated to take a desired action.

Share this post

The Why, How, and What of Onsite UX/UI User Surveys

Onsite user surveys are a cost-efficient way to gather not only quantitative but also qualitative information useful for business decisions.  There are two basic types of onsite surveys: website-related (UX/UI surveys) and offering-related (about the actual product or service promoted through your website). In this post, I will concentrate on the first type of questionnaires and give some guidance on how successfully set up, run and evaluate them.

Why

As with other projects, we always start with a Why – question. Without formulating a clear purpose, you will not be able to derive much useful information from the survey. Do not start with a general question such as “Do users find the website easy to use?”- but concentrate on particular UI components (e.g. top navigation, product finder or product descriptions). You may also run a survey to gather more insight into the data from analytics, e.g. high bounce rate on a particular page or repeated shopping cart abandonment by users. Another possibility is to follow up on a particular user journey (registration, form submission).

When & Where

When and Where to place the user survey will depend on its purpose. Say, if you are testing a new color scheme of the site you could place a survey on most pages, but if you are interested why users do not manage to submit forms, you will display a questionnaire only on Submission Failed page.

Besides placing the survey on relevant pages, you may additionally target a random sample of users, i.e. 10% of visitors, or show the questionnaire after a certain time on site/to returning users. Sometimes it is also possible to display a survey on an event, such as a button click or multiple mouse-overs a page element. If the software you use allows gathering user data, consider targeting certain user groups (e.g. users coming from a particular device or from a certain country).

When displaying the survey, decide how long the delay should be. If a user first needs to read the contents of the page, the delay may be up to a minute. In any case, loading the questionnaire simultaneously with the page may confuse users, so several seconds delay will still be appropriate (it will also exclude users who are in the “explore mode”, i.e. just clicking through the pages).

How

Speaking about How the survey will be set up, it can be a pop-up, a slide-out panel or a Feedback button (during user journey or placed in the header of the page). In any case, you will need to include a recognizable Close button to avoid irritating users who do not wish to participate. You may, however, display the survey again at a later point/during the next visit or allow the visitor to choose, by implementing a Maybe Later button.

What

When deciding What to include in the survey, consider the number and the type of questions you want to ask.  Generally true: the shorter the survey – the higher the submission rate. If you want to ask questions on different areas of the website, break them into two or three smaller surveys and display upon user interaction.

As for the type of questions asked, open fields and ratings will probably give you the most insights into how users perceive your site. If possible, avoid asking many yes/no or very broad questions, such as: “What do you think of our new site?”

Users may also be reluctant to provide personal details, so reduce personal questions to a minimum. In other words, every question should fulfill the purpose of the survey or be removed.

Monitoring

Once the user survey is live, continue monitoring and adjusting it, whilst carefully recording all changes made in the process. Some adjustments can be: broaden the display rules if too few visitors view the forms, reformulate a question that seems to cause misunderstanding, exclude some user group from targeting.

Reporting

Last but not least: results processing. You may report daily, weekly or monthly, depending on the traffic volume and stakeholder requirements. The reports you produce should have the same format in order to compare results over time. Questions with open fields are the most useful, but also the most time-consuming to evaluate. You can group responses into categories and later re-formulate the question as a multiple-choice, still leaving one variant as open field.

With UX/UI surveys, you are likely to get some irrelevant responses, such as comments about the product or customer service queries. Make sure to have a process to deal with such responses in place.

As a short conclusion, here are some do’s and don’t’s of onsite UX/UI surveys.

The Why, How, and What of Onsite UX/UI User Surveys

Share this post

The Best Way to Go Mobile: Consider Your Options

There are three ways of going mobile: responsive design, a Web app and a native app. You can also use a combination of these three types.

The importance of adaptingcomputer and smartphone your website to mobile is indisputable in 2020. Google adapted “mobile first principle” last year. However, if you have not made the transition yet or not sure if it has worked well, one important question arises: what is the best way of doing it?

Basically, there are three ways: programming your page to adapt to different screen sizes and devices (responsive design), designing a mobile website (including so-called web app) or creating your own app launched through app stores (a native app). You can have a combination of these types in one application (a hybrid app), however, this is less common.

Here I would like to share some advice on these three possibilities.

You should choose responsive design if you:

  • Have a website that does not require a lot of interaction (e.g. a news website or a blog);
  • Want to save time and effort by maintaining one website only;
  • Think that your users would scroll from top to bottom if the page contains a lot of information and are fine with longer loading times.

A mobile website is the best choice if you:

  • Have a website that is not visited by the same users very frequently or where users do not spend a lot of time (e.g. a specialized online shop or an online information service);
  • Want to offer better user experience by optimizing content and simplifying navigation;
  • Need your page to be accessible with any mobile device through a browser;
  • Do not mind maintaining two websites: the desktop and the mobile versions.

And finally, you should consider developing a native app if you:

  • Have a website where users tend to spend a lot of time (a social network or an entertainment platform);
  • Want to use extra capabilities of mobile hardware: e.g. the camera or the GPS of a device;
  • Think that you can offer users enough extra value to motivate them to download your app;
  • Do not mind the dependence on app stores;
  • Can afford higher costs in developing applications for different device types.

Currently, developing a mobile website is slowly losing its popularity. The majority of CMS and website builders come with responsive layout option as a standard. However, you will still need to make adjustment to your website to optimize it for mobile users, especially if you think (or better: have data proving) that your website is mostly visited on mobile. As for the apps, although the app market is constantly growing, the competition is growing, too. Also, if a user thinks that an app does not offer extra value to them or if they are not a heavy user of this app, they will definitely prefer not to clutter their mobile storage with it.

Let us look at some examples.

Amazon.com and Deutsche Bahn have developed a mobile page (for occasional users) and a native app (for heavy users).

The majority of websites on the internet (e.g. HubSpot) have implemented responsive design that enables readers to access the blog from any device.

McDonalds has both responsive design and a native app (used as a restaurant finder and for distributing coupons). Some fast fashion labels (e.g. Orsay) adapted the same strategy.

As you see, in most cases an app is combined with a responsive design or a mobile website. They may perform similar or different functions. The main thing to consider is how to offer the best experience for the users and how to meet their needs in interacting with your website.

Share this post