User experience, web, technology

Seams between systems and the Vignelli NYC subway map

I just read “Mr. Vignelli’s Map” by Michael Bierut over at Design Observer. In the post, Bierut remembers and analyzes why the public rejected Vignelli’s map of the New York City subway system. (Here’s the Vignelli subway map.)

The Vignelli map smartly acknowledged that for passengers of the subway focused on navigating the subway system itself, above ground geography was nothing but a factor of added complexity. So the map instead was oriented around the subway lines and stops themselves, abstracting actual geography. This was a keen simplification from an information design perspective.

But consider this observation from Bierut’s article.

To make the map work graphically meant that a few geographic liberties had to be taken. What about, for instance, the fact that the Vignelli map represented Central Park as a square, when in fact it is three times as long as it is wide? If you’re underground, of course, it doesn’t matter: there simply aren’t as many stops along Central Park as there are in midtown, so it requires less map space. But what if, for whatever reason, you wanted to get out at 59th Street and take a walk on a crisp fall evening? Imagine your surprise when you found yourself hiking for hours on a route that looked like it would take minutes on Vignelli’s map.

The concept of designing the seams between systems has become apparent within the user experience design community over the last couple years. This is an example of that problem of seams.

Passengers of the subway system are also navigators of the city itself, so their context of use spans beyond the subway and the end of their decisions are not merely which stop to get on and off of, but where they are going once they get out of the subway.

Bierut makes the point:

The problem, of course, was that Vignelli’s logical system came into conflict with another, equally logical system: the 1811 Commissioners’ Plan for Manhattan.

How can designers consider the seams between the subway system and the city plan to result in a better-designed subway map?

NYC, of course, has a functioning subway map. Is functionality the only litmus test?

(I’ve taken the subway in New York City only once, and managed to get from Point A to Point B successfully, although with some anxiety.)

User experience, web, technology

WUD 2009 at MSU recap

Yesterday’s World Usability Day event at Michigan State University was good—but a little odd.

The morning sessions were spot-on, and some of the afternoon talks were good as well. However, it was clear that some panelists didn’t understand their audience of usability and accessibility practitioners. Their talks were still interesting, but they didn’t understand the user experience industry’s take on words like “accessibility” and “sustainability,” which was this year’s theme.

So, here’s a quick recap.

Assistive Technology Expo

I attended the Assistive Technology Expo in the morning. I posted yesterday about comments regarding CAPTCHAs gleaned from that talk.

The two presenters work in the technology field providing technology support for people with various disabilities and are themselves blind. They demonstrated how they use screen readers to accomplish various tasks online, like checking the weather, tuning into a football game streamed online, checking stocks, buying groceries, and buying a computer.

I appreciate observing and listening to people with disabilities who use the Internet, because it helps counter what I know about the technology with what is clear about people. That is, people adapt and make things work to the best of their ability. These two presenters were gracious about technology-related problems that I know many sighted people would be upset with. They also pointed out that most websites are at some level usable by them, but of course they prefer ones that are more accessible. We did see a number of examples where they simply wouldn’t have been able to overcome some technical roadblocks without significant additional effort.

One part of the presentation included them showcasing how they use an iPhone. An accessibility feature on the iPhone causes a single tap on the touch screen to say the name of the application (or letter if it is the keypad), while the double-tap will activate it. So, they have audible feedback to find the function they need, plus the capability to then activate it. This seemed to work very well for them.

Another point made during the session is that these assistive technologies like screen readers and electronic braille devices are quite expensive. Some screen reader programs are more expensive than the cost of the computer itself. However, the presenters voiced hope because the prices are coming down. They cited Apple shipping Macs that have built-in accessibility features at zero additional cost. Also, for Windows, there are some screen reader programs that are only a few hundred dollars.

Special Session: Contemporary Issues of IT in the Sustainable Global Knowledge Economy

This panel session had presenters on the topics of:

  • delivering broadband across the state of Michigan even to rural areas (George Boersma)
  • ITEC, a center in Lansing that provides after-school programs to help youth learn about technology, science and math (Kirk Riley)
  • IT accessibility (Sharron Rush)
  • global knowledge economy (Mark Wilson)

