Why are many websites and applications using round profile pictures? Even the top players like Google and Apple use round profile pics over conventional rectangle frames. Why?
14 Answers
Corners on a picture of a face (which most people will choose as an avatar) are not just unnecessary visual noise, they may make the image harder for us to process. Things with rounded edges are considered easier on the eye than things with sharp edges. Circles are easier for the visual system to process, so generate less cognitive load.
However, many of us who grew up with rectangular avatars are still designing them to make best use of a rectangular space. Perhaps we should get with the times and stop being so square.
answered May 4, 2014 at 19:04
-
3Personally, I'd rather have a triangle image, just as long as the pointy side is facing down - wouldn't want my forehead cropped :-) Commented May 4, 2014 at 20:20
-
3Actually, for reduced visual noise the picture should be matted (background should be removed), any background around face is noise and the circle leaves quite a lot of it, as our faces are longer than they are wide. Commented May 5, 2014 at 9:17
-
27"Circles are easier for the visual system to process, so generate less cognitive load." = I don't know that that is a universally agreed upon fact.– DA01Commented May 5, 2014 at 17:03
-
13I look around and see squares everywhere in the real word. Doors, tables, windows, buildings. I'm able to navigate in the real word without much conscious thought, so I would say my brain is prepared to handle sharp edges as well as round ones. The article you point to has no references, other than telling "what would you trust your child, a fork or a ball". Pills are round, and I wouldn't trust my child with some pills.– jffCommented May 5, 2014 at 18:23
-
@DA01 The question is asking why other people, including some "top players like google" are rounding profile pics. Disagreeing with the reasoning behind the thinking that curves are better doesn't make my answer wrong. Commented May 5, 2014 at 19:23
This is what I think.
If you look at an image, all you need is the centre most area of it to understand what it is about. If the centre of the image is removed, it becomes really hard for us to understand what the image is about, whereas if the corners are removed and the centre is preserved, we can still figure out what the image was about.
The above is true for most cases. I know that there can be exceptions where the subject is not in the centre of the photograph.
As far as why everyone is using rounded avatars rather than square ones, is like asking why is everyone moving to Flat design.
Hope this helped.
-
36What does this have to do with the question? The question was not about removing information from the centre of the photo.– jffCommented May 4, 2014 at 11:31
-
12@jff True, but I find the example pictures demonstrate quite nicely how the actual person is more prominently featured (to me at least) in the round than square pictures.– VooCommented May 4, 2014 at 12:33
-
8If you cropped these sample pictures into a small rectangle around the head, you'd use less space and still have most of the significant pixels (the head). - In other words, I disagree with this answer's arguments. Commented May 4, 2014 at 14:04
-
3@DannyVarod Because rounded edges are perceived as less threatening by the visual system. (Sorry no link but this stuck in my memory from reading articles about why MS (and Apple?) moved from squared corner windows to ones with rounded corners.) Commented May 4, 2014 at 20:28
-
8@AwalGarg That is true no matter what shape is removed from the center - nothing to do with the shape of the picture. Commented May 5, 2014 at 9:18
This is my reckoning on the rounded profile pics.
Why was there square profile pic before?
The idea was derived from photo frame which were square and to match the real world the profile pic were square.
Now why round?
I guess now we are gradually shifting from skeuomorphic design to designs which are more efficient in the digital word. Also it's a new thing which stands out from the traditional square profile pic.
Why is it succeeding?
Above pic you will see that for square profile pic, there are 5 points to concentrate ( four on the corner and one at the center). Most of the time face visual are at the center. So the other corner points on the edge take your concentration away from the object to focus, whereas if you see the round profile pic you see only one point of concentration at center and no distinct point to concentrate on edge.
In short in a round profile pic we can easily focus on the object which is at the center where as it's difficult in case of square due the 4 corner points which takes part of your concentration.
-
101. a. There were circular frames 100 years ago, I have an old portrait that demonstrates this. b. Film was rectangle to prevent wasted space, sensors are rectangle to enable simple layout and image storage. 2. Rectangles are more efficient in a digital world - their coordinates are easier to handle without wasting storage space. 3. The smaller the background around the face, the more I concentrate on the face, in the example image, that happens with the 3rd column (small rectangle), not the 2nd (circle). Commented May 5, 2014 at 10:08
-
1I somewhat agree to most of your points except the 3rd one. I feel round one does better job for concentrating object because of no distinct point on the edges without making image considerably small and more cluttered , Whats your take on it ? Commented May 5, 2014 at 10:25
-
@DannyVarod: Even though the area of photographic media allocated to each picture is generally rectangular, the area of film that many cameras would expose would often have rounded corners, and contact-size prints would often have the corners cut off.– supercatCommented May 5, 2014 at 16:36
-
@DannyVarod With modern compression the shape of the image isn't really important anymore. Commented May 5, 2014 at 23:04
-
The circular frames (and pictures, both negative and positive; it wasn't just the frames) had mostly to do with the original Kodak ("you press the button; we do the rest"), which lacked a viewfinder and wasn't fussy about whether or not you held the camera level. Rectangles, ovals and arches were much more common for pictures made with plate cameras of the era. Commented Dec 10, 2015 at 23:50
Because everyone is using 'Twitter Bootstrap' in order to make a clean, responsive website.
Part of the toolkit is the img-circle class that you just add on and voila, round image, 140px diameter. It could not be easier.
http://getbootstrap.com/css/#images
There may be more scientific reasons for why the round shape is in vogue, however, the mass adoption is because Twitter Bootstrap makes it very easy to do.
-
11
-
2"Correlation does not imply causation" is that the best you have got? That is perhaps the most flippantly tedious, 'I know better' thing to say. When a new tool comes along people use it and you see the results everywhere. By analogy, there was a time in television when page curl effects were used. Was this because people independently thought up the idea or was it because some tool with the effect came along and became popular in edit suites? Sure, page curls were possible without the 'DVE' box and existed before, but the box popularised the effect, whilst the phase lasted. Same here. Commented May 6, 2014 at 14:36
-
8Not intended to be flippant. If I had something substantive to say on the subject, I would have posted an answer. I also did not down vote your question. However. The question is: Why are many websites and applications using round profile pictures? I do not believe that Twitter Bootstrap started the trend. I do not believe that Bootstrap sites are the only ones to use the technique. I do not believe Bootstrap's inclusion of this common technique answers the question of why the technique is used. Consequently, correlation does not imply causation. Commented May 6, 2014 at 15:40
-
If you can provide a source that confirms this is the reason that images are round I'll eat my hat.– invotCommented Mar 12, 2018 at 21:11
Why nowadays? Perhaps because CSS3 — which was adopted in 1999 but only implemented commonly a few years ago — allows for the border-radius property so rounded borders can be easily implemented dynamically in a browser. Previously one would have to fire up Photoshop or create image manipulation code using the GD Graphics Library or ImageMagick on the server side to achieve the same effect.
But within the history of computers and user experience, you can look back at Steve Jobs passion for their use during the development of the Apple Lisa (forerunner to the Macintosh) in 1981:
Bill fired up his demo and it quickly filled the Lisa screen with randomly-sized ovals, faster than you thought was possible. But something was bothering Steve Jobs. "Well, circles and ovals are good, but how about drawing rectangles with rounded corners? Can we do that now, too?"
"No, there's no way to do that. In fact it would be really hard to do, and I don't think we really need it". I think Bill was a little miffed that Steve wasn't raving over the fast ovals and still wanted more.
Steve suddenly got more intense. "Rectangles with rounded corners are everywhere! Just look around this room!". And sure enough, there were lots of them, like the whiteboard and some of the desks and tables. Then he pointed out the window. "And look outside, there's even more, practically everywhere you look!". He even persuaded Bill to take a quick walk around the block with him, pointing out every rectangle with rounded corners that he could find.
When Steve and Bill passed a no-parking sign with rounded corners, it did the trick. "OK, I give up", Bill pleaded. "I'll see if it's as hard as I thought." He went back home to work on it.
Bill returned to Texaco Towers the following afternoon, with a big smile on his face. His demo was now drawing rectangles with beautifully rounded corners blisteringly fast, almost at the speed of plain rectangles. When he added the code to LisaGraf, he named the new primitive "RoundRects". Over the next few months, roundrects worked their way into various parts of the user interface, and soon became indispensable.
All that said, what I do find somewhat hilarious is now Apple is moving towards pure circle for UI in iOS 7. While Windows 8 has what? Tons of non-round squares for an interface. Apple gets rounder & Microsoft get’s squarer!
Faces are round(ish). By cropping the corners of the image, you increase its concentricity, as the curves of the border fit closer to the curves of the head. This draws your eye directly to the subject and specifically frames the face.
-
7Faces are elliptic, therefore a correctly proportioned rectangle with rounded corners would be much closer to their shape than a circle. Commented May 5, 2014 at 10:01
-
That's a good point, at least for many faces. We don't often see masking in that shape; the trend seems to be towards more subtle rounding in rectangles. Commented May 5, 2014 at 15:14
-
-
1@BlueFlame you couldn't do it easiliy earlier, due to lack of browser support for the relevant features.– PeterisCommented May 7, 2014 at 10:51
-
1Also it is harder in CSS to create an elliptic shape. Dead simple (now) to create a round one. Commented May 7, 2014 at 15:59
A long time ago there was a complicated javascript masking needed or just image manipulation needed to pull off the rounded images. Now with border-radius it's an easy task to create rounded images. So I guess the simplest answer would be that people do it because it's easy to do and breaks the mold of the normal square image.
They are round now because it's trendy. No other reason. No human being has ever had a hard time recognizing a face because of corners. Huge portions of the human brain are dedicated to facial recognition so you could have the face on a star shape and it would have no bearing on the recognition.
-
2Randy you are wrong. Circles and rounded edges cost less cognitive load than hard edges. Try arguing with a neurological scientist... uiandus.squarespace.com/blog/2009/7/27/… Commented Mar 12, 2018 at 9:05
Using the same example from the first answer, the circles may be less square (than the original column - 1st from the left), but the have redundant background in the middle (leftmost column).
Cropping to a smaller rectangle (3rd column from the left) makes you focus on the face, since that is all that is left.
If the rectangle seems boring to you, then you could experiment with other shapes e.g. trapezoids. In the last example (the bottom row), the fast trapezoid crop I preformed actually matches the face and makes the guy seem more interesting vs. the circles which seem like frames from the end of the 19th century. It even makes the boring looking guy seem less boring than the alternatives do.
Circles and rounded edges cost less cognitive load than straight and hard edges.
"A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our "fovea-eye" is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down." - Prof. Jürg Nänni
answered Mar 12, 2018 at 9:08
The face is the most important part of a profile picture. The less background area there is, the more users can focus on the face.
A rounded profile picture crops the background area at the corners.
Also, it helps users to differentiate the profile pictures from a simple photo from the content.
answered Jan 6, 2019 at 18:55
If you remove the corners of a picture, you reduce the overall level of data chaos, and therefore the disk space, network bandwidth, and transfer time. If you're storing 100,000,000 picture and you can knock a few hundred or thousand bytes off of each one, you can buy a smaller disk or use the extra space to increase the time needed before you have to buy more.
Dan
-
9A.Gauthier : it's not always the case. In fact, some websites implemented this feature using
border-radius, which do not reduce any bandwidth at all. Commented May 5, 2014 at 3:27 -
5With circles you are wasting storage space - as the storage is always rectangle. Commented May 5, 2014 at 10:08
-
2@DannyVarod - That doesn't make sense. The transparent areas are easy to compress while saving.– M.MimpenCommented May 5, 2014 at 16:38
-
2@M.Mimpen The transparent areas aren't stored, the original data is. Remember we are talking about profile pictures. Unlike other UI elements that could specifically be designed to be round, profile pictures are uploaded by users who aren't part of your design team and take rectangular photos. You will probably want to be showing the original somewhere anyway, but even if not, you don't know whether this round fad will go away in a few years and your boss will ask you to restore the corners. Storage space is cheap, and should have no relation to UI design.– nmcleanCommented May 8, 2014 at 12:30
-
1@nmclean - True point and I agree, but you could optimize this by saving the original and another image that is an rounded version (with transparant stuff that's easy to compress) thus saving bandwidth in certain/most cases.– M.MimpenCommented May 8, 2014 at 13:14
Round Shape Image Stands out for the person searching on the Web as compared to Square Google plus images. That will be more Eye Catchy and may there fore leads to a higher click through rate(CTR)
Ref : http://webmaster-land.com/how-to-make-a-round-google-profile-image/ & http://louisem.com/2956/google-cover-photo-size
-
3this is dubious; it is unclear how your sources arrived at this conclusion and no actual data is provided. Commented May 4, 2014 at 22:54
-
3And what do click-through rates have to do with avatar/profile photos?– DA01Commented May 5, 2014 at 19:25
Ok,
Only males asking this question and most are not designers or ARCHITECTS. In fact the increases in female designers has made this more common and nueroscientists are studying the overlap.
The trick is to find the right balance of shape and detail that makes the room feel pleasing to you
Softer colors and rounded figures are more pleasing to the less aggressive female psyche.
In other words," says Vartanian, "we prefer curves because they signal lack of threat, i.e. safety."
http://www.fastcodesign.com/3020075/why-our-brains-love-curvy-architecture
Many popular website communities complain about not having enough female interest. They should try a few more radius curves and gradients ( gives the illusion of curvature) to see if they can gain trust from the other half of the web.
Blockquote It's also critical to point out that just because people have a natural neural affinity for curves doesn't mean round design is always superior. If researchers asked people to rate architecture based on functionality (websites?) instead of beauty, for instance, they might get different results.
For some strange reason men feel most comfortable with right angles until it comes to things outside of web design where functioanality is the key factor.(cars etc.).
-
21
-
I love this answer. The "until it comes to things outside of web design (cars etc.)" part is pure gold imho. Commented May 5, 2014 at 13:12
-
-
7OK, I have a lot of criticisms for you around this answer. Firstly, your first blockquote doesn't seem to come from any of the sources you've linked to. The last quote you've added in the text 'websites' where it doesn't appear in the actual source. Also, none of those links mention anything about curves being more pleasing to females. And finally, where is the actual link between any of this physical 3D architecture information and small 2D website profile images?– JonW ♦Commented May 6, 2014 at 8:15
-
border-radiusCSS property is now wildly supported in all browsers.