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

Author: Elena

I acquired a BA degree in International Business with a specialization in Marketing from Nuremberg Technical School and a parallel degree from Leeds Metropolitan University. In 2013-2014, I worked in the field of performance and conversion optimization with an IT company and then was employed in content marketing. In 2016, I went back to working with Web Analytics and gained additional experience in project management. During this time, I received an Award of Achievement in Digital Analytics from the University of British Columbia (Canada). Currently, I am employed in Online Marketing. My areas of specialization include online marketing strategy, content creation, web analytics, conversion optimization and usability.

One thought on “Six UX Design Principles in Action”

Leave a Reply

Your email address will not be published.