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 ?

  • 6
    Can you provide a quick mock up so we can see the buttons in context? – SteveD Aug 1 '16 at 9:59
  • 1
    A very thorough look at the dictionary might help here, but try to keep things simple. – EKons Aug 1 '16 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 '16 at 12:20
  • 6
    I fail to see the question in the question. – rubenvb Aug 1 '16 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 '16 at 9:10

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.

  • 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 '16 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 '16 at 7:46

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

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.

  • 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 '16 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 '16 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 '16 at 15:24
  • 2
    @A.L Going to the extreme, heading = "Send/Receive all data from sources", button = "Now". – vals Aug 1 '16 at 20:47

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

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.

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.

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.

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

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

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.