The Per­fect way to plan your site

It takes more than cre­ativ­ity to de­sign a great site. Anna Stout runs down five crit­i­cal steps lead­ing up to the de­sign phase

net magazine - - CONTENTS -

Anna Stout runs through the five crit­i­cal stages you need to fol­low be­fore you start de­sign­ing a site

The clock reads 1:30am and you just want to go to bed. You’re sit­ting at your com­puter, draw­ing shapes, edit­ing fil­ters and ex­per­i­ment­ing with ty­pog­ra­phy but the de­sign just isn’t com­ing to­gether. You move a box to the right. You move it back. You’ve built a ca­reer on cre­at­ing beau­ti­ful and user-friendly web­sites, so why is the de­sign al­ways a strug­gle?

It’s a prob­lem that most, if not all of us have come up against many times in our ca­reers. We call it cre­ative block. And therein lies the prob­lem. Be­cause mak­ing web­sites that peo­ple will find easy to use – web­sites that en­cour­age peo­ple to con­vert – is not about cre­ativ­ity. It’s about plan­ning. And re­search. And putting the end user ahead of the de­sign.

I was a web de­signer and fron­tend de­vel­oper for sev­eral years be­fore I truly be­gan to un­der­stand the im­por­tance of process. I have watched web de­sign­ers – whether they are free­lance, work­ing for a large agency, or some­where in-be­tween – fol­low the same gen­eral se­quence of events over and over again. They have some sort of kick­off meet­ing, and then go back to their com­put­ers and work up site de­signs.

De­spite the pop­u­lar­ity of this ap­proach, it never re­ally works. Even if you man­age to cre­ate some­thing visu­ally com­pelling, there is a 100 per cent guar­an­tee that you’re miss­ing op­por­tu­ni­ties to con­nect with and con­vert users. By im­ple­ment­ing real pro­cesses from which to in­form de­ci­sions as you work on a

web­site, you can cre­ate su­pe­rior prod­ucts, el­e­vate the user ex­pe­ri­ence and in­crease con­ver­sions.

Next time you’re bang­ing your head against the wall in an ef­fort to sum­mon a beau­ti­ful web de­sign from your cre­ative ge­nius mind, try fol­low­ing the five cru­cial steps out­lined here.

Step 1 Sitemap and user flow

You’ve had your kick­off meet­ing. You’ve con­ducted in­dus­try re­search, done a com­peti­tor anal­y­sis and de­vel­oped user per­sonas. You’re ready to get started, but there are two im­por­tant ques­tions you should al­ways ask clients first.

First, ask them to iden­tify their top one-tothree pri­or­i­ties for the web­site. This gives you a good pic­ture of what’s im­por­tant to them. It re­quires that they be­gin think­ing in terms of pri­or­i­ties, which helps to de­velop and keep fo­cus. It also opens the door for dis­cus­sion about what those pri­or­i­ties mean, and if it makes sense to ad­just them.

The sec­ond thing you should ask is this: What does a suc­cess­ful web­site look like to you? This ques­tion is enor­mously im­por­tant as you start to plan the user flow and con­ver­sion goals. Once you have that in­for­ma­tion, you can be­gin to cre­ate a plan for the web­site: the sitemap.

A plan for the web­site

A sitemap is the first vi­su­al­i­sa­tion of the con­tent that will be in­cluded on a web­site, and how it will be or­gan­ised. It is the first step towards a user-fo­cused, con­tent-cen­tric prod­uct. There are two per­spec­tives to ex­am­ine. First, look at the goals of the com­pany you are work­ing for. What are they try­ing to achieve? Next, de­ter­mine what their cus­tomers are look­ing for. It is the mar­riage of these two per­spec­tives that will ul­ti­mately mean suc­cess.

Start think­ing about the types of in­for­ma­tion that need to be present to ac­com­mo­date both the end user’s and the com­pany’s goals. Put the user goals first – it never hurts to re­mind com­pa­nies that what is best for their users is also best for their busi­ness.

