UX DESIGN

User Interface 101: The Good, the Bad, the Basics

User Interface de­sign, or UI de­sign, is a fairly re­cent term for one of the old­est de­sign prac­tices. At its core, UI de­sign is about the struc­ture and aes­thetic of a web­site or soft­ware. It dif­fers from the lay­out de­sign one might en­counter in a pub­li­ca­tion by virtue of be­ing in­ter­ac­tive. For ex­am­ple, when you read a mag­a­zine, in­for­ma­tion is pre­sented to you as the pages are turned, but there is­n’t much more you can do with the mag­a­zine aside from read it or put it down.

User Interface Basics

When you visit a web­site you have choices about what but­tons to click, what videos to watch and in what or­der you per­form those tasks. As such, good UI de­sign is not just about look­ing great, it’s also about care­fully ar­rang­ing el­e­ments so that users can fully ex­pe­ri­ence the web­site or soft­ware in the way the prod­uct owner in­tends. This also brings up the ad­di­tional point that UI de­sign is of­ten con­fused for User Experience, or UX de­sign. While there is sig­nif­i­cant over­lap be­tween the two dis­ci­plines, ul­ti­mately UI de­sign is fo­cused on the vi­sual craft of de­sign in a tech­no­log­i­cal con­text, whereas UX de­sign fo­cuses on the over­all ex­pe­ri­ence a user has on a par­tic­u­lar plat­form. Generally, the goal of a UX de­signer will be to en­sure the soft­ware gets a user from Point A to Point B with min­i­mal frus­tra­tion, so that users not only en­joy be­ing on the plat­form but are likely to re­turn and even be­come ad­vo­cates of that soft­ware.

Therefore, UI de­sign is a crit­i­cal piece of the puz­zle to­wards en­sur­ing a ded­i­cated and on­go­ing user-base for your web­site or soft­ware ap­pli­ca­tion.

The Good

Let’s start with Apple’s web­site. This is a great ex­am­ple of what is called min­i­mal­ist de­sign, and shows how ef­fec­tive it can be when it comes to show­ing your prod­uct.

Image

Similar to what you might find in a mod­ern art gallery, the space sur­round­ing each art­work or con­tent block is sur­rounded by gen­er­ous amounts of neg­a­tive, or empty space. This breath­ing room nat­u­rally makes users fo­cus on the con­tent with­out dis­trac­tion, and is a sim­ple way to cre­ate so­phis­ti­ca­tion in any de­sign. The fonts are tightly con­trolled and dis­play a hi­er­ar­chy of in­for­ma­tion. Although there is colour and vi­brancy in the de­sign, this is due to the prod­uct pho­tos or il­lus­tra­tions and not due to any use of dec­o­ra­tion in the un­der­ly­ing struc­ture.

On the other side of the coin, we have Vanity Fair’s cur­rent web­site, which beau­ti­fully il­lus­trates the mer­its of max­i­mal­ist de­sign.

Image

The look and feel of a news­pa­per has been trans­lated to a dig­i­tal for­mat, with the use of dif­fer­ent, but com­ple­men­tary fonts, and dec­o­ra­tive el­e­ments such as swirls and ar­rows. Even though there are a lot of things to look at in this de­sign, it is not at all busy or dis­tract­ing. This is be­cause the de­sign­ers have utilised a grid sys­tem to struc­ture out this page such that your eye moves smoothly across the con­tent as you scroll. This is ex­actly the same tech­nique which graphic de­sign­ers ap­ply to pub­li­ca­tion de­sign.

The Bad

Everyday there are new de­signs to be in­spired by, but un­for­tu­nately, there are also plenty of prod­ucts which are suf­fer­ing from poor de­sign choices. Remembering that UI de­sign is all about sup­port­ing the func­tion of an ap­pli­ca­tion, these clunky aes­thet­ics can se­ri­ously hurt the way a prod­uct is used and per­ceived. In some cases, par­tic­u­larly for web­sites pro­vid­ing es­sen­tial or gov­ern­ment ser­vices, this can have le­gal ram­i­fi­ca­tions. For ex­am­ple, there ex­ist to­day plenty of reg­u­la­tions which man­date wheel­chair ac­cess at mu­nic­i­pal build­ings. In sim­i­lar fash­ion, the Web Content Accessibility Guidelines, or WCAG, are an in­ter­na­tional stan­dard which help de­sign­ers en­sure that the prod­ucts they cre­ate are more avail­able to peo­ple with dis­abil­i­ties.

Poor UI de­sign is of­ten not only vi­su­ally un­ap­peal­ing but cre­ates im­ped­i­ment to the use of that prod­uct. In many coun­tries, le­gal frame­works ex­ist to en­force ac­ces­si­bil­ity guide­lines on soft­ware which is pub­lic-fac­ing. To avoid the stress and costs of re-de­sign­ing an ap­pli­ca­tion to fit with WCAG, the sim­ple an­swer is to pri­ori­tise thought­ful and ac­ces­si­ble UI de­sign from the very be­gin­ning of that ap­pli­ca­tion’s life­cy­cle.

If you want to learn more about set­ting your prod­uct up for suc­cess through­out your ap­pli­ca­tion’s lifestyle, down­load our Guide to Creating a Successful Software Product be­low.

Do’s

  • Choose an aes­thetic which matches your brand and the mes­sag­ing you want to con­vey.
  • Be bold and brave in your de­sign choices.
  • Pick qual­ity over quan­tity every time. One pro­fes­sional pho­to­graph is bet­ter than ten stock im­ages.
  • Use a grid-sys­tem to cre­ate an un­der­ly­ing struc­ture for your lay­outs.
  • Ensure that your prod­uct is ac­ces­si­ble and com­plies with the WCAG.

Don’ts

  • Put con­tent on a page just to fill the space.’
  • Use low-con­trast or in­ac­ces­si­ble colour com­bi­na­tions for your text.
  • Only use im­ages to con­vey in­for­ma­tion un­less there is an al­ter­na­tive way to view that in­for­ma­tion.
  • Use flash­ing im­agery, colours or other me­dia which could cause seizures.
  • Eyeball’ a lay­out in­stead of us­ing grids.
  • De-prioritise UI de­sign dur­ing the cre­ation of an ap­pli­ca­tion or web­site - it is es­sen­tial to the suc­cess of that prod­uct.

Good UI de­sign is­n’t rocket sci­ence. It re­ally comes down to giv­ing the users what they want, which is gen­er­ally an easy to use, stream­lined ap­pli­ca­tion/​web­site. The ba­sic prin­ci­ples men­tioned in this ar­ti­cle are good ways to sat­isfy your end users. A UX de­signer can help im­ple­ment these prac­tices and en­sure your user in­ter­face does­n’t lead to any of these mo­ments.

We also aim to avoid any of those mo­ments when cre­at­ing your soft­ware prod­uct. Contact us here for fur­ther dis­cus­sion.

ABOUT THE AUTHOR

Rhiannon Stevens

Creative sto­ry­teller and ex­pe­ri­ence ex­pert

Get cu­rated con­tent on soft­ware de­vel­op­ment, straight to your in­box.

Your vi­sion,

our ex­per­tise

Book a con­sul­ta­tion