DesignAday

Incompetence

Sat, 07 Nov 2009 01:42:07 -0500

Dustin Curtis has a tale to tell about American Airlines, the design of their website, and the way they run their business. It isn’t pretty. This post is in response, so I encourage you to read it first.

Observation 1: Give the benefit of the doubt.
Dustin’s initial post was rather harsh, declaring that AA should fire their entire design team and hire outside contractors to redesign the website. He recommended this with no knowledge of the organization or the people that work there. He didn’t consider the constraints in which the design team works or the size of the company. It would be like me writing a post declaring that Microsoft should fire all their UI designers and hire somebody else to redesign Windows from scratch. It’s a ridiculous proposition, and disrespectful. When writing a critique, you should assume that you don’t have all of the facts and be careful of making hard-line declamations. Realize that there may be good reasons for things to be the way they are that you can’t discern, and don’t place blame unless you have proof. Consider it a low-foot diet.

Observation 2: Know your limits.
Mr. X obviously suspected that his letter may not be well-received, as he asked that Dustin not publish his name. I guess he thought that would prevent anyone from discovering his identity. Just as obviously, he was wrong. If you feel like you are doing something you could get in trouble for, don’t do it, unless you are willing to face the consequences. For the most part, I don’t post about the company I work for or the specifics of the work that I do there. If I wanted to respond to a post like Dustin’s, I would approach my manager about it first. The company is bigger than I am, and I wouldn’t take matters involving the company into my own hands.

Observation 3: Respect your employees.
Even if Mr. X did overstep his bounds a little, AA’s reaction was uncalled for. He was obviously defending the company in a friendly and intelligent manner. If they didn’t want him doing this, they should have reprimanded him. I doubt Mr. X would have done it again. Firing him within an hour after his letter was posted reeks of a knee-jerk reaction that wasn’t given proper consideration. Personally, I think they should have thanked him for trying to defuse a situation that would negatively impact the company’s image, asked him to please consult with them prior to making public responses in the future, and then asked that he head up a new effort to find a way to improve the website design and approval process.

Tales from the Field: Collaboration

Thu, 05 Nov 2009 23:59:00 -0500

In the past, collaboration was limited to collocated activities and voice communication via telephone or radio. The introduction of mobile computers has opened up numerous possibilities for remote collaboration.

When multiple mobile devices are connected via a wireless network supported by a server, participating technicians can share information and maintain awareness of overall status. I’ve designed software that helps Explosive Ordnance Disposal (EOD) units track step-by-step procedure progress, as well as equipment status, and allows warfighters utilizing GPS to pinpoint each team member on a map of the area. Furthermore, team members are able to record locations of explosive devices and other hazards, information that is immediately shared with the rest of the team. The system included a “media board” where recorded audio and digital photographs could also be shared with all participants within seconds.

In the Details: Canister Dump

Wed, 04 Nov 2009 08:07:24 -0500

I’ve had a Fantom vacuum for over 10 years. It was a well-designed product, and we definitely got our money’s worth out of it. A circuit board went bad and the beater stopped turning. Fantom went out of business several years ago, so I decided repairing it wouldn’t be a good option. My in-laws decided they would give us a new vacuum as an early Christmas gift, so my wife and her mother went shopping on Monday. They came home with a Dyson.

When I got home from work, Susie excitedly showed me how to empty the canister. The Fantom had a canister, which was a huge improvement over dealing with bags, but the Dyson takes it a step further. Where you had to rotate the Fantom’s canister and pull the lid off, the Dyson has a lever that opens the bottom of the canister. You just hold it over the trash can, pull the lever, shake it a little, and then close it again.

Once again, thoughtful design resulted in small details leading to the sale of a more expensive product. There are other features that set this model apart for her, but I’ll leave those for future posts.

Designer’s Toolbelt: Parallels

Tue, 03 Nov 2009 23:59:00 -0500

