A UI Experience: Yahoo! Password Change
I feel a bit like I’m picking on a retarded kid, but I’ve been asked for instructions about changing one’s password on a Yahoo! account, and I figured that was a good excuse to analyze some of the pitfalls of bad UI. Having just tried to find it myself, I have to say it’s not very easily discoverable unless you know what to look for, and that’s pretty hard for a non-programmer.
First, a caveat: I’ve only tried to do this in the context of accessing Yahoo! Mail. It’s possible that other Yahoo! applications make this process a bit easier, but I’m going to assume the person who needs this (friend of my uncle’s, I’ve never met her) is a typical user who doesn’t care about anything other than Yahoo! Messenger and Mail.
With that said, let’s see how to do it:
First, go to http://mail.yahoo.com/ — the easiest way to get straight to Yahoo! mail:

If you don’t have automatic login enabled, you will probably have to sign in now:

In the above picture, note the “Forget your ID or password?” link that can help you if you can’t remember those.
And now we get to the really bad UI: Yahoo! Mail “non-classic” (click for bigger screenshot):
![]()
I know, that’s not the whole UI, I’ve cropped a lot of it out, but the interesting part is in there. See what I’ve highlighted there:

When you click it, this is what you see:

Now, you have to figure out that the “Edit My Account” link is likely to have the password-changing option (maybe not that huge a logic leap — I’m not a user, I don’t know how they think). It’s right there:

The result? Erm, you’ll have to enter your password again:

This helps, I’m sure (for instance, if you have auto-login enabled and some idiot goes to Yahoo! Mail on your behalf, at least they can’t change your password, right? But they can read your mail, and send mail as you. Oops.
On the other hand, the profile edit page appears to contain more sensitive information, such as home address, telephone numbers, and such. It would probably also contain credit card information, which is definitely something we don’t want an unauthorized prankster to see.
So, anyway, the result is you’ll be presented with this screen (click for bigger screenshot):
![]()
Which, among other things, contains this:

That’s right, there’s the Change Password link. It didn’t take long to get here, did it? Click it, and you get this:

After you fill out this rather standard password change form, you should be looking at this:

That’s it! Now, let’s see how much it took to get here:
- Two password prompts (one of which might not show up in some cases)
- Figuring out a UI element is actually a menu, and that it’s the one we want!
- Understanding that editing “my account” includes changing the password (as I said, maybe not so much of a logic leap)
The conclusion? It’s not too bad, but it could be better. I’d love to see this action — changing one’s password — be somewhat more easily discoverable without having to browse through a drop-down menu, but otherwise it’s pretty understandable once you spend a few minutes thinking about it.
And there’s the rub: you have to think about it. And it’s not in the obvious place, either — there’s an “Options” menu you might think was related, but it actually refers solely to the Yahoo! Mail options. I have no doubt a lot of people get hung up on this point: “I’ve looked everywhere and I can’t find it”. The profile menu is hidden away in the top-left corner next to the logo, and it looks like a greeting, rather than something with which to get stuff done. Further, there are so few options in that menu that they could all be shown directly below, like the “Sign Out” link is, and that might help a bit.
Alternatively, maybe the drop-down menu could be called “Profile Options” or “My Profile” or something, rather than “Hi, <first name>!”. That makes it look like website fluff rather than like an actually useful piece of user interface.
Oh, in case you’re wondering — I’ve removed my details from the screenshots mostly for clarity, rather than out of any fear of giving away any information. My “About Narc” page contains the personal info I’m okay with having out in the open, and you’ll probably note it’s pretty complete. I’m not that bothered by having random people know my personal information — I assume nobody really cares.

XHTML: You may use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
RSS feed for comments on this post. TrackBack URI