jump to navigation

It’s In The Bag January 17, 2010

Posted by dantemurphy in design research, tools and methods.
1 comment so far

Over the last several months, I’ve done a lot of travel for work. I’m not quite in Jared Spool’s league yet, but recent assignments have taken me to Chicago, Atlanta, Los Angeles, Seattle, Sao Paulo (Brazil) and Tokyo (Japan). And the one constant on all those trips has been my bag.

My well-traveled bag, and a sampling of its contents

My well-traveled bag, and a sampling of its contents

It’s not so much the bag itself that I wan to talk about, although I am very fond of it, it’s more the idea of a designer’s bag having everything he needs in a simple, portable package, marrying the utility of Batman’s belt with the whimsy and magic of Felix the Cat’s bag of tricks.

Felix and his Bag of Tricks

Felix and his Bag of Tricks

The Cat and The Bat both always seem to pull out the one perfect tool for whatever their predicament, a clear sign of their fictitious roots. Today’s designer faces many challenges in his profession, often in a single day, so versatility and low weight are more valuable than bat-shaped grappling hooks.

The Batman Utility Belt

The Batman Utility Belt

First of all, I prefer a messenger-type bag to a backpack because it’s very easy to get stuff in and out even while you’re wearing it.  Mine has pouches and pockets a-plenty, great for keeping a camera, cell phone, note pad or umbrella at hand.  This is extremely important when doing ethnographic studies, especially covert ones, but it’s also helpful for those hallway conversation with a client that so often become the turning point of a project.

Whatever kind of bag you prefer, the most important thing is what’s in it when opportnuity and inspiration come calling.  Here’s what I carried on my travels, and a couple of quick notes about things I wish I had brought or left behind.

  • Netbook or other lightweight computer: Mine is an HP Mini, not a very powerful machine but since I mostly use a portable computer for writing and editing documents and presentations, I didn’t need to spend a lot of money (or weight) here.  I’m also more likely to bring it into “hostile environments” because it’s fairly easy to replace.  Wireless internet capability is essential, and you really need the laptop form-factor because not even the fastest thumb-typist in the world can effectively take notes on a mobile phone keypad.
  • USB thumb drives: I like to keep two, one that is the repository of all of my critical working documents, almost like a portable back-up memory for my hard-drive, and one that only has files on it I am wiling to share with a client.  This is really essential since my computer does not have a VGA port, so anytime I am unexpectedly pressed into presenting I am borrowing someone else’s machine.  (When I KNOW I am presenting, I bring a full-scale laptop.  And usually my own projector, power strip, and extension cord.  Semper paratus.)
  • Sketch book and notebook: I prefer to keep a separate sketch-book for drawings and quick compositions and use a steno pad for general notes and quick doodles.  The lined paper in the steno pad helps keep things orderly, but makes it hard to draw in perspective.  Whether you use two books or one, you’ll want to be able to do both notes and sketches.
  • Assorted, pens, pencils, and erasers: I’m old-school when it comes to pencils, prefering the variety of point profiles you can get with a wooden pencil over a mechanical one.  That means I have to carry a sharpener too.  And I like to bring a good eraser, whether to correct an errant line or just to clean up those inevitable smudges.  For pens, I always carry ball-point in blue, black, and red, plus a fine-point highlighter and a medium-point Sharpie.  The multiple colors are really helpful when you’re annotating a document, or when you have a variety of ideas that you want to group without re-copying the whole list.  And without sounding like too much of a shill, I’ve taken a Sharpie to hell and back and never had one leak or explode.
  • Livescribe pen: This gets its own line because it’s more than just a pen.  The built-in voice recorder is amazing, and the ability of the pen to synchronize your notes and sketches with the audio is very valuable when doing interviews or ethnography.  Add in the search functionality and the handwriting-to-text conversion, and you have a pocket-sized stenographer.  It means hauling around the proprietary notebook, but it’s worth every ounce.
  • Ruler or scale: If you’re doing product design, you may want to go for the scale, since physical dimensions in your sketches may need to be very precise.  But even for those who design in the digital medium, general scale and aspect ration are important.  And it never hurts to be able to draw a straight line when you need one.
  • Sticky notes: If I’m doing research, I always bring a variety of colors, usually as many as six, but for day-to-day use I generally just carry two pads, the standard 3″x3″ and the much-smaller, postage-stamp size that I generally use as bookmarks.
  • Camera: I like having a separate camera than the one in my phone for a couple reasons.  First, the image quality is much better.  Second, I find it is much easier to get images from my camera to a computer; for the phone, you either have to use e-mail, MMS, or the proprietary “desktop” software.  With the camera, it’s a cable and a click.  You can also deploy a camera much more quickly; on my phone, you have to unlock the device, then select the camera function, then wait while the software loads…it doesn’t sound like much, but five seconds is an ETERNITY in ethnography.
  • Business cards: Not only are these still an important tool for networking, but they are also helpful in establishing the legitimacy of on-site research.  Also, in some cultures, they are socially de rigeur.
  • Design book or magazine: Long ago I stopped counting the number of times a book or article I was reading became the key ingredient or turning point of a project.  Whatever you’re reading, bring it with you…a conversation will remind you of something, and you can quickly refer back and make your case with the supporting text and examples of the author.
  • Chargers and spare batteries: Day to day, you can get by with one or the other, but for long trips, bring both.  And make sure you have the right adapters for whatever country you are visiting.
  • The essentials: Of course you’ll also want to leave room for your mobile phone, tissues, clips, and pictures of your kids…you know, so you remember what they look like when you get back.  Because THAT would be embarassing!

I’ll never say I’ve lived a life without regret, and my bag is no exception.  Here are some things I wish I had, or could have easily done without.

  • Wireless card for laptop: I managed to get by on hotel wireless and the data plan for my phone, but it was a compromise.  One more promotion at work and I can get a company-sponsored card; until then, I’ll probably rough it.
  • Laptop with webcam: Mostly because I wanted to video chat with my kids, I hauled TWO laptops 26,000 miles, my HP Mini for its intergrated webcam and general portability and a larger machine for on-site design work.  Never again.
  • IDEO Method Cards: I didn’t bring them with me, but I wish I had.  Great value for their size, and even though I’ve probably done every method listed there’s no substitute for a well-organized library of tools.
  • Plastic bags: At the end of my travels my bag was a veritable ticker-tape parade of receipts mixed in with notes, business cards, tourist maps, and other bits of paper I can’t even identify.  Having a couple of empty freezer bags that I could easily label would have saved me a lot of sorting and guessing when I got home.  Also good for saving that half of a sandwich, in case you get hungry on the 13-hour flight from Hamburg to Tokyo.

I’m sure I’ll keep tinkering with the forumla, but that’s what’s in my design bag.

What’s in yours?

A World Without Borders July 3, 2009

Posted by dantemurphy in design research.
6 comments

As the internet, once the domain of academics and think-tanks, grew to become a world-wide web of consumer, social, and artistic content hyperlinked together and indexed by ever more powerful search engines, the vision of a world without borders became the next Utopia.  To the pundits of social media, user-generated content, and ubiquitous computing, that vision prevails.  But when it comes to the most basic unit of the web, the humble and persistent page, the web becomes an environment of harsh structure and unforgiving constraint, often by our own design.  The fluidity of content and experience is strictly constrained, and the potential of the web remains largely unrealized.

earth

borders

The first barrier faced in the development of the web was the hardware we used to view it; computers of the mid 1990s lacked the processing power to display more than 640×480 pixels, and the “web-safe” color palette of 216 colors could not support high-resolution imagery.  The content itself was constrained.  Some of these concerns persist for mobile devices, partially alleviated by platform-specific stylesheets and zoom-in features, but for the desktop and laptop environment screen size and color depth are rarely a concern.

The problem now lies in our ability to acknowledge and design for the mental model our users have of the web browsing experience itself, independent of the content they are viewing.  Layout, content strategy, and short-term revenue opportunities sabotage our most effective use of the web as a channel for informing, entertaining, and empowering our users.

The layout of most web pages consists of a “body” that represents the main value proposition of the page surrounded by items of ancillary (or often no) value to the user.  In the most common (and most extreme) cases, this encirclement is complete, with banners and utilities at the top of the page, navigation on the left, and related content or advertisements on the right.

the "frame"

the "frame"

In recent research I’ve conducted, users refer to this layout as “the frame”, and treat the items that constitute the “frame” with the same regard frames usually get in art museums…none.  In addition to their comments about the frame, eye-tracking data confirms that many users focus only on the clearly delineated center-of-the-page zone, even when the content in the periphery maps to their primary task or area of interest.

In the example below, our participant was looking for “support” for a mental health condition her child had been diagnosed with; despite using her exact word (in bold, 24-point type), she spent over 90 seconds scouring every inch of the “page” and never once saw the link that would have immediately addressed her needs.  Her concept of the “page” was defined by the borders she identified.

the search for "SUPPORT"

the search for "SUPPORT"

This becomes more apparent the more you observe the behavior of users in the wild.  Nearly every user we tested exhibited a behavior we now refer to as “scroll to hide”, where they would scroll the page down (using the mouse wheel) such that any perceived advertisements rolled off the top.  In some cases, the offending item was not even an advertisement, but rather a content element that would have been relevant and interesting had it been rendered differently.  The result for the user was usually more of the content “body” visible on the screen; the space that had been occupied by the “frame” was now available for content of interest.

But there were ancillary, unintended consequences.  In some cases, the layout of the page had the banner ad below the global navigation; the result here was a site whose primary means of navigation was never on screen.  Whereas we once spoke of the “fold line” for placement of content, we must now be aware of the “cut line”.

the "cut line"

the "cut line"

What this highlights is a fundamental problem in the way we approach design.  In our attempt to increase engagement or revenue, we’re not giving the user choices, we’re giving her distractions.  This is especially true when the online behavior is task-oriented, and even more so when the task is related to a core personal value such as health or finance.

There are implications here for the information architecture of our websites, certainly, but the larger implication is on our overall content strategy.  User journeys, cross linking, and related content are still valid concepts, they are just executed poorly as we attempt to manage the exponential growth of content available online.  The reality, as observed both in the direct and indirect behavior of real users performing real tasks, is that too many choices are noise, and choices of too many kinds are static.  Providing links to a single article, tool, reference, and advertisement requires the construction of a multi-dimensional mental model in the mind of the user to process information they didn’t even ask for.

Even our own heroes fall victim.  Consider the website of Edward Tufte, the recognized maestro of information design.  What begins as a fairly elegant page focused on upcoming seminars degenerates into a potpourri of unrelated chat topics, review, images for sale, and even some offline contact information (not pictured).  this is not intended to suggest that I know more about design than Tufte, or that anyone does; it’s merely intended to illustrate that even the greatest minds among us fall victim to the siren song of free pixels and never-ending scrollbars.

a triumph of simplicity...or a catastrophe of clutter?

a triumph of simplicity...or a catastrophe of clutter?

The solution is to revise our content strategy and overhaul our design process.  As the architects of an experience, we need to transition from promotion of the value of each element to transparency of its value and let the content speak for itself.

There are numerous techniques for doing this.  One is to provide hover-state previews that do not require a new page or tab to load and provide on-demand relevant information.  Different previews are appropriate for different types of content; specifically, a narrative video benefits from a trailer, a short article might benefit from ratings or tag clouds for sharing or comparing, and a research paper benefits most from a synopsis.  The key is to combine the best practices of content description from other channels with the interactive capabilities of the web.

Preview technologies such as CoolPreviews begin to erase the boundaries of the web (by displaying a preview of the destination page in a <div> layer), but their success is limited in several important ways.

  • The user must install and maintain a browser extension, and is therefore bound to a proprietary solution.
  • The preview is only evident on rollover of the target, and a click is still required to display the preview pane.
  • The preview pane simply shows a smaller version of the destination page, but does not explain the value or relevance of the link.
  • Pages with a high link density suffer from cognitive dissonance, with too many targets in too small an area.
  • The preview pane obscures other potential content of interest.
transparency withotu context

transparency without context

The key to limiting the number of choices without constraining the experience is to establish a solid understanding of the underlying needs and values of each primary persona, segment, or archetype, and to create or catalog an efficient network of related content.  Providing links to every possible pathway from the current page is not democratic or inclusive, it’s lazy.  The web is inherently editorial, and needs to stop pretending to be otherwise.  Making good editorial choices is far more valuable than not making any; this efficiency in content and sourcing is what has made Wikipedia so successful.

"freedom from choice"...a manageable matrix of options

"freedom from choice"...a manageable matrix of options

Most of the links related to the subject are presented within the body of text, and in context.  A handful of links are provided to the source material for the content, and a small number of related links are also offered.  Compared to the number of links one could find that might be of interest, this is a paucity; but the finite nature of these lists invites the visitor to explore, knowing that each site is another node on an infinite neural network of hyperlinked content.

The borders are gone, and now the internet invites rather than intimidates.  As each site in each industry grows to realize that it is better to excel at one thing than to toil at many, I firmly believe that the contextualization of choice will prevent users from creating borders between themselves and what could be an engaging, educational, or entertaining online experience.