Posted on by & filed under Fire-and-Forget.

Quick Win

If you want the easiest to click buttons (lowest difficulty index), place them fixed, on the center of left edge of the browser window: position: fixed; (this CSS rule will make the button stay where you set it to be, even after scrolling, regardless of the content), and set left: 0px; top: 50%;. If you want a convenient place, that is non-invasive, and still easy to use, put the buttons right after the article/blog post, before the comments. In both cases make sure the buttons are large enough to be easily clickable, even on touch devices, but not too large so they become distracting or annoying. 32×32px is the minimum I would use if targeting screens with resolution no larger than 1920×1200px.

Social Buttons: Where to place them on a blog?

I encourage the readers of Kaizen-UX to challenge me with user experience related questions. I got a great one from @IrisGrossman. Thanks a lot! So here is the question: “Well I have always been curious what kind of social buttons are more effective and where it’s best to place them on a blog, cause there are sooo many types out there, some on the left, some at the end of the article, some fixed while scrolling etc.” To answer this seemingly easy question, first we need to introduce Fitts’s Law.

Fitts’s Law

The simplified version of this crucial UX law applied to social buttons is: Users can hit a social button (target) more quickly if the social button is bigger or closer to the user’s mouse cursor. I would like to update this law with adding “actual hand position” to it, because nowadays touch controlled devices are commonplace, contrary to the time of the laws writing. The law still works, even in case of those devices.
Fitt's Law explained

The formula

If you don’t wish to read the dry theory and explanation of the (quite obvious) law, you are welcome to jump to the next heading. For those, who read forward, this UX law is named after Paul Fitts, a psychologist at Ohio State University (and later at the University of Michigan) –you guessed it– its discoverer.
Fitt's Law – Shannon formulation
I have replaced the symbols in the above formulations with their description, because they symbol usage is not consistent (the distance from the starting point to the center of the target is A in some bibliographical sources, D in others for instance), but more importantly this way the formula is easier to read (this is an UX blog after all).

If you slept through higher math classes, the log2 can be intimidating. In our case it means, that very small changes in the button size can result in huge changes in difficulty if the button is very small. On the other hand if our button is large, small changes have little effect. Let’s say that we have a Facebook Like button 500px away from the cursor horizontally. If the given button is 500px wide (don’t try this at home), making it 550px will not really make a difference (1 vs. 0.93). On the other hand, if the button was 50px wide, adding 10% more size (making it 55px wide) will cause a more noticeable difference (3.45 vs. 3.33). Basically adding the same 10% plus width, gives a difference of 0.057 in index of difficulty. (The calculations in UX design are usually made using the Shannon formulation, to make sure that the index of difficulty is not negative.)

On the edge

There is one aspect of Fitts’s law that works in case of desktop software, but it is trickier to use for web applications. That aspect being the theory of infinite size buttons at the edges (especially at the corners) of the screen. While using a mouse, the pointer (cursor) remains at the screen edge regardless of how much the mouse is moved after touching the edge, so they are considered as having infinite width/size. While this is used to great effect in operating system, like Microsoft Windows (start menu, which got reintroduced in 8.1 after a short hiatus, or the fabled X icon that closes the window on the top right) we need to thread carefully in case of applications that stay in a browser window. If you move something to the far right, you will hit the scroll bar, instead of the social button, same with top, and bottom movement, and all corners. So this leaves the middle of the left edge as the only candidate.

If you really want a like button that sticks to edge of the screen, with position position: fixed; (this CSS rule will make the button stay where you set it to be), make sure you set left: 0px; top: 50%;. This basically means that the button will stick to the middle of the left edge of the browser window, or screen if the browser is viewed full screen.
Touching the left edge
This is the best solution if we want a social button to be easily accessible from anywhere on our site. Make sure to create a reasonably large button, especially for the cases when someone is not browsing full screen.

User Flow

New publications rely heavily on the concept of the user flow, like Killer UX Design by Jodie Moule, or Undercover User Experience Design by Cennydd Bowles and James Box (I recommend both books to all UX enthusiasts).
The user flow is a chart that shows the steps (path) a user can take to complete a task or activity. While my favorite tool for illustrating user flow is a storyboard (I will do a blog post about creating UX storyboards in the future), but I think that it is simply overkill to explain and draw one in this very simple case. So let’s simplify things:

Do you remember the case of Underpants Gnomes in South Park? Their plan was outlined thus: Step 1: Steal Underpants, Step 2: ?, Step 3: Profit.
underpants-gnomes
Although you are not required to steal underpants, the initial problem is quite similar:
Step 1: The user reads the blog post
Step 2: ?
Step 3: The user shares the blog post on a social network (win!)

Obviously Step 1 implies that the user finds the blog post good enough to read through and share it on a social network. At Step 3 we need to give the user enough choices, since not everyone is dead set on using Facebook only. Moreover I would prefer a call to action, a one liner to ask users politely to share the wisdom contained in the given blogpost. (If you have added cat pictures to the blog post you can omit the call to action.)

Step 2 basically translates to: where should the button appear? While the fixed middle left positioned button will be reachable from everywhere it can be quite annoying, distracting, and thus even decrease the number of clicks on it. (This needs to be measured tough, don’t take my word on it.)

I would recommend putting the buttons with call to action, right after the article, before the comments. It is a logical, non-invasive place for social buttons.

Size matters

As you can see in the case of Fitts’s Law, the size of the share button has a huge importance on ease of use. So make sure that your buttons are large enough to be easily clickable. Touch device user will hate you if you go with the usual 16px height buttons. On the other hand too large buttons will become distracting and annoying, especially in case of fixed position. 32×32px is the minimum I would use if targeting screens with resolution no larger than 1920×1200px.

Futuresight

I think that in the near future we might need to increase the button sizes even more, to a minimum of 64×64px or even beyond that size. The placement criteria however will stay unless a radically different user-computer interaction method gets widespread acceptance.

2 Responses to “Social button user experience”

  1. Iris Grossman

    What a great post! All my social buttons questions have been answered 😀 thank you!

    Reply

Leave a Reply