Screen is so cramped the user can't breathe!

navigation
dropdown
tabs
usability
design

#1

Hi everybody! We’re working on a screen for an internal user that has 10 tabs, 5 buttons, and 2 drop downs
… just on top of the page. :grimacing:

The business stakeholder has stated the need for the tab navigation to remain the way it is, but everything else seems fair game. There’s way too much going on here for the screen to be user friendly.

Can anyone provide feedback as to how to make this look less congested and more UX friendly?


#2

I’m curious-- what reason has your stakeholder given for keeping the tabbed navigation?


#3

When you say that the accordion stuff will be open when the customer gets to the page, does that mean all those black lines won’t be there?


#4

They want to keep it inline with their envisioned standards for upcoming features. We’ve proposed several alternatives, but they’ve been pretty adamant they want the tabbed navigation.


#5

Yes those black lines will be gone.


#6

Whew!

Remember that I’m not a designer, so you may need to translate this into designer speak so… my only thought is to make those buttons look more like buttons rather than black rectangles. Does that make sense?


#7

hi @kpathan1

some questions are popping up watching your wireframe:

  • are the tab section following a step by step process (eg you ha to fill in “management” and after you can go to “maintenance”)?
  • are the tab sections entry points for different screens it doesn’t matter where u will start (eg I open the app and I select “documents”)
  • What about the validation of each tab (server/client side)?
  • Regarding the buttons, what about the hierarchy of these actions?
  • Do they have the same weight in terms of task accomplishment?
  • Do u really need a dropdown for the “minority vendor” (if the value list is a simple yes/no)?
  • What about the device targets?

Did u challenge your stakeholders with UX KPIs (eg time to accomplish the task)?


#8

this is the reason why your feedback is so precious :slight_smile:


#9

Hmmm… interesting. I ask mostly because this navigation setup looks prime for a Mega-Menu, but as that’s out of the question, I’ll wait for your answers to @dopamino’s excellent questions :slight_smile:


#10

@kpathan1, I feel your pain. This set up looks a bit like the dreaded SAP CRM I used for a data entry job. The accordions remind me a bit of the classic Salesforce format. Perhaps, you can take inspiration from Salesforce Lightning? Admittedly, I don’t know much about Lightning but it’s more user friendly to me than the classic format or SAP.

Again, a non-designer here. But I am someone who has used various systems for data entry. I really am unsure as to how to help. I would need to understand how everything was used by the user. I explained a bit about my experience in the Book Club Week 1 thread. I thought a lot of those accordions were useless for the task I was employed to do. You could easily condense what I needed to do on to one screen.


#11

Hi, I’ve seen a lot of payment gateways with a similar layout, and some of them are really confusing to use.
You have to be an expert in the system to get around. How you get to become an expert looks slow and painful.

It looks like you have to use the 2 drop downs to populate the content of the accordions
So I would suggest disabling the accordions if you are waiting for the drop downs to be set.

The buttons all seem to have very different functions - are they all enabled at the same time?
Do you use Save on other parts of the system?
I would suggest positioning it in a common place to make it easy to find each time it’s userd.

The Change assignment and Edit vehicle options - do these relate to the dropdowns?
If so I would position them close together.

Potentially add some separation around the buttons to group them (if they can be grouped).
Are you repeating Save and Submit at the bottom of the screen?
If you’re making changes to content in the accordions you may want more save buttons - so it’s easy to save and validate smaller groups of content.


#12

Thanks for the feedback. You’ve given us the idea of using standard size buttons (the actual UI buttons will look better, those Balsamiq frames can be deceiving). Like you, I’m also not a designer, but a business systems analyst who’s responsible for doing mockups and light weight prototypes. We don’t have any UX people here, so UX standards are something the BSA’s try to figure out on their own.


#13

Thanks for the great questions! My apologies for the late reply. I’ve tried my best to answer them below:

  • are the tab section following a step by step process (eg you ha to fill in “management” and after you can go to “maintenance”)?
    The tabs are not meant to follow any sort of sequential process.

  • are the tab sections entry points for different screens it doesn’t matter where u will start (eg I open the app and I select “documents”)

