Tags: ux



100 words 060

I spent the day in Greenwich, where there were two different web conferences happening simultaneously—Clearleft’s own UX London, and the annual Talk Web Design conference for web students at the University of Greenwich.

I was bouncing between both events, which meant I never really got immersed in either one. But that’s okay. I managed to meet up with plenty of people at both.

There was one unmissable talk today: Charlotte’s public speaking debut, opening up Talk Web Design with a presentation about her transition from student life to working at Clearleft. It was great. I knew it would be.

100 words 059

Today was the first day of UX London. I was planning to attend. I decided I’d skip the first couple of talks—because that would entail rising at the crack of dawn—but I was aiming to get to the venue by the time the first break rolled around.

No plan survives contact with the enemy and today the enemy was the rail infrastructure between Brighton and London. Due to “unforeseen engineering works”, there were scenes of mild-mannered chaos when I arrived at the station.

I decided—wisely, in retrospect—to abandon my plan. Here’s hoping it’s better by tomorrow.

100 words 057

It’s UX London week. That’s always a crazy busy time at Clearleft. But it’s also an opportunity. We have this sneaky tactic of kidnapping a speaker from UX London and making them give a workshop just for us. We did it a few years ago with Dave Grey and we got a fantastic few days of sketching out of it.

This time we grabbed Jeff Patton. He spent this afternoon locked in the auditorium at 68 Middle Street teaching us all about user story mapping. ‘Twas most enlightening and really helped validate some of the stuff we’ve been doing lately.

Workshoppers of the world

Three weeks ago, myself and Jessica went to Israel. It was a wonderful trip, filled with wonderful food. I took lots of pictures if you don’t believe me.

But it wasn’t a holiday. Before I could go off exploring Tel Aviv and Jerusalem, I had work to do. I was one of the speakers at the UXI Studio event.

We arrived on Saturday, and I was giving a talk on Sunday evening. At first I thought that was a strange time for a series of talks, ‘till I realised that of course Sunday is just a regular work day like any other.

It was a lot of fun. I was the last of four speakers—all of whom were great—and the audience of about 200 people were really receptive and encouraging. I had fun. They had fun. Everything was just dandy.

Two days later, I gave a full-day workshop on responsive design. That was less than dandy.

I’ve run workshops like this quite a few times, and it has always gone really well, with lots of great discussions and reactions from attendees. The workshop is normally run with anywhere between ten and thirty people. This time, though, there were about 100 people.

Now, I knew in advance that there would be this many people, so I knew I wouldn’t be able to get as hands-on as I’d normally do; going from group to group, chatting and offering advice—it would simply take too long to that. So I still ran the exercises I’d normally do, but there was a lot more of me talking and answering questions.

I thought that was working out quite well—there were plenty of questions, and I was more than happy to answer as many as I could. In retrospect though, it may have been the same few people asking multiple questions. That might not have been the best experience for the people staying quiet.

Sure enough, when the feedback surveys came back, there were some scathing remarks. Now, to be fair, only 31 of the 100 attendees filled out the feedback form at all, and of those, 15 left specific remarks, some of which were quite positive. So I could theoretically reassure myself that only 10% of the attendees had a bad time, but I’m going to assume it was a fairly representative sample.

I could try to blame the failure of my workshop on the sheer size of it, but I did a variation of the same workshop for about the same number of attendees at UX Week last year, and that went pretty great. So I’m not sure exactly what went wrong this time. Maybe I wasn’t communicating as clearly as I hoped, or maybe the attendees had very different expectations about what the workshop would be about. Or maybe it just works better as a half-day workshop (like at UX Week and UX London) than a full day.

Anyway, I’m going to take it as a learning experience. I think from now on, I’m going to keep workshop numbers to a managable level: I think around thirty attendees is a reasonable limit.

I’m about to head over to Munich for three solid days of workshopping and front-end consulting at a fairly large company. Initially there was talk of having about 100 people at the workshop, but given my recent experience in Tel Aviv, I baulked at that. So instead, the compromise we reached was that I’d give a talk to 100 people tomorrow morning, but that the afternoon’s workshop would be limited to about 30 people. Then there’ll be two days of hacking with an even smaller number.

This won’t be the first time I’ve done three solid days of intensive workshopping, but last time I was doing it together with Aaron:

I’m in Madison, Wisconsin where myself and Aaron are wrapping up three days of workshopping with Shopbop. It’s all going swimmingly.

This last of the three days is being spent sketching, planning and hacking some stuff together based on all the things that Aaron and I have been talking about for the first two days: progressive enhancement, responsive design, HTML5, JavaScript, ARIA …all the good stuff that Aaron packed into Adaptive Web Design.

This time I’m on my own. Wish me luck!

August in America, day twenty-one

