Hardware vendors often provide hardware “emulators” for developers to increase the speed by which we can create software for them. For example, an emulator for Pocket PC looks like this:

Because the emulator runs on my desktop, I don’t have to worry about buying one (costing me $) or configuring it (costing me my sanity). I can test my website from the emulator with very little turnaround time.

Only because the cost benefits are so significant would anyone struggle through setting this up.

STEP ONE – INSTALL

After downloading the emulator, let’s install it. Oops!

STEP TWO – TYPE

If typing long URLs made up of random characters killed zombies, I would be overjoyed at seeing this dialog. As it does not, each keystroke provided repeated insight into the psyche of the developer. Sadistic? Hurried? Junior? Who’s to say really. Rather than take the time to use a hyperlink control (1-5 minutes) he lazily pasted the URL into the error message.

What’s worse is that this dialog is completely unnecessary. The purpose of the installer is to walk me through the process. Why, when something is wrong, should a separate window tell me? Isn’t that the installer’s responsibility? The installer window is huge and would have easily fit this long error message.

And what am I saying “OK” to? Things are not OK. I should be clicking on a button called, “Download Virtual Machine Network Driver”.

Lastly, the wording in both the initial setup screen and this dialog show that someone without a terrific command of the English language was responsible for this creation. It’s a shame when companies assume things like the setup process and error messages don’t need to be scrubbed by tech writers.

STEP THREE – DOWNLOAD VM NET DRIVER

Finally, a quick download of the Virtual Machine Network Driver for Microsoft Device Emulator and I’m all set!

One click on “Download” and I’m good to go. OOPS!

Note: This download has now been retired. If you would like to get the Virtual Machine Network Driver, please download Virtual PC 2007 from: http://go.microsoft.com/fwlink/?linkid=46859

Another error message, another URL I can’t click on.

Any why do I have to read this? Why didn’t the initial download page automatically forward me to the Virtual PC 2007 download?

Or even better, why isn’t there a packaged version of Virtual PC 2007 for Pocket PC developers? That would have solved the entire problem from the beginning – 1 download with everything I need.

STEP FOUR – DOWNLOAD VIRTUAL PC 2007

I was able to download Virtual PC 2007 and install it without difficulty.

STEP FIVE – RUN THE EMULATOR

Now that I have everything setup… after grinding my teeth typing URLs and jumping through additional steps, the Pocket PC emulator starts up.

After installing and starting the emulator, I’m staring at a blank screen? After all of the time and effort put into the install, it’s a safe bet to assume that I might actually want to run it.

I can’t recall if I clicked on the power button to start the emulator or if I had to activate a menu option…

…but at least I didn’t have to type any more URLs.

Continue Reading

As you browse the web, various components are cached (reused) to speed up your experience. For example, why download the eBay logo anew on each ebay.com page? It rarely changes, so just keep reusing the same one.

What happens when we don’t want things cached? For example, your online bank statement. If that were cached and someone broke into your computer, they could see your bank statement web page sitting in the cache.

To prevent this behaviour, set the Cache-Control HTTP header. It’s a bit technical, but basically you tell someone’s browser not to store sensitive information in the cache.

What about sensitive attachments? For example, viewing your account statement as a PDF. In Internet Explorer, this is not possible.

“Wait!” you’re saying. “Rob, I just did this today. I went to TD Ameritrade and viewed my transaction history as a PDF and it worked!”

Alright, I wasn’t quite honest there. It is possible in Internet Explorer, but in order to do so you have to instruct the browser to store the PDF in your cache. If the security of your machine is compromised, an attacker doesn’t need your bank account numbers or customer numbers; they’re sitting there on documents in your cache.

According to Microsoft “This behaviour is by design.” After all, if you tell your browser not to store the attachment, how can you view it after downloading? This is their statement, in a nutshell.

Firefox doesn’t have this problem

How is this related to usability?

There are downstream effects to Microsoft’s decision. They could have implemented this (Firefox does), but chose not to. If you want to offer secure downloads to your clients, you can’t. A decision having nothing to do with anything more than a function call at Microsoft dictates how businesses are best able to serve their customers.

