Archive for the ‘ Web Design + Development’ Category

UX Scotland Round-up

Monday, July 1st, 2013

It’s been almost a week now since the inaugural UX Scotland up in sunny Edinburgh. Here’s my round-up of what I saw and what themes came up during the two days of talks and discussions.

Overall I think the most interesting theme I took from the conference was that of context. A lot of this started on day one after a goldfish discussion on the future of broadcasting and was cemented by Giles Colborne’s keynote on day two which looked exactly at context and what it means for user experience.

Context is a great challenge for user experience designers: getting the context right for a user is a wonderful experience. But getting context wrong and it the experience is awful. Getting context right is the real challenge.

UX Scotland

Day one

After a quick intro from the organisers (Software Acumen) Jeff Gothelf kicked off the talks with the first keynote: “Better Product Definition with Lean UX & Design Thinking“. This was a great reminder of how products can (and will) fail if you simply make assumptions about your users. The demise of Plancast is a stark reminder of how not really considering your users can lead to disaster.

I was lucky enough to be talking next: my debut presentation of Play & Engage: Practical Ways to Gamify Your Content. (There’s also a fairly comprehensive blog post of my key points available too). Unfortunately on at the same time was Graham Odds talking about data visualisation, which I really wanted to see — you should check out his slides if only to admire some masterful and beautiful CSS3.

Next up: Martin Belam took a look at “Designing ‘The Bottom Half of the Internet“. He took us through the love-it-or-hate-it world of comments and demonstrated some truly staggering douchebaggery in the form of comments left on Holly Brockwell’s blog after her open letter to Hyundai regarding their awful ‘suicide ad’. A key lesson for anyone involved in moderation: comment often. It seems most commenters are not unlike five year old children (are you really surprised?) and some grown up presence seems to help them behave.

Then I sat in for a double-feature of internationalisation and user experience: Chui-Chui Tan gave us some great insight into how different cultures use technology with Your Mobile Experience Is Not Theirs. Chris Rourke followed this up with Cross Cultural UX Research – Best Practices for International Insights that gave some valuable insight into working internationally (and user testing remotely to boot).

After this was a real highlight: the goldfish discussion on broadcasting in a multi-device world. Rhys Nealon from STV kicked off the discussion with several industry figures — and it soon went from being a panel discussion into a general group discussion which was fantastic. Pretty much everyone attending contributed: it’s amazing how everyone has an opinion on consuming television content.

But the overriding challenge in this multidevice world soon emerged as context. How can Netflix (or any other product) differentiate between me watching Games of Thrones and then my children watching Sesame Street — without a myriad of different logins? How can we balance discovery with curation? Not many answers from this discussion but some very exciting questions.

To end the day Sam Nixon from RBS took us through a look at the future of money and specifically digital money services. How can we make online banking more useful? He provided some great insights into how useless breaking down your ‘monthly’ spend is and instead proposed easier and smarter payment systems (such as Barclay’s Pingit) will be the real future of digital money (along with a few mentions of — of course — Bitcoin).

That’s was the end of day one: time to head over to the Voodoo Rooms for some hard earned drinks (and some very fine curry).

Day Two

As I’ve already touched on, Giles Colborne added nicely to the context theme with his in-depth talk looking at all facets of context and how it affects user experience.

Following this was an immensely fun and very useful look at “How to Make Your First UX Comic or Storyboard” with Bonny Colville-Hyde. I’ve been sketching here and there for my whole life but this certainly gave me some inspiration to take it much further.

UX Comic
Look! I made a comic!

After another wonderful lunch over looking the Salisbury Crags, Ian Fenn took us through his experience in “Getting UX Done” which had a nice element of humour in amongst practical advice on dealing with all manner of challenges. Immediately after Mike Atherton took a look at “Brand-Driven Design“. A glass of whiskey and some cigar smoke would’ve nicely rounded off his look at advertising from the 60s and how brand is a fundamental part of any experience.

The final presentation of the day came from Cathy Wang. In “The Future in Designing for the Sex(es)” she explored what future implications the blurring of gender might have for experience design.

And thus concluded two days of diverse and very interesting look into UX. Fantastic talks, great venue and awesome people really made it worth the trip up (not that I ever need much of an excuse to go to Edinburgh). It’ll be great to see what UX Scotland 2014 has to offer next year.

The Webby Awards and what Government sites really need to be?

Sunday, May 12th, 2013

