Tags: ux

27

sparkline

Brighton conferences

I’ve been to four conferences in two weeks. I wasn’t speaking at any of them so I was able to relax and enjoy the talks.

There was UX Brighton on November 3rd, featuring a terrific opening keynote from Boxman.

James Box speaking at UX Brighton 2017

One week later, I was in the Duke of York’s cinema for FFConf along with all the other Clearleft frontend devs—it’s always a thought-provoking day out.

FFConf 2017 Day 2

Yesterday, I went to Meaning in the daytime, and Bytes in the evening.

It was amazing to get to see @ambrwlsn90 speak at #bytesconf tonight. She is a brilliant speaker! 🙌🏻

Every one of those events was in Brighton. That’s pretty good going for a town this size …and that’s not even counting the regular events like Async, Codebar, and Ladies That UX.

Installing Progressive Web Apps

When I was testing the dConstruct Audio Archive—which is now a Progressive Web App—I noticed some interesting changes in how Chrome on Android offers the “add to home screen” prompt.

It used to literally say “add to home screen.”

Getting the “add to home screen” prompt for https://huffduffer.com/ on Android Chrome. And there’s the “add to home screen” prompt for https://html5forwebdesigners.com/ HTTPS + manifest.json + Service Worker = “Add to Home Screen” prompt. Add to home screen.

Now it simply says “add.”

The dConstruct Audio Archive is now a Progressive Web App

I vaguely remember there being some talk of changing the labelling, but I could’ve sworn it was going to change to “install”. I’ve got to be honest, just having the word “add” doesn’t seem to provide much context. Based on the quick’n’dirty usability testing I did with some co-workers, it just made things confusing. “Add what?” “What am I adding?”

Additionally, the prompt appeared immediately on the first visit to the site. I thought there was supposed to be an added “engagement” metric in order for the prompt to appear; that the user needs to visit the site more than once.

You’d think I’d be happy that users will be presented with the home-screen prompt immediately, but based on the behaviour I saw, I’m not sure it’s a good thing. Here’s what I observed:

  1. The user types the URL archive.dconstruct.org into the address bar.
  2. The site loads.
  3. The home-screen prompt slides up from the bottom of the screen.
  4. The user immediately moves to dismiss the prompt (cue me interjecting “Don’t close that!”).

This behaviour is entirely unsurprising for three reasons:

  1. We web designers and web developers have trained users to dismiss overlays and pop-ups if they actually want to get to the content. Nobody’s going to bother to actually read the prompt if there’s a 99% chance it’s going to say “Sign up to our newsletter!” or “Take our survey!”.
  2. The prompt appears below the “line of death” so there’s no way to tell it’s a browser or OS-level dialogue rather than a JavaScript-driven pop-up from the site.
  3. Because the prompt now appears on the first visit, no trust has been established between the user and the site. If the prompt only appeared on later visits (or later navigations during the first visit) perhaps it would stand a greater chance of survival.

It’s still possible to add a Progressive Web App to the home screen, but the option to do that is hidden behind the mysterious three-dots-vertically-stacked icon (I propose we call this the shish kebab icon to distinguish it from the equally impenetrable hamburger icon).

I was chatting with Andreas from Mozilla at the View Source conference last week, and he was filling me in on how Firefox on Android does the add-to-homescreen flow. Instead of a one-time prompt, they’ve added a persistent icon above the “line of death” (the icon is a combination of a house and a plus symbol).

When a Firefox 58 user arrives on a website that is served over HTTPS and has a valid manifest, a subtle badge will appear in the address bar: when tapped, an “Add to Home screen” confirmation dialog will slide in, through which the web app can be added to the Android home screen.

This kind of badging also has issues (without the explicit text “add to home screen”, the user doesn’t know what the icon does), but I think a more persistently visible option like this works better than the a one-time prompt.

Firefox is following the lead of the badging approach pioneered by the Samsung Internet browser. It provides a plus symbol that, when pressed, reveals the options to add to home screen or simply bookmark.

What does it mean to be an App?

I don’t think Chrome for Android has any plans for this kind of badging, but they are working on letting the site authors provide their own prompts. I’m not sure this is such a good idea, given our history of abusing pop-ups and overlays.

Sadly, I feel that any solution that relies on an unrequested overlay is doomed. That’s on us. The way we’ve turned browsing the web—especially on mobile—into a frustrating chore of dismissing unwanted overlays is a classic tragedy of the commons. We blew it. Users don’t trust unrequested overlays, and I can’t blame them.

For what it’s worth, my opinion is that ambient badging is a better user experience than one-time prompts. That opinion is informed by a meagre amount of testing though. I’d love to hear from anyone who’s been doing more detailed usability testing of both approaches. I assume that Google, Mozilla, and Samsung are doing this kind of testing, and it would be really great to see the data from that (hint, hint).

But it might well be that ambient badging is just too subtle to even be noticed by the user.

On one end of the scale you’ve got the intrusiveness of an add-to-home-screen prompt, but on the other end of the scale you’ve got the discoverability problem of a subtle badge icon. I wonder if there might be a compromise solution—maybe a badge icon that pulses or glows on the first or second visit?

Of course that would also need to be thoroughly tested.

Seamfulness

I was listening to some items in my Huffduffer feed when I noticed a little bit of synchronicity.

First of all, I was listening to Tom talking about Thington, and he mentioned seamful design—the idea that “seamlessness” is not necessarily a desirable quality. I think that’s certainly true in the world of connected devices.

Then I listened to Jeff interviewing Matt about hardware startups. They didn’t mention seamful design specifically (it was more all cricket and cables), but again, I think it’s a topic that’s lurking behind any discussion of the internet of things.

I’ve written about seams before. I really feel there’s value—and empowerment—in exposing the points of connection in a system. When designers attempt to airbrush those seams away, I worry that they are moving from “Don’t make me think” to “Don’t allow me to think”.

In many ways, aiming for seamlessness in design feels like the easy way out. It’s a surface-level approach that literally glosses over any deeper problems. I think it might be driven my an underlying assumption that seams are, by definition, ugly. Certainly there are plenty of daily experiences where the seams are noticeable and frustrating. But I don’t think it needs to be this way. The real design challenge is to make those seams beautiful.

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…

Introduction

Myths

Progressive Enhancement

Planning

Conditional Loading

Visual Design

Navigation

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.

http://xkcd.com/773/

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.

Sketchleft

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.