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.

financial-engines

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.

Top 10 Design Thinking FAQs

| 01.27.2016

People looking at a map together.

Design thinking and Sliced Bread go back about 14 years. But, for the last five, I’ve been teaching design thinking at the Stanford d.school and more recently, in the Computer Science department. The same questions about design thinking keep cropping up from clients and students so I thought I’d set the story straight.

1. What is design thinking? 

Design thinking is a human-centered process for solving problems that results in effective, innovative solutions.

It includes a series of specific steps that must be done in a specific order and a set of core principles. The steps are observations, insights, ideas, and prototypes — which are followed cyclically . The principles are empathy, thinking by doing, iteration, and collaboration.

It is a way to radically increase the likelihood that you are going to have success when you’re trying to solve a problem or do something new.

2. Can you describe the steps in the process in detail?

There are many different diagrams of the design thinking process, but our favorite displays it as a circular, iterative workflow that starts at the top left:

Let’s break down the steps:

design thiinking cycle

Design Thinking diagram based on an original design by Michael Barry.

Observations

This step is the foundation of design thinking — user research. Go out and understand what is happening with the problem you are trying to solve by observing and interviewing users. Gather data about the problem by understanding the human stories. The first time you cycle through this quadrant, the type of user research you’re doing is called Needfinding because it’s about understanding user’s needs. This is also the time to interview all the stakeholders involved in this problem — i.e not just those that have the problem, but the folks who understand the business opportunity and the technology options. Subsequent times when you cycle through this quadrant, you’ll do different kinds of observation of your users like rapid experimentation, usability testing, co-creation sessions, etc…

Insights

Once you’ve completed your observations, it’s time to unpack what you learned to find the insights that are going to drive the rest of the process. Initially, your insights will be focused on defining what you are solving for. What stories did you hear in your research that really stick out? What needs did you uncover? What frame will you take on the problem space? In subsequent iterations, insights will be focused on teasing out what you learned from user testing and rapid experimentation to evolve your idea or take it in a new direction.

Ideas

In this step, you take the insights that you’ve gathered and use them to seed a brainstorm. In design thinking, brainstorming is taken to a new level through structured rules which encourage creativity and through the link to real user needs. This is also one of the best steps to incorporate radical collaboration, bringing in people from different backgrounds to help brainstorm solutions from new perspectives.

Prototypes

The final step in the design thinking cycle is about thinking by doing. Stop talking about the ideas and actually make something that people can evaluate and discuss! You might sketch a workflow, build a model, create an HTML wireframe — it all depends on what questions you are answering. You might prototype to explore the idea space for yourself. You might prototype to test some aspect of the idea in the next observation cycle with users. Or you might prototype to convince others to fund the idea. As you move through iterative cycles, the prototypes will become more and more refined culminating in the final solution.

Those are the four steps. Now lather, rinse, repeat.

3. Why is design thinking so effective?

Two reasons:

One, design thinking has a laser focus on the actual, human roots of a given problem. By understanding and empathizing with the distinct human stories underlying a problem, you are able to solve for real needs from the beginning. And, by remaining in touch with users throughout the design cycles, you can stop guessing and make decisions based on actual human feedback.

Two, design thinking provides a defined, replicable approach for a creative process. When followed correctly by skilled practitioners, it virtually guarantees an effective, innovative solution to problems that are simple or fabulously complex and ill-defined. This has been proven many times over by studies at Stanford, well-known companies, and in our own work at Sliced Bread. We don’t want to take on a problem without a guarantee that we will get somewhere great at the end. Design thinking gives us the confidence to offer that kind of guarantee.

4. Is design thinking the only way to solve problems and be innovative?


Of course not. There are many ways to solve problems including sitting at your desk and thinking really hard. This method happens to be extremely effective so we are going with it.

5. What kinds of problems can it be applied towards?

You can use design thinking to solve ANY problem. This includes business problems and personal problems. I used design thinking to help my client think through the process for server installation, to help my child deal with a mean kid at school, and to plan a party. It’s the same process…only the content differs.

6. Who can do it?

