The Faces, the *FACES*... it's *ALL* about the Motherf**king FACES! (+ Avatars, Icons, & Big Butts.)

DISCLAIMER: i've never really had any professional training in user interface design... and i'm sure that's obvious from my blog fonts & colors. However, i started designing & developing applications over 25 years ago, back in high-school when i developed some payroll reports one summer for my mom's company.  Since 1991 or so, around when Object Builder and Visual Basic came out, most apps i've built or worked with have been in windows-based or browser-based graphical UI environments. And for the last 5-8 years or so, most startups & applications i've been involved and investing in are based on social networks & platforms. So whether or not i have any fucking clue what i'm doing, let's just say i've seen my fair share of designing visual user interfaces & interacting with social platforms.

I Like Big Butt(ons)

If there's one thing i've learned from all that geeking around, it's that UI typically works best when it's butt-simple.  As a famous PayPal colleague of mine once stated succinctly: 

"Users are Stupid... give them something to click on."

Wise words.  You'll do well not to forget them, Young Jedi.

However it's not always enough to simply give people underlined text links to click on... rather, it's important to have strong associated visual cues that encourage users to take action.  Sometimes that can be as simple as just creating a beveled, slightly rounded, 3D-looking button with a color offset and some text that identifies a Call-To-Action (CTA).  Many people have become trained thru years of working with operating systems to click on things that look like buttons.  particularly BIG buttons.  particularly BIG buttons with pictures or icons.  they are almost irresistible.  Go on.  Click it!  you know you want to!

But -- and i do mean butt -- even big buttons with big graphics aren't always going to capture user attention. What has gradually happened over the past 10 years is that online consumer interfaces have started to zero in on basic human behaviors, recognition systems, and patterns. many of those offline interactions start with the simplest of human interactions -- looking at someone's face.

In fact, you could argue that much of the online experience these days is less about reading text, and a lot more about looking at faces, icons, and other visual representations of people.

"The FACES, You Idiot... It's ALL About The F**KING FACES!"

About 2-3 weeks ago, i was meeting with a startup about some new widget workflow they were creating.  The company shall remain nameless, but they were trying to develop a new UI around people exploring other people.  However, the interface was still mostly comprised of text explanations and directives.  Although it was being built as a social platform, they were missing the social part.  

And of course this cuts right to the heart of the matter.  

As the startup founder and i were discussing alternatives, i happened to check my inbox (because i think it had been at least 2-3 minutes since my last fix), and i noticed a new LinkedIn Network Updates email -- who got a new job, who made a new connection, etc.  And i thought it was curious that there weren't any visual images in the email.

Now believe me, i am a HUGE FAN of LinkedIn, and i'm friends of a lot of folks over there.  And they are making a LOT of money, and are very likely to be an IPO candidate way before Facebook.  But i *do* think they have done some things fundamentally wrong over the years, and possibly the prime evidence of that is their very late adoption of user photos almost 4 years after launching and the overall sparse use of faces within a social networking platform.  LinkedIn is about *professional* social networking, but i don't think being professional means you have to be boring or not engaged.  in any case, LinkedIn is doing just fine but i'd strongly suggest they are missing out by not making their platform more visual, more social, more viral, more engaged, and more group-oriented.  but perhaps that's a longer discussion for another post.  i'm still hoping they get there soon.

there was at least one other example of FAIL that i can't remember that pushed me over the edge, and i finally had to scream and just tweet out:

for many folks, the state of the art in consumer internet development is to design big beautiful fonts and flash animations and green-blue web 2.0 colors.  and for Google (at least until recently with Wave), the most advanced design elements they seem to come up with were still almostly exclusively text-driven.  

IMHO, the two popular companies that have actually done the best job with user interface design optimization are YouTube and Facebook.  and of those two, the one that has CLEARLY done the best job around UI for social platforms has been Facebook. 

YouTube iterated furiously over the years to optimize UI elements & buttons, and while not always a success from a monetization standpoint, sheer usage & adoption has been nothing short of astonishing.  Obviously they were doing something right.  there was an incredible amount of iterative development, and an emphasis on UI element overlays on videos, and embeds on other sites, all of which led to massive distribution, engagement, retention, etc.  the thing i thought was always smart about YouTube was that the interface was largely about browse-selecting one image from among several options. it was mostly a picture-driven UI.  and guess what?  many of those pictures are of people's faces.

