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
Aug 8, 2019 · 3 min read

Considerations for long forms

Smart defaults save thousands of micro-seconds

Image for post
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

Image for post
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

Image for post
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

Image for post
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

Image for post
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

Image for post
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

Image for post
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

Image for post
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

Image for post
Use tabs to save and quickly recall previous search results
Image for post
Allocate space for your search refinement controls and group them in meaningful ways.
Image for post
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

Image for post
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

Image for post
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

Image for post
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

Image for post
Remember to include links that let users move the browser’s cursor to the first important position on the page.
Image for post
In combination with below, Target lets users conveniently skip to two sections: main content…
Image for post
and to the footer, where…
Image for post
…their menu items ‘drop-up’ to reveal richly accessible menus that include a convenient ‘close list’ option marked by a color-agnostic circle.
Image for post
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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store