6 Digitaalisen materiaalin käyttöliittymästä www-sivu tai muu digitaalinen tuote, joka sisältä hypertekstiä Hyperteksteillä viitataan toisiin www-sivuihin, www-osoitteisiin, dokumentteihin ja muuhun digitaaliseen materiaaliin, joka ovat assosiatiivisa toistensa suhteen, mutta toisista riippumattomia osioita. Hypertekstin lanseerasi Ted Nelson 1960 Digitaalinen materiaali voi olla joko www-sivu tai jokin muu digitaalisessa muodossa tuotettava materiaali, joka koostuu hypertekstistä. Hyperteksti on teksti, josta päästään toiselle www-sivulle, www-osoitteeseen, dokumentteihin (Word, jne..) ja muuhun digitaalisessa muodossa olevaan materiaaliin (kuvat, äänet, videot, animaatiot jne..) Ted Nelson vuonna 1960 tarkoitti hyperteksti termillään epälineaarista kirjoittamista, joka koostuu assoiaatiivisesti toisiinsa kytketyistä tekstiosioita, jotka kuitenkin ovat toisistaan riippumattomia osioita.

6 Digitaalisen materiaalin käyttöliittymästä/jatkuu Navikointirakenne eli käyttöliittymä koostuu hyperteksteistä tai linkeistä Käyttöliittymä: Selkeä Otsikot kuvaavat asiasisältöä Päätasot Alatasot Moitteeton toiminta Navikointirakenne eli käyttöliittymä koostuu hypertekstistä tai linkeistä. Sisällön esittäminen hypertekstimuodossa vaatii laatijalta tarkkaa suunnitelmaa sivuston navikointirakenteesta eli käyttöliittymästä.  Käyttöliittymän  tulisi olla selkeä, ja sen otsikoiden tulisi kuvata asiasisältöä. Käyttöliittymässä tulisi erottaa päätasot ja päätasojen alitasot sekä toimia moitteettomasti

6.1 Käyttöliittymän suunnittelusta Karkea esitys synopsiskessa Valmis asiakäsikirjoittamisvaiheessa Pohdi käyttöliittymää suunnitellessasi: Miten sivustolta löytää haluamansa? Tarvitaanko navikaatioapuja: hakemistoa, sisällysluetteloa, karttaa tai kenties vapaasanahakua? Käyttöliittymää voidaan esittää jo karkealla tasolla synopsiksessa. Asiakäsikirjoittamisessa se on jo suunniteltu valmiiksi ja sisältö palasteltu sopiviin sisältökokonaisuuksiin. Visuaalinen ilme tehdään tuotantokäsikirjoituksessa. Käyttöliittymän suunnitteluun tulee varata aikaa, sillä se toimii runkona selkeän sisällön esityksessä lopullisessa tuotteessa. Käyttöliittymää sunnitellessa on hyvä pohtia mitä sisältöjä sivustolta tulee löytyä. Jos sisältö on laaja, niin toteutetaanko navikointirakenteen lisäksi kokonaiskuvaa helpottavaa hakemistorakennesivua, sisällysluetteloa, visuaalista karttaa tai vapaasanahakua. Nykyisin monilla kaupallisilla sivuilla on vapaasanahaku. Esim. Nettikirjakaupan sivuilta on helppo etsiä kirjallisuutta vapaasanahaulla.

