How to simplify miller column layout

Question

Context:

This is a admin portal for airport backend team. Admin with specific rights will be adding/editing/deleting airports, runways and corresponding inputs.

In below wireframe:

-- On the left panel, links will be shown.

-- On right side, list of airports(N) will be shown with scroll bar and search feature to filter the data

-- Corresponding runways(<10) will be shown if user select any airport in adjacent columns, by default first will be selected.

-- The last column holds a forms related to selected runway (5 fields max)

Use case:

-- User is tech savvy and use the application heavily

-- User can select any airport/runway at any given time

-- All the information must be available always

-- User can do CRUD operation on airport/runway at any given time

Problem(I think)

-- Too much information on the screen leads cognitive load

-- 6 buttons for CRUD operation

Currently, layout is using miller columns, can it be designed in different way to reduce load and create better UX?

Answer 1

You mentioned the cognitive load placed on the user with such an approach, and I think it would be wise to also consider how 'fragile' the user experience is in this case. For example:

User selects airport 2, runway 2 - proceeds to enter 6 fields of complex data collected from around runway. As user attempts to Save this data with "Save" button, they accidentally click/tap 'Airport 3'.

In this case, what happens to the data they've added to Airport 2 > Runway 2? Is the data lost? Are they presented with an alert alarming them to possible lost data?

When presenting many CRUD operations displayed in different Miller columns, it's important what happens in these use cases. If this 'risk' can be lessened, the user should feel a lot more relaxed when using the application, which in turn helps them work effectively.

If you're not able to give the user a secure, risk-free interface using Miller columns, I would argue the case for single screens, each with their own inputs. It may take more time to navigate, but it would be more stable.

Answer 2

A few thoughts :

• I think Miller columns is a good choice to display this type of information
• The breadcrumb seems unnecessary, the miller columns should be enough to display the hierarchy
• The alignement of you data (Airports / Runways) is what make the interface seem complex and clunky
• I would use more space to display the airports and runways
• The edit and delete buttons could be replaced with icons if users are tech savvy
• The edit and delete buttons should be placed somewhere else, it is not clear here which airport or runway they are associated with

Hope that helps.

Answer 3

It looks like you are trying to put everything into one page. Miller columns are not normally considered complex so this is only complicated because it has multiple additional triggers which are duplicated across different columns (edit, delete, etc.) each competing for your attention and is introducing multiple decision points for the user to consider. These trigger are adding to cognitive load, but are also contributing to visual noise which has the potential for the user to make mistakes.

Perhaps a hub and spoke pattern will be better than a Miller column because you can now chunk the information over a number of pages thus simplifying the cognitive load at each stage?