Anybody can learn the design thinking process and use it to solve problems. However, at the start not everyone can do it well. For example, little kids can learn the rules and techniques of soccer. However, it’s only through a lot of practice that someone can become a soccer superstar like David Beckham. Just like anything else, the best way to improve in design thinking is through practice and coaching. Getting coach by an expert mentor is the best way to learn. Reading about it is not going to make you better…it will just help you understand the rules of the game.

7. Can I just do parts of it and be successful?

Sure, you can use the tools individually and be partially successful. However, if you are solving a problem soup to nuts, you need to follow the process soup to nuts.

8. Can you do design thinking without initial user research?

No.

9. How do I get started? 

I recommend taking a class or hiring someone (like us) to help you do it. You can read a book to get an introduction, but many of the skills like how to interview people effectively or how to pull out the insights from your interviews can’t be learned without watching others model the right techniques and without strong coaching. If there are no workshops locally, find an online class that will at least give you some examples of how it works that you can watch. Or, better yet, hire someone who can help you walk through the process the first time and teach you along the way. If you hire someone who is going to follow the process to solve your problem, make sure they emphasize the need for you to be involved…otherwise they are breaking one of the rules of design thinking, collaboration.

10. How did you get so good at it?

Two reasons:

One, I  have been doing it for a long time and have been working with the world’s best coaches. Folks like Michael Barry and Pam Hinds who also teach at the d.school, coworkers like the fabulous Mia Silverman, Jenny Mailhot, Kim Ladin, and Molly Wilson who are fabulous design thinkers, and astute clients who ask us why we do what we do and force us to explain our processes. All of this makes you awesome.

Two, I believe in the process. I believe in it so much that I am willing to follow it in many circumstances because I can see the power that it has. When a client tells us they don’t have time for user research, we don’t do the project because we have no way of guaranteeing the results. I wouldn’t want to spend a lot of money on something where I’m not sure if it’s going to work and so we are not going to accept our client’s money under those circumstances.


For more FAQs on design thinking, check out Part 2: Ten more FAQs for the PRACTICING design thinker. 

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.

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:
good-map

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.
target

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.
old-navy

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.

cover41

Passwords are Broken. What’s Next?

| 02.20.2014

A few weeks ago, I wrote about why we need to stop blaming users for choosing dumb passwords: we’ve designed a system that’s basically impossible to use “correctly.”

It’s not all doom and gloom for authentication design, though. I’m heartened to see some new authentication patterns taking hold. Some are entirely new, inspired by the constraints and affordances of new devices. Some are variations on patterns that have been standard in particular industries but are now hitting the consumer market. Plenty of security experts have weighed in on the technical aspects of new authentication patterns, so let’s explore the user experience implications.

How do these emerging patterns stack up? I’ll look at these three criteria:

Are they cognitively reasonable? This is where passwords fail: sign-in systems shouldn’t expect people to do things like remember long strings of random characters.

Do they feel like the right level of security for the situation? Nobody wants to use a thumbprint in order to comment on Facebook.

Are they practical in the expected context? It’s not sensible to use a voiceprint at a noisy DMV office.

The extra layer: Two-factor authentication

In two-factor authentication, users enter a code displayed on one device in addition to a password. This doesn’t replace passwords; it’s a second password, often on a different device.

You can secure your Google accounts with an extra code, displayed on your phone.

Cognitively reasonable? Sure. It’s an extra step, but nothing extra to remember.

Feels like the right level of security for the situation? An extra layer of security is fine, as long as protecting the info feels worthwhile. Right now, two-factor authentication is mostly reserved for email and financial and medical information – and that’s a good thing.

Practical in context? Sometimes. Often, when I’m checking my email at a public computer, I’m in a hurry, and the last thing I want to do is pull out my phone.

image05/

Also, sometimes I want to access email from my phone – and the security code is also on my phone. Using your mobile device to sign onto your mobile device is clunky and doesn’t offer much security benefit.

The bottom line: Save two-factor authentication for when it’s really and truly worth it.

The visual password: Gesture-based authentication

Why type when you can swipe? These techniques let you authenticate with gestures on touchscreens instead of poking at tiny, limited keyboards.

 

Source: cnet.com

Unlocking an Android phone requires users to trace a pattern on a grid of 9 dots.

 

Source: Parity News

Windows 8 offers picture gesture authentication, where users choose a picture and then tap, drag, and “draw” a pattern on it; the picture and the pattern together serve as their password.