Yes, the tab sections are entry points for different screens, it makes no difference where you start

  • What about the validation of each tab (server/client side)?
    I’m not certain if you’re asking about some sort of overall validation, but each tab has different validation rules from both client and server sides, as they’re content varies significantly

  • Regarding the buttons, what about the hierarchy of these actions?
    There is really no hierarchy for the buttons, they were just arbitrarily placed where they’re at in the wire-frame

  • Do they have the same weight in terms of task accomplishment?
    Each button is important, but the Edit Vehicle Options and Change Customer Assignment buttons are most important here since they will ONLY appear on this screen, whereas the others appear elsewhere

  • Do u really need a dropdown for the “minority vendor” (if the value list is a simple yes/no)?
    Great point. We really don’t need a dropdown for a Boolean value like this. Do you think a toggle button or radio button would work best?

  • What about the device targets?
    I assume you’re referring to whether or not the application will have a mobile version. If so, currently that is out of scope for the project. This is only meant to be used on desktops and laptops

  • Did u challenge your stakeholders with UX KPIs (eg time to accomplish the task)?
    I’m not a designer, so can you please elaborate as to how best to go about doing this


#14

hi @kpathan1

here are my comments:

  • are the tab section following a step by step process (eg you ha to fill in “management” and after you can go to “maintenance”)?
    The tabs are not meant to follow any sort of sequential process.

Maybe you can reach a compromise between business wishes and design approach. AS a quick win I would try to display all the TABS in one line (UL, LI) according to the PRIO defined by the business logic of the app. I know that the screen real estate is not enough, you could design a scrollable feature or put the rest of the tabs in a context action button. As an improvement, I would try to define a process to let the user decide which tabs are visible at the first glance

  • are the tab sections entry points for different screens it doesn’t matter where u will start (eg I open the app and I select “documents”)
    Yes, the tab sections are entry points for different screens, it makes no difference where you start

Maybe here you could define the visibility of each TAB per user type, I’m not 100% sure that all the TABS are needed for all the user types

  • What about the validation of each tab (server/client side)?
    I’m not certain if you’re asking about some sort of overall validation, but each tab has different validation rules from both client and server sides, as they’re content varies significantly

I’m asking because what will happen if you have asynchronous validations (server side and client side) how do u communicate errors and notifications for each screen?

  • Regarding the buttons, what about the hierarchy of these actions?
    There is really no hierarchy for the buttons, they were just arbitrarily placed where they’re at in the wire-frame

I suggest challenging your stakeholders with a quick and dirty usability test. Ask 10 users wich buttons they will use most. The ones that are at the bottom of the ranking can be grouped by the context action button

  • Do they have the same weight in terms of task accomplishment?
    Each button is important, but the Edit Vehicle Options and Change Customer Assignment buttons are most important here since they will ONLY appear on this screen, whereas the others appear elsewhere

I suggest defining a style (CSS class) for the primary call to action (CTA) and a style for the secondary CTA

  • Do u really need a dropdown for the “minority vendor” (if the value list is a simple yes/no)?
    Great point. We really don’t need a dropdown for a Boolean value like this. Do you think a toggle button or radio button would work best?

YES! I believe that dropdowns are the user interface last resort :slight_smile:

  • What about the device targets?
    I assume you’re referring to whether or not the application will have a mobile version. If so, currently that is out of scope for the project. This is only meant to be used on desktops and laptops

This is already a good starting point for a UX strategy. I suggest keeping in mind that often users shrink browser windows because they work with more than one app at the time

  • Did u challenge your stakeholders with UX KPIs (eg time to accomplish the task)?
    I’m not a designer, so can you please elaborate as to how best to go about doing this

In my experience, as a designer, I always tried to build trust between business people, engineers and designers. Defining key performance indicators (KPIs) related to the UX/UI helped me a lot in agreeing on to do lists and in taking shared decisions for the future of the product.
Did u ask your stakeholders what are the main goals of the re-design (if is a re-design) project?
Did they mention what they want to measure and to compare vis-à-vis the old version?

Let us know how the thing are going!