Avoid Unexpected UI Changes
Modern web applications have many interactive elements. Interacting with these elements should not result in unexpected changes to the user interface.
Why
A wide variety of users prefer navigating sites from their keyboard, so it's important that moving focus between elements behaves in a predictable manner.
Screen readers navigate the site linearly, so if a change occurs on a design element that has already been inspected by the screen reader, the end user will be completely unaware of that change unless they happen to navigate backwards.
Best Practices
- Try navigating the page with keyboard only. Are there any workflows that are difficult or impossible?
- When interacting with an element results in a change to the UI, make sure that the change is below the current element. For example, if a form for inputting an address has an element to input the country, which results in the "zip code" input becoming a "postal code" input, then the "country" input should be higher up the page than those inputs
- Make sure that menu systems and other complex UI elements behave in a reasonable manner for all input devices (mouse, keyboard, touch)
- UI elements should only change the page when the user actively engages with them. In particular, be careful when implementing
onmouseoverevents.
Consistent User Interfaces
User interfaces should be consistent across the application. This will make the application more predictable and understandable for users.
Why
To start with, this is simply "good design" . If the navigation of a site is consistent and predictable across the site, it's easier for everyone. The consistency is even more important for users with screen readers or screen magnification tools as they may not be able to consume the entire screen quickly. Consistent UIs also help users with cognitive limitations.
Best Practices
- Keep navigation elements in the same place across the application. If there's a menu element, keep it in the same corner of every page.
- Use the same icons and alt text for elements that do the same thing.
- Use the same patterns for the same interactions. For example, the search field could always be at the top of the page and consist of a single text input with a button labelled "search" to the right.