User Personas & Wireframes : The First Ten Seconds

By Charles B. Kreitzberg, Ph.D.

Through a combination of brilliant marketing and careful SEO, you finally got your targeted user to your site. Now your visitor is about to see your landing page for the first time.

Online, you have just seconds to capture a visitor's interest before they hit the back button and find your competitors. While there are no hard and fast rules to guarantee success, approaching the design carefully can help create the stickiness you need.

When users come to your site for the first time, their goal is to understand what you are offering and how they can benefit. So the landing page must convey that information in a format that is easy to comprehend.

As with all Web design problems, the best place to start is by understanding the user. What is your best guess of who will come to your site and what are their expectations?


PERSONAS FOCUS YOUR DESIGN

A good way to get a handle on your visitors is to create two or three personas that describe the main user segments you expect to visit. A persona is a brief fictional biography that captures the essence of the individual you are targeting. Creating personas can be a complicated process. Large companies spend a great deal of effort researching and creating personas. But you can benefit from simple, quick personas based on your knowledge and best guesses. I call these "assumptive personas," because they are based on assumptions rather than data. But even without hard data they can be surprisingly helpful in focusing your design.

As simple as these personas are, you can see how they make the users more concrete. When creating personas, it's always best to talk to actual customers or prospects. If you can't do that, try talking with secondary sources - people who know the actual customers well. In our example, good secondary sources might be travel agents. Once you have created the personas, show them to knowledgeable people who can help you refine them.


FIRST IMPRESSIONS

When users first encounter your site, they will form an immediate first impression. Some of the factors include:

The visual design - does the site look interesting? Are the graphics appropriate for the audience? Bob and Sandy, for example, are unlikely to appreciate a grunge style. (see box below)

The information architecture - is the information organized so that its structure is immediately understandable or does it take too much effort to figure out what's important?

The site's mission - does the site proclaim its purpose or does the user have to figure it out?

Imagine we are creating a site for people looking to find bargain vacation cruises. You might come up with these three personas:

	Susan, age 24, engaged Susan is getting married to Greg in a few weeks and would love to honeymoon on a cruise ship. Susan and Greg are on a budget so she wants to find a fun cruise with interesting ports of call at a reasonable price. "I want to able to find a romantic cruise for my honeymoon that we can afford.
	Lisa, age 50, single Lisa is an adventurer. She wants to cruise to interesting and unusual places. She would prefer to be with many other singles so she will have a choice of people to talk to. "I love seeing new places. I like nature a lot and I'm an avid photographer. I'm still friendly with some of the people I met on past cruises."
	Bob and Sandy, age 66, married Bob and Sandy are newly retired and are looking for long cruises at a bargain price. Because they are not working, they can take advantage of last minute discounts. "We're retired now and want to spend time vacationing with each other and occasionally with our friends. We prefer a cruise with others like us.

The goal for the first 10 seconds is to orient the users, make them feel that the site is worth exploring, and get them to click on a link and go deeper in the site. An exciting visual design will get you a few seconds of initial attention but unless your visitors engage with some-thing on the site, they'll soon move on. So creating engagement is the initial design goal.


WIREFRAMES

Many designers produce wireframes in a highly schematic form with no graphics. There is a good argument for doing this. If you are not a skilled graphic designer people you show the pages to may not get the full picture. In addition, when you pass the wireframes on to a visual designer, your initial attempts at graphic design may bias the designer and you might end up with a less creative design.

Despite these arguments, I generally use some graphic elements in my wireframes. There are two reasons for this:

1. I need to see the site with graphics so that I can gauge my own reaction to it and refine the design. The visual design affects the user's behavior and I want to understand what elements are important for the particular site.

2. Customers and others I show the wireframes to may not be able to visualize how the design would look without some graphics.

I use clip art because I'm not an artist. Then, as soon as I have a first-draft wireframe, I get a visual designer to work up two or three treatments. Once customers see a professionally produced "comp" of a page or two, they are reassured that the site will look good and that gives me more leeway on the wireframes.

Another technique that I sometimes use is to create a few pages with the customer's input. Since we are working together, the customer sees and helps select the clip art. However, many good designers are not comfortable with this approach, finding it too hectic and without enough time for reflection.



A wireframe is a first draft that sets positions for all the engaging elements and
serves as a guide for the designer, who will take it to the next level

THE LANDING PAGE WIREFRAME

Remembering that our goal is to create engagement within 10 seconds, at the top of this page is a wireframe that I created for our fictitious discount cruise company.

It's not very exciting from a visual perspective - that will be the job of a visual designer. In selecting visual designers, I look for highly talented artists, often with training in the fine arts who also understand how to create usable design. It's important that the visual design make it clear which elements on the screen are interactive. For example, I'm fine with the artist replacing my ordinary but easily recognized underlined blue text links with something more interesting - as long as it remains clear which text is clickable. It's also important that all buttons or controls are obvious and that all text is readable (including by people with less than perfect vision –- a group that includes everyone over 40).

Other design elements in the wireframe that I want to preserve in the visual design:

1. Initially the visitor will probably focus on the area below the main menu, because the background picture is visually stronger than the header. Because the background photo presents a single, easily recognized scene, the visitor does not have to interpret a lot of small visual elements but can focus on the text.

2. The phrase, Fabulous cruises at discount prices," positions the site's mission in one, easy-to-comprehend phrase. On another site I might have chosen to make the phrase more descriptive but that can make the screen busier, competing for the user's attention.

3. The most obvious visual element on the page is the group of three buttons offering three types of cruises. These buttons, of course, were derived from the personas I created at the outset. This is where I want the user to focus in the first 10 seconds. If the personas are correct, there is a good chance that visitors will click on the button that reflects their interest.

Because of their importance, I have made these buttons brighter and more visually intense than other elements that might compete with them. Their shape, size, and arrangement create a cohesive visual grouping for the buttons. I used faces to decorate the buttons, because the human face is visually compelling and tends to attract attention. Hopefully, my visitor will identify with one of the faces, and this will improve the chances of a click.

Because not all users are looking for cruises that fit what three buttons offer, I have provided a secondary area with text links. It is designed to be a bit less obvious than the three buttons so it doesn't compete with them. My intent is to capture visitors who are not engaged by the main offer and who go on to scan the remainder of the screen. Note the simple and large text so the visitor won't have to work hard to find a link of interest.

As you can see, a great deal of thought went into the design of this landing page. I'll make sure that the design works as intended with some simple, informal usability testing. The wireframe is a first draft and while it is a solid and usable design it's neither exciting nor innovative. Getting to the next level will require more thought and more work. As design is a team sport, not a solitary activity, I will seek input and ideas from others to make the site really stand out and increase my chances of keeping a user on the site for more than a few seconds - ultimately leading to a conversion.


About the Author: Charles B. Kreitzberg, Ph.D. is founder and CEO of Cognetics Corporation, a company that, since 1982, has created award-winning interactive designs. Charlie has designed user interfaces for such diverse products as automated teller machines, medical software, and knowledge systems as well as served on the national boards of the Usability Professionals Association and the Society for Information Management.