It was about 4 years ago that I was hit by Rishad Tobaccowala’s advice to the crowd at OMMA East. “Mind your API“.  Don’t ask me why that one instruction stuck with me more than everything else that he said that afternoon, but it did.

For those of you who don’t know what an API is, API stands for Application Programming Interface and it is the rules and specifications for a third party to interact with your software.  For example, Google Maps API allows thousands of programs to incorporate Google Maps data into their programs.  Twitter’s open API allows hundreds of alternate ways of posting or reading tweets.

While Tobaccowala’s advice should be taken literally, it was also meant to be metaphoric.  Make sure that you work well with third parties, exchange information easily and make it simple for them to use that data.

What made me think of this?  Well, we just launched an app for an event that one of our clients is hosting this week and I needed screenshots.  The app is available for the iPhone, Android and BlackBerry, but I just spent the last half hour taking screen shots of the iPhone version only.  Why? Because Apple makes it so easy and the others don’t.

Tap and hold the power button, click the iPad button, done.

But for the BlackBerry and Android you need to connect the device to a computer and download some software and only then can you start the process of taking a screenshot, which still probably isn’t as easy as click, click done.  It’s a little thing, but because Apple makes it easy to take screen shots I will be promoting the iPhone app and not the other platforms.

Usability isn’t always about making things easy to find and sharing isn’t just making sure you have a “Tweet This” button on your site.  How rich is your API?

Mind Your API is a post from: Trumblog

Language defines, or at least provides structure for our thoughts and therefore our actions. A language without singular pronouns is probably used by a culture that sees the world as made up of groups. How would this culture act versus a culture whose language uses the first person singular pronoun in every sentence? Would one culture be more prone to narcissism? Would one focus on the good of the group over the individual? If we were building a language today and could see how its structure was constraining our culture how should we change it?

In computing this is even more true because the language and its structures are the foundation of thought on how programs will function. It places limitations on what the program can perform or at least makes some things easier to perform and makes others much more difficult to achieve.

Now think about how hard it is to understand these restrictions from within the system itself. What sudden blow to your understanding of the world would be needed to see it? Jaron Lanier delivers that shock with “You Are Not A Gadget.” Lock-in of structures from computer languages restrict us and disregard our humanity. The drop-down lists of relationship types, religions, ethnicities and the like on Facebook pigeonhole us as individuals and the strict layout of profile pages hide our unique and messy personalities. Crowdsourcing is not the answer to everything and subsumes the unique individual into the masses. Online anonymity releases the inner troll in us all. Open-source culture makes the building blocks of culture of greater value than the original composition and strips context from the content. We have stopped being original and merely churn through the detritus of past decades. The promise of the web in the mid nineties has let us down.

Alternately sounding like a truth-teller and a crank Lanier rails against the limits of MIDI, status updates on Twitter and Facebook, open-source culture, the lack of original music since the 1980s, Wikipedia, search engine optimization and belief in the Singularity. It’s not hard to find chinks in his arguments and overreaching leaps, but focusing on those errors avoids the real issues that he delves into. Anyone who works with web 2.0 and espouses openness owes it to themselves to read this opposing view and not dismiss Lanier as a late hippie lamenting the good old days and unrealized promise that they held.

You Are Not A Gadget is a post from: Trumblog

I found out last week that I have become something of a web design stick in the mud.  It was because of my friend Eddie Perez”s review of JimCarrey.com.  Fittingly the design and user experience of the site is as unique as the actor and as Eddie puts it,

The site was clearly designed to give visitors a chance to unearth the content through exploration. Cinematic transitions between pages, coupled with great use of sound effects and eerie background music make it seem as if you’re not just discovering the content on the site, but also the mind of Jim Carrey as well.

That same day I met a woman who’s website home page was a mosaic of randomly generated set of YouTube videos that expand when rolled over.  For both sites I reacted violently against the design.  I didn’t want to work so hard to discover I wanted the content that I was looking for and I wanted to find it easily and accessibly. My God, I thought, I’ve become Jakob Nielsen!

