3 ms·
I find myself confused about what this is actually about. User interfaces, or general web content? It seems to skip blithely from one to the other, when they of
by chrismorgan 3y ago
I find myself confused about what this is actually about. User interfaces, or general web content? It seems to skip blithely from one to the other, when they often have quite different requirements.
I’ve glanced at a few sections of it too, and although there’s definitely some solid stuff in this, there’s also some straw-manning, implausible assignation of virtue, and unwise recommendation.
Some examples from a handful of pages I went through.
• Grouping: under the Rectangle heading, the problem is not at all that there are two rectangles, it’s just a severely unbalanced second paragraph.
• Anchor points: ugh, mostly nasty examples that show why this is something easy to do that produces tolerable results, but it’s normally a long way off the best that you could produce if you just ignored the “rule”. But instead of trying to teach to produce excellent results, you can legitimately try to teach not to produce bad results. Maybe that’s the goal instead? Anchoring is perhaps a little more dependable than freeforming it if you don’t know what you’re doing. But it’s no panacea or even always usable.
• Lines of force: look, most of those examples only need them to claw back some semblance of reason since they made a chaotic layout. And as for that numbered thing… I don’t find it “compelling” and would like it to remain “unusual”.
• Rhythm and variety: what’s suggested at the start is very risky. Monotonous is reliable. Monotonous works. Users understand monotonous. I also want to draw attention to some broken rhythm and painful variety on the page itself: from the paragraph beginning “Generally” to the paragraph beginning “Just” is a mess, with inconsistent spacing and unclear grouping. It’s bad on small and large viewports, in two different ways. Some background shading on the figures would help a lot (one of many possible solutions).
• Modular scales (sizing text based on geometric sequences): oh no. This is just plain bunk, genuinely having no redeeming features and just being arbitrary mediocrity at best. I expanded on this at length six months ago in https://news.ycombinator.com/item?id=36000879 https://news.ycombinator.com/item?id=36000879 and the following comments. I will also rail against this page’s suggested applications of sizes: do not go below 16px as much as it suggests doing, and never go below 12px. Buttons? 16px. Form labels? 16px. Small text? Avoid it, but I will begrudgingly allow 14px in very specific, very restricted situations. Tags, labels, badges, statuses? C’mon, 14px is probably just fine for you.
• Vertical rhythm: I was going to say “oh no” again, because for general web content rhythm is not only roughly impossible to get strictly correct and has no demonstrated value, but even though that’s what the term means, that’s not what the article is about. It shows a dodgy example of an overcomplicated baseline grid, then goes to talking about sizing gaps as multiples of some scale, and thinking a little about hierarchy in the values you choose. So instead I’ll say “oh no” about misuse of a well-known term.
I’ve spent long enough on it for now. I really should get round to finishing off a new section for my website where I go through these sorts of reviews in more detail, rather than tending to publish them just on HN.
—⁂—
Let me add one useful user interface design guideline: the document title should have the most specific piece at the start, not the end. This site currently has its endianness the wrong way round.
BAD: UI Typography | Principles | Responsive typography
GOOD: Responsive typography | Principles | UI Typography
(You could also drop the middle hunk likely with no ill effects, and I’d suggest -, – or — instead of | as a divider these days. | fell out of fashion over a decade ago.)
- imiric 3y agoYou make some good points, but most of your objections are based on strong personal preferences, just as the author's recommendations were. This is fine, but it goes to show that visual design can't be boiled down to a set of strict rules that must never be broken. Instead, all recommendations should serve as guidelines, which can be ignored if needed. I appreciate your judgment as much as the author's, yet you make the mistake in thinking that yours is objectively better. I'll just address your strongest point about modular scales. Its redeeming quality is that it provides a predictable scale and aligns everyone on the team about text sizes. There is some dubious benefit about "harmony", and in the final paragraph the author acknowledges that this system can be ignored. There's no need to be so adamantly opposed to it, though.
- chrismorgan 3y agoI don’t object to using a defined scales. Please have one; please. But I object to modular scales for the reasons I mentioned in the linked thread: they’re presented as virtuous, but they actually produce arbitrary, bland, inferior results, mediocre at best. It’s like some of the “golden ratio” guff people go explaining things with: it sounds nice, but it’s just plain nonsense. Therefore I will viciously attack modular scales as a concept every time I come across them (unless otherwise occupied). Someone’s wrong on the internet, and they’re misleading others.