Modernizing Enterprise SaaS at a Big Bank

Practical design patterns and principles accrued from three years of on-the-job experience re-designing robust applications

Considerations for long forms

Left: Avoid loading dropdowns with no option selected. Right: Instead, load them with their respective most-frequently selected options pre-selected.
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.
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.
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)
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

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.
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.
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.
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

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.
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.
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.
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

  • 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
  • And many more
  • Remember Clippy?
  • Think: Turbo Tax
  • Small, targeted uses of AI can streamline workflows that would have otherwise taken minutes…or hours!

Is the application perceivable, operable and understandable to users interacting with it via their:

  • Mouse?
  • Finger?
  • Keyboard?
  • Voice?

Be bold. Prototype your ideas. Test with real users.

Discover, record and share patterns that your audience finds most intuitive.

Odds are, other audiences and the designers that service them will benefit from your team’s accrued knowledge.

Designer, Developer, DataViz, Dad • rmion.com

Designer, Developer, DataViz, Dad • rmion.com