2

I have an extremely busy screen for a single page application that allows people to pick their own components and build a custom printed circuit board (following a template that we provide).

Our customers usually create and order a few (2-3) custom PCBs at a time and these are listed in a table. Each row is a PCB and has a number of editable cells (5-10).

enter image description here

For each PCB there are a number of things that you can customise in detail (i.e. CPU: type, model, frequency, ... memory: amount, type, frequency, etc...) and these are displayed in separate sections that can be expanded/collapsed below each PCB row. Collapsing and expanding is possible via a context menu that is visible when you hover over each row.

Each section can have a high number (100-200) of fields (text boxes, checkboxes and selects) which make each section but also the whole application quite busy and data intensive.

Data can (obviously) be saved and, when done, you can test your configuration and order your PCB. Testing the configuration is an asynchronous operation and can take some time, so it's an operation you want to do the least number of times.

Some validation happens as soon as you type (i.e. you can only enter numbers when specifying the clock frequency) which will prevent you from saving wrong data and some validation is done when you save each section (i.e. frequencies of certain components have to match with others etc...).

You can have warnings (non-blocking) and errors (blocking) and these will be visible in each section or on the field itself.

However, as previously mentioned, these configurations can be saved and the whole application reloaded - so ideally you could load your application and already have some warnings or errors that won't be immediately visible (since they would only be visible in each hidden section).

This suggests warnings and errors should be visible at all times and well before you can test your configurations.

I have sketched a few different approaches but have their own drawbacks.

Attempt 1

enter image description here

An expandable/collapsable sidebar on a side that lists warnings and errors.

The sidebar would also have an icon to display whether there are any problems before you expand it.

The drawback here can be that it takes up some horizontal space which is quite precious, given such data density.

Approach 2

enter image description here

Similar to approach 1, the sidebar would be displayed at the bottom of the screen.

And similarly, that takes vertical space, which is precious too since screens are in landscape mode and once a section is expanded it can be quite lengthy.

Approach 3

We could have another row below each row that is visible when there are any problems and can be expanded/collapsed when needed.

None of these seem quite right and I'm a bit short of ideas.

What's the best approach that can be taken here that would improve UX?

Edit: The above approaches also require extra clicks to get to the errors, which is something we would like to keep to a minimum, so ideally we'd like to always have the errors visible on the screen.

Improve this question

2 Answers 2

Reset to default
1

Usually you could display errors right below the input. Depending what technology you use, there are multiple possibilities, but the server side check with the list works, but it's too old-schoolish. With SPA (javascript/angular) you could re-validate data on each change (add even a debounce effect before that via RXJS), generate a list of errors and dynamically show these errors beside the input's itself and/or also in a container (on the right side).

Actually the logic is this: if there's an error, I do display a red bar on the input, but display the error message below just when input was entered.

Here's a sample, but be aware, the validation library does not work in stackblitz, so the results are statically added: https://stackblitz.com/edit/ups-validation-sample?file=src%2Fapp%2Ftest-validation%2Fperson.component.ts

Improve this answer
2
  • We do this: > Some validation happens as soon as you type (i.e. you can only enter numbers when specifying the clock frequency) which will prevent you from saving wrong data and some validation is done when you save each section (i.e. frequencies of certain components have to match with others etc...). - - - Also we simply use plain ES6, no frameworks/libraries.
    – XCore
    Aug 26, 2020 at 8:18
  • This is a JS "library" the idea is to have a simple way inside a single function to set up all the validation rules, so you don't split it between html and other sources. Of course it's up to you what and how you wire up.
    – baHI
    Aug 26, 2020 at 14:16
0

If the screen is extremely busy what can help you saving space is thinking in a third dimension.

Maybe a floating window (fixed or not) with a collapse/expand button and the alerts notification list:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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