90 _____feature
y using the Performant Design
techniques mentioned above,
designers can take control of user
perception and ultimately make the
web feel faster and more engaging.
If the latest updates from Chrome
Dev Summit are anything to go by, it’s
that it’s the web, not native apps that
continues to monopolise momentum— at least within the Google
development team.
Progressive Web Apps are becoming
the flagship of mobile web
development, and as the technology
moves forward, their ability to benefit
larger screens looks set to open the
gates for a wave of PWA across all
screens. As this wave gathersmomentum, Single Page Apps gives
developers the ingredients to
accelerate PWAs with app-like instant
transitions. Add frictionless user
experiences through Performant
Design, and therein lies a recipe for
hyper-performant, best-in-class web
experiences that should excite any web
designer or developer.Emphasisedcalltoaction(CTA)buttonsallow
userstomoveforwardquicklyintheirtaskwith
confidence.PayingcarefulattentiontoCTAsize,
colour,placementandmicrocopyhelpsmakethe
keyactionsmoreobviousandreducesthinking
time.Patternsfirstseeninnativeapps,suchthe
floatingactionbuttonandfixedheaderbar,get
theusermovingquicklyandtranslatewelltoany
performantwebapp.
A generalruleofnavigationis ‘outofsight,out
ofmind’.Patternssuchasa BottomNavigation
BarandTabssuccessfullyputprimaryuser
actionsfrontandcentre,whilethetraditional
‘hamburger’menuhasa lowerengagementrate.
Facebookfoundthatbymovingfroma
hamburgermenutoa tabbedapproachimproved
engagement,satisfaction,revenueandperception
ofspeed.
Havinga strategyofthetypeofcontentyou
wanttopromoteis important,andsimplytreatingall
navigationalitemsasequalwillresultina decreaseof
engagementintheareasthatyouwanttoimprove.Spotify
foundthatbyreducingthenumberofoptionsinthetabbarto
fiveincreasedthereachofSpotify’sprogrammedcontent— a
greatexampleofhowpromotingcertainnavigationitemsover
otherscanfocustheuser’sexperience.Digital wallets like GooglePay and upcoming automatic sign-in
API both leverage data stored on the device to simplifyfriction-heavyuserflows.GooglePayallows
shopperstocompletemultiplecheckoutstepsina
singletap,whileone-tapsigningetsusersintotheir
accountinthesameway.
Resultsfromearlyadoptersshowthatremoving
theinterruptionofloginscreensandcheckout
forms,alongwiththementalfrictionof
rememberingandenteringinformation,speedsup
taskcompletionandimprovesengagement.Today’suserspendsaroundsixhoursa day
onlinewithanaverageof6.5connecteddevices
perperson.Notonlyis it fundamentallyimportant
todesignfora numberofdifferentdevices,butto
designforareasoflowandnoconnectivity.
Usersoftentakemultiplesessionstocomplete
a task,anddeliveringperformantexperienceson
eachdeviceensuresthatentireprocessis smoothand
satisfying.
Desktop supports PWAs and designing performant
responsive PWAs without the bloated code commonly
associated with responsive websites, means designing mobile
first. This brings the essentials to the forefront, adding more
items only when the user agent can handle it.
Service Workers allow PWAs to stand up when the
network connection goes down. This opens the door to craft
offline user experiences by use of clear network status
messaging and disabling elements that would otherwise derail
the experience.PERFORMANT
DESIGN IS FOR
EVERYONE
As you might expect,
accessibility principles
will improve the overall
usability of any web app
that incorporates themQ MINIMUM TAP TARGETS
Ensuring a minimum tap
target of 44—52px ensures
enough space is present
between tappable
elements, reducing the
margin for errors and time
spent correcting them.Q MINIMUM FONT SIZE
Easily readable text ensures
quick processing and faster
task completion for users.
Google’s recommendation
for body text is 16pt, a
requirement echoed in their
Lighthouse rankings when
penalties are applied to web
apps with too much text
below 16pt.Q COLOUR CONTRAST
Text and symbol clarity is
also important. Google
includes it in the
Lighthouse accessibility
audit. Web apps that fail to
apply clear contrast
between text and
background colour see
penalties in their lighthouse
score, and slow users down
in their attempt to process
and proceed with the
relevant information.Tools to help test contrast
ratios in PWAs are now
part of Chrome DevTools.Digital Wallets like
Google Pay can distill
complicated checkout
flows down to a single
‘Pay’ button.Financial Times (https://app.ft.com/index_page/home) is one of the highest profile
responsive PWAs, allowing desktop readers to consume articles offline and on the go.