What made me such a curmudgeon? Maybe it’s the hours that I’ve spent in usability testing.  Maybe it was the fights about the logic behind cues for wayfinding in website navigation, work that led me to consider writing a book about best practices?  Maybe it’s that I lived though the early years of web design where an image of an office served as the metaphor for the navigation of a corporate website?  Maybe I’m just old, but I like standard, left navigation, no bells and whistles web design.  I don’t want to explore, I don’t want unique experience.  I want to find things quickly and easily so that I can move on. Maybe it’s ADD?

Even the bottom navigation of Jim Carry’s site was not enough.  I needed the nav easily accessed, spelled out and easy to understand.  Maybe I have too many toolbars on my browser? I want what is the target of each link to be  obvious  and I want to get there fast.  I’ve become a stick in the mud when it comes to that stuff.  I am set in my ways and cringe at navigation that is spaced across the page beside little logos or pictures and clearly not governed by CSS.  I know what I like and what I don’t and I’m not going to change.

Now, you damn kids, get off my yard!

Update: Yesterday Conor Brady shot another spitball at my love of highly usable web design and navigation in his post Web Design Has Changed Since 2000, Why Haven’t Evaluation Standards? Argh, back in my day….

I Hate Artsy Website Navigation is a post from: Trumblog

And How To Find The Facebook Event Page

Last week on Lifehacker I stumbled upon a handy tip from Sean Bonner on  how to export your Facebook events into your Google calendar.

1. In Facebook, go to your EVENTS page.
2. At the top of that page click EXPORT EVENTS
3. You’ll get a pop up window with a URL, copy it.
4. In Google Cal, on the bottom left you’ll see ‘Other Calendars’ and below that a link to ADD. Click ADD
5. One of the new options you’ll be presented with is ADD BY URL, select that
6. Paste the URL from Facebook where it asks for it.
7. Fin

It’s really easy.  Unbelievably easy until you try and find the Facebook Events page.  It turns out that there are many Facebook Events pages and not all of them have an export link.  I assumed that the Events page in question is the one accessible from the Events tab on my Profile page,

but when you go to that page there is no export link to be found.

So then I tried the page for one of the events themselves.  Perhaps along with the event details there would be the “export events” link that I was searching for.  I knew that this made little sense, but since some elements of the Event page is personalized for me when I view it maybe the link would be there.  It turns out that I was half correct.  On the Event page there is an export link, but it is for exporting that individual event as an iCalendar file that you can then import into your calendar.  That was helpful, but I didn’t want to have to do this import export dance for every Facebook event.  I was looking for a promised solution that would import all of my Facebook events forever and that I would only have to do once.

Finally, a couple days after I had given up on finding the link, I figured that maybe the hack was outdated and the functionality was lost in an earlier Facebook layout update, I noticed the events box in my Home page right hand column. I clicked “See All” and lo and behold another Events page revealed itself to me. That’s right, a second Events page and on this one, in the upper right corner there was a link to “Export Events”.

I clicked it and it opened the pop up window that I was in search of.  I copied the link, pasted into Google Calendar and the hack worked perfectly.

UPDATE: This post was written before the latest Facebook layout was rolled out.  The new layout appears to have removed the export events link.  This issue has been reported to Facebook and as soon as I am aware of a fix I will update this post with that information.

I’m writing this for two reasons.  The first is so that if anyone else can’t find the right Events Page on Facebook to run this little hack hopefully this post will guide them there.  The other is to say “Hey Facebook, I know that you are rolling out some layout changes this week.  I’m not sure that changes to the Events pages are one of them or not, but Facebook you have a usability issue here.  If it’s resolved next week, thank you.  If it isn’t then heads up you have a usability issues with your Events page. First, you have two of them, which is not a good thing when it comes to website usability.  Second, they have different features on each page. And finally, a handy bit of functionality is missing from the Events page that you’d think would be the most personalized.   I’d be much obliged if you could clean this up.  Thanks.”

How to Export Facebook Events Into Your Google Calendar is a post from: Trumblog

I’ve already posted about what the 350 campaign is and the results of 350′s effort. They are a fantastic organization and what  particularly was impressive about their organization is the way that they used social media. Here are 6 of 350′s tactics that you should emulate  when creating your own social media campaign and 4  lessons that you can learn from in order to do even better.

