Design trends change our preferences over time, and when someone asks you to explain your preference, you will try to rationalise your feelings by making them sound like facts, even if they aren’t.
So let’s answer:
“Are circles better than squares?”
Just starting the Crash Course? Start here!
****
If you’re trying to design an interface that will get likes on Dribbble or Behance, your best bet is to go for something that looks beautiful, rather than something that solves a problem.
Why?
Because beauty is obvious. You can’t see a well-solved problem.
Design looks better if you include more whitespace, photos of beautiful people and simple, colourful palettes. Especially if you avoid little disruptive details like menus and text and forms.
But that doesn’t make it a good design. Sometimes it even makes it a bad or unrealistic design!
This stupid question was originally asked by someone who had noticed that a lot of new interface designs include circular profile pictures.
So, are circles better than squares for UX?
****
The stupid answer:
I circles weren’t better, everybody would still be using squares.
“Pfff, shyah! And monkeys might fly out of my ass!” — Wayne
****
The Real Answer:
Circles physically take less space on the screen so they create more whitespace around them.
Circles shift the user’s attention toward the middle of the circle, rather than the corners, like a square.
And the roundness of a circle makes it more different than the rectangular layout/text elements that might be near it, so it is easier to find them and they attract attention.
All of these things make the interface look less “full”, visually.
Squares, on the other hand, give you more space to see the image, i.e. — they don’t “waste” that space.
They also align better with the rectangular text elements around them, so they help your eye move along the vertical “edge” when you’re scanning the page.
And they distract the user less, so they won’t steal attention from the content, which might be more important.
****
Why this isn’t a stupid question:
Beautiful mock-ups can still be crap in real life.
As a designer, you need to be careful that you’re not giving yourself “convenient examples” in your mock-ups.
In real life, those profile pictures could be anything from a logo, to a face, to a shitty vacation photo of a landscape.
Some people will argue that faces are “rounder” and therefore a circle is “better” for faces, that is only true if every user uses a straight-on, close-up photo of a human face.
However, for all the those 45° angle photos (like mine), and photos of cats looking uncomfortable in a halloween costume, and ugly babies, and photos of couples and every other kind of photo, a circle is just cropping out the corners. If it’s that wedding photo of you holding hands in a meadow, your faces are now half-gone. Sorry.
Also, if you look around for circular profile pictures, you’ll find them. That’s called Confirmation Bias.
But if you look for square profile images, you’ll find those too. On Facebook, Twitter, LinkedIn, and some other tiny, unsuccessful sites like that.
So in short… the shape of your profile images is a matter of style, not function.
****
Choose results over beauty.
It has been proven again and again that beautiful designs get more positive feedback from users — if they don’t have to use them for real.
If you ask users “which of these designs is better?” they will usually pick the one that looks better.
When they suddenly becomes a user of the design instead of just an admirer, they just-as-suddenly don’t give a shit how it looks and want it to be easier, clearer, and more obvious.
When you measure users, the data will tell you the truth.
Ugly designs beat beautiful designs in A/B tests really often. All those functional details and menus and forms and text that you removed to get likes on Dribbble are what users need to make decisions and understand what is happening.
Beauty is a terrible way to judge UX quality.
Sometimes beautiful designs win too, but not because they are more beautiful.
The best designs are more beautiful and more useful.
****
Tomorrow we will answer: “Is flat design better for UX?”