2

Tabs in a dropdown

Hello there, I'm new in this field, I came from developer background but I'm into UX field, reading stuff about design.

We are currently redesigning the app, this is from a tabular view of users, then when you click the button there will be a dropdown of these tabs below.

For me it feels that the details view is plain, but I don't know how to improve it. I'm thinking of doing like a tabular view but there can only be one details so it's not a good thing. What suggestion do you have guys?

  • 1
    I'd suggest you rename this question to replace "tabular" with "tabbed". "Tabluar" means "displayed in a table or grid". You'll likely get more/better answers using a more accurate term. – Justin Grant May 6 '15 at 19:12
1

Tabs are OK if you have space for them and when data within tabs are different (e.g. histories consist of long list of logs).

Dropdown is very poor solution - you hide navigation and force user to remember that ther is an "Activities" option. I recomend using tabs on desktop and change them into native dropdown on mobile.

Showing everything on one page with Headlines is perfect if you have similar amount of similar data (e.g. Linkedin profile) which needs to be accessed at once.

An examples for improving details below. Icons - are perfect when you have limited and easy to recognize types of data. Companies and Primary company may be a problem here. Consider marking in different color primary company in top section also.

a,b,c

  • Hi there, I really like your suggestion, I might go with option A, but just one questions. What happens to the rest of the space? Most of our user use this app on the monitor so there will be a lot of space in the right. Will I just use a three column approach? – Arman Jon Villalobos May 7 '15 at 2:24
  • Hi. It is common issue, and you can: center it, split it into two columns (it will fill the space, but reduce reading speed) or put some very light graphic/icon on the right to fill white area. I would go for 3rd one with icon. – Karpiu May 7 '15 at 4:47
1

Left aligned labels with there values placed to the right would make this page way easier to read. Right now, there is no flow, and my eyes keeps bouncing around.

If you want to spice things up you could make the persons name a h2 tag and make their company a smaller h4 tag. Then have the persons details displayed below that in a table like format.

There is nothing wrong with having something look plain if it provides the best usability and user experience.

1

Data is data and that's why tables were invented in the 1st place :)

In your case, user really needs to have a clear overview of the details so again, a simple table (nicely drawn, headers, linear) would suffice.

But if you really want to give it a bump, just try to transform the entire thing into a card/vcard format with classical approach:

  1. Personal Details

    First Name: Aaron
    Last Name: Jackson
    ...
    
  2. Business Details

  3. Contact Details
  4. Other Details (include everything else/secondary data in a tabbed format)
0

If you want to approach it in a UX fashion, then I would suggest doing a bit of design thinking. Google ventures do a good version of it their design sprints which works well for us.

If you pick a small story, like "as a [who is looking at the information], I would like to see a users information, so that [what is the intent - why is someone looking at the info - to find a phone number / email address?]", you could start with a smaller session than the full 5 days, and try out a process that work well for you (i.e. see if cramming it in into a single session with some preparation works for you).

I suspect that you will end up with a much smaller amount of information than what you have above to show to your users, and you can play around with formats to show it in and put them to the test.

For example for showing user information you might find you don't need any headers at all (this is just a suggestion - it may be inappropriate for your needs).

E.g.

Aaron Jackson
Oneform Group
arronjackson@westnet.com.au
0428 525 355

Also you can play around with space, typography and colour to get a more interesting feel to it.

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.