Little UI Details
twitter.com
twitter.com
This is a much more readable version (though doesn't include the handy CSS annotations):
My personal opinion is that for-twitter content has always been sub-par compared to for-blog content, at least in my experience, and Twitter is really just useful for sharing links to other content. But that's just my opinion based on my experience. Obviously your experience is very different from mine! Luckily we have a good mix of content, so we can both be happy.
I also find Twitter incredibly difficult to find things on, so unless I happen to check it at exactly the right time (when you post it but before other people I follow post too much), there's a big chance I'll never see it[1]. I also find the way the replies are threaded difficult to navigate.
[1] On HN, popular things stay at the top of the list for a few hours, so the chances of me seeing things here are much higher and obviously submissions like this one mean that I do see the twitter content.
You're replying to the "he" who wrote the tips :)
However, something notable that IMHO is missing is accessibility. This is clearly a DESIGN guide and should NOT be treated as a UI/UX guide. Some of the color in the page for instance don't pass the WCAG 2 AA guidelines, which is a really flexible one, let alone the WCAG 2 AAA (a more strict one). The mid-gray text over white background looks great; but it's quite bad for reading.
I personally use a base font size in pixels and use em units to increase or decrease relatively.
For fonts and text; the Google guidelines aren't awful, assuming you're not hand calculating your px and use em (they talk about it, but it's extremely brief).
Or were you asking about something completely different?
Do you mean like using px values instead of ems? If so, don't most rendering engines convert internally to px anyway, rendering ems irrelevant for zooming these days? That was my understanding at least.
I want the title to tell me which article I might want to return to, not that I should.
That's why I like UI changes that come with a/b test results. Although sometimes it's hard to measure the right metrics with this stuff, especially when it's entirely qualitative or highly abstract like emotional gratification.
I'd be amazed in all these examples pass a basic accessibility checklist. It's fine to want to add in small design details here and there, but don't sacrifice accessibility to achieve that goal. Personally, I found a lot of the examples a bit difficult to read.
Has senior designer at booking.com seen booking.com?
" A subtle link for negative secondary actions often works better than a big bold button"
Careful with that one. "Better" and "negative" are in the eye of the beholder. Take it too far and you're into dark patterns or at least a confusing UI.
If a button is "dangerous", it can be dealt with in other ways, such as:
- More space from other buttons
- An ellipsis "..." to indicate to the user that a confirmation will appear (making it more "safe" to experiment with the button)
- Adding an icon and/or color
That is also bad. It's not a choice between two bad things.
> I can't even find an option because it is being presented in a way that doesn't remotely resemble something that should trigger an action.
Then we should not do that either! One solution is obvious links, which are known to trigger events, for secondary and/or tertiary actions.
The list of buttons in the examples is not good.
- More space doesn't address the problem (and after some amount of space it stops being a single "list of buttons" as opposed to multiple buttons strewn across the interface).
- An ellipsis does signal a confirmation, but that is not the problem being addressed.
- The buttons already have different colors in the "before" images. That is how the problem is presented.
There's only maybe one or two examples that wouldn't be applicable 10 years ago because we didn't use those stylistic elements. Like putting a coloured line at the top of your page for a splash of colour. That wasn't part of the shiny-button web2.0 style back then :) However, I remember reading design-tips back then and "add a splash of colour" was definitely part of the tips, just used a different trick to implement it that fit the design of the era better (use coloured headings, for instance).