1. Provide blogger and media resources – 350 has video, images, a map feature and even blog widgets on their website all of which are download-able or embed-able by bloggers in order to spread the word about the cause.  Not only does providing this make it easier for bloggers (and the mainstream media) to write posts about you, but those posts have media that makes them more interesting and that media is in your language.  The more media that you provide the better chance that it will be used over someone else’s and that your specific message will be spread in the way that you want. Are you making the media that supports bloggers and is easy to find, access and include?
2. Provide a hashtag – a hashtag is  the pound sign followed by a short keyword that is added to the end of a tweet or included as a tag for a photo or video so that media can be easily found when searching.  For 350 the hashtag was #350ppm, which frankly a lot of people shortened to just #350.  Spreading your hashtag around helps there to be a consistent tag used to makes finding content related to the campaign easy.  Do you make it easy to find and share content about your campaign?
3. Use social networks and media deeply – 350 isn’t just on Facebook, Twitter, YouTube and Flickr, they incorporated the social networks into their campaign.  Have you so completely utilized the power of social network sites?
   1. On Facebook you could fan 350, become a member of the cause, learn information about 350 on their page, but then also 350 encouraged fans to update their status message to spread the word to friends who had not yet been activated.
   2. On Twitter 350 kept their followers updated, responded to information and passed along information from other Twitterers as retweets.
   3. On the YouTube 350.org channel there were regular video updates on the campaign as well as those videos I described earlier that did an excellent job to explain the campaign.  350 started with a brilliantly easy way of explaining the goal for stopping climate change and then they produced a video that did a brilliantly simple job of explaining that. Have you distilled and explained your message so simply?
   4. On Flickr 350 began with posting their logos and posters, but, since one aspect of the campaign is the photos of 350 gatherings around the world, they continued to use the network by posting the resulting images.
   5. On SlideBoom there is a PowerPoint presentation on 350 that can be used to reach we corporate types.
4. Go mobile – 350 sent updates to supporters via text message and has an iPhone app to spread the word.  Can your followers get information about your campaign when on the road?
5. Wear the campaign – Want a 350 t-shirt, sticker, button or tote bag (to use rather than plastic bags at the grocery story, naturally)? Allow your followers to spread the word with products from Cafe Press.  So easy to set up and so often overlooked.  Can I wear your slogan or product name?
6. Think further outside the box – 350 has music, there are stencils, they have headbands, I even saw a suggestion for tattoos, they would have been a perfect fit for the campaign, but I didn’t see them anywhere on the website.  These creative ideas may be too offbeat for your campaign, but fit the 350 vibe perfectly.  What are some non-traditional ways of spreading the word that would appeal to your followers that you should be using?

Now here are a few more things that 350 could have done better.

1. Use the right hash tag – why #350ppm, when #350 would do?  A search for #350ppm will miss a lot of good content.
2. Make social media integration easy – for a campaign that was so focused on the images I’m surprised that the 350 group on Flickr has as few pictures as it does and has not been publicized as far as I can tell.  Instead of harnessing the Flickr photos that participants would logically post, instead the site provides information on how to email photos.  Videos need to be uploaded rather than collected off of YouTube. These unnecessary extra steps are non-intuitive, make it harder to share and collect media and mailing large media files is a bad idea in general.
3. Make your content easy to find – in writing this post I found content on the site that I had no idea was there.  Why, because it was hidden by awkward navigation, bad information architecture and duplicated content.  Don’t let structural issues make your hard produced content and media go to waste.   Make it easy for everyone, especially bloggers and the media to find all that good stuff that you want publicized.
4. QA your website – 350 has done so much right with their site and it was probably a labor of love, so I feel bad pointing this out, but there shouldn’t be any broken links.  I’m not saying where they are and 350 does have a contact us page for receiving feedback, so maybe they will be fixed by the time that you read this.  All is forgiven 350, but everyone else should learn from this error.

Any other ideas from an activist campaign that you would use for marketing?  Anywhere that you feel I’ve gon too far?

Use Social Media Like An Activist is a post from: Trumblog

Refresh Boston is looking good this month. Think that I’ll  be stepping downstairs to attend.

Note: I’m not affiliated with Refresh Boston I’m just in the general industry and work upstairs from the event.

Refresh Boston: What Makes a Design Seem Intuitive?

Thursday May 28, 2009 at 7:00pm
Microsoft Startup Labs
1 Memorial Drive
Boston, Massachusetts Get Directions
Jared Spool of User Interface Engineering

