Usability Testing: Recap Webmontag Bonn

This post is a recap of Webmontag Bonn (October 21, 2019) that was dedicated to usability testing topics. The speaker explained Think Aloud method in detail. This presentation was followed by a discussion on website usability and accessibility.

This post is a recap of Webmontag Bonn (October 21, 2019) that was dedicated to usability testing topics.

It started with a talk by the organizer, Lina D., that introduced general concepts of usability testing. Normally, it includes figuring out how intuitive a UI is, how users handle their tasks within a UI and what improvements can be possibly made. Some common methods include prototyping, benchmarking, case studies with personas, interviews, eye-tracking, etc. The speaker went into detail regarding the Think Aloud method. This method has the following parts:

  • A prototype is built (can be also done on existing software or even on a paper prototype)
  • A use case is written (i.e. a task that a user has to fulfill);
  • Users are invited for a short interview;
  • During ice-breaker, the tester tries to define what customer type the user belongs to;
  • A task is presented to the user. They have to complete the task while commenting on their actions;
  • The test completes with a short feedback round;
  • The whole test lasts about 20 minutes

The talk was followed by a lively discussion about the presented method and also about general usability problems. One question was how to select test participants, especially in the case of a very narrow target group. For example, you can try to reach them in person through industry events, etc. My suggestion was to launch the software and get feedback by analyzing analytics data or making online surveys (though from my experience a lot of people use this survey instead of customer service chat). Somebody also suggested recruiting the participants for one-on-one tests by displaying banners within the software.

There was also a lengthy discussion on accessibility. In the public sector in Germany, there exist accessibility catalogs that constitute minimum requirements for the software to be accepted. However, without proper accessibility testing, such catalogs are only partially helpful. It was noted that a lot of times users with a disability have a completely different workflow interacting with a software or a website.

The last topic that was brought up in the large discussion round was about how to onboard users to new software. For example, through instructional videos, FAQs, pop-up windows within the user interface (UI), or an overlay with explanations of different elements on the first login.

After this, the discussions of the Webmontag continued in smaller groups accompanied by pizza and cold drinks.

Share this post

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

Six UX Design Principles in Action

This post outlines some important UX design principles and will provide some examples. The principles covered in this post are: affordance, continuation, consistency, figure-ground relationships, progressive disclosure and error avoidance.

Appropriate UX design should not only differentiate your brand but first and foremost be appropriate for your audience.  It should reflect their needs and expectations of the website and provide them with visual cues for interacting with the site.

Below I will outline some important UX design principles (based on UX & Web Design Masters Course) and will provide some examples using mymuesli site (mymuesli is a German provider of customized muesli mixes as well as other related products).

  1. Affordance in UX design means that all elements of a Web page should imply their intended functions (e.g. clickable- and non-clickable elements should be recognized as such).  It is important to remember that design elements such as buttons, arrows, etc. already have their established function and users instinctively interact with them in a certain way.
    In the muesli mixer below, ingredient choices are presented as buttons (clickable), additional filtering parameters as radio buttons (selectable), more Info as a down-arrow (expandable), whereas the introductory text is contains no links or highlighted elements and thus perceived as not clickable.muesli_mixer.PNG
  2. Continuation implies that elements grouped or aligned together should perform the same kind of function. In our example, top navigation has three levels, the first one being brands (top level), the second one is navigating by product (second level) and the third one is navigating within muesli mixer (third level). All these levels differ from each other in design and position. At the same time, buttons at each level are aligned and grouped together.
  3. Consistency is extremely important since it helps site users to recognize similar patterns and complete their intended task more quickly.  In mymuesli example, once you switch between different ingredient groups, the navigation buttons and the visual representation of ingredients remain the same.muesli_mixer_berries
  4. Figure-ground relationship means that there should be a clear distinction between the background and the actual objects on a page. The aim should be to focus users’ attention on the key actionable elements without distracting them with background color, design etc. This is also the reason why sites with dark or pattered background, as a rule, have worse usability.  In the example above, key elements, such as current process steps, are highlighted with color, whereas the background stays white all the time.
  5. Progressive disclosure is probably the most important principle of UX design. It states that only necessary or requested information should be displayed on a page at the same time. For example, if you navigate to muesli mixer from the top navigation, the mixer itself is displayed, and additional information, such as mixer tips, is shifted to another tab.  Also, CTAs such as Remove Ingredients or Finish are first shown after the ingredient is selected.
  6. Error avoidance means that good UX design should help users to avoid errors. In the muesli mixer, it is always possible to remove or double any ingredient in the muesli jar by clicking on it as well as to remove all ingredients by clicking the corresponding button. Furthermore, after the customer clicks on Finish, there is a very detailed confirmation screen with a product preview. Also here it is possible to go to the previous step and change the ingredients. Additional information, e.g. taste flower, ingredients list and nutritional value helps users to make a decision in the presence of multiple combination possibilities. Adding the product to cart and proceeding to the checkout are additional steps that help to prevent order errors.muesli_confirmation

 

