This Week: Guest Posting for Wired Magazine’s Change Accelerators Blog

Greetings! I’m taking a break from my usual blogging routine (and by routine I mean a post every month or so) to write a post every day this week for Wired Magazine’s Change Accelerators blog. It’s a practice round leading up to the release of A Dictionary of Cyborg Anthropology.

Let me know if you like the posts and I hope you enjoy tuning in! Several have already been posted. Their titles are below:

Wired Magazine Posts

Monday: Why Do Makeshift Solutions Persist?

Tuesday: Does Your Tech Make You Feel Superhuman?

Wednesday: How Social Networking Is Extending Our Nervous System

Thursday: Your Brain is Full of Junk: Here’s Why

Friday: Calm Computing

Full Archive of Wired Magazine Guest Posts

Looking for more?

More about each of these subjects will be released in the release of A Dictionary of Cyborg Anthropology! It’s slated to be released in October, though probably around the end of the month.

The Need for Superhuman Interaction Design

Here I’d like to rant about something that’s been bothering me for a long time. Skeuomorphs and their contributions to friction-filled, annoying interfaces. This reduces the ability for people to feel like superhumans when they use an interface. If you already know what a skeuomorph is, skip down to “The Most Annoying Skeuomorphs”.

What is a Skeuomorph?

“an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material.

Basalla, George (1988). The Evolution of Technology. Cambridge, UK: Cambridge University Press. p. 107. ISBN 0-521-29681-1.

“a derivative object that retains ornamental design cues to a structure that was necessary in the original”.

The Compact Edition of the Oxford English Dictionary. Oxford University Press, 1971. Volume II, page 4064.

Skeuomorphs in the Wild

When done well, a skeuomorph helps a user to feel comfortable with an interface. Slight textures in digital interfaces help them to feel tactile. Good skeuomorph take cues from an analog world to help a user navigate a digital one. when done poorly, the skeuomorph forces the user to deal with an interface in an outdated way by blatantly ignoring the fact that the interaction is being done on a platform that is capable of handling new and improved interactions.

The Most Annoying Skeuomorphs

There is one place in particular where skeuomorphs aggravate me the most. This is the book reader or “page turn” skeuomorph. A book in real life takes some effort to hold, and some effort to flip a page. Many designers keep this effort around when they translate a book into a digital format. This results in the following annoying user interface experiences. Have you ever tried one of these badly designed pager turners out? When you try to flip the page, you have to physically press down on it and drag it over to the other side of the screen! And this is supposed to help people relax and enjoy reading on a digital device! Not if I have anything to do with it.

I first struggled with these annoying interfaces that blossomed during the 2000’s with the advent of quick Flash design. One or two people figured out how to program a page turner, released a tutorial and everyone was off to the races to copy it. The problem did not solve itself when the iPad came out. Instead, users saw and unfortunately experienced a increased bevy of ostentatious and distracting skeuomorphs. Things that made them feel bad while using a device.

Superhuman Interaction Design

Look at this interface for Flipboard. When you use it, you get an entire new page of content with the touch of a finger. Content pre-loads on either side in a visually pleasing way, taking a neurologically stressful set of RSS feeds and presenting them in a way in which the human has implied control over the data.

Flipboard presents a very important turning point in Skeuomorphic interaction design. It takes the best parts of the page turn, reduces them by half (the page pivots from the middle, not the side) and presents the reader with more information instantly. It is seamless. It is empowering. And because of that, it is relaxing.

People are excited to use Flipboard because it is not just a mentally joyful experience, but a physiologically joyful one as well. It is because of this that I consider Flipboard to be a part of what I’m calling “superhuman interaction design”. In order for an interface to be considered superhuman, it has to have the following characteristics:

  • Minimize visual skeuomorphic cues and reduce the interaction to action ratio. Flipboard reduces the page curl to a centralized pivot, and allows a page to be turned with the touch of a finger.
  • Make the user feel physiologically empowered. Present information in a way that makes the user feel more powerful than the information, not overwhelmed.
  • Make the user feel exhilarated when using the interface, as if they had suddently turned into a superhuman and they are able to do this because you’ve made them an excellent interface that empowers them instead of frightens them and makes them run away from data.