It’s a pretty simple case of the needs of the machine being given more importance than the needs of the user.

The above-linked article makes mention of the specific API call to open the file – IPersistFile::Load – as the reason why this impossible.  It just as easily could be ITransientFile::Load or IMemoryFile::Load, right?  Or how about Internet Explorer deletes the file from your cache when it’s done viewing?  Lots of possible solutions here but all we’re given is a technology-first justification of why it’s broken today.

Then again, if any of you are looking towards Microsoft as a paragon of secure computing, I have some bridges for sale…

Continue Reading

Much preferring the BBC, I rarely visit CNN. I’m not a fan of CNN’s reporting but I am a fan of their recent redesign. Here’s a little touch that I like:

The most imporatant bit is big and bold, standing apart from the others by at least two perceptual variables (size, color).

The subdued text gets me thinking, “Oh they have a Work/Life Balance column? Cool what else is there?” but unfortunately that isn’t a hyperlink – only the title of the article. What I do like about the subdued text: it gives you context for the article as well as saying, “yes we have some related articles but the article itself is more important – not the classification.”

An interesting touch is that it’s in ALL CAPS which normally reads as though you’re being screamed at.  Because of the small stature and decreased emphasis via color, that effect is minimized, if not wholly eliminated.

Good stuff. I’m glad to see a pro worked on that site.

Continue Reading

A colleague forwarded along an excellent essay explaining various development practices, the most interesting of which is the Stage-Gate process. Let’s look at a sample 12-month period, greatly simplified:

Waterfall: Take 12 months to throw 1 huge blob against the wall. If it sticks, great. If not, you’ve failed.

Agile: Every month, throw 1 small blob against the wall. By month 12, you’ll have a bigger, stickier blob than Waterfall. But it will still be one blob.

Stage-Gate: Every month throw many smaller blobs against the wall. Nurture the blobs that stick, recycle the ones that didn’t. By month 12 you’ll have a few sticky blobs; more than Agile.

What’s missing is that none of these practices prescribe any method to increase the likelihood that something sticks.

To quote Daniel Cook, the author of the afore-linked article, “It is better to release less than it is to release more of poor quality”.

To quote Shigeru Miyamoto, the father of modern video gaming, “A delayed game is eventually good, a bad game is bad forever.”

If your only change is to implement Agile or Stage-Gate (or both) then you’re bound to fall into that trap. Shoveling more “piles of software” at your customers isn’t likely to endear them to your organization.

I’m reminded of an email from Kim Goodwin to the “Cooper U Alumni” mailing list:

The root of the problem with agile methods is that people are trying to fix a non-engineering problem with a method that comes from within engineering. At Cooper, we tend to think that agile methods arose primarily as programmer self-defense, based on the assumption that the people coming up with the spec (usually marketing) aren’t really going to be able to figure things out without going through a lot of iterations. Of course, most of our clients who’ve tried agile methods have realized they still don’t solve the problem of what to build and how it should behave, because these aren’t engineering problems [emphasis mine - Rob].

While Agile and Stage-Gate reduce risk, how about getting to the root of the problem and supplying your customers with something they can’t live without?

Neither practice will help you do this, but they won’t hurt.

Continue Reading

eBay gets this partly right by telling me “You have no messages” versus leaving this area empty and me wondering what’s going on.

Let’s go a little further and remove the now-unnecessary sorting and browsing controls.

Small change, but it lets me ignore this section more quickly by reducing processing overhead for form controls that do nothing.

Continue Reading

When you have several pages of search results, what’s the rationale for including links to intermediate pages; anything other than “Next” and “Previous”?

Amazon gets it. Here I am browsing through recommendations.

Google doesn’t get it, and they even do it in a cutesy way by aligning page numbers with O characters.

“Hmm… I see here I have 18,000 results and at least 10 pages. How about skipping to page 7.”

Not likely, because there’s no fresh meat, no ‘scent’ for us to pick up on that would indicate page 7 will be any different than any other page, other than a number. What does the ’7′ mean anyway? Are the results 7x worse than page 1?

Just because we have to break the results into pages doesn’t mean we should offer the ability to jump to any one page. If we did want to offer that ability, the intermediate links are better represented by their content, assuming some sort of reasonable sort.

Rather than considering the content as arbitrary pages, consider the reason for looking at this information in the first place. For example, if you’re shopping are you price sensitive?

(these are mockups by the way, they don’t really exist on Amazon)

How about browsing new DVD releases?

Whatever someone is doing, they’re doing it for a reason. Don’t throw away an opportunity to improve navigability by forgetting to contextualizing your links.

Continue Reading

Sometimes our good intentions get the best of us. In design it most commonly occurs as instructional fluff text that fails to account for our ability to recognize affordances.

Not Great: “Click here to visit our investor site.”
Better: Investor Information
Why: Links stand out by their color and decoration; we know what links are, how to interact with them and what it means to click on one.

Not Great: “Enter your email address here: [..............................................]”
Better: Email Address: [..............................................]
Why: People know where to enter information; what text fields are. Gestalt grouping principles (i.e. competent form layout) should indicate which labels go with which entry fields and text fields themselves are like magnets for our attention.

Not Great: “Select one of the following options: (followed by a list of radio buttons)”
Better: (say what the options and/or the reason for choosing them)
Why: Not labeling the radio buttons force us to infer what we’re setting based off of the available choices.  The components may as well not be labeled at all.  Better to use the text to inform us than tell us how to interact with standard components.

Continue Reading

Of the three auto updaters I see with some regularity, here’s my order of preference: Apple, Adobe, Microsoft with the latter two coming in distant second and thirds. I know that Adobe puts a lot of effort into usability as I met a handful of them at a training class. It’s a shame someone tasked programmers with the design for the update process. There’s no other explanation. Actually it could have been done by an intern, in which case you can’t fault the person too much.

…and when you press “Cancel…”:

Here’s what I like:

• Automatically begins downloading in the background.
• Good progress indicator telling you how much time is remaining.

Let’s examine a few of the issues:

• Unfortunately the worst issue is one you can’t see here. I’ve canceled the “Stock Photos 1.5″ update countless times. I don’t use it, I’ve never used it, and my only experience with it is it’s never-ending attempt to update. When it comes time to look for stock photos, what are the chances I’ll get over the negative feelings about “Adobe Stock Photos” and go there first?
• “Pause” and “Download only…” Options: Both are unnecessary. If, like the Apple Updater, it silently downloaded in the background when my connection was idle, you wouldn’t need “Pause” and “Download” options. Just do it and let me know when you’re done.
• “Minimize to Tray”: Adobe’s products (save perhaps for Elements and Album) aren’t generally used by computing novices and I would argue that even novices have mastered the min-max-close window controls. Adding a button for this… blows my mind.  Worse yet, what’s a “Tray”?  In windows, your little status icons at the bottom right side of the screen reside in something called the “System Tray”, another red flag that this was designed by a programmer.
• Inconsistent Capitalization: Buttons are title case as are the two labels above the progress indicator, whereas the two labels below are sentence case.
• Label Alignment: None of the text values are aligned, increasing processing cost.
• Too Many Cancel Options: These updates are never irrevocaby lost. I can call up the Adobe Updater at will from any of my Adobe applications. When I can “Cancel”, just cancel! Because the “…” is added to “Cancel” (by convention to indicate a prompt afterwards), “Cancel” appears off center as the ellipses have less visual weight than the lettering.
• Cancel Dialog: We know this is wholly unnecessary so I won’t belabor its many issues. The first is that if I hit “Cancel” my most likely course of action is to “Resume”? This fear of accidental clicking screams “designed by a programmer”. Give me the little “X” in the top right if I made a mistake to get here; I’ll hit ESC or close the window, just like every other dialog in the world. Second, the “Select an option” fluff text is unnecessary as there’s one thing I can do in this dialog. Third, there’s too much space; no need for such a wide dialog.