I played truant from UX Week this morning to meet up with Mike for a coffee and a chat at Cafe Vega. We were turfed out when the bearded, baseball-capped, Draplinesque barista announced he had to shut the doors because he needed to “run out for some milk.” So we went around the corner to the Code For America office. The place had a layout similar to what we’ve got planned for the new Clearleft building so I immediately starting documenting it with pictures (although it probably looked like I was just trying to sneakily take pictures of Tim O’Reilly).

Office space Office space

After catching up with Mike, I rendezvoused with Jessica back at the hotel and we headed out for lunch at Mel’s diner. The espresso milk shakes there are a must-have on any San Francisco trip I make.

Espresso shakes

Then it was a race against time to try to get to the Mission Bay Conference Center to catch Sophia’s talk at UX Week. She ran the gist of the talk by me yesterday and it sounded great. Alas, I missed the first half of it, but what I caught was reaffirming much of what I was hammering home in my workshops yesterday.

UX Week wrapped up with the inimitable Ze Frank. As I said to Peter afterwards, he’s always reliable but never predictable.

Having said my goodbyes and my thanks to the lovely UX Week people, I met up with Jessica again for a feast of sushi at Hana Zen, right by the hotel. That’s three nights in a row that we’ve had really good asian cuisine downtown: Thai, Chinese, and Japanese.

We finished the evening in good company at the home of young Master Ben, observing the ritual of games night, sipping beers, and resisting the temptation of the cheese.

Tomorrow we depart for Chicago. Farewell, San Francisco; lovely to see you again, as always.

August in America, day twenty

As predicted, today’s schedule of two back-to-back half-day workshops at UX Week was indeed quite exhausting. But it was also very rewarding.

Every time I run a workshop, I always end up learning something from the experience and today was no exception. The attendees were a bright bunch with lots of great questions and discussion points.

Workshopping Workshopping Workshopping Workshopping Workshopping Workshopping

Once the workshops were done, I felt pretty exhausted. Jessica and I had a quiet night sampling the culinary delights of M.Y. China conveniently located just across the street from our hotel so I could collapse into bed at the end of the day.

August in America, day nineteen

Tomorrow I’m going to be spending all day teaching workshops at UX Week: two back-to-back half-day workshops on Responsive UX. So today I took it easy in preparation for what will probably be a knackering day tomorrow.

Jessica and I moved from Tantek’s place to a downtown hotel near Union Square; like I said, despite the fact that UX Week goes on for four days, they only provide speaker accommodation for three, guaranteeing that speakers won’t be around for the whole event. Very odd.

We checked into the hotel, grabbed some sandwiches and sat out in Yerba Buena park, soaking up some sun. It was a bright blue clear day in San Francisco. After that strenuous activity, we went for a coffee and strolled along Embarcadero, finishing the day with some excellent Thai food …just a harrowing walk through the Tenderloin away.

Now I’m going to fret over my workshop material and have a restless night of stress dreams. Wish me luck!

August in America, day eighteen

UX Week kicked off today. It’s a four-day event: one day of talks, followed by two days of workshops, followed by another day of talks. I’ll be spending all of the third day doing workshops back-to-back.

Bizarrely, even though it’s a four-day event, they only offer speakers three nights of accommodation. Seems odd to me: I would’ve thought they’d want us to stick around for the whole thing.

So, as I don’t get my hotel room until tomorrow, today I had to make my way from Tantek’s place in the Haight all the way over to the Mission Bay Conference Center—a fairly long MUNI ride. Alas, that meant I missed Steven Johnson’s opening talk. Curses!

Fortunately I did make it time for Ian Bogost’s talk, which was excellent.

In the afternoon, I walked over to Four Barrel, the excellent coffee shop that was celebrating its fifth birthday. They had a balloons, a photo both, a petting zoo, games, and best of all, free coffee. Tom popped by and we had a lovely time chatting in the sun (and drinking free coffee).

Seeing as I was in the Mission anyway, it would’ve been crazy not to have a mission burrito, so a trip to Papalote quickly followed. Best of all, Erin popped by. Then, as we were heading home via Dolores Park, we met up with Ted. Just like I hoped!

The United States of August

I’m going to be in the States for most of this month.

See, I’m speaking at An Event Apart DC in a couple of days, which is the first week of August. I’ll also speaking at An Event Apart Chicago in the last week of August. With such a short span of time between the two of events, I figured it wasn’t really worth flying across the Atlantic, flying back, flying over again, flying back again…

I looked around to see if there were any other events going on in between the two Events Apart and saw that UX Week was happening in San Francisco right before the Chicago AEA. I offered my services for a workshop, they readily accepted, and that sealed the deal: August was definitely going to be spent stateside.

My travel plans within the States look like this:

  • Alexandria, Virginia;
  • Philadelphia, Pennsylvania;
  • Sierra Vista, Arizona;
  • San Diego, California;
  • San Francisco, California;
  • Chicago, Illinois.

