15

I'm designing a web app. The settings menu consists of 3 tabs. For context, the user make an input, and the app generates an image.

The first tab has very basic settings that even the least knowledgeable of users would want to use eg background colour and image size.

The second tab has more complex settings eg specific rendering options, watermark disable, etc.

The third tab has a list of arbitrary constants used in the generation process that the user can change. I mostly used this for debugging however a user may want to use them to fine-tune their image.

What should I call the 3 tabs? So far I've been running with Basic | Advanced | Debug, however the 3rd tab has nothing to do with debugging from the user's perspective and there's no logical next step above Advanced.

Any thoughts?

Improve this question
4

5 Answers 5

Reset to default
21

If 3 tabs constraint is given and can not be changed then it is difficult to answer without understanding functionality and context.

Basic, Advanced and Whatever are unlikely the categories users use to think about the problem. If your Basic tab contains size and color parameters call it Size & Color. Basic or Advanced does not have information scent, it does not give user an specific idea of what's inside.

From details you gave in description I could imagine that parameter categories could be similar to the ones you can find in image editors: font, color, size, position, shadows, effects etc. Take a look at how Sketch, Photoshop, Paint or MS Word solve this problem. On top of that, I would question if you really need 3 tabs or any tabs at all, consider expandable panels instead.

In any case, labels, ideally, should be specific to domain of your application, they should explain your application. For example, almost all banking websites have Banking, Credits, Insurance and Investments because it is what they do and are, not Basic, Advanced and Geeky stuff.

BTW, I like "Geeky stuff" option for the 3rd tab :)

Improve this answer
1
  • This answer makes the most sense to me - a single menu with dropdown sections, each labelled according to what they do, not their complexity. While @NGAFD's answer may work best for some situations, in this case there are far more "arbitrary constants" than advanced settings so that would override that tab with complex stuff the user might not need.
    – snazzybouche
    Jun 16, 2017 at 16:48
14

Given that my comment gets some upvotes, I'll put it in as an answer.

Change to two tabs, basic and advanced and put the advanced and debug options in one list.

Try and let go off something if it doesn't work. You were thinking about having three tabs. This idea gave you the label problem. Maybe it is because of the three labels. If that's the case, let go of the previous idea. I've came across this situation a lot in the past and will probably come across it a lot of times in the future. Kill your darlings. See image below.

enter image description here

Improve this answer
3
  • 1
    your comment got upvotes because it was a good answer, not a good comment. The placeholder text for the comment box suggests one should "use comments to request more information or suggest improvements".
    – dennislees
    Jun 16, 2017 at 13:07
  • 1
    You're right. My bad!
    – Nick Groeneveld
    Jun 16, 2017 at 13:43
  • You could also have a button on the "Advanced" page that says "Debug Options..." and pops out the options below it, which are otherwise hidden on the page. This way people wanting to fiddle with some of the advanced settings won't immediately get intimidated by all the debug options.
    – Doktor J
    Jun 16, 2017 at 14:56
0

To NGAFD's point you may want to consider reorganizing your options or labeling them in a way that adds more context. Basic and Advanced are pretty broad and I'd even say debug might be better set under Advanced. So you may be able to limit the tabs to two. Depending on how many options you have you might also want to really consider if tabs is the right solution.

Improve this answer
0

You've already accepted an answer suggesting to do something else, but I'd like to give your original idea a try.

A text like Basic assumes that the user reads Basic settings, which may or may not work. I'd actually start with a single tab called Basic settings and a button More settings which turns on the second tab called Advanced settings. This way the user has already learnt what's "basic" and is ready for the "advanced" stuff. You can repeat the store once again for the Expert settings.

That said, I agree that using domain-specific names is better. If you can't find good names, then the problem may be the grouping itself. You may need ten parts like "color", "size", "rendering", "watermark", etc. This probably does not translate to tabs.

Improve this answer
0

I tend to agree with whenever said "Basic" and "Advanced." It's human nature to lump everything in the universe into one of two categories.

Of course, you can do more than 2. You could try card-sorting your way out of this one, arrive at a nice IA which you tested with like 40 users, but A) it sounds like you've already arrived at a modality - tabs - and B) see the first paragraph. Absent a solid rationale, keeping it simple is as great tie-breaker as any.

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.