6.1 Käyttöliittymän suunnittelusta/jatkuu Onko rakenne sellainen, että jokaiselta sivulta voi päästä jokaiselle sivulle vai riittääkö, jos jokaiselta sivulta pääsee joillekin sivuille? Mitä linkkejä järjestelmän pääsivulta lähtee? Leveä vai syvä rakenne? Mietitään miten käyttäjän on hyvä liikkua rakenteessa sisällön loogisen etenemisen suhteen. Rajataanko linkityksiä päätasojen välillä siten, että vain yhden päätason alalinkkeihin on mahdollista päästä (puurakenne) vai tuleeko mistä tahansa navikoinnin ososta päästä mihin tahansa muuhun osioon. Mietitään pääsivun pääotsikkolinkit ja muut sivulta lähtevät linkit. Mietitään myös miten paljon pääotsikkotasolla on sisältöä jaoteltu osiin. Jos pääotsikoita on paljon, niin rakenteesta tulee leveä. Jos pääotsikoita on vähän, niin alaotsikoita tarvitaan mahdollisesti enemmän ja useammassa tasossa, joten rakenteesta tulee syvä.

6.1 Käyttöliittymän suunnittelusta/jatkuu Linkkien nimeäminessä mietitään käytetäänkö yhtä sanaa vai useampaa. Linkeissä voi käyttää kuvasymbolia kuvaamaan tapahtumaa (Suurennuslasi) Linkkien nimeämisessä kannattaa olla tarkkana. yhden sanan linkki on joskus liian lyhyt. Koko lauseen käyttäminen linkkinä näyttää liian pitkältä, varsinkin jos se ulottuu useammalle riville. Myös tämä- tai tästä-sanan käyttäminen linkkinä on mautonta: "Klikkaa tästä päästäksesi ”Kajaanin kaupungin sivuille”. Myös kuvia käytetään kuvaamaan linkin kohdetta (esimerkiksi suurennuslasi kuvaa linkkiä hakusivulle).

6.2 Käyttöliittymän rakenteen suunnittelusta Rakenteesta muodostuu käyttöliittymän ulkoasu Lineaarinen rakenne Kalanruotorakenne Puumainen rakenne Verkostorakenne Matriisirakenne Pyramidirakenne Labyrinttirakenne Hydridirakenne Rakenne määrää käyttöliittymän ulkoasun. Rakenne vaihtelee sen mukaan miten käyttäjän halutaan edetä sisällön suhteen. Yleisiä rakenteita ovat lineaarinen rakenne, kalanruotorakenne, puumainen rakenne, verkostorakenne, matriisirakenne, pyramidirakenne, labyrinttirakenne tai edellä mainituista rakenteista koostuva hybridirakenne.

6.2.1 Lineaarinen rakenne Seuraava – edellinen- painikkeet Laskun maksaminen, kirjan sisältö Lineaarisessa rakenteessa edetään periaatteessa ensimmäisestä asiasta viimeiseen. Yleensä painonappeina on seuraava- edellinen (next - previous). Tällainen rakenne on www-sivuilla harvinainen, mutta käytettävissä ohjatuissa kiertoajeluissa (guided tours) ja haluttaessa käyttäjän käyvän läpi kaikki vaihtoehdot esim. laskun maksaminen verkkopankissa.

6.2.2 Kalanruotorakenne Laajennettu lineaarinen rakenne. Lineaarisuus on esim. päätasoilla Opetusohjelmat, markkinointiesitykset Kalanruotorakennetta voidan pitää laajennettuna lineaarisena esityksenä. Se ei siis ole puhtaaasti lineaarinen, vaan lineaarisuus on istutettu esim. Päätasoille ja päätasojen sisällössä voidaan edetä ei-lineaarisesti. Esimerkiksi kuvassa keskilinja edustaa sisällön loogista etenemistä päätasolla lineaarisesti, ja päätasojen sisällä voidaan edetä ei-lineaarisesti linkkien suhteen esim. Syventää päätason tekstin sisältöä.

