Adventures in User Interface Design

We’re big believers in the importance of usability at The Bivings Group.  Online, usability is branding.  If your site is hard to use, visitors will lose patience and take their eyeballs elsewhere.  It is just common sense really. 

Inevitably, usability is about the details.  It isn’t one big thing, but tens or hundreds of little things.

Today, I came across a good example of a frustrating UI mistake on the new discovery platform Scoville.  After signing up for the service, I was taken to a screen that allowed me to quickly follow my Foursquare friends that are using Scoville.  For any new social service this is a critical screen, as value depends on the network effect.  If I can quickly find friends/colleagues using the service, there is a good chance I’ll stick around and find value.

Below is the add friends page:

There is one major usability problem with this page. 

When you click on the “Follow” button to add someone, the button subtly changes to read “Following” instead.  The difference between “Follow” and “Following” may seem obvious as you look at the screenshot above.  I can assure you it wasn’t obvious to me as I used the actual page. 

I spent a minute on the page clicking the “Follow”/”Following” button repeatedly, not realizing I was changing my selections.  I thought the page was broken.  I was about to bail on the service when I suddenly understood what was happening. 

This is a problem easily solved by creating more differentiation between the “Follow”/”Following” options.  Have the labels be slightly different colors.  Change “Following” to “Added.”  Anything would be better.

This may not seem like a big deal.  My criticism may seem nitpicky.

But it is a big deal. A marginal improvement (10-20% better retention) in the usability of this page could have a huge impact for an online service such as Scoville. 

When designing a good UI, these sorts of details are everything. 

Three Things I Love About Jerry Seinfeld’s New Website

Comedian Jerry Seinfeld recently launched a new website that brings together highlights of his 35-year stand-up career.  I love the site, and I’m not really even a fan of his stand-up.  Here is a breakdown of what I love about it.

1. The Approach

The site posts three videos a day, chosen by Seinfeld himself.  And that is pretty much it.  Videos aren’t archived, so if you don’t see the three videos the day they are released you are out of luck.  

In a time when we can all pretty much access anything, anywhere at anytime, Seinfeld has chosen a curated approach that actually seems novel. 

By limiting the length of time videos are available, the site also creates a compelling reason for people to visit every day.  www.jerryseinfeld.com will immediately become a daily visit for fans.  In a recent interview, Seinfeld called his approach “portion control.”

2. The Design

Like the overall approach, the design here is exceptional in its simplicity.  Black and white, with the only color on the page being links to the three videos you can view that day.  A single photo with names of routines overlaid.  A signature for a logo.  That’s it.  It is perfect.

Here is what Seinfeld had to say about his inspiration for the site, and hatred of clutter:

“I hate people begging me for my attention and trying to sell me and entertain me and delight me and surprise me, that’s what makes the internet so annoying. I did my best to uninternet it. You know my literal metaphor was one of those little galleries in Chelsea, there’s just five paintings in there, that’s the kind of place I like to go to.”

3.  The Lack of Monetization

Online publishers are becoming increasingly desperate to monetize.  Online ad units seem to become more obtrusive by the day.  Content is taking a back seat to Sear Engine Optimization. 

Into this environment Seinfeld has launched a website with no monetization strategy whatsoever.  No pay wall.  No SEO.  No ads.  No t-shirts.  Just content.  While Seinfeld clearly doesn’t need the money, I think it is awesome  to launch a site with the sole purpose of sharing his content with the world.

Another Awesome 404 Error Page

A 404 error page is that annoying page you get when you try to access a web page that has moved or been deleted.  A couple of months back I wrote a dorky blog post about how web developers should use  404 pages as branding opportunities instead of just throwing the page away and spitting out an error.  You can read the post here if you are interested.

We recently launched a new website for the Orianne Society, and our Bivings design team put together another stellar 404 page (screengrab below).

Update (3/7/2011): Here is another example from another TBG client, the Entomological Society of America.

Smashing Magazine has other great examples.

Infographic Overload

I love a good infographic as much as the next guy.  I really do.  An infographic done right can make a point much more effectively than straight text.  See this example.  Or this one or this one.

But the last few months things have gotten out of hand.  In an effort to create viral, easily-digestible content, many publishers seem to have abandoned writing altogether and gone to an all-infographic, all-the-time format. 

Sometimes the resulting infographics are simply window dressing that don’t add anything to the data presented (via @dostrower).  In other cases they are so complicated that they actually get in the way of understanding the information that is being conveyed.  And sometimes they are so badly done they are misleading or incomprehensible.

I think we all need to take a step back, and think through if value is being added before we decorate our content with stick figure men, maps, and concentric circle graphs.  Not everything needs to be an infographic.

Check out the great Think Brilliant parody of infographics below.

The Curse of WYSIWYG Editors

WYSIWYG editors sometimes make me want to scream!

For instance, it is sometimes hard to make desired edits.  I can never get them to do a simple line break, for example; whenever I try, a new paragraph begins.  To create a line break, I go into the html and adjust the code.  However, the whole point of what-you-see-is-what-you-get is to avoid having to directly deal with the html, right? 

Regardless, most of the time when using these editors, I am in the code view.  In fact, I think that Notepad is the html editor that I use most frequently.  This makes it so much easier to get tables, padding, image alignment, etc. more closely aligned with what is desired.

Additionally, the tags an editor uses may not match with the css of the site.  A person may want to emulate the style of text on the same site (maybe even page) and will try to style it accordingly only to get frustrated when this does not work.  If someone uses such an editor since they may not know html, what would enable them to modify the page or site’s css – let alone do in-line style tag attributes?  Fortunately, I haven’t run across an issue like this here at The Bivings Group (we have a good production team), but this has to happen.

Another problem that I do come across is laying out a page in Drupal or WordPress for a client.  Sometimes I have to code the html to achieve the desired results since that is the only way I can get it to work with the editor.  The problem is that the client who plans to change the page over time typically does not have any html skills (which is totally fine – that’s why we use WYSIWYG editors), and they lack the knowledge to make the necessary changes.  This either forces them to rely upon someone who knows html to make changes or to have the page laid out in a less appealing way that is manageable without directly coding html.  Neither option is optimal. 

I’ll reluctantly acknowledge that these editors may empower people more than they frustrate them.  More and more people now have the ability to manage websites even though they may have no html, graphic design, or programming expertise.  That is a good thing.  However, I bet most of us who use these editors occasionally feel like typing “UGH!!!” and then bold, italicize, underline it while changing its color to red and increasing its size…

Feel free to list a favorite editor in the comments.  I really don’t have one since I spend  most of my time in the code view, but editors that color code tags like Dreamweaver does are appealing.

Bonus - I found this gem on Wikipedia: “WYSIMOLWYG, What You See Is More Or Less What You Get, recognizing that most WYSIWYG implementations are imperfect.”