There's also Little Big Details ( http://littlebigdetails.com/ ) which does something similar.
Thank you for this link! Useful tips!
Little UI Details
41–50 of 50 posts
Re: Little UI Details
#42Earlier quoted context omitted.
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.
I don’t want to start a flame war of any kind here but I did want to state that I very much dislike googles designs, I find their UIs very hard to navigate and generally ‘displeasing’ to the eye.
Re: Little UI Details
#43Earlier quoted context omitted.
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.
So set yourself a 140 character limit when you write a list on your blog? In this case though, I really wish there was more substance to the list, because I'm finding it a little difficult to see what exactly he means. As another commenter here said: "I wish the author included more info explaining their reasoning." which, of course, doesn't work in a 140 character limit. My personal opinion is that for-twitter conte…
I'm finding it a little difficult to see what exactly he means.
You're replying to the "he" who wrote the tips :)
Re: Little UI Details
#44Mostly 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.
No, you want the primary action to look clearly like a button and the others to look like secondary links to minimize cognitive load. A list of button-like shapes that do wildly different things is not good UX.
Re: Little UI Details
#45Nice. But of course, next year the rules will be completely different.
I don't know. The specific examples are obviously adapted to current-day webdesign styles. But the general guidelines and direction to take on improving details on today's webdesign styles seem to me exactly the same as webdesign 10 years ago (weight, colour, shading, hierarchy, white/spacing, balance, affordance, it's all there).
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).
Re: Little UI Details
#46Mostly 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.
No, you want the primary action to look clearly like a button and the others to look like secondary links to minimize cognitive load. A list of button-like shapes that do wildly different things is not good UX.
There is a lot more "cognitive load" when I wonder why something that I need is apparently disabled, or when 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. Consistency counts too.
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
Re: Little UI Details
#47Earlier quoted context omitted.
No, you want the primary action to look clearly like a button and the others to look like secondary links to minimize cognitive load. A list of button-like shapes that do wildly different things is not good UX.
There is a lot more "cognitive load" when I wonder why something that I need is apparently disabled, or when 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. Consistency counts too. 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…
> I wonder why something that I need is apparently disabled
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.
Re: Little UI Details
#48Great 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.
I agree, and clearly we're all grateful that you took the time to write up the tips even if they are on Twitter. Perhaps it's best to treat Twitter as a place for drafts, then take the time to write up a more polished piece after?
Re: Little UI Details
#49Earlier 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.
> 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.
em is more important when dealing with allowing fonts to be able to handle going from phones to tablets to large screens; while rendering engines do convert to px on the fly; using em allows them to handle it for the machine it's rendering on. At least that's what I was fed as reasoning a few years back.
Re: Little UI Details
#50Earlier 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 colors and contrast, use something like http://paletton.com/ where they have it set up to show a color scheme for multiple types of sighted issues.
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?