Navigation

Friday, December 23, 2011

Hiding things

In the Google account within the Contacts app on Android (more specifically, Motorola Droid Razr), you can select which contact groups you want to show on your phone. Fantastic, I said. Now I can only show those people who are truly relevant to me and ignore all the rest who, while important for historical purposes, clutter up my search when looking for a friend I want to call for lunch.

There are some problems with this. The one I am about to describe comes from an attempt to add a young lady's number into my phone.

I did. I entered it. Name, phone number, e-mail, even some notes. "Save," I pressed. And she was nowhere to be found. Did it again, just in case I hit "Cancel" (which, I did, btw, on this second attempt, forcing me to make a third attempt.

I went into GMail to compose a mail and when I began to type her name, voila!, her name came up. Twice, to be precise. She was obviously in contacts, but yet no form of search could find her.

It dawned on me. I had restricted my contact groups. I looked, and sure enough, when I turned on "My Contacts" (or was it "Other Contacts?" I don't know; I click lots of check marks), my lady friend's name showed up.

Moral of this story is, when designing a record system, provide a reasonable default that takes into account the user's current settings. I should have been able to at the very least select a default. Or perhaps better, Google should have auto-created (as it does with Starred Favorites) and "Added via Phone" group. That way, you know where your new contact came from.

Thursday, July 21, 2011

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.

Friday, July 8, 2011

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.

Thursday, June 23, 2011

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.

Monday, June 6, 2011

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.)

Friday, June 3, 2011

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).

Tuesday, May 24, 2011


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.

Friday, May 20, 2011

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.

Sunday, May 15, 2011

iPod Interface with Honda Fit Radio

Overall, I'm pretty happy with my Honda Fit Sport. I bought last year because I needed more room for camping and biking gear than my MINI Cooper S could provide (which was a wonderful car as well, just small (hence the name)).

I didn't exactly do a full test run of the entertainment system when I bought it. I was happy that it had an in-glovebox iPod/USB connection and that was good enough for me. Now that I've had time to use it, I have a few comments to make.

Here's a shot of the console. Overall, the controls are easy to access and big enough that I only have to glance over briefly when I reach up to change a song or station.


One thing I didn't notice at all but I think should have stood out to me was that there is no Pause/Stop (or even Mute) button. I have to hit the tiny power button up the upper left hand side of the console in order to turn the music off. There have been several times when I've wanted to silence the radio quickly but had to fumble around, 1) to remember that there's no Pause and 2) to look for the tiny button. It's been a bit frustrating.

You'll notice that this is not only a radio, and as I have told you, a USB music player, it's also a CD player, so many of the controls are overloaded to support all three of these modes. It's done pretty cleanly, I feel, other than that nagging problem with the lack of a Pause button, which is standard with CD and digital music players.

There's a little bit of dissonance with the iconic representation of the controls on the center volume wheel. Left and right Seek are obvious and traditional, but the Play button is on the bottom, and then there's a down facing triangle:


Which, as it turns out, is a down arrow that matches the up arrow next to a return/back icon:


As silly as this sounds, when I first saw the down triangle, I thought it was a misprint of the the normal right pointing arrow that usually represents play, and I had no idea what the up facing triangle and arrow u-turn icon meant.

So, other than the lack of Pause/Stop/Mute, I'm pretty happy with the radio interface. It's the USB interface, specifically as it applies to the iPod that I have a few extra issues with.

In this day and age, iPod owners almost inevitably have a large collection of music on their devices (I have a mere 1700+ songs on mine). I have about a dozen play lists on this particular device and I like to bounce around between playlists, artists and songs.

The Fit's console doesn't make this easy; the iPod features are accessed through the center Vol/Push/Select button:

A ring around the button serves as both the volume control and the scroll wheel. Pushing the button brings up a series of options that you normally see on the iPod (Playlist/Songs/Artists) and then pushing again on the selection delves deeper into the menu structure.


The big problem comes when there is a very large list to run through (say 1700+ songs):


Problems:
1) The enumeration is only two digits long. It goes from 00 to 99, then resets every hundred items. So, other than when the order happens to be alphabetical (and it isn't always), the user can't be sure of where he is in the song list. Halfway? Near the end?

2) One of my favorite bands is '30 Seconds to Mars'. The '30' means the band is alphabetized all the way at the bottom. In a short-ish list of 150 bands, I have to scroll nearly to the bottom to get to them. This is a huge problem when I'm driving, as you might imagine, and I don't like doing it -- even parked, it's a big pain. The scroll wheel is easy to use, but it's not fast and it doesn't have a fast forward mode on it. I have to continually roll it 360 degrees in short bursts to go down.

And there's no way to go from the top of the list to to bottom. That is, if my first band is say, Ah-Ha, I can't "scroll backwards" and get to 30 Seconds to Mars instantly (not that helps in anyway with the bands who are half way down the list from other direction).

On the iPod itself, Apple overcomes this problem in one of two ways: 1) allow for rapid flick scrolling (where the user perpetuates the scroll by continuing to flick the screen in single direction); it's still slow for long lists, but because it works by paging, the user can still find an artist fairly rapidly. 2) Selection by alphabetic hash: By popping up the alphabetic scroll bar, the user can get very close to anywhere in the list by going to the first letter of the band that is of interest. Even in a 26,000+ long list, it's easy to get to at least within a 1000 artists almost instantly.

