People first. Information first.
sketch-skyline-4200-80o.png

Jeremy In Flight

Password Follies: An Example of Task-Centered Design Gone Awry

Summary: Designing a user’s tasks into the background is a surefire way to create a poor digital experience. If you don’t value your user’s time and energy, they will hate you for it. Case in point: Changing my password on the University of Pittsburgh’s “MyPitt” website.

I could go on all day about the perks of graduate school, starting not least of all with the payment of exorbitant sums of money to spend precious hours with professors who haven’t updated their PowerPoint slides since Y2K. But if in particular you want to study UX design, boy oh boy, academia is a goldmine. A university’s information systems can provide a semester’s worth of awful, maddening experiences from which to learn!

Let’s take a small example from the University of Pittsburgh’s “MyPitt” website. Upon signing in the other week, MyPitt informed me with an alert at the top of the page that it was time to change my password. Not what I logged in to do, but that’s OK. Should take me all of 30 seconds. So, I click where it says “Click here to change your password,” and it takes me to the following screen. Here’s what happens next:

pitt_pass_1.png
  1. I see another alert at the top of the page but only give it a glance. Yes, I know I have to change my password — that’s why I clicked through in the first place.
  2. I start skimming down page, and I am looking exclusively for one piece of information — how to change my password. “There must be a link,” I think to myself. This section, though, explains why I need to change my password, and that’s all right, but I can take a guess. Moving on.
  3. When should I change my password? Well, I’m here now, aren’t I? Where’s the link? Not in this section. Moving on.
  4. Finally, a link. Looks like it might be what I need, so I click.

That takes me to this screen, and my frustration is rising:

pitt_pass_2.png
  1. Wall of text. I start reading the first couple of paragraphs and it looks like similar content from the previous page, with no further indication of how I’m supposed to change my damn password. So, I jump …
  2. … to the FAQ down below. I’m still looking for a link or anything that stands out as useful, and finally, some bold text catches my eye way down the page:
pitt_pass_3.PNG

“Well, this is stupid,” I think. “It's directing me back to MyPitt, where I started.” But wait!

3.  As I scroll up again, I see a link in the right sidebar that says “Change Your Password.” And that takes me here …

pitt_pass_4.PNG

… to a page titled “Change Your Password” that actually contains zero functionality that would allow me to change my password. It, too, directs me back to MyPitt.

Head, meet desk.

So what’s going on here? Why is this bad UX design? How did a task as simple and mundane as changing my password become a little odyssey?

 

Let’s analyze the problem, shall we?

The original sin of this digital experience is that the user’s task — what we actually want them to be able to do here — is designed into the background. It begins with that big yellow alert, the most eye-catching element on the page. Nearly as eye-catching are the big headlines right below, and the boundary styling that clearly tells me this is the main body of content. The upshot? This becomes “eye-level.” This (No. 1 below) is where the user starts. Which is problematic because the link for the “password wizard” — the very thing I was looking for — is above eye-level and outside the body (2). Not only is it outside the body, it’s in a sidebar area typically filled with stuff I’m prone to ignore, a mish-mash of resources from video-conferencing software and iTunes to online billing. As user, I have no reason to look right. The design guides my attention downward.

pitt_pass_5.png

Now, upon closer inspection, it does instruct me in the main body to turn right and click the “wizard.” But first of all, this information is included in a sub-section titled “When should I change my password?” It’s well-known that readers don’t read on the web. They skim, like I did. Because of that, sub-headlines can’t be a slapped-on afterthought. They’re critical guideposts toward a user’s goals, and in this example, what you get is a misalignment of information and what we might call an expectancy violation.

None of that is to even mention there’s absolutely no visual emphasis on the one piece of information that could help me. What is emphasized in bold? A message warning about the consequences of not changing your password (4). The first step in any worthwhile task-centered design must be to answer the question of who is going to use your system / application / website to do what. To be fair to whomever made Pitt’s website here, I imagine they worried that students in their late teens and early 20s with short attention spans and blind spots for consequences would ignore the need to change their passwords, and so the designers sought to beat them over the head with it. But the result is a collection of web pages with the wrong priorities, which makes for one bad user experience.

All of this may seem like a small thing, but the minutes of the day are filled with small things. Time and energy are my most valuable resources, and while one is renewable, the other most definitely is not. The best designers of digital experiences, interfaces, and interactions are those who value the user’s time and energy as much as the user does.

 

What could’ve been done differently

Luckily, MyPitt doesn't need to be blown up for this to be fixed. Let’s assume that we’re keeping the layout intact, sidebars and all. My redesign would look something like this:

pitt_pass_6.PNG

Gone is the jargon about the “change password community.” Gone is the “wizard” from the sidebar. Changing your password ought to be priority No. 1, so that’s brought into the main body with a button that aims to be the most attention-grabbing element on the page. It could be a link, too. Doesn’t matter, as long as it’s visual and clear.

I’d probably dispense with the password expiration alert because if the user arrived here like I did, they’ve already seen an alert on the homepage, and they’re motivated enough to change their password now. Other changes would include trying to consolidate information from other related pages (e.g. the password tips), fitting sub-headlines to their content, and breaking up text to make it more scannable.

Of course, had the designer recognized and valued in the first place what I needed to accomplish on the site, that would have been even better. As a user, I don't think that’s asking for a lot. In fact, it's the least your users could ask for.

Jeremy BurtonComment