Have anyone noticed an increasing trend among platforms or Apps to use a “circle” for users’ “head portraits”? Is it a recent design trend? Is it the preference of most UI designers? Or some other reason? After compiling expert discussions from the social media and analyzing the results of questionnaire surveys, Jeremy Lin gradually discovered the truth. Don’t miss out on this exciting expose~
Definition and development of profile pictures:
The rapid growth in online users means increased demand for interacting with other subscribers through platforms. This led to the development of many interactive platform formats including forums, e-mail, chat rooms, blogs and social networks. Each subscriber represents a unique individual (whether it’s a real identity or virtual character). Each of these individuals has their own profile and representative picture. The profile picture is usually a personalized symbol (that the subscriber feels is representative of them). Most are expressed as a 2D or 3D image.
Profile Picture or avatar are both terms commonly used in UI. Profile Picture is relatively straight forward but for most readers, Avatar might come as a big question mark. After all, most people associate Avatar with the movie (the one with big blue aliens, XD). According to techpedia, the term Avatar first appeared in 1985 and was proposed by Chip Morningstar and Joseph Romero, two developers working on the Habitat online RPG project at Lucas Film. The term itself comes from the Hindu word for “a descent of the Supreme Being”. Its English meanings include “incarnation” or “manifestation.”
▲Source:http://goo.gl/sSCCs3
The perspective of online users on selection of profile pictures:
The argument of what shape profile pictures should be is old news. Many experts have expressed their opinions or discussed the issue at length on related forums. Jeremy Lin has compiled their arguments on Quora and Stack Exchange into the following simple categories. Jeremy Lin must however note that the following was not sorted through any form of frequency analysis (sorted at random) and most responses have no associated proof or research data. People should therefore just treat them as different “perspectives.”
Perception and Cognition
A square is plain boring.
The brain handles information inside circles more easily so this reduces the cognition load.
Compared to squares, the circle is more gentle, organic, safe, easy on the eye, modern and friendly. It also facilitates emotional intercourse with other people.
Feels like there’s greater focus such as the view through a telescope or magnifying glass.
In most photos, the surrounding area contains meaningless background or details. A circle eliminates those.
Photographs usually place the “person” in the center. The distance between the center and the edges is uniform all around a circle making the face more pronounced.
Vision
1. In a square, there are 5 focal points (the four corners + center). In the circle, there is only one (the center).
2. Rounded lines and angles allow the line of sight to follow and move around naturally while 90-degree angles bring it to a halt. For more information, see this article.
3. When scanning, using a circle helps the user identify or differentiate the content. Content is usually placed in square containers such as text, photographs or albums.
Other
1. Since the widespread adoption of mobile devices, circles have become widely used because they are similar to the shape of the fingertip pressing on the screen.
2. People have long used this design. Characters for example often appear on circular coins and artworks.
3. It is just a design fad and “circle” happens to be in right now.
4. Many guidelines or templates only offer a circular version.
5. Existing CSS3 technology allows rounded angles (circles) to be easily implemented. Most browsers support it as well.
The author Anthony proposed the following viewpoints on UX movement:
In UX movement, Anthony also proposed some view points different from the above. They’ve been compiled and briefly described by Jeremy Lin below:
Angular edges are more obvious
Due to contrast (of color or shape), the four sharp angles of squares are more visually pronounced and causes interference. When circles are used, there is no such problem and greater emphasis can be given to the true subject – “the face”.
▲ Source:http://goo.gl/koKpMq
The square has longer diagonals
The diagonals of the square are longer than the edges and this tends to draw the user’s eyes away; the circle has the same radius, so the user takes less time to comprehend the content and the eyes don’t need to move as much either.
▲ Source:http://goo.gl/AQaaDv
Is the effect the same when the circle is used for non-character images?
While the use of a circular profile picture eliminates unnecessary background and accentuates the face, does it have the same effect for non-character images (e.g. landscapes or food)? Anthony felt that this is not necessarily true because the information that the image sought to convey such as depth or details may have been lost.
▲ Source: http://goo.gl/yuhbah
Jeremy Lin’s opinion:
The views of many experts have been compiled above. Most tend to be supportive. Jeremy Lin however has some views that weren’t mentioned above and would like to include them here for reference:
Stronger sense of design
Jeremy Lin feels that circular profile pictures imbue the UI with a stronger sense of design. This however is influenced by the designer’s approach or the user’s subjective perception. Platforms can’t set restrictions on the quality of the image uploaded by the user either. If the uploaded image’s quality, composition or aesthetic appeal is somewhat lacking, applying a circular mask will be better than a square one for the UI design.
More affable
When meeting people for the first time, you tend to feel those with stiff expressions are harder to get along with but start chatting right away with those who are all smiles. Why does this stereotype exist? This is due to differences in the degree of “affability”. Most people associate curves and circles with affability. If circular elements (such as profile pictures) are used in the interface, the user might gain an impression that this product has a shorter learning curve.
A good start is half the battle won, right?
While orthogonal shapes optimize the use of space, circles leave some white space.
If user experience and aesthetics are not taken into account, arranging different content in squares offer the most efficient format (like shipping containers) but such a product will not be popular with users. This is why designers should all learn about the benefits of white space such as reducing the visual load, improving readability, differentiation of content and enhanced aesthetics. Leaving an appropriate amount of white space is very important for a product. It is also a test of a designer’s fundamentals. For character images, a circle offers more white space than a square for the same given dimensions (at the four corners). Apart from increasing differentiation from other content, it also adds some interest to the UI.
Do users really prefer circular profile pictures?
Most experts tend towards logical analysis based on cognition, comparison, or visual lines of movement; some however tend towards the explanation that “it is just a design fad.” Nevertheless, if most users prefer a circle then a circle is perfectly fine for products that want to offer a more pleasant experience. This was why Jeremy Lin wanted to use a simple survey to test the hypothesis “users prefer circular profile pictures.”
This survey was open to everyone and the broadcast media was the Design Jeremy Lin’s Facebook fan page. There might be constraints in terms of occupation or age, but these factors weren’t the ones that this survey sought to analyze. The survey also ran from March 1 to March 10, 2016. The survey was produced with typeform and consisted of 4 questions. A total of 305 valid responses were ultimately recovered.
First, Jeremy Lin wanted to know if the presence of a background to the profile pictures affected the “preferred” shape. I also wanted to know which shapes the users liked better. This led to the two core questions being designed as follow:
The background is square and there are three basic shapes (square, circle, hexagon). The respondents were asked to pick their preferred shape.
The background is blank and there are the same three basic shapes from the previous question.
The remaining two questions were optional. These mainly asked the respondent to describe the reason for their above choices.
Background present
56% (171 people) of respondents preferred a square profile picture; 42% (129 people) preferred the circle; the hexagon was the least liked at 2% (5 people). This showed that if there is a background to the portrait then there’s a 14% difference between those who prefer a square and those who prefer a circle. Jeremy Lin sorted the respondents’ reasons and picked out the adjective associated with perception (because this was based on subjective preference) and sorted them according to frequency as shown below:
The most common reasons for choosing the square were: enduring look and easy on the eye, stable and balanced, neat, and comfortable. It is worth noting that the reasons based on sense and logic outnumbered those based on sensibility several-fold. These include consistency with the square background, less likely to cut into the photo, and being used to the FB interface. This showed that the question needed to take more factors into consideration and eliminate those that interference with choices based on sensibility (such as eliminating user association with FB). The reasons for like the circle: looks good and is easy on the eye, comfortable and harmonious, smooth and rounded, lively, focused, cute, affable. The reasons for liking the hexagon: different.
If people are stilled interested, then the influence of other factors can be examined in the future. These include placing the profile picture in the background, alignment with the edge of the background, and placement in the center or on the right. Eye movement sensors, brain wave or other analytical instruments may even be used to verify related assumptions. Also, a certain proportion of the respondents who selected the circle in the two questions cared about being able to fit more photo information into a square. This is therefore a factor that designers must take into account as well.
No background
19% (58 people) preferred the square profile picture; 78% (238 people) preferred the circle; only 3% (9 people) like the hexagon. The data showed that when no background is present, the respondents preferred a circular profile picture and the difference with the circle was 59%.
Reasons for liking the square: Overall consistency (with the layout and surrounding elements such as the square background), neatness, easy on the eye, simplicity and neatness, formality etc. Reasons for like the circle: Easy on the eye, lively, gentle and smooth, harmonious and consistent, comfortable, light and delicate, clear and obvious, cute, simplicity etc. Reasons for liking the hexagon: Different and avant-garde.
Conclusion
This study is by no means rigorous and does not represent the final word by any means. It does however show that when a background is present it may influence the user’s preference on profile images. When no background is present, most users prefer a circular profile picture. Designers can also refer to the lexicon of the respondents’ responses to select the shape best suited to the impression they want to convey with their design.
Tips for using circular profile pictures
How to implement it in CSS? What to watch out for?
Thanks to technical support by CSS3 and all browsers, for the HTML tag or class of profile pictures, just add one line: border-radius: 100%; this implements the CSS attribute! To ensure backward compatibility with older browsers, different prefixes must be added for different browser engines as shown below:
Advice for user-uploaded images
I don’t know if people have noticed this or not, but you might have discovered after picking and uploading a picture that the circular border is in the way (e.g. covers a part of the face). The effect is therefore not what you expected. This is where designers can offer the user some suggestions through the interface for uploading pictures. For example, they can show the area that the face will appear in within the circle. The user can then compare it against their own pictures and pick the most suitable one. Or give a recommended font size (for legibility) if there is writing in the picture; or a reminder not to use illegal pictures.
Provide multiple default pictures and a more comprehensive image editor
Sometimes, the user might just happen to not have a suitable picture or think it’s not important so don’t bother to set a profile picture. The platform may, however, want to convey an atmosphere of different characters interacting with each other (e.g. social networks) or it is needed for identification during collaboration (e.g. trello). The designer can then provide multiple default profile images for the user to quickly choose from during the configuration process (e.g. different colors or variations on the corporate logo), or incorporate some form of automation (e.g. the first letter of the account name). In addition, when a third-party social network login is used the profile picture uploaded to that platform can also be automatically imported. This is a more convenient method for users.
If a comprehensive image editor can be provided, however this will encourage users to create a better-quality profile picture that matches their self-image by selecting a filter, hue and brightness. The availability of an image editor however should depend on the nature of the platform services.
For the same given dimensions, a circle looks smaller than a square.
If a circle has the same diameter as the edge of a square, when the two are placed side by side then the circle will appear smaller visually (as shown in lower left). If it is necessary to place the two together in the layout, the circle can be made slightly larger to achieve visual balance (as shown in lower right).
Use of gif
More and more platforms are allowing users to upload animated gif files for their profile pictures in order. This allows the user to emphasize their uniqueness or personal taste. Examples:
Exaggerated changes in expressions to represent a fun-loving personality
Cycling between different daydreaming pictures to tell everyone what a sophisticated literary character I am!
Rotating 3D model to indicate that I am an animator
About Design Tongue
Design Tongue is a content platform focusing on user experience issues, including UI, interactive design, user experience, product design trends, and service designs in an attempt to enable the readers insights into the designer’s mind and promote design thinking.