Most of the projects that I work on are for the military or industry. As such, all of the software that I design runs on Windows. Even the web-based applications are built for IE without cross-browser support being a priority. In the past, I’ve had to remote into old, slow Windows machines or VMs to run IE or native applications. Now that I have a Mac with an Intel processor, I’m able to run Windows on it. I installed it yesterday using Parallels.

Parallels made the installation a piece of cake. All I had to do was insert the install CD, enter a license number, and away it went. I turned my attention to other work and in a matter of minutes, I heard the Windows startup sound.

Parallels has a few different view modes. You can run Windows in a window, where the window contains the Windows desktop, and all applications are opened in windows within the Windows window (catch that?). You can run it full screen so that you don’t see your Mac’s desktop at all. The best way to use it is in “Coherence” mode. This hides the Windows desktop altogether and presents each window as a window within your Mac OS X environment. Pressing the minimize button results in the window moving to the dock, genie effect and all. Windows can be moved between spaces, and they are sorted by Exposé. Clicking the Parallels icon in the dock results in the display of the Start Menu. Notifications are displayed in the standard Windows speech bubble in the bottom-right corner of the screen. The clipboard is shared between operating systems, and you can drag and drop between Windows and Mac applications. Network connections were made automatically without needing any of my input.

I showed it to one of the developers I work with, and he was surprised at how fast it runs. I’m impressed by the seamlessness with which they have integrated the Windows UI with the Mac OS. If you have to run Windows for testing, this is the way to do it.

I must admit, though, I do feel a little dirty having done it.

Interaction 10 Program

Mon, 02 Nov 2009 00:27:32 -0500

The program for Interaction 10 has been posted, and it looks like it will be another outstanding conference. The keynote speakers will be Paola Antonelli, Dan Hill, Jon Kolko, Ezio Manzini, Nathan Shedroff, and a true legend in the field, Bill Moggridge. Additional invited speakers are Timo Arnall, Cindy Chastain, Liz Danzico, Shelley Evenson, Dave Gray, Tom Igoe, Peter Morville, and Denise Wilton. Looking at this list and the 28 speakers selected from 250 session submissions, it appears that Service Design and sustainability with both be significant themes running through the conference.

Registration is now open, and early bird pricing is in effect through November. The past two conferences have sold out, and I see no reason for this one to not follow suit. I’m hoping to attend again, but that’s likely dependent on at least partial support from my company. Here’s hoping.

Nook

Thu, 29 Oct 2009 20:45:00 -0400

The ebook reader product space just got interesting with last week’s release of the Nook form Barnes & Noble. It is very close to the Kindle in size with the same E Ink display. A majority of the features found on the Kindle are mirrored on the Nook, including wireless connectivity for book purchases and subscription downloads. Where they differ significantly is in their user interfaces.

While they both place buttons for page turning on both sides of the screen, this is as far as the similarity goes. The bottom third of the Kindle’s face is given over to a physical keyboard—row upon row of tiny buttons. The Nook, on the other hand, sports a 3.5 inch color touchscreen. This screen is used for navigation, providing access to the various functions of the device, and browsing of your library in a coverflow-esque fashion (although not as fluid). It also provides the means by which you can highlight content, bookmark pages, and make annotations. This is what I was most curious about. How do they provide a touch UI in that small space that affords these complex interactions without direct manipulation, and presumably text entry. Unfortunately, they don’t demonstrate any of this in the screenshots or videos on the site. It’s almost as if they purposefully didn’t show it, perhaps to hide a kludgey interaction.

From what I’ve seen, the Nook seems more elegant than the Kindle, but I’ve never had the opportunity to try either one. And this is one instance in which having brick and mortar may provide an advantage. According to the website, you can try the Nook in the physical stores. I may have to pop in the next time I see a Barnes & Noble in my vicinity.

Toner Moaner Part 2

Wed, 28 Oct 2009 01:34:00 -0400

So, I’ve been using my printer for a couple months since it started telling me to replace all three color toner cartridges. I wrote about that back in September. Last night, I was trying to print out two pages of black text, and the printer refused to print, displaying an error message stating that all three cartridges were “end of life”. A quick search turned up a number of discussion forums with the instructions on how to circumvent this premature money grab on the part of Brother.

There are little windows on the sides of the cartridges through which you can see the toner. Apparently, the printer has some kind of optical mechanism for testing the amount of toner left. Of course, once the toner gets below a certain level, it no longer detects it, even though there is still some in there. According to the instructions, placing electrical tape over these windows causes the printer to think there is still toner in the cartridge. That doesn’t make much sense to me, as the chances of all three cartridges reporting empty at exactly the same time are highly unlikely.

I didn’t test that procedure, as there were also instructions on how to access a special menu via the console that lets you reset the life of each toner cartridge. This worked just fine, and I was finally able to print my pages. We’ll see how much farther I get before printed pages actually start showing signs of low toner.

Google’s App Gains Cachet

Tue, 27 Oct 2009 08:00:00 -0400

I’ve had Google’s app on my iPhone since it was released, but I have rarely used it. I thought of it more as a gimmick than a useful feature. In case you aren’t familiar with it, I’ll provide a brief explanation. After launching the app, you can raise the phone to your ear and speak a word or phrase that you wish to search for. The application listens to your speech, transcribes it, performs the search, and returns the results. I suppose it could be handy if you are on the move and need to look something up, but don’t want to stop to type. I think I have used it in such a fashion once or twice.

I was recently writing something in which I wanted to use the word “cachet,” but I couldn’t remember how it was spelled. All I could think of was “cache,” but as that is a different word with its own meaning, it kept me from using the auto-complete feature in my dictionary widget to find “cachet.” I knew how to pronounce the word, and Google’s app came to mind. I turned on my phone, spoke the word, and sure enough, Google promptly returned a list of results containing the word “cachet.”

Update: Something happened to the second half of this post when I saved it. I just discovered that it was incomplete and have re-written it. I’m sorry for the incomplete post.

In the Details: Mail Bounce

Mon, 26 Oct 2009 01:00:00 -0400

I’ve had an annoyance with the bouncing mail icon in the dock for quite some time. I like the notification mechanism, but I don’t like the fact that it bounces even when the Mail application has focus. In the past, I would ignore it while reading my mail. Then, I would minimize Mail, or switch to a different space, and remember, too late, that the icon was still bouncing. Clicking on the icon would stop the bouncing but bring Mail back up at the same time.

Snow Leopard hasn’t entirely fixed this, but it has mitigated the annoyance. I noticed that when an icon is bouncing in the dock, simply moving the cursor over it will stop the bouncing. It takes that as a sign that you have seen and acknowledged the notification.

Real-World Research with Gist Design

Thu, 22 Oct 2009 08:01:50 -0400

The Pittsburgh chapter of the IxDA gathered last night in the historic Terminal Buildings, home of Gist Design. Gist led us through an exercise in which we role-played through a usability research scenario. The attendees were assigned to either the client, the research team, or the pool of respondents. Each person on the client side was provided with a card explaining their role in the company and their motivations, which they had to express in the initial meeting with the research team. The members of the research team had to probe the client for the information they would need to design their study. At the end of this first phase of the game, two judges rated us on our performance, bestowing proclamations of “nice”, “niiice”, or “niiiiiiiiiice”.

The whole exercise centered around a label maker, and the second phase saw the research team fiddling with the device and planning out their approach—what they wanted to learn and how they would go about learning it. During this phase, they were interrupted by a phone call from the client’s head of marketing, asking them to gather additional information about their target market. They were again rated on their performance before carrying out the study. This was the point at which the respondents joined in, acting as study subjects, relating their label-making needs and trying to figure out how to use the label maker. The team was again rated on their performance during the study. Finally, the research team had to organize their findings and present to the client.

