Me amodelling and ans o ming si emaps o
econciling in o ma ion a chi ec u e and
na iga ion design
A. M. Reina Quin e o1and J. To es Valde ama1
Depa men o Languages and Compu e Sys ems
E.T.S. Ingenie ´ıa In o m´a ica.
A da. Reina Me cedes, s/n.
41007 Se ille, Spain
{ einaqu, j o es}@lsi.us.es
h p://www.lsi.us.es/~ einaqu
Abs ac . 1Some o he g ea es challenges when de eloping In e -
ne si es a e ela ed o wo disciplines: In o ma ion A chi ec u e (IA)
and Na iga ion Design (ND). Howe e , he e is a disconnec ion be ween
hese wo ields, especially due o he misunde s anding ha in o ma-
ion a chi ec u e and web design a e mu ually exclusi e. A way o b ing
hese wo ields close and in eg a e hem in o mul idisciplina y p ojec s
is o ocus on deli e ables, because hey a e he a i ac s ha a e sha ed
among s akeholde s, cus ome s and all he membe s o he de elopmen
eam. This pape is ocused on one o he mos widely used in o ma ion
a chi ec u e deli e ables: si emaps. A me amodel o high-le el si emaps
is speci ied, as a way o de e mining he building blocks used in his kind
o deli e able. Fu he mo e, a se o model o ex ans o ma ions ha e
been de ined in o de o ha e a p elimina y websi e ske ch ocused on
s uc u al and u ili y na iga ion, he main conce ns ha a e add essed
in si emaps.
1 In oduc ion
Some o he g ea es challenges when de eloping a good In e ne si e a e no
always o a clea echnological cha ac e [7], and hey a e ela ed o wha should
be included on he si e, how he si e should be o ganized, and how use s will
be able o ind hei way a ound. These ques ions ha e been add essed om
wo di e en disciplines: In o ma ion A chi ec u e (IA) and Na iga ion Design
(ND). While in o ma ion a chi ec u e in ol es o ganizing, s uc u ing and la-
beling in o ma ion, na iga ion design in ol es echnical de elopmen and isual
design.
Howe e , esea che s ha e a gued ha he e is a disconnec ion be ween unc-
ional a chi ec u e and in o ma ion a chi ec u e, and also be ween business mo-
dels and echnical a chi ec u es [1]. This is due o conside ing ha in o ma ion
1This wo k has been pa ially suppo ed by he Spanish Minis e y o Science and
Technology and FEDER unds: TIN-2007-67843-C06-03 and TIN2007-64119
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
114
a chi ec u e and web design a e mu ually exclusi e. Thus, many imes bad de-
signs a e a consequence o he ma e ha in o ma ion echnology is oo sepa-
a ed om he design p ocess o is oo a in eg a ed in he design [11].
Al hough in o ma ion a chi ec u e can be conside ed as an ex ension o web
design [9], many cu en in o ma ion modeling app oaches (such as WebML [4],
OOHDM [10], and WAE2 [5]) ha e ailed o add ess high-le el aspec s, such as
a chi ec u al and business p ocess modeling and o in eg a e in o ma ion a chi-
ec u e in o design. This is due o ha ing ypically ocused on modeling a a
ela i ely low-le el and has caused ha high-le el concep s ha a e managed in
IA, such as main na iga ion and local na iga ion, don’ ha e a di ec coun e pa
in hese low-le el models.
Thus, i is impo an no only o in oduce IA in he web de elopmen p o-
cess, bu also o b idge he gap be ween in o ma ion echnology and design
p ocess. A good way o b ing hese wo disciplines close is o sha e a common
ocabula y, and o do so, a i s s ep is o sha e deli e ables, because hey ep e-
sen he in e es s o he di e en s ake-holde s in ol ed in a p ojec . Ha ing his
in mind, i is impo an o explici ly desc ibe deli e ables, in o de o see which
hei main building blocks a e. I we know he deli e able componen s, we can
do mappings and ans o ma ions. Thus, we p opose o allow e e yone o use
wha e e deli e able sui s hei needs he bes , and hen, o ans o m one deli -
e able in o ano he as a as i is possible. Fo example, si emaps and wi e ames
a e wo o he mos widely used deli e ables in IA. While si emaps deal wi h he
s uc u e o a websi e, wi e ames deal wi h he s uc u e o indi idual pages.
And, al hough hei ocus is di e en , he e is some in o ma ion hey can sha e,
o example, a si emap wi h a main na iga ion speci ica ion should p oduce a se
o wi e ames (one o each kind o page) wi h a main menu ha ing he numbe
o i ems speci ied in he si emap.
In his con ex , me amodelling is a key ac i i y o, on he one hand, desc ibe
explici ly deli e ables, and on he o he hand, lay he ounda ions o la e ans-
o ma ions. This pape is ocused on one o he mos widely used deli e ables in
IA, si emaps, and i p oposes i s explici desc ip ion by means o a me amodel.
The me amodel speci ies he si emap building blocks and i s ela ionships. Fu -
he mo e, in o de o ob ain a p elimina y ske ch o he web si e ocused on he
kind o na iga ion ha is speci ied in si emaps, a se o model o ex ans o -
ma ions a e de ined. The ans o ma ions will p oduce a se o HTML iles ha
will enable use s o ge a eel o he si e s uc u e, wi hou ge ing dis ac ed
by con en .
The es o he pape is s uc u ed as ollows: Sec ion 2 in oduces si emaps
as an IA deli e able. Then, in Sec ion 3, a me amodel o de ining he si emap
building blocks is speci ied. The model o ex ans o ma ions a e explained in
sec ion 4. This sec ion has been di ided in h ee subsec ions ha a e ocused
on he piece o ans o ma ions needed o gene a e he di e en unc ionali ies
o na iga ion (main, local o u ili y na iga ion). Finally, he pape is concluded
and some u he wo k is in oduced b ie ly.
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
115
2Si emaps
The e m si e map can ha e di e en meanings depending on he con ex [8].
Mainly, he e can be h ee di e en meanings o si emap: (1) a na iga ion me-
chanism used by si e isi o s; (2) si e maps ha a e de i ed om web si es,
con aining he lis o he di e en pages ha can be ound on he si e; and, (3) a
deli e able ha documen s he a chi ec u e o a si e usually used by de elope s
and designe s. In his sec ion we a e going o ocus on he deli e able, which is
one o he mos widely used web in o ma ion a chi ec u e ool o showing he
o e all s uc u e and hie a chy o a web si e.
As deli e ables, si emaps de ine s uc u al na iga ion in web si es and one o
hei main alues is ha hey allow designe s o an icipa e in o ma ion o gani-
za ion e o s. As a consequence, hese e o s can be co ec ed p io o ime and
money in es men . Bu , in spi e o hei popula i y, he e is no a s anda d bes
p ac ice o c ea ing si emaps. The ini ial ske ches a e usually d awn by hand,
and hen, a nea e e sion could be d awn wi h some kind o isual edi o . Some
in o ma ion a chi ec s and designe s use Visio o lay ou pages hie a chies and
c ea e connec ions be ween hem, bu hey could be also c ea ed in Wo d, Powe
Poin o any o he ool he designe is com o able wi h. Si emaps oge he wi h
wi e ames p o ide he amewo k upon wi h o base si e na iga ion.
The mos basic si emap [3] is simila o an o g-cha whe e boxes ep e-
sen pages o di e en a eas o he si e (Figu e 1 shows an example o a simple
si emap). Boxes a e connec ed by lines ha show he seman ic ela ionships be-
ween he a eas o he si e and may also ep esen na iga ion, bu hey don’
ha e o. Fo example, in some si emaps lines ep esen ela ionships be ween
con en wi hou explici ly sugges ing na iga ion. The place and connec ions im-
ply ha he e is a hie a chy be ween pages, in such a way ha he si e’s home
page is usually a he op o he cha .
Si emaps can be ep esen ed in a coa se-g ained o a ine-g ained way. On
he one hand, high-le el si emaps (also called bluep in s) show how he main
sec ions o a web si e i oge he . They do no show all pages. On he o he hand,
de ailed si emaps documen he si e ine -g ained. As i is imp ac ical o diag am
hund eds o pages, de ailed si emaps a e w i en in sepa a ed documen s, one
o each si emap sec ion.
As i has been men ioned p e iously, he e a e no ules on how si emaps
should look like, howe e , he e a e some common elemen s [8] ha usually a e
ep esen ed in many o hem:
–Node. Pages in he si e a e basic nodes in si emaps. Usually hey a e depic ed
as squa es.
–Connec o . Nodes a e connec ed in o de o show hei ela ionships. Si emaps
don’ show he associa i e links, bu s uc u al and u ili y na iga ion.
–Numbe ing Scheme. I is used o gi e each page a unique iden i ie , and
usually i is hie a chical (See Figu e 1).
–Labels. Each node has a i le which co esponds o he na iga ion label o
ha page.
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
116
Fig. 1. A high-le el si emap o a esea che web page
–Page A ibu e. In addi ion o he i le, o he page cha ac e is ics can be
indica ed, such as, he con en o ma (HTML, PDF); pages ha a e o
appea in pop-up windows; dynamic con en ; access igh s; he page ype
and page empla e; o unc ionali y and special ea u es.
–No es and Anno a ions. They a e used o exp ess some excep ions o special
condi ions ha a en’ able o communica e isually.
–Scope. Show pages ha a e in scope o ou o scope o he cu en p ojec .
–Ti le and Key. The si e map should ha e a i le and a e sion numbe o
da e.
3 Si emap me amodel
Si e s uc u e and na iga ion a e ela ed, bu hey a en’ he same hing. A
de ailed si e map shows all pages o a si e, bu he na iga ion is a limi ed iew
in o ha s uc u e. F om any gi en page in he si e, na iga ion is a cons ained
window o all a ailable pages [8]. Fo designing ou si emap me amodel h ee
main assump ions ha e been made:
1. Si emaps a e going o be modeled in a coa se-g ained way.
2. No all pages in a si e a e going o be modeled, bu he ones ep esen ed in
he si emap imply na iga ion. Tha is, i he e’s a ela ionship be ween wo
nodes, hen he e will be a link in he web si e.
3. Only a minimum se o he common si emap elemen s in oduced in he
p e ious sec ion a e going o be modeled, in o de o simpli y he me amodel
and o be he leas es ic i e as possible.
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
117
In o de o gua an ee hese assump ions, he si emap me amodel shown in
Figu e 2 has been p oposed. I s oo elemen is he Si emap me aclass. One
si emap is composed o ze o o mo e si emap elemen s. This is ep esen ed by
means o he e e ence named elemen s.Si emapElemen is he abs ac me a-
class ha con ains he p ope ies ha a e common o all he si emap elemen s.
Tha is, e e y si emap elemen has an id and a name. The e a e wo kinds o
elemen s: Node and A ea. One node ep esen s a page o se o pages in a web
si e, while an A ea models a se o nodes ha ha e a simila na iga ion unc-
ion. Node and A ea a e subclasses o he Si emapElemen me aclass. The id
a ibu e ep esen s a unique iden i ie , and, in he case o nodes, i is usually a
hie a chical numbe ing scheme. The oo o he si emap has been modeled as a
specializa ion o he Node me aclass named Home.
Fig. 2. The si emap me amodel speci ied in EMF
A eas and nodes can ha e a pa en (pa en associa ion) o no . Fo exam-
ple, a eas ha ep esen u ili y na iga ion do no ha e a pa en . This ac has
been modeled by means o an OCL cons ain . OCL cons ain s ha e no been
included in Figu e 2 in o de o imp o e i s eadabili y. All he OCL cons ain s
a ached o he me amodel a e explained below. One node can access o i s
child en by means o he child en e e ence ( he opposi e o pa en ). Fu he -
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
118

