DesignAday

The Extra Step

Beware of the extra step. If it is part of a procedure that the user carries out within a software application, chances are that it is an action that will be repeated many times over.

When creating diagrams, a common action is to center a connecting line with the object it connects to. In Freehand, this could be accomplished in three clicks: 1 each to select the objects to be aligned, and one to press the align button. The default behavior in Freehand dictates that if one object is narrower than the other and is within the bounds of the wider object, it will center to the current position of the wider object without the wider object moving. 99.9% of the time, this is the desired behavior.

In Illustrator, this is not the default behavior. Instead, both objects will move an equal amount of distance toward each other to center on the space between their previous positions. To achieve the aforementioned behavior, you must select an option to center on a key selected object from a menu. Then, if the wider object isn’t already selected as the “key”, you must click on the object that you want to be the key. This takes twice as many clicks to accomplish in Illustrator, and I’ll likely do it over a hundred times while creating a diagram.

Design Pattern: Soft Keyboards

Efficient data entry is arguably the most difficult goal to achieve in a mobile UI. On-screen keyboards, while not as efficient as touch typing on a physical keyboard, can be useful for short amounts of text, such as filling out a form. Tablets have enough screen real estate to display full keyboards, and smaller devices can display specialized data entry pop-ups. Typically, the operating system installed on the device will provide a keyboard, which may be good enough in some instances, but custom designed keyboards that address the needs of specific user groups have the potential to be much more efficient.

• In a typical data entry form, there will be fields intended for specific types of data: dates, numeric values, time of day, locations, or “free” text entry. Rather than using a single, full-size keyboard to enter all of these, an efficient UI will provide data-specific pop-ups: a calendar pop-up for date selection, a pop-up specifically for entering the time of day, a numeric keypad, etc. These pop-ups can be smaller, obscuring less of the screen, and can make data entry quicker while also reducing errors.
• When data entry pop-ups open, they should try not to obscure the field in which the data is to be entered.
• Data entry pop-ups should be movable, so that if they do happen to obscure something that the user needs to see, they can be moved to another part of the screen.
• As data is entered, it should be displayed in the pop-up, as well as in the field it is being entered into.
• Buttons should be large enough to be very easily targeted by a stylus or finger. However, this should be balanced by the need to keep the pop-ups to as small a footprint as possible.
• Pop-up keyboards must include access to special characters needed by the users.
• Pop-ups should have a “clear” button. Keyboards should have a “backspace” button as well.

A litl More

After my brief post last week about the litl, I was contacted by James Gardner, litl’s VP of marketing. He pointed me to a post on Pentagram’s site and to a video on YouTube. As I was hoping, they painted a picture of very thoughtful design and filled in a lot more detail. In fact, as it turns out, they had an all-star cast working on this thing. Lisa Strausfeld lead Pentagram’s team in the design of the GUI, and Pentagram was also responsible for the visual identity, designed by Abbott Miller. The logo, business cards, and packaging are all exquisite.

The UI has the polish one would expect from Apple. Animated transitions bring a natural flow to state changes. The dial that is used for serial navigation in “easel” mode is repeated on the remote. They designed several channels that deliver specific information from the internet, like the weather, as well as a number of “widgets” like a clock or a feed reader. Visual treatments clearly distinguish between widgets, channels, and standard webpages. Arrangement of these items is automated much like the rearranging of photographs in iPhoto. It hooks up to your hi-def television with an HDMI cable to play movies or show photos. And, if you have more than one in the house, they can be set up to share things with each other.

Also working on the project were Cooper, Fort Franklin, and Fuseproject, although I don’t know what their contributions were. Fuseproject was also behind the OLPC XO laptop, so I’m betting they worked on the industrial design.

The video is pretty awful—lot’s of “um-uh” and fumbling around, but the product shows off well. They should really put together a professional video demonstration of the UI. I think they have a lot to be proud of. This could be a very successful product, although I’m curious to see if they’ve hit a low-enough price point. At $699 or $1,398 for a two-pack, it seems a bit much for something without local storage.

10/GUI

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.

Page Mess-up

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.

Courier

Perhaps I’m just jaded, but I can’t get excited over the two videos Gizmodo has put up demonstrating Microsoft’s Courier concept. First of all, Gizmodo is treating it as if it is a unique, unforeseen vision for a tablet computer. What exactly makes it so innovative? Is it the folding, two-page form factor? I don’t think so. Last year saw Negroponte’s announcement of the second-generation OLPC XO: the XO-2.

And there was the Canovo that made the rounds in 2007.

Then, of course, we’ve seen the dual screen eReaders by ASUS (2009) and iRiver (2007).

Well, then, is it the stylus? Surely not—we’ve had tablets and PDAs for years that have those. The iPhone was revolutionary for doing away with the stylus. Okay, could it be the multi-touch? Obviously not, as we’ve seen that in the iPhone, Surface, and any number of other demonstrations. And the combination of the two is already available in tablets such as Panasonic’s Toughbooks.