To summarize, in this article we have looked at six common UX design principles and how they can be put into practice. Applying these principles will help you to avoid common design failures, improve the usability of your website and, ultimately, achieve your business goals.

Share this post

Website UX/UI Testing Parameters Part I

UX/UI testing is an essential step in website development. You should plan for testing early in the process and decide what will be tested in addition to the tools you will use. Remember that you cannot test everything, so prioritization should also take place.

This post is largely based on a Udemy UX and Web Design Masters course and provides a basic framework for website testing.

This table structures testing parameters into several categories. Below I will explain the first three groups of criteria. My next post will cover the rest of the parameters.

website testing

 

  • Links to and from pages on the site should point to a correct destination. This includes mailto: and social media links. While you will not be able to control all of the incoming links (links coming from other domains), bear in mind that changing your URLs without a redirect will cause them to become invalid. Pay special attention to internal links, that is cross-linking between the site’s pages.
  • Things to check on the forms are default form values, required data format, entry validation and storing entered information.
  • Apart from including a privacy statement, test what happens if cookies are actually rejected, blocked or deleted by users. Also check that all information is encrypted and that cookies are not stored longer than required.
  • CSS styles render the design of the page, such as fonts, colors, etc. HTML is the “carcass” of the page, while JavaScript is used for interactivity features. There are various code validators, for example https://validator.w3.org/.
  • The capability to be indexed by search engines is an aspect less related to the UI/UX of the page, however, it directly affects if and how your website appears in Google Search results. A popular tool to use is Google Search Console. This tool additionally checks the site usability on mobile devices.
  • Database connections include correct execution of database queries, reliable data storage and retrieval and correct updating of stored information in case of any changes.
  • Navigation clarity means that users should be able to find what they need on the site using the navigation. Furthermore, the navigation should stand out from the rest of content and its elements should be labeled clearly.
  • Ideally, the content of the website should match what visitors are looking for but in any case it should be understandable and actionable.
  • Distraction in the desired user journeys, such as pop-ups or multiple CTAs should be avoided.
  • Calls-to-action express the purpose of your website or, in other words, what you want users to do. In my post on CTAs I covered how they should be formulated and designed.
  • The main benchmark of your website’s usability is the ability of users to complete their tasks and their satisfaction with the results and the process.
  • Beside the correct rendering of fonts and colors, it is important that the overall readability and visibility of the content are not impacted (an example of bad usability is using light font colors over white background). In addition, consider emotional aspects of the website colors and how they match your brand.
  • Proper handling of errors means that they are recognized and assigned to the correct category. For example, an HTTP 404 error message is generated when users try to reach a non-existent page. Other examples of errors can be form submission errors or incorrect content display.
  • Error handling also includes displaying appropriate and understandable error messages to the user. In parallel, errors should be logged into the system for review. However, make sure not to include any security-sensitive information into the displayed error messages, e.g. user names.
  • It goes without saying that all known errors should be promptly fixed.

In the next part, I will go through testing parameters for compatibility, performance and security.

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