mo e, one A ea can con ain one o mo e nodes (nodes e e ence). Figu e 1 shows
h ee a eas ha ha e been labeled as Main Na iga ion,Local Na iga ion and
U ili y Na iga ion, espec i ely.
Anno a ions a e he mechanism used o a ach addi ional in o ma ion o a
si emap elemen . The Anno a ion me aclass is used o model anno a ions. The
addi ional in o ma ion is ex ual and i is modeled by means o he commen
a ibu e. The associa ion anno a ions ep esen s ha one si emap elemen
can con ain ze o o mo e anno a ions. As his associa ion is bidi ec ional, an
Anno a ion can access o i s Si emapElemen ia i s opposi e e e ence, anno-
a edElemen .
In addi ion o he me aclasses, h ee di e en enume a ions ha e been de ined
(PagePu pose,A eaType,NodeType). PagePu pose speci ies he main aim o a
node o se o nodes. Acco ding o his c i e ion, pages (and, as a consequence,
nodes) can be classi ied in h ee main ca ego ies [8]: na iga ional pages, con en
pages and unc ional pages. The aim o na iga ional pages is o show he use
he pa h o i s inal des ina ion. Examples o his kind o pages a e he home
page o some galle y pages. Con en pages a e hose ones ha use s a e looking
o , while unc ional pages a e hose ones ha allow use s o inish ce ain asks,
such as sea ching o some in o ma ion o sending an e-mail.
A eaType de ines he na iga ion aim o a se o nodes ( he ones ha a e
included in he a ea). In [8] h ee main ca ego ies o na iga ion aims ha e been
de ined: s uc u al na iga ion, associa i e na iga ion and u ili y na iga ion. As
i has been men ioned in Sec ion 2, si emaps ep esen s uc u al na iga ion, ha
is, na iga ion ha links pages ha belong o he si e hie a chy. I is supposed
ha e e y page is linked o he one ha is abo e and he ones ha a e below in
he hie a chy. Howe e , ou si emap me amodel also add esses u ili y na iga ion.
U ili y na iga ion connec s pages ha help use s o use he si e. The u ili y
na iga ion (o suppo ing na iga ion) is used o supplemen global na iga ion.
Usually, i con ains links o pages ha youd like o ha e on e e y page, bu don
need o ha e he same isual weigh as you global na iga ion. Usually hey’ e
ou o he si e hie a chy. In ou si emaps u ili y na iga ion is depic ed as an a ea
ha is d awn ou o he si e hie a chy.
Main na iga ion and local na iga ion a e wo kinds o s uc u al na iga ion.
Main na iga ion (also known as global na iga ion) is he menu o se o links
ha appea s on e e y page o he si e and links o all o he main pages. Local
na iga ion guides a use o ce ain sec ions in a long page.
Finally, Node Type indica es i he node ep esen s a simple page (SIMPLE)
o a simila se o pages (STACK). Edi o s usually ep esen his by using wo
di e en shapes.
In o de o main ain he me amodel as simple as possible, some design deci-
sions ha e been speci ied by means o OCL cons ain s. The cons ain s exp essed
in an in o mal way a e he ollowing ones:
–A eas whose ype is UTILITY_NAVIGATION don’ ha e a pa en . Tha is, as
u ili y na iga ion is ou o he si emap hie a chy, he u ili y na iga ion a eas
ha e no pa en .
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
119
–The Home node doesn’ ha e a pa en and i s p ope y pageType should be
FUNCTIONAL_PAGE, by de ini ion.
–A node ha belongs o an a ea has he same pa en han he a ea in which
is included, only i he a ea is no an u ili y na iga ion a ea.
–Nodes ha belong o he main na iga ion a ea can’ be included in o he
a eas.
–I he node is an ex e nal si e, hen i s sou ce p ope y mus ha e a alue
( he URL ha poin s o ha ex e nal si e).
–The e only can be one a ea wi h i s ype equals o MAIN_NAVIGATION. Tha
is, main na iga ion is unique o he en i e si e.
4 T ans o ma ions
I we look a , objec i ely, s uc u al and u ili y na iga ion, we ealize ha hey
a e essen ially a lis o links o a ious pages on he websi e [6]. The model- o-
ex ans o ma ions desc ibed in his sec ion a e based on his idea. Thus, hey
ha e as inpu a model ha con o ms o he me amodel de ined in sec ion 3 and
he esul is a se o HTML iles ha con ains s uc u al and u ili y na iga ion.
This se o iles will enable use s o ge a eel o he si e s uc u e, wi hou
ge ing dis ac ed by con en . Each node in he si emap will p oduce an h ml
ile. Figu e 3 shows one o he HTML iles ob ained om he si emap depic ed in
Figu e 1. Conc e ely, i is he one gene a ed om he node whose id and name
a e, espec i ely, 5.3 and All. As i can be seen, he name o he ile is composed
o he node id, a dash , he name and he .h ml ex ension, and i shows only he
h ee ypes o na iga ion ha a e add essed by si emaps. The u ili y na iga ion
is placed a he op, he main na iga ion is in he middle (displayed as a abbed
ba ), and inally, local na iga ion is a he bo om.
Fig. 3. File 5.3-all.h ml ob ained om he si emap node wi h id equals o 5.3
Basically, as na iga ion can be seen as a lis o links, he ans o ma ions
a e going o gene a e HTML lis s o each kind o na iga ion. La e , hese lis s
will be o ma ed wi h di e en CSS s yle shee s. The ans o ma ions ha e been
implemen ed wi h MOFSc ip [13]. The es o he sec ion gi es a mo e in dep h
iew o he ans o ma ion ocusing on he h ee ypes de ined abo e (main, local
and u ili y na iga ion).
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
120
4.1 Main Na iga ion
Main na iga ion (also known as global na iga ion) [12] is a na iga ion ha
appea s on e e y page o he si e and links i s main a eas. This implies ha
he HTML lis gene a ed o his kind o na iga ion should be copied in o each
gene a ed HTML ile. Figu e 4 shows he piece o HTML code ha is gene a ed o
he main na iga ion speci ied in he si emap depic ed in Figu e 1.
Fig. 4. T ans o ming main na iga ion.
The igu e also shows how he isual aspec o he main na iga ion can a y
only by applying di e en CSS s yle shee s. In his case, h ee di e en s yle
shee s ha e been de ined: mainNa Ve .css, ha displays main na iga ion as a
e ical lis o links; mainNa Ho .css, ha ep esen s i as a ho izon al ba ; and,
inally, mainNa Tab.css, which shows main na iga ion as a abbed ho izon al
ba .
4.2 Local Na iga ion
Local na iga ion [8] is used o access lowe le els in a s uc u e, below main
na iga ion. Local na iga ion o en wo ks in conjunc ion wi h a global na iga-
ion sys em and is eally an ex ension o he main na iga ion. The h ee mo e
common a angemen s o local and main na iga ion a e: in e ed-L, ho izon al,
and embedded e ical. In he i s case, main na iga ion is usually placed a
he op o he page, and local na iga ion is ep esen ed as a e ical link lis .
The second case, he one depic ed in Figu e 5, ep esen s local na iga ion as a
second ow o op ions unde a ho izon al main na iga ion. Finally, he embed-
ded e ical a angemen shows main na iga ion in a e ical menu and local
na iga ion be ween he main na iga ion op ions in a ee-like s uc u e.
Figu e 5 shows he piece o HTML gene a ed o local na iga ion. The CSS
s yle shee , displays his na iga ion as a ho izon al ba , ha i is placed below
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
121
Fig. 5. T ans o ming local na iga ion.
he main na iga ion ba . In his case, he piece o gene a ed HTML code is no
inse ed in o e e y node. I should only be included in he nodes ha belong o
he local na iga ion a ea (nodes 5.1, 5.2, 5.3 and 5.4), he pa en o he local
na iga ion a ea (node 5), and, in case he e a e some, he child en o he nodes
ha belong o he local na iga ion a ea.
4.3 U ili y Na iga ion
U ili y na iga ion (also known as suppo ing na iga ion) [12] is used o supple-
men global na iga ion. Usually, i con ains links o pages ha you would like
o ha e on e e y page, bu hey do no need o ha e he same isual weigh as
he global na iga ion. As a consequence, he piece o HTML code gene a ed o
u ili y na iga ion should be included in e e y page.
Fig. 6. T ans o ming u ili y na iga ion.
Figu e 6 shows he piece o HTML code gene a ed o u ili y na iga ion. The
isual aspec is ob ained by applying he u ilNa .css s yle shee .
5 Conclusions and Fu he Wo k
One o he ways o app oaching in o ma ion a chi ec u e and na iga ion design
is o sha e deli e ables, because i is a way o ha ing a common ocabula y. Thus
Ac as de los Talle es de las Jo nadas de Ing. del So wa e y BBDD, Vol. 3, No. 2, 2009
ISSN 1988–3455
SISTEDES, 2009
122