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?
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.
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.
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.
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.
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.
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!
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
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.
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)
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."
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.).