Cognitively reasonable? For many people, tapping into spatial memory and muscle memory is a welcome change from remembering passwords.

Feels like the right level of security for the situation? Images and patterns can be easier for a nosy onlooker to see and remember. Android’s 9-dot grid wouldn’t be appropriate at, say, an ATM.

Practical in context? It’s easier and faster than typing a password on a mobile device, since the touch targets are larger.

The bottom line: Best for frequently-repeated, on-the-go situations where people don’t feel they’re dealing with highly sensitive information directly.

The password within you: Biometric authentication

In biometric authentication, characteristics of your body serve as your credentials. On the one hand, it’s hard (though not impossible) to fake, and you’ll never forget it. On the other hand, it’s impossible to change.

Source: Apple

The iPhone 5S can unlock via a built-in fingerprint sensor.

Source: Coursera

Coursera offers an interesting spin on biometric identification by using typing speed and rhythm as an auxiliary identifier. On a site where users are expecting to type a lot of text, asking them to type a sample paragraph wouldn’t stand out as inappropriate.

Cognitively reasonable? Definitely. There’s absolutely nothing to remember; done right, biometrics can feel futuristically seamless.

Feels like the right level of security for the situation? Maybe. Biometric authentication can easily feel intrusive and overly permanent. People won’t want all accounts inextricably linked to their real identities, and that’s okay.

Practical in context? That depends. Designers need to be mindful of what it feels like to use biometric authentication in public, as well as whether the hardware is durable enough to filter out background noise, temperature, moisture, and other environmental factors. Also, biometrics’ permanence can backfire, as one blogger who cut his finger found out when his laptop would no longer recognize his fingerprint.

 

Bottom line: Every step of the way, make sure people feel in control. One false step and biometric authentication gets creepy and obnoxious.


When you’re choosing and designing an authentication system, of course the security of people’s data is top priority. (Or at least it should be – ahem, Snapchat.)

But don’t neglect design, and don’t forget about context. Keep in mind how, when, and why people are likely to need access. Don’t spend your time chasing seamless, space-age, and sexy. To keep people safe and sane, authentication needs to be, above all, appropriate.

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?

Forgot Your Password?

| 01.16.2014

If your password is “password,” you’re not alone. Security analyst Mark Burnett recently harvested a list of publicly available passwords, and 4.7% of them are, yes, “password.”

The picture doesn’t get much better further down the list. 9.8% of the passwords Burnett found are either “123456,” “12345678,” or “password.” 40% of all passwords appear in the top 100 passwords, and 71% of all passwords appear in his list of the top 500.

The narrative most people take away from this is that we don’t understand passwords or security in general. “Most Common Password List Shows Shocking Lack of Imagination of Computer Users,” writes the Huffington Post. This massive population of tech-illiterate dim bulbs needs our help, goes the thinking; if they don’t choose better passwords, they’re all going to have their email hacked and their bank accounts drained – and, some might say, serves them right for using “password” as a password. They seriously need to get their act together.

From a designer’s point of view, though, the problem isn’t stupidity, laziness, or a lack of education about security. As user experience designers, we don’t treat users as the problem when a system doesn’t work. If 91% of students failed a test, wouldn’t you assume that the test was the problem?

Soon, we’ll be able to do better than passwords, both in terms of security and usability. The best emerging solution may be one that combines elements of passwords, images, gestures and biometrics, as a recent article by Eben Kaplan in Information Security Journal proposes. But right now, we’re stuck with passwords. It’s unlikely you’ll be able to authenticate yourself at the bank by tracing a custom pattern around an image with your eyes while your retina is scanned anytime in the next few years.

But even though we’re pretty much locked into the password paradigm, we can still improve the authentication experience. If you’re thinking through a site or an app, here are a few straightforward design practices you can use right now.

Don’t impose maximum lengths. People are used to minimum lengths. But there’s no design or security advantage to limiting their passwords to fewer than 10 characters. Charles Schwab is one of the worst offenders, limiting passwords to 8 characters.

Allow copying and pasting in password fields. When people use a password manager to create super-strong passwords like, say, “x@#nSA9*g$HsoPNW(qov,” don’t punish them by making them type that gibberish out by hand.