Everyone wants an “intuitive” interface: the users, the designers, and the content publishers. But building them is hard. User Interface Engineering’s recent research has given insight into why it’s hard and how to get past major obstacles.

To build an “intuitive” interface, a designer has to do two things: (1) Take complete advantage of what the user already knows, so what they see is completely familiar to them and (2) make the act of learning anything new completely imperceptible to the user. It turns out, if the interface requires the user to realize they are learning something, the “intuitive” label disappears instantly.

In this talk, Jared will show:

• How users need both tool knowledge and domain knowledge to complete their tasks
• How simple problems with designs can cause big problems for users
• What successful teams are doing to create experiences that delight

Refresh Boston: May 2009 – What Makes a Design Seem Intuitive? is a post from: Trumblog

Some  symbols are obvious, like red hexagons and yellow triangles for street signs.  Some are less well known, but unconsciously drive our understanding and decisions, such as orange being the international color for decaffeinated coffee.  At our peril we ignore these shorthand identifiers and therefore risk misunderstandings and errors.

Baking Soda, Baking Powders and Their Containers

Baking soda and baking powder are very similar.  They are both ” leavening agents” , which means that they are used to increase the volume and lighten the texture of baked goods.  They both have the word “baking” at the beginning of their names.

However, baking soda and baking powder are different. Baking powder is basically just baking soda mixed with an acid, like cream of tartar.  This means that they are not a 1:1 replacement for each other, though you can see that it is easy to whip up some fresh baking powder from scratch if necessary.  If you make the mistake of using baking soda when you should have used baking powder you’ll probably realize it when either your pancakes turn out hard and flat or with a bitter, tinny taste.

Arm and Hammer is the best known brand of baking soda and for baking powder it’s Rumford. Considering how close the two products are I have no idea why neither brand seems to sell both products, but they don’t.  Whether it was purposeful or not these two products come in two different and very distinct styles of containers.  Arm and Hammer baking soda is sold in a familiar yellow box and Rumford baking soda comes in a small red cylinder.  These styles of container have become visual shorthand for their contents.  There’s no need to read the exterior, the style of the container says it all.

The Perils Of Ignoring Expectations

If you don’t have one nearby, Trader Joe’s is a specialty grocery store that sells organic and gourmet  foods as well as staples, many with a house brand label.  It’s a niche market that people either love or hate.  A while back I thought that I bought baking powder when shopping at Trader Joe’s and didn’t find out that I had actually bought baking soda until we wondered why our pancakes tasted weird. Looking at the container on the right, you’ll understand why I made the mistake twice (once when I bought the can and again when I used the can thinking that it was baking soda).

The small red cylinder that Trader Joe’s puts its baking soda in clearly mimics Rumsford’s baking powder packaging.  Not only that, but the fact that the baking soda isn’t in the small yellow box that I, and most of America has grown to associate with baking soda is also confusing.  It’s a double whammy.  Sure the package says “Baking Soda” on it, but to shoppers and cooks who for years have associated one type of packaging with this product  why bother reading the label.  Arm and Hammer and Rumsford have been so successful in their marketing that we associate the packaging that their products come in as shorthand for the products themselves.  We’ve been conditioned to not have to look at the brand or the product name, just the type of container.  This makes it easy to mistake the Trader Joe’s baking soda for baking powder and is the reason that we label the top of  our container in order to avoid mistakes.

Learning From The Mistakes Of Others

I write this both as a warning to all of you who shop at Trader Joe’s and also as a lesson on usability. Trader Joe’s probably had good reasons for developing their Baking Soda packaging the way that they did.  I’m guessing here, but I can imagine a designer explaining how much nicer it is to have a matching set of red containers rather than the Laurel and Hardy pair of a  squat yellow box and tall thin can.   The cylinder is also a better container in general.  It’s more easily resealable, the yellow box never fully closes after it’s opened, and the canister has a handy straight metal edge at the top that is so useful for leveling off a teaspoon measure.  Smart people had good reasons for this design.  But it’s problematic because it conflicts with user expectations.

