Timeline for What is a button supposed to look like?
Current License: CC BY-SA 4.0
13 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Mar 15, 2020 at 14:21 | comment | added | tgm1024--Monica was mistreated | The hover button example is confusing to people unfamiliar with how it works. Before you hover, they simply don't look like buttons, and require you to know to hover in the first place to discover them as such. And if you already know the hover concept, then you're not the noob you might need to understand the page. I think that UI designers often lack the ability to look at things from the perspective of a person that's never seen such things before. | |
| Mar 15, 2020 at 12:04 | vote | accept | ispiro | ||
| Mar 14, 2020 at 10:06 | comment | added | Daniel | Really nice answer, but you missed out on the opportunity of an awesome pun (the button line) | |
| Mar 14, 2020 at 2:23 | comment | added | Steve | Another observation: The text are verbs or very short statements (at least, in the hover animation in the answer, the top-left "Collapse" and top-right "Clear all notifications"). | |
| Mar 13, 2020 at 17:06 | comment | added | Bacon Bits | I would argue that your screenshot in Spacing is actually the fact that the icons are understood by familiarity with convention. A magnifying glass for search, three dots for options, and all being located on a classic toolbar is all convention knowledge. Further, the three icons of the line to minimize, square to maximize, and X to close being an arrangement that's over 25 years old at this point. I think this is better called "It looks like a toolbar." | |
| Mar 13, 2020 at 13:49 | comment | added | MechMK1 | @ispiro The edit button below questions at least reacts to hovering over it, but "help" to the right of the comment box when writing a comment does not. I just realized that the action link in my comment ever so slightly changes shade when hovering over it, though that is way to subtle to be conciously picked up. (Especially by users who are visually impaired, work on a bad monitor, etc.) | |
| Mar 13, 2020 at 12:53 | comment | added | ispiro |
What @MechMK1 referred to by edit is the edit button right below questions and answers here on StackOverflow. The light gray text "edit" to the right of the same colored "share" that are "action links".
|
|
| Mar 13, 2020 at 12:26 | comment | added | MechMK1 | I really prefer three-dimensional buttons, even with flat-design. It gives a clear visual indicator that something has "popped out" and wants to be pressed. "Action Links", especially if they don't react to hovering at all, are terrible UX in my opinion. They are borderline hostile to users, to whom navigating a computer interface is not intuitive. (E.g. I might know edit is a clickable button, but my grandma does not) | |
| Mar 13, 2020 at 8:43 | comment | added | Mast | @Davbog Feel free to turn that into an actual answer. | |
| Mar 12, 2020 at 20:34 | comment | added | Davbog | maxathousand has covered most of everything, so there's no point in adding another answer, but I'd like to add to this answer. The most important visual key to a button is contrast. This refers both to the button itself contrasting against the background behind it, but also to the text within the button contrasting against the button itself. | |
| Mar 12, 2020 at 19:07 | comment | added | ispiro | Thanks. Consistency is a nice point. | |
| Mar 12, 2020 at 16:02 | history | edited | maxathousand | CC BY-SA 4.0 |
Replaced "affordance" with "signifier", as clarified by Mike M.
|
| Mar 12, 2020 at 15:15 | history | answered | maxathousand | CC BY-SA 4.0 |