6.2.3 Puumainen rakenne Hallitaan laajoja sisältöjä Päätasot (pääoksat)- -alatasot (sivuoksat) Soveltuu sisällöille, jotka voidaan jakaa selkeisiin kokonaisuuksiin Puumaisella eli hierarkisella rakenteella hallitaan laajoja rakenteita. Siinä edetään pääosioista edelleen alaspäin. Sisältö jaetaan loogisiin päätason kohtiin. (Pääoksat). Jokainen pääkohta sisältää alakohtia eli sivuoksia. Sisällössä edetään yleisestä sisällöstä tarkennettuun sisältöön. Puumaisessa rakenteessa voi olla myös oikopolkuja ylemmille tasoille. Puumaisella rakenteella saadaan sisällöt luokiteltua selkeisiin kokonaisuuksiin. Internetissä yleensä sivuston aloitussivusta (index-sivulta) käsin on nähtävissä tällainen rakenne. Puurakenteinen, hierarkkinen järjestys on usein lukijankin kannalta helposti hahmotettava kokonaisuus, mutta rakenteesta ei saisi tulla liian syvä muttei toisaalta liian matalakaan. Varsinaiseen asiaan pääsemiseksi ei ole mukava kahlata neljän - viiden linkin kautta.

6.2.4 Verkostorakenne Verkosto – eli assosiatiivinen rakenne Lähestyminen mistä tahansa suunnasta Solmukohdista päästään mihin tahansa muuhun osioon. Yleinen www-sivuilla nykyään Verkostorakennetta kutsutaan myös assosiatiiviseksi rakenteeksi. Verkosto rakenteessa asiaa voidaan lähestytä miltä suunnalta tahansa. WWW on pääasiassa juuri assosiatiivisten linkkien varaan rakennettu ympäristö ja niiden klikkailu on kaikille tuttua. Koska jokainen järjestelmän solmu (sivu) voi olla ensimmäinen tai viimeinen, pitää sivun suunnittelijan ajatella yhtä sivua kokonaisuutena: sivun ymmärtämiseen ei tarvitse kulkea tiettyjen linkkien kautta. Kuitenkin jokaisesta solmusta pitää päästä käsiksi sivuston muuhun materiaaliin, ainakin aihepiirin pääsivulle.

6.2.5 Matriisirakenne Muistuttaa matriisirakennetta Käyttäjä valitsee lähestymistavan 2002 2003 2004 2001 Ford Fiat Matriisirakenteessa tieto jäsennellään monella eri tavalla ja käyttäjä voi valita oman lähestymistapansa. Matriisirakenne muistuttaa tietokantarakennetta, jossa valitaan lähestymistapa sisältöön ja se valinta suodattaa sisällön valinnan suhteen. Esimerkissä esim. on kuvattu autojen myyntiluvut siten, että käyttäjä voi hakea hakea tietoa auton mallin mukaan ja tarkastella kehitystä vuosiluvuttain tai valita vuosiluvun ja tarkastella autojen merkkien myyntilukuja vuosittain. Toyota Nissan

6.2.5 Pyramidirakenne Paljon erilaisia vaihtoehtoja edetä materiaalissa Pelit ja simulaatiot Pyramidirakenteessa käyttäjällä on mahdolllista edetä rakenteessa monien vaihtoehtojen kautta. Käyttäjä saa itse valita miten etenee sisällön suhteen. Soveltuu mm. Peleihin ja simulaatioihin

6.2.6 Labyrinttirakenne Verrattuna pyramidirakenteeseen on labyrintissa rajatumpi liikkuvuus Rakenteen sisään yhdistetty lineaarisuutta Pelien vaikeustasot Labyrinttirakenteessa käyttäjä voi vakita useampi eri tapoja edetä sisällössä, mutta sisällön rakenteen sisällä on etenemistä rajattu lineaarisen rakenteen keinoin. Peleissä esimerkikis valitaan erilaisia pelien´vaikeustasoja

6.2.7 Hydridirakenne Sovelletaan edellä mainittuja rakenteita rinnakkain Hydridirakenteessa useita eri rakenteita sovelletaan samassa järjestelmässä rinnakkain. Sivuston alku voi olla puurakenteinen, mutta edetessä muuttuu assosiatiiviseksi ja joihinkin soluihin voi päästä vain lineaarista reittiä pitkin.