DesignAday

This Side Up

I noticed this sheet of paper tacked to the wall just above a Xerox color Phaser printer in our office. Obviously, somebody was trying to print on letterhead and needed to know which way to put it in the printer to get the correct orientation. They marked the top-left and bottom-right corners, and the side of the page that was facing up, when they put it in either the manual feed tray or the drawer. As you can see, it printed out upside down.

The inset is a photo of the icons on the manual feed tray meant to communicate the necessary orientation. The envelope icon is understandable. I can’t say the same for the page. It shows content on the side facing up and content on the side facing down and says “2nd Side”. Just looking at the icon, I have no idea what side should be facing up, and there is no indication whatsoever as to which end should go in first.

This really isn’t a difficult problem to solve. I don’t understand why so many printers and copiers communicate so poorly.

Acknowledged

Thanks to companies such as Apple, Target, Oxo, Simple Human, Dyson, Ikea, and so on, Design is gaining notoriety. The general public is becoming more aware of it—more cognizant of well-designed products. I was reminded of this by a bit of fast food marketing.

It’s the in thing to include clever copy on all of the fast food packaging. Humorous little snippets entertain us while we snarf down our Big Macs and Whoppers, and help build brand image. I opened up my carton of Burger King chicken fries, and as I was munching, I read the message on the inside of the flap.

This area is for dipping. (Yeah, we promoted the guy who designed it.)

A little arrow points to a die-cut section on the flap that folds down to cradle the small containers of barbecue sauce that come with your order. Now, aside from the fact that after removing a few chicken fries, it becomes precariously top-heavy, it’s kind of clever. It would be especially useful if I were eating while walking around. But what I really found interesting was their acknowledgement that somebody designed it.

Now, I’d be very surprised if “the guy” got any special recognition at all, let alone a promotion. It may be the same “guy” that put the copy there. If not, I expect he has had an ironic chuckle over it. All the same, I find little acknowledgements like this to be testimony to the fact that the field of design is gaining recognition, respect, and appreciation.

I Can Do That

Well, I’ve finally done it. I’ve been writing long enough that I’ve repeated myself, partially at least. After writing the following post, I had the funny feeling that I had written something similar before, which can be found here. This post is a different take on the subject, so I’ll let it stand.

There is a famous quote by the science fiction author Robert A. Heinlein:

A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.

I can do most of the things Heinlein lists. I’ve never butchered an animal, but I expect I could do well enough to survive if I had to. I had to look up the meaning of the word “conn,” and I’m not confident I could steer a ship of the line, but I have sailed a small boat. I wouldn’t trust myself to set a bone. I hope I don’t have the opportunity to die gallantly, but hope that I would if the opportunity arose.

I claim to be an Interaction Designer. That’s what my business card, email signature, and diploma all say. That’s the profession I’ve chosen as the means by which to earn my daily bread. Several years ago, my newly appointed supervisor, a software engineer, told me that my skills were very deep, but not very broad. I chuckled on the inside at that. He had no idea what I was capable of beyond interaction design. All he knew was that I couldn’t write code (beyond HTML).

Yes, I am an Interaction Designer, but I’m more than that. I’m a Graphic Designer with the skills and knowledge to lay out a gatefold brochure, a poster, or a book, and take it to press. I’m an illustrator, capable of working in oils, watercolors, pencils, charcoal, etc. I’m a photographer with experience shooting documentary style and in a studio. I am skilled at writing, have experience editing video, and have some experience with 3-D form-making. I have many other skills, such as public speaking, teaching, and working with others that benefit almost any job role.

I’m not claiming that I could make a living as a photographer or illustrator, but I do well enough that I don’t have to hire one when the need arises. My point is that I am well-rounded. Yes, I have specialized in Interaction Design, and I believe that we do need specialists. But being a specialist doesn’t preclude you from enhancing your abilities in complimentary areas. Stretch out—push yourself to learn more. You’ll find that you become more confident, more capable, and more valuable to those you work with. The next time the CEO says, “We need to…”, you can respond, “I can do that.”

Designer’s Toolbelt: The Typography Manual

There are a very few iPhone applications I have paid for so far. The most recent is a resource specifically of interest to designers. The Typography Manual combines, as the name implies, a typography manual with a conversion table, em calculator, rulers, and a number of references.

The manual is 60 pages covering type basics, history, typesetting, and web typography. It also includes a style guide, type anatomy glossary, and a handful of typeface specimens. From the little that I have perused, it appears to be accurate and well written. It includes photos and illustrations, especially effective for the type anatomy. It is fairly basic and shouldn’t be thought of as a replacement for a good typography book, but it seems appropriate for what it is—a pocket reference. It is missing one important feature, however. While some sections, such as type anatomy, provide a search field, there isn’t a manual-wide search capability.

There are a number of useful references that are provided under “Resources”, rather than as part of the manual. A conversion table lists inches (in fractions and decimals), millimeters, and points. Another table presents HTML character codes. There is a table of standard paper sizes and one for web banner dimensions. There are also lists of periodicals, organizations, type foundries, blogs, and other web resources.

