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. 
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?
I’m curious-- what reason has your stakeholder given for keeping the tabbed navigation?
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?
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.
Yes those black lines will be gone.
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?
hi @kpathan1
some questions are popping up watching your wireframe:
Did u challenge your stakeholders with UX KPIs (eg time to accomplish the task)?
this is the reason why your feedback is so precious 
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
@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.
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.
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.
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
hi @kpathan1
here are my comments:
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
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
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?
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
I suggest defining a style (CSS class) for the primary call to action (CTA) and a style for the secondary CTA
YES! I believe that dropdowns are the user interface last resort
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
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!
