UI Design Principles : 20 Essential Rules for User Interface Design

This essential primer distills the critical principles of User Interface (UI) design to 20 fundamental rules. Created by Josh Porter (Director of UX at HubSpot), this guide is a must-have for UX / UI professionals.
These principles are equally valuable to those looking to understand User Experience and User Interface best practices in a quick, well-written and comprehensive deck.
Examples:
01 - Clarity is job #1
02 - Interfaces exist to enable interaction
03 - Conserve attention at all costs
04 - Keep users in control
05 - Direct Manipulation is best

These and the rest of the 20 principles offer basic rules supported by reasoning that is intuitive, makes sense and builds on the information in preceding slides.

The Cliff Notes Bible of delivering great, effective & powerful UI experiences.

1. Principles
UI Design
Todesignismuchmorethansimply
toassemble,toorder,oreventoedit;
itistoaddvalueandmeaning,to
illuminate,tosimplify,toclarify,to
modify,todignify,todramatize,to
persuade,andperhapseventoamuse.
-Paul Rand
“
“
Director of UX at HubSpot, Co-founder @performable, Founder @bokardo& Co-founder @52weeksofux
Joshua Porter

2. Clarity is job
Clarityisthefirstandmostimportantjobofanyinterface.Tobeeffectiveusing
aninterfaceyou'vedesigned,peoplemustbeabletorecognizewhatitis,care
aboutwhytheywoulduseit,understandwhattheinterfaceishelpingthem
interactwith,predictwhatwillhappenwhentheyuseit,andthensuccessfully
interactwithit.Whilethereisroomformysteryanddelayedgratificationin
interfaces,thereisnoroomforconfusion.Clarityinspiresconfidenceandleads
tofurtheruse.Onehundredclearscreensispreferabletoasingleclutteredone.

3. Interfaces exist to
enable interaction
Interfacesexisttoenableinteractionbetweenhumansandourworld.Theycan
helpclarify,illuminate,enable,showrelationships,bringustogether,pullus
apart,manageourexpectations,andgiveusaccesstoservices.Theactof
designinginterfacesisnotArt.Interfacesarenotmonumentsuntothemselves.
Interfacesdoajobandtheireffectivenesscanbemeasured.Theyarenotjust
utilitarian,however.Thebestinterfacescaninspire,evoke,mystify,andintensify
ourrelationshipwiththeworld.

4. Conserve attention
at all costs
Weliveinaworldofinterruption.It'shardtoreadinpeaceanymorewithout
somethingtryingtodistractusanddirectourattentionelsewhere.Attentionis
precious.Don'tlitterthesideofyourapplicationswithdistractible
material…rememberwhythescreenexistsinthefirstplace.Ifsomeoneis
readingletthemfinishreadingbeforeshowingthatadvertisement(ifyoumust).
Honorattentionandnotonlywillyourreadersbehappier,yourresultswillbe
better.Whenuseistheprimarygoal,attentionbecomestheprerequisite.
Conserveitatallcosts.

5. Keep users in control
Humansaremostcomfortablewhentheyfeelincontrolofthemselvesandtheir
environment.Thoughtlesssoftwaretakesawaythatcomfortbyforcingpeople
intounplannedinteractions,confusingpathways,andsurprisingoutcomes.Keep
usersincontrolbyregularlysurfacingsystemstatus,bydescribingcausation(if
youdothisthatwillhappen)andbygivinginsightintowhattoexpectatevery
turn.Don'tworryaboutstatingtheobvious…theobviousalmostneveris.

6. Direct manipulation
is best
Thebestinterfaceisnoneatall,whenweareabletodirectlymanipulatethephysicalobjectsinour
world.Sincethisisnotalwayspossible,andobjectsareincreasinglyinformational,wecreate
interfacestohelpusinteractwiththem.Itiseasytoaddmorelayersthannecessarytoaninterface,
creatingoverly-wroughtbuttons,chrome,graphics,options,preferences,windows,attachments,and
othercruftsothatweendupmanipulatingUIelementsinsteadofwhat'simportant.Instead,strive
forthatoriginalgoalofdirectmanipulation…designaninterfacewithaslittleafootprintaspossible,
recognizingasmuchaspossiblenaturalhumangestures.Ideally,theinterfaceissoslightthatthe
userhasafeelingofdirectmanipulationwiththeobjectoftheirfocus.

