Latest Tweets

2 minute guide to creating the perfect dashboard

| 10.12.2016

At Sliced Bread we have seen and designed A LOT of dashboards. Dashboards for CRM, energy, IT, farming, social — you name it. Unfortunately, most dashboards we see out there fail the snooze test. They are just presentations of data that is available, rather than presentation of actionable data that is useful.   

So, how do you create a useful, usable, meaningful dashboard? When you design your dashboard, it must do THREE things really well to be successful.

1. Answer a real question

Don’t display data just because you have it. This is the number one problem with most dashboards. Data should only be displayed on a dashboard if it is answering a real question that users of this dashboard actually have.

For example, “You have walked 2,520 steps today” is useless data. Have you ever met anyone who has actually asked the question “How many steps have I walked today?” unless they are a professional shoe tester? The real question is probably “Have I had a good amount of exercise today for someone in my physical condition?” or “Have I walked enough today to overcome the chocolate cake I ate for lunch?” or “Has my walking today helped me reach my exercise goals?” Providing answers to those questions might involve analyzing data related to steps, but the steps data on its own is meaningless and boring.

Most dashboards we see are more about data trivia than useful information because they are not actually presenting the right data about the right question.  In fact, data is usually only interesting when compared to other known facts in the world that position the data contextually — for example steps compared to the average for someone your age, steps compared to your exercise goal for the day, calories burned in terms of chocolate cake, etc..  Before you start any design work, be crystal clear on the top  questions users have when they arrive at your Dashboard and write those questions down somewhere big on your wall. And, by the way, the question “What data is available?” doesn’t count.

2. Explain what is going on with the data

Fancy charts are great and can be very compelling for showing trends. However, fancy charts are even more effective if you pair them with a plain english explanation of what is going on.  No one wants to think.  One sentence that says what is happening is all you need.

And, don’t forget to tie your explanation directly to the chart displayed. I used to work at a startup that provided investment advice about 401k’s to regular folks. The company came up with a chart to show the likelihood of having enough money to reach your goal. It was a fancy histogram that exactly 0% of people understood in user testing.


A chart that no-one understands.

We added a simple bracket and plain text next to the histogram. Suddenly 100% of people we showed this to understood what was going on. Magic? No, just basic communication.  

Financial Engines with a bracket.

The bracket tied the forecast to the chart, and the text communicated the bottom line. Everyone in testing understood this chart.

3. Provide next steps

Actionable dashboards spur you to ACTION.  You should predict what the most common actions might be after someone views your data and offer gateways to those actions.  For example, truly interesting dashboards often tell you about something you didn’t expect. So, the next step after seeing the data might be to understand why this is happening. You could start answering the “why” question right there for your user or provide links for further exploration and explanation.

For example, if you had a dashboard showing that energy use was going up and was higher than the same time last year, you might also explain that the weather was warmer than usual or that the air conditioner was possibly broken. These threads would help your user decide on next steps to address the data. You might offer links to other areas of your product, buttons to start workflows in response to the data, drill-ins that open up more information inline. Whatever. Give your user some options — OR ideally, do some user research and give your user the most common ONE option to help them down the path to action.

Does your dashboard make the cut?

Take a critical look at your dashboard. Does it look like this?

Typical complex dashboard

A dashboard with an overwhelming mishmash of data forces the user to work hard to reach their own conclusions and do anything actionable.

Or like this: 

Clear dashboard.

This dashboard excerpt answers a clear question, explains what is going on, offers hooks to answer why, and provides a link to do the next step.

Make sure your dashboard answers real questions, explains the data, and provides next steps, and you will be well on your way to empowering your users with data.

Innovative Health Technology Launches at Health 2.0, User Experience Still Lacking

| 10.27.2015

Our favorite solutions from this year’s Health 2.0 conference Launch session all covered very different angles of the healthcare industry. The following solutions, which launched at Health 2.0, are ones that, although their designs still need refining, we think have strong potential to be successful based on their innovative concepts.

  • Gliimpse – aggregates all your healthcare services (primary care physician, pharmacy, dentist, O.B., etc.) into a single health record. Think of it like a Mint for healthcare, a solution that gives you a comprehensive view of your health history. You can view results from tests in visual format and drill down to see the history. You can take notes on things you want to discuss with your doctor, and upload images or documents and then share your record with your doctor or a family member. Although we found their UI still needed work, the concept is one that we think the market is ready for.
  • Vivor – helps people with cancer find and connect with financial aid programs in order to find funding for cancer treatments. As medical care costs skyrocket and less people are able to afford expensive treatments, we think this service will help give some patients ease of mind that there is financial help out there and they have it at their fingertips.
  • Sensentia – How many times have you had to scroll through endless PDF files to figure out if a treatment was included in your health plan? Sensentia is an interactive tool that not only gives a natural language explanation of your insurance benefits but also tracks your usage and deductibles. Users can search in natural terms, like “Is physiotherapy covered in my plan?” and get a relevant answer. We think this type of self-service solution will appeal to users and can succeed as long as the user interaction is smooth.
  • MedWand – In the realm of health-on-demand apps, we think MedWand is an interesting one to watch. Patients can communicate with their providers via video and, with the help of a device called MedWand that they keep at home, doctors can take their patients’ vitals and assess their eyes, ears, nose, and throat remotely. The key to their success will be to move away from just focusing on the hardware and also in becoming a viable option for providers, who are still finding virtual visits to be less efficient. Nailing the UX for patients so that they use the device correctly will also be key. 

