Usability Design

I am such a big fan of usability, my tie-break question when I am working on digital projects is always “what does the user think?”. I am also a big fan of usability testing, although watching it can be painful. I know I’m not the only digital expert to have been shouting at the person taking the test in another room “click on it”.

Put simply usability makes things better. When your site is usable time to learn how to use it decreases, people can recover from an error faster, the logic of the information and use is apparent. In short, from the user perspective the technology fades into the background

Usability also matters in real life.

In the Amsterdam metro the carriage doors include lights with the colour coding – white showing which door will open turning green to show it’s safe to go through the door, and then red to show it’s not. There are also announcements telling you which side of the carriage will open. These steps were taken to improve the usability of the metro network for people with vision impairment or poor hearing, but they work for the rest of us too.

Usability thinking also extends to how information is organised. I find Dutch train timetables easier to read than the Belgian counterparts. The Dutch include a schematic above the timetable to tell you which stations you can reach using the timetable below it, it’s a form of structured navigation. The Belgian timetables are organised by time only – it’s an endless scroll.

Bad design is not just time consuming, it increases the risk of error.

In January the citizens of Hawaii heard or received an alert stating:

BALLISTIC MISSILE THREAT INBOUND TO HAWAII. SEEK IMMEDIATE SHELTER. THIS IS NOT A DRILL.

It turned out to be a false alarm. There were a number of contributing errors and when you see the menu used to select the drill you can see how easy it was to confuse the options.

If you’re designing anything, use experts, it really makes a difference. If you’re creating content for online there are some simple rules to follow.

And if you get some entertainment value out of seeing other people’s UX mistakes, I recommend the Bad bad UX instagram account.

 

Single Source of Truth

Although this sounds vaguely poetic, it has a specific meaning in the world of information systems. It has particular relevance for large systems.

Done well, it makes content management a whole lot easier.

I’ve heard this used most often in relation to company intranets – large companies where the intranet must serve a mass of information to thousands or hundreds of thousands of employees.

In many large companies intranets grew rather randomly, each business line created their own intranet site, as connectivity improved these were joined together allowing employees to browse from one site to another. But the business retained control of all the information that was available on their site, and employees tended to enter the maze of the the company intranet via their business line home page. Very often this works out well.

In companies of this size there are a policies and defined processes on a wide variety of subjects. Many relate to the employee’s own situation; holiday/vacation entitlement, performance review processes or claiming expenses. Others relate to the company’s operations; finance, brand guidelines, recruitment. Often there is a potential legal penalty if the employee does not follow the policy.

In an intranet that is a collection of connected sites the policies tend to be copied and republished multiple times. Which means keeping those versions up-to-date and consistent becomes difficult and introduces operational risk. Imagine an employee in a far-flung office following the finance policy she has downloaded from her local intranet, relying on it to conduct business, and finding out later that it’s months out of date.

The idea behind the single source of truth relies on improved connectivity between local intranets, and a strong information architecture so that a piece of content – in this case a policy – is published in just one place. It may appear in more than one place across the intranet, but in fact each appearance of it is drawing from the same place; that single source of truth.

To deliver this companies must have a connected intranet, a fully thought-out information architecture, a good content managements systems, technical know-how, and governance on the publication and storage of documents. It’s not easy to put this in place in large companies, particularly as intranets are often the “poor cousin” in terms of digital spend.

Obviously the content management should become easier and cheaper, but the really big benefit comes from a risk and compliance stand-point. Having a single source of truth means that you know people are using the same policy across the company, this lowers the risk of errors being made, errors that might leave the company financially liable or create a reputation error. It’s a cost avoidance benefit that can be hard to quantify – until such an event occurs in your company.

Image: truth / Jon Starbuck / CC BY-NC-SA-2.0

The Good, the Bad and the Ugly; 404 Errors

What does the 404 error on your site look like?

  • Start with 10 points.
  • +5 for a search engine on the page
  • +3 points if there’s any ‘sorry’ or empathy expressed
  • +2 points if there’s a home page link
  • +1 point for any other useful link, up to a maximum of 5
  • – 5 points if the layout is confusingly similar to all other pages on your site
  • – 5 points if you return to the home page
  • + 25 points for any humour or demonstration of your brand values.
  • Lose all points if it mentions 404 anywhere on the page

How did you do?

Here’s how some of the smartest brands score, with the page that inspired me to look into this as the final example.

Etsy

10+5+3+2+0-0-0+25 =45 GOOD

There’s some empathy shown, a search bar, a homepage link, and a cute sketch connected to their origins as a sales platform for craftspeople.

404etsy

Nike

10+5+0+0+0-5-0+0=15 MEH