Other Superhuman Interfaces

Do you know of any other superhuman interfaces? I really like Skitch for its ability to quickly capture and store information, as well as it’s slick flipping interface. Least stressful tool on my machine.

JumpCut allows one to store up to 50 clipboard objects and access them with a tiny set of keyboard shortcuts. The interface is invisible until one needs it. It makes me feel like my short term memory is suddenly 50 memories long, instead of just 4 or 5.

DML – Demographic Markup Language

The Current State of Demographic Advertising

Are you sick of all of the irrelevant advertising you get on various websites like Facebook, YouTube, Hulu and blogs? On Hulu I’ve set my gender to Male and birthdate to 1973 in order to get advertising that I actually like. This is because I like ads for technology and ads with funny jokes in them. I’ve begun to do this on many other websites so I can get ads that aren’t as obnoxious. The issue is that my interests don’t match what I am on paper. I’d like to be able to define them myself, and I’m sure many would agree.

DML – Demographic Markup Language

There needs to be a markup language so that you can define your own demographic. No more irrelevant online ads. Did these one-size-fits-all-thinking people get an online marketing degree? Brian Ledger, brought this concept up today. It made me happy to know that other people are experiencing this annoyance.

If you change your demographic, your entire user experience could change for the better. Content would be more relevant and interesting, and the content you received would not be based on very small data points such as age or sex. Those two data points often skew people into groups that don’t mean anything at all.

What there needs to be is standard for defining demographics. There needs to be a demographic markup language and then a query language on top of it. For the user, this would be an extra set of metadata one could attach to their profile that would inform ad engines of the type of ads you’d like to see.

Brian pointed out another concept that might be interesting. “What if you log into your own demographic and say “this isn’t me” or change it? One one could keep their own demographic file and preview the type of ads you might receive because of it, tweaking it until it was relevant”.

What Next?

I’ll be writing more on this later and hopefully working with Brian Ledger on how this might look. What do you think? Would you use something like this if it meant you could curate your ad experience to something more relevant? What we need is a textbook that defines a certain vocabulary to use and map that into a subset of XML.

Microformats

It might make sense to have DML be a part of Microformats.org as a sort of demoformats. Reasons for this is because microformats are already known and used, and demoformats would simply be another extension or option set within microformats. Another curious thing to look at is schema.org

On Welcome Screens and Dashboards

Reuse the welcome screen as a notification system.

Allow cancellation of these notes. Color code them according to their need to be dealt with. An error is red, a note or caution is yellow.

Get users to the Next page (or next thing). Get people off of the home page and into re site as quickly as possible.

Give users something to do every time they log in

Whether it is updating their profile, adding information about themselves or clicking on a new piece of content, people won’t know to click through to do something unless you present it to them. And when you do, they’ll be happy to have the direction. Often they won’t even notice it; they’ll simply click on it.

Twitter’s homepage provides all of these things and does then well. Not only does it use the homepage as an alert box, but it provides a blank empty space for the user to add data every time they open it: also, all data on the page is new, meaning there’s always something new and different to see.

Facebook functions in exactLy the same way. Both systems place ultimate value on displaying data of others before the user’s own data. For instance, onemust click three times to look at their own data on Facebook, and once onTwitter (clicking on one’s username will pull up only their tweets). With so much content available, it no longer becomes a choice whether one will participate or not, but rather what one will participate with. That same amount of choice is present to the user, no matter where they are on the website. A click on Twitter almost always shows more content choices. Even the settings page invites toggling and updating. On Facebook, every click has multiple options arise: more people’s updates – more advertisemets and images, and even chat. Even the privacy settings require a 30 minute commitment, all leading the user to spend even more time on the site.