Earlier this year, the new UK Government portal GOV.UK won “Design of the Year” from the Design Museum. But this wasn’t just in the web or digital category — it was THE design of the year. The site was valued higher than the architecture and construction of The Shard and even the Olympic Cauldron from London 2012. An amazing precedent for digital work that rightly illustrates what a tremendous and ground-breaking project GOV.UK is and continues to be.

Deyan Sudjic, director of the Design Museum, sums up GOV.UK nicely:

all the things that we would like to take for granted from the Government but, in a sea of red tape and jargon, usually can’t

When the 2013 Webby Awards were announced at the end of April, I made a casual assumption that GOV.UK would make the list of awards. However, it didn’t. But what I find interesting is perhaps not so much GOV.UK’s omission, but more what the actual winner of the 2013 Webby Awards for Government website was.

Hold on folks, strap your bullet-proof vest on and cock your pistol: this shit is about to GET REAL. Ladies and gentlemen, take cover as you visit MILWAUKEE POLICE NEWS.COM. (If you’ve got motion sickness pills, take them now: the parallax is like a stormy sea).


Wow. They say the Webbys are “The Oscars” of the web — and in this case Michael Bay and Vin Diesel have just won. The site is missing one thing: Bad Boys by Inner Circle playing in the background. The site is seriously like an episode of cops… but in some strange futuristic world or perhaps a different dimension.

I’ve not been to Milwaukee, but I was always under the impression it was a quite nice place. However, after visiting this site I’m concerned that Milwaukee is a cross between Gotham City in Christopher Nolan’s Batman films and a city in some Latin American narco-state. (The most wanted section is particularly indicative of this).

I’ve actually got no idea who this site is for. I can’t even see any way to contact Milwaukee Police on this site. There’s not even a single mention of 911 on the page. There is a link to how you can pay parking tickets, but it’s about 10,000 pixels down the page just above the sexy photo of a SWAT van.

So, GOV.UK clearly has a lot to learn from MILWAUKEE POLICE NEWS.COM and their Webby triumph. As a proud British resident (and almost citizen), I’ve decided to help out the nice folks at GOV.UK and redesign their homepage to make it more better and stuff.

Check it out: the new and improved GOV.UK.

Rethinking human verification: transforming the mundane and frustrating into playful and fun

Saturday, April 20th, 2013

Sometimes it seems like the more technology we use to make our lives easier the more frustrations we are subjected to. Take for instance my own personal pet hate online: the awful CAPTCHA.


Reviled by all, CAPTCHA’s have become an accepted burden online. It feels like these unpleasant snippets of mangled text have become the first line defence in a war against machines and bots — based on the theory that humans are able to decipher these riddles better than machines. For now, at least.

CAPTCHA: Rise of the machines

Many alternatives to CAPTCHA have been proposed. Some of the best defence systems against bots are actually invisible to users — for instance the honeypot technique. The less human users are bothered the better, but there is another alternative approach that works remarkably well: so well, in fact, that it’s actually quite fun doing it.

When Facebook registers unusual activity on an account — for instance logging in from a new computer or overseas — it will often prompt the user to verify their identity.

One option it gives is identifying friends in photos.


This approach well and truly turns user verification into a simple game: you get three photos of five friends you must identify (and two skips — which is useful in case it shows you the photos of some friend’s baby or dog or other randomly tagged photo).

The photos chosen are totally random and the process is quite fun. Not only does it make a serious issue like security verification a positive experience, the entire process is so great because the alternatives — such as CAPTCHAS — are so absolutely awful.

Facebook is different from say a ticket booking website in that is does have the luxury of having a huge amount of personal data to draw on. But surely with some creativity many websites could find a more creative way to filter out bots?

Let’s say, for instance, I’m trying to order some Black Sabbath tickets. Why not ask me to identify Black Sabbath from a group of images (or some music as an accessible alternative)?

Black Sabbath

Beats the hell out of a CAPTCHA — even though it might involve a bit of Justin Bieber.

On GOV.UK’s “How designers work”

Friday, March 15th, 2013

Earlier this week, Peter J. Bogaards tweeted a link to a curious quote from the recently published GOV.UK guidance on what to look for when hiring a designer for a Government team:

Looking at the specific guidance, most of it is very good:

How designers work
Designers and front-end developers should work together in one team, designing in-browser. This is a better way of working, avoiding silos and ensuring that decisions are made with complete awareness of the implications.

As a result, the people you hire should already have worked like this, or at least understand it.

When building a team ask to see examples of work and ask the designers to talk you through their contribution….

I totally agree with this. Designers and front-end developers working together in harmony is a wonderful thing and in turn enables us to create wonderful things.