For ex­am­ple, if ABC Com­pany has in­vented a new tech­nol­ogy, it makes more sense to pri­ori­tise in­for­ma­tion about the user’s prob­lem the tech­nol­ogy solves than to lead with ABC Com­pany’s his­tory and mis­sion state­ment. You’ll prob­a­bly also want to in­clude con­tact in­for­ma­tion and an in­dus­try-spe­cific blog as a re­source to users. Sud­denly, you have the be­gin­nings of a sitemap.

Nav­i­gat­ing through in­for­ma­tion

As you start to an­swer ques­tions about the gen­eral hi­er­ar­chy of in­for­ma­tion across the web­site, you’ll also be­gin to an­tic­i­pate how users might nav­i­gate through that in­for­ma­tion. This is your user flow.

By cre­at­ing a the­o­ret­i­cal user flow at the be­gin­ning of a project you can start to see how the sec­tions of in­for­ma­tion in­ter­act to cre­ate the ideal user ex­pe­ri­ence. Who are your users? Does the hi­er­ar­chy of in­for­ma­tion make sense for var­i­ous use cases? Will users nat­u­rally be able to move through the web­site to find con­tent that is rel­e­vant to them?

De­sign is not just what it looks like and what it feels like. De­sign is how it works. Steve Jobs

At the top of a blank page, iden­tify your user per­sonas. Be­low each one, start think­ing about how they might move through the site. Con­sider what they might be look­ing for and how one sec­tion of in­for­ma­tion might lead them through the site to the next.

Step 2 THE Cus­tomer ac­qui­si­tion fun­nel

At this point you have al­ready be­gun to the­o­rise about the jour­ney a user will take through the web­site, and have prob­a­bly started think­ing about how that will lead them to con­vert. This is your cus­tomer ac­qui­si­tion fun­nel.

Us­ing the user flow di­a­gram you cre­ated in step one, con­sider how you might be able to di­rect users through the site to a point of con­ver­sion. To cre­ate a cus­tomer ac­qui­si­tion fun­nel, put your­self in the user’s shoes. Use spe­cific per­sonas rather than a broad au­di­ence, and tar­get your fun­nel to a par­tic­u­lar per­son. What are their goals? How can you help them achieve those goals?

Imag­ine we are cre­at­ing a web­site for a shoe store. If a user ar­rives at our web­site with the goal

The cus­tomer ac­qui­si­tion fun­nel is what makes a web­site a busi­ness tool

of buy­ing a pair of shoes, our goal is to make it as easy as pos­si­ble for them to do so. An online shoe store should quickly and ef­fi­ciently fun­nel the users through the shop­ping process to check­out.

Cre­ate a plan to en­gage users with rel­e­vant con­tent, ask them to con­vert with a com­pelling call to ac­tion, make the con­ver­sion process easy, and fol­low up reg­u­larly. Cre­ate fo­cus to help guide the user. De­vel­op­ing the cus­tomer ac­qui­si­tion fun­nel is what makes a web­site a busi­ness tool rather than just a pretty pic­ture. De­sign that does not drive re­sults is not good de­sign.

Step 3 Con­tent devel­op­ment

Con­tent is the heart of the web­site. It’s how you con­nect with peo­ple. It’s how you sell. It’s what you base the de­sign on. De­sign­ing a site with­out con­tent is like try­ing to put to­gether a jig­saw puz­zle with­out any puz­zle pieces; you’re just grab­bing ran­dom items nearby (a fork, a light bulb, maybe a cof­fee mug) and try­ing to make them fit to­gether.

Un­der­stand that the de­sign is the fun part for the client. The con­tent is the hard part. Largely be­cause of this, it’s also the num­ber one thing that can hold up a project. These are the rea­sons that a com­plete ver­sion of web­site con­tent should be de­vel­oped be­fore the de­signs be­gin.

So how do we gen­er­ate con­tent? The per­fect way to start is by tak­ing a look back at your sitemap. This is where you have iden­ti­fied the types of con­tent you want to present to users. Use the pages or sec­tions you out­lined here to cre­ate a blank copy doc­u­ment. For each sec­tion in­clude the page ti­tle, the goal of the con­tent, key­words you would like to tar­get,