This one may be unpopular, but here goes: on small mobile devices, don’t obscure the letters that are already typed. It’s hard to get the letters right on a tiny keyboard, and leaves people confused about whether they’re misremembering or mistyping their passwords. As anybody who’s ridden a city bus knows, it’s much easier to visually eavesdrop on a large laptop screen than a tiny, hand-covered mobile screen.

Finally, be careful with content restrictions. Allowable passwords vary wildly across the internet.

Amazon has no restrictions at all.

Amazon password entry

 

Google requires 8 characters and disallows dictionary words.

Google password change

 

PayPal requires 8 characters, including 1 special character.

PayPal passwords

 

And the California DMV requires… well, see for yourself.

CA DMV passwords

 

You’d think websites with annoying password policies would feel the sting of user abandonment and shape up. Unfortunately, websites with frustrating, arcane password policies are likely to be the ones you can’t avoid. Researchers at Microsoft found that websites that need to attract and retain users (think Amazon or Paypal) are much less likely to enforce stringent password rules as websites where users don’t have a choice (think DMV).

We want users to pick different passwords for different sites, but we drive them crazy when we constantly switch up the rules. We want them to pick strong passwords, but they frequently don’t (and then we ridicule them).

Is it time to give up on passwords? Check out my next post, a designer’s eye view of some emerging authentication patterns.

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.

Tips for Improving Greenbox’s Energy Portal

| 12.9.2009

A recent SmartGridNews.com article praised Greenbox Technology for “deliver[ing] understanding to utility customers.” While Greenbox does provide useful functionality that differentiates it from its competitors, key improvements to its interaction design would go a long way to provide a better overall user experience.

1_greenbox_original

The Good

To be fair, Greenbox does deserve a gold star for displaying energy data specifically in dollars ($).  As I mentioned in an earlier post, consumers don’t understand energy units, such as kWh, and are motivated to change their behavior by saving money.

costs_dollars

The Not So Good

But, what about the rest of the Greenbox design?   Greenbox gets caught up in the same usability pitfalls I’ve seen in other consumer energy portals as well –too much information and not enough direct reference to the things that matter most to users.  Here are my top three suggestions to help Greenbox, or any consumer energy portal, deliver an excellent user experience:

1) Simplify, simplify, simplify!

My foremost suggestion is simplicity. At first glance, the Greenbox interface looks very busy. There are many controls and buttons, and it tries to accomplish too much on a single page. Do users really need to be able to adjust their thermostat controls right on the main landing page, and also view their overview and data details at the same time? Instead, the home page could show only the most important information at first glance, and use color to further highlight and differentiate content on the page. The user can always drill-in to inside pages to access the less urgent information or access info on mouseover.

2) Engage users immediately with compelling content and proactive recommendations

My first response to the Greenbox dashboard is, “So what?”  I’m missing context to understand the significance of my data. For example, is my overall usage good or bad? Am I using more or less energy than I did last month? Am I on track so far this month? Also, the portal doesn’t offer any suggestions for changing my behavior so it’s unclear what my next step should be.

To engage its users, Greenbox should focus on delivering insightful content that immediately provides context and motivation. Delight users by anticipating their questions and displaying answers at-a-glance. Provide simple charts and visuals on the dashboard to compare energy usage to different time periods and to others in the community so that people understand why this information matters.

3) Adhere to basic design principles

In addition to overall experience enhancements, here are some basic user interface guidelines to help GreenBox or any other site be more usable:

  • Use clear titles Is the bar chart below showing data for all energy resource usage, just the electricity usage, or only heating and cooling (because that’s what is selected in green)? It’s hard to know for sure without a clear title for the chart.

title

  • Use visual cues to help users appropriately group related itemsThe content relationships on GreenBox are a little hard to parse.  For example, in the screenshot below, the “Heating/Cooling” button selected on the left side of the dashboard, actually updates the content shown on the right side, which is not immediately obvious.

similarity_before

Instead, GreenBox could make these two items more visually related to connect them. For example, put the same  green border around the box on the right and give both elements the same background color (see update below). Then, I would be much more likely to quickly understand their relationship.

Updated design with green box:similarity_after
  • Visually identify hyperlinks & interactive featuresTo help users understand what’s clickable, it’s important to differentiate hyperlinks and interactive features from other static elements on the page. For example, on the GreenBox site buttons and links currently use the same dark text color as other static elements, which makes them difficult to identify.