We all had a great time mimicking the customers and users we have dealt with so many times in the past, and the exercise led to much discussion about approaches to research, client relationships, and the value of user research in the design process.

Robustness

Wed, 21 Oct 2009 00:50:00 -0400

Software is said to be robust when it performs well under unexpected conditions which stress the designer’s assumptions, as well as under normal conditions.

So says Eric Raymond in his book The Art of Unix Programming. A user interface could be considered robust when it predicts the ways in which various people will attempt to carry out their tasks.

For example, if I wanted to move this sentence to the beginning of my post, there are several methods I may attempt to do so. I would first have to select the sentence. I could accomplish this by inserting my cursor at one end of the sentence and then shift-clicking at the other end. This works in both directions. I could also click at one end of the sentence and drag to the other end. Once selected, I could choose “Cut” from the “Edit” menu, insert my cursor at the beginning of the post, and then select “Paste”. Or, I could press Command (Control on Windows) X on the keyboard and then Command V. Or I could right-click the selection and use the same commands in the context menu. Or I could click and hold on the selection for a brief second and then drag the text and drop it where I want it.

The result of a robust user interface is that users will consider it to be intuitive. They will say that it is easy to understand, because it did what they were expecting it to do.

In the Details: The Long Scroll

Tue, 20 Oct 2009 07:49:26 -0400

When dragging within a window, standard behavior dictates that when the cursor contacts the edge of the window, the page will scroll. This allows objects to be dragged to a location that isn’t currently in view, or a selection to be made that extends past the window’s edge. There are a couple of different methods for accelerating that scrolling. For example, when creating a selection with the marquee tool in Photoshop, the farther the cursor moves outside the boundaries of the window, the faster it will scroll in that direction. On the other hand, when dragging folders in OS windows, there is a narrow area inside the border of the window within which dragging will cause scrolling. The closer to the edge the object is dragged, the faster the scrolling will be.

The problem with the selection dragging is that a window will often be right against the edge of the desktop. If such is the case, it isn’t possible to move the cursor outside of the window, so the window scrolls very slowly. This can be painful if you are trying to select several paragraphs of text, or if you are at a high zoom level.

Tales from the Field: Technical Information Lifecycle

Mon, 19 Oct 2009 08:14:55 -0400

When using a printed manual, there is no easy way to report errors found in the field back to the authors, and updates are costly and infrequent. Whether through workflow integration, or a simpler, message-based approach, a well-designed system makes it quick and easy for a technician to enter a discrepancy report, automatically including the current context. When properly integrated with authoring tools and an update mechanism, the system supports an entire technical information lifecycle that keeps a technician’s resources up-to-date.

A major automobile manufacturer, for example, must ship a box of CDs to every dealership each month to update their technical manuals. That means that somebody at each dealership must sit down and feed those CDs into a computer one at a time to update the software. Thousands of man hours could be saved by an incremental, automated update system, not to mention the production and shipping costs.

Foiled Again!

Fri, 16 Oct 2009 00:08:25 -0400

Please excuse me for wrapping up the week with another post related to my new MacBook Pro. It probably seems rather quaint to all of you that have been using laptops, but I am rubbing my wrists, freed from the shackles of a desktop, so it’s on my mind.

I’m on a short business trip and will be participating in a meeting with a customer. I have a few slides to present and can finally do it from my own laptop, rather than handing somebody else a thumb drive. I stopped at Tyson’s Corner on my way here to visit, as I understand it, the very first Apple Store and pick up a mini display port to VGA adapter, so I can plug into the projector. I happily created my slides in Keynote, instead of that other program, and I purchased the Keynote Remote iPhone app. It’s a nifty little tool that lets me control the show over a WiFi network. You just swipe to change slides backwards or forwards. It also displays your notes, if you need them.

