After looking at sites like http://gethoneybadger.com/, I'm compelled to ask:

How useful are these outlined buttons on pages where there are no other outlined elements and no transparency whatsoever?

The more I look at them the more I fall in love with them.


I think it really depends on what's on the rest of the page. If an outline button really stands out from the other content then people searching for a "button like" item will be able to understand that this is how buttons look on your site. If there are lots of other outline rectangular things on the page then they might have a problem.

One thing that concerns me is when the transparent button is over graphics. I saw one example there where the text was not very readable. If you don't control the graphic content behind your buttons (i.e. Your client can change it later) won't be able to guarantee the usability of your site.

| improve this answer | |
  • 1
    +1 I found the button over the graphics where the button didn't have any opacity at all very ill-advised. If it hadn't been for the fact that I knew I was looking at a component (/control) vendor's website I wouldn't have guessed the outline was a button, and assumed it was just some decoration. – Marjan Venema May 25 '14 at 9:54
  • The Designmodo one had some bad examples. I've removed it and rewritten my question slightly. – Mark Boulder May 31 '14 at 1:14

So far, whenever I've had things like this in an A/B test the buttons that look like buttons win over outlines.

Take that with appropriate levels of salt. Since my testing context may well be different from yours.

Basically I'd usability test it at the very least, A/B test too if you can.

| improve this answer | |
  • Would it be possible to share the designs used in those tests? – Mark Boulder May 31 '14 at 1:15
  • I dunno ;) I'll ask… Not sure if the old ones were kept. – adrianh Jun 1 '14 at 7:33

There are three aspects to the visible design of these buttons that I think will make the difference in how successful or usable it is to the user.

  1. Visual contrast to other page elements - I think if you have too many square boxes in your design that all look similar then it will get too confusing. There are enough elements to vary (e.g. size, colour, font, icon) that can be used to distinguish between interactive and static elements as well as primary versus secondary call-to-action buttons.
  2. Content or labelling standard - If there is a clear convention for user interface elements in terms of the text and writing style applied, then it is much easier to recognize compared to just trying and clicking different content on the screen.
  3. Interaction or behaviour - This is probably the one that is the most easy to get wrong, because many things on the page may have interactions whether or not they act as call-to-actions. I think there are certain expectations like hover-over or on-click behaviours that people expect on buttons, and if these are applied liberally and inconsistently on the site then it will be confusing for the user.
| improve this answer | |

In my opinion, extra lines on a UI always give it a cluttered look. Similar is the case with outlined buttons. But of course it depends on the nature of UI that you are working on. If needed, I would prefer transparent buttons with outline as compared to shaded buttons with outline.

| improve this answer | |

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.