buttons_and_links

A Minimal Redesign Idea

If we take the recommendations above and do a very minimal redesign of Greenbox limiting ourselves to only minor changes to content and layout, we already begin to see large improvements in terms of usability.

updated_design

For example, in this minimal redesign, the relationships between content is clearer due to stronger visual cues and use of titles, the interactive elements more readily “pop” from the page, and inclusion of arrow icons begin to tell an interesting story about the user’s energy consumption.

But we’re not done yet…

Of course, it would take GreenBox more than just a simple redesign with no change in functionality to address all of our recommendations.  As a next step, I think Greenbox would benefit to take a more critical look at its overall structure and content to ensure they lend themselves to a good user experience – in particular thinking about the best items to put on the home page and trying to answer the question “So what?”

Will we see a new and improved Greenbox site in the near future?  We hope so.  In the meantime, let’s learn both from the things that Greenbox does well and from the areas that Greenbox falls short so that we can continue to focus our energy on creating intuitive, meaningful, and persuasive user experiences.

 

Related post: Watts all the buzz about smart grid energy?

6 Reasons Users Hate Your New Feature

| 11.13.2009

You spend months on a new feature for your existing product: researching it, designing and building it, launching it. Finally, it’s out in the world, and you sit back and wait for all those glowing comments to come in about how happy your users are that you’ve finally solved their biggest problems. Except, when the emails, forum posts, and adoption data actually come in, you realize that they hate it.

There is, sadly, no single reason why your new feature failed, but there are a number of possibilities. The failure of brand new products is its own complicated subject. To keep the scope narrow, I’m just going to concentrate on failed feature additions to current products with existing users.

Your Existing Product Needs Too Much Work

Ah, the allure of the shiny new feature! It’s so much more exciting to work on the next big thing than to fix bugs or improve the user experience of a boring old existing feature.

While working with one company, I spoke with and read forum posts written by thousands of users. I also used the product extensively myself. One of the recurring themes of the complaints I heard was that the main product was extremely buggy and slow. The problem was, fixing the bugs and the lagging was really, really hard. It involved a significant investment in infrastructure change and a serious rewrite of some very tricky code.

Instead of buckling down and making the necessary improvements, management spent a long time trying to build new features on top of the old, buggy product. Unfortunately, the response to each new, exciting feature tended to be, “Your product still crashes my computer.  Why didn’t you make it stop doing that instead of adding this worthless thing that I can’t use?”

Now, you obviously don’t need to fix every last bug in your existing offering before you move on and add something new. You do, however, need to be sensitive to the actual quality of your product and the current experience of your users before adding something new. You wouldn’t build a second story on a house with a shaky foundation. Don’t tack brand new features onto a product that has an unacceptably high crash rate, severe usability problems, or that runs too slowly for a significant percentage of your users.

Before you add a new feature to a product, ask yourself, “Have I fixed the major bugs, crashes, and UX issues that are currently preventing my users from taking advantage of core features?”

Your Product Interface Is a Giant Mess

Remember the old Saturday Night Live spoof commercial that advertised, “It’s a floor wax! It’s a dessert topping!”? It’s not as funny when it’s true. Products cannot do everything, and when they try, they end up with interfaces far too complicated for the average user to navigate.

I see this happen all the time, especially with startups looking for a way to make their product appeal to more people. Instead of improving their core product and adding features that enhance that experience, they add unrelated feature after unrelated feature, often stolen directly from more successful companies with larger user bases. Their goal is to find something that makes them blow up huge, but they just end up with an overly complicated product that tries to do too many things and doesn’t do any of them well.

It’s not just startups that suffer from this. Products that have been around for many years often get bogged down with feature after feature, all of which have to be supported because some fraction of the user base still uses it. These products then become vulnerable to new challengers with more focused, easy to use interfaces and smaller feature sets.

Of course, there are times when companies have to take their products in a new direction. For example, Flickr started as a set of tools for an MMORPG called Game Neverending. The game has ended, but Flickr lives on as an entirely different business.  PayPal began as a way to make PDA to PDA mobile payments, but that feature got killed years ago when they realized that web payments were a far better business model.

