184
votes
Accepted
Why do dialogs have grey backgrounds?
There is not really a "UX" reason for this—or if there is, it is a very limited one. The actual reason why dialog backgrounds are (by default) some shade of grey is because some designers thought that ...
126
votes
Is OK/NOK better than "fail/success"
If the output is binary (success/fail, OK/NOK, whatever), why not only show a status on the failure state?
timestamp | action name | description
timestamp | action name | ...
106
votes
Best user friendly phone number format
Libraries exist to do this. For spacing, I feel very strongly that the spacing expected by the user is the spacing you should use.
Most people remember phone numbers (especially their own) with a ...
51
votes
Accepted
Color choice for maximum legibility of text on glass
There is a better solution, at least in terms of legibility, perhaps not so much aesthetically. And I'm 99% sure you've already seen it.
Black border, white letters.
White letters are almost always ...
49
votes
Does the Oxford Comma increase readability?
Yes. The Oxford Comma increases readability.
When items are logically separate, putting a delimiter between them makes their separation visually obvious. Without the delimiter, the separation can ...
49
votes
Accepted
Why are messages on the road printed in reverse?
You read as you approach.
Theoretically. In reality, levels of visual acuity mean that some people (like you and I) can read the whole block at once. Another reason that painting information on the ...
42
votes
Ways to improve readability of recipe ingredients?
First of all, if you are just looking at a text list of ingredients then I would say that it probably isn't going to matter too much which option you go for.
Out of the 3 options I would personally ...
41
votes
"Realistic" Thermostat Interface vs Minimalist
For the first skeuomorphic example, until I read your description, I had no idea how I was supposed to change the set point. I happened to notice the little edit icon and was worried that was the only ...
36
votes
Is OK/NOK better than "fail/success"
What you need to examine is the use-case for these terms within the context of the project logbook. I have to guess here but I'd say the logbook is a project management tool - an aid to charting ...
35
votes
Why do dialogs have grey backgrounds?
Too much white can cause eye strain, so tints of grey reduce this.
There is another ux.se topic which discusses white vs grey backgrounds:
Grey versus white background for ease of use and ...
31
votes
Best user friendly phone number format
Use non-breaking spaces
Other answers have talked about the pros and cons of spacing and where to place the spacing. I would like to mention one more issue. If your interface is ever going to be ...
31
votes
Accepted
What is the best number of paragraph width for readability?
According to studies, the line length should not exceed 70 characters. So keep your paragraph width between 50 and 70 characters.
So actually you should not care about the width in pixels, but rather ...
27
votes
Accepted
Does the Oxford Comma increase readability?
I think the top-voted answer is only partially correct... The Oxford comma can resolve ambiguity OR create ambiguity, depending on context. This is the reason that grammar experts and style guides ...
25
votes
How long should a temporary notification (toast) appear?
It varies, but for English language...
Generally the time taken to read a flash notice will vary according to the complexity of the information, length of notice, and focus/distraction level of the ...
24
votes
How easy to read are small caps vs lower case?
Based on UX.Movement: Why Text in All Caps is Hard for Users to Read
The reason of the worse readability of uppercase vs lowercase is the lower contrast of shape.
Small caps still has worse ...
24
votes
Readability of overlaid text on images
Readability is hard to get right
Great question. It's always good to question the point at which style destroys function.
Example scrim formats
I've done quite a lot of user testing on scrim-based ...
24
votes
Accepted
Is OK/NOK better than "fail/success"
It appears that the biggest problem is being able to find the status indicators within a large group of text.
Barring some significant technical limitation, I would say your solution should be to ...
24
votes
Accepted
When to use white text on top of a color for readability?
This is standardised by W3C's Web Content Accessibility Guidelines (WCAG) and decided based on the contrast ratio between colors, which you can calculate programmatically.
In your case, you would want ...
23
votes
Why are messages on the road printed in reverse?
In complete agreement with the other answers, but to provide an alternate viewpoint: If you were driving at night, your headlights will reveal the beginning of the sentence before the end.
21
votes
Should UTC timestamps, such as those in Stack Exchange hover-texts, include day of the week?
Timestamps aren't meant for most users
Showing friendly names such as 2 hours ago or yesterday can quickly provide context to the user as opposed to showing them 2015-01-27 18:54:03.259 Mixing both ...
18
votes
Is OK/NOK better than "fail/success"
Two things to think about:
In computing, it's common to use failure instead of just fail, because it happens to be the same number of characters as 'success', so in mono-spaced fonts they end up ...
17
votes
Can text shadow enhance readability?
Apart from the answer given, I would like to mention one very important Use Case where the solution is nothing BUT shadows.
Text on an image
When you don't have control over the image on top of which ...
17
votes
Accepted
How do cards improve readability?
Some of the benefits of Cards based UI include:
Improved Scannability - Cards are neat little containers for information. They divide content into meaningful sections and thus the information is ...
16
votes
Why do dialogs have grey backgrounds?
Because the difference between the font-color and the background-color can cause eye strain and is not optimal.
Having black or dark-grey text on a lighter grey background is the easiest for the ...
15
votes
Does the Oxford Comma increase readability?
I think the key is in how it sounds when read aloud.
When people read a sentence they normally "hear" it as speech with their internal voice (theories on this originally based on Lev Vygotsky's work, ...
15
votes
How to style table headers?
Headers are essentially metadata and you need some way to indicate that they are separate from your content, but related to it.
I would recommend against lowercase and normal weight text as it will ...
15
votes
Accepted
How to style table headers?
1. Headers serve a different purpose from content
This seems like an obvious statement, but it animates the reason why table headers are emphasized (title case, bold, colored, underlined, etc).
While ...
15
votes
How to display a large quantity of (read-only) fields?
Show all items on a single page in a vertical list
This obviously has limits as it is almost never a good idea to display thousands of items at a time. Though putting a list of a hundred items on a ...
14
votes
Accepted
Can text shadow enhance readability?
In some situations a drop shadow or stroke can be used to maximise accessibility and maintain the contrast ratio between text and the background. I have used this method once or twice when dealing ...
13
votes
Hyphens or en dashes—which are more readable when used in number ranges (for North American web users)?
More readable in what context?. There lot's of evidence that readability depends on multiple variables.
Keeping in mind this impact of external factors, then one hyphen may be more readable if the UI ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
readability × 225text × 32
usability × 30
website-design × 21
typography × 17
color × 15
legibility × 15
tables × 14
accessibility × 14
font × 14
color-scheme × 9
formatting × 9
forms × 8
lists × 8
contrast × 7
gui-design × 6
user-behavior × 6
layout × 6
design × 6
icons × 6
physical × 6
dates × 6
navigation × 5
buttons × 5
information-architecture × 5