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

Robert Mion
3 min readAug 8, 2019

Considerations for long forms

Smart defaults save thousands of micro-seconds

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, 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
  • And many more

Use machine-learning and natural language processing to help users avoid errors and complete common tasks faster

  • Remember Clippy?
  • Think: Turbo Tax
  • Small, targeted uses of AI can streamline workflows that would have otherwise taken minutes…or hours!

Accommodate more than one sense: touch, tap, tab, talk…and taste?

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.