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.

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 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

First: One button summarizes the root intention

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

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

Fourth: The content is saved to the account

Creating a Ubiquitous Information Architecture and Designing Across Devices

Download the Egg Matrix Omnigraffle Alpha Version

Download the Egg Matrix PDF Alpha Version

The Egg Matrix is a tool for planning content, features, and scenarios when creating an information architecture that will exist across multiple devices and touch points.

Where Did the Idea Come From?

In college, I had an environmental design professor who described the field as such:

Architecture is the profession that designs the shell or the structure of the built environment. Interior design is the profession that designs the interactions and spaces inside that built environment. Landscape architecture is the profession that designs the space outside this structure.

Environmental design encompasses all three, studying our interactions with the built environment, how we move through it, how we move around it, how we integrate with the natural environment, and so on.

I always had the idea of an egg in my head, in part because he described architecture as being like a shell of sorts, and partially because we talked a lot about animal habitats and homes.

Environmental design is a human-centered design discipline that covers our physical surroundings. It considers the shared ecology between places and spaces, interiors and exteriors, the mechanic and the organic. Many of the same principles and ideals carry over into the digital space.

When the Digital World Spills Over into the Physical World

When we design for digital spaces today, it’s no longer safe to assume that the majority of our users will access our information from a similar static setup in an office or home. Digital information travels freely now between devices, locations, and online and offline habitats. In fact, it’s nearly impossible to know the context or situation that surrounds each of our users.

It also seems likely that even before we have mastered the art of designing across desktop and mobile platforms, we will find ourselves creating spaces in cars, kiosks, mirrors, table tops, refrigerators, and many other devices. There is no set of rules that tells us how to create the right mix of content and features so that our users will have a seamless experience whenever and wherever they access our information.

The Egg Matrix

The Egg Matrix is my attempt to create a tool for cataloging the different forces that should be considered when determining the architecture, features, and overall design of a multi-device experience. My hope is that it is flexible enough to be applicable to topical challenges, like designing for mobile vs desktop spaces, but that it also will encompass future needs, such as television or in-car apps.

The concept is simple. There is a subset of the experience (the egg) that you can directly control. You are responsible for the structure, the content, the messaging, and the interaction that goes into your design. There are also two equally important forces at play that contribute to the experience and overall success of what you’ve designed. There is the internal composition of the user (the yolk) and the extrinsic environment that the experience takes place in (the nest). You might be able to influence certain aspects of both areas, and you might be able to design around certain scenarios, but you’ll never be responsible for the creation of these realms.

By breaking each area down into individual factors, you’ll be able to create a better model for your structure. I’ve broken each field out into the initial factors that I thought were most crucial, but there is certainly room for expansion, refinement, and feedback.

Start with a single node of content, and build out from there. What features are needed to interact with that content? How often is the content accessed by the user? What possible contexts might the user be in when accessing the content? What belief systems might he or she be bringing to the experience?

The breakdown currently is as follows:
The Nest covers environment, location, context, and locomotion.
The Egg covers message, content, task, frequency, urgency, privacy, intimacy, tracking, and measurement.
The Yolk covers motivations, needs, desires, and knowledge.

You may find yourself creating multiple columns for a single content node to cover the array of possible touch points or devices your users might encounter.

I included a section called “messaging.” This may relate to a marketing campaign, a company brand message, or a common slogan. It’s important the spaces you design don’t contradict the messaging being broadcast to users.

I’ve also included fields for noting tracking and measurements. These are for listing how you plan to measure the experience and what measurement points you’re going to look for.

How Do You Know If The Model Is Working?

Like any other model, it has to be put into action and tested. Fortunately, this “model” can be tested in several ways. You can gather feed and ask questions of users. You can create a prototype to test. When you’re satisfied with the performance of a prototype, you can design the real deal, and then continue to make refinements with ongoing feedback.

I’ve listed the Egg Matrix worksheet here so that others can download it, play around with it, refine it, and provide feedback.

Download the Egg Matrix Omnigraffle Alpha Version

Download the Egg Matrix PDF Alpha Version

UX Pin

Portable Paper Prototyping Kit

$19.99

Buy It!

Sketch your ideas on little sticky notes.  Need to move that buy button?  No problem!  This kit looks awesome for rapid prototyping and ideation.

Paper Browser

Sketching Notebook

$16.00

Buy it!

Yes, it’s a notebook with browser windows printed on the pages.  You can choose various sizes and orientations for your browser windows (you know, to reflect screen size and such).

App Sketchbook

iPad and iPhone App Sketch Grids

$12.00

Buy It!

For the app designer in your life.  Who doesn’t want to carry around a little notebook to jot down those app ideas on the fly?  Choose from iPad or iPhone for your grids.

iPad App Stencils

(Also iPhone, Website, Android, and Sketch Pads)

$24.95

Buy It!

I’ve wanted these for awhile.  They’re like architectural stencils, except without the toilet icons.  (Which reminds me, I think I still have architectural stencils lost somewhere in a box, probably with the tracing paper.)

Stainless Steel Sharpie

Fine Point Permanent Marker

$6.75

Buy It!

Yes, it’s a Sharpie.  A Stainless Steel Fricking Sharpie!  And if you’re going to give someone a bunch of sketching pads, you might as well thrown in some pens.  Also, think stocking stuffer.

Big Idea Adhesive Notes

Sticky Notes for Content Strategy?

$10.00

Buy It!

