Category: Usability

Back to CraigRitchie.com Home

Interface is Everything

Sketch-a-Move from Superflux on Vimeo.

(via @karrio)

The Hypercube: Buzz, Content and Brand Community Building

hypercube
Phil “PhotoPhilCro” Crozier’s Final Canvas

50 new Nissan Cubes are driving off Canadian cubes dealer lots this month. Each one’s being driven by a brand advocate you only wish you had hired to tout your brand.

The new cars are the reward for months of creation and promotion by these musicians, DJs, dancers, programmers, designers, bloggers, podcasters, poets, writers and artists, and all kinds of creative thinkers; the cream of the crop of 500 competing “auditions” broadcast online over the last three months via social channels. Nissan openly called The Hypercube a social media marketing experiment, choosing to invest only in this channel, and is now pleased to announce (or tweet, perhaps) the successful proof of their thesis.

Nissan Canada’s creative agency, Capital C, went beyond the boilerplate hey-make-us-a-video and please-retweet-our-propaganda “campaigns” that are all too common these days, by offering prizes on which creative minds could really envision spending time and effort.

The Contest

Of 7000 applicants, 500 elite were given Hypercube canvases to audition for the mass public, stumping for daily votes with photos and animation, video, poetry and song. Competitors even took their campaigning offline, including Telma “TSwizz” Costa, who created and distributed pins to drive traffic, and Sean “Cube Man” Williams who literally drove offline traffic in his homemade cardboard Cube costume.

The cream rose quickly, as canvasses brought out the best from these competitors. And believe me, if you followed or friended any of them, you were hearing about it.

Over the course of the contest, so much exceptional content was created, it’s difficult to “highlight” the best stuff. Here are pieces of just three of the intense and daily updated canvasses:

hypercube1
Tony “Tony Holiday” Elston’s final canvas

hypercube2
Brittany Jade “Gunandagirl” Hanson’s final canvas

hypercube3
Delphine “Delf Berg” Bergeron’s final canvas

You can view all of the winning canvasses at thehypercube.ca

The Platforms

The Hypercube site was just the town hall of this experience, though, as competitors created videos on YouTube…

Posted images to Flickr…

hypercubeflickr

Tweeted (like crazy)…

hypercubetwitter

built web pages and blogs, and invoked social graphs from their other communities. For example, contestant Andre Molnar looked to leverage the passionate Drupal community, by promising to create the “Drupliconcube,” a Nissan cube “decked out in Druplicons, spreading the Drupal love to the streets.

hypercubedrupal

Deeper Interactions

More than just pleas for votes, these daily updates became meaningful interactions between the competitors. Williams sent out a YouTube dance-off challenge to his fellow participants, and created this mashup:

Some social media users voiced disapproval of the campaign, including Shawn Micallef, who questioned the quality of the engagement suggests a line had been crossed, from daily updates from friends and outright spam. I disagree, as social media users are constantly pushing out posts and tweets that may annoy some, but be useful to others. This is the very nature of Social Currency, and one can, in fact, “Unfollow.” Furthermore, this type of repetition occurs with non-marketing events even more than with campaigns. When Michael Jackson died, or during the Obama campaign, the tidal wave of repetitious posts seemed to drown most other conversation. The Hypercube campaign wasn’t perfect, but neither is Facebook, nor Twitter, themselves.

The Finale

Such a momentous story had to end with an explosive climax, and on June 24, it did just that. Contestants gathered with friends at events simulcast in Toronto, Montreal and Vancouver. (Small-town contestants got together on their own in other provinces, too.) Contestants performed live between DJ sets, mingled over drinks, and sat in the highly-coveted Cubes on display. Winners were announced across the country via big screen video and some tight computer graphics. The dance floor of CiRCA in Toronto was like a minefield as groups of friends exploded in cheers when the local winners were listed off. It seemed like an endless supply of car keys were handed out, and many of the winners were ironically rendered speechless.

One can’t argue the level of quality and vastly disparate creative skillsets with which the Cube brand has been aligned.

The Outcome

Now, Nissan Canada has tons of authentic content to work with, generated by skilled creatives at a low cost. The winners are required to update their canvasses twice a month for the next year, but the brand will get a lot more than that, I predict, as these content generators are eager to share their experiences on the road. And they’ve also got promises to keep with their fans. Singer/Cube-winner Curtis Santiago promised to drive to a voter’s house in his cube, anywhere in Canada, to play a house party. No doubt he’ll be blogging and vlogging the whole trip.

I’ll admit, at first glance, I assumed Nissan Canada and Capital C’s campaign was a huge gamble. All too often, big brands create deep connections with new communities, but then drop these connections as soon as their campaign is over. Nissan has demonstrated how to think and plan long term; find–no, create passionate advocates who themselves created a plethora of content and awareness; and build a brand in partnership with their customers.

The Community

Moreover, this campaign was just the spark, a great success already, but the story of the Nissan Cube and the CubeCommunity is just beginning. Cubecommunity.ca teases us with a “coming soon” page, but the long-term strategy is obvious, as the community has all of the core requirements, starting with deeply invested and passionate community leaders. I look forward to following this community, and, in many ways, the hard work for Nissan and Capital C has just begun.

I’m happy to admit, the bar’s just been raised for “social media marketing.”

User Experience Bits #4: Do You Really Want A Pulldown?

Here’s a quick tip. If the list of items isn’t intuitive to the user (provinces/states/countries, departments in their company, or anything else guessable by seeing only one of the items) or if the list is shorter than five items, don’t use a pulldown. That’s what bullet selects, checkboxes, and DHTML/Ajax is for.

