Category Archives: design

Cookie Nightmare

Sept2016Cookie

Do you know how many cookies are placed on your computer? Does it matter?

The EU directive from 2011 had companies scrambling to find good ways of notifying visitors about the cookies being placed on their computer and giving opt-out measures. There weren’t good tools around and translating the law into technical requirements was a bit of a nightmare. Ironically it led to the company I worked for collecting more information, as we needed to be able show that we’d responded to people’s cookie preferences.

There are three common approaches;

  1. Implicit agreement
    a warning is placed on a website saying that if you proceed with viewing the website you accept cookies from the publisher, this is most common on information or news sites, it seems to be more common on UK sites than Dutch sites, here’s how the Guardian presents their cookie notification, they also offer a detailed explanation of cookies.
    Screen Shot 2016-09-06 at 09.04.38
  2. Forced agreement the site is blurred out or obscured and an overlay forces you to click ‘agree’ to proceed, this is commonly used on Dutch sites, here’s the Dutch newspaper Het Parool, you only have the option to accept.Screen Shot 2016-09-06 at 09.00.53
  3. Pop-up with cookie options
    This is rarer, but some sites give you the option to choose which cookies you would like to install, usually giving you a choice of three levels of cookies. The lowest level is those required for website function, the next level relates to site measurement or personalisation, and the third level is often the advertising cookies. It’s this third level that mean you’ll see ads from the same company every time you open the internet for 30 days, no matter which page you’re on. The advertiser is collecting significant information about your site visits.

I’ve heard from web experts that the number of people adjusting the level of cookies they accept is low, less than 1%, which makes it seem a lot of work to manage cookies for a very small group of people.

However Many people manage their cookies though browser settings, it’s fairly easy to do in Chrome and Firefox,  and I suspect people really concerned about cookies and privacy take such measures.

When the ‘pop up with cookie options’ is used it’s not always clear how to find the cookie options. One of the most common tools used by companies (who often outsource the cookie management) is TRUSTe, which does give visitors control of their cookies but it’s not easy to see how.

When opening a website using TRUSTe you are presented with a pop-up that talks about “Your Choices” but is designed to push you to clicking on “agree and proceed”.  The little link to the right, that doesn’t look like it does anything is actually where you find the choices.

cookies1Here are the three choices you’ll get.

cookies2Required cookies just let the site function in a sensible way, it means the site will “remember” your language preference for example, sometimes the cookie only lasts for the duration of your visit. Functional cookies provide data on your visit and advertising cookies mean your data is going to an advertiser or media buyer – these are the cookies about which there should be the most privacy concerns.

In all the cases I’ve checked the default setting is for advertising cookies.

I changed the setting to allow only required cookies, and got a warning that the submission would take up to a few minutes.

cookies3

In fact it took less than a minute – this time.

I think some cookies, like those retaining a language preference, on-site tracking or login details, do not cause any significant privacy issues. Others, the advertising cookies, the tracking cookies, are a potential issue. Yet, despite all the good intentions of the EU directive, only one of the cookie options implemented allows you to opt out of those cookies and that’s not always easy to find.

How do you manage cookies as a visitor? I’ve put a poll up on twitter, let me know on the poll, on twitter, or here in the comments.

 

Header Image; Halloween Sugar Cookies  |  Annie  |  CC BY-NC-ND 2.0

Easter Egg Pheneomenon

2016march_easter

The ones found in media, the chocolate ones are for the weekend.

An Easter Egg is a surprise addition, something unexpected and usually humorous, included on a DVD, movie, music compilation or software. They usually have an “inside joke” quality to them, and some range into rather esoteric geek territory.

Online Easter Eggs

Google leads the way in producing browser-based Easter eggs with easy to get jokes. They’re your standard hollow chocolate Easter egg. Easy enough to consume, and leave you wanting more. Here are some of my favourites;

Search for ‘anagram’, ‘recursion’, ‘askew’ or ‘do a barrel roll’ and watch what happens.

If you use google maps, pay attention to what happens to the pegman, he changes in various locations or to celebrate specific occasions. He’s been a penguin, a witch, a leprechaun a rainbow, a skier and an astronaut. There are two locations I found that still have adapted pegmen.

This slideshow requires JavaScript.

There are also some hidden subpages from Google, a virtual teapot for example, or a bonus puppy shot in the app store.

Easter Eggs In Films and TV

Disney is famous for “cameo” appearances of one character into another movie, so Goofy turns up in the Little Mermaid, and Mickey Mouse makes a brief appearance in Frozen.

The geek TV sitcom “The Big Bang Theory” has a final shot that’s a “card” from Chuck Lorre, the series creator. These are usually on the screen for a matter of seconds meaning it takes some dedication to get to read them. Card #221 is a philosophical rambling on politics and horses.

Easter Eggs In Advertising

Ever wondered why phone numbers in (US made) movies begin with “555”? It’s a range of fictitious phone numbers so that the movie doesn’t accidentally use a working phone number. Except when it does. In 2014 Old Spice included a real phone number in their ad and gave away free super bowl tickets to the first person who called the number.

More delightfully, Innocent, the UK health drink company, included a help line phone number on their bottles. They invited you to call them even if  you did not have a problem and promised to sing you a song if you did. We called and they did indeed sing.

Easter Eggs In Geekdom

