This is part 2 of a series of articles — exploring CRAP design principles:
Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity.
Robin Williams’ advice on repetition still holds true three decades after the book was written. Let’s take a look at how this applies to the modern world of web and product design and user experience.
Repetition creates consistency resulting in reduced cognitive load.
When we first use an interface we are learning a new skill. From a cognitive perspective there is a lot going on! The role of a UX Designer is to make this learning process as painless as possible.
To do this we need to understand two distinct constructs, our user’s mental model and the designer’s conceptual model and the intersection of the two — I call this the sweet spot.
A mental model is an internal map of how a person interacts with objects in the external world. Mental models help us respond quickly to our environment. Users have mental models of products they interact with. As designers, we can leverage existing mental models to flatten the learning curve.
A conceptual model is a construct formed by a designer which represents their understanding of the product and how it should function.
When the conceptual model is consistent with the users mental model the product is in the sweet spot.
This is arguably the most important consideration in user experience design as it forms the basis for consistency and predictability being the underpinning principles that reduce cognitive load.
So, all products should look and function the same? No, not at all, but we should consider the pros and cons of deviating for dominant paradigms.
Let’s look at some practical examples:
Take the humble search bar, where do you expect to find it?
Chances are you probably expect to find it in the top of the screen. This is because products have converged on this placement as optimal. (This convergence has happened over time, the web was not always as usable as it is today.)
Next think about primary navigation menus, many SaaS products place the navigation on the left.
When the products we design adhere to the dominant design paradigms it reduces onboarding friction by minimising the number of variables that need to be stored about the interface in the user’s working memory — this is the sweet spot. Users can intuitively navigate the UI using muscle memory, rather than having to think about how to navigate.
Jakob’s Law states:
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
Ok, so in order to create consistency UX designers should follow a few key steps:
So, we’ve established that it’s important to be relatively consistent with our user’s pre-existing mental models, but it doesn’t stop there. Consistency within your product is critical too.
Consistency is the number one Golden Rule of Ben Shneiderman’s “Eight Golden Rules of Interface Design”.
Repetition across screens and elements reinforces the user’s mental model of your product. Repeating placement of navigation, colour of buttons and links, size of typography reduces friction and leads to a predictable user experience.
Predictability aids the transition of newly acquired knowledge from working memory to long term memory.
Layout & Information Chunking
The layout grid is the basis of consistency, it assists in pattern recognition by chunking elements consistently.
In Figma it is easy to configure columns and baseline grid to guide you designs.
Chunking content into visually distinct sections (like headings, subheadings, and cards) helps the user to scan content and increases readability.
Repetition of colour and visual elements is essential to establishing continuity of brand. This continuity promotes a sense of familiarity and trust, the user knows what to expect and the experience is contained within the visual boundaries of brand’s domain.
Use of colour in call to action buttons, typography and background elements helps to extend the brand and reinforce the user’s place within the brand domain.
Take Spotify as an example, whether you are using the Spotify app, the Spotify API documentation, or looking at the Spotify annual report, the brand is consistently reinforced through graphical elements such as button shapes, typography and colour.
Repetition and consistency are essential to creating predictable experiences for users of all abilities. Users that rely on screen readers to parse information also rely on consistency of presentation to parse information on the screen. For example, the information hierarchy should be consistently encoded with navigation in the same place across screens, headings organised in order <H1>…<H2> etc and semantic markup used where possible. I strongly suggest using a screen reader to navigate the products that you design. This excercise build empathy for screen reader users and can vastly improve the user experience.
Users are in a conversation with the products that they use, that’s why feedback loops are essential. Repetition of timely feedback is key to users understanding the system state and success or failure of their actions and gives users confidence that their actions have been registered.
Where ever possible use feedback to build user confidence in your product.
For every user action, there should be an interface feedback. For frequent and minor actions, the response can be modest, whereas for infrequent and major actions, the response should be more substantial.
Ben Shneiderman — The Eight Golden Rules of Interface Design
So, there you have it. Repetition is indeed a critical consideration for UX and UI designers.