TELKOM NIKA , Vol. 11, No. 6, June 20 13, pp. 3130  ~ 313 3   e-ISSN: 2087 -278X           3130      Re cei v ed  Jan uary 17, 201 3 ;  Revi sed Ap ril 1, 2013; Accepte d  April 1 6 , 2013   Guideline for the Graphic Design of Web  Application  for Children’s Interface      Tengku Siti  Meriam Ten g ku Woo k * 1 , Siti Sal w ah  Salim 1 F a cult y  of Info rmation Sci enc e and T e chno l o g y  (UKM), Na tiona l Univ ersit y  of Mal a ysia,  436 00 Ba ngi  Sela ngor   2 F a cult y  of Co mputer Scie nc e and Inform ati on T e chnol og y (UM) Universit y  of Mal a ya, 50 603 Ku al Lump u r   *Corres p o ndi n g  author, e-ma i l : tsm@ftsm.ukm.m y *, sal w a @ um.ed u .m     A b st r a ct     T here  hav e b een  nu mero us  studies  do ne  o n  the  gu id e l i n e s  of user  interf ace, b u t on ly a  nu mb e r   of them  hav consi dere d  sp ecific gu id eli n e s  for the desi g n of chil dre n interface. T h is  pap er is a bout  a   researc h  on th e specific  gu id elin es for chi l dr en, focusi ng o n  the criteri a  of  grap hic d e sig n . T he ob jectiv e o f   this rese arch i s  to study on t he g u id eli nes  of user  interf ac e desi gn  and t o  dev elo p  spe c ific gui de lin es  on   childr e n s gra p h ic d e sig n . T h e criteri a  of gr aph ic des ig n a r e the pr iority  of this rese arc h  sinc e prev io us   researc h   h a ve prove n   that gra phic des i gn is  t he ma in  factor  w h ich  contri but es to the  pro b l e m of us abi lity  of  w eb ap plic atio n interfac es, in   terms  of the ov erall  gra p h i c la yout n o t bei ng  i n  a  hier archic al  order,  not take n   into co ncern  th e ava ila bil i ty of  space, i n a ppr opri a te  marg in,  impro per type  and fo nt si z e  s e lecti on, a nd l e ss  conce n tratio n on the use of  the col ours. T he researc h  method olo g y mak e s use of the comparis on of a n d   the coor din a tio n  to the gu id eli nes o n  chil dre n s inte rfac e a nd the sp ecific  gui del ines  on t he gra p h i c des i g n   of w eb a ppl ica t ion i n terfaces.  T he co ntrib u ti on  of this  res e arch is  the  gu i deli nes  on  the  desi gn  of w e app licati on gr a phics w h ich ar e specific ally fo r childre n.      Ke y w ords : gui deli nes, gra p h i c desig n, childr e n s i n terface d e sig n      Copy right  ©  2013 Un ive r sita s Ah mad  Dah l an . All rig h t s r ese rved .       1. Introduc tion  Grap hic d e si gn h a s be co me the  p r iori ty in  the  de sign of  we a pplication i n terfaces  becau se it i s   able to  d r a w   the attention   of its  user s in  usi ng it  ea sil y , espe cially i f  the u s e r s a r e   child ren  [1]. Grap hic de si gn i s  not  onl y important  f o r the  de sig n  of u s e r  int e rface, but  a l so  influen ce s e v eryday life  according to  the c hang e  in time, style, age a n d  so cial a s p e c ts.  Gene rally, th ere  are a  few example s  of  grap hic de sig n  revolution. I n  the  197 0’s,  there  had  be en   a lot of graphi c de sig n  with   floral a nd gl o be tone s th e m es. Thi s  i s   due to th e su rro undi ng s of  th e   comm unity of  that e r whi c h was p s ych e delic an wa s cra z y abo ut f l oral  and  exhi larating  shape   desi g n s . Wh e r ea s in th e 1 9 80’s, it  wa s fo und that  man y  were attra c t ed to b r ight  n eon lig hts  with   pattern s, su ch as  robot d e s ign. Thi s  ma y be due  to the advent of  comp uters an d techn o logy  in  that era.  Mov i ng o n  into  th e 19 90 s, gra phic de sign   i n  a va riety of  styles sta r te d to a ppe ar  a s  it  head ed into the ne w millen n ium.   In the curre n t era, th appli c ation  o f  the minima list app ro ach  is the  ne w style in  exhibiting b o l dne ss i n  de si gning  so meth ing. The r are many a d vertising a nd g r a phic  de sign s f o text and lo go  whi c h  have  i m age  diversit y with g r a phi cal  spl a she s . Thi s   style ha s influ e n c ed  the  interface de sign of we b a pplication s  a s  well as  th e  system, ap a r t from influe ncin g the p r i n media adve r ti sing. Th e wid e sp rea d  exist ence of  vario u s de sig n  styles may cau s e desi gne rs t o   face difficulty in maki ng d e ci sion s in th e desi gn of i n terfaces. T h us, the de sig ners requi re  a   grap hic de sig n  gui deline s   in orde r to  coordi nat e th e i r ne ed s in  li ne  with the  chang e of tim e style, age,  an d soci al a s pe cts i n  p r od uci ng a c cepta b l e  de sig n s whi c co uld  be u s ed  thro ugh o u the regio n Guideli n e s  are an im porta nt asp e ct in   desi gning  rel e vant and  sui t able interfa c e for th e   use r . Th ere  a r e 1 0  b a si c p r inci ple s  in i n terface  de sig n  which  was i n trodu ce d by  [2] , to provide  the de sign ers with  guid e l i nes i n  devel oping th int e rface d e sig n  ea sily. Me anwhile, [3] has  provide d   8 g eneral  gui deli nes call ed  th gold en rule s  a s  the  ba si c rule s for  de signi ng the  u s er  Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM NIKA   e-ISSN:  2087 -278X       Guideli ne for  the Graphic  Desi gn of Web Application for Child ren s ... (Tengku Si ti Meriam 3131 interface. Ho wever, th e st udie s  cond ucted by  Niel sen an d She n e iderman  are  taken  as th e   gene ral gui de lines to be a d here d  to, gen erally, by all desig ners of u s er inte rfa c e.   A recent  stu d y ca rrie d  o u t by [4]  has p r o d u c ed  130 inte rfa c e d e si gn g u ideline s   spe c ifically for children a ged 3 - 12 ye ars. Me an wh ile, a study on sp ecifi c  g u ideline  on the  grap hic de sig n  of  web  ap pl ication  interfa c ha s lo ng  b een  co ndu cte d  by  re sea r ch ers [5] a nd, [ 6 Neverth e le ss,  studie s   on th e creatio n of  grap hic  de sig n  guid e line s   spe c ifically for children  hav never be en condu cted.          Figure 1. The  Coordinatio n  Proce s s of Guideline s       Thus, th e obj ective of thi s   study is to co ndu ct a rese arch o n  the p r odu ction  of  grap hic  desi gn  gui de lines whi c h are spe c ifical ly  for  ch ild re n. The meth odolo g y of this  study is  the   comp ari s o n  a nd  coo r din a tion of g u ideli n es in  inte rface de sign  for  child ren  an guidelin es wh ich    LAYOUT   1. To provide s p ace in between the co m ponents, at lea s t   six pixels.  T h er e s hould  be 12 hor izo n tal pixels and 1 8   ver tical pixels between the labels and gr oups o f   co m ponents.  2.   Separate   lengthy   infor m ation   into   groups   of   simpl e r   infor m ation   such   as   using   r adi o   b u tto n   or   che c k   box e s .      3.   To   align   elements   of   the   same   type   on   the   left   side   of   each   othe r.    4.   To   mi ni mi z e   the   numbe r   of   align m ent   points   in   th e   windows.   5.   To   use   the   ri g h t   justif ic ation   between   groups   of   comp onent s   or   wi ndows   in   gener a l   on   the   sc reen.    6.   To   use   white   background   that   is   the   empty   space   7.   To   use   consiste nt   alignm ent    8.   Bal a nced   division   of   space   in   the   window   for   dark   an d   bright   col o urs      9.   The   design   of   window   which   do es   not   exce ed   50%   mor e   spac e   in   one   dimension        USERS’   VI SUAL   PE RCEPTION     1.   A   col o n   must   be   placed   at   the   en d   of   a   label.      2.   To   label   names   on   the   obje cts     3.   Align to the left of the co m ponents and labels,  except  for  all labels in the gr oup wh ich have differ e nt length s .   4. To na m e  the lab e ls accuratel y   5.  T o  be consistent in labelling  6.  Do not use the sam e  label  m o r e  than once in the sa m e   window.   7.  T o  use f ont siz e  and ty pe which  has easily  r eadable  typef ace and to use only one type .   8.  Do not  use  m o re than two or  t h r ee dif f er ent fo nt siz e in the sa m e  application.  9.  Do not use  gr ap hic backdr ops  or  “water m a r k s” behind  the text    TH E USE  OF CO LOUR  1.  T h e use of the s a m e   color  on item s  which ar e r e lated  2.  T o  be consistent in the use of colo ur  on objects or  text  which have the sam e   m eaning.  3.  T o  use contr a sting for e gr ou nd and  backgr oun d colour .   4.  T o  use a  m a xim u m  of between thr ee to seven color s   only .   GENERAL  INTE RACTION   1. To provide the  correcti on of wrong spelling together  with the nam e  dom ain.     2.   T o  lay  the found ation of go od desi gn   3.  T o  design scr e en with no need for  scr o lling  4. To use the i n teraction sche m e  according to the  standar d   5. To use the f o r m   according to the standard  6.  T o  avoid using  sub- featur es,  only   m a in featur es ar being use   7.  Not to ask childr e n about their  per s onal inform atio n   which  m a y  cause  them  any har m ,  on  the website    8. To acknowledge their success i m m e diatel y  after th inf o r m ation has be en accessed      9. To ensure that  each f eature is  of  hi gh  quality and  functions well  10.  T o  pr ovide clear  instr u ctions  11.  T o  use the s y m bols or  notations in t h m a nn er   co m m only used.     TEX T   12.  T o  use r e lative and sim p le fonts  13. To place the te xt on a solid backg r ound   14  Not to use anim a t ed texts   15. T o  use  sim p le texts which can  be   under s too d  o n ly .  T o   m i ni m i ze the nu m b er  of texts on the scr een         16. To consistently  m a inta in the l e vel  of readability  17. To differentiate the content for adults   18. To state expli c itly to the  users  that they a r e in th inform ation zone for  adults     19.  T o  co m e  up with shor t and clear  textual instr u ctions   20.  T o  pr ovi de  instr u ctions whic h can alway s  be  accessed   21.  T o  assist seas oned r eader s by  p r oviding text s with  differ e nt explanati ons     GRA P HI C USE R  INTERFA CE ( G UI)   22.  T o  widely pr es ent web content on the site  23. To use accurat e  and not vague labels  24.   T o  m a ke clickable  item s  appear   clickable  25.  T o   m a ke sim p le “r ollove r” vis u als into clickabl e   i m ages   26.  T o  design te xt butto ns which  look like they  a r clickable  27.  T o  be  cautious   of  pr o m otional elem ents which attr act  too m u ch  attention   28.  T o  differ e ntiate adver tisem ents  fr o m  content   29.  T o  show the exit    30.  T o  custo m ize  the website being developed with th adver tiser s Evaluation Warning : The document was created with Spire.PDF for Python.
                               e-ISSN: 2 087-278X   TELKOM NIKA   Vol. 11, No. 6, June 20 13 :  3130 – 3 133   3132 are  spe c ifical ly for the graphi c de sig n  of w eb  app lication i n terf ace s . Th e compa r ison a nd  coo r din a tion  are  spe c ifical ly on  gra phi c de sign  ele m ents.  Gra phi c de sign  is o n e  of th e m a in   crite r ia i n  the   desi gn  of u s e r  inte rface, which   de scrib e s  the  ove r all  grap hic layou t  appe ara n ce  on  the screen, th e aspe ct of space,  margin s an d font type and  si ze  se lection, a s   we ll as the  use  of  colo ur. Th e contributio n of  this stu d y is t he gui deline s  on the  gra phi c de sig n  for  web  appli c ati ons  whi c h are sp ecifically for childre n.      2. Rese arch  Metho d   The m e thod ol ogy of thi s   st udy is throug h th e   consoli dation and   co ordin a tion of Section s   A and B in the backg ro und  study. The g u ideline s  o n  childre n’s int e rface de sig n  d e velope d by [4]  become th main fou ndati on of thi s   stu d y. Each  ite m  in th e first  guidelin whi c ha s the  same  meanin g  as t he se co nd gu ideline  will be  removed.   The g u idelin e on  chil dre n ’s g r a phi desi gn i s  th e re sult of t he con s olid a t ion and   coo r din a tion  of the guid e l i ne on th e g r aphi desi g n of web a p p licatio n inte rface s   with t h e   guidelin e for the develo p m ent of childre n’s interfa c e.       Table1. Gui d eline s  on Gra phic  De sign f o r Chil dren   Gener a l   1.  Separate length y  information into  groups  of simpler  information such as using  radio button  or  check boxes 2.  The design of  w i ndo w   w h ich does  not ex ceed  50%  more space in o ne dimension  3.  To provide t y pos  sy n t ax t ogethe w i th the  name do main  4.  To la y  the  found ation of good des ign  5.  To design screen  w i th no  need fo scrolling    6.  To use the inter a ction scheme according to the sta ndard   7.  To use the fo rm  according to the  standard   8.  To avoid using sub-featu r es,  onl y main features ar e being used   9.  Not to ask children about their  pe rsonal informatio n which ma y  cau s e them an y  h a r m , on the  w ebsit 10.  To ackno w ledge  their success im mediatel y  after  th e information has  been accessed  11.  To ensure t hat e a ch feature is of  high qualit y  and f unctions w e ll  12.  To provide clear i n structions  13.  To use the s y m b ols or notations in the manne r co mmonl y  used   La y o ut   14.  To provide space in betw een th e components, at leas t six pixels. There should be  12 horizontal pixels and 18   vertical pixels betw e en the labels  and groups of co mponents.   15.  To align element s of the same t y p e  on the left side of each other   16.  To use simple text fonts and la rge  fonts relatively  17.  To place text  on  solid background that is not on ba ckground  w i th images or d y namic background   18.  Balanced division of space in t he w i ndo w for d a rk  and bright colour 19.  To use simple texts  w h ich can be  understood o n l y To minimise the number of t e xt o n  the screen    20.  Not to use anima ted text   21.  To customize the w e bsite being d e veloped  w i th th e advertisers  22.  To use the right j u stification betw e en groups of co mponents or  w i n d o w s in general  on the screen   23.  To differentiate  a d vertisements fro m  content  24.  To provide a sign  or indication to exit the s y stem   25.  To be cautious of  promotional ele m ents which attr act too much atte ntion  26.  To differentiate t he content for  ad ults  27.  To state e x plicitly to the users that  the y  a r e in the in formation zone f o r adults  28.  To come up  w i th  short and clear t e xtual instructions  29.  To provide instru ctions  w h ich can alw a ys be accessed  30.  To assist season ed reade rs b y  p r ov iding  text w i th different  e x planat ions  The U se o f  Col o ur  31.  To use the same  colour  w i th relat ed items   32.  To be consistent in the use of colour on  objects or t e xt  w h ich have t he same meanin g   33.  To use contrastin g foregr ound an d  background colour   34.  To use a ma ximu m of bet w een  thr ee to seven colors only  35.  To use accurate  and not vague la bels  36.  To label names o n  the objects  37.  To make clickable items appear clickable   38.  To consistently   maintain the level of readabilit y   39.  To add  “visual rollover” featur e on  clickable images  40.  A colon must be placed at the end  of a label.       Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM NIKA   e-ISSN:  2087 -278X       Guideli ne for  the Graphic  Desi gn of Web Application for Child ren s ... (Tengku Si ti Meriam 3133 Figure 1 sho w nine layo u t  guideline s  li sted by  [5] an d su ppo rted b y  [13], three items  (4,  6 and 7) h a ve been remo ved and two  other item s (2 and 9) a r e take n as the g eneral guid e li nes.  The guid e line s  on u s e r s’ vi sual p e rcepti on as o u tlin e d  by [5] show that six items (4, 5, 6, 7, 8  and 9 )  have  been  remove d. The third i t em is dee m ed as  overla pping  with the first item, thus  only two item s that a r e ite m  one  and t w o a r e ta k e n  to com p lem ent the g u ide lines. Fi nally  the  guidelin e o n   colo ur  as  stat ed by [16] li sts fou r   ge nera l  guideli n e s  for  colo ur. All  four g u idelin e s   are in clu ded  as the  guid e line s  for g r aphi c de si gn  for stud ents becau se [4]  have not  stated   spe c ifically about the use of colou r     3. Results a nd Analy s is  Next, the  re sult of g r ap hic  desi gn  guid e li nes for  stu d e n ts  a r e   liste d in  Ta ble 1, that is 40   items  whi c con s i s t of th e gen eral co mpone nt, la yout, the u s of colo ur  and  stud ents’ vi sual  perceptio n. The list of guideline s  prod uce d  is  the rule which could be u s e d  by  interface   desi gne rs in  developing i n terfaces  whi c h are sp e c i f ically for chi l dren b a sed on the grap h i desi gn criteri a     4. Conclusio n   This stu d y has produ ce d  40 guidelin es for g r ap hi c de sign a s  a guide in d e sig n ing   child ren’ s int e rface. The s e guid e line s   are th e re sult  of the revie w  of liter ature  on the g u ideli nes  of student s’ interface de sign and g u i deline s  on  t he interfa c e  desig n of web a ppli c at ion.  Comp ari s o n  and coordina tion have be en made  on  eac h item according to th e gra phic  de sign   stru cture whi c h have b een  analyse d     Referen ces   [1]  A Marcus, EW  Gould. Cr oss c urrents: Cu ltu r al  Dim ens ions  and  Glob al  W eb User Int e rface Des i gn .   T he ACM Dig ital Li brary . 200 0; 7(4): 32-46.   [2]  K Mullet, D Sano.  Des i g n in Visua l  Interfac es Co mmunic a tion Orie nted T e chn i qu es . SunSoft Press,   Prentice H a ll. 1 995.   [3]  T engku Siti Meriam, T engku  W ook, Siti Sal w a S a lim.  U s er T e sting o n  Chil dre n s W ebOPAC: A  Malaysi an Ex peri ence.  T h e  Sevent h Asi a -Pacific  Conf erenc o n  Co mputer H u ma n Interacti o n .   T a i w a n . 200 6.  [4]  T engku Siti M e riam, T engku  W ook, Siti  S a l w a h  S a lim.  Explori n g  chi l d r en s  r e q u ire m ents for t h e   grap hic d e si gn  of W ebOPAC .  Lecture N o te s in Com puter  Scienc e, Spri nger, ISI Scie nce Cit atio n   Exp a n d e d . 201 1:  627-63 6.   [5] WO  Galitz.  T h e Essenti a l Gu ide to  User Int e rface D e sig n : An Introd uctio n  to GUI Desi gn Pri n cip l e s   and T e ch ni que s.  W ile y  Com p uter Publ ishi ng . 2002.   [6]  R Oosterholt, M  Kusano, G Vries.  Interacti on d e sig n  a nd  hu ma n factor supp ort in the  deve l op ment o f   a pers o n a l c o mmu n icat or for  chil dren Com puter H u ma n Interactio n, Va ncouv er, BC C ana da, ACM .   199 6.  [7]  G Eason, B No ble, IN Sne d d o n . On Certain I n t egra l s Of Lip schitz-Ha nkel  T y pe Inv o lvi ng  Products Of   Bessel F uncti o n s. Phil. T r ans. Ro y .   Soc. Lo n don. 19 55; A2 4 7 : 529– 55 1.  [8]  Neils en J. Usa b ilit y En gin eeri ng. San Franci sco, USA: Morgan Ka ufman n  Publ ishers. 19 93.   [9]  Shne iderm an  B, Plaisant C. Desig n i ng T he  User Interface.  USA: Addison  W e sle y . 2 0 0 4 [10]  Kahn  P, L enk   K.  Maga z i n e  In teractions. Pr in ciples  of  T i po g r afi for  User  In terface D e si gn .  USA: ACM   Press. 1998; 5( 6): 15-29.   [11]  Gilutz S, Niels on J.  Usabil i ty of W ebsites for Childr en: Desi gn Guid eli nes for T a rgetin g Users Aged 3 12 Years.  F r e m ont, Niels on  Norman Gro u p .  2011.   [12] Benso n  C, Elm an A, Nick e ll  S ,  Robertso n  C.  Z .   Visual D e si gn. GNOME H u man Interf ace  Guide lin es T .  G. U. Project; Boston; F r ee Soft w a r e  F oun datio n; Inc.; Version 1.1: 20 02 [13] Barnev eld  JV.  User Interfaces  for Personal i z ed Infor m atio System.   T e lematica Institute .  2003: 1-8 2 [14] Dab bag N.  Gestalt and Instr u ction a l Des i g n . Clare T o rran s . 1999.   [15]  Cha parro B, B a ker JR, Shaik h  AD, Hull S, B r ad y L.  Rea d i n g Onlin e T e xt: A Compar ison  of F our W h ite  Space L a yo uts.  Usabilit y N e w s . 2004; 6(2).   [16]  Götz V, Erben B.  Color & T y pe for the Scree n Rotovisi on S A : 1998.   Evaluation Warning : The document was created with Spire.PDF for Python.