3) When I have the system set to Random playback and then search through a Playlist, my only option is to play the first song in the list, then hit the right seek button to actually engage the random mode. That is, simply selecting a Playlist isn't good enough; I have to select the starting song as well, which isn't very random (and per point 2, even if I knew what song I wanted, it may take a bit of effort to get to).

There are a few other little hassles that get to me on occasion, but not so badly that I can remember them right now, so I guess they're all right.

I'll be trying to review more radio consoles as I get access to them. I already know that the Honda Pilot (with the navigation system) really is a pain to use, so that may be next.

The world around us

We interface with our homes as well as the web (in case you forgot). Here's a case in my own home, which frustrates me on occasion:


It's hard to tell exactly what this is, but it's a hallway closet door opening right into the hallway light. The architect/construction folks seemed to think it was a all right for the door to only open to 90 degrees from closed and smack into the light if there was any attempt to open it further. Every time I open the door, I cringe when I hear the door bang against the light. If I happen to not be paying too much attention and open the door quickly, I'm sure I'm going to break the lamp.

The hallway ceiling is very low, that's part of the problem. One solution would have been to install a canister light instead (and there is plenty of room above the ceiling for it; I checked).

What this article is really about is not necessarily that construction workers and architects are unthoughtful, but that there are multiple challenges that need to be overcome on large projects.