It’s a usability issues that I’ve run into myself. Many times I’ve reviewed website designs where a designer has developed a new navigational element or functionality like a search window that uses a new or different layout or icon.  We discuss how it works and it all makes sense, maybe it’s even better than what is “standard”.  But 9 out of 10 times in usability testing we run into problems because the new indicators are different from the visual shorthand that the visitors to the site expect.  They don’t see the new icons or understand what the icons are telling them.  It’s not because the designs are bad or because the visitors are stupid, it’s just that they expect something other than what they are given.  And when that happens there are problems.

These are the usability and design issues that are the hardest to uncover and prove why usability testing is so necessary.  Clients, project managers, designers, developers we all get too close to a project to realize the assumptions that we’ve made and that fresh, new, visitors won’t.  Only usability testing can uncover it and is why it’s so critical. What packaging usability issues have you run into and are you doing enough testing with your own projects?

Baking In Usability Testing is a post from: Trumblog

Ouch! Now I’ll admit that some of the websites that I’ve produced may have been unimpressive, but none of them were for the leadership of the free world.

Online Media Daily found that only 36% of people who visited Hillary Clinton’s site had a more favorable view of her after visiting her website HillaryClinton.com as compared to results higher than 50% for the websites of Barack Obama, Mike Huckabee and Ron Paul. John McCain’s site faired a little bit worse with improving his image for 44% of visitors.

Person Mike Huckabee

Right click for SmartMenu shortcuts

HillaryClinton.com Not Polling Well is a post from: Trumblog

Here is another of my old posts from a now defunct blog, originally posted 5/31/07.

I was in Minneapolis the other day visiting a client, and while my client rented a car, I tried out the rental car company’s new kiosks where you can print out directions to your destination. These kiosks should be a win, win, win. I get accurate directions customized to the detail that I want, the car rental company employees are more efficient because they don’t have to talk me through my route and millions of pink highlighters are saved from marking my path on a map that never had enough detail. But the kiosks don’t deliver on that promise. The reason is poor usability, which was bad enough that eventually an employee took pity on me and printed out the directions himself.

So what made the kiosk so difficult? In order to get directions of course you need to indicate where you are going and the interface made that near impossible. The home page provided a few most popular destinations, which was great, but when the hotel that I was staying at wasn’t included in that list the functionality broke down. Getting to a complete list of locations was unclear and the names of those locations were not in alphabetical order. To make things worse, the name of my hotel in their listing was different from the name of the hotel in my reservation, so I just hoped that I picked the right place. I’m 6’3” so I’m used to hunching over at ATMs, but the screen on this thing was at about waist level and angled to make reading and touching the screen really difficult. Finally, the directions were printed on thermal fax paper. I didn’t know they still made that stuff, but if you were wondering they do and the print quality has not improved.

I’m sure that when the interface was developed the designers felt like it was perfectly clear how to find a location. But when we design interfaces, navigation or tools we invariably get too close to the design or do not understand the audience well enough to avoid all the usability pitfalls. I know this because it happens to me too. The solution to this situation doesn’t have to be expensive or complicated usability testing, nor should it be; the biggest issues are uncovered by the first 5-10 test subjects which leaves you time to revise and retest to make sure that you actually fixed the issues that were uncovered. You just need to do the testing and then have the motivation to actually address those issues even when they conflict with previous decisions and impact the budget.

I hear all the time that my clients can’t afford usability testing, and in those cases I do it quickly on in-house subjects. But doesn’t this example illustrate why you can’t afford not to usability test and thereby resolve problems in advance? For this rental company, poor usability resulted in an opportunity for customer experience enhancement squandered and the significant investment in hardware and software wasted. Finally, the employee time savings that they probably hoped for was lost; especially when we returned the car and an employee was stationed at the kiosks while a line of customers waited to check-in.

What bad usability experiences have you had? Where have you noticed employees doing more work when customers can’t use new devices? Have you been guilty of skipping usability-testing? Have you learned your lesson?

Misdirections is a post from: Trumblog

My friend Donna regularly point out on the sites and elearning courses that we produce that right hand portlets can look like ads, which can then be ignored by visitors. I love to prove her brilliance and if I can do that by citing Jakob Nielsen that’s even more fun. His article on site design failure due to content looking like a promotion explains Donna’s point perfectly. Especially love his use of heat maps to tell the story. Good stuff.

We Know An Ad When We See One is a post from: Trumblog