0

In my app, the user can choose between using percentages and pixels. So width and height are kind of the children of percentage and pixels.

However, right now percentage, pixels, width, height look like totally different sections:

enter image description here

How to modify this UI so width and height seem to belong to pixel/percentage? (Note: Percentage only has one text field.)

2
  • Have you considered indenting the children of each section? That should give more emphasis on hierarchy
    – Majo0od
    Apr 17, 2017 at 13:39
  • 1
    First impression is to get rid of the horizontal rule between your buttons and the fields. Apr 17, 2017 at 13:56

2 Answers 2

3

Radio buttons represent a set of choices where only one is able to be selected at a time. They are good for representing a single parameter, but not ideal when more parameters depend on the radio button's value.

I would recommend using tabs instead of radio buttons. Users recognize that a tab's content is relational to the tab itself. Keeping one of the tabs underlined or highlighted with the primary color (as in the screenshot) implies that only one is active.

1

I don't think that line in your design that shows the active portion helps because

  1. It kind of serves as a visual delimiter that separates the content above and the content that's supposed to be related below it.
  2. It's redundant with the radio button since they both indicate the same thing.

You could put the line above or show tabs in a more traditional way (e.g. background fill or border) depending on the aesthetic you're going for.

I also think the association will be made clear both by increasing the separation of the Size section from the other sections (i.e. add more space between the Size and Icon sections) as well as the interaction itself (the percentage field and the width/height fields will show or hide dynamically based on the selection above 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.