Usability micro tip #2
Use module tabs to reduce infomation density

Another UI pattern I’ve found to solve a plethora of design complexity, is the module tab.

A modular tab is similar to a tab navigation in appearance, but it differs in that it enables users to switch between content, still on the same screen.

Enabling users to move between different content on the same screen means they can more easily find what they are looking for, without having to scroll, scan or navigate somewhere else.

I’ve found it to be a particularly helpful UI pattern for when designing high-information density screens, in a way that doesn’t cognitively overload users.

Magnetize

Enabling flexibility through complex and changing workflows

When we were designing the Magnetize jobs screen, we initially explored how we could make the primary content displayed on the screen, dynamic, so that the information displayed would be relevant to the job’s status in the workflow (e.g. quoting, in progress, invoicing).

However, what we we found was that:

  1. Business need to be able to access and update job information, quoting information, logs and invoices at ANY stage of the project; and,

  2. they needed the flexibility to jump ahead to any stage in the workflow - to, for example, send an invoice upfront before the job is even scheduled.

This is a lot of information to include in one place.

However, we were fully committed to our design vision to create a job screen that would be simpler, and faster to

Enter, the tab navigation

The moment we introduced a tab navigation UI pattern, we breathed a sigh of relief.

Fun fact - the concept of tab navigation actually comes from real-world object: tabs in a filing cabinet.

In the digital world, the tab navigation UI patterns enables users to quickly switch between groups of information.

Good, clear labels - means that it’s clear

And the introduction of what we call the “primary action button” meant that we could still guide users to the next task in the workflow: whether that was creating the quote, scheduling or invoicing the job.

The button stayed dynamic, while the tab navigation enabled full flexibility and access to job information and tasks.