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!
https://benefits.intuit.com/content/infographic.pdf
I’m a big advocate of lazy registration. Lazy registration is the concept that you don’t have a sign up form on your site but instead let the user try out your site for as long as they like and ask them for user data as part of their natural trajectory. This results in an experience full of open inviting doors.
The key is providing users with a reason to give you the registration data you’re looking for. If you’re site is good enough to do that (and if it’s, than that’s a bad sign), you’re golden.
How to make this pattern work:
- Let the user enter as much data as they want wherever they want to do it
- Then, to let them save their data, choose from one or more of these solutions:
- Provide a Save or Submit button that on click asks them for their email address to register
- Provide a link that they can save on their own to get back to their data
- Save their data automatically via cookies so that when they revisit your site, the data is still there
Examples
Picamatic, an image hosting service, is a fantastic example of lazy registration.
A user can upload their images and can then either copy and paste a link to that image on their own:
Or click Save these images to get emailed a link to the images:
Asking after data entry
Another good example is the way that commenting works in blogs. It’s only when you enter a comment that you are asked for your email address to register.
Similarly, on sites like Stackoverflow , when you ask a question, then you are asked to enter in your email address at the bottom of your post:
On GetSatisfaction, when you’re done entering in your question, you get a pop-up after you hit submit that asks you to register:
Cookies
Cookies are another key to lazy registration. See how much info you can keep for the user when they come back to your site. If you’re an ec-ommerce site you should be saving anything the user adds to their shopping cart. You can also save items they visited, searches they did, etc.
Kayak is a great example which retains searches you’ve made and saves them to your account when you do register.
Now go out there and rid your site of those registration black holes.
Open Table recently introduced a new mapping feature that displays restaurant info. Putting info on a map is a solved problem. Google, Yahoo! and many other sites have successfully mapped information with mouseovers and Open Table could have easily reviewed these sites and put together a design that capitalized on best practices. Instead, the Open Table interaction is awkward, resulting in an experience that is difficult and unwieldy. Sigh. Let this be a lesson to those putting together mapping interfaces on what you should and shouldn’t do. Here’s our list of key mapping tips:
- Allow the user to close boxes they opened on click. This is the most important tip here. In Open Table, when you click on a map marker, it opens a window that covers up the other restaurant markers on the page and there is no way to close it. Sometimes I noticed at random times the window would close on its own, but it did not have an X in the corner so was super annoying.
- Visually connect the pop-up with the map marker. As you can see in the screenshot above, Open Table does this quite subtly. The map marker in the middle has a black outline and a slightly brighter white spot. Uh-uh. This is not the time to be subtle. POINT to the marker that the hover refers to so that the user does not have to remember.
- Consider if you need to have both on hover and on click interactions. If you present different info on hover and on click, make sure that there is a reason why you are not presenting the info on hover to start with. Check out the difference between on hover and on click in Open Table:
On hover
On click
Note that the box does not get bigger on click, leading me to wonder why they don’t just display the time info on hover. Even if the times sometimes wrapped to a second line as shown below, it’s still a pretty small box.
On click, 2 lines:
- Display the information in in an order that makes sense. This tip, of course, applies to anything you design. In the screenshot above with the four times, Open Table is displaying 6 and 8:30 PM at the end of the line, presumably because you get more points for going at those times. I’m used to time data being display chronologically. I dunno why. Must be something about the fact that it’s time.
A Good Example
Now for an example of what we consider a good map interaction. A while ago we designed a map interaction for hotels for Yahoo! that never got launched so I’ll share it here because it illustrates the points above. Here’s how it works:
On hover is simple with just the hotel name:
The on click pop-up reflects all the recommendations from above:
This solution is elegant and informative. If only we could see the same at Open Table.
I’ve noticed a trend recently of home pages for various web services having a three step layout. The goal is to describe your service with three simple steps. A few examples:
Sunnygram
Blurb
Poll Everywhere
This pattern is becoming pretty rampant and with good reason — it’s effective. If you have a site that is providing a service in a new or unique way, you need to explain to your prospective customer why you are special very quickly. I can’t even tell you how many sites I visited in the course of doing research for this article that I could not figure out. The three steps design approach provides a framework for communicating uniqueness in a clean, simple format.
For example, screenshotted below are two sites that do very similar things — ticket search. Fansnap uses the three steps approach to describe what they do and why they do it better than others. Seatwave highlights an event at the top and then provides a browse interface below.
Fansnap does a better job educating their visitors about what is so special about their ticketing site. In contrast, Seatwave is just another ticket site — I’m not sure why I would use it over eBay or StubHub which are more well known.
Fansnap
Seatwave
But is three a magic number? Why not four steps?
Four steps starts to feel like a lot. Let’s look at this four step example from LOVEFilm.com – the British version of Netflix.
LoveFilm.com
Four steps starts feeling complicated — I can’t just scan and move on. Do they really need that third step –”Watch it at your leisure with no late fees”? It seems like they could combine it with step 4 pretty easily. Then maybe they could have a big sticker or something that says “No late fees!”
Check out this super quick redesign I did reducing the steps from 4 to 3:
Before – 4 steps
After – 3 Steps with a No Late Fees sticker
2 Pitfalls
As with every good pattern, there are ways that you can mess it up:
1. Avoid empty sound bites
In the quest to have 3 catchy pieces of information, don’t reduce your something to nothing but buzzword fluff. Fansnap is trying to be clean by sticking with three words: Compare – Choose – Click. But, on first glance it’s a little confusing what they are talking about and why they are unique. Basically, they search across a bunch of sites (like kayak.com except for tickets) and then offer a cool UI to compare the seats so that you can get the best seats at the lowest price. Handy. Here is a redesign of the language and graphics that keeps the simplicity but doesn’t force the user to think:
Before – empty language
After – clear languag and graphics
2. Put the numbers close to the words
In the original FanSnap above, the numbers are buried in the graphic. This makes me wonder at first if the items below are steps or just three features. In the redesign I’ve put the numbers next to the words and suddently it is clear that this is a quick, fun process.
So, to make a long story short, three steps is an interesting design pattern for quickly communicating the essence of your service to your prospective customer. Next week, I’ll delve into the sister pattern of 3 steps which is 3 features.
I recently encountered a common design question while working on an intranet redesign project, “Should web links that point to PDFs and other non-web documents open in a new window?” Poking around the web to see what examples or standards I might find on the topic, I found an article by Jakob Nielson titled “Open New Windows For PDF and other Non-Web Documents.” Jakob’s article offers guidelines that I thought made a lot of sense, but one of them I disagree with and I offer an alternative here. Also, I provide an example of a good hyperlink format at the end.
A summary of Jakob’s viewpoint is: “When using PC-native file formats such as PDF or spreadsheets, users feel like they’re interacting with a PC application. Because users are no longer browsing a website, they shouldn’t be given a browser UI.” And, because users frequently close document windows, it’s a good idea to open the document in a new window. Here are the 4 guidelines for linking to non-Web documents he suggests:
- Open non-Web documents in a new browser window.
- Warn users in advance that a new window will appear.
- Remove the browser chrome (such as the Back button) from the new window.
- Best of all, prevent the browser from opening the document in the first place. Instead offer users the choice to save the file on their harddisk or to open it in its native application (Adobe Reader for PDF, PowerPoint for slides, etc.).
While I agree with the first three guidelines above, the fourth one I do not. My experience observing many users is that they find this type of behavior extremely annoying. Thinking from their user’s point of view, why would I want to take the additional time to either load a file in its native application or save the file to my hard drive (where I would then also have an extra file hanging around on my machine), when I could just have easily clicked the link and had it open more quickly in a browser window? While searching the web, or my intranet, I may not even know whether the link I clicked is something I am actually interested in until I’ve had a chance to look at it. Therefore, I’d like the process of opening the file to be as quick and easy for me as possible.
Instead, I suggest replacing this fourth guideline with a new one:
New Guideline #4: Display the file extension in the link name.
For example, if a link points to a PDF file, the link name should read: Link name (pdf). This practice supports the other guidelines by giving the user the context to understand why a new window with no browser chrome opens when clicking the link. And, it does it in a nice streamlined way.
Alternatively, an icon can be used to visually represent the file type instead of showing the file extension in text, but this may be distracting and/or messy if there are many links to PC-native files listed on the page, such as the pages I encountered in the intranet design project. And, an icon may not work as well if you are already using a different icon to warn users that a new window will appear.
Lastly, I had really hoped Jakob’s article would provide a few examples of what an appropriate hyperlink format looks like. Since this helpful piece was missing from the article, I thought I’d include it here:
- Examples of what NOT to do
- Example A:
- Example link one
- Example link two
- Example link three
- These links are missing their file extension, and a warning that the links will open in a new window.
- Example B
- Example link one
- Example link two
- Example link three
- These links use an ambiguous icon to warn the user that a new window is opening. For example, the icon could also be interpreted as a link to an external site. The file type icon is also a bit confusing when positioned next to a second icon for the same link.
- Examples of what to do
- Example A
- Example link one (pdf)
- Example link two (doc)
- Example link three (pdf)
- These links follow the convention I suggest here.
- Example B
- Example link one (opens new window)
- Example link two (opens new window)
- Example link three (opens new window)
- For user populations that really need things spelled out, you could be even more direct, by putting text like “opens new window” instead of the file extension. In this case, an icon with the file type is very helpful.
Carousels are a useful mechanism for showing multiple, individual pieces of visual information when you do not have the space to show them all at once. Like a real carousel, a carousel widget presents eye candy in a circle that the user can spin (i.e. navigate) one direction or another to get to more stuff.
The three primary uses are (1) selecting an image from a longer list , (2) Advertising different pieces of rotating contet and (3) navigating to content areas that can be represented by a consistent visual object such as an album cover for navigating music or a photo for navigating user profiles.
Carousels often inject a sense of fun in your interaction, especially if you can use animation as part of the widget.
How to use a carousel
Use it for visual content
A carousel is not appropriate for navigating between textual information. For example, here is a carousel to navigate through cartoons at www.cartoonnnetwork.com. If you go try out this carousel, you’ll notice that they’ve added a nice physical animation so that when you go to another part of the carousel it spins forward and then back a bit. Nice.
Communicate the size
If you can’t see the size of the carousel, it’s nice to communicate to the user where they are in the queue. Here’s one on movies.yahoo.com – not as fun as on the cartoon network but still does the trick:
Make it fun and compelling
Use animation and/or dimension to guide people through your carousel and give it a sense of fun. This carousel is a widget that Amazon.com offers it’s associate sellers to place on their site. You can take it for a spin here.
Consider how many items to include
If you have a flat carousel (like the Yahoo! one above), have no more than 5 panels of content. For a 3-D carousel like Amazon’s, limit yourself to about 10 items. If you have a carousel like is found in itunes Coverflow or in the screenshot below from MooFlow, you can have unlimited items as images on either side fade into the background as you scroll.
Add more functionality as needed
If you want to add more functionality to your carousel, you can allows users to select items in your carousel to get more information. You can also have controls appear over the selected item on mouseover. This screenshot below is a hacked carousel from DMXZone.
Where to get your own carousel
If you want to prototype a carousel on your site, here are some places you can go to get some carousel plugins:
