Latest Tweets

Ditch the Rainbows

| 10.1.2014

Color is becoming more important than ever. With the increasing popularity of flat design, designers are less able to rely on 3D buttons, drop shadows, and other crutches that used to make functionality apparent.

Of all the formal elements of design, color hits the fastest and hardest. Color communicates the mood of a website or application in a fraction of a second, long before we grasp the semantic content. Color has the power to clarify or confuse how a user is meant to interact with a digital environment and with great power comes great responsibility.

I see a lot of websites and apps where the designers just went overboard with color, either splashing it all over the place like Jackson Pollock, or pulling an Ellsworth Kelly and filling the entire page with a garish monochrome. Using just the right amount of color is harder than it might seem. Here, I’ll share some examples of effective and ineffective color use to help you make wise chromatic choices in your own designs.

Why Less is More

We’ll get to websites in a moment, but first let’s think about information design more broadly. Information design is the art of foregrounding what’s essential, while backgrounding or removing what isn’t. Take maps for example. Like websites, maps present a lot of information in a small space, and cartographers must make very shrewd color choices to maximize signal, and minimize noise. But, like web designers, they don’t always get it right. Here’s a map that visual information guru Edward Tufte singled out for its egregious abuse of color in his book Envisioning Information (Graphics Press, 1990):

What’s wrong with this map, aside from locating Alaska just to the left of Juárez? Whoever did the inking took the “more-is-more” approach. All colors are equally saturated, and the background blue is the dominant hue, pulling the eye away from the central information at every opportunity. Within the landmass itself, every swatch is bright and loud, and, aside from the inherent attraction of red, no single element stands out from the others. This map has failed to foreground anything.

Tufte, the visual information expert, advocates a sparing use of color, ideally against a muted background. See how the structure and function of the buildings and fields in this city plan leap out to announce themselves to the viewer:

When color is used with precision and purpose it brings focus to pertinent information, while leaving enough breathing room to temper the distraction of background noise.

Using Color in Interaction Design

Judicious use of color is even more important when it comes to designing screens a user is meant to interact with. When we are looking at a web page, typically we are not just soaking in its aesthetic beauty; we are looking for something. The job of a designer is to figure out what things the user is most likely looking for and make those things as apparent as possible, or in the case of marketing sites, to direct the user where you want them to look.

Let’s look at an example from Target’s homepage.

Now this is not really fair because Target’s branding is all red, which presents considerable challenges. I’d like to pause for a moment and point out that all colors are not created equal. From the bright arterial blood coursing from a wounded centurion’s neck to the vermillion glow of fires in the night, the color red is permanently imprinted in our collective psyche as a sign of urgency and danger.

The UI designers at Target do not appear to have gotten that memo.

See how the search bar and side nav are superimposed over the header bar in shades of crimson and burgundy that are only slightly off from the carmine red of the top navigation bar. This red abuse is exacerbated by the excessive prevalence of highlighted text, “free shipping”, “free returns”, “15% off”, “TV sale.” There are fires everywhere! The eye is drawn hither and thither with nowhere to land. I have no idea where to click. I’m paralyzed.

Old Navy, bless their hearts, does a much better job.

Like the city plan we looked at before, this site avoids clutter with plenty of whitespace. Best of all, they use highlights in a meaningful way. The exact same shade of red, an unsaturated scarlet, is consistent throughout the design, creating a harmonious visual relationship between elements that are actually related. In this case the large color block explains the details of the sale “5 Must-Haves to fall for”, which are then referenced with the red numbers to the right of the model. The subtle highlight of “BOYS” on the main nav stands out in sharp relief from the surrounding elements and reiterates the relationship between the selected item and the displayed content. Good job team!

The Perils of Flatland

A flatter design aesthetic can be a beautiful thing. When done well, it accentuates the expansive space afforded by the widescreen display and offers a distinctly modern functionalism to web design. But the impulse to overuse color presents real danger to a site’s legibility.

When thinking about how to use color in your interface designs, I urge you to consider how you are drawing the eye around the page. Like a well-designed workflow, good use of color whisks a user through an interface so smoothly that they barely even notice it is there.