7. One primary action
per screen
Everyscreenwedesignshouldsupportasingleactionofrealvaluetothe
personusingit.Thismakesiteasiertolearn,easiertouse,andeasiertoaddto
orbuildonwhennecessary.Screensthatsupporttwoormoreprimaryactions
becomeconfusingquickly.Likeawrittenarticleshouldhaveasingle,strong
thesis,everyscreenwedesignshouldsupportasingle,strongactionthatisits
raisond'etre.

8. Keep secondary
actions secondary
Screenswithasingleprimaryactioncanhavemultiplesecondaryactionsbut
theyneedtobekeptsecondary!Thereasonwhyyourarticleexistsisn'tsothat
peoplecanshareitonTwitter…itexistsforpeopletoreadandunderstandit.
Keepsecondaryactionssecondarybymakingthemlighterweightvisuallyor
shownaftertheprimaryactionhasbeenachieved.

9. Provide a natural
next step
Veryfewinteractionsaremeanttobethelast,sothoughtfullydesignanextstep
foreachinteractionapersonhaswithyourinterface.Anticipatewhatthenext
interactionshouldbeanddesigntosupportit.Justaswelikeinhuman
conversation,provideanopeningforfurtherinteraction.Don'tleaveaperson
hangingbecausethey'vedonewhatyouwantthemtodo…givethemanatural
nextstepthathelpsthemfurtherachievetheirgoals.

10. Appearance follows
behaviour
Humansaremostcomfortablewiththingsthatbehavethewayweexpect.Other
people,animals,objects,software.Whensomeoneorsomethingbehaves
consistentlywithourexpectationswefeellikewehaveagoodrelationshipwith
it.Tothatenddesignedelementsshouldlooklikehowtheybehave.Inpractice
thismeansthatsomeoneshouldbeabletopredicthowaninterfaceelementwill
behavemerelybylookingatit.Ifitlookslikeabuttonitshouldactlikeabutton.
Don'tgetcutewiththebasicsofinteraction…keepyourcreativityforhigherorder
concerns.

11. Consistency matters
Followingonthepreviousprinciple,screenelementsshouldnotappear
consistentwitheachotherunlesstheybehaveconsistentlywitheachother.
Elementsthatbehavethesameshouldlookthesame.Butitisjustasimportant
forunlikeelementstoappearunlike(beinconsistent)asitisforlikeelementsto
appearconsistent.Inanefforttobeconsistentnovicedesignersoftenobscure
importantdifferencesbyusingthesamevisualtreatment(oftentore-usecode)
whendifferentvisualtreatmentisappropriate.

12. Strong visual
hierarchies work best
Astrongvisualhierarchyisachievedwhenthereisaclearviewingordertothevisualelementsona
screen.Thatis,whenusersviewthesameitemsinthesameordereverytime.Weakvisual
hierarchiesgivelittleclueaboutwheretorestone'sgazeandendupfeelingclutteredandconfusing.
Inenvironmentsofgreatchangeitishardtomaintainastrongvisualhierarchybecausevisual
weightisrelative:wheneverythingisbold,nothingisbold.Shouldasinglevisuallyheavyelement
beaddedtoascreen,thedesignermayneedtoresetthevisualweightofallelementstoonceagain
achieveastronghierarchy.Mostpeopledon'tnoticevisualhierarchybutitisoneoftheeasiest
waystostrengthen(orweaken)adesign.

13. Smart organization
reduces cognitive load
AsJohnMaedasaysinhisbookSimplicity,smartorganizationofscreenelementscan
makethemanyappearasthefew.Thishelpspeopleunderstandyourinterfaceeasier
andmorequickly,asyou'veillustratedtheinherentrelationshipsofcontentinyour
design.Grouptogetherlikeelements,shownaturalrelationshipsbyplacementand
orientation.Bysmartlyorganizingyourcontentyoumakeitlessofacognitiveloadon
theuser…whodoesn'thavetothinkabouthowelementsarerelatedbecauseyou'vedone
itforthem.Don'tforcetheusertofigurethingsout…showthembydesigningthose
relationshipsintoyourscreens.

