108
votes
93
votes
Why don't <button> HTML elements have a CSS cursor pointer by default?
Here's why:
Microsoft’s design guides talk about weak affordance:
Text and graphics links use a hand […] pointer […] because of their
weak affordance. While links may have other visual ...
- 16.3k
43
votes
Accepted
Why don't <button> HTML elements have a CSS cursor pointer by default?
It's worth considering the historical order in which these things came into being.
Buttons existed from very early in the days of GUI computing. They had a shadowing effect to give a skeuomorphic ...
- 731
33
votes
Make Optional Buttons More Clickable
The design makes it look like a checklist and the buttons look like they are disabled. May I suggest something like this:
- 12.1k
31
votes
Why don't <button> HTML elements have a CSS cursor pointer by default?
According to W3C cursor:
pointer The cursor is a pointer that indicates a link.
The specification only indicates that links are meant to have the pointer cursor. Buttons are not meant to have the ...
- 16.9k
26
votes
Make Optional Buttons More Clickable
First of all, lowering the opacity makes them look disabled. So I would suggest you don't do that, as users might think that they can't complete those sections, even if they wanted to.
Using a tick/...
- 7,111
23
votes
Why rounding odd font sizes to even?
I think your fellow developer is somehow correct. To be honest, as far as I know there's no "set in stone" rule for this, so nobody is right or wrong as an absolute. However, depending on ...
- 38.3k
17
votes
Accepted
Marking box as expandable box intuitivly
There are different ways that you could design this.
1st option has a drawback: The user might think that they are directed to another page
2nd option more intuitive than the others. The icon could ...
- 3,759
16
votes
Why rounding odd font sizes to even?
Sans fonts, which are commonly used on screens, are mostly designed to have the same thickness of stems and bars.
When the font size is quite small and is odd, like 17px, the font renders in a way ...
- 688
14
votes
Tooltip CSS cursor
The cursor should change depending on the interaction the user can do with the element, not on the tooltip. A tooltip appears to explain what the element is or what it does.
For example when we hover ...
- 16.9k
14
votes
Accepted
Why is the Google Search Results page not responsive?
Responsive design is best practice, except for the most high-end websites
Responsive, mobile-first design gets you the most “bang for the buck” for most web sites or applications. Effectively you can ...
- 3,951
12
votes
How to enable users to insert an infinity number
This seems very close to a very common pattern for pagination by limiting searches per page, e.g. datatables:
In your case you only want to display the first page, but it's still pretty much the same ...
- 7,238
10
votes
Marking box as expandable box intuitivly
Consider displaying the first line of "content" text in the display, along with a link to read more.
This will give the user extra context to decide whether they actually want to read more, and ...
- 1,964
10
votes
How to enable users to insert an infinity number
In scenarios where a setting of zero does not make sense, zero is sometimes used for infinity. It does not really make sense but I think I've seen it in more than one application so as a user I'd see ...
- 217
10
votes
How to enable users to insert an infinity number
Given the OP's wording of his question, I would implement Joel Tebbett's first suggestion this way:
This would adhere to the perception of heirarchy as noted in his second option.
- 201
7
votes
Why rounding odd font sizes to even?
This is based more on a very psychological perspective (number psychology to be precise) than it has to do with designs or programming or any other thing.
Even numbers sort of has the calmness and ...
- 632
7
votes
Accepted
How do I design a mobile table with multiple headers?
I think the problem lies in the origin, not the destination.
The hierarchy ranks in the original table are given by position, typographic style and color, except in the second hierarchy, which ...
- 20.4k
6
votes
Marking box as expandable box intuitivly
Solution 1:
You can implement the + icon next to the expandable box.
http://fontawesome.io/icon/plus-square-o/
Image:
Advantages:
This will be useful illustration for the users as the + known as ...
- 321
5
votes
Accepted
Accessibility color difference best practices
The W3C Techniques For Accessibility Evaluation And Repair Tools says:
Two colors provide good color visibility if the brightness difference
and the color difference between the two colors are ...
- 71.3k
5
votes
Why don't <button> HTML elements have a CSS cursor pointer by default?
I would just like to point out that, contrary to their guidelines, the submit feedback buttons on Apple's and Microsoft's websites both have a pointer cursor on hover. Both are input[type=submit] ...
- 197
5
votes
Science behind spacing
“White space is to be regarded as an active element, not a passive
background.” — Jan Tschichold
Space As A Design Element
Think about music for a moment. If every note or chord were ...
- 16.3k
5
votes
Accepted
Should entire checklist row be clickable or only checkbox and label?
There are at least 2 ways to see this problem. On one side, these are called controls for a reason. Providing control behaviors to random (even worse, empty) space goes against the whole concept of ...
- 38.3k
5
votes
Why rounding odd font sizes to even?
There is utterly no (general) reason why even-number sizes will look "better" than odd-number sizes. How these numbers correspond to the degree to which stroke widths and positions line up naturally ...
5
votes
Accepted
Is it a good practice to mix filled and outline badges?
Should I mix these styles at the same page/theme, or should I use only one style for consistency to avoid mixing these styles?
I would suggest to use one styling in your theme or page unless you ask ...
- 1,543
4
votes
Marking box as expandable box intuitivly
My favorite approach to signaling this kind of affordance is a downward facing arrow.
borrowed from the web, ignore the red text XD
This is a good signifier that something will be shown below the ...
- 41
4
votes
Tips for "better" white space
You can reduce the display area and center. Header can remain full screen.
.
If you have many to display make rows of cells.
.
Or put your data for each item in a single row.
- 2,673
4
votes
Double Scroll Bar on Website
You're basically getting a double scrollbar because your giving the body min-height of 100vh AND setting an overflow. It appears this was done to keep the menu in the correct position on mobile ...
- 1,375
4
votes
Accepted
Why does Google use `user-select: none;` on the text in their google meets web app?
Being able to select arbitrary text is a feature pretty much exclusive to websites and website-derived apps (ie electron apps). "Normal" programs and "native" phone apps or games ...
- 2,598
4
votes
How do you display long file paths in a web app?
a/../d
may be a good option for this. When the user clicks on the breadcrumb, they will see the whole path (just like windows' finder.
- 51
Only top scored, non community-wiki answers of a minimum length are eligible