I think the UCSD Online Learning expects you to have problems with logging in... hence "Forgot your password?" is the first thing they present to the user. Well, sure enough, I had forgotten my password (as I'm prone to do when I first create a new account or return to an account that's been inactive for years), so I had to click on the "Forgot your password?" link.

Which brought me to this monstrosity: 

Seriously? They need to give me instructions on how to change my password because they've set it up so it's basically unfathomable at first glace? The red arrows and big red slash circle should be the first sign to a designer that there is a fundamental flaw in the user interface and the designer should go back and re-evaluate.

Next and Previous Blog Links

This is from the bottom of the blog for my favorite web comic: http://www.schlockmercenary.com/. And this is the way it should be done, with up and down arrows.

This is from the oh-so-familiar blog software, Blogger.com... which I use very often. It's not a bad interface, but why is the one with the arrows better than the one without?

 

It is because of how we read, which is from top to bottom and left to right. If we want to continue to read, we could scan downwards, especially in a website. Now, in many cases, clicking on older/newer will open a new page with a block of posts, so technically there is no "up" or "down" since, after all, you're starting again at the top, no matter what. But imagine the continuous flow. It always leads older text to newer text in a top to bottom manner. The arrows offer an intuitive affordance. 

That all said, the newer versus older paradigm isn't bad; at least the wording tells you what you're going to be looking at. But the side (left or right) that the link is on gives no particular affordance, at least not an intuitive one. We read from left to right... so "newer" -- that is, first to be read -- text would come first and "older" would come later. I'm not very comfortable with that l argument. The back button on your browser points left and takes you back to what you previously visited, so it might as well as say "older" on the left as opposed to the right. And adding left/right arrows (which I've seen on some sites) doesn't add much value either. However, up and down arrows work great. If I want to continue reading the blog, I am naturally inclined to draw my eyes down the page, eventually seeing the down pointing arrow, encouraging me to explore further, even if I don't read the label of "Previous." It's just a better affordance.

Input Fields v Multiple Choice

I'm looking into starting a local charity and so as part of my research, I came across 'Stayexempt.org', an IRS sponsored site that talks about how a charity can retain its tax-exempt status. After a very cheesy, yet informative, series of instructions, there is a quiz.

Take note that the answer field is simply an input form field. You can type anything in there. I happened to type 'Duck' for my answer to make this point.
As expected, my answer was wrong. It should have been 'substantial.' What if I had put in 'substntial' (missing the first 'a'?). The answer would still be wrong.


And that is because there is no constraint on what the input might be. A multiple choice answer would have been much better, allowing the user to at least have a clue as to what the answer might be, and then not getting frustrated (if you can get frustrated with such a simple game) by a simple typo.

But wait, you say, "Maybe the IRS wants to demonstrate that you need to know the answer by heart? And no hints allowed, other than through the question." I get the point. I think it's a stretch in any web-interface situation like this, but I get it. In that case, if it is that vital, the answer system should accommodate common spelling errors. Google does it all the time; as do auto-spell checkers in word processing apps.