When you do find that killer feature that’s going to change your whole business model, commit to it and make it a serious focus rather than burying it under dozens of less popular features. Don’t try to be all things to all people, or you will end up with nothing but a giant, unusable mess.

Before adding a new feature, ask yourself, “Does this enhance my current product experience or just add to an already confusing and cluttered interface?” And, if it doesn’t fit with your current product offering but you still want to do it, ask, “Am I prepared to cut other features to make this part of my core offering and simplify my experience?”

You Didn’t Build What They Asked For

Let’s face it, sometimes your priorities are different from your users’. For whatever reason, be it a new business partnership, a need for a new revenue stream, or the desire to attract a different group of users, sometimes you’re going to build something that your current users don’t want and didn’t ask for.

This isn’t always a bad thing. For example, something that annoys your current non-paying users but attracts a whole slew of new, paying users is worth a few nasty emails to your customer service department. Just make sure that the new feature is really going to do what you think it will. It sucks to piss off your current, paying customers to build a feature that never really fulfills its initial promise. Trust me on this.

Before building a feature that potentially has more benefits to your company than your current users, ask yourself, “Am I prepared to deal with the fact that this is going to annoy some of my customers, and what is the real likelihood that I will get more out of this than I will lose?”

You Built EXACTLY What They Asked For

I know. It doesn’t seem fair. They’re angry if you don’t do what they want, and they’re angry if you do what they want.

The truth is that users will often ask you for a solution when it would really be more helpful to tell you that they have a problem. I’ve written more extensively about when you shouldn’t be listening to your users, but the upshot is that users aren’t great predictors of which brand new features will be big hits. Sometimes users will tell you that they want a toaster in their car, when what they really mean is that they don’t have time to make breakfast in the morning.

Before building a new feature that your customers are demanding, ask yourself, “What known user problems is this solving, and is this the best way to solve it for everybody?”

The Feature’s Not Finished

Now, I’m all for building the minimum viable product, getting it out in front of users, and then iterating on it to improve it, but some features just aren’t ready for prime time. By launching a half baked feature without key functionality, you’re running the risk of turning a lot of people off on the idea before they ever get a chance to really try it out.

Remember, your customers aren’t in the conference room with you when you come up with your grand vision. They don’t know where you’re going with this neat new idea. They’re judging the feature based on their first experience with it. Make sure that the first version is at least usable and hopefully that it’s far enough along that users can see the same promise that you do.

Also, good enough to ship doesn’t necessarily mean good enough to remain in your product long term. A big part of shipping early is continuing to improve the feature once it’s been out for awhile. One company I worked with had the tendency to ship early versions of features and then let them just sit there gathering dust, rather than iterating on them until they were truly high quality. What they ended up with was an enormous product that all seemed about half finished and a lot of unhappy customers who didn’t believe features would ever improve past version 1.0.

Before shipping a new feature, ask, “Is this good enough that users will get why they should care about it? And, if they do care about it, am I committed to improving it?”

The Feature’s Not Finishable

At many of the companies I’ve worked with, features have tended to evolve before they even get built. What generally happens is this: you have an idea based on something you’ve heard from users; that idea gets brainstormed and grows based on internal input; UX and visual designers spec out the whole idea, often expanding on the original idea; then engineering gets involved and gives a time estimate of how long the feature will take to build; finally the whole thing gets cut back by about 80% based on the estimates.

Unfortunately, the 20% you end up implementing may not solve the original problem. That means, when you finally announce your great new feature, users who originally asked to have that particular problem solved are justifiably upset.

Before drastically cutting your new feature back, ask yourself, “Does this still solve the original problem I was trying to solve?” If it doesn’t, ask, “Can this problem be solved with a reasonable level of investment?” There’s no shame in answering no to either or both of these questions, as long as you decide not to go forward with the new feature.

The Secret to Making Everybody Love Everything You Make

I’m joking. There’s no secret. The truth is that it’s almost certainly impossible. But by asking yourself the right questions during your feature development phase, you can dramatically cut back on time spent creating things your users hate.

And never forget, when you do build something they hate, acknowledge it, apologize for it, and fix it. It will go a long way toward making your users happy again, and it might even get them to like that neat new feature you just shipped.

Interested? You should follow me on Twitter.

For more information on the user experience, check out: