Button Sluts and Web Actions

tl;dr - Web actions are actions a visitor to your site or application does to another site or app. They create a cleaner and more seamless user experience.

The NASCAR Effect

Introducing the Concept of Web Actions

It’s been over a month now since IndieWeb Camp took place in Portland, OR.  Over the course of the weekend I was introduced to concepts and terminology new to me – like web intents, sharecropping, and the NASCAR idea – and I had the opportunity to brainstorm more freely than I typically get to on a normal day.

After learning about the concepts behind web intents, I was captivated by the idea of organizing basic website actions (like tweeting, emailing, hearting, likeing) into their root categories.  I was also inspired by the notion that we – as web creators – are often needlessly cluttering sites with ill-placed social media buttons and confusing action forms.

Working with several ideas in mind, I joined in to focus on web intents, but soon noticed that the original pilgrims had moved on to web introducers as a concept [see also – and note that Paul Kinlan is now back focusing on web intents].  @t and I agreed that something was missing and that this space in general was confusing and lacked definition.

We agreed to continue our brainstorming, working out a few ideas we had shared.  Moving forward, we began using the term “web actions” to describe the space we were working in.

What Are Web Actions?

It’s taken me awhile to get my head around what a web action really is and which alternatives are just collections of buttons and links. As we are using the term now, web actions are actions your visitors take on your site or application to another site or application. Having an account and an authentication level are implied aspects because your visitor has to log in to the second site or application in order for a share, save, or send to take place. Web actions mean that the visitor stays on your site while completing the action, rather than opening up a new page on another site or launching an application.

The NASCAR Effect

Web actions begin to solve the problem of the NASCAR effect, where many sites today are completely littered with social buttons and share widgets. Like race cars slapped with promo stickers, blogs and businesses have filled their footers, sidebars, and whitespace with buttons for saving and sharing posts or pages on each and every remotely popular social site.

Companies like AddThis made it easy for even the less-technically-inclined to include a snippet of Javascript on their sites and generate an array of social options. It’s also easy to justify the inclusion of various buttons on your site by just noting that everyone else is doing it. I’ve done that myself.

(Incidentally, the current version of this blog doesn’t use web actions as I ultimately see them occurring. However, since it’s my own testbed for new items, expect some changes in the near future.)
Button Candy

Button Slut – n.  A blogger or website owner who adorns his or her site with a large number of buttons or badges.

Fixing the Button Candy

These collections of digital kitsch add clutter to sites and often slow them down. I would also guess that for many sites, having an abundance of social share buttons actually decreases the effectiveness of each button. Social buttons and similar features were originally intended to provide visitors with easy shortcuts and to encourage a behavior of sharing. I have a hunch that on many sites today, NASCAR arrays are often ignored like in-page ads.

Web actions break down visitor behaviors into simple, clean, less arrogant interactions. They should allow visitors to your site to be able to share or save content without giving it a second thought. Web actions should not be intrusive to the content or the design. They are the more effective, more minimalistic alternative to social button overgrowth.

Examples of Web Actions

An area that initially attracted me to the concept was the idea of breaking down and organizing existing on-page actions – likes, sends, tweets, hearts, stars, saves – into categories based on the underlying intention of the person. If you ignore the underlying social network, site, or application and think just about the motivation behind the behavior, similarities begin to emerge.

While by no means a complete list, a few examples are:

  • Saving content, such as bookmarking it, adding it to a list, or marking it some fashion so that it’s easy to identify later.
  • Sharing content, such as announcing a link to friends or family, emailing an article, or redistributing a message.
  • Showing support (for an author or for an organization in general); this might loosely be called, ‘giving props to,’ or adding your stamp of approval.
  • Purchasing something, where a click and a confirmation executes a transaction with a separate site.

For a more specific example of a sharing web action, we can look at emailing. If you’re reading a great blog post and you want to pass it on to a friend, along with a note about the article, you might choose the “send” action. From there you have a saved preference of email. Once you choose to email the article, a pre-populated message window opens up that includes a link to the article in the body and the article title in the subject line. You can add your message, your recipient’s address, and send it off without leaving the original page.

Moving Forward in the Space

I see a mix of interactions on sites and apps today, ranging from overblown NASCAR arrays to scenarios very similar to the one described above. What we have seen as much of during our initial discussion of web actions, is the devision and classification of specific actions by the visitor’s overarching intention, or the conscious placement of certain actions on the page in a position that is most usable for the visitor.

These areas are open for research and discussion. Is it better to put an action for reading a post later at the top of the post assuming they haven’t read anything? Does it make sense to place a sharing action at the bottom of a post and assume this is where the reader will look when he wants to tweet the article out to followers? I don’t know, but I’m excited to perform the research.

I also don’t know if the way I breakdown and categorize various buttons and badges into web action clusters is the same way someone else might instinctively group this information. But I do know how to solicit this type of information from others.

In the immediate future, @t and I will be solidifying more details on web actions, including performing some of the research I’ve mentioned above. I’ve started screenshoting a few of the web action examples I’ve come across, and I’ll add to this Flickr collection over time. I would encourage others to contribute their own with #webactions. Thoughts, questions, and positive discussions are always welcome.

Button arrays via icondock.com and webtoolkit4.me.

A More Visual Example of Web Actions

Web Actions Frame One

First: One button summarizes the root intention

Web Actions Step 2

Second: The visitor’s preferred services for the action are shown

Web Actions Step 3

Third: The content is saved to the visitor’s account with the option to edit accordingly

Web Actions Step 4

Fourth: The content is saved to the account



31 Responses to “Button Sluts and Web Actions”

  1. this! RT @smashingmag Button Sluts and Web Actions – http://t.co/p4jDWNH #ux

  2. "NASCAR effect, where many sites today are completely littered with social buttons and share widgets. Like race cars…http://t.co/T1D54G9

  3. A Nice UX read with a not so nice title: Button Sluts and Web Actions – http://t.co/y5YXyEZ via:@smashingmag

  4. Good read by @smashingmag: A Nice UX read with a not so nice title: Button Sluts and Web Actions – http://t.co/Mx7PPbw

  5. smashingmag: A Nice UX read with a not so nice title: Button Sluts and Web Actions – http://t.co/4FR9406 http://t.co/oVoXUvZ

  6. Button Sluts and Web Actions – social media links on your site: http://t.co/WX4mo3q

  7. Great read and just awesome title: "Button Sluts and Web Actions" http://t.co/sbOH9st Via: @erinjo

  8. andy says:

    I think you could trim this down to two paragraphs (at most, one ideally) and a picture. Your whole point seems “one button with progressive discourse is better than 30 buttons,” and I don’t think you need such a long article to explain that.

  9. Concept of Web Actions via @smashingmag http://t.co/4nU9T1s

  10. .. nice read about Web Actions ~ Button Sluts and Web Actions | http://t.co/ciczpBF – flatfrogblog #buttons #icons #actions

  11. Nice Ux article with a not very nice title: Button Sluts and Web Actions – http://t.co/MmfkGxo

  12. A Nice UX read with a not so nice title: Button Sluts and Web Actions http://t.co/NJRslOA via @smashingmag

  13. [...] Button Sluts and Web Actions [...]

  14. Thanks for sharing the post! RT @uie How to avoid your site having the NASCAR effect with social media buttons. http://t.co/QB8oe0n

  15. Publicly saving this for reading tomorrow: http://t.co/TgSW1LO #ux

  16. [...] sharing user experience and Web Intents. Erin posted a blog entry which has her thoughts on a possible user interface design. Tantek also posted a thoughtful piece that tries to give a historical context and future path for [...]

  17. [...] more importantly not presented with the ones we do. Erin Jo Richey called these types of sites “button sluts”. There are some unsatisfactory user interface fixes for this issue such as “AddThis” which [...]

  18. Button Sluts and Web Actions http://t.co/8hsbjyn Web actions are actions a visitor to your site or application does to another site or app

  19. Two interest concepts: Web actions and Nascar effect. http://t.co/PoWwngz nice ux read.

  20. Button sluts and web actions! Nice read on UX! http://t.co/BRAcySs

  21. Introducing the Concept of Web Actions http://ht.ly/6dSbD

  22. Nice introductory article on #webactions. Are they the #future of #webapps interoperability? http://t.co/AJ6TYdW7

  23. Another excellent intro to Web Intents – Button Sluts and Web Actions http://t.co/5hBbKlC5 @erinjo #ux #design #webintents

  24. Have a question about #webactions? (http://t.co/yBzVDbxz / http://t.co/KU8fPbNh) Ask it now – I’m writing a follow up.

Leave a Reply