If you’re going to be in any of those locations, let me know and maybe our paths can cross.

Bye, bye, Brighton. See you again for the first week of September.

Responsive workshopping

I spent most of last week up in Greenwich for this year’s UX London. ‘Twas a most excellent event. The move to the new venue gave the whole event a much more fun vibe and the format of a morning of talks followed by an afternoon of workshops was perfect.

Andy did a great job curating the line-up. It had a bit of a dConstruct-y feel, and not just because we had old friends like Marty, Peter, and Hannah back: Genevieve Bell, Simone Rebaudengo and Richard Seymour all broke our brains in different wonderful ways.

Hats off to Kate who worked her ass off to make sure that everything ran smoothly. Seriously, you wouldn’t believe the amount of work she did. The change of venue and format for this year resulted in at least twice as much work as usual.

In the middle of UX London’s three days, I ran a workshop called Responsive UX. As I told the audience that morning when I was pitching the workshop, I got the title by taking the term “responsive design” and doing a find-and-replace on the word “design” with the phrase “UX”. After all, what’s the difference? Right, Peter?

Seriously though, this workshop was a little different in that I wasn’t covering any HTML or CSS or JavaScript. It was much more about planning for the unknown and good ol’-fashioned content priority and hierarchy.

I wasn’t entirely pleased with how it went. It was a workshop of two halves. The first half had far too much of me talking (and ranting), probably preaching to the choir. But I felt I had to lay the groundwork first. The second half—when everybody got hands on with paper-based exercises—was much better.

I learned my lesson: show, don’t tell. I’ll be doing a full day responsive workshop at Ampersand in June. I plan to make sure that there’s less of me talking and more making and collaborating. Also, because it’s a full day, I’ll be able to get down to the nitty-gritty of markup and style sheets.

And don’t forget; if you want me to come to your company sometime and do a workshop there, no problemo.

Some people at the workshop asked about me publishing my slides. The slides by themselves really don’t contain much information but I’ve published them on Speakerdeck anyway. But what’s more valuable are the URLs to articles and resources I mentioned along the way. So here’s the structure of the workshop together with links to examples and further reading…



Progressive Enhancement


Conditional Loading

Visual Design


I, Interface

’s , though currently fictional, are an excellent set of design principles:

  1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.
  2. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.
  3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.

One could easily imagine a similar set of laws being applied to field of user experience and interface design:

  1. An interface may not injure a user or, through inaction, allow a user to come to harm.
  2. An interface must obey any orders given to it by users, except where such orders would conflict with the First Law.
  3. An interface must protect its own existence as long as such protection does not conflict with the First or Second Law.

Okay, that last one’s a bit of a stretch but you get the idea.

In his later works Asimov added the zeroth law that supersedes the initial three laws:

  1. A robot may not harm humanity, or, by inaction, allow humanity to come to harm.

I think that this can also apply to user experience and interface design.

Take the password anti-pattern (please!). On the level of an individual site, it could be considered a benefit to the current user, allowing them to quickly and easily hand over lots of information about their contacts. But taken on the wider level, it teaches people that it’s okay to hand over their email password to third-party sites. The net result of reinforcing that behaviour is definitely not good for the web as a whole.

I’m proposing a zeroth law of user experience that goes beyond the existing paradigm of user-centred design:

  1. An interface may not harm the web, or, by inaction, allow the web to come to harm.

Jared Spool: The Secret Lives of Links

The final speaker of the first day of An Event Apart in Boston is Jared Spool. Now, when Jared gives a talk …well, you really have to be there. So I don’t know how well liveblogging is going to work but here goes anyway.

The talk is called The Secret Lives of Links. He starts by talking about one of the pre-eminent young scientists in the USA: Lisa Simpson. One day, she lost a tooth, put it in a bowl and when she later examined it under a microscope, she discovered a civilisation going about its business, all the citizens with their secret lives.

The web is like that.

Right before the threatened government shutdown, Jared was looking at news sites and how they were updating their links. Jared suggests that CNN redesign its site to simply have this list of links:

  1. The most important story.
  2. The second most important story.
  3. The third most important story.
  4. An unimportant, yet entertaining story.
  5. The Charlie Sheen story.

But of course it doesn’t work like that. The content of the links tells the importance. Links secretly live to drive the user to their content.

Compare the old CNN design to the current one. The visual design is different but the underlying essence is the same. The links work the same way.

All the news sites were reporting the imminent government shutdown with links that had different text but were all doing the same thing.

Jared has been working on the web since 1995. That whole time, he’s been watching users use websites. The pattern he has seen is that the content speaks to the user through the links. Everything hinges on the links. They provide the scent of information.

This goes back to a theory at Xerox PARC: if you modelled user behaviour when searching for information, it’s very much like a fox sniffing a trail. The users are informavores.

