13 ms·

Half of this advice hinders usability. #2.1: Reducing the opacity of your text makes it harder to read. #4: Borders help logically separate areas of an interf

by cpburns2009 9y ago

Half of this advice hinders usability. #2.1: Reducing the opacity of your text makes it harder to read. #4: Borders help logically separate areas of an interface. Throwing in more white-space is wasteful. #4.3: Gratuitous white-space is wasteful, especially if you have limited screen real-estate (i.e., mobile). #7 is a major pet-peeve of mine which I cannot agree with. If it's a button, make it look like a button. Nothing is more confusing than a button that just looks like some text label.

JoshMnem 9y ago
I like borders too. They often help make it easier to understand the layout from a quick glance.
- wlesieutre 9y ago
  Especially in contexts where there’s more then one hierarchy along more than one axis. UIs where you have content in the middle with multiple columns and sidebars and toolbars turns into a mess with the no borders flat design approach.
sameji 9y ago
I have to disagree. In an absolute sense you are correct, however you're missing the relative benefit of each point. #2.1: Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. #4: Why are you worried about white-space? If you have space, you can use it. If you run out, then you have to start rationing and using other visual tools. Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. #4.3: So create a responsive layout for mobile that uses more borders where necessary. #7: This is a major (and valid) criticism of flat UX, but slightly adjacent to the point in the article. The article says you don't need a background colour for every button, which is good advice.
- cpburns2009 9y ago
  > Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. I should have clarified this better. I dislike low contrast text because it makes it hard to read which is popular with the flat UI trends. Opacity isn't used so much from my experience, but light grey text on white is which has the same effect. I agree that inconsistent font sizes are bad too. > Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. In the example from the article I think the bordered version is much more concise and clearly delimits the search box and list. White-space seems to be used too carelessly in an attempt to avoid any clearly defined borders. > The article says you don't need a background colour for every button, which is good advice. You don't need to give every button a colorful background. But each button should have at least a border or background to distinguish it from standard text. The background can be just a boring grey like the classic Windows dialog buttons.
- Nadya 9y ago
  I actually just got done running an A/B analytics test on a large website (>100k viewers/day). Statistics say you're right, least about the buttons. ;) The client wanted a "button" without a background color because it looked bad to have two buttons side by side. My company told them that was a bad idea based on data, so we added tracking to their site and A/B tested their home page. Button with a background color had 40% more conversions than the "button" they wanted without the background color. Several pieces of the advice given on that article are proven to be bad ideas for most websites if you track your users. What "feels" right and what is right are often two different things. If you're ever making a change because you think it will perform better you better be tracking the statistics. Often times you'll find out you were wrong. Another, similar, example is that a client had a button they wanted to "draw attention to" so wanted to inverse the :hover background color with the normal background color so that it would stand out from other buttons. It looked different - but hurt engagement because it no longer looked like every other button on the site. E: This was meant to be a response to cpburns2009, the parent of the comment I responded to. Thanks to metalliqaz for pointing that out.
  - 9y ago
marcosdumay 9y ago
About #7, the article is not advocating making things not look like a button¹, it's advocating making secondary buttons lighter. 1 - In fact, the buttons there don't look like buttons. But that's because it uses a normal design, and nobody creates buttons that look like buttons anymore. Could we please standardize the "button look" with a small, fuzzy outset?
- Silhouette 9y ago
  Well, the examples of tertiary buttons under #7 are plain text or plain text with an underline, and the article text specifically mentions styling tertiary actions like links as being "usually the best approach". It pretty much does exactly advocate making things not look like a button.
