Hacker News Reader

Comment by kmarc | Hacker News Reader

Although I ~never used Apple products, a good ten-fifteen years ago I ran through a quite expensive "Apple Human Interface Design"[1] book. After that, whenever another "book" / blog series / etc came out about "UI", I was discarding them saying "and now what, that's just common sense".

It. Is. Not.

The more companies and people I had been working with, the more I started to see that most of the UI design (or for that matter, displaying information on a UI / document / advertisement) what I thought had become "common sense", hadn't. Most of my colleagues cannot properly position / color a button. Cannot structure a document (headers, tables, bulletpoints) to be easily comprehensible, consumable. Struggle to summarize information in an email.

This 50 UI tips is great! Thanks for this. I will share as a baseline with my team.

[1]: I can't find which one. Maybe its title was something different.

View on HN

One thing that I hardly see implemented is grouping of numbers and strings in 4s or 3s. Like the credit card companies do on their credit cards.

For example, if you need to show me on a website my CBU, international account number which is 24 numbers long, please, don't show them like this:

345234234665232423247322

Show it instead like this:

3452 3423 4665 2324 2324 7322

It is much much easier to read.

90~95% of the time were numbers (or even characters!) are listed, nobody splits them.

This I learned in Isaac Asimov's book "Asimov on Numbers" IIRC. Great book by the way.

Is it possible to split with CSS so that when copied it won't have spaces?

Yep, you can use separate HTML elements, the key bit is to keep the closing and opening tags directly adjacent with no whitespace or newlines, example https://jsfiddle.net/z65qwuvp/1/

see your comment siblings, there are some clever font tricks to achieve that too

There's a clever font that uses ligatures to achieve what you're suggesting.

~I'll edit (or reply) if I can dig up the link.~

Aha. Numderline. h/t @bla3

Maybe https://blog.janestreet.com/commas-in-big-numbers-everywhere... ?

That is awesome. Thanks for sharing.

It's sad to say, but there's a strong correlation between "good programmer" and "formats things in fixed width using ``` in slack".

[1] my favorite is the Macintosh Interface Guidelines from 1992: http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

I love reading older material like this for two reasons:

(1) Since people were less familiar with computers back then, the way that things (like the cursor and drag-and-drop) are explained in this guides tends to be more explicit. Being re-introduced to concepts we take for granted is refreshing and helps with coming up with new concepts rather than just being confined to what we already see around us.

(2) Seeing what advice still applies decades later is a great way to figure out which pieces of advice are timeless and universal.

I agree that a lot of sites don't use the common sense.

The most (!) common thing that I notice is wrong grouping/spacing.

Literally, I went to another site about covid, and they had a chart. And 2 checkboxes that enables 3 or 7 days moving average.

But you'll never guess which checkbox enables which MA, they are too close to each other.

Same happens with forms. I'm like "is it too hard to add margin-bottom: 10px" :)

Was it "The humane interface"? by Jef Raskin? He was heavily involved in the creation of Macintosh and the book is a great read.

Apple has an old in-house document for UI designs, he might be referring to that one. I shall have a copy somewhere.

Microsoft used to have one as well (600-odd pages or so). The current one is more like $randomFrameworkDocs where they have a short page with a screenshot for a few UWP components / patterns. Before that one they had something similar for Aero, but neither is a real HIG, they're just describing components. I can't find the old one, maybe they removed it because it shames their newer products.

Documentation used to explain the philosophy and system behind the thinking.

My old HP Deskjet 500C came with a thin book(let) titled "How to Use Color". It tells all the basics and then some for effective color documents and presentations. I hold on to it like it's gonna save my life. It's that good.

Hmm, Maybe I should scan it...

Found this: Apple human interface guidelines: the Apple desktop interface, 1987 https://archives.design/post/645150403066003456/apple-human-... https://archive.org/details/applehumaninterf00appl/mode/2up

The UI standards mess goes all go back to when Microsoft needed Windows to look more like Mac OS. They didn't want to "copy" Apple, so they reversed the order of UI elements like dialog and window buttons.

This was fine when the platforms were separate, but it made it impossible for websites to have a uniform standard. At best, consumer websites follow Apple guidelines while enterprise, government, and SAAS sites follow Microsoft.

This is a great list of current, and archival, interface guidelines: http://www.geofcrowl.com/blog/articles/2020/2/17/collection-...

I bet you can find it, or something similar, there.

Reply on news.ycombinator.com