In spite of these very innovative ideas, as Dr. Robert Wachter pointed out during his presentation, the lack of user centered design is the biggest issue in healthcare tech at the moment. Although some players like Accordion Health and Athena Health clearly get the importance of design, and it shows, most of the healthcare tech industry has some catching up to do.

Top Healthcare Tech Trends From Health 2.0 2015

| 10.21.2015

A team from Urban Design and Planning Company attended Health 2.0 2015 earlier this month and the first thing that was obvious was a decreased presence of wearables and devices from last year’s conference. This year was more about  innovative ideas on how to leverage the data that comes from all these new devices, as well as consumer solutions that offer patients health-on-demand, and solutions for providers that aim to alleviate the hassle of administrative tasks, such as entering information into medical records.

Some of the trends we observed at this year’s Health 2.0:

  • Big data…what now?

Big data was the big craze last year and at Health 2.0 2014 we found that companies were focused on the technical discussions around how to handle all this new data and integrate it with existing healthcare systems. Providers were not enthusiastic with the prospect of more patient data, but tech companies were up for the challenge and went ahead and built a myriad apps to analyze all of the health care data out there such as Ayasdi, Sentrian, and Healthline. Technical hurdles have indeed been overcome, however, we feel that the user’s perspective was missing from these solutions.  What are users supposed to do with all this new, aggregated data? Accordion Health was one of the rare standouts in this space, taking a very user focused approach to data analysis.

Also, the availability of new data sources raises a number of design (and ethical) questions. When a patient’s data from his wearable device is added to his chart, the patient will expect the caregivers to be able to digest and make sense of all this new data, alongside, say, his EKG. But who is responsible for this data and who is looking at it? Should doctors be trained to analyze this data? Is it too much information? Are some apps just collecting data for data’s sake?

  • Health-on-demand

This year we saw a surge in the number of apps that facilitate the care provider coming to you, either via text or video, like MedWand, Doctor on Demand, and VSee. While serving a patient need, providing convenience and timely access to care, the challenge ahead with these services is on the provider side who report that these virtual visits are, in fact, taking longer than office visits. With a 30% shortfall in primary care providers these days, these services could be putting a stress in the system instead of doing the opposite.

The question is, why are remote visits taking longer and how can they be improved? We also haven’t seen any data on adoption rates of these services nor how effective they are at addressing patient needs, aside from the increased convenience.Inflatable Bounce House

  • Provider focused apps

At a time when providers are spending 44% of their time recording notes and data into EHRs, it is high time that people look more closely at this problem. One band-aid solution we heard was the use of Google glass to record patient visits which are then entered into EHR through trained transcribers. Augmedix was a good example of this. 

However, the real culprit here is horrible EHR UIs. In fact, Dr. Robert Wachter, the keynote on Day 2 noted that one hospital advertising for a doctor stated that they don’t have an EHR as a value add.  A couple of our favorite EHRs at Health 2.0 2015 were EMA from Modern Medicine, an iPad app for visually entering patient data during patient visits, and Athena Health’s new secure texting app integrated into it’s Clinicals product.  However, most of the products we saw demoed had so much potential to be better. The question here is when will the time spent on bad technology interactions be so egregious that mainstream companies like Epic and eClinicalWorks (who, by the way, demoed a new UI that was “eh” at best) will be forced to spend money on creating a great user experience because their customer base has rebelled.

Overall, while some companies have identified compelling solutions to real problems in the healthcare industry, we did leave this conference with the unsettling feeling that healthcare doesn’t get UX…yet!

User experience design, a practice that has been around for decades, applies research methodologies to look at how to best design products that users will actually use – a simple but powerful concept. There are challenges, but I am optimistic that things are changing and the next gen solutions will put the needs of patients and providers at the center of their products.


Read more on our Health 2.0 takeaways: Innovative Health Technology Launches at Health 2.0, User Experience Still Lacking


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. It’s also imprtant to view other system around the world un-biasedly, our media gets carried away with the ways of other countries, when I lived in the EU I could get my EHIC card easily and without all the pain of socialism that we Americans believe exists.


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.