hammock 9y ago
>#2.1: Reducing the opacity of your text makes it harder to read. That's the point, to take away focus from something lower in the hierarchy. >#4: Borders help logically separate areas of an interface. Throwing in more white-space is wasteful. You're defining waste from a screen-space point of view, not a usability point of view. Who cares if the screen's pixels are at maximum utility, I want my user at maximum utility! >#4.3: Gratuitous white-space is wasteful, especially if you have limited screen real-estate (i.e., mobile). See above >#7 is a major pet-peeve of mine which I cannot agree with. If it's a button, make it look like a button. Nothing is more confusing than a button that just looks like some text label. Again, hierarchy.
- Silhouette 9y ago
  That's the point, to take away focus from something lower in the hierarchy. But there is a difference between merely moving something further down in your information hierarchy and making it hard to read. Low contrast text, like very small text, is hard to read for a large part of many markets. If it doesn't need to be read, why not go to the next stage and remove it entirely? You're defining waste from a screen-space point of view, not a usability point of view. There is precious little evidence that the trendy, overly spaced-out look of flat design and its derivatives has any usability advantage at all. On the other hand, it is self-evident that if you're trying to show some sort of dashboard and spacing it out like that means you can only get 75% of your data onto a single screen instead of 100%, then your design is less practical. There is also ample evidence that mystery meat navigation impairs usability, which is particularly relevant to the discussion of button styles here.
  - Benjammer 9y ago
    >But there is a difference between merely moving something further down in your information hierarchy and making it hard to read. If you change "hard" to "harder", would you agree that there is no longer a difference? It seems you are just placing your bar for "too hard to read at all, in any context" somewhere different than the author of the article. The author is definitely making things lower in hierarchy harder to read on purpose, that's the whole point. >There is precious little evidence that the trendy, overly spaced-out look of flat design and its derivatives has any usability advantage at all. Honest question, is there any evidence that shows the usability is _worse_? How about evidence that reducing spacing or adding more options/data to a page _increases_ usability? >if you're trying to show some sort of dashboard and spacing it out like that means you can only get 75% of your data onto a single screen instead of 100%, then your design is less practical. A dashboard is a very specific design case. Most pages in general are more geared towards specific actions or specific "detail views" of data, where you have clear hierarchy of both data and actions. Aggregate data pages like dashboards are a whole different beast, and it seems weird to bring them up in a general UI design discussion. I would think dashboards are also more often internal than even a feature shown to real users. The days of dashboard-style pages like "web portals" are long gone.
dorkwood 9y ago
I think white space is often misunderstood. People tend to see it as a void that could be put to better use. We shouldn’t think of it as a void, though. We should think of it as a separator. It’s gestalt theory: objects that are close to each other appear connected. When you remove too much white space, groups of elements become less distinct, and cognitive load increases.

JoshMnem 9y ago

I like borders too. They often help make it easier to understand the layout from a quick glance.

wlesieutre 9y ago
Especially in contexts where there’s more then one hierarchy along more than one axis. UIs where you have content in the middle with multiple columns and sidebars and toolbars turns into a mess with the no borders flat design approach.

sameji 9y ago

I have to disagree. In an absolute sense you are correct, however you're missing the relative benefit of each point. #2.1: Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. #4: Why are you worried about white-space? If you have space, you can use it. If you run out, then you have to start rationing and using other visual tools. Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. #4.3: So create a responsive layout for mobile that uses more borders where necessary. #7: This is a major (and valid) criticism of flat UX, but slightly adjacent to the point in the article. The article says you don't need a background colour for every button, which is good advice.

cpburns2009 9y ago
> Yes, this would be an issue if overused, especially in paragraph lengths of text. However, inconsistent font sizes are worse. I should have clarified this better. I dislike low contrast text because it makes it hard to read which is popular with the flat UI trends. Opacity isn't used so much from my experience, but light grey text on white is which has the same effect. I agree that inconsistent font sizes are bad too. > Borders have their place, but white-space should be preferred as the most neutral and inobtrusive strategy. In the example from the article I think the bordered version is much more concise and clearly delimits the search box and list. White-space seems to be used too carelessly in an attempt to avoid any clearly defined borders. > The article says you don't need a background colour for every button, which is good advice. You don't need to give every button a colorful background. But each button should have at least a border or background to distinguish it from standard text. The background can be just a boring grey like the classic Windows dialog buttons.
Nadya 9y ago
I actually just got done running an A/B analytics test on a large website (>100k viewers/day). Statistics say you're right, least about the buttons. ;) The client wanted a "button" without a background color because it looked bad to have two buttons side by side. My company told them that was a bad idea based on data, so we added tracking to their site and A/B tested their home page. Button with a background color had 40% more conversions than the "button" they wanted without the background color. Several pieces of the advice given on that article are proven to be bad ideas for most websites if you track your users. What "feels" right and what is right are often two different things. If you're ever making a change because you think it will perform better you better be tracking the statistics. Often times you'll find out you were wrong. Another, similar, example is that a client had a button they wanted to "draw attention to" so wanted to inverse the :hover background color with the normal background color so that it would stand out from other buttons. It looked different - but hurt engagement because it no longer looked like every other button on the site. E: This was meant to be a response to cpburns2009, the parent of the comment I responded to. Thanks to metalliqaz for pointing that out.
- 9y ago

