Is to note with some of this is required for the "flat" design. Even DOS/Windows 3.0+ haver better usability than today flat screens.
Little UI Details
21–30 of 50 posts
Re: Little UI Details
#22Mostly good, except the button examples at the end. It is completely backwards to recommend buttons that don’t even look like buttons and then add gray text to make them look even less available!! A list of buttons is just fine.
Re: Little UI Details
#23Proceeds to copy all of these into sideprojects
Re: Little UI Details
#24There's also Little Big Details ( http://littlebigdetails.com/ ) which does something similar.
Wow, this is a total antipattern: http://littlebigdetails.com/post/164521719457/invision-blog-... I want the title to tell me which article I might want to return to, not that I should.
Clever or novel often gets precedence in many of these UI collection blogs. It's easy to get caught up in busy-work with design, possibly more so than with programming.
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.
Re: Little UI Details
#25Very nice, thanks Steve!
Re: Little UI Details
#26Great 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's difficult to make out the before/after changes. For example: https://pbs.twimg.com/media/DDf7ef1XkAMh3Gp.jpg:large This is a much more readable version (though doesn't include the handy CSS annotations): https://codepen.io/tyrellrummage/full/ZJPXgy/
One of the benefits of using Twitter to publish these tips is having the constraint of 140 characters. This forces me to be creative and simplify the tips down to something that is super digestible. I publish tips regularly and Twitter makes it really easy to share them.
Add a pixel with a slight transparency anywhere on the image to prevent twitter from compressing the images
Re: Little UI Details
#27This is a great guide/collection! It does a great job for those who know the basics to step up the game, thank you so much. 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…
I was going to comment on much the same thing; I had to adjust my monitor angle a few times to find a sweet spot where I could actually see what the guy was talking about. Also, a fixed font size in the age of responsive design is a huge no-no in accessibility; as well as, general UI/UX.
So then what is a better "when in doubt" guideline?
Re: Little UI Details
#28This is a great guide/collection! It does a great job for those who know the basics to step up the game, thank you so much. 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…
I was going to comment on much the same thing; I had to adjust my monitor angle a few times to find a sweet spot where I could actually see what the guy was talking about. Also, a fixed font size in the age of responsive design is a huge no-no in accessibility; as well as, general UI/UX.
> a fixed font size
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.
Re: Little UI Details
#29Earlier quoted context omitted.
I was going to comment on much the same thing; I had to adjust my monitor angle a few times to find a sweet spot where I could actually see what the guy was talking about. Also, a fixed font size in the age of responsive design is a huge no-no in accessibility; as well as, general UI/UX.
So then what is a better "when in doubt" guideline?
For what it's worth, Google recommends using pixel units for font sizes: https://developers.google.com/speed/docs/insights/UseLegible...
I personally use a base font size in pixels and use em units to increase or decrease relatively.
Re: Little UI Details
#30Great 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's difficult to make out the before/after changes. For example: https://pbs.twimg.com/media/DDf7ef1XkAMh3Gp.jpg:large This is a much more readable version (though doesn't include the handy CSS annotations): https://codepen.io/tyrellrummage/full/ZJPXgy/
One of the benefits of using Twitter to publish these tips is having the constraint of 140 characters. This forces me to be creative and simplify the tips down to something that is super digestible. I publish tips regularly and Twitter makes it really easy to share them.
Whatever mechanism makes it likely you'll keep posting is the right one. Thanks a bunch for highlighting some thoughtful approaches to basic design decisions that often get overlooked. The effort is appreciated.