All the presenters were well-spoken and interesting. Sharron Rush seemed to be the one presenter that is part of the usability and accessibility profession, though the others shared important information and perspectives.

Unfortunately, I don’t have the time to provide more details on these presentations.

Hybrid Technology for a Sustainable Future

Shane Shulze of Ford Motor Company presented information on what Ford has been working on in regard to battery powered cars. His talk was focused on battery technology, and it was interesting to see the audience’s response.

One participant spoke up and asked about how these new cars will address the safety issues with quiet-running cars. Shane’s answer was that Ford is aware of the issue. I suppose we can look to future prototypes to see how what they do with this issue. (From a UX perspective, I think that is a really interesting question: what are the design concerns in regards to the volume and appropriateness of the audio.)

e-Government Services for a Sustainable County

Salina Washington of Oakland County and Constantinos Coursaris of Michigan State University presented on how Oakland County has transformed their delivery of services to citizens of Oakland County with the eGov department of the county government.

This presentation was inspiring. We know that good, usable technology can improve service delivery and decrease costs, but this was an actual example of that happening.

The take-away from this was that when faced with a challenge, like a massive cut in budget, instead of going the traditional route of laying people off, think creatively and as a group come up with ideas on decreasing costs and making the most of the resources that each part of the government agency uses.

Sustainability and Agility: UX Designs for Eforms

John Rivard spoke about integrating UX and Agile development at a bank. He shared examples of their workflow, like work-ahead, follow-behind. This was also an excellent presentation and it seems that the way John is working is similar to how we operate at Covenant Eyes.

That’s all folks

All-in-all, it was a good day with some unexpected, but enjoyable talks. Good job to the organizers from the MSU Usability & Accessibility Center! Also, check out Tom Schult’z posts on his blog.

User experience, web, technology

WUD: captcha problems discussed in assistive tech expo

Tom Schultz and I are at the World Usability Day event hosted by Michigan State University today. We sat in a session this morning that focused on a demonstration and discussion of assistive technologies.

An interesting point in the discussion was that problems with CAPTCHAs for people with visual  impairments. One of the presenters went through a process at the DELL website, selected a computer and went to purchase it, but on the way to checking out, he had to pass a CAPTCHA that asked him to enter the characters he sees in the image into a text box.

Of course the problem was that he could not see the image and there was no alternative available. No sale.

Someone else brought up Google’s use of audio as an alternative to the visual CAPTCHA, but the presenters pointed out that for someone who has both visual and hearing impairments, this is still insufficient.

(You can try the audio CAPTCHA on the first page of the sign up page for Blogger. Try it out!)

They pointed out that a CAPTCHA that used reasoning could be a more accessible approach, and another idea was to send an email to verify that the agent is, in fact, a human (that’s the point of a CAPTCHA).

I’ll probably post another update from this conference later.

User experience, web, technology

Paper: crucial to Web design

At first thought, Web design is a digital job. But as long as I have done this work, I’ve had paper on hand.

In the 90s I’d quickly sketch different ideas for overall design, narrow it in, and then sketch out the plan to create the layout with tables, complete with pixel dimensions for each cell and notations on margins, borders, and padding. I’d annotate the sketch with hexidecimal codes for colors to use. The process placed ink before pixels.

As CSS gained ground and the industry left table-based layouts behind, I sketched fewer details, but usually still rapidly drew thumbnails of page layouts on paper before settling in.

For a time, I thought I could do most of this work with computer programs as my primary tools: Word, Excel, Photoshop, Fireworks, Flash, Dreamweaver, and straight textual coding tools like BBEdit. Later, OmniGraffle joined the toolbox, and I did first-round design digitally.

Ink before pixels again

notebook-sitediagramOver the last six years paper and ink has again become my first tool. Hand-drawn sketches and notes are fast and fluid—far moreso than code or Photoshop.

With a quick sketch in hand, the coding can leapfrog some easy-to-make first mistakes. For instance, last week I needed to create some screens for a 3 page sign up process. I spent about 30 seconds drafting two quick page layouts on paper before I jumped into Photoshop and Dreamweaver to create the graphics and code it up.

By doing the second sketch, I was able to make better use of a design grid and utilize white space more effectively. That’s 30 seconds well-spent, and it means I didn’t have to waste time in Photoshop or with code on a design that had whitespace problems.