Let’s face it – everyone needs more sticky notes.  And these might even help you organize your content and ideas better.

2011 Wall Calendar

With Extra Special Geometric Illustrations

$25.00

Buy It!

This is the only decent time of the year to buy a calendar, you might as well make it a good one.  If you don’t like walls, there’s also a desktop version.  Hand-illustrated.

Moleskin for iPad

AKA “Moleskin Folio Digital Tablet Cover”

$64.99

Buy It!

The best case for you iPad.  Combine web browsing with sketching, or just take notes in both places.  I think this is the perfect combination.

Personal Library Kit

With Return Date Cards!

$16.95

Buy It!

Library science majors rejoice, now you can catalog your personal collection stamp a due date on each book your friends try to steal.  It really has an ink pad, a stamp, and library book cards / sleeves.

Random Geometry Wallpaper

From Hermitage

$128.00

Buy It!

Please put this wallpaper in your office, and then hang the above wall calendar over it.  Your clients might go insane.

Flowchart of the Holidays

Greeting Card

$4.50

Buy It!

If you’re only going to give someone a card, it might as well be good.  What are you doing for the holidays?  Just  follow the chart.

Everything Explained Through Flowcharts

The Book

$11.55

Buy It!

Even the Table of Contents is a flowchart.

16 Months Worth of Drawing Exercises in Microsoft Excel

By Danielle Aubert

$47.50

Buy It!

No actual drawing exercises or Excel tutorials here, but the author spent 16 months using Excel to create various pieces of art.  Thought R was fun? Check out these Excel pieces.

Map Art Prints

Hand-Drawn City Prints

$35.00

Buy It!

Inked by hand with little lines, these city prints map out the streets of famous cities.  Choose from Portland, San Francisco, Chicago, Boston, Rome, Madrid, and more.

City Neighborhood Posters

Ork Posters

$22.00

Buy It!

I first saw these in a friend’s apartment. She had one for each city she’d lived in: Portland, Los Angeles, and Seattle.  The posters squish the names of the different city districts into areas into the areas they cover.

Nonsensical Infographics

Art Without The Math

$20.00 +

Buy It!

These pictures (four in all) from artist Chad Hagen show the beauty of infographics without the mess of trying to understand what they actually mean.  They’d also look great in my house.

The Blur Building and the Next Application of Mobile Computing

In 2002, the centerpiece pavilion of the sixth Swiss National Expo was less an actual building and more a man-made atmospheric presence.  The Blur Building, as designed by American architects Elizabeth Diller and Ricardo Scofidio, was a suspended platform in the middle of Lake Neuchatel in Switzerland.  The metal structure of the building used high-pressure spraying technology to blast little water droplets from the frame, essentially shrouding the pavilion in what looked like a cloud of mist.  The spray, temperature, wind, humidity, and other atmospheric conditions necessary to maintain the cloud of fog were all computer controlled.

As visitors left the clear of the shore and headed out on a walkway to the Blur Building, they donned the second feature of the installation, braincoats.  In addition to guarding against the moisture, these waterproof ponchos also were a form of wearable computing.  While on the shore, visitors to the pavilion were asked to complete a personal preferences questionnaire that was uploaded into an online social networking profile housed in a central Blur Building computer and wirelessly accessible throughout the structure.  As visitors were given their braincoats, their preferences profiles were downloaded into their ponchos.  While people slowly wandered through the fog within the Blur Building, LEDs within the braincoats would begin to glow red or green as they came in close proximity of another person whose personal preference questionnaire was a match to their own.  A sonic pulse within the coats also changed frequencies to indicate shared affinities as they neared other visitors.

Diller and Scofidio, in collaboration with Ben Rubin for the creation of the braincoat, were able to able to create a cultural-technological experience that combined nature with man-made structure, as well as human psyche with smart computers, to both bring people closer together and hide them from each other.  In an interview, Elizabeth Diller said of the smart raincoats with their changing red and green lights, “Ben collaborated on the ‘Braincoat,’ working with us on the desire to invest technology with complex communications skills — some involuntary, such as blushing.”

Smart raincoats may seem like novelty items in 2010, but we already carry with us a foundation for creating and recognizing personal affinity networks.  As more consumers make smartphones and mobile devices essential components of their daily wanderings, a population of geo-networked individuals is emerging.  We are being conditioned to reference our phones for location-specific information, thanks in part to apps like Foursquare and Gowalla, Yelp, and mobile maps.  But what if our phones started referencing us?

We currently have the technology to make accurate guesses about consumers’ preferences in music, movies, books, and more.  Both social networks and personalized product recommendation engines look at individuals’ actions and behaviors, and then use this information to show trends, make preference-based predictions, and to match up individuals with shared tastes or behaviors.  The next evolution of Pandora could be a mobile app that vibrated in your pocket or played an auditory chime whenever the person sitting next to you on the bus shared a similar taste in music.  Conference goers could meet other conference goers if their phones began to glow or vibrate whenever they passed someone who had a similar profile and session schedule.  Plancast users could upload a taste or event preference questionnaire to their profile and begin discovering new events or venues that might interest them via people outside their social network, merely by coming in close proximity to someone with shared interests.

The technology infrastructure isn’t fully ready to support a network of mobile people whose personal computing devices must be always on the prowl for other individuals with similar or compatible preferences.  However, as mobile technology continues to focus on location-specific and transitory actions, we will start to see the rise of affinity-based networks and preference-led encounters.