Facebook -- hey, wonder whether *they* thought much about Faces? -- was started almost exclusively as a collection game around visual images.  as it grew & morphed, the profile pages & pictures remained hugely important, however the subsequent innovations around NewsFeed -- again, extremely visual, lots of faces -- and also the overall Facebook Platform, and associated user invitation dialogs, all created interesting & engaging ways for users to click around, into, and on top of interesting visual data (usually faces).  they continue to find interesting ways to personalize the user experience, and i don't see them slowing down at all.

that said, i do think there hasn't been much innovation around the user invitation dialogs, and that this is a place where i think a lot of interesting work could be done to a) select LESS # of people, b) who i CARE about more, c) make the faces BIGGER, and d) constrained by the CONTEXT of the current conversation keywords.  altho the dialog below is about faces, it's still too many for me.

interestingly, Google Wave takes a MUCH different approach and utilizes a very graphic / picture-rich environment, and a relatively complex UI.  while i haven't played with it yet, it does look pretty cool. still, i wonder if this isn't about 3 years late in the making... Google seems to be bragging about how the product has been in the making since 2007 or even 2004, but that seems like a bit of FAIL there... i mean, that's either an engineering fail for taking several years to get a product out the door (which still isn't live yet), or a management fail for not pushing them to get it done sooner.  anyway, i guess i shouldn't shit on their innovation even if it's a little johnny-come-lately, but i would have to say it seems more like a reaction to the recent News feed & activity stream innovation that's been happening at Facebook & Twitter than original thinking.  but maybe i'm being too harsh.  what i will say is that gmail / gTalk already has some useful features based on simply associating faces with email & IM conversations.  however, i'll also say that when i used to work with Jawed Karim at PayPal, before he went off to create YouTube he was showing me a visual IM client way back in 2004.  perhaps the interesting & minimalist elements of Wave are derived from this very basic association... and if so then i'll be eager to see what they've put together when it ships.  in any case, it's clear that Wave is emphasizing faces in a way that has never before been done at Google.

Twitter is another company that i might suggest has done some basic things right with face representations, altho the UI is rather spartan (unless you're using a Twitter client of one sort or other).  and before Twitter, i thought MyBlogLog had done some interesting things with faces as well.

As i almost always suggest, the reference presentation for many of these ideas is something called "Putting the Fun in Functional" by Amy Jo Kim, Shufflebrain.  AJ does a great job of explaining why the basic human psychology around collection behavior are well-suited for "collecting faces", and how this makes it easier for people to take the actions you want them to.

Fun in Functional 2009

View more OpenOffice presentations from amyjokim.

Brad Feld (& others) recently picked up my tweet and wrote his own piece on "all about the faces", however i think in that post he was discussing a somewhat different subject around whether faces or avatar icons work better in certain social environments.  i think he also comes to the conclusion that faces are important, altho i also think warm, fuzzy, familiar avatar icons can also function in positive, user-engaging ways just like faces can.

anyway, this post has now gone on quite long enough, but the primary point i was trying to make is that many consumer internet applications can improve their UI & conversion by simply:

1) Keeping the overall UI simple

2) Use big, high-contrast 3D buttons with simple call-to-action text 

3) Use large graphics & icons, and in particular use hi-quality zoomed-in faces

and of course, all of this should be done with rapid, iterative, a/b testing to measure results.

alright this really hasn't hit all the points i wanted to cover yet, but i'll stop here.

at some point in the future i'd like to talk more about how to improve invitation UI dialogs by filtering the available people & friends to focus on smaller subsets with larger facial representations.  in other words, less people, who i care more about, with bigger pictures. 

or then again, maybe just a big-ass picture of someone's butt would work just as well.

Sir Mix Alot- Baby Got Back

Comments

[giulio]

IMHO, currently, frienfeed has the most clear UI out there

[dave mcclure]

>>find your use of oversized text and multiple font colors offensive
>>haven't we moved past big fonts and crazy colors already?

