Our profile photos used to be square. Then circular design came along and all of a sudden, everyone’s photo is now wrapped in a circular frame. Which is actually better? The answer is of course: it depends. There are different factors a designer should consider before deciding to go with a squarish or circular profile picture design. There is no one best scenario whereby it should always be square or circle. In the article below, I try to highlight out some of the factors you should consider and how they can affect your user behavior.

 

 

#Criteria 1: For interaction on mobile or PC

If you intend users to click on the profile images as a form of interaction, then it is important to use different designs for different platforms. A circular design is preferred for touch based devices because circles are optimized for our fingers. A circular design emulates our fingers and thumbs, thus making it easier for user to click or press on them.

If it is on a PC, then a square design is preferred as it is better optimized for a mouse click.  The rectangle shape makes it easier for a user to guide the mouse over the right click-able area, relative to a circular design.

 

#Criteria 2: For information or asking for input

If you intend the image to just convey information like a person’s face, then a circular design is not a bad choice as it focuses the eyes on the facial features. However, if you want users to fill in information after viewing the image, a square design tends to lead to more actions due to the use of edges to ‘point’ users to the right area.

 

#Criteria 3: Does it fit well with the rest of the website

Circular design might look more trendy but does it fit well with the rest of the design on your website? Do remember that profile pictures are just one element of a design. It is more important to ensure consistency among all the design elements rather than chasing the latest fad or trend.

 

 

#Criteria 4: Does it help users to differentiate the content from the profile

One good use of a circular design is to help users to differentiate between the content and profile.  Using distinct shapes can help a website differentiate its different parts. For example, square design can be used for the content while a circular design can be used for only profile information.

 

#Criteria 5: Can you combine both for a different design

Rather than deciding to go with square or circle, why not experiment with combining both designs for a complete distinct look. You never know what you will get if you don’t try a little experiment here and there. For example, you can design a rectangular shape with some curves to emulate both types of designs.