But I’m not so sure about the next piece of advice:

Avoid CVs that emphasise the terms “ux” and “creative”. Especially avoid “creative directors”. These people are probably not a good fit for your team.

On a purely practical level, if you threw away every CV that had the word “ux” or “creative” on it you’d probably be left with a very small pile — if you had a pile at all. Being flippant for a second, imagine this structured as advice for a football coach:

Avoid CVs that emphasise the terms “striker” and “defender”. Especially avoid “captains”. These people are probably not a good fit for your team.

Looking firstly at creative: if a designer isn’t creative, what are they? Isn’t that the entire core of a designer? “Creative designer” seems like a tautology. Creative director is named as such as it describes a position of leadership, seniority and experience. If you’re looking for someone of mid or junior experience, then no, they probably won’t be a good fit.

If I’m not looking for the word creative in a CV, what words should I look for? Digital designer? Visual designer? Web designer?

Now looking at ux, this is where my feelings are slightly stronger. Why should I avoid “ux” designers? If you’re trying to build “user-centred products” then the designers who strive to build such things are often marketing themselves exactly as UX designers. There’s no definition of what UX is either on this page — nor any explanation of why they should be avoided.

Instead of UX designer should I be looking for interaction designers? Information architects? Web designers? Multimedia designers? Interactive designers?

I’m really curious as to why GOV.UK gave this particular advise. It doesn’t give any reasons why creative and ux designers should be avoided — nor what to look for instead. I was hoping to get some insight into this by looking at the Job description templates but unfortunately they’re hitting a 404 page at the moment.

I hope they can clarify this advice in the future — otherwise I think their advice is likely to confuse more than assist.

A little problem with following on Twitter

Tuesday, March 5th, 2013

Twitter has an excellent onboarding process that ensures you’ll be seeing tweets of interest within minutes of signing up. This is all part of Twitter’s consistently great user experience; however lately I’ve stumbled upon one exception to this:

Twitter: You are unable to follow more people at this time

You are unable to follow more people at this time.

Lately I hit the 2,000 mark of users followed on Twitter. This is indicative of what I was talking about above: Twitter is fantastic at encouraging you to follow more and more. The “Who to follow” pane is like an intellectual donut shop… juicy avatars of all sorts of users it believes you’ll be interested in.

Mmm, Twitter donuts

And you just want to keep on eating. It’s a classic feedback loop: you click follow and you’ll get a new avatar appearing to tempt you again into following. It’s like a social network slot machine.

But therein lies the issue: depending on your level of followers, sooner or later you run out of coins.

Now Twitter has an interesting support article on following limits that explains how it works. It’s a tricky balance for them: trying to maintain their service, avoiding spam and abuse… there’s a lot of issues at play here.

For me the issue isn’t that they stop you following more than x followers, it’s more the lack of response the interface has to this limit.

It’s a pretty standard and simple convention in UI design that if a user can’t perform an action, either don’t show it or show that it is unavailable. Even though my Twitter follower list is now capped, Twitter still urges me to follow more. Yet if I click “follow” I’m thrown up the same old message: “You are unable to follow more people at this time. Learn more here.” Not great.

But here’s where this issue takes a turn for the worse. There are two ways to follow new people if you’ve hit your limit:

Unfollow users

Unfollowing users on a social network is a slippery slope. It’s hard to maintain a thick skin with this sometimes; anyone who’s used a service like Qwitter knows that it’s hard not to take these things personally when someone unfollows you. Was it something I said? Am I tweeting too much? Am I not as funny as I think I am? Am I tweeting many amusing cat videos? Or has that person hit their limit and is just “pruning” users?

And it’s often tit for tat: if someone unfollows you, it’s only human to want to unfollow them. And ironically, that means both users are followers down now, which sadly affects the number of users you’re allowed to follow: Twitter mentions ratios between following and followers, but doesn’t publish them.

Gain more followers

Telling users to get more followers is potentially negative as well.

“You’re not popular enough.”


Flash backs to highschool anyone?

A more elegent solution

This could work a whole lot better, with a few simple changes.

One option would be to remove the whole “who to follow” pane altogether. But surely there’s a better solution than that.


Let’s say you’re ten users away from your Twitter limit. Why not communicate that to the user?

You're only ten users away...

Positive actions

And if you’ve hit your limit? Why not encourage the user to try and gain more followers?

Join the conversation?

This way the drive to continually interact and engage with Twitter remains while removing frustrating and potentially negative experience.

Your year in review on social networks: Twitter vs Facebook