um, you must be new around here.

standard disclaimer for kidnapper-ransom-note fonts, etc. it's part of the brand... love it or leave it.

yeah, i know, i'm infantile... just another day in the life.

>>You wrote a great article, I just didn't notice it because of the
>>*big ass* words you wrote it with.

... thanks, i resemble that remark ;)

anyway, hoped you like the content regardless.

[Mike]

I was completely joking about the colors and fonts btw.

[Laura Norvig]

I think this post is fine and yeah, the big butt is gratuitous but whatever. I kind of agree with Mike about the unnecessary colored large fonts.

Faces attract us as humans, but once you are already hooked on a service, they become an annoyance, which is why I installed a greasemonkey script to remove the faces from Friendfeed. So it's not all black and white. Or butts and faces, as the case may be.

[Mike]

I find your use of oversized text and multiple font colors offensive. Do you *really* need to use different sizes? And red? Really? You couldn't have made your point without colors? C'mon Dave - it's 2009, haven't we moved past big fonts and crazy colors already? You wrote a great article, I just didn't notice it because of the big ass words you wrote it with.

[dave mcclure]

thanks for the comments Joel, harsh or not.

apologies if my arguments were dull, obvious, or otherwise incorrect.

while it may be the case that simplicity, use of faces/pictures & high-contrast buttons, etc are straightforward elements of good UI design, they certainly aren't widely utilized across the web. as i noted with LinkedIn, much of Google, and other sites there is little evidence many designers are paying attention to social & visual constructs.