Jesse Day is an intern at Sliced Bread and the author of Line Color Form: The Language of Art and Design.


How Apple Broke Call Waiting in iOS 7

| 02.5.2014

I recently upgraded my iPhone to the new 5S and downloaded iOS7. I’m enjoying some of the changes (finally, automatic app updates!). But the other day, while driving to work, I experienced one design change that wasn’t just disappointing – it was downright panic-inducing.

I got a phone call while I was on another call. I glanced down at my phone and was confronted with this screen:

Huh? Quick – which button do I press to answer the call?

I felt the pressure begin to build. I tried to keep my eyes on the road while reading the small print on both the “Answer” buttons. By the time I’d finally made sense of my choices, my call waiting had already gone to voicemail.

Had Apple even tested this new design at all?

My initial confusion with this screen hasn’t improved over time. These buttons trip me up every time I see them. Answering my call waiting – a common task I’ve never had problems with – now causes me to panic, especially if I’m driving.

Let’s look more closely at the old screen and its wordy, flattened replacement.

Why was the old design so much better?

Here’s what Apple did wrong in their new design:

  • The options look too similar. The top two buttons are both titled “Answer.” They look identical at first glance, requiring users to read the small text in order to distinguish between them.
  • There’s too much text! The old design used fewer than half the words to present the same three options.
  • It’s too easy to accidentally end my current call. The “End current call” option is listed first, is no longer red, and could easily be mistaken for the “Hold current call” button. Apple’s designers seem to have changed their minds about which option they think people will use the most. I can’t speak for everyone, and I haven’t seen their research, but personally I’d rather ignore call waiting rather than accidentally hang up on the call I’m already on.

What Apple got right:

  • The grouping makes much more sense. I do like that that the new design groups the two “answer” buttons and separates them from the “decline” button.

Here’s how I’d improve the new design:

Here, I’ve emphasized the differences, not the similarities, between buttons. I’ve kept the text large and readable. And I’ve kept the words to a minimum.

My advice to fellow designers: Imagine people using your product while they’re distracted, multi-tasking, or in a hurry. How can you use color and text to make all the options clear in a single glance?

Flipboard: A tale of tough choices

| 06.20.2011

I recently had a discussion with Mike McCue, the CEO of Flipboard, on how he and his team managed to get things so right with the Flipboard design. In particular, I was interested in how they were able to balance functionality with delightful, polished, user experience features.  Mike’s answer was very simple  — they had to make some very tough choices and a lot of cuts. Their goal with Flipboard was to communicate to first time customers the potential of the product and have them yearning for more. Mike explained that when people used Flipboard for the first time, he wanted them to think, “Yes, I get it! And it would be even better if…” Consequently, they cut all but the most important functionality for their v1. For example, Flipboard was a news reader but didn’t have full RSS on first launch; it only supported some predetermined feeds. Also, it had a Twitter reader but didn’t let you post tweets. These types of painful functionality decisions allowed time to implement the polish to the interaction that Flipboard is known for – gorgeous visuals, subtle animations and a magical, contextual user experience.  Flipbooard’s goal was that people would become so enchanted by the experience on first use, that they would be willing to wait for more complete functionality in v2.

This approach clearly paid off for Flipboard, but it’s a difficult one for many companies to embrace. We frequently have conversations with clients who try to cut user experience features and polish in order to put in more functionality.  Many of our clients ask us why they can’t have a product that works like an iPhone. If you remember when iPhone first launched, it also had all the polish and a limited set of features that were far less than current market leaders like RIM or Palm. However, by capturing people’s imaginations with amazing user experience, they were able to buy some time to round out their feature set in subsequent releases.

The lesson? Creating a beautiful, compelling, polished user experience for v1 takes guts. You have to be ruthless with your feature set and treat the user experience features as equal to the core functionality when planning your roadmap. We’ve often seen companies who have great design ideas cut those ideas at the last minute to squeeze in one more feature so it’s not a lack of ideas that’s at play here. It’s a matter of priorities.