Very boring generic page, looking very similar to every other product page, at least they blame themselves. Nike are such heroes when it comes to branding I’m surprised that this is so dull.

404nike.png

Unilever

10+5+3+2+1-0-5-everything =0 BAD

The page is text heavy compared to others, and the search is under a link, rather than a simple search box, but they lost all points for saying it was a 404 error. It’s a correct statement, it’s just not helpful.

When I first looked for the 404 page I typed unilever.com/404 into the URL bar, and was automatically redirected to the homepage, this was the only site I found that did this.

404unilever.pngLego

10+5+3+2+25=45 GOOD

As you’d expect from the brand behind every geek’s favourite toy, Lego have a suitable graphic using Lego minifigs. There’s a search engine in the header bar, and a link to the home page. My only quibble is that the explanatory text below the image is tiny, it would make more sense to take that text and replace the “Page not found” text which is slightly technical

404lego.png

 

Apple

10+5+0+0+1-0-0=16 MEH

A totally simple flat functional page. I wanted to take points off for using the passive voice in the sentence but I haven’t.

404applesite

Amazon

10+0+3+2-0-0+0=15 MEH

Functional, only one action you can take. Amazon are incredibly data driven so the lack of any apparent thought in the design of this page suggests to me that it’s either super low traffic because people use the search box rather than type URLs, or that Amazon don’t see any opportunity for conversion to a sale from this page.

404amazon.png

Ben & Jerry’s

10+5+3+0+0-0-0+25 = 43 GOOD

Ben & Jerry’s are a fun-filled brand and it’s spread to their 404 page. Not only have they got the search engine, they’ve suggested a brand name for you to search. Very cute image that matches their text. And, now I want ice cream.

404benandjerrys.png

Siemens

10+5+3+2+1-0-0-0 = 18 MEH

I’ve included Siemens as an example as it has solved an issue many European countries face, a multilingual audience. In their case they’re a German company, but with international customers so the information is presented in English and German.

There is a small joke on the page as well, the coloured pixelated image moves, giving you the impression of a TV screen that’s lost its connection, geek joke.

404Siemens.png

Tech Crunch

10+5+3+2+1-5+0=16 BAD

I deliberately looked for these pages in a browser without an ad blocker. I understand that ads give sites like Tech Crunch the revenue to keep going, but in this case it makes it very difficult to see what I should click on. I’d suggest forgoing the revenue on this page and just helping people find their way. Likewise the most popular article list, obviously I don’t have data and Tech Crunch do, but it’d be interesting to see how many people clicked from this page to a “latest” article.

404techcrunch.png

Mashable

10+5+3+2++0-0-0+25=45 GOOD

It’s helpful, easy to read, funny and right on brand.

404mashable.png

You can check the “you’re lost” page (aka the 404 page) of any site by typing “companyname.com/anywordyoulike” into the URL bar, so mashable.com/wearefunny for example. See if you find it helpful – that’s the first test – then look at whether it’s on brand or offers some brand experience for any lost visitor.

Postscript

I just found the Virgin’s 404 message,  it’s the cheekiest yet.

201601_404virgin

Image error via pixabay

Just Stop It: The Curse of the Stock Image


Years ago I noticed that one of our company’s websites used an improbable image across the front page, which turned out to be a stock image. We had a rule in place about stock images which went something like “Don’t use them”. So when I saw the same image appearing on a Nicholas Sparks novel I contacted the web manager who promised to change it, and did about five years later.

In that case there was no reputation damage, in fact few people would have even seen both images and fewer would have made the connection. But what if we’d used a generic “people in office” image and then a magazine had used exactly that image to illustrate an article on say, cybercrime? Not an association you really want people to make about your brand.

There are other examples where choosing a stock image could be problematic; I’ve found customer testimonial images that appear to be someone else’s employee image and all traceable back to one stock photo. It casts doubt on those testimonials.

The testimonials on Cherry Apron Chef include two images of happy customers

 

Both people co-incidentally appear to work for SA softwares

And their colleague on the left seems to have migrated from Rome to Frankfurt, with the help of Expat Guide

“Marcello” also turned up in a website about Rand Paul’s election campaign. I guess the images were chosen to give readers the idea that that Mr. Paul has a wide and diverse group of followers, but it turns out that all the images are from shutterstock, and from a German-based photographer. So much for the local endorsements. Once this was spotted by internet sleuths the images were removed.

The problem with all these examples is that stock images do not grant you an exclusive licence, so other people can re-use the image in their own promotions.

On at least one occasion a stock image has been used to support views not held by the people in the image. Earlier this year a family photo was used in the campaign against gay marriage in Ireland – and the family came out in support of Gay Marriage.

And it gets even worse. This week Donald Trump’s twitter account featured this image to demonstrate his extreme patriotism, and position him as a future leader of the USA.

 