We can see this in educational websites. The designs may change but links are the constant.


We’ve all felt the pain of battling the site owner who wants to prioritise content that the users aren’t that interested in.

The Walgreens site is an interesting example. One fifth of the visitors follow the “photo” link. 16% go to search. The third most important link is about refilling prescriptions. The fourth is the pharmacy link. The fifth most used links is finding the physical stores. Those five links add up to 59% of the total traffic …but those links take up just 3.8% of the page.

This violates Fitts’s Law:

The speed that a user can acquire a target is proportional to the size of the target and indirectly proportional to the distance from the target.

Basically, the bigger and closer, the easier to hit. The Walgreens site violates that. Now, it would look ugly if the “photo” link was one fifth of the whole page, but the point remains: there’s a lot of stuff being foisted on the user by the business.

Another example of Fitts’s Law are those annoying giant interstitial ads that have tiny “close” links.

Deliver users to their desired objective. Give them links that communicate scent in a meaningful way. Make the real estate reflect the user’s desires.

Let’s go back to an educational web site: Ohio State. People come to websites for all sorts of reasons. Most people don’t just go to a website just to see how it looks (except for us). People go to the Ohio State website to get information about grades and schedules. The text of these links are called trigger words: the trigger an action from the user. When done correctly, trigger words lead the user to their desired goal.

It’s hard to know when your information scent is good, but it’s easy to know when your information scent is bad. User behaviour will let you know: using the back button, pogo-sticking, and using search.

Jared has seen the same patterns across hundreds of sites that he’s watched people using. They could take all the clickstreams that succeeded and all the clickstreams that failed. For 15 years there’s a consistent 58% failure rate. That’s quite shocking.

One pattern that emerges in the failed clickstreams is the presence of the back button. If a user hits the back button, the failure rate of those clickstreams rises to above 80%. If a user hits the back button twice, the failure rate rises to 98%.

The back button is the button of doom.

The user clicks the back button when they run out of scent, just like a fox circling back. But foxes succeed ‘cause rabbits are stupid and they go back to where they live and eat, so the fox can go back there and wait. Users hit the back button hoping that the page will somehow have changed when they get back.

Pay attention to the back button. The user is telling you they’ve lost the scent.

Another behaviour is pogo-sticking, hopping back and forward from a “gallery” page with a list of links to the linked pages. Pogo-sticking results in a failure rate of 89%. There’s a myth with e-commerce sites that users want to pogo-stick between product pages to compare product pages but it’s not true: the more a user pogo-sticks, the less likely they are to find what they want and make a purchase.

Users scan a page looking for trigger words. If they find a trigger word, they click on it but if they don’t find it, they go to search. That’s the way it works on 99% of sites, although Amazon is an exception. That’s because Amazon has done a great job of training users to know that absolutely nothing on the home page is of any use.

Some sites try to imitate Google and just have a search box. Don’t to that.

A more accurate name for the search box would be B.Y.O.L.: Bring Your Own Link. What do people type into this box: trigger words!

Pro tip: your search logs are completely filled with trigger words. Have you looked there lately? Your users are telling you what your trigger words should be. If you’re tracking where searches come from, you even know on what pages you should be putting those trigger words.

The key thing to understand is that people don’t want to search. There’s a myth that some people prefer to search. It’s the design of the site that forces them to search. The failure rate for search is 70%.

Jared imagines an experiment called the 7-11 milk experiment. Imagine that someone has run out of milk. We take them to the nearest 7-11. We give them the cash to buy milk. There should be a 100% milk-purchasing result.

That’s what Jared does with websites. He gives people the cash to buy a product, brings them to the website and asks them to purchase the product. Ideally you should see a 100% spending rate. But the best performing site—The Gap—got a 66% spending. The worst site got 6%.

The top variables that contributed to this pattern are: the ratio of number of pages to purchase. Purchases were made at Gap.com in 11.9 pages. On the worst performers, the ratio was 51 pages per purchase. You know what patterns they saw in the worst performers: back button usage, pogo-sticking and search.

Give users information they want. Pages that we would describe as “cluttered” don’t appear that way to a user if the content is what the user wants. Clutter is a relative term based on how much you are interested in the content.

It’s hard to show you good examples of information scent because you’re not the user looking for something specific. Good design is invisible. You don’t notice air conditioning when it’s set just right, only when it’s too hot or too cold. We don’t notice good design.

Links secretly live to look good …while still looking like links. There was a time when the prevailing belief was that links are supposed to be blue and underlined. We couldn’t have made a worse choice. Who decided that? Not designers. Astrophysicists at CERN decided. As it turns, blue is the hardest colour to perceive. Men start to lose the ability to perceive blue at 40. Women start to lose the ability at 55 …because they’re better. Underlines change the geometry of a word, slowing down reading speed.

