Social networks have grown into the norm in today’s sophisticated Internet. Modern web pages have become very personalized over the past decade including a number of user interface features. One such example is the user profile picture often accompanied by each username.
Web designers don’t often realize how important this profile photo can be. It distinguishes a blend of personality between each member. And this feature also has quite a few other handy applications to the user experience ultimately offering a clearly recognizable icon. Below I’ll go into some examples of how user photos can improve your website’s performance.
Offer a Default Option
When users first sign up for your website it’s best practices to generate some type of generic avatar. Without this your profiles will look strange having some members with custom photos while others are blank. Most CMS systems including Joomla!, WordPress, Pligg, and vBulletin all offer a standard user picture by default.
If you take some time searching through Google you will likely find a few other excellent examples. This default photo gives incentive for new members to customize their profile details. This holds especially true with members who have profiles on a number of other networks – generally I like to keep all my photos consistent between sites.
Display Photos Wherever Reasonable
Some website layouts are a bit cramped for space and just can’t facilitate room for user pictures. But I would advise almost always including a user’s picture on central pages. It can even be argued to match the user’s photo with every instance of their username.
This reinforces the idea that each profile link or page comment is connected to a real person. The glyphs will become familiar over time and you can easily distinguish between links to user pages vs article pages.
There are plenty of areas where you may wish to omit the photo, or resize it altogether. Such an example may include a “recently logged in” widget in your sidebar or footer area. In order to display the last 15-25 active users you could setup a small block of avatars in 3-4 rows. But to fit these in place you may need to resize the images a bit.
Apply Unique Sizes
Of course the dimensions and overall size of your default avatar is crucial to the design. Larger photos will have a much deeper impact on visitors as it will certainly catch their attention quickly. On a similar note there will likely be pages that you want to include smaller photos.
This is why it’s always best to store at least 2-3 different sizes of avatars. Start with your largest (say 150×150) and scale down based on your needs. Plan out the user interface ahead of time so you can fit in reasonable dimensions. Just a few alternate areas to consider are within page comments, shared links, and on other friends’ profiles/following list.
There are plenty of free scripts and tutorials available which can help you resize avatars automatically. Why spend time rewriting programs from scratch when there are templates you can work off? These scripts will also save room on your server without needing to save 2 or 3 local copies of a similar image.
Pictures in Discussion Threads
Over time the most active members on your website will become more recognized. Along with their usernames, including a personal photograph can become extremely memorable. The social news website Reddit doesn’t use any photos and yet plenty of members are recognized by username alone.
But understand this is certainly not the majority! Most blogs, discussion boards, web forums, social networks, and IM apps all utilize some type of user photo for easy identification. Many users eventually become a staple to the website community between repetitive comments, massive followers, and other social activities.
On some websites you’ll even find signatures in discussion threads. These are small areas underneath the post content which is specific to each user. You can customize your signature with a graphic, website links, text, really anything you want. But for more standard blog platforms this is a bit too “over the top” for regular discussions. It’s still interesting to compare the different styles and how they play well with profile photos.
Consider your own Brand
It’s great to get behind this issue from a realistic point of view. Ponder for a moment if you were to sign up for such a similar social network, how would you incorporate your own avatar brand? The answer may differ between networks (ex: Facebook vs Twitter) but ultimately your goal is the same.
You want to be recognized quickly and easily by all your visitors. It’s just as important to the average user that their profile is recognized as quickly as a company or brand. This is why I recommend using a generally larger photo size – maybe square 200px or 250px – to represent each person. Position it in alignment with the user’s name, location, or other important metadata.
A good example of this layout is from Digg’s old v3 profile design. Avatar photos were generally aligned to the right with more detailed user information cascading along the left side.
OAuth Connections
If you feel that custom functionality for user photos is too much to implement you may consider using Open Authentication. With this open API protocol it’s easier than ever to connect into a user’s 3rd party account and pull their data remotely. This includes usernames but more importantly also includes profile photos!
The Twitter Developer Center is an excellent example of heavy documentation for OAuth calls. You will need to understand a backend language such as PHP, Ruby, Python, or something similar. It is possible to access user icons through JSON/JavaScript, but it’s certainly not the most recommended method.
Also here’s another article from Google support documenting a basic OAuth call. You can already see how this method would save you time as a developer. But it is also very convenient for your members from a UX perspective. Between Twitter and Facebook it’s likely that most of your new signups will have some option for importing a user picture. This saves your new members the hassle of re-uploading another picture.
Conclusion
These ideas are not exactly new to the web, although they have been adapting steadily over the past few years. OAuth is just one technology which has gotten the ball rolling. It is clear we’re moving towards a cloud-based interconnected transparent system of communication and these protocols are merely a stepping stone in the process.
Overall it is your decision on how to approach personal user data. If you truly feel your website wouldn’t benefit from user photos then you’re likely not missing out on much. But understand the connections which are formed through these recognizable pictures and how they may provide a crucial impact in your community.