But the internet sleuths spotted something interesting. The soldiers on the lower right, don’t look American, in fact the experts quickly figured out that the image is a stock image from a war re-enactment. So the image used in Trumps campaign to demonstrate his great love of America featured people dressed as Nazi soldiers. The tweet has since been removed and the PR excuse is that it was a “young intern” and that Donald Trump had been somewhere else when the image was posted. So there was a campaign screw-up and Trump blames someone else, immediately. I couldn’t help thinking of a former leader of the USA who famously had a sign on his desk saying “the buck stops here“. So much for “real leadership”!

I understand that using stock images is a cheap way source quality images for your site. But you need to take care using them. I would suggest;

  • don’t use stock images of people to illustrate your employees or your customers, instead use photos of your employees and customers – with their permission! (See this post “Who the hell are these people?” and this post “Photographs of real people work better than inane stock images” from David Meerman Scott)
  • make sure the image is what you think it is, and if there’s doubt look for a new image
  • use the four eyes principle – so two people check every image that is used (no, one person wearing glasses does not count)
  • NEVER blame the intern; it’s your fault for not giving clear instructions, not checking the image, and not having a process in place to manage your content well

Or you could keep it really simple, and don’t use stock images.

 

Just Stop It: Website Overlays

Just Stop it

I hadn’t even  seen the article and the site wants me to sign up and to contact them. If this were a date I’d be sneaking out the back door, escaping the overbearing demands of my date. On this site it wasn’t clear how to get rid of the overlay, it took some random clicking to find that it’s removed by a click on the far left of the screen.

I’ve also seen overlays that whoosh into the middle of the screen if you move the mouse towards the upper tool bar, where the book-mark function is, the overlay attempts to entice you back to read more. But it often comes of as begging for your attention, in dating terms it’s the clingy boyfriend/girlfriend of the internet.

Have these been tested for usability? Am I the only person in the world that resents the interference with my reading time?

Please internet; just stop it.

 

Just Stop it

Just Stop it

 

 

 

Some things are really annoying me in my digital life, here’s a short list of the most annoying.

Please add yours in the comments.

1; Facebook, stop giving me a pointless warning page when I click a link

It’s a link to the New York Times and there isn’t a problem. If this is supposed to be preventing us from opening dodgy websites it fails since it happens on every link so the user (ie; me) learns to click past it very quickly.

Stop it.

2 Content Publishers, don’t make me download an app to read your content.

Given that they could use responsive design I don’t care about one piece of your content enough to use my data limit to download your app.

Stop it…. (cute turtles though).

3; Website designers, stop assuming I want Dutch content

I type in domainname.com and am flipped into the Dutch site, based on my IP address. Lots of guilty sites; google, expedia, msn to name three. I do understand the reason behind this, but make it easy for me to switch languages. Do not do what Kobo does – lets me change the platform language but still delivers content in Dutch (even with a login, it go so annoying that I deleted my account).

Just stop it.

 

Thanks I feel better for letting that out. So much better that this might become a series.

What are your digital “stop it” messages?

Designed to tell the company story

Luxottica, known for its product design, has just updated its website to reflect online design trends – and give its products a stylish showcase.

Luxottica’s site last week – showing the home page and the brand page.

The site served the purpose of communicating company performance but did little to inspire interest in design or products. Given that they design eye-wear for some of the world’s great fashion brands it was a disappointing experience.

Luxottica’s site now – showing the home page and the brand page.

The difference is huge; Luxottica has re-used a lot of existing content to create a rich experience for the user packed with images and video. The navigation is simplified,  brands are highlighted, and the company’s charitable foundation “OneSight” is featured.

But the changes go deeper than just visual, they include;

  • responsive design, meaning this site will look good on all devices
  • shareable content, every page includes the “share” option under an icon
  • pulling in content from social media channels
  • icons used to identify functions across the site
  • “infinite” scroll, combined with persistent left hand navigation
  • increased storytelling, instead of writing text about the company or the brand stories have been collated from across the company to give the visitor a understanding of the whole company.

This website design is on trend, covering a number of the 7 digital design trends I wrote about last year.

There are a few “minus points”; the media gallery includes just 5 images which seems very thin when the rest of the site is so rich, the videos are sometimes very long,  and the content in the individual brand pages is rather uneven (very rich for Oliver People and very thin for Chanel) which I understand is due to some brands being owned while others are licencing agreements.

But the framework is there to deliver great visual content, and tell the brand story to all stakeholders. The team behind the site should be congratulated, it’s a great step in the right direction – Luxottica.com now looks like it’s from a design company.

(Disclaimer; I know the project manager behind this, she’s fantastic – she also used to work for me)