I am looking for a better ui-design idea for this page.
So each company has different types of vehicles (trucks, personal vehicle , tractor etc)
Each vehicle has its own dates for the different government required documents like insurance, emissions.
some vehicles don't need emissions (tractor for example)

the problem is that the current design is working but its very loaded with many tables and data
looking for a way to simplify this UI to be user friendly.

enter image description here

  • Can you say what these tables are used for? Is it just a display, will it be interactive, will there be filters? – Andre Dickson Apr 21 at 15:53
  • Maximum rows are maybe 100, so currently there is no filter, because its all displayed in one page and user can hit CTRL + F user can click each cell to see documents related to the category (insurance document etc) – JavaSheriff Apr 21 at 17:02
  • What does the user use this page for? What are the tasks? – Michael Zuschlag Apr 22 at 2:26

You want to “simplify this UI to be user friendly.” You seem to be looking at this page, and thinking, “Wow. Lot’s of tables. That looks complex.” However, what’s simple and usable for the user depends entirely on the task characteristics –the starting point of the users, the end point they need to reach, and the context in which it occurs (including work environment and user characteristics).

Task Example 1: The user needs to compare all the Type X dates of all Type Y vehicles in order to decide which documents to process next.

A simple, usable design: Well, what you have now, as long as there typically aren’t too many vehicles (say, 20). Step 1: The user scans the page for the table for Y-type vehicles then, Step 2: compares the X dates to select a vehicle to click on. Provide a way to sort on Date Type X, and your job is done.

If there’re typically 100’s of vehicles, then put each table on a different page or tab, so the user can complete Step 1 with one easy click, rather than scrolling to the right table, which can take longer (a drag or multiple clicks). Also, maybe include some features (e.g., graphic coding) to make vehicles with similar dates stand out.

Either way, these are simple and usable designs as long as the user is looking first for a vehicle type, and then certain dates.

But what if it’s…

Task Example 2: The user receives a message to check all the documents for all relevant date types for the vehicle with Plate Number NNN.

A simple, usable design: If there are 30 to 100 vehicles, list all plate numbers together in a single table regardless of vehicle type. Plate numbers should be in alphabetical order. Don’t show any dates. Instead, clicking a row displays the dates in a detail region or separate page.

[[Master-detail of vehicle and date overflow

Step 1: Find and click right plate number, Step 2: check all dates. Perhaps you should also display links and/or summaries to the documents of each date in the same detail region or page, maybe saving a click.

If there are typically so few vehicles, all the information for most vehicles fits on the screen without scrolling, then the simplest is something like Nash’s (without the space-consuming pictures) or Andre Dickson’s design. Step 1: Scan for the plate number. Step 2: Read the dates.

If there are 100s of vehicles, then you don’t want a table at all. Instead, have a Search box with type-ahead to enter (or copy and paste) the plate number.

[[Plate Number search box with record results below

Step 1: Enter right plate number, Step 2: check all dates.

Of course, this is only simple if the user has the plate number. If not, it's not usable.

But what if it’s…

Task Example 3: After checking the physical paperwork in the glove box of a vehicle, the user opens his/her laptop to update the electronic records to match.

A simple usable design: The card layout, like Nash suggests, perhaps with sorting and searching, depending on how many vehicles there are. Pictures of the vehicles come in handy for scanning for the right vehicle when the users know what the vehicle looks like (they’re sitting in it).

But what if it’s…

Task Example 4: The user needs to find out which N sets of documents have the oldest (next due) date, regardless of vehicle type or date type, in order to download documents for renewal.

A simple, usable design: Don’t have table(s) of vehicles. Have a table of dates sorted chronologically.

[[Table of date type, date, vehicle, vehicle type

Step 1: Look at top N+ dates. Step 2: Click the dates to begin downloading docs.

But what if it’s…

Task Example 5: Sometimes it’s Task 4, but sometimes the user needs to find out which N vehicles of Type Y have the oldest (next due) date, regardless date type. Or find out which N vehicles regardless of type have the oldest Type X date.

A simple, usable design: Same as for Task Example 4, but include a prominent and easy-to-use hierarchical sorting feature so users can sort on vehicle type, then date within vehicle type (or date type, then date within date type).

[[Sort by boxes with ability to add additional

Or use Andre Dickson’s design, with the ability hierarchically sort by any column (empty cells sort to bottom).

But what if it’s a mixture of the above? Then figure out a design that makes them all relatively easy to do, favoring the tasks that are done the most often.

But what if I don’t know the tasks? Find out. Without user research, it’s impossible to say what design is usable. Once you know the tasks, the right design should come to you. It may not be any of the above.


enter image description here

I think you can have one table and allow for empty columns based on the different vehicle types. I have highlighted the expected empty columns in gray.

  • Thank you Andre, This is the way it was before the current UI, the problem with that is that is that its one huge table with many empty columns – JavaSheriff Apr 21 at 19:45
  • 1
    If you want to avoid the empty columns maybe try implementing a filter on vehicle type and displaying only the columns that have data. You avoid the empty columns and you have one display. When a customer needs to see all the records or easily inspect they can choose to display all the vehicle types. – Andre Dickson Apr 21 at 20:57

Depending on the task the users are doing on that page a card layout would also fit your style. It all depends on what the most important information is and what your users will be doing in the end.

car layout

  • This is a good idea but there are 50 or so vehicles the page will be loaded with cards and pictures just take unnecessary space – JavaSheriff Apr 22 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.