Golden Rules of Interface Design (2013)

The Golden Rules of obvious Utopia.

I think most of us won't disagree with these rules.

Yet also most devs will have worked on interfaces that break these rules often. Not because we didn't understand or didn't want, just that the cost was too high at that point.

For instance reversibility is very difficult and only possible if the datastructure under the application is build up with this in mind. Or take preventing errors, often it's very difficult and costly to know exactly what errors are, and ever more complicated to provide perfect feedback to a user in their own language.

> Sequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives users the satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions.

This is why we built our product around a workflow abstraction. Everything the user can do is some workflow implementation with a # of discrete steps. Our criteria for the scope of a step is guided by a dark and mystical process wherein we all argue about the business for a few hours and then sketch out some prototypes. One trick is to design these with lego-like reuse in mind. Oftentimes, the business will have the exact same view used across a wide range of activities.

Or every customer service phone line where the automated system asks for your info (account# or phone#) and then the customer service rep asks again >:(

I had an interesting discussion on Twitter with Michael Darius about this very topic recently. He is an "Apple pioneer, skeuomorph & protégé of Steve Jobs" who epitomizes the excesses of aesthetics and branding at the expense of everything else, so I had to call him on his brash claim and ask him some pointed questions, and brought up the User Interface Hall of Shame's review of the QuickTime 4.0 player, as an example of the excesses of skeuomorphism.

https://twitter.com/darius/status/1741188955985604867

Michael Darius @darius 9:06 PM · Dec 30, 2023 22.1K Views:

There is just no reason why an interface should be anything but beautiful.

Don Hopkins @xardox:

Tell that to an airplane pilot who takes the lives of their passengers in their hands every day. Are you really saying that airplane cockpits should be beautiful, at the expense of safe and usable and accessible?

Michael Darius:

Beauty for the sake of beauty is a mistake but beauty for the sake of user enjoyment reduces cognitive dissonance. Don't forget that pilots are people too with emotional needs.

Don Hopkins:

Beauty should take a back seat when it comes to safety, usability, and accessibility, not only in airline cockpits, but in most other interfaces, too. Your statement that "there is just no reason an interface should be anything but beautiful" is extreme and dangerous.

Michael Darius:

An interface is a habitat for a persons soul to dwell. Some habitats are better than others and there some awfully designed habitats out there.

Don Hopkins:

There are many reasons why, and many things more important than beauty. A spreadsheet is more beautiful if it hides the ugly truth about the formulas, relationships, numbers, dependencies, and complexities. Its purpose isn't to be easy on the eyes, it's to be correct.

Are your earpods supposed to be beautiful, at the expense of being comfortable and actually fitting in your ears and not itching and poking and flaking paint and decorations into the holes on your head? You don't need to see them, just hear them.

The shape of your ear canals isn't beautiful, but your earpods have to conform to it nonetheless.

Michael Darius:

I'd sooner fly a luxury airliner with dashboard complexity that has been thought through for me than assume that safety was the tradeoff for getting to fly with simpler controls.

[photos of extremely complex airliner cockpits -- not sure which he's claiming are beautiful or ugly though]

https://twitter.com/darius/status/1741193514032267758

Don Hopkins:

Beauty is in the eye of the beholder, but safety and usability and complexity is scientifically measurable, you can't claim that thinking through safety and usability and complexity always results in beauty. Most people would consider those examples cluttered, complex, and ugly.

ESPECIALLY anyone who subscribes to the school of minimalistic design like iPads exhibit, like hiding scrollbars because they are ugly, even though they tell you how much more there is to scroll, and what to do to scroll to it. Airplanes and spreadsheets need ugly affordances.

Michael Darius:

You can tell when something has been thought through on the inside, just as much as it has on the outside and most of the people who disagree with me in practice have simply never had the opportunity to work with engineers who care more about what is under the hood than what can be seen by the naked eye.

I see no difference between beauty and the reduction in the margin for human error.

[Photo of two children piloting an airplane.]

https://twitter.com/darius/status/1741195625767772529

Don Hopkins:

You just have an extreme personal opinion about beauty if you think removing scrollbars and buttons and even cluttered features from iPad interfaces, and making airplane cockpits look like playschool toys, always equals beauty. Your original statement is extreme therefore wrong.

It's wrong to assume that "There is just no reason why an interface should be anything but beautiful." I'd rather be lazy and safe than wrong and dead because some interface designer though he was smarter than the FAA.

And you're also wrong because you're presuming there is only one definition of beauty: yours. And that it can be measured. It can't. Address that, please.

Michael Darius:

When effort has been put into an interface to simplify a function, the function itself becomes more beautiful. We see this when writing code. If I can perform an operation by writing 3 lines of code instead of 10, the margin for error decreases.

[An image with an example of "Ugly vs Beautiful" code claiming that a one-liner is more beautiful than 6 lines of equivalent code.]

Don Hopkins:

Again, you're pretending that beauty is not subjective, and that you know the one universal definition of beauty, and I would have expected better from you, and even more from a first year art student. Would the Mona Lisa be more beautiful with less paint?

Would the Sistine Chapel be more beautiful with stick figures like an XKCD comic? Get off your high horse of thinking you can define beauty. Especially after championing the overly minimalistic iPad user interface bereft of scrollbars, buttons with text labels, and even features.

Michael Darius:

Here's a quote that sums up Shaker philosophy:

“Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.”

[A photo of a "beautiful" chair.]

Don Hopkins:

But for the n'th time, you've again ignored me when I pointed out you're moving the goalposts from your original outrageously extreme and incorrect statement that "There is just NO REASON why an interface should be ANYTHING BUT beautiful."

Michael Darius:

I'm not ignoring you, I can't keep up with how much you are writing.

Don Hopkins:

Well at least go back and read the words you wrote in your initial tweet and try defending THOSE, instead of trying to move the goalposts and express the one true definition of beauty. I ask you again: define and defend the words you first chose and wrote yourself.

Your original statement is indefensible, so go back and try defending it instead of trying to move the goalposts and pretend you have a monopoly on the definition of beauty.

Your original statement didn't say anything about necessity or usefulness, as I said before. In fact it PRECLUDED them by claiming interfaces should ONLY be beautiful: "There is just NO REASON why an interface should be ANYTHING BUT beautiful." Stop deflecting. Defend THAT.

What exactly do you mean by "NO REASON" and "ANYTHING BUT". Usability and safety are reasons, and something but.

Some random guy:

Sorry to interrupt you guys. How about you two actually go to FAA or some shit and consult with them if it's possible to make a cockpit more beautiful but retain its practicality. I feel like the argument wouldn't go anywhere without trying to do something for real.

Don Hopkins:

You suggest us just walking in the front door of FAA headquarters, waltzing through security, and insisting on a meeting with the heads of the FAA to redesign their interfaces? Should Darius and I drop all we're doing and volunteer our time to do that for free?

Michael Darius:

The images themself do a better job of communicating what I mean by "beauty standards for excellence".

I've never met a designer who didn't feel that their responsibility was to defend beauty standards for excellence and I'm not different.

The mechanics of a jail door might be functional and usable by a door guard but there is nothing beautiful about building more prisons.

Habitats for humanity cares more deeply about the ACTUAL lived experiences people are ACTUALLY having.

[... A side discussion about the definition of beauty, in which Darius channels Deepak Chopra, and I try to get him back on track to defend his own original words, and he stands by his statement but doesn't justify it: https://twitter.com/xardox/status/1741212753056944187 ]

Michael Darius:

If beauty were so subjective then walking through a meadow would feel no different than doing jail time.

Don Hopkins:

Now you're sounding like Deepak Chopra and his quantum faith healing mumbo jumbo hand waving woo woo. I would have expected much more from you. You made a clear unambiguous brash statement using the words NO REASON and ANYTHING BUT. Defend those words.

Michael Darius:

We can agree to disagree.

[...]

The subjectiveness here may not be around the definition of beauty and more around the ‘definition of an interface’. An interface can be defined as ‘the surface between Air and water’.

Don Hopkins:

More woo-woo, Deepak. Address points 1 and 2 which are directly about YOUR WORDS: "There is just NO REASON why an interface should be ANYTHING BUT beautiful." (How many times do I have to quote them back to you before you address them? I must be on #10 by now.)

[...]

Don Hopkins:

Of all those cockpits, which fit your definition of beauty and which don't, and aren't you aware that there are many hard won FAA regulations learned from the study of accidents, mass death, destruction, and human error, that vastly trump your personal opinion of beauty?

Or are you arguing that all iPad interfaces should look like 747 cockpits?

Or do you believe that beauty automatically implies safety, ergonomics, usability, visual unambiguity and perceptibility? Then how do you measure and prove that beauty is not subjective and not in the eye of the beholder and not just your personal opinion?

And what if your personal opinions about beauty happen to require more weight, more expensive, less durable, more bespoke and less modular materials? Do economics not come into the picture, or do you only design interfaces for extremely rich people?

Of course Donald Trump thinks that solid gold toilets in his luxury airliner are beautiful. Do you agree, because you think beauty isn't in the eye of the beholder and he's right, or because you want to make the customer happy no matter how bad their taste and idea of beauty is?

Michael Darius:

In a field where cognitive safety needs to be the priority and a world where user enjoyment reduces cognitive load, it is intellectually lazy to assume that beauty is the tradeoff for ergonomic safety.

Don Hopkins:

The UI Hall of Shame's review of the notorious QuickTime 4.0 player proves the perilous consequences of a UI designer's personal opinions about skeuomorphic beauty trumping usability and ease of use. Were you involved with that, or was it before your time?

http://hallofshame.gp.co.at/qtime.htm

That article should be required reading for aspiring UI designers. Hacker News discussion:

https://news.ycombinator.com/item?id=18212478

My comment in that discussion:

"Apple's long romance with skeuomorphism peaked with Bob Bishop's APPLE-VISION, and went downhill from there." I posted several other comments about VLC's terrible UI, too.

https://news.ycombinator.com/item?id=18219757

Bob Bishop's Apple Vision:

https://www.youtube.com/watch?v=CU_qKQL5PVk

[At this point I took it to private DMs.]

Don Hopkins:

Are you familiar with that review and the problems that caused the widespread negative response to the QuickTime 4 Player user interface? Have you taken the time to read the whole article? Were you involved with that product, or was it before your time?

http://hallofshame.gp.co.at/qtime.htm

I have written about it on Hacker News, and compared it to the even worse WinAmp user interface. Other commenters compared them to WinAmp, but I don't believe WinAmp's infinite and easy skinnability is nearly as maliciously terrible or professionally irresponsible as the QuickTime 4 player (I expected SO MUCH MORE from a company like Apple that published Tog's original UI guidelines), or VLC (which is an open source project without any money or professional UI designers).

HN discussion:

https://news.ycombinator.com/item?id=18212478

One of my comments (among several), which includes a thread about VLC:

https://news.ycombinator.com/item?id=18219757

You can see that I actually give a shit enough about VLC to have spend quite a bit of time analyzing the problem and writing up bug reports, but the culture of the project is so insular and "NIH" that they don't give a shit about user interface design. So I have little hope that VLC will ever improve. But at least Apple finally improved their QuickTime 4 Player in response to acceoss-the-board criticism.

A counter example to the rule of thumb that open source user interfaces are terrible is Blender. Especially when you compare it to GIMP (which is like shooting fish in a barrel, but still is an instructive comparison of cultures).

Blender was infamous for its complex non-standard confusing user interface design, but they LISTENED TO THEIR USERS and vastly improved it!

But of course there is no way of getting around the fact that it's an extremely complex tool that's used differently by a wide range of people, so a lot of that complexity is necessary, and you can't just simplify it away and dumb it down without destroying its usefulness.

One thing Blender does have excellent support for is pie menus! And there are some great pie menu editors, which are important because every different Blender user has their own workflow and set of common commands. So Blender users need to customize and define their own pie menus. Just like HyperCard enabled normal users to construct their own task oriented user interfaces.

(Of course Steve Jobs hated pie menus, which is a story I can tell you about later, or maybe you can tell me the Apple side of that story: Why didn't Apple ever adopt pie menus for MacOS or iOS?)

Pie menus have the potential of being both beautiful, efficient, reliable (low error rates), and easy to use, but it takes a lot more design and programming to pull off than a traditional linear menu.

Simon Schneegans is a brilliant user interface designer as well as an accomplished programmer, and he has developed not only beautiful pie menus (for example the Coral and Trace menu he did for his Master's thesis years ago, and he more recent work on Gnome-Pie, Fly-Pie, and the cross platform Kandu pie menus for desktop app launching, window management, text selection, and many other tasks).

The Trace-Menu A short demonstration of a Pie-Menu I developed for my Bachelor thesis.

https://vimeo.com/51073078

The Coral-Menu A short demonstration of a Pie-Menu I developed for my Bachelor thesis.

https://vimeo.com/51072812

The thing about those examples (and his later work) is that the cool graphics don't spoil the underlying good Fitts' Law friendly design -- they actually increase usability and reinforce the gestural navigation user interface metaphor.

His most amazing accomplishment is the WYSIWYG drag-and-drop interactive pie menu editor he designed and implemented for Gnome-Pie, that he's reimplementing across platforms (Linux X11 Gnome, KDE, Wayland Gnome, etc, Windows, and Mac).

Fly-Pie 7: GNOME Shell 40+ and a new WYSIWYG Menu Editor!

https://www.youtube.com/watch?v=sRT3O9-H5Xs

>Fly-Pie is an attractive marking menu for GNOME Shell. Fly-Pie 7 supports GNOME Shell 40+ and brings a completely rewritten menu editor.

I hope this proves to you how important I believe beauty is. but how I also believe it doesn't need to sacrifice usability.

Here's the latest demo of his current project, Kandu: cross platform super customizable pie menus for Linux, Windows, and Mac. I just sent him my old Mac laptop so he can support the Mac desktop well. The way it works is by using Electron with a full screen transparent overlay window, so it can draw the pie menus with html/css/svg/canvas or any other standards based web technologies.

Kando becomes useful for the first time!

https://www.youtube.com/watch?v=7vVdJ9LORAM

>With Kando, I am creating an open-source pie menu which runs on Windows, Linux and (eventually) macOS. In the future, you will be able to create your own men...

Michael Darius (excerpts):

[...] Tim Wasko was the designer for the initial QT player and still remains one of the best interaction designers I know." [...]

I don’t consider something unusable or barely usable to be beautiful so if the work hasn’t been put in on the usability side or if something isn’t working it doesn’t matter how beautiful the interface elements themselves are. But in that case what makes it not beautiful is not that the interface elements aren’t beautiful. What makes it not beautiful is that what is under the hood isn’t beautiful and what is under the hood is more often than not not thought through the way it should be.

My definition of ‘beauty’ is inseparable from my definition of functional design:

An interface should go beyond usable, it should delight, create enjoyment, provide a sense of safety and control over one’s environment, it should be beautifully engineered inside and out and when any one of those pieces go missing beauty itself goes missing.