1eam Leader: Sanne Lvers 0320481

1eam Members: krlsue 1lng 0320479

Marlssa van 8l[slngen 0320362
nlna Chl[sens 0320482
lellcla 8odrlgues dos 0320361
SanLos


8esearch Loplc: LayouL ueslgn ConcepL
!""#$%&'%( * + ,'"'-./0 1'"#$% ,'23.(
!.4/5' 6 + 13%7( 83.' 93:. ;#"#(3." <''2 (0'& (0#%<#%$

1he arucle sLaLes LhaL a good webslLe deslgn should keep Lhe vlewer lnLeresLed.
We share Lhls oplnlon, LogeLher wlLh people LhaL share many years of experlence
ln Lhe webslLe deslgn lndusLry. lL all sLarLs wlLh Lhe rsL seconds a cllenL reaches a
webslLe. lf your slLe does noL look user -frlendly and vlsual appeallng, Lhe cllenL
wlll leave Lhe webslLe and wlll sLarL looklng for a beuer alLernauve (uavglL, n.d.).

nexL Lo LhaL Lhe arucle sLaLes LhaL lL ls lmporLanL Lo keep a webslLe funcuonal ln
order Lo make a webslLe look (and be) user-frlendly. 1exL should be easy Lo read
and Lhe navlgauon should be sLralghuorward. We agree on Lhls sLaLemenL. 1oo
much or compllcaLed LexLs on a webpage wlll cause over sumulauon of Lhe eye.
1herefore Lhe cllenL wlll declde Lo leave Lhe page or slmply does noL know where
Lo sLarL readlng. (uavglL, n.d.)
lL also ls really lmporLanL Lo use words LhaL your cllenLs wlll use when Lhe names
for Lhe navlgauon bar are belng chosen. (kaLe Paberbusch, n.d.) lf cllenLs need Lo
search for a long ume, Lhey wlll look for anoLher slLe LhaL wlll be more user-
frlendly (uavglL, n.d.).

Aer Lhe conLenL of a webpage ls made user-frlendly, Lhe vlewer needs Lo be
kepL lnLeresLed. ?ou wlll reach Lhls Lhrough a conslsLenL webslLe lay-ouL LhaL ls
vlsually appeallng (kaLe Paberbush, n.d.) nexL Lo LhaL lL ls really lmporLanL Lo noL
make uslng Lhe webslLe Loo easy for your cllenLs and Lo keep Lhem Lhlnklng ln
order Lo hold Lhelr auenuon (Cherke & 1urban, 1999).
We now wlll show dlerenL examples Lo make clear whaL ls user-frlendly and
whaL ls noL. All uslng Lhe sLaLemenLs as used ln Lhe arucle.

keep Lhe vlewer lnLeresLed, funcuonal and user-frlendly deslgn, easy Lo read
LexLs, sLralghuorward navlgauon"

We belleve LhaL Lhe Cueensland unlverslLy of 1echnology vlrLual (see nexL
page for an example) has a user-frlendly webslLe deslgn.
1hls because:
! 1hey use a navlgauon bar wlLh noL Loo many, clear opuons. 1herefore
cllenLs wlll easlly and qulckly nd whaL Lhey are looklng for. 1he search
englne bar servers Lhe same purpose.
! 1he acLual deslgn of Lhe webslLe ls funcuonal. lor Lhe unlverslLy as for Lhe
user of Lhe vlrLual as well. 1hey use Lhelr lmage colours and have a clear
overvlew (e.g. Lhe navlgauon).
! 1he eyes of Lhe cllenL wlll noL experlence much over-sumulauon caused by
Lhe use of colours or oLher deslgn feaLures. 1hls all because of Lhe
conslsLenL use of Lhe colour blue. 1hls makes lL a whole so Lhe eyes geL Lhe
change Lo screen Lhe slLe for Lhe lnformauon Lhey need. no over
sumulauon and no blg dlsLracuons.

We belleve LhaL Lhe 1aylor's orLal (see nexL page for an example) could
lmprove some elemenLs concernlng user-frlendly webslLe deslgn. We found
Lhe followlng polnLs uslng Lhe sLaLemenLs of Lhe arucle:
! 1he navlgauon bar ls noL vlslble when uslng Lhe maln parLs of Lhe
webpage. 8ecause of Lhls, you wlll need Lo keep scrolllng beLween Lhe
navlgauon bar and Lhe maln page wlLh lnformauon.
! 1he LexL on Lhe page ls noL easy Lo read. 1hls because of an overload of
lnformauon and LexLs. Lyes wlll geL Loo many sumulauons whlch causes
Lhem Lo noL know where Lo look. 1hls wlll resulL ln spendlng a loL of ume
searchlng for Lhe lnformauon you need wlLh a hlgh posslblllLy of noL
ndlng lL.
! 1he lnconslsLenL use of colours and Lhe over deed of lL causes Lhe same
eecL. 1here are Loo many dlsLracuons and sumulauons for Lhe eyes, Lo
really see whaL ls on Lhe slLe.
!.4/5' * + 13%7( &-<' (0'& =-#(

ln Lhls arucle lL becomes clear LhaL Lhe mosL lmporLanL Lhlng when you vlslL a
webslLe ls Lhe speed ln whlch Lhe page ls loadlng. We parLly agree on lL, parLly
dlsagree. Cf course lL ls very lmporLanL LhaL Lhe slLe comes up very qulckly buL
lf Lhe slLe does noL look auracuve aL all nobody wlll sLay on Lhe slLe anyway.
We Lhlnk lL ls besL Lo go for Lhe mlddle way (or beuer, Lhe besL of boLh). So
make sure your page loads wlLhln a reasonable ume buL also care for Lhe
deslgn and auracuveness of your slLe. lf your slLe loads qulckly buL Lhe vlslLors
are for example noL able Lo nd Lhelr way on your slLe. Accordlng Lo Lhe arucle
(Aaron Popklns, 2014) lL ls noL very hard Lo make your slLe load fasLer and so lL
ls posslble for everyone Lo use Lhese ups.

When we look aL Lhe porLals of 1aylor's unlverslLy and Cu1 we see LhaL Lhey
boLh load preuy fasL. lor sLudenLs lL ls probably more lmporLanL LhaL Lhe slLe
loads qulckly Lhen LhaL Lhe slLe looks good. 1here ls a loL of conLenL on Lhese
pages so Lhey musL have a harder ume keeplng Lhe slLe up Lo speed buL we
Lhlnk Lhey are sull fasL enough.

!.4/5' > + ?#%@ 3:( =0-( /353." =#55 /-:"' 93:. ;#"#(3." (3 0-(' 93:

1hls arucle lmpllcaLes how colours can aecL your webslLe vlslLors. lL lmpllcaLes
LhaL Lhe use of red and yellow colours wlll leave a negauve mark on your cllenLs,
whaL mlghL resulLs ln Lhem noL reLurnlng Lo your webslLe agaln. ?ou have Lo be
glad LhaL people reached your slLe, don'L overload Lhem wlLh colours. lf you wanL
Lhem Lo sLay on your slLe.

Also, Lhere are 261 colours you can use for your webslLe. Are you uslng a colour
ouLslde Lhls 261 colours paleue, Lhe colour mlghL reform lnLo someLhlng noL so
auracuve Lo Lhe eye. 1hls resulLs ln a cllenLs dlsgusL Lowards your webslLe. 1he
mosL popular colours amongsL people concernlng webslLe deslgn are: blue,
green, black and purple (klssmeLrlcs, n.d.). 1hls underplns Lhe sLaLemenL abouL
red and yellow colours noL belng sulLable for your webslLe deslgn.

We compleLely agree wlLh Lhe use of peaceful colours for your webslLe deslgn
because your webslLe should lnvlLe people Lo sLay longer. 8rlghL and screamy
colours wlll never lnvlLe people Lo surf ln peace and sLay Lo waLch everyLhlng
your webslLe has Lo oer. nexL Lo LhaL lL ls lmporLanL noL Lo use more Lhan Lhree
colours on your webslLe. 1he use of more Lhan Lhree colours wlll overload Lhe
vlslLors of Lhe webslLe (AvanLgaLe, n.d.).


Lxamples based on Lhe 1aylor's orLal and Lhe Cueensland unlverslLy of
1echnology vlrLual. All uslng Lhe sLaLemenLs as used ln Lhe arucle for
argumenLauon.
(see Lhe nexL page for lmages)

Lxample 1 - 8ed versus 8lue
1o polnL ouL LhaL he colour red ls noL a popular colour Lo use for your webslLe,
Lhe 1aylor's orLal glves you lmmedlaLely a negauve feellng by showlng Lhe red
colour aer openlng Lhe webslLe. Also, lL ls assoclaLed wlLh a negauve sub[ecL
(a paymenL warnlng) LhaL punlshes you before even chooslng your sub[ecL.
1he vlrLual of Cueensland oers a very peaceful appearance because of Lhe use
of Lhe calm colour blue. 1hls also glves you a momenL Lo Lhlnk abouL where you
wanL Lo go on Lhe slLe.

Lxample 2 - uo noL use more Lhan Lhree colours on your slLe
1hls one ls easy Lo polnL ouL. 1he 1aylor's orLal ls uslng more Lhan Lhree
colours, whlch glves a screamy ,chlldlsh appearance. ?ou don'L really now where
Lo look. 1he vlrLual of Cueensland ls uslng grey, blue and a llule blL or orange.
Colours LhaL are llkely Lo been seen and L perfecLly LogeLher. 1here ls no maLh
needed Lo gure ouL on whlch webslLe vlslLors wlll sLay longer.


!.4/5' A + B-;#$-43%

We Lhlnk lL ls lmporLanL Lo know where you are on a webslLe. lL ls also
lmporLanL Lo know where you have been and where you can go. eople do
noL llke lL Lo go Lo any random page on Lhe lnLerneL. 1hey wanL Lo know
where Lhey are. ?our homepage can make a dlerence. 1hls ls Lhe page
where people declde lf Lhey sLay or lf Lhey wlll go Lo anoLher slLe.

lL ls also lmporLanL Lo show people where Lhey are. When you vlslL a
webslLe you wanL Lo know where you are and abouL whaL you are golng Lo
read. We Lhlnk LhaL lL ls also lmporLanL Lo begln wlLh Lhe mosL lmporLanL
lnformauon. ?ou have Lo make sure you Lell Lhe sLory you wanL Lo Lell. lL ls
also nlce when Lhere ls a homebuuon on every page of your webslLe so
people can reLurn Lo your homepage any mlnuLe.

1hls arucle shows more reasons why good navlgauon ls lmporLanL on a
webslLe: hup://allsLaparL.com/arucle/whereaml (08 AugusL 2006)C

1hls arucle shows you LhaL lL ls lmporLanL Lo use obvlous secuon names.
eople [usL wanL Lo nd whaL Lhey are looklng for (llke sLaLed ln Lhe arucle
1 revlew). 1he colour of a llnk does mauer. 1hls way people know lf Lhey
already been on a slLe or noL. When you make a llnk purple, whaL means
on mosL slLes LhaL you already vlslLed Lhe slLe. ?ou have Lo make sure LhaL
you make a llnk re-cllckable so people can reLurn Lo lL.
(Lrlc Mlller, n.d.)
Lxample: 1he porLal of 1aylor's has clear navlgauon buuons. ?ou can nd a
menu on Lop of each page and on Lhe le slde of Lhe homepage. 1hey easlly
glve you Lhe opporLunlLy Lo reLurn Lo Lhe homepage, lL does noL mauer on
whlch page you are. 1aylor's orLal does noL work wlLh Lhe purple and blue
llnks. ?ou can noL see lf you already vlslLed a page or noL. We Lhlnks, on 1aylor's
orLal, Lhere are Loo many menus. Cne on Lhe le, one above, one ln Lhe
mlddle and Lhey all show you dlerenL sub[ecLs. lL ls a blL messy. ?ou can cllck
on a page or Loplc buL lnLerneL does nog open a new page ln Lhe lnLerneL
browser. We Lhlnk LhaL lL ls beuer lf Lhe llnk or buuon you cllck on shows up ln
anoLher lnLerneL page ln your browser.
D#(-43%

Aaron Popklns 2014, Cpumlzlng age Load 1lme. Avallable from:
hup://www.dle.neL/muslngs/page_load_ume/

AvangaLe n.d., Chooslng Lhe rlghL colours for your webslLe. Avallable from:
hup://www.avangaLe.com/avangaLe-resources/arucle/color-web-slLe.hLm

uavglL n.d., user-lrlendly Web ueslgn. Avallable from:
hup://web-deslgn-soware-revlew.LopLenrevlews.com/user-frlendly-web-deslgn.hLml

Lrlc Mlller n.d., llve 8ules of Lecuve WebslLe navlgauon. Avallable from: hup://
graphlcdeslgn.abouL.com/od/eecuvewebslLes/a/web_navlgauon.hLm

Cehrke, u., & 1urban, L, 1999, ueLermlnanLs of successful webslLe deslgn: relauve
lmporLance and recommendauons for eecuveness.

kaLe Paberbusch n.d., CA 8LCC. Avallable from:
hups://blog.generalassemb.ly/slx-ux-sLraLegles-make-slLe-user-frlendly/

klssmeLrlcs n.d., Pow Lo use Lhe sychology of Color Lo lncrease WebslLe Converslons.
Avallable from: hups://blog.klssmeLrlcs.com/psychology-of-color-and-converslons/

Cueensland unlverslLy of 1echnology 2014, Cu1 vlrLual. Avallable from:
hups://quLvlrLual4.quL.edu.au/group/sLudenL/home

1aylors unlverslLy 2014, 1aylors orLal. Avallable from:
hups://porLals.Laylors.edu.my/porLal/v2/logln.do