Give them a new thing to update every time they log in and they will eventually get around to it: it took me a year to completely fill out my linkedin profile, but it did it…eventually. And the interface waited for me the entire time. Often a user might fill out all of the information just to get the notifications to go away.

User Rewards

Offer a prize upon completing a start up task. Dropbox gives an extra 250 megs for completing the introduction to Dropbox.

The Mozilla Foundation and Foursquare are similar in that they both have leaderboards that display top ranking referrers or users. The rewards are often intangible. They are often points, not karma, not ‘squiggles’. Points are points. They do not need to be called anything other than that. The idea of points has worked out for hundreds of years. Points are points. They allow one to run a game. Their name does not get in the way of gameplay. Just call points points and get over it. Don’t be inventive.

The welcome screen can also be used as a guide for a three step process that the user does not have to complete during one sign-in session. Having 3 steps that stay in the dashboard or homepage allows the user to immediately know what they need to do when they log in on subsequent sessions.

If the user must set up storage for the system to be able to work, then the first step of the dashboard should be to set up storage. Once storage is set up, that notification should disappear and be replaced with a new one, or, if it is part of a list, it should be crossed out and or grayed, illuminating the next step in the process.

Potential consequences of placing frequently used functions next to delete functions

Delete and Close Buttons Close Together in WordPress Widgets with No Undo

What happens when a frequently used option (close widget) is placed next to a Delete function?

There is a guarantee that some percent of the time the user will click on the wrong button. That user, in this case, was me. I deleted everything in a WordPress widget that had 16 individually formatted fields.

Preventing the mistakes of users with good intentions

It’s not that I’m upset that I lost data from the few minutes I spent carefully filling those fields out, it’s the fact that every time I close a widget I have to stop and think, else I may automatically press the Delete button vs. the close button.

Where is the soft delete or modal confirmation?

it’s not a soft delete that happens either – there is no undo, no “are you sure you want to do this?”, no “this widget will be removed — ok/cancel?”. It simply disappears.

Psychological response and conditioning to potential data loss as a result of ill-placed buttons

So either I begin to regard the widget section as a minefield for potential data loss or misfortune and stop editing it unless I’m wide awake and prepared for the potential consequences of an errant click, or something happens where these buttons are placed at least a few target distances apart.

Revisions and soft deletion

If a frequently used option is to be placed next to a delete option, a soft delete or a confirmation dialog for such a drastic action should be employed. Else, the functions should be placed at least one target size away to ensure one is not accidentally clicked in place of the other.

When I posted my initial thoughts about this button placement on Twitter, Devin Price replied, that, “I think the actual flaw is that there isn’t an undo button. Widgets should be saving revisions just like posts do”.

“But just look at how nice, big, blue, beveled and separated “save” is”, Chris Teso responded. In the WordPress widget function, pressing Save doesn’t close the widget box. It would be great if it did. Instead, the user must press Save and then close, going near the dreaded “Delete” option in the process.

Undo Options in Gmail

Forgiving Interfaces

This reminded me of a recent discussion Tantek Çelik and I had about forgiving interfaces. One of the best implementations of a forgiving interfaces is Gmail’s undo functionality. Its soft delete allows one to undo every action after it is done. It allows one step backward in time from a potentially damaging action. Users of software such as Photoshop are used to forgiving interfaces, and each new version of the software stores actions and histories in an even more forgiving, and often visual way. This digital paleontology allows one to dig up useful historical states and essentially go back in time.

“Interfaces should always be at least a little forgiving”, writes Çelik, “Allow undo post/edit/delete even if just for 30 seconds”.

“Gmail Labs’ “Undo Send” extension gets this right (without the cognitive load of previous attempts like scheduled sends)”, Çelik, “All forms of send/post/tweet verbs should be as forgiving. If you’re regretting your sending, undo”. He then points to a related article on Undo Send in Google labs.

As for the current moment, I’d like to be able to edit without the physiological drawbacks of constantly worrying whether or not I will lose data simply because I’ve pressed the wrong button.