Collection of Human Interface and Software Design Guides | Hacker News Reader

Collection of Human Interface and Software Design Guides

geofcrowl.com

177 pointsingve18 comments

When someone comes to me and asks how to improve their knowledge of front-end or interaction design, I always recommend reading through these guides.

Why? Companies like Apple, Google, and Microsoft have put a ton of work into identifying usable patterns which have become convention across platforms.

If you want to be a better designer or front-end engineer, take advantage of the work these companies and organizations have done by identifying and sharing these guidelines!

I certainly appreciate learning from history rather than repeating mistakes --- Understanding the change over time lets you at least identify why some things worked and some things didn't. This allows you to make new work more easily and more completely.

The Win32 counterpart to the UWP-centric design guidelines are here[1], titled "The Windows Interface Guidelines — A Guide for Designing Software".

Much more practical to designing native desktop software, whether you are using Win32/WinForms/QT or otherwise for your rendering engine. IMHO this is what makes a program 'intuitive' and 'natural' to many working adults ages 25+, which is often the target demographic, even if the program will not look 'modern' or have high "design award" value.

EDIT: and is even available in dead tree form: [2]

[1] https://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/M...

[2] https://www.amazon.com/Microsoft-Windows-Experience-Professi...

The reason, in my opinion, that the patterns outlined here for Win95 are really nice is that they assume the user knows how to do very little.

Here's some ancient tome of software design as it applies to user interfaces circa 1986 for the Macintosh:

https://vintageapple.org/macprogramming/pdf/Programming_The_...

Also, there's a ton of programming manuals here (https://vintageapple.org/macprogramming/), I originally was searching for a dirty rectangles algorithm in a mac graphics programming manual.

Two examples worth mentioning...

Inductive User Interface

Long before Electron became popular, Microsoft explored the idea of creating desktop apps with screens that mimicked the look-and-feel of web pages. An example of this was Microsoft Money 2000 (yes, that's how old is the idea of creating apps with a web-like interface).

Microsoft called it 'Inductive User Interface', and you can still find the documentation for this type of desktop app design on their website:

https://docs.microsoft.com/en-us/windows/win32/appuistart/in...

Windows Phone design language: Metro

This video presentation (from 2010) explains the design principles behind Windows Phone 7.

I've long felt that Windows Phone was the best thing that Microsoft ever designed (heavily influenced by Zune). The visual design and interaction design made for a refreshing change from Android and iOS:

https://channel9.msdn.com/Blogs/Jaime+Rodriguez/Windows-Phon...

So much focus on apps and (web) SaaS products these days, that even Microsoft has recent guidelines only for (simpler) Windows apps it seems. For more complex (Windows desktop) applications I prefer the older guidelines, as https://docs.microsoft.com/en-us/windows/win32/uxguide/how-t...

This one is even older (and outdated), but good to add to the archive: https://docs.microsoft.com/en-us/previous-versions/ms997506(...

Looks like sibling post (https://news.ycombinator.com/item?id=26030070) has an older guide as well. Have you used that one / could you comment on which one of these older guides has the biggest ROI?

Actually haven't used that one, it's even older it seems. Just got it to compare, so can't tell you yet which one to recommend.

Not sure how he overlooked: https://material.io/

He said he had trouble finding these online but there's a huge list right here:

https://adele.uxpin.com/

And here

https://designsystemsrepo.com/design-systems/

It's more visual design focused, but if you're looking for something more detailed, I highly recommend: https://refactoringui.com/

This is what I do for a living so if you'd like some more specific info, I'm happy to point you in the right direction.

I remember we were like 70% of the way done with a big product (already in use/sold) following Material Design patterns.

A new designer joined the team and was very upset because "Google is not known for good design. Apple is."

For something about HCI why is the font so ridiculously oversized? Very hard to read.

I don't get this either. It's a weird trend and goes against some fundamental rules. There is a text width and font size that is comfortably readable. It's essentially a bug!

Missing Google's entirely? https://material.io/design

Not sure how comprehensive is this collection.

Missed on mentioning Microsoft's fluent design guidelines https://www.microsoft.com/design/fluent/#/

Then there are 100s of design systems.. https://www.carbondesignsystem.com/

I love the fact the ElementaryOS is so high on the list. I am a happy user

Well... the list is alphabetical.

Reply on news.ycombinator.com