Sunday, January 6th, 2013

On December 12th I noticed a link on Facebook: “2012: Your year in review”. Boldy it proclaimed:

“A look at your 20 biggest moments from the year including life events, highlighted posts and your popular stories.”

2012 in review

I love these ‘end of year reviews’. They’re one of the best things about the close of the year — looking back over the year that was and reliving highlights (and often lowlights). Some of the more interesting ones from 2012 were Google’s Zeitgeist 2012, 2012 Year on Twitter and The Atlantic’s 2012: The Year in Photos.

Naturally I was really interested to see a personalised year in review from Facebook. Given that I use Facebook a lot — and therefore Facebook knows a lot about me, and has a lot of my data — my expectations were quite high.

Unfortunately, my Facebook year in review was woefully underwhelming. (If you’re friends me on Facebook, you can see my Year in review — or see your own — which is hopefully more interesting than mine).

So why was mine so underwhelming?


When more is actually less

Friday, September 28th, 2012

Lovefilm is a great service. I get plenty of value from it, and I easily watch hours of movies and TV shows on it each week both on my laptop and Playstation 3 (and possibly on mobile — if only they had a mobile streaming service)

Going back to TV specifically, I’ve been slowly making my way through countless hours of Lost on Lovefilm.

I’m in the final stretch now: only a few episodes left of the last season. But at the end of each episode, something happens that just drives me crazy. I see this come up on my screen:

The helpful ‘More like this’ screen suggests Justice with Nicholas Cage and a show called Spartacus: Gods of the Arena. Now I could easily question how relevant these suggestions are to Lost, but what really irks me is…

Why the hell isn’t there a link to the next episode of Lost?

In fact, there is no link anywhere on the entire page to the next episode. There are similar recommendation links on the page that link to random episodes I’ve already seen, but nowhere with a direct link to the next episode. Which would be the most relevant piece of content that could be suggested to me.

You can’t even hack the URL:
(…unless you know the name of the next episode and some mystical six digital ID)

Basically, I’ve got to hit the back button and remember what episode I just watched and click on the next episode under it.

Ultimately, watching TV series like this is infuriating. ‘More like this’ is actually ‘Less like this’.

Please Lovefilm, for Hurley’s sake — just add a link to the next episode in!

Intelligent defaulting, responsive clarification

Saturday, August 25th, 2012

Checking the weather on a gorgeous spring day in London (ostensibly to see how long the beautiful weather will last), and this is the experience documented from the BBC Mobile site:

After clicking weather, I was then prompted to search for my location. I entered London. I was then presented with 15 options for London — the first two in South Africa. BBC Weather is usually pretty good with geolocation, but for some reason on my mobile it can never work out where I am.

That’s not so bad; but seriously, if I enter ‘london’ into any site (let alone the BBC), surely London UK is a far more likely match than East London South Africa or London Canada?

What percentage of users would benefit from defaulting London to London UK (population 8,174,000) and making users from London Canada (population 366,151) and East London South Africa (population 135,560) then change to their London? An awful lot.

Google Maps does this very well: it contextually defaults to the closest geographic match and gives the option of ‘did you mean a different x?’

Intelligent defaulting, responsive clarification: it’s really not that hard.

Life would be so much easier if more sites did this properly; I look forward to the day when I don’t have to see insanely stupid screens like this (thank you journey planner):

Dinosaurs, latin and iconography

Monday, February 27th, 2012

Earlier this year I went to the Design of Understanding conference at the St Bride library in London. Organiser Max Gadney compiled an fascinating and eclectic list of speakers for the day; and while all the talks were great, for me paleoartist Luis Rey was the real highlight. Not only because of his amazing art and sense of humour, but also the way he described how for a long time his vibrant artwork was shunned by the scientific community. His philosophy to recreating dinosaurs in art is that with only bones, how could anyone really have any idea what colours or textures made up dinosaurs in real life?

Chirostenotes (Copyright Luis Rey)

However, with the discovery of feathers on a dinosaur in China in the 1990s, suddenly Luis Rey’s artwork seemed perhaps not as fantastic as originally thought. He is now one of the foremost and well-respected paleoartists — working with many leading palaeontologists on the amazing Dinosaurs: The Most Complete, Up-to-Date Encyclopedia for Dinosaur Lovers of All Ages.

During the talk Luis spoke of how the Tyrannosaurus rex has — and still is — often very inaccurately potrayed.

First ever published reconstruction of a Tyrannosaurus rex