Good paper is worth it

When I started my latest job, I asked for some paper to sketch with. I was provided with some cheap cardboard-backed white notepads. Each pad fell apart within a week or two of use, and was better suited to ripping sheets off then holding together. Irritating!

I started to use my own notebooks for work, and just a couple weeks ago purchased a set of Moleskine Volant notebooks. They are softcover notebooks about 5 by 8 1/4 inches, and are well-bound with excellent ruled paper. I think they’re the best notebooks I’ve ever had.

User experience, web, technology

Many stories in user experience

I just watched this TED talk, “Chimamanda Adichie: The danger of a single story.”

Please, take the 18 minutes to watch it, then continue to read.

Watching this talk brought to mind two thoughts related to user experience work.

First, in a recent edition of Interactions magazine there is an article “Stories that inspire action” by Gary Hirsch and Brad Robertson, that has planted the desire in me to uncover the stories of the company I work for, Covenant Eyes. There are so many ideas we have of ourselves, set by the expectations of management, employees, and so forth. But there are also stories of our customers, and by telling many of these stories, I suspect we will hear some stark contrasts that will cause us to reckon with ourselves.

Have we stereotyped our corporate self?

The second thought is in regards to personas. At Covenant Eyes, my colleague Jackie has taken the lead on creating a set of personas that we can use during our design and development work. This is a first for us. This week as we were reviewing the current set of about 16 personas, we were working on writing in various scenarios for each persona. I think the point of each scenario is to enrich the story of that persona.

But perhaps more important is that across the full set of personas, however large it may get, that we have properly balanced the stories that are represented by each persona. I think, at its root, that is part of why personas are valuable in the first place. To challenge the stereotype, the single story, that we might have in development about our “user.” These personas will be valuable if they can help us tell the many stories of our customers and users.

User experience, web, technology

A Sad Tale of Pagination

I imagine some professional chefs are accused of over-analyzing a bowl of soup now and then. Like that, as a user experience designer, I get caught up in little pieces of user interface on a regular basis.

This particular story concerns a navigation system that utilizes pagination in what at first seems an obvious choice, but upon observation it is clear that this is a very poor approach.

Background: Company setting

Covenant Eyes, Inc., is an  8 year old software company in Michigan with about 50 employees. About a dozen are customer service representatives, some for enterprise customers and some for individual or family accounts. There are about 10 in the IT team, which includes myself.

Background: What service does our company provide? Internet accountability.

Take 2 actors, George and his friend Paul. George is addicted to online porn, but he really wants to beat his addiction because he feels it is wrong and could really mess up his life. To attack his problem, George installs our software on his computer. The software keeps tabs on George’s activity, and once a week sends a report of that activity over to Paul. Paul can then talk with George about George’s Internet activity. It seems simple, but removing the anonymity of his addiction is powerful.

The point, in a nutshell, is accountability. If George is trying to kick some bad online habits, his friend Paul now has information in these reports that he can use to hold George accountable.

The current design calls for pagination

These Accountability Reports are like executive summaries that include links over to what we call the “Detailed Logs.” This log is a full list of URLs that George visited.

Depending on the amount of activity, the log may have thousands of entries for Paul to navigate.

When these logs first became available, customers’ download speeds were more of an issue than they are today, so the developers knew that they could not simply put all the entries on a single page because the pages would take far too long to load.

Pagination to the rescue! The developers broke up the long list of URLs into pages, each page having 50 URLs. To help Paul navigate this long series of pages, numbered page links and “Previous” and “Next” links were placed at the top and bottom of each page.

So, let’s say Paul is looking at page 50. He would see something like the pagination navigation shown in Figure 1.

Figure 1: Pagination
Figure 1: Pagination

This seems a good approach on two fronts.

  1. Paul won’t wait to download one page with over 8,000 URLs on it, but if we divide that time into, in this case, 165 separate downloads, each page will seem pretty quick.
  2. Pagination will work for Paul because he uses pagination on nearly every search engine results page. It’s nothing new to him.

Bingo. Problem solved. Right?

But why does it take so many clicks to find the right info?

