User interface experiment result: Social media buttons

[John Karahalis]

Earlier this week, we wrapped up an experiment into social media button
usage. Given three possible button placements and three possible button
styles [1], which combination would be most effective at garnering clicks?

After testing the nine variations with one million users, the results are
in. Labeled buttons below the title got the most clicks by far.

There are a few different possible explanations for the strong performance
of labeled buttons (they were bigger, they happened to have been
color-coded, etc.) but it's especially interesting to me that their
performance corroborates the not-uncommon advice to prefer labels (or
icon-labels) over simple icons in user interfaces.[2][3][4] I recommend
that we tend toward using buttons with labels over icon-only buttons in
future designs. Of course nothing beats testing.

Detailed results:
http://app.optimizely.com/l/9TIzgd?token=eadb57154a27e9107ea6#view=2

[1]
https://wiki.mozilla.org/images/6/6d/MDN_experiment-_Possible_social_media_button_configuratons.png
[2] http://goodui.org/#47
[3] http://www.nngroup.com/articles/icon-usability/
[4] http://uxmyths.com/post/715009009/myth-icons-enhance-usability

--
John Karahalis
Mozilla
openjck.com

[Sebastian Zartner]

Some discussion related to the social media buttons is happening in https://groups.google.com/d/topic/mozilla.dev.mdn/_9S1xlwtMMk/discussion.

Sebastian