while the article emphasis was about Faces, the point about YouTube wasn't. as noted, much of their success (i believe) came from using embed code, as well as a (mostly) picture-driven browse-able UI for videos that other sites certainly didn't appear to emulate. also since i knew the founders from working at PayPal, i had the opportunity to follow early site development rather closely. contrary to most other sites they rapidly iterated on UI elements such as player control overlays on top of videos, suggested next videos upon end of view, and other now widely-copied ideas in both video & non-video sites (ex: i'm an advisor/investor for SlideShare, and they also followed much of the ideas from YouTube).

in any case, i wasn't trying to defend my intelligence or my UI expertise -- as disclaimed at the very beginning of the piece, i have none (of either). i was simply expressing myself based on several interactions with a few startups both large and small who didn't seem to "get it". but perhaps based on your remarks, maybe the person who didn't "get it" was me.

regardless, i do think faces matter quite a bit. avatars and icons similarly. other pictures & buttons less so, but somewhat. whether or not these observations are correct or simplistic, i felt the need to share. hopefully something was entertaining, if not educational.

thanks for the drive-by... the bullets were only a minor distress.

[Joel Marsh]

I agree about the negative kick-off... if I hadn't been sent to this article by a friend I would have stopped before reading the article because I almost lost faith in you (you seemed to have no faith in yourself).

You write well, and you're quite funny, and I enjoyed reading this article.

That being said, I think your points in this article are blunt and obvious, as opposed to sharp and insightful. Your faces argument is weak, at best.

A clear and simple UI over a complicated, noisy one? Duh. Big, heavily graphic, obvious buttons over small, overlookable text links? Duh. Faces responsible for the success of You Tube? Uh... what?

Simplicity and easily usable buttons are not only reducing an interface to the most basic and elementary UI 101 pieces, but they also ignore a host of other aspects that contribute to proper flow and understandability. Contrast, for example, has been shown to effect reading comprehension as much as 66% at the extreme. A big simple button doesn't work because it is irresistible, it works because you don't have to "find" it when you're ready to take action. Simplicity requires no explanation.

YouTube succeeded because it caters to self-interest, access to otherwise unaccessible media, and a uni-lateral product focus. The interface has had little to do with it, I am sorry to say. Even in your screen capture there are only four or five faces and the other featured videos are random objects and places. And if you want to stretch the argument to say that "people" in images make for a successful site, then half the sites on the internet should be raking in the dough. The UI should be visual versus text-based. Inclusion of faces is probably statistically insignificant (although I would love to be proven wrong if you have sources, please!)

Faces might contribute to the visibility of features like Facebook's auto-populated comment box with your profile picture in it, but only because it's you, not because it's a face.

Faces may increase recognizability (part of our brain is dedicated to recognizing faces) and perhaps relatability (if the faces are ones you relate to) but let's not credit faces with the world, here.

Simple UI, yes. Visual UI, yes. Faces in your UI, whatever.

[ColleenA]

You can add my voice to the others who find the photo offensive and inappropriate. It seemed like a cheap and easy way to get attention. Your content was good; it didn't need the negative kickoff.

[AV Flox]

I'm here because a lot of people are angry about the use of the image, so in that sense, good job. Recent reports in advertising suggest sex as a selling tool is getting old, but controversy will get you read.

Obscenity and offense are in the eye of the beholder. As you can see, readers disagree on whether they find the image offensive.

My point is about whether the image conveys your point. Simply, there is a difference between faces and asses. A face, in our digital world, is a visual representation of self. An ass, as depicted in this photo, is the objectification of a person as a sexual object. While perhaps suitable to the discussion of buttons (though frankly the colors involved in the image do call for the "CLICK ME" text whereas a good button wouldn't require them), it's inclusion in a conversation about the importance of faces creates a confusing message.

Here is, perhaps, a more illustrative point about the importance of faces, which also touches on the sexual response in which you appear so interested, from the book How Sex Works by Dr. Sharon Moalem:

In 2007, Kim Wallen, an Emory professor studying arousal times teamed up with Heather Rupp, a fellow at the Kinsey Institute for Research in Sex, Gender and Reproduction to follow up on the arousal-time studies to determine what elements of pornographic images their subjects focused on, and for how long.

They discovered that men are more likely to look at faces first than they are genitals. The brain activity centered on the amygdala, which is a part of the brain involved in processing emotion. Men, who have widely believed to be more visual, may be so because they are more responsive emotionally to visual cues. And these cues, are faces, first and foremost.

Having said this, you make many valid points. I'm new to your blog, but I'm adding you to my reader and giving you a follow on Twitter.

[Pokin Yeung]

I actually dug the posterior shot. It got my attention. And that’s big step number one, right? ;)

Now to do an about face to talk about the other end :p -- I definitely agree that faces are important – actually critical to a social networking site. We’re pretty much trained to zero in on faces, and make evaluations on them fast (we can pick up happy/unhappy emotions on a face in less than 120 milliseconds), so it makes sense to use images that get our attention. I’d seen a study done using Facebook which shows that people tend to come to relatively consistent opinions of other people based on their faces: http://gumption.typepad.com/blog/2008/04/do-youjustgetme.html The study also said people's self impressions were pretty consistent with the population's

If people can recognize faces and interpret emotions quickly, a site with lots of faces allows visitors to rapidly determine (before they get bored) whether they identify with the site members. And those that see a “match” will then have a higher willingness to interact. Therefore, including pictures on a social network are pretty important to foster these connections.

A few things to be careful of with pictures:
Any pic < > good pic
Pic with faces >>> pics of random stuff > no pics
Your site will likely be evaluated on the types of pics visible on your site

So I mean if you’re a site advertising warm fuzzy kittens, there might be a disconnect if all the member pics look like they’re lifted from San Quentin’s social group. And if I found myself hosting a site with this kind of visual disconnect, I might switch to avatars. :p On that note, images are great for visual variety, but when I have two friends named Alex and one’s a duck and the other’s a mug, the only thing I get is that I’m not looking at the same Alex. Ideally, I would have preferred if they use real photos.

Bottom line: I agree use of pics=good, but use pics of people (aka youself)= better. And pick the right pic to convey what you want people to see.

As a site, if you support pics, use the right size and encourage the use of real pics. It should be large enough so that people can infer what you are like based on your picture. I’d say on our site right now they’re a bit too tiny. And good point. If you can combine the right faces with a CTA or button, all the better. : )

LinkedIn however for me is a tricky one. As a primarily business social network, do I really want to be judged professionally based on what I look like? In my case, I put a picture up because I’m tired of being called Mr. Pokin Yeung so I try my best to make it clear I’m not a dude. And apparently in Europe it’s customary to attach pics to resumes so I guess people would be more open to a more pic-prominent environment there. :)

