Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
10  
In the old days, when people printed photos and framed them, some frames would be rectangular and others circular. Isn't it obvious that choosing a frame is only an aesthetics decision? –  jff May 4 at 11:29
44  
The border-radius CSS property is now wildly supported in all browsers. –  Prinzhorn May 4 at 17:30
9  
The worst part is when sites (cough Heroku cough) use your Gravatar and round it. You won't necessarily be using a picture of your face for that, so information is more likely to be lost. –  nyuszika7h May 4 at 18:14
3  
I think Prinzhorn is absolutely right. When confronted with a new toy, people are going to find a use for it. –  Chris Lively May 5 at 15:00
12  
@Prinzhorn I think you mean "widely" supported /pedant Though CSS is getting pretty wild these days... –  joshuahedlund May 5 at 20:08

11 Answers 11

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.

share|improve this answer
1  
Personally, I'd rather have a triangle image, just as long as the pointy side is facing down - wouldn't want my forehead cropped :-) –  Danny Varod May 4 at 20:20
3  
Actually, 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. –  Danny Varod May 5 at 9:17
13  
"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. –  DA01 May 5 at 17:03
7  
I 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. –  jff May 5 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. –  Franchesca May 5 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.

Examples of rounded avatars, square avatars, and avatars with a hole in them

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.

share|improve this answer
26  
What does this have to do with the question? The question was not about removing information from the centre of the photo. –  jff May 4 at 11:31
9  
@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. –  Voo May 4 at 12:33
6  
If 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. –  Danny Varod May 4 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.) –  Marjan Venema May 4 at 20:28
7  
@AwalGarg That is true no matter what shape is removed from the center - nothing to do with the shape of the picture. –  Danny Varod May 5 at 9:18

It is a kind of a design. People basically got bored from the squared ones, so I believe twitter came up with the round ones and then people found them attractive and not boring anymore.

Reference:

On the flip side, because this shape is so common it can sometimes be seen as boring or plain.

Also, on the other flip side when the community gets bored of this shape there are still dozens more, so the shapes will change. They might change to a rounded box or a triangle or whatever.

share|improve this answer
3  
+1 Actually, this is the one answer here that makes any sense to me. –  Danny Varod May 4 at 20:20
2  
Yes, this is (ironically) the most accurate answer. –  DA01 May 5 at 17:03
    
I think that if the users were able to create interesting profile icons by themselves, we would be still seeing rectangular profile pictures. However, the reality is that 99.999% of users are not able to modify their profile picture so rounding the corners is the easiest automated fix for that. –  Mikko Rantalainen May 7 at 6:31
    
Not really the most accurate answer. –  myth May 27 at 14:27

enter image description here

This is my reckoning on the rounded profile pics.

  1. 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.

  2. 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.

  3. 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.

share|improve this answer
4  
1. 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). –  Danny Varod May 5 at 10:08
1  
I 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 ? –  sandeep_jagtap May 5 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. –  supercat May 5 at 16:36
    
@DannyVarod With modern compression the shape of the image isn't really important anymore. –  API-Beast May 5 at 23:04

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.

share|improve this answer
7  
Correlation does not imply causation. –  Charles Wesley May 5 at 14:38
1  
"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. –  Theodores May 6 at 14:36
6  
Not 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. –  Charles Wesley May 6 at 15:40

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.

share|improve this answer
4  
Faces are elliptic, therefore a correctly proportioned rectangle with rounded corners would be much closer to their shape than a circle. –  Danny Varod May 5 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. –  ahmacleod May 5 at 15:14
    
But "WHY NOW? WHY NOT EARLIER?" –  BlueFlame May 6 at 7:27
1  
@BlueFlame you couldn't do it easiliy earlier, due to lack of browser support for the relevant features. –  Peteris May 7 at 10:51
1  
Also it is harder in CSS to create an elliptic shape. Dead simple (now) to create a round one. –  Joshua Dance May 7 at 15:59

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.

enter image description here

share|improve this answer

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!

share|improve this answer

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

share|improve this answer
3  
A.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. –  Dio Phung May 5 at 3:27
1  
With circles you are wasting storage space - as the storage is always rectangle. –  Danny Varod May 5 at 10:08
    
@DannyVarod - That doesn't make sense. The transparent areas are easy to compress while saving. –  M.Mimpen May 5 at 16:38
    
@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. –  nmclean May 8 at 12:30
    
@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.Mimpen May 8 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

share|improve this answer
1  
this is dubious; it is unclear how your sources arrived at this conclusion and no actual data is provided. –  doppelgreener May 4 at 22:54
1  
And what do click-through rates have to do with avatar/profile photos? –  DA01 May 5 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

http://www.smithsonianmag.com/science-nature/do-our-brains-find-certain-shapes-more-attractive-than-others-180947692/?no-ist

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.).

share|improve this answer
18  
[citation needed] –  sapi May 4 at 21:21
    
I love this answer. The "until it comes to things outside of web design (cars etc.)" part is pure gold imho. –  Pierre Arlaud May 5 at 13:12
    
Well, it's a theory. I guess. –  DA01 May 5 at 17:06
4  
OK, 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 May 6 at 8:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.