In the case of this app, it wouldn't be too hard; there are only a few options total in the entire game and a quick check wouldn't detract from the interface anymore (than the interface detracts from itself; sorry, IRS web dev folks; you obviously weren't given a very big budget).

So recognize the errors that a human being might incur through mis-typing. Put constraints on options in order to reduce the amount of frustration your user will encounter because of simple spelling errors and the like.

Hidden Fields

This is a shot from PayPal's payment site. I was buying some tickets for an event and as I was attempting to tab through the fields, I realized I was unable to type for some reason. Notice the dotted lines above and below Address line 1. Those show up on the website, and at a guess, they highlight a hidden field. I had to tab again in order to get to the proper field, where things functioned properly.

This is more of an exercise in testing and quality assurance than it is a specific user interface issues. Obviously, this is not how the page should behave, but somehow PayPal's web team let it slide by and no one checked it. How does that happen, and more importantly, do they apply the same level of diligence to the rest of their site, say, when they're taking your credit card info?

(For the record, the problem didn't stop me from making my purchase; I use PayPal and trust them as well as any other reputable company (that is, with a grain salt). But when little things like this occur, it does make me question what else is or is not going on behind the scenes.)

Field Formatting Forgiveness

Here, while I was filling out a form a for a local college, I encountered this little problem. After having typed in my phone number (which is in a valid format for a US phone number), I got the error show above. "Please enter a valid US phone number XXX-XXX-XXXX".

This is an example of a failure to be forgiving to your users; asking them to guess (because there was no indication of the format before I entered the numbers) what the proper format is annoying. Other valid formats include: (XXX) XXX-XXX or XXX.XXX.XXX or even XXX/XXX-XXX.

Instead of making the user fill in a field to fit your expectations, allow them instead to put in any format they desire; check for the 10 digits needed to be a valid phone number and then have the system reformat. That way, you're not annoying your user and you can still get consistency in your data (and it's under your control).

The original Motorola Droid is not my favorite phone. I own it because I needed it for work and it was the first serious competition for the iPhone when it came out. Since then, many new phones have come out with wonderful features that I suspect could have been integrated into this particular generation of smartphone.

For me, the keyboard on the Droid is terrible. Most people complain about the lack of tactile feel, and I agree that it sucks, but that's hardly the sticking point for me.

Instead, the position of the Alt and Shift keys seemed flip. I find I use the keys about equally between capitalization and punctuation. However, it feels unnatural to me to have to stretch my thumbs out the the side to hit the shift key. Instead, I often hit the alt key instead when I need to capitalize a letter. And then I get frustrated and hit it again because I've inadvertently put a symbol in its place and then hit Del... erasing my entire line because I hit the Alt twice followed by the Del key. Not what I wanted.

I think the problem relates to the normal keyboard on a desktop. To hit the shift key, a person uses their pinkies, not their thumbs. However, on the Droid (or other mobile), you use your thumbs for all tapping; the other fingers are stabilizing the device, or as is the case of the pinkies, not being used at all. So if the usage model changes, so should the layout. Obviously, Motorola/Google didn't think this was a major problem and that people would probably get used to it. But what it really shows in a lack of thoughtfulness on their part. They have an extra blank space on each side of the keypad (where the red arrows are pointing); they could have extended the either the alt or shift keys to be larger and more accessible, for example, but only after having evaluated which set characters get used most often.

When messaging, I use a lot of contractions... it keeps the sentence structure proper (not using "u" and "ur" and things like that that) while keeping the character count down. So I need the apostrophe a lot. What a pain to type "I'll" as: Shift-I-Alt-M-L-L." The need to make a shift between the Shift and Alt keys makes the process very cumbersome. A larger keyboard with its own number row (or pad; does the ugly looking directional pad [green circle] ever get used? -- okay, sometimes, I guess) would have made life easier; put the key punctuation characters as shifted versions of the number keys instead. On top of that, you get the bonus of more easily being able to type numbers into a text field... you know, something that happens a lot on a TELEPHONE.

And don't get me into that overburdened space bar. The space bar simply should not have a double function. It should do one thing and one thing only, no matter what mode the rest of the keyboard is in. It drives me crazy to have shifted into alt mode while typing number and then have an odd dialog, unrelated to my need to have a space between numbers, popup when I hit the space bar.

There are some redundancies in the interface that I think could have been left out and made for better space. The Menu and Search keys are both duplicated on the 'hardwired' part of the touch screen (see in blue). In the case of the menu button in particular, if you select it, you get a task bar popup at the bottom of the screen. Meaning you have to move your finger to right around where the 'hardwired' touch button is anyway. So what's the point of a physical key? The search key makes a little more sense... but not in light of the fact that Moto could have used that space to make bigger Alt/Shift keys, or a better keyboard, or an "Fn" key for a third level of functions (if they really wanted to overload the modes on the keyboard!)

The take away here is actually deeper than my minor complaints about the keyboard. The fact is that Motorola is a very large company that, given the opportunity they had, blew it when it came to creating a useful and elegant design to compete with Apple's iPhone. The keyboard is simply under-designed. It's awkward and overloaded and uncomfortable to use. And there is little excuse for such a design failure when there were already tons of examples of keyboards out in the market (Blackberries galore!) to sample from, years of research to help, and tons of money invested into the project. This was simply a sloppy decision on Motorola's part.

Don't Move the Buttons, Please

You can often find this control set on many web comic sites. When you are viewing the most current comic, there is no need for Next/Newest, so they aren't displayed.

However, when you click on Previous, frustration ensues:

The Previous button is shift over to the left. The cursor doesn't move, so the next time I click, I actually end up pressing Newest, returning me back to the beginning. Awkward.