I was standing next to Mike, one of our Customer Service Representatives, and asked him a seemingly simple question. “Mike, can you bring up that log and show me what was going on last Tuesday at 11:32 AM?”

I did not intend it to be a usability test, but it might as well have been. Mike helps people every day by walking them through reports and logs, so he is as expert as anyone gets at navigating these logs. Yet, the basic task of finding a page with a specific time on it was accomplished by a series of guesses, each slightly more informed than the previous guess. It took 8 tries before Mike got us to the right page.

Since then, I have seen people repeatedly click the “Next” button, flipping through each page to find the one page they want. With 165 or so pages in a log, this can take far more than 8 clicks.

If someone knows the date and time they want to view in a Detailed Log, shouldn’t they be able to get to that page without guessing on the first try?

20/20 hindsight: Why is it so hard to find the right page?

Pagination is a valid interface design pattern, and is perhaps most often seen on search engine result pages. Still, it does not work well here.

So, why doesn’t pagination work here? Thinking in information architecture terms can help answer the question.

Pagination is a metaphor from the print world

We’ve all grown up reading books and magazines, and so page numbers are a tool we take for granted. In print, they are used to keep track of where we left off so we can pick back up at the right point. They are also used as non-digital hypertext, like in a magazine where we see “continued on page 58.”

On the web, pagination has become something slightly different, but the metaphor carries over well enough to work for us. On search results pages, we now expect to see a pagination interface at the bottom of the search results to allow us to continue to the next page of 10 or 20 links. One difference on the web is that we expect those links on the first page to have higher relevancy than those on the following pages.

So, on the web pagination is an answer to a finding question, and is based on an underlying organizational system of quantity ordered by relevancy.

However, in this case, the list is ordered by time but paginated by quantity. In this case, people want to find by time, but quantity is not metered evenly against time. So, page 1 might have 50 entries that cover 5 seconds of activity, and page 2 might have 50 entries that cover 32 hours of activity. There is no predictability of how much time will be represented from page to page of results, and that is why people are left with so much guess-work.

Match the interface to the underlying information architecture and users’ information needs

In recent work, we’ve shifted to a time-based pagination (Figure 2) from a quantity-based pagination (Figure 1). We think this will go a long way towards helping people find what they want without having to guess.

Figure 2. Find-by-time instead of pagination.
Figure 2. Find-by-time instead of pagination.

I’ve observed a few users have their first contact with this revised interface, and it has worked well so far. We may have introduced other usability issues in the process, but this is a step in the right direction.

Moral of the story?

Before implementing a user interface design pattern, be sure you first understand the information architecture and users’ information needs. Otherwise you risk using the wrong pattern, hurting your users’ experiences, and missing out on an opportunity for innovation and good design.

User experience, web, technology

UserVue review

UserVue is an application from TechSmith. At work we’ve used it recently to do remote user interviews, where we’ve had people who use our services talk us through some emailed reports they received from us.

It allows us to view and record a user’s screen, and save it as a WMV or Morae file. Additionally, it can record a phone call you have with the user. And, you can have colleagues at other computers observe the session and they can take part in an observer chat and submit notes along the way.

There’s that saying, “Hunger is the best sauce,” and I think the user experience design community has been very hungry for a tool like this. So, at the moment, I’m quite happy with UserVue.

It was quite easy to use, and it worked well.

Now, to save others some frustration, let me tell you about how it didn’t work well.

When I first tried it, everything seemed to be going great. I conducted a 1 hour interview, and at the end it seemed to save the recording. Then, when I went to view the recording, I realized that the phone call was not included in the recording! The best part of that interview was, go figure, in what was said. I was distraught.

Why? UserVue only works on Windows. I was running Windows XP Pro in a virtual machine on my MacBook Pro laptop, using VMWare Fusion. Apparently, there is a problem with that configuration.

I tested UserVue on that same computer, but instead of in a virtual machine, I booted into Windows using BootCamp. UserVue worked fine that way, including recording the phone call.

User experience, web, technology

Note to self regarding “Blunder: Why Smart People Make Bad Decisions” by Zachary Shore

I recently finished Zachary Shore’s book “Blunder: Why Smart People Make Bad Decisions.” I think I heard an interview with Shore on a show on NPR and the lessons from the book seem important.