Thankfully we’ve moved on and we can have “links of colour.” But sometimes we take it far, like the LA Times, where it’s hard to figure out what is and isn’t a link. Users have to wave their mouse around on the page hoping that the browser will give them the finger.

Have a consistent vocabulary. Try to make it clear which links leads to a different page and which links perform on action on the current page.

We confuse users with things that look like links, but aren’t.

Links secretly live to do what the user expects.

Place your links wisely. Don’t put links to related articles in the middle of an article that someone is reading.

Don’t use mystery meat navigation. Users don’t move their mouse until they know what they’re going to click on so don’t hide links behind a mouseover: by the time those links are revealed, it’s too late: users have already made a decision on what they’re going to click. Flyout menus are the worst.

Some of Jared’s favourite links are “Stuff our lawyers made us put here”, “Fewer choices” and “Everything else.”

In summary, this is what links secretly want to do:

  • Deliver users to their desired objective.
  • Emit the right scent.
  • Look good, while still looking like a link.
  • Do what the user expects.

Luke Wroblewski: Mobile Web Design Moves

Next up at An Event Apart in Boston is Luke Wroblewski. Let’s see if I can liveblog just some his awesomeness.

Luke begins with some audience interactivity. We’ve all got to stand up. Now we learn a few small moves. Put them all together and what have you got? The Thriller dance!

There’s a point to this: his talk is called Mobile Web Design Moves. Small moves can add up to very big things.

But why learn new moves? Well, Mobile changes things:

  • Mobile web growth and
  • Mobile is different.

Mobile web growth

A few years ago, Morgan Stanley published a report in which they predicted that somewhere in 2012 more mobile devices would be shipped than PCs. Well, it happened two years earlier than predicted. As Eric Schmitt has said, everything to do with mobile happens faster. There’s been a 20% drop in PC usage, with the slack taken up by tablets and smartphones. But as Luke points out, the term PC—Personal Computer—is actually better suited to a mobile device; the device you have with you on your person. The way we interact online, email, etc., is shifting to mobile devices.

But is all this usage happening in native apps? No, as it turns out. 40% of Twitter’s traffic comes from mobile, of which 78% is from the mobile website. Mobile browser users increased over 300%. What people forget is that growth of native apps also drives growth of mobile web use.

In a nutshell, more people are going to be accessing your websites with a mobile device than with a desktop device. Find one study of mobile usage that doesn’t show exponential growth.

Even if you have native apps, like Gowalla with a client for iOS, Android, Blackbery, etc., people will still post links in your native app and where does that take you? To a browser.

Anyway, it doesn’t have to be either a native app or a mobile web site. You can hedge your bets and do both …so you’re protected if Steve Jobs pulls the rug out from under you.

Mobile is different

When you’re sitting at a computer at home, you’re sitting comfortably with a keyboard, mouse, chair and coffee mug. The mobile experience involves a small screen, short battery life, an inconsistent network, fingers and sensors. This tactile experience makes it intensely personal.

Where do people use these devices? There’s the sterotypical picture of the businessman on the move, walking down the street. But 84% of mobile usage happens at home; watching TV, for example. 74% of people use them standing in line. People use them in the toilet.

What about when people use these devices? All throughout the day, as it happens. That’s quite different to desktop use. iPad users do a lot of reading on the couch in the evening and in bed at night.

Mobile devices have different technical capabilities and limitations and there are also some distinct times and behaviours associated with their usage.

By now you should be convinced: I need new moves!

Organise yourself

Try to understand why someone would pull out their mobile device. What is that device good at? Try to marry that up with your content. Luke breaks down mobile behaviours into these categories:

  • Lookup/Find — usually location-related.
  • Explore/Play — often related to reading.
  • Check in/Status
  • Edit/Create — email, for example.

Think about organising your structure to fit these tasks. Luke shows a college site that prioritises campus information less than marketing fluff. But you know, this isn’t just about mobile users. That useful information—like a campus map—is useful for everyone, regardless of their device. So if you go through this process of prioritising for mobile, you will also be prioritising for desktop.

Mobile forces you to prioritise. Screen space is tight. Attention is short. Apply the same prioritisation to desktop users.

Here’s a good rule of thumb: content first, navigation second. Give people what they’re looking for first.

Don’t try to port all of your content to mobile. Instead use this as an opportunity to prune your content and get rid of the crap that people aren’t interested in.

What people want to do on mobile is the same as what people want to do on the desktop. For some reason, Yelp only allowed mobile users to point “mini” reviews …at the very time when people are in the place they are reviewing!

Don’t dumb it down for mobile.

Use your head