1) It's hard to see what the finally product will really look like until it's done. And in the case of an apartment, once the frame is up, things start to roll pretty quickly and small details like the placement of a lamp are often missed.
2) Cost is a factor. I might guess that someone actually pointed out the problem, but too late. By then, the lamp had already been purchased and taking it back and buying a new one was not in the schedule or budget.
3) Levels of indirection. Maybe the architect really did plan for a canister light or some other better solution (though considering the age and nature of the complex I'm in, I doubt it. Lowest possible bidder won out here). But the plans went through several hands and decisions where made. And in the end, construction workers really don't care about design; they just build according to what they're told or what the quickest, cheapest way it can get done

(side note: I'm really generalizing on construction contractors, I know. But I've met plenty of them and had work done by such folks and it's a rare few that actually think in terms of design and usability. And I treasure those contractors when I find them.)

The point is, usability and user interfaces exist more than on just the web or in a computer.

Friday, May 6, 2011

Password Confusion


This is a classic issue I see in many places on the Web. These particular shots are from the Turbo Tax website.

The problem is obvious. The user types in a password that they're happy with, hit enter, and boom! they get a messaging telling them "Oops. We know you can do better than that."

This site gives the user a double whammy. First it says the password is too short; then, if the user doesn't guess correctly, tells him or her that a symbol is needed. Sure, the user could click on password tips... but why the extra click? All of this could of course have been obviated by simply telling the user up front what the password conditions are. On the Turbo Tax page, there is plenty of space to put the tips in plain view (and at least Turbo Tax offered the tips; I've encountered some sites that don't even give their user that courtesy).

Monday, May 2, 2011

Get the arrows right!


Simple and obvious, from Citrix's job search website. The Previous arrow is pointing the same direction as the Next arrow. And -- as a side note -- the Preview button has an arrow, which begs the question, does it need one?

This violates the concept of Convention. Traditionally, in a left-to-right reading culture, a left arrow means to return or go back ("Previous") and a right arrow implies going forward ("Next").

Since the Preview button launches a new page (or updates the current page with a new format of the recently input data), there is no particular direction to apply, so no need for an arrow.

Friday, April 29, 2011

How to ruin a perfectly good sentence

In this gem, the author uses 'u' instead of 'you' in the middle of a sentence (which he has since corrected in some versions of this article) .

I've never been a big fan of using the 'txtspk' shortcuts in any sort of document or article. It looks unprofessional, and in the case of this article snippet, it shows a generally inconsistency. Most of the time, the author uses a proper 'you', but slips up once. Bad form.

Side note: txtspk shortcuts are great when there is actually a limitation on the number of characters you can type, but not when you have a full keyboard and unlimited space. There's a time and place for that sort of thing, but it's not here.

Thursday, April 28, 2011

A pop up calendar in the wrong place, but right time at least.


This is from a credit union site. It presents you with transactions for the current month and allows you to look back at the past history of transactions. However, when you click on the calendar icon, it opens another small window -- well away from where your mouse pointer is located. For me, this violates a couple of different design patterns:
  • Fitt's Law -- you're given a small target far away from the initial location.
  • Least Surprise -- it's a bit of shock to suddenly see another window open outside of the main window. What's it for? A spam ad?
There's a discordant association with the main window and the sub-window. What if you don't notice it? Then what?

A more viable solution would have been to connect the calendar icon with a menu drop, instead, that would let the user immediately understand the association between clicking on the icon and the results, as well as immediately knowing that clicking on the resulting small calendar would create the expected results. It would also prevent the user from having to move his or her mouse outside the scope of focus.

Tuesday, March 22, 2011

Traditional Address Ordering and Duplication of effort

When signing up for Dice, I got this page:







About

What's this all about? Well, for the moment, it's just repository for those little annoying flaws in the Internet that I experience on an almost daily basis.

In most cases, it's simple human error. A spelling mistake, perhaps. Or just a inexperience in design and implementation for a personal or small, one person business site. But for large corporations, it's almost inexcusable. At the very least, they should have a person who vets the design for usability. Aesthetics are important too, but, as has been said elsewhere, what are you going to remember -- a bad looking site or a site you had a bad experience with?

Saturday, January 1, 2011

Why does 'cd' work differently for drives and paths?

This has been a frustrating pet peeve of mine for a while.

When I hope my Windows command line, it starts me out on a network drive, specifically "H:", which of course I rarely have a need to be in. My first instinct, which is always wrong, is to type:
  • H:>cd c:
in an attempt to get to "C:" drive. I may even have include a path like this: "c:\path\to\my\folder".

This always fails, because what Windows expects you to do is this:
  • H:>c:
which will nicely give you the C:> prompt from which you can then navigate.

Why? Is there a way around this? My main problem is that I don't use the Windows command line that often, so I forget the nuance of switching between drives as opposed to switching paths. and why do I have to type the colon?

Unix flavors don't do this. The notion of naming something after an arbitrary letter of the alphabet doesn't even enter into the equation. Everything has a name, and accessing something, be it a file, a folder, or a hard drive, all happens the same way: $cd /This/Is/My/Path (where $ is the command prompt).

[Re-posted from Code Fog]

Titles in Web Pages

This is an interesting topic for me; I can think of multiple arguments for why people choose the titles of their websites like they do. But really, I wonder how many people even really think about it at all.

When I find a site I like or need, I often bookmark it, but also often find that I have to rename it so that when I'm glancing through my bookmarks, it's easy to find.

Starting the title of a site with the name of a company or the division, or the website itself is no good (unless it's the main page). Take this example from Qualcomm:


After saving it as a link, I end up with this in my bookmarks:


It's the highlighted one, if it wasn't obvious. And that's my point. Notice the other two Qualcomm links near the bottom. The only difference between them is capitalization (which violates the Consistency pattern). I can't tell what they actually link to. The bookmark titled "Customer ..." is actually the renamed version of the highlighted one above. Just by the fav icon (denoting Brew, Qualcomm's mobile software platform) and the word "Customer" I know that it's the customer support portal website for Brew. But I had to take action to get that to happen; it wasn't as simple as if Qualcomm had simply rearranged the title to be "Customer Support Portal | Qualcomm Brew" instead.

[Re-posted from Code Fog.]

Password Requirement Clarifications

This is from QUALCOMM's BREW MP website, after having attempted to input a new password. It says: "Please enter a password with at least 6 character, including three distinct characters and at least one number."

What is a distinct character? 'a', 'b', and 'c' are all distinct characters. Perhaps they meant at least one alphabetic, one numeric, and one non-alphanumeric character. Or does capitalization also make a character distinct?

What led up to this is even more interesting. When I registered for the site, it didn't ask me for a password, just an e-mail address (and lamely, an alias for the forums, which I obviously hadn't gotten to seeing yet, since I had to register first; don't make me determine a unique alias until I actually need it and understand the context). I couldn't log in (because of the lack of password) until I clicked on the "Forgot password?" link, which then brought me to the issue I started this article with.

QC seems to have issues with password and account registration... not the first time I've had to run through hoops to get a registration working, especially with the original BREW website.

[Re-posted from Code Fog.]

Searching by name

Here's a suggestion for website developers. If you're going to offer an alphabetical listing on a large or wildly varying set of data, give the user a alphabetical bread crumb trail and not a numerical one. That is, if you have a 1000 listings, don't give the user this:

"1 2 3 4 5 >>" where clicking on the brackets jumps you ahead 5 units and your users have no idea where the end is.

instead, give them something like this:

"A-AF AG-AZ B-BL BM-BZ ... J ... N ... Z >>" where clicking on the brackets jumps ahead to the next logical grouping (in this case, the "J" grouping") or a user can simply click on the nearby letter of choice. Clicking on the '>>' will jump the the grouping forward (or back if clicking on '<<') such as "B ... C ... D ... J-JF JG-JZ K-KF KG-KZ ... N ... Z >>" (after a couple of clicks, for example; effectively, the window that shows the specific letter range slides up and down as the user clicks on the brackets).

This would be overkill for a small data set and not very useful at all for something arranged numerically (which isn't helpful to begin with). But a user would know exactly where he or she was in data set and could easily get to the end of the data set (if he or she was looking for "Zoom" for example) instead of clicking on '>>' until an end was reached.

I've seen some other better variations of the numerical bread crumb trail before (compared to my example), but even then, numbers typically don't match very well with information that is arranged alphabetically. The letter J is the tenth letter of the alphabet; but that does not mean it's the tenth category in data consisting of thousands of entries.

The main point is matching your navigation with your set of data points to help the user get around that much more easy.

[Re-posted from Code Fog.]