14. Highlight, don't
determine, with color
Thecolorofphysicalthingschangesaslightchanges.Inthefulllightofdaywe
seeaverydifferenttreethanoneoutlinedagainstasunset.Asinthephysical
world,wherecolorisamany-shadedthing,colorshouldnotdeterminemuchin
aninterface.Itcanhelp,beusedforhighlighting,beusedtoguideattention,but
shouldnotbetheonlydifferentiatorofthings.Forlong-readingorextended
screenhours,uselightormutedbackgroundcolors,savingbrighterhuesfor
youraccentcolors.Ofcoursethereisatimeforvibrantbackgroundcolorsas
well,justbesurethatitisappropriateforyouraudience.

15. Progressive disclosure
Showonlywhatisnecessaryoneachscreen.Ifpeoplearemakingachoice,
showenoughinformationtoallowthemthechoice,thendiveintodetailsona
subsequentscreen.Avoidthetendencytoover-explainorshoweverythingallat
once.Whenpossible,deferdecisionstosubsequentscreensbyprogressively
disclosinginformationasnecessary.Thiswillkeepyourinteractionsmoreclear.

16. Help people inline
Inidealinterfaces,helpisnotnecessarybecausetheinterfaceislearnableand
usable.Thestepbelowthis,reality,isoneinwhichhelpisinlineandcontextual,
availableonlywhenandwhereitisneeded,hiddenfromviewatallothertimes.
Askingpeopletogotohelpandfindananswertotheirquestionputstheonus
onthemtoknowwhattheyneed.Insteadbuildinhelpwhereitisneeded…just
makesurethatitisoutofthewayofpeoplewhoalreadyknowhowtouseyour
interface.

17. A crucial moment:
the zero state
Thefirsttimeexperiencewithaninterfaceiscrucial,yetoftenoverlookedby
designers.Inordertobesthelpourusersgetuptospeedwithourdesigns,itis
besttodesignforthezerostate,thestateinwhichnothinghasyetoccurred.
Thisstateshouldn'tbeablankcanvas…itshouldprovidedirectionandguidance
forgettinguptospeed.Muchofthefrictionofinteractionisinthatinitial
context…oncepeopleunderstandtherulestheyhaveamuchhigherlikelihoodof
success.

18. Existing problems
are most valuable
Peopleseekoutsolutionstoproblemstheyalreadyhave,notpotentialproblems
orproblemsofthefuture.Therefore,resistcreatinginterfacesforhypothetical
problems,observeexistingbehavioranddesigntosolveexistingproblems.This
isn'tasexcitingasblueskywonderingbutcanbemuchmorerewardingas
peoplewillactuallyuseyourinterface.

19. Great design is
invisible
Acuriouspropertyofgreatdesignisthatitusuallygoesunnoticedbythepeople
whouseit.Onereasonforthisisthatifthedesignissuccessfultheusercan
focusontheirowngoalsandnottheinterface…whentheycompletetheirgoal
theyaresatisfiedanddonotneedtoreflectonthesituation.Asadesignerthis
canbetough…aswereceivelessadulationwhenourdesignsaregood.Butgreat
designersarecontentwithawell-useddesign…andknowthathappyusersare
oftensilent.

20. Build on other design
disciplines
Visualandgraphicdesign,typography,copywriting,informationarchitectureand
visualization…allofthesedisciplinesarepartofinterfacedesign.Theycanbe
toucheduponorspecializedin.Donotgetintoturfwarsorlookdownonother
disciplines:grabfromthemtheaspectsthathelpyoudoyourworkandpushon.
Pullininsightsfromseeminglyunrelateddisciplinesaswell…whatcanwelearn
frompublishing,writingcode,bookbinding,skateboarding,firefighting,karate?

21. Interfaces exist to
be used
Asinmostdesigndisciplines,interfacedesignissuccessfulwhenpeopleare
usingwhatyou'vedesigned.Likeabeautifulchairthatisuncomfortabletositin,
designhasfailedwhenpeoplechoosenottouseit.Therefore,interfacedesign
canbeasmuchaboutcreatinganenvironmentforuseasitiscreatingan
artifactworthusing.Itisnotenoughforaninterfacetosatisfytheegoofits
designer:itmustbeused!