Content first, navigation second; yes, but navigation is still important. Facebook’s mobile version originally had 13 navigation elements, which is a bit much. YouTube puts the navigation on a different screen. The pro is that this saves screen estate. The con is that you lose context. ESPN’s mobile site has a navigation that you pull down. There’s also navigation at the end of the page. That’s better than what YouTube does: when you get to the end of the page on YouTube, it’s a dead end. One of the challenges with the ESPN site is that the navigation is duplicated (the pull-down nav and the footer nav). A potential solution is to have that nav link at the top point to the navigation at the bottom of the page.

What about fixed position menus? The iPhone has permanent software buttons on screen in the browser, right? But to do fixed positioning on mobile you have to use some hacky JavScript. And even if you get it working, it’s eating up valuable screen real estate. On the Android device, there’s the problem of the proximity to hardware buttons: people will accidentally mis-tap the hardware controls trying to use on-screen navigation anchored to the bottom of the screen.

So don’t just slavishly copy iOS conventions. Don’t put a back button in your site. It makes sense in an app but on a website, the browser provides a back button already.

Take it in

Input is interesting topic on mobile. The traditional advice is to avoid text input on mobile ….and yet billions of text messages are sent every day. So let’s reverse the traditional advice. Let’s encourage people to input on mobile.

The workhorses of input on the web have been checkboxes, radio buttons, drop-down lists, etc. Using these standards on mobile means you can type into the device interface features, like the select UI on the iPhone. But the constraints of the smaller screen on a mobile device introduces some challenges even if you use these standard controls. If you make your own interface elements, you can given them touch target sizes.

The stuff that we have to programme for ourselves today will become standard declarative features in the future. That’s already happening with HTML5 input types like date. But even small things can make a big difference. Use input types like url, number, email, etc. to get an appropriate on-screen keyboard on iOS. Make use of new input types and attributes. Every little bit helps.

Input masks—confining what’s allowed in a form field—can be very useful on mobile devices. Right now we have to do it programmatically but again, it should become declarative in the future.

Avoid the gradual reveal, where you format as people are typing but in a different format to what the placeholder text displayed. Beware with placeholder text: people can interpret it as the form field already being filled in. Phrase them as questions if you can.

There’s a lot of really exciting things happening on the input side of things with mobile devices. More and more device APIs and sensors are being exposed.

Ask for it

Input is the way we gather answers from people but we also have to think about how we ask the questions.

Many mobile browsers try to optimise desktop-specific sites to help mobile users by using zoom. In that situation, right-aligned form field labels are problematic: when you zoom in on the form field, you can’t see the label. Top-aligned labels work better …and there are many other advantages to top-aligned labels that Luke has talked about in the past.

Some people are trying to use placeholder text as labels. But the problem there is that as soon as you tap in there, it disappears. Again, watch out when putting labels within input fields: it’s not clear if the form field is already filled in or not.

Make your moves

Here’s an opportunity. Mobile is growing so quickly and it’s all new. Now is our chance to come up with new innovative stuff. This stuff hasn’t been figured out yet. More and more devices are coming online every day and they’ve all got web browsers.

We can push towards natural user interfaces where the content is the user interface. Minor rant: our design processes are more about designing navigation instead of focusing on the content and designing that. It’s a challenge. As Josh Clark put it:

Buttons are a hack.

So make your own moves. Yes, it’s a scary time; there’s so much to learn about, but also also a huge opportunity.

Keep an eye out for Luke’s book from A Book Apart called Mobile First coming out in Summer 2011.

Whitney Hess: Design Principles — The Philosophy of UX

The second speaker at this mornings An Event Apart in Boston is Whitney Hess. Here goes with the liveblogging…

Whitney’s talk is about design principles. As a consultant, she spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.

Why have these principles? It’s about establishing a basis for your design decisions, leading to consistency. It’s about having a shared vision and they allow for an objective evaluation of the outcome.

But good design doesn’t necessarily equate to a good experience. The Apple G4 Cube was beautifully designed but it was limited in where and how it could be used.

