Wire­frames vs flow­charts

net magazine - - PROJECTS WHIMSICAL -

Wire­frames and flow­charts are ba­si­cally di­a­grams cre­ated early on in the de­sign process as a way of de­vel­op­ing the core UX of a de­sign.

A wire­frame is the skele­tal struc­ture of a screen (or se­ries of screens) that show the con­tent and user in­ter­face in its most ba­sic form. Fun­da­men­tally, wire­frames con­sist of text, lines and shapes. They are de­signed to help de­velop the most im­por­tant as­pects of us­abil­ity, ac­ces­si­bil­ity and the over­all user ex­pe­ri­ence be­fore start­ing to think about visual aes­thet­ics.

When de­sign­ers re­fer to mid-fidelity de­sign (or some­times low-fidelity de­sign), they’re of­ten re­fer­ring to creat­ing wire­frames. High-fidelity would be con­sid­ered fairly de­tailed with the ad­di­tion of colour, fonts and other visual aes­thet­ics. We‘d typ­i­cally move up to screen de­sign tools for that.

But how do we de­cide which con­tent to dis­play on which screens? How many screens do we even need? We need to plan our de­sign first and this is ex­actly where flow­chart tools be­come a tremen­dously use­ful as­set in a de­signer’s tool­box.

With the func­tional re­quire­ments of a de­sign al­ready in mind (col­lected from user re­search ear­lier on in the process), or­gan­is­ing the con­tent and func­tions in a way that cor­re­sponds with the user’s men­tal ex­pec­ta­tions (i.e. ac­cord­ing to how users ex­pect them to be or­gan­ised) is much eas­ier when we’re map­ping out the de­sign with log­i­cal, easy-to-un­der­stand di­a­grams that il­lus­trate the user flows and ar­chi­tec­ture of in­for­ma­tion.

We do this with what’s called a sitemap, de­picted as a flow­chart that de­scribes the breakdown of func­tions and in­for­ma­tion across var­i­ous screens, as well as how users might flow from one screen to the next as they digest this in­for­ma­tion and com­plete their ob­jec­tive in log­i­cal steps.

By us­ing flow­charts to map out our de­sign first, we’re en­sur­ing that when we be­gin wire­fram­ing the screens, we know what we’re wire­fram­ing and the spe­cific role that each screen plays in help­ing the user com­plete their ob­jec­tive.

cus­tomer jour­ney maps to map ex­ist­ing apps and web­sites, don’t use con­nec­tors to il­lus­trate user flows that aren’t be­ing taken.

Ob­serv­ing in­sights

If creat­ing a cus­tomer jour­ney map, there’ll be in­sights to reap where cer­tain touch­points might in­di­cate a UX flaw.

In our on­line store ex­am­ple, we re­alised that while users were reach­ing the ebook screens as de­sired, they weren’t ac­tu­ally buy­ing the ebook un­til three to 16 days later, lead­ing us to be­lieve that we may be los­ing cus­tomers who for­get to come back and buy them. Our map has helped us iden­tify an area of in­ter­est. We can then make the de­ci­sion to in­ves­ti­gate this the­ory dur­ing user tests.

Fast-for­ward a lit­tle more, we found out (via the user tests) that cus­tomers are of­ten too busy to prop­erly as­sess the value of our ebooks and end up ei­ther book­mark­ing the web page or leav­ing it in their browser tabs for later. An­other user flow told us that cus­tomers who im­me­di­ately check out tend to do so on a Satur­day, when they’re less busy.

So, in this next step we’ll use wire­frames to de­sign fea­tures that help users re­mem­ber to go back and buy the book when they’re less busy. Note: aban­doned cart re­cov­ery is use­less here be­cause cus­tomers aren’t ac­tu­ally adding ebooks to their cart.

Create wire­frames

Wire­frames are used dur­ing the low-fidelity and mid-fidelity stages of de­sign – they’re for ex­per­i­ment­ing with ideas when we haven’t quite fig­ured out the user ex­pe­ri­ence yet.

In the case of the store, we even­tu­ally came up with two ideas. One of the ideas was to add a flash­ing fav­i­con to catch the user’s at­ten­tion and re­mind

them that the browser tab still ex­ists – this fea­ture is for those who keep the web page in their tabs with the in­ten­tion of go­ing back to it later. The other idea was to de­sign an on-site ‘re­mind me later’ fea­ture.

Nav­i­gate back to the home screen (in Whim­si­cal), and this time se­lect “+ Create Wire­frame”. You’ll no­tice that creat­ing wire­frames isn’t too dif­fer­ent to creat­ing flow­charts. We still have many of the same ob­jects avail­able and plac­ing/ar­rang­ing/styling them on the can­vas is much like any other de­sign tool. What’s dif­fer­ent is that we have two new ob­jects:

El­e­ment: E Frame: F

El­e­ments are pre-made wire­frame com­po­nents that save us the has­sle of hav­ing to mock up com­mon de­sign el­e­ments such as ta­bles, but­tons, menus and so on. Frames are like art­boards, used to rep­re­sent a spe­cific de­vice screen or browser win­dow.

I couldn’t find any­thing to rep­re­sent a browser tab, but a generic-look­ing but­ton did the trick. Sim­ply se­lect el­e­ments, then click to add them to the can­vas as with other ob­jects. Next, mock up the re­quired screens as wire­frames. We de­cided to opt for a ‘Re­mind me later’ text link that ap­pears along­side the call-to-ac­tion but­tons, which then re­veals a modal where the user can set up an email re­minder. Re­mem­ber to use con­nec­tors to con­vey how the user flows be­tween these screens.

Col­lect feed­back

Next, we need to col­lect feed­back. Don’t worry about how the wire­frame looks, as long as the con­cept is easy to un­der­stand for those of­fer­ing their feed­back (that be­ing said, Whim­si­cal makes the wire­frames look quite im­pres­sive). Click the share icon in the top-right cor­ner, then choose Get Sharable Link, ac­ces­si­ble from the drop-down list. Give this link to any­body that wishes to weigh in with their thoughts and feed­back.

To add a com­ment, first click on an ob­ject on the can­vas, then click the com­ment icon from the con­tex­tual tool­bar. Com­ments can be replied to (creat­ing a thread) and then re­solved when amend­ments have been made or mat­ters have been cleared up. We can do this sev­eral times, it­er­at­ing over and over and col­lect­ing feed­back each time un­til we’re sure that the user flow, in­for­ma­tion ar­chi­tec­ture and over­all UX is top-notch.

Com­par­ing wire­frames (left) vs flow­charts (right). Flow­charts help to map out the de­sign be­fore wire­fram­ing them

Above A cross be­tween a user flow map and a cus­tomer jour­ney map, made with Whim­si­cal’s flow­chart tools

Above A mid-fidelity mockup that was made us­ing Whim­si­cal’s wire­frame tools

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.