Usability « Chomper Stomping

14Dec/074

Friday Reflective

So it's Friday. Time for another blog post.

Normally I write my posts on the weekends, the Tuesdays and Thursdays. I set them to post at the proper 7am M/W/F time. If one doesn't post at that time... it means I forgot, had nothing to say or didn't have time. Today is one of those days.

Don't get me wrong, there is tons to say. I just didn't have time come up with a good "blog post" based on any of my four topics that are floating at the top of my head:

1. I solved "The Rubix Cube" for the first time yesterday, thanks to this helpful youTuber (Is that like a "U" shaped potato of some sort?):

This is sort of like programming. You have a whole bunch of algorithms you can use to do different tasks. But you just have to know when to use them and in what order and how. It requires constantly re-evaluating your cube to be sure you are using the correct algorithm, and knowing where you came from, where you are, and where you are going. I could actually turn this into a whole blog post, but I won't right now.

2. I'm installing Windows XP on computers at work, and realizing that Microsoft is even more evil than I had ever imagined, and that the Ubuntu install is so easy you could shake a baby stupid, twirl it by it's foot counter-clockwise 327 times, blind fold it, and plop it down infront of your old dell, and it could have it installed in 20 minutes flat. Whereas with windows XP, it takes an actual tech support person to really do it right. It's no wonder no one wants to upgrade. I'm so used to popping the next ubuntu in like it were a PEZ, that I forgot that fully installing XP with all it's drivers was like Baking a Thanksgiving turkey. No on wants to do it, but everyone likes the result (because it's what they expect when they turn on the computer, NOT because it's all that great).

3. Someone's phone in my office is running low on batteries, and they just don't care. So now I am treated to that intermitent "bli-blop" beep that is only slightly less annoying than an alarm clock. Tell me, what is the purpose of this? Do you really need your phone to beep at you like a stinking smoke detector to let you know it's going to die? If you don't use it enough to know it's going to die by seeing the battery bar low when you open it, then you don't use it enough to really care if it just dies. I wish they would turn it on silent.

4. Someone in my office has the same ringtone as their ringer for their iPhone as I have as the alarmclock ring for my iPhone. So every time their phone rings, I panick and think I must be dreaming and it's time to wake up. Why didn't apple make separate alarm clock rings for your alarms? There are already so few ringtones (and no easy free way to make new ones) without also having to mix the alarms and ringers...

That's it! Four for the price of one. Hopefully once I finish with this book I'll have time to actually make games and blog about it, which is what this blog is supposed to be for...

Filed under: programming concepts, Software, Usability 4 Comments

23Nov/071

Toggle… on or off?

When making a toggle, it's hard to really know what picture to show. Especially a "lock" or "unlock" toggle.

The problem is, since a picture is worth 1000 words, you don't really know what the picture means. Without a word next to it, it has no context.

Take the simple "lock" toggle:

Link Item

Tell me dear reader, when you click the "lock" what will happen? Will it lock the link item, or unlock the link item? What does that little picture mean?

Here's where you have to make a decision. Is that picture a verb, or a noun? Does it mean "lock" or "locked"? What would you say if I told you that when you clicked it, it "locked" the item? That would mean that the picture was the verb "lock" and that the action taken caused the status of the item to be "locked".

How about now:

Link Item

Link Item

Which ones are locked, and which ones are unlocked?

What would you say if I told you that the link icon were a button that meant the verb "lock()" or "unlock()"? Why? What would you say if I told you that italicized text was the status indicator that meant the noun "locked"?

Did you agree with me? Was that what you immediately thought right away? Is it intuitive? Would you ever have thought of the little meaning that the item was unlocked, or did you immediately think it meant "to unlock" the item?

What if you saw this:

Link Item

I just took away your context. Now you have to decide if the picture is the status, or the action (the noun or the verb). What if I told you that it were the noun, but functioned in a verb way (That is, that meant the item were unlocked, but clicking it would lock the item). That's confusing right? So why does this make sense:

Which one is checked? You didn't even have to think about it. If someone came to you and said they were confused about this, you would assume that they had an IQ of about 23. Yet it's the exact same thing. No ambiguity. You know exactly what will happen when you click the checkbox: The item will be "checked" if the box is empty, or "unchecked" if it is not. Why? It's about context.

With the little lock sign, you had no idea what context it was in. Or the context was poorly defined. If you were taken to a list of links and told to "lock all the links you want" then this would make perfect sense:

Link Item

Obviously (to me) the ones with the lock() symbol next to them are locked, and the ones with the unlocked() symbol are not. It's still a little subjective, but this clarifies it even further:

Link Item
Link Item

Link Item
Link Item
Link Item
Link Item

(it would be even better if I could make the italics gray, but wordpress doesn't make that easy so I won't). You know you are looking at a list of locked and unlocked links, and the locked ones look locked, and the unlocked ones look unlocked. You could clarify with a "key", but then that means your users had to "think". However, in this case, you might still put the key in case you have dense users. But still, it's a little less ambiguous.

However, it would be even better if you just showed a little lock() at the top of a list of links with checkboxes next to them. Then there is no confusion. Checked==Locked (right?).

The problem comes in here:

Which ones are locked? Is the one in the middle unlocked? The only clue comes in the grayed out "sub-menu". In this case the designer had in mind that the "lock" and "unlock" icons would be verbs, not nouns. So clicking would set the status of the item to locked, instead of unlocking the item.

Again, it's about context, since you are "editing" sub-menus and not specifically "locking/unlocking" sub-menus, it becomes more ambiguous. You could add a "hover" effect so that when you hovered over it, it poped up a little title that said "locked... click to unlock" or something, but that still requires thought by the user. You can't do the checkbox thing because you aren't just "locking/unlocking".

All in all, you may argue that this is just poor design, and that you shouldn't use an ambiguous thing like a picture as a toggle.

Go one step further though. What if instead of this little lock symbol we used a red square or a green arrow. Clicking either one changed it to the other. Would you say seeing the green arrow meant it was "going" or that clicking the green arrow would "make it go" (and make it show a red square while it's going)?

This is why interface design is hard. This one little tiny "locking" feature can take hours of thought. Especially for a newb.

Let me know if you have any other resources that discuss this, I'd love to read them. I don't know the answers.

The method I ended up going with was showing an unlocked lock when the lock was locked, but graying everything out on the line that was locked (including the lock).

Filed under: programming concepts, prototyping, Software, Usability 1 Comment

7Nov/070

The Absolute Path in Vista

One of the major annoyances you may have noticed with Vista if you ever need to FTP anything, or do anything that requires you typing in the "path" to a file you would like, is that Vista hides the absolute path from you.

Well, that's not completely true. You could right click on the file, then select "properties" and then view the location on disk there... but that is insanity.

You should simply click on the little picture at the beginning of their bread-crumb trail drop down list:

After I figured this out I hated vista a little bit less. There is a lot usability-wise that I dislike about Vista, and this was number one on my list. But now I know how to view my good old true absolute path to the file. Hope this helps!

Have any other major Vista annoyances that you were "so relieved" to figure out the solution to? Please share them...

Filed under: Usability No Comments

5Nov/070

Desktop Sidebar Photo Slideshows

If you are creating a sidebar gadget that displays photos, you need to accommodate for both landscape and portrait and not force your user to choose one or the other. Google shockingly has done a horrible job of this.

I took some pictures of my beautiful wife over the weekend, and threw them onto my computer. I use Google desktop, so I thought I'd try out their photos gadget to see rotating pictures of her while I work. I ended up very frustrated.

Google's sidebar gadget allows you to choose between portrait,landscape or re-sizeable. If you choose portrait or landscape, it automatically formats it perfectly for one or the other. If you choose re-sizable it allows you to expand or contract it to fit either. But there is no setting to make the picture automatically fit the current size (by throwing black bars around the picture or something). This is absurd. It means that all of the landscape pictures I took get clipped off at the edges if I am on portrait mode, or all the portrait pictures get clipped off if I am on landscape mode.

Windows Vista's sidebar did add in the black bars, but unbelievably gave you no option to resize! This meant that if you were viewing a portrait picture you could pretty much forget actually getting to see anything in the picture beyond just a vague idea of what it is. Even the landscape pictures were poorly scaled down causing people to look rather funny/goblin-esque/gimpy-eyed at times.

Google's gadget allows you to add as many local folders, and even websites, to harvest pictures from as you want, Windows' only allowed you to choose one folder, but did at least allow you to specify that you would like to include all sub-folders as well.

All in all I was very disappointed about my options for a miniature photo slide-show on my desktop. If anyone knows of any better options, please let me know.

Tagged as: Bugs, Google, Google Desktop, Microsoft, Microsoft Desktop, Photo Slideshows, Photos, Slide-Shows No Comments