Love the post! I’m now trying to use it to get our profile pic sizes increased. :)

p.s. I’m also in favour of a better invite system on Facebook (as evidenced by example screenshot :p) It’d be great to proactively select instead of exclude, or even change the order of pictures around. Imagine if you could screen by interest or strongest social ties. :) We just crunched the numbers on TravelBrain, and to illustrate the current imbalance of users, about 12% of our recent user base has a first name that starts with a letter A. And as a benchmark, only 8% of the US population has an A name. :)

[xian]

@pahlka.dot, I believe there was also a conscious choice not to use faces in LinkedIn early on to avoid the dating use cases that most early social networks intentionally or unintentionally supported.

[pahlka dot]

There is actually a good reason why LinkedIn didn't do photos until recently. It has to do with its utility to hiring managers and their legal need to screen candidates without being aware of some of the sensitive characteristics (age, sex, ethnicity etc) that can trigger discrimination charges...I'm not an expert here but its something like that. Someone with more actual knowledge should chime in here.

An yeah, I find the butt photo kind of offensive. I mean it's not just a butt. You can see way too much of her, parts that only her family should see, you know?

[Francine Hardaway]

As a foster mom, I heard more about pimps and hos than any geek ever will, and as an older woman in a male workplace I don't get offended. I just thought it wasn't a very good way to make your point, and I know it did offend others.

The apology is cool. Now, how about that Bing?

[dave mcclure]

well, perhaps it's over the line, but here was my point:

the psychological response to faces -- and yes, butts & other sexual images -- is hard-wired into our heads. perhaps moreso for men than women, but regardless we have no choice BUT (that word again) to pay attention and respond.

so while i recognize the image may have been distasteful to you, it's precisely BECAUSE those type of images elicit strong response that i was using it to make my point.

now that said -- am i suggesting you place photos of butts or naked women in your application in order to increase conversion rates? probably not.

however, i AM saying there is a defined psychological response to certain types of images (faces, genitalia, etc) that user interface designers should be aware of.

and i most definitely AM saying that *FACES* (but probably not BUTTS) should be part of the UI consideration for many if not most consumer internet services.

thus, i could censor / edit myself by NOT using a photo of a woman's rear-end, but to some extent it would de-emphasize the exact point which is was trying to make.

i guess i could have chosen a more explicit photo (naked), or less (just a smiling face), but to be honest that's not really my modus operandi.

in any case, i hope you do understand where i was coming from... and if i offend, it's certainly from idiocy/stubbornees rather than lack of awareness or empowerment.

i am a strong a support of women in tech as you can imagine, and have invested in women CEO founders (Rashmi). my mother was a single parent, entrepreneur, and extremely capable woman that provided the singular example in my life of confidence & independence.

that said, i'm still an ignorant hick and occasionally i say/do stupid things. and for that, i apologize... and will likely be doing so most of my life.

[Allyson Kapin]

Here's the thing Dave. The images you chose to associate with usability issues have nothing to do with women's bodies so why use this tactic (aside from the obvious sex sells)? Do you feel your readers are not smart enough to get your points without having to show women in crude positions? Dave this is a cheap shot and degrades women for very obvious reasons. Look at the position she is in.

While you maybe supportive of women in tech - helping to fund start ups, offering advice, etc, the use of women's behinds to frame this article is not supportive of women at all!

[Rashmi]

This post is a very Dave tactic. Trying to shock to get attention for a (great) point he is making. The picture or video did not offend me, but I respect the women who did find it offensive.

In my experience, Dave is probably one of the most women-friendly investors out there. Not that he makes it easier for women, but he treats them same way as male entrepreneurs (which is all one needs).

My second observation, there are men who follow the rules with regards to polite conversation (which Dave often does not), but are nowhere near as open to women entrepreneurs. They talk the talk, but don't walk the walk.

Sometimes Dave does not talk the talk, but he definitely does walk the walk.

I will take someone who is really open to women in tech and women entrepreneurs anyday over someone who just talks the talk.

[dave mcclure]

@Allyson: pretty sure the woman is not topless, but is fully clothed. however, i take it that whether she's topless or not isn't your main point. understood.

