Little UI Details

Great list, but Twitter is really not the best platform for this kind of content. Some of the screenshots have such bad compression artifacts that it&#x27;s difficult to make out the before&#x2F;after changes. For example: <a href="https:&#x2F;&#x2F;pbs.twimg.com&#x2F;media&#x2F;DDf7ef1XkAMh3Gp.jpg:large" rel="nofollow">https:&#x2F;&#x2F;pbs.twimg.com&#x2F;media&#x2F;DDf7ef1XkAMh3Gp.jpg:large</a><p>This is a much more readable version (though doesn&#x27;t include the handy CSS annotations):<p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;tyrellrummage&#x2F;full&#x2F;ZJPXgy&#x2F;" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;tyrellrummage&#x2F;full&#x2F;ZJPXgy&#x2F;</a>

This is a great guide&#x2F;collection! It does a great job for those who know the basics to step up the game, thank you so much.<p>However, something notable that IMHO is missing is accessibility. This is clearly a DESIGN guide and should NOT be treated as a UI&#x2F;UX guide. Some of the color in the page for instance don&#x27;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&#x27;s quite bad for reading.

There&#x27;s also Little Big Details (<a href="http:&#x2F;&#x2F;littlebigdetails.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;littlebigdetails.com&#x2F;</a>) which does something similar.

Some of these seem a bit arbitrary. I wish the author included more info explaining their reasoning.<p>I&#x27;d be amazed in all these examples pass a basic accessibility checklist. It&#x27;s fine to want to add in small design details here and there, but don&#x27;t sacrifice accessibility to achieve that goal. Personally, I found a lot of the examples a bit difficult to read.

I love that these facts by Steve Schoger were collected and shared by ... Senior Designer at booking.com<p>Has senior designer at booking.com seen booking.com?

Tips mosyly priviledge prettiness over usability. E.g. advice like &quot;mix background hue into grey text&quot; is why we have so much unreadable, non-contrasting text.

Lot of gems there, however:<p><i>&quot; A subtle link for negative secondary actions often works better than a big bold button&quot;</i><p>Careful with that one. &quot;Better&quot; and &quot;negative&quot; are in the eye of the beholder. Take it too far and you&#x27;re into dark patterns or at least a confusing UI.

Mostly good, except the button examples at the end. It is completely backwards to recommend buttons that don’t even look like buttons <i>and then</i> add gray text to make them look even less available!! A list of buttons is just fine.

Nice. But of course, next year the rules will be completely different.

I love these bite-sized tips! Are there more of these somewhere?

A lot of great little tricks are included here, many that I never noticed until this pointed them out and now I can think of multiple places where specific things are in use. Bookmarking this for future design work.

This was really awesome. The design improvements are so clear, but I would&#x27;ve <i>never</i> come up with them myself.

At our firm we had used a few of the examples set out in this article. We stumbled upon them by trial and error. It is good to see them formalised here.

Is there something like this for the physical world?

<i>Proceeds to copy all of these into sideprojects</i>

Very nice, thanks Steve!

Is to note with some of this is required for the &quot;flat&quot; design. Even DOS&#x2F;Windows 3.0+ haver better usability than today flat screens.