I’ll stay out of the seriously geek territory, but will point out that if you open a firefox browswer and type ‘about:mozilla’ into the URL bar, you will get to read a verse from the Book of Mozilla. The verses are written in an eerily apocalyptic style, but do contain references to events that are history for Mozilla. With some historic knowledge you can decode them.

I think companies, such as Google and Disney, which create Easter eggs in their products are displaying a sense of fun – sometimes to the surprise of unsuspecting viewers. They’re also inviting us in, teasing us to become part of the inner circle. Not every company has the platform to do this, nor the company culture to support it, however when it works it’s genius branding.

Still looking for the perfect chocolate Easter egg?  Michel Roux jr reviewed various flavours, and then there’s this, a Game of Thrones inspired dragon’s egg.

Dragon's egg

 

Image: Easter eggs  |  Dan Zen  |  CC BY 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

The Curse of the Stock Image

Screen Shot 2015-07-16 at 07.49.42Years 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

Screen Shot 2015-07-16 at 08.36.28

Both people co-incidentally appear to work for SA softwares

Screen Shot 2015-07-16 at 08.00.52

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

Screen Shot 2015-07-16 at 08.03.55
“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.

Screen Shot 2015-07-16 at 08.11.20But 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.

Annoying Website Overlays

I wrote about three things that annoyed my digital life, one of those (the first one) has stopped, but now I have a new one; website overlays, like this.
Screen Shot 2015-03-08 at 11.07.00
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.

3 Annoying Things On the Internet

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.

facebookmobile

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).

usatoday_mobile

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.

Screen Shot 2014-09-10 at 20.12.56Thanks I feel better for letting that out. So much better that this might become a series.

What are your digital “stop it” messages?

If Content is King, Why Can’t I See It?

I bought a MacBook Air laptop last year, and I deliberately chose the smaller, 11′ model. I love it. It’s small, light, easy to use. The battery life is around 8 hours (Apple says up to 9) and it recharges super quickly.

What I don’t love is how various websites appear on the smaller screen. Let me show you what I mean, the image on the left is from my laptop, the one on the right from my desktop.

This slideshow requires JavaScript.

There are a couple of things going on here;

  • the fashion for large, attention getting images at the top of an article
  • the fashion for large, attention getting images at the top of a page (eg; twitter’s profile pages)
  • increasingly large banner advertisements.
  • the myth that people don’t mind scrolling any more – it’s annoying if you have to scroll to see any content.

I’ve been involved in website re-designs and re-launches over the years and it’s become increasingly challenging to design something that works on all screen sizes, all  browsers and all devices.

Web analytics can provide designers with information about the devices and the screen sizes used, and if a website is design using the principles of responsive design then the same content can be served in a layout optimised for screen size. Of the examples in the slideshow above Mashable and VentureBeat (a wordpress site) both use responsive design, but it doesn’t seem to help. Of course it’s possible that they haven’t considered a separate template for an 11′ screen in setting that up. And by the way – this is not the only model of laptop with a small screen.

So web designers please please please! On your next redesign test – with ads – on a small screen. I really want to read  your content.

Orp Excitement

Almost a  year and a half ago I backed a little kickstarter project that was re-inventing bicycle lights and bells. It was named the Orp and labelled as the world’s first smart horn. I live in Amsterdam, and my only mode of transport is a bicycle with a beat up basket on the front and a chain guard held together with masking tape. Obviously what it needed was a smart horn. I signed up as a backer and waited.

Since then the guys at Orp have been spending a lot of time refining the design and the packaging, I’ve been getting regular updates, and in April they started shipping. I think you know where this is going.

MY ORP ARRIVED TODAY!

I choose orange as a nod to my adopted country, it seems to be easy to put on and take off the bike handlebars, it is rechargeable (via USB), the light is bright and has a flashing option. The design seems weather proof enough for the rigours of Dutch weather, but it’s the sound effects that won me over.

Here’s the on off switch;

And here’s the bike horn with the happy and scary noise effects;

That’s going to be a whole lot more noise than the usual mild Dutch bells, I’m very curious to see people’s reaction. If you want your own Orp Smart Horn, you can order it at Orpland.

Sound Design

How well can you concentrate at work? in the classroom? In this speech Julian Treasure demonstrates how noise can make it harder for us to concentrate, and makes a plea for architects to consider sound in their designs.

It’s one of my regular complaints about modern design, my mother is deaf and wears a hearing aid most days. In most modern cafes she cannot hear what is going on due to the reverberation of sound from the ubiquitous hard surfaces and the music. I recently moved desks in my office just to get a slightly quieter work environment, and I live in an old house – I can hear way too much of my upstairs neighbour’s activities (especially when the football is on). Sometimes I put on some soothing classical music so that I can listen to that instead.

The design fashion for hard surfaces and open plan spaces can make it harder to concentrate, and that’s a loss of productivity in a work environment.

City Design for People

Living in cities and solving the space issues is becoming more important as the world’s population grows and is concentrated in cities. Here are some ideas that could solve these issues in the not too distant future.

I live in Amsterdam, a small city compared to most world capitals, but one that has adopted some of the ideas in this video, apartments are typically small – although those the new build projects are larger, most people cycle, and there are share car schemes already (Greenwheels and Car2Go for example).

My small apartment already multi-tasks on space use, but I would like to be able adapt my living room so that it became a spare room at the push of a button – as opposed to pulling an airbed out of the cupboard, inflating it, adding bedding, and having it deflate as the guest sleeps.