Good design can equal good experience. That’s why Whitney does what she does. But she needs our help. She’s going to propose a set of design principles that she feels are universally applicable.

  1. Stay out of people’s way. The Tumblr homepage does this. You can find out more about Tumblr further down the page, but it doesn’t assume that’s what you want to have thrust in your face. Instead the primary content is all about getting started with Tumblr straight away.
  2. Create a hierarchy that matches people’s needs. This is about prioritisation. Mint.com uses different font sizes to match the hierarchy of importance on its “ways to save” page. Give the most crucial elements the greatest prominence. Use hierarchy to help people process information.
  3. Limit distractions. Don’t put pregnancy test kits next to condoms. On the web, Wanderfly does this right: one single path, completely self-contained. Multi-tasking is a myth. Let people focus on one task. Design for consecutive tasks, not concurrent.
  4. Provide strong information scent. Quora does a great job at this with its suggested search options. It’s actively helping you choose the right one. People don’t like to guess haphazardly, they like to follow their nose.
  5. Provide signposts and cues. Labelling is important. The Neiman Marcus e-commerce site does this right. It’s always clear where you are: the navigation is highlighted. You’d think that in 2011 this would be standard but you’d be surprised. Never let people get lost, especially on the web where there’s a limitless number of paths. Show people where they came from and where they’re going.
  6. Provide context. A sign that says “Back in 30 minutes” isn’t helpful if you’re in a hurry—you don’t know when the sign was put up. On the web, AirBnB provides everything you need to know on a listing page, all in one place. It’s self-contained and everything is communicated up-front.
  7. Use constraints appropriately. Preventing error is a lot better than recovering from it. If you know there are restrictions ahead of time, stop people from going down that route in the first place.
  8. Make actions reversible. (illustrated with a misspelled Glee tattoo) Remember The Milk provides an “undo?” link with almost every action. There’s no such thing as perfect design; people will make errors, so you should have a contingency plan. Undo is probably the most powerful control you can provide to people.
  9. Provide feedback. How do you know when you’re asthma inhaler is empty? You don’t. You won’t find out until the worst moment. On the web, loading indicators provide useful feedback. Tell people that a task is underway. Design is a conversation, not a monologue.
  10. Make a good first impression. Vimeo has one of the best first-time user experiences: “Welcome. You’re new, aren’t you?” Establish the rules, set expectations about the relationship you’re about to initiate on your site.

The basis for all of these principles are Aristotle’s modes of persuasion: logos, ethos and pathos—the rhetorical triangle.

Are universal principles enough? Probably not. Every company is different. Some companies publicly share their principles. Take Google’s “Ten Principles That Contribute to a Googley User Experience” as an example, or Facebook’s design principle …or Windows design principles for a good laugh. Look beyond the tech world too, like Charles and Ray Eames or Burning Man’s design principles.

So what are your company’s principles? Without principles, we don’t know what we’re trying to achieve. Here are some guiding ideas:

  1. Research available principles from elsewhere.
  2. Gather, list and print out the business goals and user needs.
  3. Brainstorm with key collaborators.
  4. Narrow down to no more than 10, preferably 7.
  5. Make sure they don’t overlap.
  6. Make them peppy.

Use the design principles at kickoff meetings, when your prioritising features, brainstorming sessions, design critiques, stakeholder presentations, resolving conflict, postmortems and web metric analysis: evaluating the success of the feature or product.

Remember, user experience is the establishment of a philosophy of how to treat people. Help people make their lives better.

Responsive refresh

Another week, another responsive web site.

Two weeks ago, it was St. Paul’s School. Last week, it was Salter Cane. This week, I’ve been working on next year’s UX London site, implementing a nice little design refresh courtesy of Paul.

More pages will be added soon but for now, it’s essentially like a poster for the conference.

Back when I was working on the first UX London site two years ago, I was building it together with Natalie, and I mean literally together: we were pair-programming. Well, I guess programming isn’t quite right for HTML and CSS, but we were pair-writing. It was an excellent experience.

Anyway, Natalie being Natalie, the UX London site was built with rock-solid markup with a flexible layout. All the pieces were in place for a responsive web design so once I was done with the current refresh, I spent a few minutes writing some media queries.

UX London (1440) UX London (1024) UX London (760) UX London (480)

You can see the results for yourself.

TeuxDeux Part Deux

I’ve tried a few different to-do list apps in my time: Ta-da List, Remember The Milk. They’re all much of a muchness (although Remember The Milk’s inability to remember me on return visits put me off it after a while).

The one that really fits with my mental model is TuexDeux. It’s very, very simple and that’s its strength. It does one thing really well.

Now it has been updated with a few little changes.

TeuxDeux Part Deux on Vimeo

I’m very pleased to see that it has become more flexible and fluid. I’ve said it before but I really think that web apps should aim to be adaptable to the user’s preferred viewing window. With more content-driven sites, such as webzines and news articles, I understand why more control is given to the content creator, but for an application, where usage and interaction is everything, flexibility and adaptability should be paramount, in my opinion.

Anyway, the new changes to TeuxDeux make it better than ever. Although…

If I had one complaint—and this is going to sound kind of weird—it’s that you mark items as done by clicking on them (as if they were links). I kind of miss the feeling of satisfaction that comes with ticking a checkbox to mark an item as done.

I told you it was going to sound kind of weird.


It was conferences-a-go-go in London the week before last. As Future of Web Design—which was, by all accounts, excellent—was winding down, UX London was kicking off. Fears of ashcloud disruption to both events remained happily unrealised.

I went along for the first day of UX London. All the speakers were excellent but it was a particular thrill to see the amazing Scott McCloud speak. I had high expectations and they were duly surpassed.

I didn’t attend any of the workshops on the subsequent two days. Instead, Clearleft kidnapped Dave Gray and whisked him off to Brighton. There we spent two days learning sketching-fu from the master.