I question the usefulness of the font size ruler, which lets you drag a slider to resize a line of text between 5 and 47 points. You can display the sentence in either Georgia or Helvetica. I have trouble getting it to recognize that I’m trying to drag the slider. The standard ruler also seems relatively useless. It displays an image of two rulers with markings for inches, centimeters, points, and picas, but I can’t imagine using it for any practical purpose.

The Mac keyboard characters utility is a bit more functional, displaying a keyboard on which you can tap the modifier keys to see what characters become available on the regular keys. The em calculator works as expected, allowing you to enter pixel values for font size, line height, and element size, and displaying the corresponding em values based on your setting for the browser default.

My biggest complaint is that the UI doesn’t behave as it should. When you scroll to the end of a page, it doesn’t bounce. Flicking a page doesn’t have the same momentum as standard apps. Scrolling lists don’t have the alphabet shortcuts on the right edge. Rotating the phone doesn’t have any effect on the content display.

All things considered, it is a robust app. The visual design and organization is quite good. It will be particularly useful to a student, or a designer that wants to brush up on their type knowledge. And the developer has promised additional functionality in the future, so there is even more type goodness to come.

An Appeal to English Teachers

Once upon a time, the only way to imprint type on a page was with a press. This was done by typesetters—expert professionals that understood the rules of typography. Then along came the typewriter. Yes, typewriters were convenient, but due to technical constraints, they could not duplicate the detailed craftsmanship of set type. They employed monospace fonts, in which every letter takes up exactly the same amount of space on the page. The Roman alphabet was not designed to be displayed in such a fashion, and as such, readability suffered. Due to the uniform letter spacing, a single space was not enough to sufficiently separate one sentence from another. For this reason, the practice of double-spacing after a period was introduced. People were taught to type that way. High School students were required to double-space their sentences when they turned in essays. The technique became ingrained in several generations of the populace.

In the mean time, technology advanced. Typewriters have been replaced by computers and high resolution printers. We now have more control over type and the printed page than ever before. In fact, our software now takes care of most of the fine points of typography automatically, from kerning and leading to ligatures and en dashes. What’s that? You don’t know what an en dash is? Don’t worry, Microsoft Word does. We have a large selection of quality typefaces, and monospaced fonts have been relegated to programming code editors.

And yet, everyone still dutifully enters the double-space after every period. They do so because that is the way they were taught. They don’t know that the extra spaces create holes, turning text blocks into swiss cheese. They don’t realize that it hinders readability. The teachers continue teaching the practice because they don’t know any better either. That’s what they were taught too. Graphic Designers are the only ones that are taught about this, and it doesn’t happen until they are in college.

I know this blog is not read by English teachers—I’m preaching to the choir, and likely some other ministers. So you, reader, have a duty. If you know an English teacher, please send this to them, or point them to this passage from The Elements of Typographic Style. It’s high time we all give our thumbs a break and lay off the space bar. If we are going to break this bad habit, it has to start with them.

The De-evolution of Print

I’ve been designing Interactive Electronic Technical Manual (IETM) viewers regularly my entire career. I’ve literally lost count. Most of the clients I’ve worked with are in the process of moving from paper manuals to electronic ones. This also means that their authors must transition their tools and processes. Whereas they have been laying out pages for print in applications like Framemaker, they must now learn an authoring language, such as 87269, DITA, or S1000D, and the software that creates content based on those specifications.

As a designer trained in typography and page layout, it grieves me to listen to them discussing the trade-offs that must be made. They lose control of the details of print. They can no longer introduce a discretionary hyphen to get rid of a widow or introduce an extra line break to move a heading onto the next page with the paragraph it introduces. The stylesheet is king, and the author is confined to the tags it will generically interpret.

Much as has been done on the web, we smother the skills of professionals for gains in automation and speed. We trade aesthetics and decades of refined craft for ascetic uniformity and the affordable signature of “good enough”.

Confessions of a Visual Interaction Designer

It seems to me that many interaction designers just assume that we all create wireframes—that it is a given part of IxD process. I’ve taken surveys that make that assumption. Truth be told, wireframes are not a tool that I find useful.

I don’t do wireframes.

I use thumbnail sketches to work out not only the general arrangement of objects on the screen, but to get a start on the visual design. Working on a wireframe would be a waste of time, as I would only be working on one aspect of the whole. Sketches give me the ability to work on visual hierarchy from an early stage. I find that the visual design informs the interaction design and vice versa. In my process, they can’t be separated.

Creating documentation based on wireframes would be even less useful. My early documentation utilizes the sketches. From there, I move to pixel-perfect mockups in Photoshop, which easily replace the sketches in later versions of the documentation.

I don’t put this forth as a declaration that wireframes are bad and shouldn’t be used. I can appreciate that others find them extremely useful. But for me, wireframes are too low fidelity. Good design is in the details, and you don’t find many details in wireframes.

Patchwork

Occasionally, I’m reminded how old I’m getting. My students—graduating seniors—were in junior high when I purchased my PT “Loser,” as they call it. But it was so cool back then! Times change.

They are putting the finishing touches on their portfolio websites. I didn’t have my own website when I was their age, of course—my portfolio was submitted to graduate schools as a tray of slides. I was, however, the first student in the program to give my presentation from a computer generated projection, rather than a slide projector. I and one of my classmates were also the first to create interactive pieces for our senior projects. I created the presentation and the project in (then) Macromedia Director (version 2, if you’re wondering). I’ll repeat myself and point out that we didn’t have an internet connection in those days. That means that in learning to use Director, I was truly on my own. I had the manual that shipped in the box and the tutorial files that came on the CD. I had to create everything from scratch. I couldn’t go online to find pre-built slide shows, light boxes, or nifty, 3-D effects. I had to learn Lingo, Director’s scripting language. If I wanted an image to zoom in and let the user pan it around, I had to figure out how to do that. It was painful and time-consuming and frustrating and very rewarding in the end. It was empowering.

I feel somewhat disappointed in some of my students’ websites. How do you grade a student’s work when it involves so much stuff done by other people? Where is the creativity and originality in a project that is cobbled together from free Flash scripts? How can I even tell what parts the student created?

Even worse, what are they learning when they can so quickly and easily (they would laugh at me calling it easy, but little do they know how easy they have it) assemble a site that doesn’t look half bad? Do they understand how their ideas have been hamstrung, enslaved by the variables that they might figure out how to alter? As I provide feedback during the critique, I am all too aware that they don’t understand how the code is doing what it is doing and have no clue how to make it do anything else. I wasn’t prepared for this. What are they prepared for?

It is not enough to assemble. Designers must be makers!

Why Interaction Design?

Two recent blog posts by fellow CMU alumni collided on my iPhone as I was reading over the weekend. They complemented each other, even though they were inspired by separate sources.

First, Dan Saffer posed a question on Kick It: Is industrial design the new interface design? The question was prompted by a statement in Carla Diana’s Core77 report on the CHI conference, claiming that this was the “mantra of the week.” Dan’s exploration of the question is very insightful, pointing out that in many cases, it is true. There are physical objects that act as controls or “interfaces,” without buttons or screens or any of the widgets that interaction designers typically work with.

But he also looks at it from the opposite side, where the physical form is only a container for the UI. The iPhone is a perfect example of this. The industrial design of the iPhone is quite nice—no question about it. But the entire purpose of the object is to present the user interface that one views and interacts with through the touch screen. All of the value delivered in the iPhone comes from the virtual part of it. As Dan succinctly explains, “Start from the inside-out (the behavior), and then figure out what should control it: the physical form, UI elements on a screen, or even gestures in space. For users, the interface is the system, and they don’t care which discipline(s) designed it, only that it looks good and works well.”

The second post appeared a day later when Jamin Hegeman philosophized about Bill Moggridge’s statement that interaction design as a discipline may no longer be necessary. Moggridge’s reasoning is that interaction design is now pervasive. Jamin points out that there are “…many communication and industrial designers who feel they have had the same focus on behavior that interaction designers… like to refer to as their domain.”

I’ve often stated that industrial design is a better background to bring to interaction design than others, as industrial designers are steeped in usability issues of form. Most of my favorite examples of user-centered design and design process are products resulting from industrial design: Oxo GoodGrips, Dyson vacuums, and Simplehuman trash cans, to name a few. I, myself, come from a graphic design background, which prepared me with the foundational practices and processes that all design domains are based on. This also was a good basis for moving into interaction design.

But in either case, I believe there is much more to be learned before one can claim the title “Interaction Designer.” As Dan and Jamin both mention, behavior is at the core of interaction design, but there is a lot of specialist knowledge that goes with it. Industrial designers must have knowledge of materials and building processes. Graphic designers must have knowledge of paper and printing processes. Interaction designers must have knowledge of digital materials (e.g. UI patterns, form widgets, input and output devices, etc.), and development processes. This doesn’t preclude any one role from working in another’s realm—my graphic design students are finishing up portfolio websites as I type. But there is certainly room, and I would argue a need, for specialization. It may be possible to do it all, but it isn’t efficient.

Disowning the Design

An important part of the experience of a studio-based design education is the critique. Students display their work in front of their classmates, and possibly other observers, and must withstand the, hopefully, constructive criticism. It can be devastating to have a project that you spent a lot of time on and thought was decent be ripped to shreds by your professor and peers. It is, however, a necessary experience. One must not only learn to accept it, but embrace it—welcome it, knowing that it will make the end result better. To do this, you have to disown the work, and see it as something other than yours.

Once a designer is out of school and working professionally, criticism will come from many directions: customers, co-workers, users, supervisors, etc. Even with my studio background and all my years of experience in the field, I still occasionally find myself becoming defensive about my designs. It is a completely natural reaction, and as such, I should never let my guard down. When I realize that I am taking criticism personally, I find it quite easy to let go, thanks to my training. The hard part is coming to that realization.