Category Archives: Designing

Blurriness and Black: You’re Doing It Wrong

There are a couple of times as you work on your craft that someone points out something to you which immediately raises your game to the next level.

In photography, this happened to me most recently when a photographer friend started rhapsodizing about how proud he was of a picture he’d taken–not because of the composition, the mood, or the lighting, but because of the blurring behind the subject (“bokeh”). Since the most basic worry up until then was that my photographs not be blurry, this initially struck me as madness until he pointed out the trick. Essentially, by shooting with fast lenses and opening up the aperture all the way, the depth of field is so shallow that anything behind the subject immediately fades into a beautiful blur, causing the subject itself to pop dramatically.

Beautiful example of narrow depth of field and bokeh by All17 on DeviantArt

Since all of the lenses I owned up to this point were general purpose zooms whose apertures started at around f4, this was never an effect I could have achieved had I known to go for it. At his encouragement, I dropped $99 on a simple, 50 mm lens with an f-stop of 1.8, opened it up all the way, and took a picture of a person with it. Instant magic!

Suddenly my portraits came alive in a way they never had before, and I was one big leap forward in getting that “certain something” in my photographs which I’d never really been able to see before. (It also led me down the terrible path of buying really expensive lenses, since it turns out that each additional f-stop you want on a given type of lens effectively triples the price)

I got a bit of that eye-opening “bokeh” feeling in my interface design craft as I read Ian Storm Taylor’s article on why designers should almost never use pure black (RGB #0000000) in their work. In short, it’s simultaneously overpowering and unnatural. He also makes some excellent points about the color saturation of shadows, and how much you can warm a design, as well as make it look more natural, by going beyond the straight n% grays that have formed the backbone of interfaces since someone discovered the 3D bevel effect back in the eighties.

Like the blurriness of the picture _behind_ the subject, this is something I’ve never really considered up until now, but which I sense has the prospect of raising my game considerably just by knowing what to look for.

Read the whole thing.

The Pointlessness of Personas

Once upon a time, a designer somewhere had a brainwave. Instead of the same old dry “user roles” and “market profile segments”, we could create little biographical sketches of our product’s target users to help the product team really get in touch with he people they were designing for. In time, these little mini-bios became known as personas in the trade, and are now a staple of design groups the world over.

Dave

Dave

Gender: Male
Age: 46
Occupation Sr. Manager
:Location: Bridgeport, Connecticut

“I use my computer enough at work. When I want to kick back, I turn on the game—I don’t fire up a web browser.”

Description

Dave manages a 20-person team and works long hours in his role as a business manager at an insurance firm. As a father of a daughter about to enter college, he is very involved in campus visits and helping his daughter apply for scholarships and financial aid. In his downtime, he is an avid golfer and all-around sports fan.

Education

Graduated Rutgers in 1993 with an M.B,A. emphasizing Global Management

Likes

  • Working directly with people. The relationships he has with employees and customers.

Dislikes

  • Form-filling and paperwork
  • Time required to learn new systems and technologies.
  • Not having access to information when he needs it to do his job.

Goals

  • Be a knowledgeable resource for his direct reports and customers
  • Spend as little time as possible on “computer stuff” outside of work.
  • Retire in the next 5 years.

It was an interesting take on the old problem of how to get engineers to see the world through the eyes of the people they’re building for. In recent years, many marketing and UX departments have latched onto personas with a vengeance, and I’ve seen everything from small laminated versions plastered to the walls of the Microsoft TV design studio to massive versions occupying entire walls of a major bank’s UX department, complete with larger-than-life photographs.

Recently, I even heard of a tech company that paid actors to come in before the project team and portray the the various personas the UX group had created. The project team was allowed to ask the actors questions about the character’s lives, but strictly prohibited from inquiring about the product or its features. It was apparently hoped that somehow all this would help the project team deduce what it was that they were meant to be building. I never did hear how that worked out for them.

Send in the Clones

As a UX manager, I get to review a lot of designer’s portfolios, and as a result I’ve read over so many personas that I’m beginning to recognize which stock photography library the designer raided for their persona’s “candid” shot. Worse yet, the personas themselves might as well have been issued directly from corporate central casting, complete with perfectly balanced mixes of age, race, and gender.

There’s always the hardworking set of grandparents who love travel but are concerned about retirement… the hard-driving female/black/ethnic minority/all-of-the-above middle manager who’s career-focused and professional… the slightly punky (but not in a scary way) twenty-something who’s cool and artistic…

And then, inevitably, there’s Jane:

Jane

Gender: Female
Age: 34
Occupation Account Representative
:Location: Markham, Ontario

“Jessie and Toby keep me running a mile a minute, so it’s hard to find time for myself”

Description

Jane is a single mom raising her two children, Jessie (4) and Toby (5) herself, while balancing a stressful job in the medical products industry. She has a chaotic schedule, and her household budget is frequently stretched. She doesn’t particularly like her job, but appreciates that it pays the mortgage on her three bedroom bungalow located in a modest suburb of Ontario.

Education

AA degree from City College

Likes

  • Her children, vacation time.

Dislikes

  • Pressure-filled environments, both online and offline
  • Things and people that waste her time
  • Complicated gadgets and web sites.

Goals

  • Achieve work/life balance

Jane (sometimes “Judy”, “Francine”, or “Sophie”) is a single mom bravely raising two adorable moppets who keep her busy. Since her ex started shacking up with that floozy he met at the sales conference, she’s been single-handedly putting food on the table, getting bubble gum out of the kid’s hair, and meeting the demands of her high stress job in a service industry filled with unreasonable customers. She hasn’t slept since last Wednesday.

After what had to be the twentieth portfolio I reviewed featuring some Jane clone, I started to feel like she was my own personal stalker. The rest of the identikit cast of personas was really no different either. It was enough to make we wish I’d see a portfolio where—if only to see if anyone was still paying attention—the designer had really gone for it:

Yuri

yuri

Gender: Male
Age: 38
Occupation Performer/Unemployed
:Location: Newark. New Jersey

“I usually use the computers at the library, but sometimes they have these filters which keep me from finding the things I want”

Description

Yuri grew up in a little town outside Vladivostok where he was abandoned by his parents to a state-run orphanage. At the orphanage, the governess used to beat him mercilessly with a knock-off “Kermie the Frog” doll, leading him to turn to alcohol at the age of five. After placing a highly misleading ad in a “Russian Brides” catalog, he was brought to America and now makes his living as an occasionally employed children’s party entertainer for parents in the Newark area who have not yet discovered Yelp reviews.

Education

None

Likes

  • Children, alcopop, Four Loko

Dislikes

  • Complicated interfaces,
  • Pressure-filled environments and judgmental people.
  • The color green

Goals

  • To become more of a “power user”; learn how to use BitTorrent

And let’s face it: unless you’re designing a porn site for inebriated clowns with complicated childhood traumas (Design tip: use big, non-green buttons!), it doesn’t matter which of the above personas you use. Whether it’s busy professionals or twenty-something slackers doing “creative stuff” in their parent’s basements, it’s a pretty good bet that they hate overly complicated interface, like finding stuff easily on their favorite web sites, and don’t particularly care for reading manuals or looking like an idiot in front of technology. So whether you’re designing a shopping site or a new consumer electronics device, it wouldn’t matter which of the above personas you focused on, as there’s almost nothing in any of them that is likely to change your design in any but the most cosmetic senses.

Killers and Adventure Shoppers

If your goal is to actually drive the product design, the secret is to move beyond character sketches and personas and figure out the different “types” your users come in. These are the major personality and usage categories that fundamentally affect how user’s will perceive and use your product or system.

For instance, thinking in the design of role-playing games (RPGs) has focused on between about 4 and 7 major “types” of gamers, including (with credit to Richard Bartle):

  • The Achiever: This is the guy who wants to take on the biggest battles, grab the most loot, and reach the highest character level. Will study strategy guides and scan discussion forums in order to figure out how to take out that demonic overlord guarding the mountain fortress instead of just sneaking around him.
  • The Explorer: The person who has to uncover every secret room, open every hidden chest, explore the outer edges of the game world, and actually reads all those tomes of lore that the monsters have carelessly scattered all over the landscape.
  • The Social Gamer: Enjoys cooperative play, teams, and the interplay with others in the game world. Plays well with others.
  • The Killer: Lives to Pwn N00bs and loot their bodies. Owns a chat set purely so he can talk smack while firing RPGs at the game’s respawn point. Has a gamer score in the tens of thousands.
Sackboy

These types seem to cut across all manner of games, not just violent first person shooters or RPGs. Little Big Planet is the tamest of all conceivable games, where you play the part of a “sackboy” jumping around various platforms in a world that seems entirely created by crafters with too much yarn laying around the house.

Even there, I’ve seen my eight year old daughter get egged on to complete new levels by achieving strangers, engage in friendly banter with other social gamers, as well as encounter elbow-throwing killer-types who’ve shoved her little puppet-character into lava pits so they could grab up all the available prizes in multi-player contests. And to this day, I have no real idea whether “kirein71” who was so nice and helpful is a 9 year old girl from Des Moines or a 44 year old factory worker from Tokyo. The biography doesn’t matter to the game play, but the type surely does.

Similarly, it’s important to identify which of your product’s types you want to prioritize around, as these will directly impact both the features and the interface you present to your users.

If you’re designing for the world of retail, for instance, you would do well to worry what percentage of your customers are GIGOs (“Get In, Get Out”) vs. Adventure Shoppers, amongst other shopping types.

GIGOs (stereotypically, men) may not particularly like shopping at all. When they do shop, they value quick, streamlined browsing systems, prefer a minimum of distracting displays and information, and demand concise checkout. Their favorite stores—both online and offline—let them get in quickly, find what they need, then leave and get on with their day.

Adventure Shoppers, on the other hand, love discovering surprises when they browse the store. Indeed, much of the business model of stores like Costco is based providing Adventure Shoppers with great deals on things they didn’t expect to see when they came in the door (and may never see again if they put off the purchase). Sites like Woot take this even further, providing deep discounts on one item, for one day, forcing its adventure-shopping fans to check back on the site on a daily basis as once the site sells out of a featured item (or the day ends), the opportunity to buy it is lost.

Are you designing the interface for an auto parts store? GIGOs are likely to be the backbone of your business and you should design accordingly. But what if you’re redesigning the interface for a large national clothing retailer? Here you’ll have to pay careful attention to the needs of “Social Shoppers”, “Gappers”, Adventure Shoppers, and more. And while knowing whether you’re designing for “Dave” or “Jane” might inform your color scheme and choices of clip art, knowing that 25% of your business comes from folks who want a friend’s approval before buying a new blouse is likely to have far more profound effects on your site’s feature set and interface.

Building a Better DVR: Adventures in Consumer Electronics Design

One of the largest clients for my Human Interface consultancy (www.humancomputing.com)  this past year has been TiVo, the folks who brought us both the DVR and the ridiculously cute corporate trademark.

I’ve just completed a long contract there, which–among other challenges–saw me helping design their next generation of high-end DVRs and streaming video boxes. This was a terrific project which I was lucky enough to see through end-to-end. On it, I got to do everything from sawing apart old circuit boards and visiting Radio Shack in the middle of the night to assemble testing prototypes… to doing screen design… setting up user studies… and even working with an exceptionally clever engineer to figure out how to get the box installed (and the cable guy back on his way) in a third of the time it used to require.

Best of all, I got to meet and work with some amazingly smart folks both on the user experience team and throughout the company. I may even sign on more adventures there next year, but for now I’m very happy to be back in my robot-strewn office at Human Computing, catching up on correspondence, and looking forward to a terrific Christmas with my family.

A Minimalist Face to TV Device Design

In the TV hardware field, manufacturers are beginning to notice that the same 17″-wide components that nestle in your living room’s entertainment center have a harder time fitting in to the back bedroom or study, where many auxiliary screens are kept.

Today, Engadget linked to a new streaming TV product from Sigma Designs which manages to bundle the whole product into a small plug-style box which is commanded via RF Z-Wave networking (so that it can be controlled without the need to hit an IR sensor with your remote control; the radio wave from its remote will find it if you’re anywhere in the general vicinity of the box).

The box itself effectively has almost no interface at all–indeed, the product simply hangs from the bottom of a wall socket with a single HDMI and optical port to connect it to your TV. Networking and communication are handled over the HomePlug powerline networking, so there are no additional networking or video input cables to run. It simply plugs into your wall socket–also neatly handling the problem of where to put/mount the device.

(It would have been interesting to see Sigma design the box to occupy the top outlet of a standard wall socket instead of the bottom one, and configured the video/audio cables to run from the top of the device instead of looping around the bottom. As the TV is almost certain to be located above the device, this might have allowed for a slightly cleaner installation.)

Minimal Styling for a Minimalist Device

It’s clear that Sigma didn’t feel that a device that amounts to an oversized wall wart requires much in the way of consumer design or styling. I’m actually not sure I agree on this point, as the large, flush face of the installed product seems to offer a perfect chance for branding, if nothing else. It’s hard to imagine, for instance, Apple passing up the chance to have yet another glossy, smooth-edged device sporting a tasteful Apple logo as permanent fixture in the home. All that would be required is an change in the plastics and tooling at a minimal difference in cost.

Similarly, I’m not sure sufficient care was taken with the design or placement of the many, minuscule status indicators seen above at right. These are placed so that they are almost certain to be both illegible and unseen when the device is plugged in behind any bureau, desk, or entertainment center. Here, the designers might have been well-served by having fewer, possibly multi-color lights to indicate status. Edge-mounting them so that they are visible from both top and side to account for various types of view obstruction would also help.

Finally, the LED design might do well to stay as low-key as possible, particularly if it’s meant to live in the bedroom or study. A single, low-key light that indicates that the unit is powered up, and which possibly switches color momentarily to indicate remote activity (or red for an error) is probably close to the ideal for such lighting-sensitive environments.

Taking it Further

No price is given in the press release, and it should be noted that this is always a crucial factor in the home consumer market. Having spent much of my past year in the TV space, I also can’t help speculating on what Sigma’s cost basis might be, if the power circuitry (which seems to occupy much of the right side of the board in the picture below) could be handled by a host in an integrated device.

Once you downplay the physical attributes of a device sufficiently: writing off both function (no controls or displays) and style, it seems that the next logical step is to see if you can make the device disappear entirely. Once the physical face of a product has disappeared, the product must then survive by the virtues of its virtual interface. It’ll be interesting to see this area develop.

Good Questions: Why Not Move Menus to the Side?

On the User Experience Professionals forums, Pablo Diaz asked a great question:

Why are we still putting the menus at the top and leaving users with less space for editing instead of setting those menus at the left?

I have been wondering about this exact topic. With all this widescreen revolution, screens featuring more horizontal real estate than vertical real state. Why are we still putting the menus at the top and leaving users with less space for editing instead of setting those menus at the left? Does this have to do with users used to this specific setting with menus on top or is there really a real scientific logic behind it?

Here’s my response:

Two good reasons come to mind. The first is practical: convention and user expectation demands it. This isn’t the end of all considerations, but it means that anything that defies such convention needs to be not just better, but A LOT better in order to justify making the change.

The second is physical and a bit more subtle. It relates to Fitts’s Law (which boils down to the idea that big, close targets are easier to hit than small or far away targets). Since menus are “bound” to the edge of the screen which they border, they are essentially infinite in that direction–you can slam the pointing device as far in that direction as you like and get the same point.

However, menus on the left and right sides are only as tall as their line height, while menus at the top and bottom as wide as the text width–usually several times the effective target size. This leads them to be far easier to “acquire” (hit) than their horizontal brethren.

-Pete Bickford
(for uxtalk.wordpress.com, and a HT to Bruce Tognazzini)

Blowing Bubbles: A Radically Different Type of IDE

A group at Brown University has a very different take on the ubiquitous “IDE”‘s or “Integrated Development Environment”s) in which programmers live as they write and debug their code. The design uses what seems at times like a never-ending collection of bubbles in ways that are by turns ingenious and overwhelming:

Although the graphics are certainly more pleasant than the IDEs I’m used to, I find myself constantly lost as I try to establish my context within the overall program, and the sense of watching a program’s flow through this metaphor is unusual to say the least. Ultimately, I find I’m more drawn to the team’s other ideas (such as code factoring via a simple direct manipulation gesture) than I am to their overall bubble metaphor.

For more, see the team’s site at: http://www.cs.brown.edu/people/acb/codebubbles_site.htm

What do you think?

No Exit: Design vs. Cultural Expectations

Julia Turner at Slate has an interesting article on how the beautifully designed “Man leaving via exit door” pictogram hasn’t caught on with Americans who are used to our big red Exit signs.

http://www.slate.com/id/2246107/

This is a great issue where the expectations of the installed base (a.k.a. the entire American population) can make unworkable a potentially more attractive or functional interface that doesn’t meet those expectations. C.f. Dvorak vs. Qwerty.

The article also includes a wonderful example of the Slate offices, sporting two different versions of exit signs (the one on the right apparently was placed as part of a governmental edict). Note the Band-Aid approach of labelling the sign “Exit” in addition to the pictogram (icon), as well as the need to place the sign smack dab in the middle of the door. Even then, it’s likely an inferior design for the vast majority of staffers since everything from its color to its icon violates the cultural expectations of exit signs.

It’s interesting to note that “Way Out” signs (The British equivalent) are also frequently labelled in “caution” colors. Despite the article’s implication,  green (“affirmative”) and soothing is often not the color scheme that you should use when you need to direct the user’s attention to something important.