It was very informative and a lot of fun. Dave is a superb teacher and by the end of the two days, we were all feeling a lot more confident in our abilities to communicate through drawings. I expect there’s going to be lots of future activity on display in the Sketchleft pool on Flickr.


This is the last week during which you can grab a ticket for UX London at the early bird price. From February 1st, the price goes up by a hundred squid (and from April 1st, the price goes up by another hundred squid—no joke).

In case you’re wondering whether or not you should go, wonder no more. Just check out the line-up of speakers and imagine three solid days of inspirational talks and hands-on workshops in their company. If attended last year’s event, you know what a great gathering it is. If you didn’t attend last year, talk to someone who did.

Of course, it could be that even if you want to go, you still need to convince somebody in your company to send you. Let’s face it, UX London is a very different beast from dConstruct.

dConstruct is deliberately low in price and a more rough’n’ready one-day affair. One of the reasons why we try to keep the price of dConstruct down is so that just about anybody can afford to come: freelancers, students, whatever. If that means we can’t afford to feed everyone or hand out goodies, then so be it—everyone fends for themselves at lunchtime and there’s no schwag.

The audience for UX London is a bit different. It’s almost exclusively attended by people who have been sent by their company. With one day of presentations and two full days of workshops, and all three days fully catered, the price is, of course, far higher than dConstruct …although if you go to dConstruct and attend both days of workshops beforehand, then it works out at much the same price as UX London’s early bird ticket.

Anyway, if you are in that situation—working at a company where you have to convince someone to send you to training events like UX London—Kimberly Blessing has written a guide to getting your conference or training request approved. She shares her three-step strategy:

  1. Build a strong case.
  2. Request funding.
  3. Negotiate!
    • Try before you buy.
    • Strength in numbers.
    • Volunteer.
    • Ask for partial funding.
    • Finally, if you must: send yourself.

If you’ve got any other techniques, share them in the comments to Kimberly’s post.

Sign up and log in

It’s common practice for sign-up forms to include duplicate fields for either password or email, where the user has to type the same thing twice. I deliberately avoided this on the Huffduffer sign-up form. Not long after Huffduffer launched, I was asked about this ommision on Get Satisfaction and I defended my position there, citing the audience demographic.

I still think I made the right decision although, in retrospect, I’ve changed my position completely from when I said, I can see more value in a ‘confirm your password’ field than a ‘confirm your email address’ field. Thinking about it, getting a correct email address is more important. If a password is entered incorrectly, it can always be reset as long as the site can send a reset link to a valid email address. But if an email address is entered incorrectly, the site has no way of helping a user in difficulty.

Here’s an interesting scripted approach to avoiding duplicate email fields:

The last thing you see before you submit is your own email address.

Sign-up is something that user should only ever experience once on a site. But the log-in process can be one of the most familiar actions that a user performs. A common convention for log-in forms is a “remember me” checkbox. I have one of those on the Huffduffer log-in page, labelled with “remember me on this Turing machine” (hey, I thought it was cute).

Here’s a question from 37 Signals:

Has the time come to kill the “Remember me” check box and just assume that people using shared computers will simply logout?

There are a lot of arguments, both for and against, in the comments. It prompted me to think about this use case on Huffduffer and I’ve decided to keep the checkbox but I’ve now made it checked by default. I think that while there are very good reasons why somebody wouldn’t want a permanent cookie set on the machine they’re using (many of the use cases are mentioned in the comments to that 37 Signals post), the majority of people find it convenient.

It always pays to think about default states in UI. Good defaults are important:

Defaults are arguably the most important design decisions you’ll ever make as a software developer. Choose good defaults, and users will sing the praises of your software and how easy it is to use. Choose poor defaults, and you’ll face down user angst over configuration, and probably a host of tech support calls as well.

I don’t care about UX

When I wrote about designing for the street I tossed out this glib remark:

The Social Life of Small Urban Spaces was filled with lessons that can be applied to web design (or as it is more fashionably known now, UX design).

Or, as Mark put it:

Since when did good web design suddenly get called ‘UX’? Everywhere I look now, good UI design is called ‘UX’, good type = ‘UX’, Colour? UX.

My point in equating UX design with plain ol’ fashioned web design is similar to what Jeff was getting at when he wrote I don’t care about accessibility five years ago. It was a controversial thing to say but he explained it eloquently:

When you design for the Web — that is, when you design exclusively and specifically for this medium — when you do that natively, so many of the things we consider problems just start to fall away. … Because when Web design is practiced as a craft, and not a consolation, accessibility comes for free.

…and that’s the way I feel about what is often labelled as UX design. If someone claims to be a web designer but isn’t considering the user experience, they are deluding themselves. UX, like accessibility, should be a given, not a differentiating factor.

And that’s why I don’t care about UX.