Pledge with me:

I promise.

When did this become acceptable to me?

screencapnetvibes11

I clicked my laptop out of hibernation the other day, and spent an hour or so working on a screen set at 1024×768, mostly reading RSS feeds in Netvibes. (Click the image to enlarge)

I realized after a long while that my workspace was very small, and just wondered when I decided that this was normal, as I’ve slowly built up a ridiculous navigation-to-workspace ratio, amplified when I have a low res setting.

Just thought this was funny. Shaking my head; now back to work.

How to make $300 million with a little usability testing

300mbutton

For years now, usability evangelists have been searching for a Perry Masonic closing remark that would secure a proper judgement from sceptics of the information architecture and user interface design process.

“Why spend time and money on prototyping and usability testing,” the stakeholders ask, “What is the ROI?”

There have been few, if any, strong cases to prove what experience designers have known and espoused since Louis Rosenfeld published his O’Reilly Polar Bear Book/IA Constitution in ‘98.

Now, Jared M. Spool has handed usability experts this elusive case study to tip the scales for any web building jury. He explains here: How Changing a Button Increased a Site’s Annual Revenues by $300 Million.

The main points? Visitors to a major e-com site didn’t want to sign in to buy, they just wanted to get in and out. Spool and his team changed the copy on the registration form (which most users wanted to skip anyway) and cashed in on an additional $300M over the next year.

Information Architecture is good. How good? $300 Million good. Now I hope you’ll get as excited as I do when you get to review wireframes and test multivariate interfaces.

User Experience Bits #3: Predictability is good. Progress bars are good.

progressbars.jpg

You may not have known this was so important. But Goodie Bag TV demonstrates why progress bars are just one of many best practices of predictability in experience design. Embrace progress bars.

And make sure your interface is predictable!

User Experience Bits #1: Messaging Sparkle And Fade

I admire more and more the interface subtleties of the Wordpress admin interface. Overall, I would simplify the pages for faster management of posts and comments, but I’m sure there’s some plugins for that.

Specifically I like the flash-and-fade error and confirmation message after an action is taken.


This is an example of a Wordpress message.

Big, bold, and then it becomes unintrusive all by itself. (Did you miss it? Refresh this blog to see it again.) Note that I’ve changed the colors to match my blog to demonstrate the change from sparkling to faded. I’ll be recommending this type of message styling for many web sites in the future.

The usability checklist: try to avoid annoying your users, okay?

paperprototyping.jpgThis great usablility checklist comes from Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces (Interactive Technologies) by Carolyn Snyder. Published in 2003, and pertaining to many types of interfaces, I am starting to use it for all of my web projects.

One other question I’ve been asking a lot lately is “Why would anyone want to use this?”

Somewhat surprisingly, many people on many projects don’t have a quick answer.

Usability Checklist

Concepts & Terminology

  • Do users understand the terms used in the interface?
  • Are there concepts they gloss over or misconstrue?
  • For new concepts, is the user able to figure them out?

Navigation, Work Flow & Task Flow

  • Are users able to find their way around?
  • Will they search, use links, or both?
  • If there’s a work flow or sequence of steps, does it match what users expect?
  • Do they have to keep flipping back and forth between screens?
  • Does the interface ask for inputs that the users don’t have, or don’t want to enter?

Content

  • Does the site/interface provide the right information for users to make decisions? What things do they look for?
  • Is it useful and/or interesting to them?
  • Is ther extra content that they don’t need or that annoys them?

Documentation, Help

  • What assistance does the user need to successfully complete tasks?
  • What’s the best way to provide that information?
  • Can users quickly find the information they need, and make sense of it?

Requirements & Functionality

  • Does the interface do the right set of things for its target audience?
  • Do users have additional needs that aren’t being satisfied?
  • Is there anything you could do to make the user’s life easier?
  • Are you planning to implement something that users don’t really need?

Screen Layout

  • Is the amount of information per screen overwhelming, not enough, or about right?
  • Do users miss seeing something that’s important?
  • Are there elements that need to be brought out more in the visual design? Any that distract the user?
  • Has white space been used effectively? Images?
  • Do we have the right stuff “above the fold?”

Brand

  • Does the interface reflect the qualities that the company wants to convey?
  • Does the user experience match what the designer intended?
  • Are there frustrations or obstacles that can be removed?
  • Do users like it?

Colors, Fonts and Other Graphic Elements

  • Can users see/read everything well enough?
  • Do the most important elements stand out?
  • Are there any considerations pertaining to lighting vision difficulties, or color blindness?
  • Is the interface aesthetically pleasing?
  • Do users understand what the icons mean?

Widgets & Controls

  • Do the rollover menus work for users or do they have trouble?
  • Do users notice the status line message?
  • Can they figure out what the cursor changes mean?
  • Will multiple windows be a problem?
  • Do the slider controls have the right granularity?
  • Did we pick the best keyboard shortcuts?

Response Time & Performance Metrics

  • Does the system respond quickly enough to satisfy users?
  • Do the pages load fast enough?
  • Does the display change quickly enough when the user manipulates a control?
  • Are there any download or processing delays that users might find annoying or unacceptable?
  • How quickly can users complete this task?

Real-world Use

  • How does this tool fit with others that users have?
  • What things will annoy power users after 6 months?
  • Which of these function are people really going to use?
  • What happens when the user is interrupted mid task?

Paper Prototyping also has good techniques to shorten development times and sell ideas to Internet non-experts. Buy it here at Amazon.