head­lines, and body copy. In­clude the types of con­tent you an­tic­i­pate liv­ing there and how you ex­pect it to be bro­ken up for easy read­abil­ity and men­tal digestion.

Keep in mind that the ideal read­ing level for web­site con­tent is pretty low. Home­page con­tent shouldn’t ex­ceed a 6th grade read­ing level (around age 11-12), and sub-page con­tent should hover around the 8th grade level (age 13-14). Mil­lion-dol­lar words don’t earn points here, they lose users. You can test your copy with the Flesch-Kin­caid read­abil­ity for­mula to be sure it will be easy for users to com­pre­hend quickly.

Sim­plify and stream­line

An­other great way to make your copy eas­ier to read is with eas­ily-di­gestible con­tent. Us­ing smaller para­graphs and in­clud­ing icons and im­ages to break up your con­tent makes your web­site in­fin­itely more read­able. Rather than pre­sent­ing large bod­ies of text that re­quire an at­ten­tion com­mit­ment you’re not likely to get from users, sim­plify the con­tent and make it easy to skim.

Af­ter you’re done writ­ing, go through and cut out ev­ery sin­gle nonessen­tial word or phrase for op­ti­mal clar­ity. Af­ter you’ve com­pleted this process, go back and do it again – there’s more you can re­move. The bril­liant An­toine de Saint Ex­u­pery, author of The Lit­tle Prince (a chil­dren’s book that ev­ery­one should read) said, “It seems that per­fec­tion is at­tained not when there noth­ing more to add, but when there is noth­ing more to re­move.”

The last and most im­por­tant tip for cre­at­ing web­site con­tent is this: If you are not a copy­writer, hire one. It’s what they do ev­ery day. They can do it bet­ter and faster than you can. They can cre­ate copy that is op­ti­mised for search en­gines, en­gag­ing and gram­mat­i­cally cor­rect.

Step 4 Wire­fram es

Now the con­tent is com­pleted, it’s time to start think­ing about lay­out. Where the sitemap is a plan for the over­all ar­chi­tec­ture of the site that in­forms the con­tent; wire­frames rep­re­sent the ar­chi­tec­ture of that con­tent.

A wire­frame shouldn’t in­clude any colour, font choices or de­sign el­e­ments. It is a tool for or­gan­is­ing con­tent from a struc­tural stand­point, to en­sure it is pre­sented in a way that makes sense for the user. Wire­frames are no longer about pixel-per­fect ren­der­ings of page lay­outs. They are about tak­ing a more gran­u­lar ap­proach to the plan you’ve been build­ing up to this point. In this step, you are dis­cov­er­ing how in­for­ma­tion should

De­sign­ing a site with­out con­tent is like try­ing to do a jig­saw with­out any puz­zle pieces

be or­gan­ised, and so­lid­i­fy­ing the hi­er­ar­chy from a vis­ual stand­point.

In what or­der should con­tent be pre­sented? How will the hi­er­ar­chy present on mo­bile? Desk­top? In-be­tween or over and above? Re­spon­sive web de­sign has ne­ces­si­tated that wire­frames, along with ev­ery other step of our process, be­come less con­crete and a lit­tle more flex­i­ble.

Cre­at­ing hi­er­ar­chy

How you gen­er­ate your wire­frames is en­tirely up to you. There are a lot of great wire­fram­ing and pro­to­typ­ing tools out there, but a sim­ple pen and pa­per can work just as well. The goal of wire­fram­ing is to use the de­ci­sions we have made through the pre­vi­ous steps to es­tab­lish an or­der for the pre­sen­ta­tion of con­tent.

If you look at the con­tent you have al­ready cre­ated, it should be an in­tu­itive process. Is there a clear hi­er­ar­chy that is in­her­ent to your con­tent? Look at head­lines, para­graphs, call­outs and side­bars. Take stock of what types of in­for­ma­tion should ap­pear, and where the fo­cus should fall. Ask: What is the main point of this in­for­ma­tion?