Less is more!

Continue Reading

Google Launches ‘The Google’ For Older Adults

Continue Reading

Having been on the development side of things for almost 10 years now, there’s a conversation I’ve heard several times and it goes like this:

“We have a request for feature X”

“Sounds reasonable. Standard X?”

“Yep, should do”

(where X is a shopping cart, search form, login page, etc.)

Alternatively, it’s assumed that because these components are so commonplace that we engineers can pick and choose best practices and build something respectable with little to no guidance.

Seeing software as context-free components leaves so much on the table and it absolutely destroys usability. After all, nearly every interaction is an opportunity for competitive advantage (in the reasonable assumption that your competitors have not done design work) so why throw away a potential differentiator?

Unfortunately this is often the driving force behind many (most?) engineering efforts. In the implementation world it’s terrific and makes business sense, but when it influences the interactions (which it often does) it’s disastrous.

Given the ubiquity of the searching and browsing interfaces for online merchants, let’s take the Altrec product browser as an example, for no particular reason other than I happened to be shopping there today.

First, the positives:

• Generally appealing, especially on the individual product pages. I happen to be a fan of the colour scheme; one shared by Adobe and CNN. I like using the site because of the way it looks and its responsiveness (and its prices :-)
• Obvious links to more information for products with no guessing “Where do I go from here?”
• Ability to choose between grid and list view. Helpful when I care less about extended information and can more easily decide based on appearance. I used this twice today.
• Terrific summaries so I don’t have to dive in to each product for more information. From this page I can see right away that the Zephyr and the Nomad are my likely choices.

What could use improvement from left-to-right, top-to-bottom:

• The category name “Ropes” is repeated. What does “Ropes: Ropes” mean? I’m guessing this is a by-product of their information architecture approach. It’s not going to stop me in my tracks but I did say, “huh?”
• Page browser is shown when there is only one page.
• Inadequate spacing among browse controls. What is the reason for being so miserly with horizontal spacing? Let these components ‘breathe’ a bit, reducing spatial tension. Let’s add 5-7 pixels of padding at least between each, with 13-15 pixels between logical groups.
• Sorting is context-free. I’m browsing ropes, not a group of unrelated widgets. I would like to see “diameter”, “length” and “stretch” for starters.
• “Compare: CHECKED ITEMS” placement: Should be left-aligned over the comparison checkboxes. It’s currently too far away from its playmates and there are no visual cues to relating them apart from having to read and process “Compare: CHECKED ITEMS”.
• The “Compare” label for the “CHECKED ITEMS” button seems to have been done for consistency’s sake (i.e. all components are labeled). This should be a button with no label. I suspect this was attempted but with such crowding it would have suffered from common fate, appearing to be related to the “View” option. Make it a button, move it to the left.
• “Our Price” – whose price would I think Altrec is showing me? Its competitor’s? Remove “Our”.
• “BUY NOW / INFO” is misleading, unnecessary and too much of a visual draw; screaming at you with its fiery red and CAPITALIZATION while you’re trying to read product summaries. It should be removed entirely. You can click on the image and on the product name so no worries on getting product info. It doesn’t add the product to your cart so “BUY NOW” is inaccurate.
• EXCESSIVE CAPITALIZATION – please, stop screaming at me when I’m trying to find something.

“Standard” components need love too! Here’s a quick mockup:

Changes:

• More breathing room for each individual listing. Same amount of information with less visual crowding through increased spacing and colour combinations.
• Less attention drawn to the brand, more attention drawn to the product. Brand is now placed to the right of the product so that you can more easily scan product names without brands getting in the way.
• More callout of the price, mitigating the need for a label such as “Our Price” or “Price”.
• “Compare Selected” functionality now in close proximity to its playmates (the checkboxes). Relatedness further increased by the use of a consistent background.

C’est tout! There’s still room for improvement (e.g. including prominent product characteristics like diameter and length in the listing), but it’s a Saturday afternoon :-)

Continue Reading