Left: Avoid loading dropdowns with no option selected. Right: Instead, load them with their respective most-frequently selected options pre-selected.
Turn the experience into a platformer: let them jump to their desired section
Left: Avoid placing form fields one after another without logical groupings. Right: Instead, group fields into sections…and provide links to conveniently ‘skip to’ or ‘bypass’ entire sections.
Avoid page scrolling: keep what’s important in the rear-view mirror
Left: Avoid filling otherwise empty space by placing form fields next to one another. Right: Instead, keep form fields stacked, and fill the empty space with a pinned (meaning follows users as they scroll) section to quickly review information entered much earlier in the form.
A sense of progress makes anything feel less like a boss fight
Left: Avoid allowing users to guess their overall place within the form, and how long it will take to complete. Right: Instead, offer a progress indicator…but never start it at 0% (for psychological reasons)
Leverage plate tectonics: what users see should shift and change as they interact
Left: Avoid maintenance of two nearly identical forms. Right: Instead, use JavaScript to dynamically change which fields and values appear as the user completes the form.
Considerations for data-intensive views
Scrap equal-weight tables for hierarchical lists of key:value pairs
Left: Avoid presenting large amounts of data in a table where each value is given equal-weight visually. Right: Instead, use size, shape, color and position to add much-needed hierarchy for your users’ ease of scanning.
Let them move the curtain in either direction with expandable/collapsable sections
Left: Avoid locking your users into cramped interfaces. Right: Instead, allow users to control which elements they see at any given time through intuitive toggle switches.
Focus on getting ‘Search’ right: don’t throw everything into a single field
Left: Avoid causing users to over-think and second-guess how they must search. Right: Instead, offer a small array of popular options with helpful notes that clear up any ambiguity.
Steal patterns from the tools everyone uses: tabs, filters and progressive disclosure
Use tabs to save and quickly recall previous search results
Allocate space for your search refinement controls and group them in meaningful ways.
Show just enough information about a search result by default. Make result-specific actions appear only when an item is focused. This reduces the amount of information presented initially, helping users find what they are looking for faster…and almost immediately take the appropriate action.
Considerations for navigation
Focus on getting words right: use card sorting to validate your information architecture
Top: Avoid assuming that your users speak the same ‘language’ as you and your team/business/organization. Bottom: Instead, use exercises like card sorting that empower users to propose the words and groupings most comfortable to them. Then, find patterns, prototype and iterate until confusion reaches an all-time low.
Backtracking better be a breeze: get breadcrumbs right
Top: Avoid breadcrumbs that skip levels, don’t look clickable, and omit the seemingly obvious ‘Home’ label. Bottom: Instead, beef up your breadcrumbs with signifiers, indicators, and comprehensive hierarchy trails so users can easily move all the way back up the proverbial ladder in whichever increment they wish.
Avoid mouse tightrope walks: make progressive menu items easy to explore
Left: Avoid fly-out menus that require mouse users to delicately weave from one to the next. Right: Instead, place subsequent menus vertically below their parents, allowing mouse users to move in one direction with ample room for error in their quest to reach the final menu item.
Manage focus, suss out keyboard blind-spots, and make everything skippable
Remember to include links that let users move the browser’s cursor to the first important position on the page.
In combination with below, Target lets users conveniently skip to two sections: main content…
and to the footer, where…
…their menu items ‘drop-up’ to reveal richly accessible menus that include a convenient ‘close list’ option marked by a color-agnostic circle.
Lastly, NYTimes.com features a richly keyboard accessible menu system that effectively indicates where the cursor is at all times.
Considerations for the whole system
Don’t forget the heuristics
Keep users informed of the system’s status at all times
Use language common with users, not with systems
Support undo and redo
Include training, instructions, guides and support for controls alongside those very controls
