Author Archive

Three steps home pages

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

sunnygram

Blurb

blurb1

Poll Everywhere

poll_everywhere_steps

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

fansnap

Seatwave

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

lovefilm1
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

ilovebefore

After – 3 Steps with a No Late Fees sticker

iloveredesign

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

fansnap_before

After – clear languag and graphics

fansnap_redesign

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.

  • Share/Bookmark

Yummly & iConstituent

Economy be damned, we’ve just started working with 2 new clients in really interesting spaces.

yummly_logo

Yummly is a start up looking at the intersection of food and the internet.  They’re in stealth mode so that’s all we can say for now but we’ll keep you posted.

iconstituent_logo

iConstituent is a more established company that provides email communication solutions to congresspeople. We’re working with them on a visual refresh followed by a more comprehensive user experience redesign.

We’ll post pix of our latest work as soon as we can.

.

  • Share/Bookmark

Intuit Health Benefits Center

After a few months of working with Sliced Bread to develop the concept, Intuit has just launched the initial version of  its health benefits center. This new experience is designed to help small businesses in California learn about choosing the right health insurance plan for their company.  Sliced Bread Design did all of the interaction and visual design for this Adobe Flex site. Intuit did the implementation.

home

In addition to learning about the different health insurance options, the site also presents the results of a survey Intuit has been conducting of what health benefits small businesses offer their employees.  Finally there is a place on the web where you can go to see what employers like you are doing for their employees — a feature we think is pretty neat.

others_choose

Needless to say we have worked hard with Intuit on the information design for this site to make complex insurance verbiage more transparent. We are very excited about how it has turned out and are even more excited about what is in the works for the future so keep checking back to watch it grow.

plantypes

You can also join the feedback group (link at the top of the site) if you want to be in the group of customers we’re working with to make sure that we create a site that really works for users.

http://www.intuithealthbenefitscenter.com/

  • Share/Bookmark

Trends in CommArts Annual

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.

image1

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.

boldColors

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.

RealLife

  • Share/Bookmark
Categories: Visual Design

Pattern Exploration: Carousel

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.

cartoonnetwork2

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:

yahoo1

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.

amazon1

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.

mooflow1

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.

imageflow2

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:

  • Share/Bookmark