The Golden Ratio and User-Interface Design

https://www.nngroup.com/articles/golden-ratio-ui-design/

by adrian_mrd • 5 years ago

58 14 5 years ago

ABS• 5 years ago

I'm afraid the entire intro paragraph is wrong, it's one of those things "everyone knowns" but is in fact not true at all :-(

The best summary of why this is I've ever found is Prof. Devlin 2012's Stanford session on this very topic:

The Golden Ratio & Fibonacci Numbers: Fact versus Fiction https://www.youtube.com/watch?v=4oyyXC5IzEE

xamuel• 5 years ago

Yes, people completely misunderstand what the golden rectangle is about and why it's important. Its importance lies in the fact that it's canonical, a rectangle motivated intrinsically, independent of anyone's preferences (conscious or unconscious) or any experiment: the same golden rectangle would naturally be discovered by aliens on the other side of the universe, or even in alternate universes with totally different laws of physics. People looking for golden ratios in seashells and things like that haven't just missed the point, they've missed it by 180°, fired their arrows away from the target.

(Of course, there's an even simpler canonical rectangle: the square. But that one's too trivial to be interesting.)

humblepie• 5 years ago

https://www.fastcompany.com/3044877/the-golden-ratio-designs...

DavidSJ2• 5 years ago

In the study, participants with no background in art, were shown an original image and distorted versions of a statue. The original statue’s proportions reflected the golden ratio. The original image strongly activated sets of brain cells that the distorted images did not, suggesting beauty is partly an innate quality.

This doesn’t sound like the best study design unless they also tested with statues whose original proportions were not in the golden ratio. Otherwise you’ve just proven that people can tell when a human statue has been distorted and don’t like it.

I’m also unclear as to exactly how the vertical and horizontal lines on the Mona Lisa were chosen. Why didn’t a1 go to the top of the head? Why did a2 go up to the eye and not some other facial feature? What determined the endpoints of b2? It seems like there were so many options available and no natural way to select between them, so I have to assume the endpoints were selected simply to produce a golden ratio. And one could do that with any image at all.

jmole• 5 years ago

Was just thinking this. You can take one of these golden rulers and place it on nearly anything, roughly adjust it to size, and find a "match" somewhere in the image.

idle_zealot• 5 years ago

I think that’s the point. The significance of this is dependent on whether it holds true for other arbitrary ratio rulers.

stephbu• 5 years ago

Came here to write the same comment. The points/measures selected as “data” seem incredibly arbitrary - and seem more likely to be created to fulfill the hypothesis. Closed window, moved on.

daniel-thompson• 5 years ago

Leonardo Da Vinci’s Mona Lisa: The length and width of the head (segments a1 and b1), as well as the length and width of the torso (starting from the eyeline down to the hands — segments a2 and b2) are in golden ratio.

Since when does anyone measure a torso starting at the eyeline!?

Lots of data dredging here.

kevinventullo• 5 years ago

People making enormous leaps to find the golden ratio in everything reminds me of the “Illuminati” meme, where a triangle anywhere in an image indicates Illuminati influence.

karaterobot• 5 years ago

If you think using the golden ratio will solve actual problems for you, you're wrong. In general, the design of a screen layout should come from the type and amount of content you need for users to perform a task, not from an arbitrary number. This stuff smells like magical thinking to me.

jazzyjackson2• 5 years ago

Golden ratio is not arbitrary, it solves the problem: How to make sure nothing lines up.

This link gets passed around a lot and it's very illuminating, demonstrating that the golden ratio is objectively "the most irrational number": https://youtu.be/sj8Sg8qnjOg

mlajtos• 5 years ago

Jürgen Schmidhuber took this approach way before anybody else.

https://people.idsia.ch//~juergen/fibonacciwebdesign.html

jazzyjackson2• 5 years ago

Mathematica uses the golden ratio as the default for plot dimensions; it does seem arbitrary but when you have to pick a number, why not this one?

IMO the spiral stuff is very "seek, and you will find", but at least as a twist on the 'thirds rule' of photography it makes sense to me this way: the mind is always seeking a way to fold things, because if it finds something is symmetric down the middle, it only has to remember half of it. Basic compression. Thirds makes it a bit more "interesting" but even then you're better off breaking the rule: if a pattern looks close to symmetric, we tend to linger on it, as our minds' gears turn to say "is this easy to compress or not?". Kind of like a march vs swing music: an even tempo is easy to match and rather uninteresting, but once you add some entropy and syncopation, it becomes a locus for attention.

As an aside, the golden rule "do unto others as you would have others do unto you" always seemed similar to the golden ratio's definition "the whole line is to the greater segment, so is the greater to the less", anyone else notice that? I always wondered if they're etymologically related.

The Golden Ratio and User-Interface Design

Related Stories