So, some time has passed, I’ve read the book, and before I pass it on to someone else, I feel a need to record some personal notes about it, in case I lose it.

The blunders (titles of the 1st 7 chapters of the book):

  1. Exposure Anxiety: The Fear of Being Seen as Weak
  2. Causefusion: Confusing the Causes of Complex Events
  3. Flatview: Seeing the World in One Dimension
  4. Cure-allism: Believeing that One Size Really Fits All
  5. Infomania: The Obsessive Relationship to Information
  6. Mirror Imaging: Thinking the Other Side Thinks Like Us
  7. Static Cling: Refusal to Accept a Changing World

From the last chapter, Shore mentioned 5 ways to prevent blunders.

  1. Mental flexibility
  2. Willingness to question majority view
  3. Rejection of reductionism
  4. Development of empathy and imagination
  5. Embrace uncertainty

I don’t have the time that writing about this book deserves, but in relation to user experience design, these lessons certainly apply and complement what I’m sure many UX pros already have learned. The historical perspectives in the book made it interesting and provided realistic narratives to explain the various cognition traps.

As a designer and a product owner in scrum, this is an important read. Advisors and executives should read this book, too.

There are some bits of information that I try to memorize in order to encourage my mind to recall them as needed. Some proverbs, usability heuristics, certain interaction design “laws”…and now these blunders I will try to add to this list.

User experience, web, technology

I was a Whole Foods first-timer

Asparagus! Credit to Esteban Cavrico on
Asparagus! Credit to Esteban Cavrico on

I am not a foodie. Okay, now that that is out of the way: Whole Foods is amazing.

One evening at last week’s IUE2009 conference in Ann Arbor, Michigan, my colleague Jackie and I breezed through the local Whole Foods store. From a user experience perspective, my Whole Foods experience was really great. But, let me digest it a bit further.

As author of “Neuro Web Design” Susan Weinschenk explained, our “old brain” triggers on 3 questions: can I eat it, can I have sex with it, and can it harm me.

Upon entering Whole Foods, we were first met with luscious fresh fruits and vegetables. They appeared and smelled a factor better than the normal produce at the grocer in my village. I walked in with the intetion to buy one item: baking powder that uses potato starch instead of corn starch, so when I realized I was gazing lustily at the asparagus, I swallowed my mouthful of saliva and steeled myself with the rational part of my brain. Discipline! I would not succumb. Still, it was delightful to walk around and see the beautiful cuts of meat, the great selections at the deli, the desserts, the wine, the cheeses.

We had circled the store and were approaching the checkout and realized that we hadn’t seen the baking section.

So consider: We were in an unfamiliar store and had not located the item I was seeking. I was not irritated by this. The general happiness of walking through this great store put me in a very tolerant mood. I actually looked forward to seeing what other great things we’d see on the way to finding the baking powder, and I had high expectation that they would, in fact, have the baking powder. They did have it. I bought two cans of it, at a premium price. And, I ended up buying some turbinado sugar that was in the same aisle, since I was nearly out of demerrara sugar that I use for baking (and in coffee and on oatmeal…).

Designers! If you haven’t yet, read “Emotional Design” by Don Norman. Oh, and Weinschenk’s book too.

User experience, web, technology

IUE2009: Now what?

Whiteboard ideas cluster from IUE2009 conference
Whiteboard ideas cluster from IUE2009 conference. Click to view larger version.

Now comes the after-conference exhalation. (And I just attended! Imagine the organizers.)

My employer, Covenant Eyes, sent a small crew of people to the conference…8 of us in all. For all but me, it was the first time at any UX conference, and I think we all learned quite a bit.

So now the question becomes, what did we learn from all these tutorials and sessions, what ideas will help us do better work, and how can we make sure to build these ideas into our daily work.

I understand that most of us will gather on Monday to start hashing out those questions, but in the meantime I thought I’d share my initial map of ideas, recently jotted onto my whiteboard. Click the photo for a larger, more readable version.

Concepts on the board:

  • Use Cases
  • Field Research
  • Personas & Persona Maps
  • Rapid Iterative Design, “Kleenex Tests”
  • Branding+Content+Search Engine Optimization
  • Social Web (Podcasts, Twitter, Facebook, etc.) But Be Real!