I’ve ruled out the form factor and input methods, so it isn’t the device itself or the technology behind it. Is the user interface especially innovative? There are some interesting ideas in it. Using the spine as a place to tuck things that you want to move from one page to another is a clever implementation of cut and paste, but beyond that, I don’t see any interaction patterns that I haven’t seen before. Quite frankly, I don’t find the scenarios to be very compelling. The UI has that “visionary concept” quality to it that suggests it hasn’t been fleshed out much beyond the script. The handwriting recognition is flawless, the screens show only the controls that provide access to the features showcased, and complex actions, such as selecting and copying a graphic and two columns of a 3-column table, are accomplished with a single touch of a finger.

Yes, it’s an interesting concept, and yes, there is value in creating such visionary explorations. However, I’ve seen far too many of these that don’t result in anything other than inspiration (not to say there is anything wrong with that), and Microsoft in particular has a horrible track record of delivering innovative products. Please pardon me for some uncharacteristic pessimism. I’m not going to take a deep breath, let alone hold it.

In the Details: ADDress

Occasionally, people get new email addresses. They may have changed jobs or switched ISPs. Whatever the reason, I will receive an email from them stating that they have a new email address and asking that I no longer use the old one. So, in Mail, I right-click the new address to open the contextual menu. One of the options is to add the address to an existing contact. This then opens the contact card of the person that sent the email directly within the Mail app. I can specify whether it is a work or home address.

Unfortunately, it won’t let me delete the existing address. To do that, I have to open Address Book, which completely defeats the purpose of the feature in Mail. In this case, Apple has not fully thought through the various use cases for this otherwise quite useful feature.

In the Details: Attach Files

We use JIRA for issue tracking at my company. All of my design documentation gets posted to JIRA, attached to whichever issue required it. Awhile back, we updated to a new version, and there was one particular feature improvement that significantly improved my experience with the software.

Previously, to attach a file, you would click on the “Attach File” link, and you would be presented with a single import widget. You know the one—a field with a “browse…” button that allows you to select one file on your system. After selecting a file, there was a button you could press to add another file, revealing another import widget. I could repeat this process a few times and then press the button that would initiate the import.

In the new version, rather than requiring that you press a button to display another import widget, it automatically displays an additional one as soon as you have selected a file. If you don’t want to attach another file, no harm done. You can ignore it. If you are attaching several files—screen mockups, for instance—it saves you several steps.

Small changes can be important. This one, over time, will save a lot of clicks.

Design Pattern: Multi-select

Selecting multiple items from a list was a tricky interaction in the past, especially on the web. The standard multi-select list widget leaves a lot to be desired. For one thing, the user must realize that they can select multiple items and know to hold down a modifier key to do so. Even when you know how to use it, it is easy to accidentally select something you didn’t intend to, or accidentally deselect everything you had selected. Typically, the list box is small enough on a page that a portion of the list is scrolled out of view, so you have to scroll up and down to check your selections. Overall, it just feels temporary. I feel the need to do something to finalize the selections—it’s just so tenuous. Checkboxes are fine for short lists, but a large checkbox list can be unwieldy, and you have to scan the entire list to see what is selected and what isn’t.

For many years, I’ve been using two list boxes side-by-side—one containing the list of items to select from, and the other to contain the selected items. Buttons between the list boxes move items from one to the other. This makes the selection more concrete, and clearly shows which items have been selected. While this was certainly preferable, it could be a bit tedious, requiring you to click to select within the list, and then click to move the selected items to the “selected” list.

More recently, I’ve improved upon the pattern, dropping the standard form widgets entirely, and utilizing the power of CSS and JavaScript.

The lists are contained within scrolling Divs. As the cursor hovers over a row, it highlights, and the arrow displays, communicating the action that will occur if clicked. Clicking anywhere within the row moves the item to the other list immediately, obviating the need to press an additional button to complete the action.

Back to Basics: Sorting Paginated Lists

There are quite a few options to consider when displaying search results, or any other type of tabular list, for that matter. What information should be represented in columns?Should columns be sortable, and which ones? How many results should be delivered, and should they be paginated? What do you display when the list is empty (e.g. no results found)? There are any number of combinations and variations.

One combination that I’m frequently using is a paginated list with sortable columns. This begs the following question: If I’m on the third page of results, and I sort the list by a different column, should I remain on the third page of results, or should I be returned to the first page?

The question has been posed to me many times by developers. The answer is really quite simple, if you think about it. If I have reached the third page of results and then resort the list, I apparently haven’t yet found what I am looking for. The results that would now be displayed on the third page are completely outside the previous context, and are not likely to be predictable, so I have no particular need to remain on the third page. My searching will benefit most by my grounding within the new context by my return to the first page.

…with one exception. If items within the list are selectable, and I have selected one, I should end up viewing the page on which the selected item ends up after resorting. I obviously have an interest in the selected item, so it defines my context.