@Francine: appreciate the feedback. i'm thinking about it based on a few negative opinions i've received, and have solicited a few other opinions.

briefly: the image was intentionally used for humor / impact, and i'm sure as with most of my posts almost anything i write has parts which will offend a few people. not sure any of my previous posts about Pimps & Hos or other topics are any less controversial / sacrificing sacred cows. but then again, maybe it was borderline.

Q: wonder whether you folks think the Sir Mixalot video is more/less so than the image i used, and whether all such media is over the line? personally i thought the image was rather tame compared to the video, but no one complained about use of the video.

in any case, i'm asking for second opinions from a few other folks. will followup.

[Francine Hardaway]

First: great seeing and hearing you yesterday. You are one smart dude.

Second: Great post. I have been on this geek-to-human translation rant myself for years. Faces humanize technology for the mainstream we are all trying to reach.

Third: I hope there's (still) a difference between my butt and my face, and I think your butt image is both a stretch at a pun and likely to offend where you mean to educate.

No excuses that you aren't a designer. We already knew that:-)

[Allyson Kapin]

Dave, while I agree with many of your points I don't understand why you chose to frame some of your post around women's behinds and use a photo of a topless woman sticking her behind in front of a camera. You are pretty respected in this field, and it's extremely disappointing to see you stoop to this level. Is there a particular reason why you think showing images that objectify women was appropriate for this article? Do you think people would not have understood your point about big buttons without talking about women's butts?

[Raanan Bar-Cohen]

Great piece Dave - totally agree.

From my days on the publishing side we always used headshots as anchors & touts for people to click on to read a story -- worked very well. And today with our Gravatar service we are seeing that used in many places, not just on comments.

p.s. why do the comments on this blog not have any faces/avatars ? I miss seeing my Gravatar :)

[Yokum]

Great thoughts. After the twitter buildup, I was expecting to see someone like @bfeld get flamed ... so I'm somewhat disappointed that there wasn't any gratuitous flaming. :)

[Mike Grishaver]

You had me at "I like big buttons". Great post.

[Jared Goralnick]

Thanks, Dave! Entertaining and spot on. We've been trying to make our buttons bigger and process less cluttered. Though our app isn't really social, there have got to be ways to make it more human, too. The slideshow was great, too.

Enjoy yourself in Asia next week!

[John OBrien]

dave... like the post - sex sells - even in BUTTon design I see.

Your post has me thinking about how best to get people to move forward to "installing FB apps" from the main "intro" page... big buttons, pics, etc... as I find conversion from INTRO PAGE->INSTALLED APP is not as high as I would like to see. Wheels turning...

... also -> it was nice to wake up to some sir mix-a-lot this fine sunday morning...

[Shanti Bergel]

Yep, we humans are hard-wired to zero in fast on faces as that's where all the social tells can be found. Some of these cues tie directly to self-preservation. A snarl is the express lane to fight or flight versus a smile being the equivalent of hanging out the welcome sign.

With regard to applying this to UI design, check out this great post from a Flash game developer on leveraging this dynamic to get more clicks on a Flash game thumbnail:

http://blog.funfacegames.com/2008/02/picture-is-worth-thousand-plays.html

[David Harper]

love the "slap everyone on the side of the head" title of this post. f**king spot on.

re: "...the basic human psychology around collection behavior are well-suited for "collecting faces", and how this makes it easier for people to take the actions you want them to."

always liked what Bolt.com did years ago encouraging good behaviour by rewarding kids with badges for using features/services. something foursquare is doing now with social checkins for adults.

...and i can't even tell you how much i've spent at habbo so my kid can collect (buy) limited edition furni.

[DragonI]

Here is the video of Putting the Fun in Functional: Applying Game Mechanics to Functional Software, http://www.youtube.com/watch?v=ihUt-163gZI

[barak kassar]

Cool... and good points. I like what Mixx does with other's faces to encourage profile filling-out. See Hey That's Not Me!

[barak]

Cool... and good points. I like what Mixx does with other's faces to encourage profile filling-out. See "Hey That's Not Me!" http://blogs.rassak.com/everythingcommunicates/2009/04/20/hey-thats-not-me/