21

I've got one screen with two API options available (web tool). Both forms include a title and two input fields. The user can only choose one API at the time.

Now, I've tried checkboxes, a dropdown menu to show only one, a tab nav (and that's odd). I've tried to disable the other option's input fields when editing the other... etc. None of them are solutions.

I am drawing blanks. How would you guys solve this?

enter image description here

  • Can you share some screens of what you tried already? – RobbyReindeer May 18 '18 at 7:23
  • 1
    Hi Rob. I've added a blanco screen of the situation. Stripped of any branding for obvious reasons. – Geffrey Bos May 18 '18 at 8:20
  • 1
    Why not tabs like the main menu ? – Core972 May 18 '18 at 8:33
  • "None of them are solutions." Why not? – Mast May 21 '18 at 9:41
65

You could use an accordion. Here's an example of one I've used before:

enter image description here

  • Looks nice and clean. If necessary, you could also have a short summary in the "closed" option(s) if the title alone isn't enough to give context. – TripeHound May 18 '18 at 8:52
  • 2
    As an alternative to an accordion, it could be boxes side by side, traditional HTML fieldset-like structures, etc. – phyrfox May 18 '18 at 17:49
2

I see 2 options you can try here:

  1. Two step approach: in the first step they choose which API, they click Next, and in the next step they configure the settings. When you do this initially the UI is similar to a wizard, but once it's set and you want to change your setting, the UI needs to change because you'd want to see the settings and not the wizard again.
  2. Drop down approach: Initially only the drop-down is visible. Once they choose the API they want from the drop-down, its settings appear below it. The drop-down stays visible, and if they change its value, the UI of the settings change.

Personally I would choose the drop-down approach because the UI stays the same for initial setup and future changes.

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.