It’s easy to skip wire­fram­ing. They of­ten don’t mean a whole lot to the client, and can seem like a su­per­flu­ous ef­fort – es­pe­cially af­ter com­plet­ing ev­ery other step so dili­gently. Can’t you ac­com­plish the goal of the wire­frame while you’re cre­at­ing the de­sign el­e­ments? In short, no. Wire­frames are the bridge from con­tent to de­sign. They are as im­por­tant to the over­all suc­cess of a web­site as each other step in the process.

Step 5 De­sign

Now for the fun part. The part that you’ve been work­ing for, and your client has been wait­ing for. And you are ready. You are en­ter­ing the de­sign phase armed with a plan of at­tack that is based on in­formed de­ci­sions, not just aes­thetic pref­er­ence. You know where el­e­ments need to be placed for max­i­mum ef­fect. You are now pre­pared to de­sign a con­ver­sion ma­chine!

But how are you de­sign­ing for the re­spon­sive web? Ev­ery de­signer has a dif­fer­ent work­flow,

You en­ter the de­sign phase armed with a plan of at­tack based on in­formed de­ci­sions

and you have to find what suits you. Still, there are a few method­olo­gies and tools that are ef­fec­tive and easy to adopt across the board.

Re­spon­sive method­olo­gies

If your web­site will work on mo­bile, you should be de­sign­ing mo­bile-first. This sim­ply means be­gin­ning with a mo­bile lay­out and build­ing from there. It is far

eas­ier to do this than to try to stack el­e­ments onto a screen that’s a frac­tion of the size of the one for which they were de­signed.

You should also be us­ing a pat­tern li­brary. This is a col­lec­tion of de­sign pat­terns that fea­ture in your in­ter­face. You can move back and forth be­tween your li­brary and de­signs; when you add a new el­e­ment to your de­sign you add it to your pat­tern li­brary, and vice versa. With this ap­proach, re­gard­less of any vari­ables, a but­ton is a but­ton; both in code and the way it looks.

This will es­tab­lish a con­sis­tency in de­tail that will make a re­mark­able dif­fer­ence to the per­ceived level of pro­fes­sion­al­ism of the com­pany. Con­sis­tency builds trust and im­proves us­abil­ity. There’s also an ef­fi­ciency ben­e­fit, be­cause we can eas­ily ad­just el­e­ments and up­date styles.

Plan of ac­tion

By fol­low­ing this guide, you ar­rive at one step af­ter an­other with a fully-formed plan of ac­tion. Each step is in­formed by the steps that came be­fore it. The en­tire process is fo­cused on de­liv­er­ing the most use­ful and rel­e­vant con­tent in the best way pos­si­ble.

You may find that you need to re­visit parts of your plan dur­ing the process or af­ter the site launches. Dwight D Eisen­hower said: “In pre­par­ing for bat­tle, I al­ways found that plans are use­less, but plan­ning is in­dis­pens­able.” It is this sen­ti­ment ex­actly that sums up the im­por­tance of the process – you are plan­ning for a suc­cess­ful out­come. You’re not guess­ing. You’ve es­tab­lished a foun­da­tion upon which you can cre­ate a web­site that works.

Right An As­tute Com­mu­ni­ca­tions meet­ing to brain­storm early con­tent or­gan­i­sa­tion ideas for our own web­site

Left Steve Jobs’ fa­mous opin­ion on the def­i­ni­tion of de­sign

User flow user­flow

pat­terns.com is a col­lec­tion of short user-flow videos for ref­er­ence and in­spi­ra­tion

Con­vert­ing cus­tomers The five phases of a user’s jour­ney to con­ver­sion

Left Chil­dren’s author An­toine de Saint Ex­u­pery had some wise words about how to achieve per­fec­tion

Right A sim­ple tem­plate for a con­tent doc­u­ment. It’s an easy way to start de­vel­op­ing con­tent based on your sitemap

Left You can cre­ate quick and easy wire­frames for free at wire­frame.cc

Right De­signs need to be op­ti­mised to dis­play con­tent as clearly as pos­si­ble across de­vices

Online pat­terns MailChimp’s pat­tern li­brary is view­able online at ux.mailchimp.com/pat­terns

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.