Infographic: How much do employers pay for healthcare?

| 10.17.2009

We’re excited to share the infographic we designed for the Intuit Health Benefits Center project to answer this question.


In July 2009, Intuit conducted a survey with over one thousand small business owners in California asking about the health insurance options they offered their employees and how much they were paying for health insurance plans. From prior discussions with business owners, we knew employers were very interested in finding out the results of this survey, as they wanted to remain competitive with other businesses in their industry. We decided that an infographic would be the perfect way to transform our huge collection of data into a single, compelling visual.  Our goal was to create a comprehensive infographic that would be instantly meaningful and easily understandable to the many employers looking to get a handle on the best way to offer competitive insurance packages to their employees.

Sound easy? Not exactly. Like most aspects of design, it turns out that creating infographics is a tricky business – on the one hand, we had to be careful not to present too much information so as to be overwhelming, but on the other hand, our infographic had to be able to provide enough detail to be useful to a wide range of employers looking for very specific information. And, of course, we had to do all of this without getting bogged down in the details or jargons of health insurance plans that often don’t make sense to someone at first glance who isn’t in the healthcare industry.

Here are our top design principles for creating an infographic:

1) Focus the infographic around a single, key question

We centered our infographic around the fundamental question new small business owners cared about most: “How do my health insurance costs compare?” Then, to answer this question, we created an infographic design to breakdown some of the important specifics – like employer and employee costs by region, and the average employer contribution.  We placed secondary information, such as the various plan types offered by employers, on the side of the infographic and used subtler visuals so it would not to compete with our key message.


2) Identify a visual metaphor to help expose differences quickly

We wanted viewers to be able to notice variations in data quickly, as this is the fundamental power of a good infographic. Consequently, we came up with helpful visual metaphors that allowed us to visually represent plan costs by region in two ways. First, we used a heat map of California to indicate employer costs so viewers could quickly see regional differences at-a-glance. Second, we displayed horizontal bars that corresponded to the relative costs by employers and employees per region so viewers could visually compare differences in amount.


3) Use minimal text, and rely on visuals to tell the story

We wanted to keep our infographic clean and simple by requiring minimal reading, so we included a visual key for our chart at the bottom of the infographic to help keep the text and fine print to a minimum.


Overall, our quest to create an effective infographic helped us to double-deliver to our client —  we not only revealed interesting findings, but also presented the findings in a ready-to-go format that met the needs of the employers Intuit wanted to reach.  We’re excited to share our newest piece of healthcare artwork with you, so take a look and let us know what you think!

Trends in CommArts Annual

| 01.20.2009

I just received the annual Communication Arts Design Annual, which is the compendium of the best print graphic designs of the year. What does this have to do with interaction design you might ask? Well, if you are in the business of creating great experiences that people want to interact with, you are in the business of making things look good for your audience as well as be easy to use.  We subscribe to CommArts because we want to know what the latest visual trends are so we can create the right experience for each design project, whether it’s in order to create a hot, modern experiences or deliberately steer away from what everyone else is doing. Trends in the print world bleed into the digital world and vice versa. Here are the trends that I noticed that people should know about:

1. Large font as the primary graphic element

This trend was is rampant in all categories and was is sometimes blended with other trends I discusselements below. Oversize font was is treated as the primary visual theme and communicatesd the brand, often in black or another primarybold color.


2. Bright primary colors

Flipping through the pages, in a cursory way  I was struck by the brightness of the designs. Bright, saturated colors were are overrepresented…sometimes complimented by black or dark brown. Pastels and muted tones were are almost missing. Orange was  is  the most prominent color – used alone or in combination with other bright colors.


3. Physical objects

Many designs mimicked real physical objects in an unusual space. Aqualtis unusual bag for advertising the ability of its wool and cashmere clothing line to be thrown in themachine washing washed machine set the standard for other designs to come including large brands like Tommy Hilfiger and Coke. and many other novel uses of real goods.  Sometimes, as you can see in the Kresge annual report below, the large type theme was combined with a physical object to have both trends represented.