Consistent design

This blog post idea was sparked by an app I downloaded which had very inconsistent design and caused me confusion in the first few days of using it. Even now, I still find it illogical and somewhat hard to use.

So what is consistent design?

Consistent design refers to the practice of maintaining uniformity in the visual, interactive, and content elements across a website or application. This includes using the same colors, fonts, button styles, navigation patterns, and terminology throughout a site/app. Consistency helps users quickly understand and predict how the interface will behave, making it easier to interact with.

Consistent design and WCAG

Consistency is mentioned in three WCAG 2.2 criteria.

• 3.2.3 Consistent Navigation states that navigational mechanisms repeated on multiple web pages occur in the same relative order each time they appear. This is usually not a problem when websites are build with component-based systems and the same navigation is used across the whole site.
• 3.2.4 Consistent Identification states that components with the same functionality should be identified consistently. For example, a button within a multistep form should not be called "Next" on one page, "Continue" on the next and "Proceed" on the next but they should all use the same button text.
• 3.2.6 Consistent Help states that if a website has help mechanisms, such as a chatbot, or contact information, it should occur in the same relative order on every page so that it is easy to locate wherever you find yourself in the website.

There is no mention of consistency being a requirement anywhere else but it sure does help make your app or website more usable.

Why Consistent Design Matters for Accessibility

Predictability Enhances Usability: Consistent design allows users to build a mental model of how the website or application works. When users can predict what will happen when they interact with certain elements, they are more likely to have a smooth and efficient experience. This predictability is especially important for users with cognitive disabilities, who may struggle with processing complex or changing interfaces.

Reduces Cognitive Load: Cognitive load refers to the amount of mental effort required to use a website or application. When design elements are inconsistent, users must spend additional time and energy understanding each new interaction. For people with cognitive impairments, this can be overwhelming. A consistent design reduces the cognitive load by allowing users to focus on the content and tasks rather than figuring out how to navigate the interface.

Improves Navigation for Screen Reader Users: Screen readers rely heavily on consistency in design to provide accurate and understandable information to users who are blind or visually impaired. For example, consistent use of headings, lists, and landmarks ensures that screen reader users can easily navigate through content and understand its structure. When design elements are consistent, it reduces the likelihood of confusion and errors.

Facilitates Keyboard Navigation: Many people with motor disabilities rely on keyboard navigation to interact with digital interfaces. Consistent design ensures that interactive elements, such as buttons, links, and form fields, behave in the same way across the site. This predictability allows users to confidently navigate using the keyboard, without having to guess where they can tab to next or what each key press will do.

Enhances Readability and Comprehension: Consistent typography, color schemes, and content layout contribute to better readability and comprehension, which is crucial for users with visual impairments or learning disabilities. For instance, maintaining a consistent heading hierarchy helps users understand the structure of content, while consistent color contrast ensures that text is legible for those with color vision deficiencies.

Supports User-Centered Design: Consistency is a fundamental principle of user-centered design, which aims to create products that meet the needs and preferences of users. By adhering to consistent design practices, you not only improve accessibility but also ensure that your design is intuitive and user-friendly for everyone.

The inconsistent app: NYT Games

I enjoy playing wordle and doing sudoku so I decided to download this app to do the puzzles when I commute to work. Finding the games is not a problem; there's one main screen with all the puzzles as soon as you open up the app.

The problem comes with the end screens for each of the games. When I finish a game and have had time to check my results on the end screen I want to go back to the main screen with all the other puzzles directly. This is also what 68% of other people want to do too (according to my very scientific twitter poll).

Some end screens allow me to do this. However, others make me go back to the game first and others want me to go to another game, even if I've already played it. Sometimes there's an "X" button in the top right corner to close the game, sometimes there's a back arrow in the top left and sometimes there's a "View all games" button in the middle lower third of the screen. Very confusing!

The wordle end screen shows statistics and two large Call to Action (CTA) buttons to explore the wordle archive or play Spelling Bee. To return to the main page I need to press the small x in the top right corner and then press the back arrow in the top left corner of the game. There is no way to go to the main page directly.

After playing a game called strands I have two large CTA buttons to share results or play Spelling Bee. There is a back arrow in the top left corner which takes me directly back to the main page.

The Connections endscreen also allows me to share my results or play Spelling Bee. In the top right corner there is a "Back to puzzle X" button which I have to click first before returning to the main page. Notice here that button has text and an icon whereas the wordle screen only used an icon.

For the mini corssword endscreen we again have an icon only button up in the top right corner and I'm forced to go back to the game before going back to the main screen. Or I can of course play Spelling Bee which they seem determined that I do.

The Tiles endscreen is only half a screen that slides up from the bottom unlike the others. No cross here but finally a CTA button allowing me to "View all games" and go directly back to the main screen.

Finally the spelling bee endscreen they were so eager that I played. Again there is no close button in the top right corner but there is a "View all games" CTA button in the middle of the lower third of the page which takes me back to the main page.

Conclusion

Consistent design is a cornerstone of accessibility, making digital experiences more predictable, usable, and inclusive for everyone. By prioritising consistency in your design practices, you not only enhance the user experience but also ensure that your digital products are accessible to people with a wide range of abilities.

This is also something that could be fairly easily picked up with usability testing. If people struggle to use a site or app it may well be due to inconsistency in the design.