3

I'm designing a software and the first version was designed by my client. During a presentation of the progress, he asked me why I removed the "Increment Buttons" (not sure if that is the right name) [image-1] and used "+ Add Branch" and "Remove" instead [image-2] when adding / removing options from a list.

Honestly, I didn't have an answer that I could prove with research but I would appreciate I someone could point me something.

enter image description here

enter image description here

2

I agree with @Nick. Better try out A/B testing to find out which one works better.

Clearly, the second option works out. It conveys to the user what field may be added.

Use of "+" or "-" works better for numeric values.

enter image description here

1

Not knowing why you changed something in your design is a risky place to come from. Especially as a UI/UX designer.

Always design based on research, user feedback and testing. Never just do something because it looks good.

That being said. I don't know about the context of your design but I like the second image. It shows where the focus is, has clear call to action and context (amount of characters left).

Do your research. Find out which one works better and use the points I mentioned above in whatever solution you go for.

0
1

This is the old "why use an icon when you can tell people what an action does" argument, it's been asked and answered many times and there's resources on Google.

When to use icons vs. icons with text vs. just text links?

Et al.

Go with the text, it does what it says on the tin.

1

I would split the issue in 2 parts:

  • Remove single line button
  • Add new line to the list button

In the original design the "minus" button was outside the input field, but then you moved it inside. I can see that it could be more aesthetically pleasing, but users may accidentally hit it while trying to click inside the input field to edit/select the text. Then, while the user is editing a line, the right side of the input field would be quite crowded and confusing, since it would say "28 characters left: Remove". On the other side, a circle button with a minus inside of it could not be that clear (the minus icon has many other meanings): probably a trash can icon would be more clear, since it is the standard icon for the "delete" action. A red button with the trash icon and the "Remove" label would leave no doubt to the user.

While the "remove" button has to be quite close to the input field, since it relates directly with the item, the "Add branch" button should not be bound with any particular item. The "Add branch" relates with the whole list and not with a specific entry of the list. So it makes completely sense that it isn't paired with a button (the minus) that has the opposite meaning and that relates with another thing. An alternative implementation of your button would be adding an empty line to the list, with a green action button "+ Add Branch" on the left, so users, in order to add a new branch, would only need to select the empty input field, enter the branch name and click on "+ Add Branch" or press Enter.

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.