I was inspired this week by my daughter’s creativity. My wife was planning on baking some pies to give as gifts to a few friends and was buying aluminum pie pans. Felicity saw some Christmas tree-shaped cake pans and suggesting making the pies in them. My wife’s immediate reaction was, “No, pies have to be round.” But, she checked herself and thought, “Well, I guess that could work.” She ended up buying a bunch of the tree-shaped pans, and tonight she baked the first pecan pie. It turned out beautifully. She even got some dried cranberries to decorate the tree with, and a starfruit for the top.
Just because every pie you have ever eaten has been round, don’t assume that every pie has to be round. Question everything, and always keep your mind open to new ideas.
I’m still coming to grips with my switch from Illustrator to Freehand. The transition is fraught with frustrations. I’m finding a lot of issues with their implementation of “art boards”, or what I consider to be an attempt to introduce Freehand’s multiple page capability.
The rulers aren’t page based. In Freehand, the window rulers would orient on the currently selected page. Thus, your measurements always started from the edge of the page, or wherever you dragged the registration point on that page. Illustrator’s ruler is static, and therefore rather meaningless when working with multiple pages. However, they introduced art board rulers. These rulers are attached to left and top edges of each specific page, but because of this, they scroll with the page. So, if you zoom in on a page, you can’t see the rulers.
In Freehand, when you locked an object or locked a layer containing an object, the object’s position was locked in relation to the page it was on. Thus, I could lock down a layer that contained objects on multiple pages, the Guides layer for example, and freely rearrange the pages without a problem. In Illustrator, layers are locked in relation to the entire workspace. So, if I have my guides locked down and move a page, the guides are left floating in space.
They added the multiple page feature, maybe just to appease diehard Freehand users like myself, but they have not designed Illustrator to be page-centric. It’s a bolt-on feature, and it feels like one. They haven’t thought through all of the implications of multiple pages.
The first time I traveled out of the country, aside from walking across the border into Canada, was a business trip to Scotland. One of my colleagues had a power adapter for his laptop, and I couldn’t believe the size of the standard UK plug. It seemed completely impractical to me, and ugly to boot. Royal College of Art graduate student Min-Kyu Choi has designed a plug that folds into a slim, 10mm wide profile. The two smaller prongs rotate ninety degrees, and there are two wings that fold back into a handle. According to Iconeye, the UK plug was first designed in 1946 and has barely been touched since.
It’s a truly beautiful design, but what’s brilliant is the multi-plug adapter that Choi designed to take advantage of the new plug in its folded state. Three folded plugs slot into a standard-size plug. It’s an elegant solution that appears ready for manufacture. This is industrial design at its best and one designer with a promising career ahead.
I’ve made several longer posts this week, so today’s will be a short one, which is fitting for the subject.
Why is it that the sinks in so many public restrooms have spigots that are too short? The problem is caused by a combination of how far back the faucet is set on the sink and the length of the spigot. The result is that you repeatedly bump your hands against the back of the sink while trying to rinse them. If we assume that the sink in a public restroom is not exactly sanitary, touching the sides is counter to your goal of washing your hands.
I’ve come to a disconcerting conclusion: design research is great when it comes to improving existing product categories but essentially useless when it comes to new, innovative breakthroughs.
He provides a very good argument in support of this provocative statement. I’m certainly not going to declare that he is wrong—history backs him up. However, that’s the point I would like to make. Don is talking about history. He provides a list of inventions that have changed society, including the airplane, automobile, telephone, etc. He then asks what role design research played in those inventions. None. But there really wasn’t such a thing as design research at the time these inventions came to be. Even at the advent of the personal computer, the field of design was pretty much limited to graphic and industrial—user-centered design methodology was in its infancy.
Yes, in the past, technology has driven innovation. I would argue that this is beginning to change. More and more, the value of design is recognized by the general populace. At the same time, technology is becoming more accessible, making it easier for people to adapt it… to their own needs.
Don suggests that his examples, such as the telephone, were invented as a technology before the need for them developed. I disagree. There was a need for long-distance communication. At the time, it was being satisfied by the telegraph, a less than optimal method. Bell invented something better. Perhaps the general populace didn’t recognize the need, but I would argue that Bell probably did.
Needs can drive technology, and design research can identify needs. I predict that we will see this become a more common pattern in the future.
I’ve worked on a lot of applications for doing work in the field, be that an oil refinery, an aircraft hanger, an auto dealership, or a mine field. One capability that most customers want is note taking. This sounds like a simple, even blasé request, but it’s really quite interesting how many differences there are in the details of the various implementations.
Some clients see notes as valuable content that increases the knowledge base of their workforce. They trust their technicians to make intelligent decisions based on circumstances and experience, rather than blindly following procedures. With this perspective, they expect notes to be shared—globally available and searchable. They may even request a system by which technicians’ notes can be approved for inclusion in revisions of the official documentation.
Other customers see notes as a liability. It is un-vetted information that they can’t control. A technician may make the wrong decision based on somebody’s suggestion that results in expensive equipment damage, injuries, or loss of life. In such cases, functionality is limited. Notes are for personal use only and can’t be seen by anyone else. The feature may be permission-based or made available only in a training mode. The whole feature may be enabled and disabled as an administrative preference setting.
Those are two extremes, of course, so there’s plenty of room in the middle, and many other choices. May notes be printed or exported? Should they display inline or in a separate window? Can they be edited, under what conditions, and by whom? Is there a size limit? What happens when the content a note refers to is updated or deleted?
When it comes to application design for industry, even a feature as unassuming as notes can be a challenging design problem.
I was trying to book my hotel for Interaction 10 today. Since I’m covering my own travel expenses this year, I’m not going to be able to stay in the hotel that the conference has picked. Even with the conference rate, it is still several hundred dollars more expensive than several other hotels in the area. I was using Orbitz to find the best rates and comparing it against hotels’ own websites. Interestingly, even with a AAA discount, the Orbitz rates were cheaper. At any rate, I was doing this in parallel with a couple other things, and when I finally pressed the button to book the hotel through Orbitz, it blew up!
It explained very nicely that it noticed that there had been a period of inactivity and that I should check again to ensure availability. Then it dumped me back on their first page. I had to start from scratch, reentering my travel dates and the city. Room availability doesn’t change all that rapidly, but I can understand the necessity of checking again. It’s not as if the hotel is shipping out, however. There was no need for me to have to perform the hotel search all over again. My destination and travel dates aren’t going to change in the ten minutes or so that I had the browser window open. If it has to ask me again what type of bed I want, so be it, but don’t make me search for the hotel that I’ve already decided I want to stay at.
I almost decided to pay an extra $20 and book the room elsewhere just to spite them.
My wife and I just upgraded our original iPhones to the new 3GS. We both ended up having to call AT&T’s customer service to get them activated. My wife missed the Quick Start Guide included in the shipping box, so she didn’t realize that you had to activate the phone either online or by calling a number. I, however, followed the instructions, and it still didn’t work.
Step 1 says to leave the new phone off, explaining that turning your iPhone on could cause activation problems. Step 2 has you sync your phone with iTunes, though, which turns it on. Step 4 then has you visit a URL or call an automated system to accept your terms of service and activate the phone. I tried the web method, and it told me that my phone was activated. Unfortunately, the phone itself reported “No Service”. Then I tried calling the number. After it took me through a couple steps, it forwarded me to a service representative.
Apparently, both the old phone and the new phone have to be turned off at the time of activation, or it fails. AT&T made a slew of mistakes in the design of this activation process. Their instructions say nothing about turning off the old phone. The instructions explicitly state right off that “…you MUST follow these steps IN ORDER”, which doesn’t work, because it has you turn the phone on after telling you to leave it off. Finally, when the activation fails, the website tells you that it was successful. Apple got it right with the first version, where activation was handled directly through iTunes. It’s a shame they are now dependent on AT&T for this small, yet crucial, part of the process.
I’ve mentioned before that one of the things I like best about my job is that I’m often learning about new domains. I spent the past two days at the Norfolk Naval Base. Tuesday found me aboard the Dwight D. Eisenhower, an aircraft carrier. That is one big boat. I had the opportunity to tour the flight deck and the tower, but spent most of the day in the bowels of the ship. I can’t discuss the details of the work I was doing, of course, but suffice it to say that it was very educational. The benefits of observing the users of your software doing their work in their environment should never be underestimated.
On Wednesday, I visited the New Mexico, a submarine. In both ships, but especially the sub, space is at a premium, and every bit of it is utilized. Most of the rooms and hallways are lined with piping, cables, conduits, and ductwork. You’ll see gauges, valves, and equipment panels every time you turn around, even in the “public” areas. The experience gave me a new appreciation for the hardships that our sailors endure to protect our country. Everyone that I met was very polite and gracious with their time, even though I was interrupting their work, getting in their way, and usually slowing them down (Climbing ladders in a sub takes a little bit of practice). I have a lot of respect for these men and women, and I’ll do my best to make their jobs a little easier.
Illustrator’s mechanism by which arrowheads can be added to lines is a juvenile attempt at user interface design that does not belong in a professional design application.
What should be a standard attribute of a path is hidden in an obscure location. I had to search the help files to find out how to use them. When a path is selected, you must go to the Appearance palette and select the Stroke. At the bottom of the palette is the “fx” menu. Open it and navigate to the Stylize sub-menu. There you will find the Add Arrowheads command. Why this is considered to be stylizing the line is beyond me. To my mind, adding arrowheads is nothing like introducing a drop shadow or glow effect. It is important to select the stroke, as the application will allow you to add arrowheads to the fill, which actually does nothing, and makes no sense whatsoever.
Once you find the function, you are presented with the dialog shown below.
Notice that there are 27 different arrowheads. The only way to see what is available is to click through all 27 of them. If you want the same arrowhead on both sides, you have to click through to select it separately for each end. If you decide you want to remove an arrowhead, you must click through them serially until you return to “None”. This is inexcusable coming from a company like Adobe in a product as mature as Illustrator. Their designers should know better.
The UI should display all of the arrowheads so that they may be compared and selected with a single click. There should be a “mirror ends” checkbox. The feature shouldn’t be tucked away in a sub-menu that doesn’t make sense, and it shouldn’t allow the user to apply it where it has no effect. Finally, it should make clear which end of the path is which. It is based on the order in which the points were added, but there is no way to know this once a line has been drawn.
The U.S. National Design Policy Initiative (NDPI) held its second summit in Washington D.C. this past Tuesday. There were around 30 people in attendance from professional design organizations, education, and government including:
AIGA, the professional association for design Interaction Design Association (IxDA) American Architectural Foundation (AAF) American Institute of Architects (AIA) American Society of Interior Designers (ASID) Design Management Institute (DMI) Industrial Designers Society of America (IDSA) International Interior Design Association (IIDA) Society for Environmental Graphic Design (SEGD) Association for Collegiate Schools of Architecture (ACSA) Association of Independent Colleges of Art and Design (AICAD) Interior Design Educators Council (IDEC) National Association for Schools of Art and Design (NASAD) Cooper-Hewitt National Design Museum National Park Service (NPS) U.S. General Services Administration (GSA) U.S. Government Printing Office
They had five objectives for the summit, four of which they accomplished (#2 must be completed).
Develop the 2010 strategic priorities for the U.S. National Design Policy Initiative
Finalize membership of an “American Design Council”
Gain a sense of the priorities for design from the Department of Commerce, USPTO
Engage the wider design community in national design policy decision making
Develop a set of case studies that demonstrate the value of design for publication
Prior to the summit, the NDPI posted a poll on its website, allowing people to vote on what they felt should be the organization’s top priority for 2010. Out of 324 votes, 75 (23%) voted for the introduction of design creativity and innovation learning modules into K-12 educational curriculum. This was almost twice as many votes as the second-place priority. I concur.
Design education is currently in a tricky position. There is more interest in the field then ever before, and the scope of problems that design can be applied to continues to grow. This means that there are more students applying to design programs than can be accepted, and that a designer must be trained in a wider range of skills, from traditional, visual design to technology and business. There isn’t enough time to cover it all in the typical undergraduate degree program. Introducing design education even at the high school level would significantly improve the quality of design education in this country.
Computer games feature beautiful artwork that immerses the player in a world. As such, graphical user interface components are usually kept to a minimum. However, games can be very complex with any number of actions that can be performed. The UI must provide some mechanism of selecting actions, and inventory items. Many games, from first-person shooters and MMORPGs to RTSs and adventure games, provide quick action bars to make commonly used actions and items easily accessible.
A common pattern is to have some type of repository, like a backpack or spell book, which contains all of the items or actions a player has. This is something that the player can open as a new screen or pop-up overlaying the gameplay screen. They can see everything they have, read descriptions of them, and activate them. But when a player is in the middle of the action, they don’t want to have to open a separate window, obscuring their view of events, to cast a spell. It takes too long, and it breaks their suspension of disbelief.
Quick action bars can be located along any edge of the screen, but tend to be along the bottom. Many games provide multiple bars in various locations. World of Warcraft, for example, provides two rows on the bottom and two more on the right-hand side. Bars are typically configurable, allowing the player to decide which actions and items they want immediate access to and how to order them. They can be activated with a single click.
This is one pattern that has been found in productivity software almost as long as in games. Most applications have some kind of tool bar that provides single-click buttons for common actions. Many applications allow toolbars to be configured, ranging from placement of the bars themselves to management of the individual buttons. Some applications have contextual tool bars that present functions based on the user’s context, such as the current selection.
When designing your application, consider what actions will be used most often. Consider the context in which actions will be performed. Will there be big enough differences between users to warrant a fully customizable set of tool bars? Or, will your application benefit from a reduction in complexity by not providing robust customization?
Of course, another useful pattern that works in concert with quick action bars is shortcut keys, but that’s a topic for another post.
As I’ve written in the past, one of the features that made Freehand such a valuable tool for me was its support for multiple pages. Illustrator CS4, four years after the demise of Freehand, is almost as useful. Its implementation of “artboards” is very similar to Freehand’s pages. They can be arranged in the workspace. They can be added and deleted. They can be sized to common paper dimensions, oriented landscape or portrait, printed individually or as multiple pages, and exported as a multi-page PDF.
When pages were rearranged in Freehand, they were automatically numbered from top to bottom, left to right, in standard English reading order. When exported to PDF, they would be logically ordered. When printed, they would print in that order. Unfortunately, Illustrator isn’t so smart. It numbers the artboards in the order they are created. Rearranging them has no effect on their numbering. Worse yet, there is no way to change the numbering! So, if you decide to add an artboard that will act as a cover page after you have created the rest of your document, you can only make it the first page in a PDF editor after the fact.
Eric Raymond’s Rule of Composition has nothing to do with the layout of GUI screens. The rule states that programs should be be designed to be connected with other programs. It, in large part, discusses the use of simple text streams for communication and the importance of a well-defined API. The point that I want to focus on, however, is this:
To make programs composable, make them independent. A program on one end of a text stream should care as little as possible about the program on the other end. It should be made easy to replace one end with a completely different implementation without disturbing the other.
This is good advice for software design, but what wisdom can be drawn from it for the design of user interfaces? I’ve often had to design applications that are part of a larger system. They have to rely on other applications for certain functionality that are outside of my purview. One approach would be to design the application that I have control over so that it visually and behaviorally matches the one it links to. Of course, if it must interact with multiple applications, this approach isn’t possible. Even if it were, it would typically result in compromises to the user experience in my application that I’m not willing to make.
It’s better to make a clear distinction and provide the user with some indication that they will be reaching outside of the current application. Many websites visually distinguish internal and external links, for example. Many of the applications I work on provide links to PDF files. I make a point to indicate that clicking the button or link will open a PDF document. Another product I’ve worked on relies on a third-party application for OCR. The user leaves the first application, performs several steps in the OCR application, and then returns to the first to continue their task. It’s a difficult transition to make, and the UI has to handle many error conditions and communicate status effectively. However, it has been designed such that a different OCR application could be swapped in without much impact to the UI.
In many ways, this rule is in opposition to good UI design tenets, as we try to achieve a seamless experience. Sometimes, the seams are going to show. Take this into account in your design such that the experience is at least understandable and doesn’t take the user by surprise.