ANACONDA DONT

(Website Design Layout Research)

Group Leader :
Muhammad Izzhar - 0303475
Members :
Khaleda Zolkipli - 0302449
Aisyah Mustapha - 0307793
Nailla !oraya - 0304""3
#asha Nair -0304$"3
Introduction
#his part %o&sists o' i&'ormatio& o& the resear%h team a&d the methods used to
%o&du%t our resear%h(
Research Team
)
*ur +roup %o&sists o' ,-e resear%hers(
)
All memers are 'rom the mass %ommu&i%atio& ,eld ra&+i&+
'rom road%asti&+. puli% relatio&s a&d marketi&+(
#he team i&%ludes / -
- Muhammad Izzhar 003034751
- Khaleda Zolkipli 003024491
- #asha Nair 00304$"31
- Nailla !oraya 00304""31
- Aisyah Mustapha 003077931
Research Methods
)
*ur +roup de%ided to use 2ualitati-e methods i& order to %o&du%t
our resear%h( #he i&'ormatio& 3e +athered 3ere 'ou&d o&li&e(
)
#here are 'our arti%les 3hi%h 3e 'ou&d %ru%ial i& the pro%ess o'
de-elopi&+ a +ood 3esite layout desi+&(
First Article :
Dont Bore Your Visitors!
Main points :
4 Keep the -ie3er i&terested
4 5a-e a &atural 6o3
4 !hould&7t e %o&'usi&+ &or should it e too simple
4 8esite should 'u&%tio& 3ell
4 8esite should load 2ui%kly
4 #e9t should e easy to read
4 Na-i+atio& should e strai+ht'or3ard a&d easy
4 Attra%ti-e-looki&+ 3esite 3ith i&teresti&+ %o&te&t
Analysis
)
#he arti%le +i-e& e9plai&s o& methods o& ho3 to keep the -ie3er
i&terested 3he& they are -isiti&+ a 3esite pa+e( #he -isual
desi+& o' the 3esite should e well designed y the desi+&er i&
order to attra%t -ie3ers atte&tio&(
)
Al-!alei 020:01 said that. a 3esite should also ha-e a natural
fow i& terms o' the pa+e layout. &a-i+atio&. %o&siste&%y.
emeddi&+ pi%tures or 6ashes. a&d also usi&+ appropriate %olors(
)
;urthermore. a 3esite should not be too confusing 'or the
-ie3ers &or should it e too simple as huma&s ha-e the te&de&%y
o' +etti&+ ored -ery easily(
Analysis
) <esi+&ers should also keep i& mi&d that the 3esite %reated should e
ale to load quickly as -ie3ers are al3ays i& a hurry( 5alim. <(
020091 ad-ises optimizi&+ all ima+es 'or 3esite display e%ause you
3ould&7t 3a&t to make your %ustomers 3ait too lo&+(
)
*ther tha& that. this arti%le also said that i& a 3esite. text should be
easy to read y the -ie3ers a&d easily u&derstood( 8esites that are
easy to read lea-es a 2ui%k impa%t 3hether to stay or lea-e the pa+e(
) =esides that. navigation is also one of the most important elements(
It should e straight-forward and easy( Al-!alei 020:01 also said
that pla%i&+ the &a-i+atio& i& the same pla%e 'or e-ery pa+e makes it
easier 'or the -ie3ers(
)
5o3e-er. 3ith attra%ti-e looki&+ 3esite. it should also ha-e a&
interesting content( 8esite desi+&ers should put pi%tures that are
appropriate or is related to the %o&te&t(
Example
#he 3esite has simple &a-i+atio&s yet appeals easily to all -isitors(
Example
#he 3esite also 'eatures a -ideo 'or users to k&o3
a it more aout the produ%t(
Second Article :
Dont Make Them Wait!
Main points :
4 =roada&d speed %o&&e%tio&s is importa&t
4 ;ast loadi&+ pa+e
4 8epa+e should&7t e more tha& 50Kiloytes 0 pre'eraly elo3 30K a&d home
pa+e should e u&der 2:K 1
4 >raphi%s ima+es should e as small as possile
4 ?se more desi+&s a&d less +raphi%s 0to do3&load 2ui%kly1
4 8ould e9tra +raphi% sell -isitors or keep them %omi&+ a%k
4 @ie3ers 3ill appre%iate &ot 3aiti&+ more
Analysis
)
#he use o' +raphi%s is pre'erred to e really small as 3epa+es
shouldnt be more than !" #ilobytes( 8esites should use
design more than graphics as +raphi%s takes a lot o' ytes a&d
3ill slo3 the pa+e 'rom loadi&+ or to do3&load 'rom oth desktop
or moile(
)
=y usi&+ a lot o' +raphi% it 3ill either %hase the -isitors or either
keep them %omi&+ a%k to the 3esites( @ie3ers 3ill en$oy
websites as they dont have to wait for it to load a&d it makes
it easier 'or them to -ie3 a&d do3&load(
)
%peed plays a& importa&t role i& users e9perie&%e +oi&+ throu+h
a 3esite. 3he& the pages load very slow it would be bad if
organi&ation could not provide a great users experience(
Analysis
)
?sers te&d to aa&do& a pa+e 3he& it takes too lo&+ to load.
people expect a fast user experience online a&d 3he& they
do&7t. they lea-e( #his is e%ause the 3ay 3e 3a&t consumer
media has changed intensely 3here most o' them %o&sumed o&
the +o a&d &o o&e has time or patie&%e to 3ait 'or a slo3 pa+e to
load 0!pie+el. 20:31(
)
It is %ru%ial to improve the 'age %peed 'or the 3esite. y doi&+
this. users 3ill e&+a+e etter 3ith your %o&te&t a&d you 3ill +et
more -alue a&d %o&-ersio& 'rom your -isitors( >oo+le %o&siders
Aa+e !peed to e importa&t o' the la&di&+ pa+e e9perie&%e as
Aa+e !peed %ould a''e%t the marketers Buality !%ore(
Example
(outube )ideo Lagging *o Load+
>e&erally 3esites 3hi%h ha-e a&y %o&te&ts su%h as -ideos or +raphi%s 3ill take a lo&+er time to
load a&d -ie3s mi+ht Cust lea-e the 3esite e%ause they do&7t 3a&t to 3ait(
Time flies lie an arro!" fruit flies lie a banana#$ Anthony %# &ettinger
Third Article :
Find Out What Colours!
Main points :
4 8e desi+&ers o'te& o-erlook the importa&%e o' %olor 3hile desi+&i&+ a 3esite(
4 It should e o&e o' your ,rst %o&%er&s 3hile %reati&+ a 3esite(
4 Dour 3esite 3ill look ori&+ a&d plai& or e-e& %haoti% a&d hard to look at(
4 8e ro3sers %a& o&ly see 25$ %olors at o&%e a&d %a& o&ly share 2:$ %ommo&
%olors(
4 #oo ma&y %olors 3ill +et the ima+es distorted a&d pi9elated(
4 8esites %a&&ot ha-e %olors that +i-e eyes irritatio&(
Analysis

#he 3esite e9plai&s o& ho3 the use o' %olors is importa&t 3hile %reati&+ a
3esite plus it is o&e o' the mai& %o&%er&s the desi+&er should thi&k o' 3hile
desi+&i&+ a 3esite( #he use o' %olor palettes is -ery importa&t 3hile
or+a&izi&+ a&d %omi&i&+ the %olors to+ether 3ill determi&e 3hether the
-ie3ers 3ill stay a&d keep o& -ie3 o& the 3esite or they 3ill +et irritated
a&d e-e&tually lea-e the 3esite 0;ra&%is. 20:31(

8esites also &eed to use safe colors that display solid. &o&-dithered a&d
%o&siste&t so that it 3ill all e %ompatile to all types o' appli%atio&s. sear%h
e&+i&es a&d o' %ourse %a& e a%%essed to a&y %omputers 0Ariester. 20:31(

A re+ular 3esite should ha-e a +reat impa%t o& the color contrast o& the
a%k+rou&d a+ai&st the type of text that is used y the desi+&er( 8ithout the
%olor %o&trast. the te9t 3ill e di',%ult to read the ima+es that are used 3ill
&ot +o to+ether 3ith the 3hole 3esite 0Al-!alei. 20:01(
Examples
>ood e9amples are as 'ollo3s / -
http:,,www-ikea-com
http:,,apple-com
Examples
8here as e9amples o' ad 3esites /-
E-ery thi&+ aout this
3esite is 3-r-o-&-+(
Fun facts!
5ere are the 'ollo3i&+ tips
you may e ale to take i&to
%o&sideratio& 3he& desi+&i&+
your 3esiteF
It is importa&t 'or
%olours to 3ork
to+etherF
.ead here to know
why/
Fourth Article :
Navigation
Main points :
4 Go%atio& o' the &ame a&d lo+o o' %ompa&y
4 Aroper li&ks
4 >i-es -isitors a& idea o& 3here the li&k takes them
4 Gi&k titles are ideal
4 Gi&ks dra3a%k i& terms o' additio&al do3&load time
4 ?sers 3a&t to k&o3 3hether they ha-e already -isited a parti%ular
pa+e
4 ?tilizi&+ the %olour lue a&d purple as i&di%ators
Analysis
) It is said that. o&e %a&Ht +uara&tee that e-ery -isitor that e&ter a site 'rom the
i&itial home pa+e 3ill ad-a&%e to %li%ki&+ o& hyperli&ks i& a methodi%al
ma&&er. he&%e. a proper &a-i+atio& must a&s3er the 2uestio& su%h as
0where am 1+2. 03here can 1 go from here+2 a&d 03here was 1 already+2
at all times(
) #he arti%le tells us that the name or logo of the company alongside a page
name ought to be on top of each and every page in the web site( #he
%ompa&y &ame or lo+o ou+ht to additio&ally e the li&k a+ai& to the home
pa+e a&d the home pa+e should ideally a&s3er the i&2uiry J3here am IJ y
Kshouti&+L it out 'or the -isitors( #his is e%auseM the most %ommu&al positio&
o' a utto& ar is a%ross the top o' the pa+e. as users 3ould &ot ha-e to s%roll
do3& to &a-i+ate 'urther i&to the 3e site 0E(Miller. 20:41(
) #he arti%le also e9%eptio&ally pres%ries the utili&ation of link titles thou+hM
the mai& dra3a%k is the additio&al do3&load time( It takes more or less (:
se%o&d to do3&load ea%h li&k title( Gi&k titles e&ha&%e the &a-i+atio&
usaility(
Analysis
) #here should&7t e spe%ulati&+ o' 3hat the 3e site a%%omplishes 'or the
-isitor( @isitor %o&sta&tly ha-e the &e%essity to k&o3 K3here %a& I +o 'rom
hereNL or J3hat 3ould e the est &e9t stepNL #his mea&s links to pages
within the web site or even links to an outside website page( 8hi%he-er
3ay. o&e ou+ht to pla%e li&ks i& %o&te9t( As su%h the &a-i+atio& should +i-e
the -isitor a& idea o& 3here the li&k 3ill take them 3ith pro-idi&+ a little
portrayal o' that 3e site i& %o&te9t 3ith the li&k(
) ;urthermore. 3he& a user %li%ks i&to a site se%tio&. it7s a +reat thou+ht to
remind them where they are e%ause they 3a&t to k&o3( ?tilize a liale
strate+y to hi+hli+ht the area a -isitor is i&. 'or e9ample. a %ha&+e i& %olor or
appeara&%e(
) I& the e-e&t that the site has more tha& o&e pa+e 'or e-ery area. make
%ertai& to leave the navigation button clickable so users %a& utilize it to
retur& to the mai& pa+e o' that areaO3esite 0E(Miller. 20:41( A%%ordi&+ to
the arti%le. it has ee& made sta&dard 'or a &a-i+atio& to 'u&%tio&
%omme&daly the 3esite ou+ht to utilize blue for unvisited a&d purple for
visited as a %olor s%heme su++estio& as utilizi&+ di''ere&t %olors 3ill simply
%ause 'rustratio& or e-e& e'uddle i&di-iduals(
Example
#his 3esite has a pre%ise &a-i+atio& ar maki&+ users easy to ro3se arou&d(
Example
=elo3 is a& e9ample o' a 3esite 3ith ad &a-i+atio&(
=esides ha-i&+ a ad i&ter'a%e. the %olours o' the 3esite also do&7t +o alo&+ to+ether(
References
A list o' re'ere&%es 3hi%h helped us i&
our resear%h(
Miller, E. (2014).5 Design Rules for Easy Website Navigation. [online] About. Available at:
http://graphicdesign.ab!t.c"/d/e##ective$ebsites/a/$eb%navigatin.ht" &Accessed ' (ct.
2014).
*n$+.c", (2014).pn$+.c" , Pacifc Northwest !Ray "nc.. &nline) Available at:
http://$$$.pn$+.c"/ &Accessed ' (ct. 2014).
-hes$aggersaln.c", (2014).#he $wagger $alon. &nline) Available at:
http://thes$aggersaln.c"/inde+.ht"l &Accessed ' (ct. 2014).
.avlin A., 201/, %ow &any 'onts Does a Designer Really Nee(, &nline) Available at
http://design$eb0it.c"/$eb,and,trends/h$,"an1,#nts,designer,reall1,need/ &Accessed:
2/10/2014).
*atta1a 3eb 4ervices, 201/, Website Design, &nline) Available at:
http://patta1a$ebservices.c"/$ebsite,design/ &Accessed: 2/10/2014).
*riester 5., 201/, )onsistent )olors 'or *ou, &nline) Available at:
http://$$$.ne+trapi+el.c"/201//10/26/40,st!nning,$ebsite,designs,$ith,great,clr,sche"es/
&Accessed: 2/10/2014)
4piegel, 7. and 4piegel, 7. (201/). Page $+ee( &atters, Why *ou Nee( to "-+rove *ours #o(ay.
&nline) Mar0eting 8and. Available at:
http://"ar0etingland.c"/page,speed,"atters,$h1,1!,need,t,i"prve,1!rs,tda1,69::4
&Accessed ' (ct. 2014).
M1piada.c", (2014). Pia(a "talian $treet 'oo( . %o-e. &nline) Available at:
http://$$$."1piada.c" &Accessed ' (ct. 2014).
Al,4alebi, ;. (2010). #he "-+ortant )haracteristic to &a/e a 0oo( Website. &nline) Available at:
http://peple.rit.ed!/#+a4/14/:/:/research/3eb4ite<esearch*aperAlsalebi;aisal.pd#
&Accessed ' (ct. 2014)