40

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

Improve this question
6
  • 17
    Because they have designed it this way.
    – Kristiyan Lukanov
    Feb 8, 2016 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, 2016 at 20:50
  • 5
    Because Facebook did it, and everyone else followed?
    – HorusKol
    Feb 9, 2016 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, 2016 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, 2016 at 16:50

2 Answers 2

Reset to default
67

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.
Improve this answer
5
  • 1
    but is this UX or design?
    – icc97
    Feb 9, 2016 at 14:11
  • 8
    It's both! These approaches are used to design the user experience.
    – tohster
    Feb 9, 2016 at 14:16
  • 2
    This IS the answer +1.
    – JonH
    Feb 9, 2016 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, 2016 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, 2016 at 14:40
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.

Improve this answer
6
  • 1
    Then why is the important one smaller?
    – Pierre Arlaud
    Feb 8, 2016 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 Bowen
    Feb 8, 2016 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, 2016 at 16:50
  • @recognizer What do you mean? I didn't choose any picture.
    – Pierre Arlaud
    Feb 8, 2016 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, 2016 at 14:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.