I was quite satisfied with myself. Then I realized that my meeting is on a military base. I’m not allowed to have my phone in the building.

I guess I’ll just have to do it the old-fashioned way.

In the Details: Lefty

Thu, 15 Oct 2009 01:00:00 -0400

I was working on my new MacBook Pro today and connected my mouse—there’s no way I’m using a trackpad to do real work. All of the ports on this model are on the left side (as you face it). I’m right-handed, so my mouse cord had to wrap all the way around the back of the laptop. The cords on Apple’s mice are designed to be the perfect length to plug into a port on the back of the keyboard and no longer. It made it around, but I was constantly pulling on it, like a dog on a short leash.

So, is the USB port placement sub-optimal, the mouse cord length stingy, or should I take the blame for using a corded mouse when the best solution is obviously to buy a wireless mouse and throw money away on batteries?

Lap Happy

Wed, 14 Oct 2009 00:58:00 -0400

For 18 years, I’ve been using Mac desktop computers. I started on an LCII, then got a PowerMac 6100/60. After that was an 8500, followed by a G4, a G5, and finally the Mac Pro I’m writing this on. The Macs I’ve used at work have followed a similar path, although there was a Cube in there. My G5 at work was getting long in the tooth, and it finally came my turn to upgrade. This time, I opted for a MacBook Pro.

There are a number of good reasons behind this decision, and they can mostly be covered by explaining why I have never been interested in a laptop before. Power was a significant factor in the past. Processor speed, memory, and drive space were all concerns that are no longer an issue. The biggest reason has been screen real estate. I’ve been using two displays at home since I put a second video card in the 8500. I started using two displays at work about 7 years ago. I just can’t get along with a single display (although Spaces helps). Of course, the Mac laptops drive a second display now. In fact, the 15.4” widescreen display on my new MacBook is higher resolution than the cheap, 17” Dell LCDs I have at my office. Finally, I’ve been attending more meetings than I used to, and it’s inconvenient to have to take everything I think I’ll need on a thumb drive and then ask to use somebody else’s PC laptop to show my slides. It’s even a little embarrassing at times to be the only one at the conference table that pulls out a legal pad to take notes. I’ve had customers rib me about it on multiple occasions.

So now I have a laptop, and I’m realizing all of the accessories I need to get for it. I just ordered a bag, a mini-display port to VGA adapter, and the Keynote iPhone app. Let me know what else I need.

Here’s to going mobile!

10/GUI

Tue, 13 Oct 2009 00:13:00 -0400

Clayton Miller has posted an intriguing concept demonstration for multi-touch interaction as applied to traditional desktop systems. Rather than turning our monitors into touch screens, he suggests adding a large trackpad capable of sensing all ten fingers. This gets around the major problems that he points out as the primary roadblocks to touch interactions at our desks: fatigue from non-ergonomic techniques and occlusion by our own hands.

Clayton’s video artfully explains the problems he is trying to solve, the rationale for his approach, and both the hardware and software that form the solution. As such, it is a much more effective presentation than those recently released by Microsoft.

I can certainly see this concept in use. The track pad on Apple’s Macbooks is moving in that direction. However, I’m of the belief that one of the greatest benefits of a touch interface is direct manipulation. Clayton’s solution is still just as indirect as the mouse—just with nine more cursors. We can learn to type and play the piano without seeing what our fingers are touching due to the static placement of the keys and the tactile feedback they give us. Clayton’s pad would offer neither of these, and I imagine it would take a lot of effort to become proficient in its use.

Finally, I have to wonder about its actual utility. He presents a good case for its usefulness in managing windows, but that’s not what I use a computer for. I don’t sit down at my Mac thinking, “I’m going to move some windows around.” I use my computer to pay bills, prepare to teach my class, specify UI designs, and write blog posts. How will 10/GUI help me do those things more efficiently? I’m not saying it can’t, but I’d like to see it applied to more important tasks. Managing desktop clutter is just a place to start.

