flow|state

Celebrating 100 posts and 6 years of UI design craft on flow|state

This post marks my 100th post on flow|state. My first post was on July 11, 2005, so by pure coincidence this milestone comes exactly on the blog’s birthday. There was a 1½ year blogging hiatus in 2009-10 (because 1 startup + 3 little kids = 0 discretionary time), so I’ve done about 4½ years of actual blogging. This works out to a post roughly every two weeks.

I’m still passionate about learning and teaching the craft of user interface design. When I started this blog, I thought I would focus exclusively on client-side app UI, but I shifted my attention to the web when my company, Cozi, did so in 2008; later my interests extended to mobile UI as well.

I’ve tried to focus on my own direct personal experiences as a UX designer, with an eye towards sharing practical knowledge to people in the industry, or conveying a sense of the designer’s work to a general audience. I generally prefer to write about the products I know best: the ones I’ve worked on. In cases where I critique other products to make a point, I try to concentrate on the nitty-gritty details of a UI that may go overlooked by users, but which nevertheless affect the user experience.

This focus is borne out in this list of the most popular posts on flow|state, either having driven the biggest transient spikes in traffic or for driving the most visits over time.

1. The fractal nature of UI design problems
2. Showing the complete range of choices in a grid
3. Cozi calendar UI overhaul
4. Every app has a scary basement
5. Form validation feedback: Be slow to complain, and quick to forgive
6. OpenID: Great idea, bewildering consumer experience
7. Looking forward to seeing Facebook apps drop their pointless mystery
8. Zune: a fine music subscription device
9. Reconsidering stock controls to create an optimized user experience
10. Once a routine animation has made its point, speed it up

One thing I’ve missed over the past year is more engagement with you, the readers. A while back I tried to ward off comment trolls and spam by turning on the requirement that commenters must be signed in. This kept away trolls and spam—and everyone else. On the suggestion of a friend, I’m giving unsigned moderated comments a try to see that encourages more discussion.

In that spirit, I’d love to hear from you about this blog, especially the sorts of posts you’ve found most helpful or interesting. Leave a comment or send email via the About page.

Thanks for reading!

A simple experiment to judge the quality of your link text: make the surrounding text invisible

While reviewing UI text recently, a question arose regarding exactly which words in a sentence should be used as a hyperlink. My standard tactic to cut through this design problem is to ask: what if your user were blind? Assume they have a screen reader that, by default, is going to let them tab through just the links on the page and read the link text aloud to them. Which link text would produce the best experience?

At Microsoft I was first exposed to the proposition that creating products with universal access in mind (i.e., making the product’s features accessible to users who were visually impaired, hearing impaired, motion impaired, etc.) would also produce benefits for all users. I’d love to see a rigorous defense of this proposition from an economic point of view: could resources invested toward universal access have produced better products if those resources have been invested elsewhere? But even without that defense, I do believe this mindset opens up new ways of looking at design problems.

Although the W3C published its guidelines for creating accessible web content in 2000, including the specific admonition that “click here” is a bad link choice, it’s nevertheless common to find this still done over a decade later. Here's a random news article:

 

 

To get an approximate sense of how this page might appear to a blind user (via the default screen reader experience) you can remove all the text that surrounds the links. You can easily do this on almost any web page by using your browser’s developer tools to change the body and paragraph text color to match the background color:

 

 

With the body text rendered invisible, the use of the link text “here” in “Click here to see a sample of the new Calendar redesign” jumps out. If the link text had been written without depending on the surrounding text, perhaps better link text might have been selected: e.g., “See a sample of the new Calendar design”. The link text “wrote” could be similarly improved.

I think it’s striking that, even when one tries very hard to focus on just the link text in the first image, you still don’t get the same experience as the second image. The second image makes it impossible for your eyes to grab a little bit of context from the surrounding text.

Perhaps the persistence of weak link text can be partially attributed to the assumption that web usability guidelines for, say, visually impaired users, apply only to companies or organizations that focus on those users. In this case, following the guidelines for link text (and using link titles that appear on hover, etc.) can benefit all your users.

I can’t pretend to understand or fully appreciate the user experience of blind users. I can speak to the question of what a typical user does when scanning UI text: they tend to focus on the links. Writing as if the surrounding body text were going to be invisible can help guide you in the selection of good link text.