marcosdumay 9y ago

About #7, the article is not advocating making things not look like a button¹, it's advocating making secondary buttons lighter. 1 - In fact, the buttons there don't look like buttons. But that's because it uses a normal design, and nobody creates buttons that look like buttons anymore. Could we please standardize the "button look" with a small, fuzzy outset?

Silhouette 9y ago
Well, the examples of tertiary buttons under #7 are plain text or plain text with an underline, and the article text specifically mentions styling tertiary actions like links as being "usually the best approach". It pretty much does exactly advocate making things not look like a button.

hammock 9y ago

>#2.1: Reducing the opacity of your text makes it harder to read. That's the point, to take away focus from something lower in the hierarchy. >#4: Borders help logically separate areas of an interface. Throwing in more white-space is wasteful. You're defining waste from a screen-space point of view, not a usability point of view. Who cares if the screen's pixels are at maximum utility, I want my user at maximum utility! >#4.3: Gratuitous white-space is wasteful, especially if you have limited screen real-estate (i.e., mobile). See above >#7 is a major pet-peeve of mine which I cannot agree with. If it's a button, make it look like a button. Nothing is more confusing than a button that just looks like some text label. Again, hierarchy.

Silhouette 9y ago
That's the point, to take away focus from something lower in the hierarchy. But there is a difference between merely moving something further down in your information hierarchy and making it hard to read. Low contrast text, like very small text, is hard to read for a large part of many markets. If it doesn't need to be read, why not go to the next stage and remove it entirely? You're defining waste from a screen-space point of view, not a usability point of view. There is precious little evidence that the trendy, overly spaced-out look of flat design and its derivatives has any usability advantage at all. On the other hand, it is self-evident that if you're trying to show some sort of dashboard and spacing it out like that means you can only get 75% of your data onto a single screen instead of 100%, then your design is less practical. There is also ample evidence that mystery meat navigation impairs usability, which is particularly relevant to the discussion of button styles here.
- Benjammer 9y ago
  >But there is a difference between merely moving something further down in your information hierarchy and making it hard to read. If you change "hard" to "harder", would you agree that there is no longer a difference? It seems you are just placing your bar for "too hard to read at all, in any context" somewhere different than the author of the article. The author is definitely making things lower in hierarchy harder to read on purpose, that's the whole point. >There is precious little evidence that the trendy, overly spaced-out look of flat design and its derivatives has any usability advantage at all. Honest question, is there any evidence that shows the usability is _worse_? How about evidence that reducing spacing or adding more options/data to a page _increases_ usability? >if you're trying to show some sort of dashboard and spacing it out like that means you can only get 75% of your data onto a single screen instead of 100%, then your design is less practical. A dashboard is a very specific design case. Most pages in general are more geared towards specific actions or specific "detail views" of data, where you have clear hierarchy of both data and actions. Aggregate data pages like dashboards are a whole different beast, and it seems weird to bring them up in a general UI design discussion. I would think dashboards are also more often internal than even a feature shown to real users. The days of dashboard-style pages like "web portals" are long gone.

dorkwood 9y ago

I think white space is often misunderstood. People tend to see it as a void that could be put to better use. We shouldn’t think of it as a void, though. We should think of it as a separator. It’s gestalt theory: objects that are close to each other appear connected. When you remove too much white space, groups of elements become less distinct, and cognitive load increases.