42

I have buttons for very specific actions. That ends up with button labels like "Send/Receive all data from sources" or "Create predefined calculated channels".

Each button has also an icon that goes with it. It results in big ugly buttons that are overloaded with information. The interface is also for tactile so a tool-tip is not an option. Any alternatives/tips to make it more usable/esthetic ?

Improve this question
7
  • 7
    Can you provide a quick mock up so we can see the buttons in context?
    – SteveD
    Aug 1, 2016 at 9:59
  • 1
    A very thorough look at the dictionary might help here, but try to keep things simple.
    – EKons
    Aug 1, 2016 at 12:07
  • Unfortunately I can't show you screenshots of the current product since I do not own it. But I do work on it.
    – ArkDeus
    Aug 1, 2016 at 12:20
  • 6
    I fail to see the question in the question.
    – rubenvb
    Aug 1, 2016 at 17:29
  • 2
    You could use simple titles and use popover to display the full text. For instance a button "create channel" with a popover "Create predifined calculated channels"
    – Walfrat
    Aug 2, 2016 at 9:10

9 Answers 9

Reset to default
51

Remember the user's context. Sometimes when we are creating an interface, we tend to forget that our user is navigating through a specific set of information to reach an action button. At that point, "Send/Receive all data from sources" could also be reduced to "Sync Data" and it would carry the same meaning for the user.

Everything should be made as simple as possible, but no simpler - Albert Einstein.

Improve this answer
2
  • 68
    Ironically that quote is likely a paraphrase of "It can scarcely be denied that the supreme goal of all theory is to make the irreducible basic elements as simple and as few as possible without having to surrender the adequate representation of a single datum of experience." - Albert Einstein
    – MiniRagnarok
    Aug 1, 2016 at 14:40
  • 1
    I am discussing with business engineers the possibilities to reformulate things since I don't really understand any of these actions - they are very very business-specific. That was the last thing I wanted to do because they are very busy people but you're right on that
    – ArkDeus
    Aug 2, 2016 at 7:46
30

Can you just annotate the button with a label? The label explains the action, and the buttons indicate a clear and specific action that will be taken.

In some cases, we do something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • In the UK it's ilegal to syncropate coarxiant data on a non-datatronic interface...
    – Juan Perez
    Mar 10, 2022 at 17:23
13

There are at least a couple of strategies you can apply to deal with this:

  • Stick with the primary action word larger, then the rest of the words in smaller text, but it won't necessarily solve the problem when the text is too long
  • Create a subsection or subheading so that you put the user in the right context, then you can remove the extra text that is used to provide the extra information

I think if you go back to looking at the content and information architecture, you might be able to come up with a set of vocabulary that is much simpler for the user without confusing them, and that's not a quick fix but a more effective solution.

Improve this answer
4
  • 1
    Create a subsection or subheading Can you please provide an example with the Send/Receive all data from sources button from the question?
    – A.L
    Aug 1, 2016 at 13:15
  • 2
    @A.L It depends what the other actions are that you want to group / distinguish between. It might be header "Send/Receive Data", action "All Sources"; or it might be header "All Sources", action "Send/Receive Data".
    – IMSoP
    Aug 1, 2016 at 13:23
  • 1
    This solution seems to work pretty well for me, I made buttons group with a header and for example I put a "Synchronize" header and made some adaptations of the button label themselves, I'm quite satisfied with the result. I also made the buttons completely flats, without border and with their background the same color as the main background, and the result is very good. Consider flat design when you have long labels in order to avoid large zones of color.
    – ArkDeus
    Aug 1, 2016 at 15:24
  • 2
    @A.L Going to the extreme, heading = "Send/Receive all data from sources", button = "Now".
    – vals
    Aug 1, 2016 at 20:47
4

In my opinion, there are few possibilities

  1. Use intelligent terms that are shorter and doesn't look ugly

  2. Represent it with icons and give the full title in tooltip only.

  3. Make button like the attachment. Note that it's just for reference, you can make them smaller and with any color or type.

enter image description here

Improve this answer
4

You said, "button labels like...". So why you don't keep that text like labels / description for the buttons and keep the value for the buttons "Go" or "Submit" + specific icon?

If you want to be just a little more specific, you can use "Create" and "Send" + specific icon.

Improve this answer
2

I would suggest evaluating what is unneeded information. For "Create predefined calculated channels", unless there are other buttons for creating channels in a different way then "Create channels" should be sufficient and further details can be left to documentation.

If there are multiple methods for creating channels then you could use a radio button approach: create a box with a label "Create Channels", add radio buttons for the various methods (e.g. "Predefined", "Calculated", "Estimated" and then a single "Create" button).

As a general advice I would take the time to understand the terminology. The words "predefined calculated" likely aren't accurate, the combination doesn't make much sense (predefined and calculated are almost opposites). A lot of times programmers are asked to automate very old processes with antiquated terminology. One aspect of the job is to learn enough of it to simplify and organize in a way that makes sense to someone without all that history.

Improve this answer
1

Edit: Since this needs to work on a tactile platform, maybe you could add a separate "toggle descriptions" option that would allow the user to see the button labels, and then toggle it back off to remove the clutter for everyday use. This isn't as user friendly as the tooltip, but should still be workable.

Original Answer: Assuming this is a desktop application, a common way to handle this problem would be with a tooltip. You can reduce the button label to only one word, or even a representative icon, and then add the more detailed information in the tooltip.

The downside is that the user will have to hover while they are getting oriented in the software. However, in the long run it reduces clutter and streamlines the workflows for experienced users.

I might get some disagreement here, but I think that the user will be more than happy to hover if they need clarity, if it means the buttons won't be too large to all be shown face up.

Improve this answer
2
  • The problem here is that the gui is cross platform, so no tooltip for tactile unfortunately...
    – ArkDeus
    Aug 1, 2016 at 15:16
  • @ArkDeus Yeah, I was afraid of that. I added an edit to accommodate tactile platforms.
    – Rat In A Hat
    Aug 1, 2016 at 15:37
1

Related to Rat In A Hat's answer, my choice would be to have the button with just the icon - maybe with a short description if you must have it - and a small icon next to it that can be tapped to expand the information for the button. Tapping the description should make it go away again.

This way, once a user is familiar with everything, the extra information remains hidden and doesn't clutter things up.

I've tried to illustrate this in the attached image.

enter image description here

Improve this answer
0

The treatment to this button depends upon it's type and by type I mean, are they primary or secondary.

1) If both they are primary, Give a base, stack them as per calls happenings, find the shorter terms and give a description below the same

2) If one of them is primary and one is secondary give base and rest of the things to primary and leave secondary base less, instead make it a link button with under line below the same. Make sure the same in placed under primary button.

If possible kindly share the screen where this buttons are getting placed.

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.