The classic image of a Tyrannosaurus rex is that of a lumbering predator with a bipedal posture. But how could the Tyrannosaurus rex possibly catch anything with a stance like this? Scientific theory has changed its view of the Tyrannosaurus rex dramatically over the years — and now sees the infamous dinosaur as standing parallel to the ground with its tail extending behind.

How the Tyrannosaurus rex’s posture is now seen by science

While science’s understanding of the Tyrannosaurus rex has changed, that classic image of Tyrannosaurus rex walking on two feet is still very strong in everyone’s minds. If we were playing a game such as Pictionary and you had to draw a Tyrannosaurus rex, would you not at least consider drawing the ‘traditional’ view of the Tyrannosaurus rex in the hope that your partner may guess it faster — spurning science for the sake of victory?

I definitely would — even though I’d feel like I’d betrayed science just a little bit.

During Rey’s talk I realised that no matter how inaccurate a perception of something is, the most common perception is still the most powerful.

Looking at icon design, it’s this very fact that explains why in this world of rapidly emerging technology we still live with some incredibly out-dated yet universally understood icons.

My favourite day-to-day icon — mostly a British thing I suspect — is the symbol for speed camera:

When was the last time anyone saw a daguerreotype-style camera like this? Or the last time your parents or even grandparents saw a camera like this?

Yet the old-style camera icon still remains strong — through the ubiquity of appearing on every major roadway in the UK. Shown in isolation and it would probably confuse people at first. But amongst red, amber and green lights and other traffic-related furniture it is immediately recognisable.

The BBC Global Experience Language was only launched a few years ago but it also contains many strong images of old and almost extinct technology. Old wind-up clocks for alarms, cogs for settings in devices that are wholly electronic — and of course let’s not forget another classic time traveller in the icon world: the floppy disk for save.

The old faithful ‘save’ icon: the 1.44mb floppy disk

The wonderful video below shows some French children being shown an array of old technology. Their reactions are fascinating — especially around 44 seconds in when they are presented with floppy disks.

Yet children learn so quickly I’m sure in the context of a computer desktop they would be able to ‘save’ something by using the save icon with a floppy disk. They know it in the context of a computer desktop, just not in a real world manifestation.

Just like Latin is used in scientific circles as a ‘dead language’ that won’t change, I wonder if one reason these anachronistic icons survive is not dissimilar.

The floppy disk is not going to change any time soon because it’s dead. However, think about the storage devices that have preceded it. Zip drives (100mb — wow those were the days), CD-Rs, portable hard drives, USB thumb drives… and now we head into the world of cloud storage. Updating a save icon to reflect current technology would not only require constant iteration but it would also dilute the power of the iconography and convention that has already been established with the old floppy disk.

Whether it’s dinosaurs, speed cameras or floppy disks there’s no doubt that there are far more appropriate ways to symbolise these as icons. But for better or worse, the most powerful icon is the one that resonates most widely: whether it’s the terribly inaccurate Victorian view of how a Tyrannosaurus rex looked and stood or the use of an obsolete form of storage that most kids today have never seen — and probably will never see.

PHP, MySQL and Unicode: correctly display all characters?

Tuesday, January 31st, 2012

This is a post born from spending hours trying to squash bugs and zap gremlins.

In an attempt to streamline content re-versioning in different languages, I had created a work flow that went like this:

  1. Create Google spreadsheet for easy collaborative editing
  2. Pull down a Microsoft Excel version of the Google spreadsheet (alas, not CSV as the Google-generated CSV wasn’t playing ball with MySQL)
  3. Import this into MySQL
  4. Generate static HTML with translations inserted where appropriate for each language

The process was fine, but somewhere within all these steps something was going awry. Latin characters with accents weren’t showing up properly and apostrophes were rendering in all different ways — �, `â, ? — anything except what I needed. Furthermore, Cyrillic, Chinese and Arabic weren’t even displaying at all.

I tried many things in PHP — preg_replace, utf8_encode, mb_convert_encoding, and even iconv — but all to no avail.

Finally, I spotted a snippet on the MySQL site from 2006, written by Lorenz Pressler:

after mysql_connect() , and mysql_select_db() add this lines:
mysql_query(“SET NAMES utf8″);

…and that was all I needed. In fact I didn’t even need to convert anything into UTF-8 in PHP. Once MySQL was outputting UTF-8 correctly, everything was fine. The database was encoded in UTF-8, so I assumed too much in thinking that meant it would automatically output it in that way.

So, if ever you have problems with MySQL and UTF characters not displaying, try SET NAMES and hopefully that’l fix the issue.