Tales from the Field: Durability

Mon, 12 Oct 2009 01:00:00 -0400

An average day for a mobile field worker will find him in any number of conditions, including extreme temperature changes, indoor and outdoor locations, low lighting, loud noise, tight quarters, roofs, and crawlspaces. They must climb ladders, negotiate catwalks, and navigate potentially hazardous areas tracing electrical lines and gathering data. They get their hands dirty with grease and particulate matter. The mobile computer that accompanies technicians must be able to withstand these conditions, as well as being bumped and dropped, and survive dirty fingers.

There are also locations in which electronic devices can cause explosions. Certain areas within oil rigs and refineries are examples of such, where flammable gasses and vapors are a concern. Equipment intended for use in potentially explosive atmospheres must meet intrinsic safety standards.

Furthermore, the field workers must dress for the environment. They may be wearing eye protection, ear protection, or heavy gloves. They may be carrying a lot of bulky, heavy equipment around with them. These are all important factors that play into the overall context that must be taken into account when designing a solution. They can have significant impact on the choice of hardware and the design of the software.

JavaScript Dialogs Must Die

Fri, 09 Oct 2009 07:53:00 -0400

There are three types of JavaScript dialogs: prompts, alerts, and confirms. A prompt displays a field to collect information from the user, while alerts and confirms can only display messages. An alert box has a single button labeled “OK”, while a confirm provides both “OK” and “Cancel”.

Developers tend to be rather fond of these boxes because they are so easy to implement. Unfortunately, they are not optimal methods by which to communicate with the user. Let’s take a simple confirmation dialog for example. We’ll say that the user has just pressed a button that will delete something. Assuming there is no undo feature, best practice is to display a modal confirmation dialog that asks the user if they are sure they want to delete it. Because the button labels are not customizable, the message must be written as a question that can be answered with “OK” and “Cancel”. So, you end up with a message like “You’re about to delete something. Are you sure?”

I typically specify custom alert dialogs that are implemented as divs. This gives me the freedom to state the message as I see fit. More importantly, it allows me to customize the button labels to be more specific to the action the user is completing. Let’s face it, we’re often deluged with dialogs, and we tend to quickly dismiss them without reading them word for word. I’m much less likely to make a mistake if the button is labeled “Delete”, rather than “OK”.

Finally, the dialogs can become much more useful than simply confirming an action. For example, if the item being deleted is a node in a hierarchy containing other items, I could specify a dialog that provides specific options.

The node Foo has the following children:

Fee
Fi
Fo
Fum

(Delete Node and Children) (Delete Node Only) (Cancel)

The ease of implementing a JavaScript dialog is no excuse for poor usability. The flexibility to provide tailored messages, button labels specific to the actions they perform, and additional actions makes the extra effort worth it.

Page Mess-up

Thu, 08 Oct 2009 01:14:28 -0400

The very first project I was assigned in Visual Interface Design during my first semester of graduate school at CMU in 1996 was to redesign the QuarkXpress print dialogs. There were several different dialogs that were accessed individually from the File menu. My solution combined them all in a single dialog where options were grouped based on whether they applied to the page, the printer, or were specific to offset printing. You could choose Print from the File menu and have access to all of the options, rather than having to change a few settings in one dialog, close it, and open another to specify something else.

It still aggravates me today every time I use an application that doesn’t allow me to change the page orientation in the Print dialog. Sometimes a button will be provided that will open the Page Setup dialog where you can do this, but sometimes I still have to cancel out of the Print dialog and select Page Setup in the File menu. Take the Print dialog from the most recent version of Adobe Reader, for example.

It does have an option to “Auto-Rotate and Center”, which orientates the page based on the orientation of the document you are printing—and this is typically what I want to do—but it doesn’t allow me to specify the page orientation otherwise. To do that, it’s another trip to the File menu.

You would think that in 13 years this little problem could be solved.