User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Why is it that every social application has the user's avatar fully or partially overlapping the user's banner/cover image? The same thing happens with pages also.

enter image description here

share|improve this question
16  
Because they have designed it this way. – Kristiyan Lukanov Feb 8 at 8:55
1  
I wish Facebook would do face detection on the banner/background image, and strongly discourage users from using a photo with faces and encourage one with scenery, patterns, art, etc. – Slipp D. Thompson Feb 8 at 20:50
5  
Because Facebook did it, and everyone else followed? – HorusKol Feb 9 at 0:58
2  
You could dress it up in more verbiage, but @HorusKol pretty much has the whole answer right there. – Daniel Beck Feb 9 at 14:18
    
@Daniel I disagree. Facebook is no innovator here. Publishers have been using grid breaking for decades to highlight important authors, photos and information. Video games such as Baldurs Gate and others with inventory/equipment/profile screens used grid breaking avatars layouts years before Facebook was even founded. Friendster, MySpace and other social networks founded around the same time or before FB also used grid breaking...this is no Facebook innovation. – tohster Feb 10 at 16:50

It's intentional, grid-breaking design

Grid-breaking is a common design technique used to draw attention to important objects on a page. By intentionally misaligning visual content to the page's natural grid lines, a designer can draw attention to a key piece of content on a page because the user's eye will naturally be drawn to that content.

The following example uses grid-breaking shape (round), placement (right margin overlap), rotation (tilted text), depth (drop shadow) and bold color (red) to draw a user's eye to the red circle on the page:

Example of grid breaking design

Why use grid-breaking on a profile page?

Because profile pages contain a lot of information (name, birthday, avatar, about, friends, photos, albums, feed, etc), so the amount of information can feel overwhelming to a user. By using grid-breaking to draw a user's eye first to the person's profile picture, the designer:

  • Creates a decent entry point into the page by helping the user's eye "land" on the profile photo, then wander into the rest of the page. Notice how the photo is placed top the top left, which is where most users will start visually processing a page.
  • Providing a friendly, humanized psychological anchor for the rest of the page. By drawing the user's attention to the profile photo first, the designer sets an effective, personal context for the rest of the page: the photo reminds you that you are learning about a person, which tends to promote interest, retention, stickiness, etc.
share|improve this answer
1  
but is this UX or design? – icc97 Feb 9 at 14:11
8  
It's both! These approaches are used to design the user experience. – tohster Feb 9 at 14:16
2  
This IS the answer +1. – JonH Feb 9 at 14:49
2  
@icc97: At it's core, design is UX. The traditional role of a designer is to do UX, not art. After the DTP revolution there was a shift in design from UX to glitz because clients now think that "drawing stuff" on the PC is easy and they want "pretty" instead of "works". But if you ask most professional designers about the designers they respect you'll find that a lot of what's considered great design is more about UX than "pretty". The Art-deco, Bauhaus and Constructivist artists were the original UX experts. – slebetman Feb 10 at 3:43
1  
Great answer. I think your second bullet point is the key in the Facebook example. The page has a very strong division of units, but the profile picture breaks that by overlapping others, and it is likely the most important part of the page. Also +10 for using Gene's as an example. – Nathan K Feb 10 at 14:40

The overlapping is there to show the hierarchy between the two photos. The profile image is the more important one and the cover is an additional info that you can show to the user.

Think of an example where those 2 photos were ordered differently, for example the cover photo first and beneath it the profile image.

Your eyes will look first at the bigger image and then at the smaller one that is beneath.

share|improve this answer
1  
Then why is the important one smaller? – Pierre Arlaud Feb 8 at 10:41
19  
Because the banner is a large "background" filler decoration. The profile picture is a more focused and less abstract representation of the user, and is used on multiple pages to represent the user, not just the profile itself. – Tom.Bowen89 Feb 8 at 10:47
6  
@PierreArlaud The profile you've chosen is an unusual example - most people who are not Joan Rivers will not use a photo featuring their own face prominently as a banner image, so there won't larger and smaller images of their own face. Also, profile avatars are generally seen at small size, next to posts and comments - the smaller use of it on the profile page echoes that. – recognizer Feb 8 at 16:50
    
@recognizer What do you mean? I didn't choose any picture. – Pierre Arlaud Feb 8 at 17:11
1  
"The overlapping is there to show the hierarchy between the two photos" really feels like a post fact rationalization to me: there's no hierarchical relationship between the images (one is decorative for the user's profile page, the other is for identification of the user throughout the site), and overlapping doesn't typically imply hierarchy. – Daniel Beck Feb 9 at 14:16

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.