Analyse af grænseflade

Design af web-sider kræver omtanke. Web-sidernes formål skal være identificeret, idet designet skal være afstemt til sidernes indhold. Projektgruppens web-sider har til formål at forklare princippet bag cookies og vise eksempler på brugen af dem. Desuden skal web-siderne fungere som en online projektrapport med samme indhold som en papirbaseret eksamensrapport.

Vores projekt består af mange web-sider, som kan inddeles efter forskellige formål. Derfor skal designet gøre det nemt at overskue web-siderne og præsentere en struktur i materialet, så der opstår en rækkefølge i siderne, der kan sammenlignes med en papirbaseret rapport.

Båndbredde på World Wide Web

En af de væsentligste begrænsninger på WWW er hastigheden på Internettet. I kraft af, at båndbredden på Internettet ikke er fulgt med stigningen i antallet af brugere, er det ofte et problem at besøge web-sider med meget grafik, da de tager lang tid at hente ned til den bruger, der besøger stedet.

Vi har derfor taget som udgangspunkt, at brugerne er forbundet via et 28,8 kb modem. Denne antagelse begrænser mængden af data, der kan leveres til browseren indenfor en rimelig tid, og dermed sættes også en begrænsning for størrelsen af vores web-sider. Hvis vi som designere laver for store web-sider eller bruger for meget grafik, vil folk ikke besøge vores sider mere end én gang, fordi det simpelthen vil tage for lang tid at hente siderne ned. Vi vælger derfor at have et minimum af grafik på vores web-sider, så den begrænsede overførselshastighed dermed udnyttes optimalt [Sano, s. 47]. Der vil blive brug for noget grafik, men for at tage hensyn til brugere med en langsom forbindelse vil vi for grafiktunge sider tilbyde alternative sider uden grafik [Sano, s.49].

En anden afgørende grund til at web-siderne skal kunne hentes hurtigt ned til brugeren er, at vi antager, at den enkelte bruger skal betale den forbrugte telefontid. Det betyder altså, at nedsat hastighed direkte kan omregnes til kroner og øre: jo tungere web-sider, desto større telefonregning. Vi har taget konsekvensen af dette og tilbyder brugere muligheden for at downloade en offline-kopi af vores web-sider, så brugeren kan hente en komprimeret fil og lukke forbindelsen til Internettet.

Samme design, forskelligt resultat

Fordelen ved web-sider er, at de kan vises på alle typer computere, helt uanset operativsystem og browser. Derfor kunne man umiddelbart forledes til at tro, at man ikke behøver tænke mere over dette, men blot gå i gang med at designe siderne. Det viser sig imidlertid, at der kan være store forskelle alligevel. Den samme web-side kan se helt forskelligt ud i forskellige kombinationer af browsere og operativsystemer [Sano, s. 55].

I det følgende fremhæver vi nogle konkrete forskelle, der skal tages hensyn til i designet af web-sider.

Forskelle mellem browsere

Lad os sammenligne Netscape Navigator med Microsoft Internet Explorer. Vi vil gerne fremhæve to forhold; hvad browserne kan, og hvordan de gør det.

For det første er der forskel på, hvad browserne kan. Vores web-sider benytter sig at tre slags faciliteter; frames, JavaScript og cookies. For at en bruger kan se vores sider, sådan som de er designet, skal hans browser understøtte alle tre faciliteter. Netscape Navigator har understøttet cookies siden version 1.1, mens Microsoft Internet Explorer har gjort det siden version 2.0. Netscape Navigator har understøttet JavaScript og frames siden version 2.0 og Microsoft Internet Explorer har understøttet JavaScript og frames siden version 3.0.

For det andet er der forskelle i, hvordan browsere viser web-sider. HTML bruger er en abstrakt beskrivelse af sidens formattering. Der er ikke tale om for eksempel "fed" tekst, men kun "fremhævet" tekst. Det er op til browseren at fortolke, hvordan teksten skal fremhæves; den kan være skrevet til at fortolke "fremhævet" som "fed", men det kunne også være "kursiv". Således kunne man godt forestille sig (det er ikke tilfældet), at en tekst, der i Navigator er fed, bliver vist som kursiv i Internet Explorer. En reel forskel mellem de to browsere, der tydeligt kan ses, er visning af frames. Internet Explorer viser en tynd bjælke mellem to frames, mens Navigator lader de to frames berøre hinanden. Forskellen er lille, men betydelig, hvis Navigators mangel på delebjælke er en vigtig del af designet.

En anden forskel findes i brugen af dialogbokse. Vi benytter os af muligheden for at vise brugeren en besked i en dialogboks. Internet Explorer viser en dialogboks med beskeden i. Netscape viser præcis den samme dialogboks, men inden beskeden står der "JavaScript Alert:". Det er korrekt, at vi bruger JavaScripts Alert-funktion, men det angiver beskeden som en advarsel, og det er ikke rigtigt. Brugeren bliver forskrækket, hvilket ikke er hensigten.

Forskelle mellem operativsystemer

Også mere avancerede emner, såsom knapper og indtastningsfelter, kan specificeres i web-sider. De kan have meget forskellig udseende, afhængigt af operativsystem. Det skyldes, at browseren som en hvilken som helst anden applikation arbejder konsistent med den øvrige brugergrænseflade.

Indtastningsfelter, afkrydsningsfelter og dialoger er nogle af de elementer, der varierer meget imellem operativsystemer [Sano, s. 53]. De findes skam i alle operativsystemer, men ser både vidt forskellige ud og opfører sig forskelligt. Når man i web-sider omtaler knapper, felter og andre elementer, skal man derfor være opmærksom på at bruge et ordvalg, der ikke modsiger de muligheder, brugeren har.

Design af web-siderne

Med disse designovervejelser på plads begynder vi nu på det egentlige design. Vi vil se på, hvordan web-siderne skal se ud, hvordan man skal navigere rundt mellem siderne, og hvordan strukturen mellem de enkelte sider skal være.

Web-sidernes udseende

For at opfylde målet om, at siderne skal være nemme at finde rundt i, er vi nødt til først at fastlægge det overordnede udseende. Målet er:

"Design formatting standards and follow them consistently in all screens within a system. The related screens in a system should always have standard types of information located in the same part of the screen" [Sano, s. 208].

Derfor starter vi med et overordnet valg for udseendet, der skal overholdes for hver enkelt side, således at udseendet bliver ensartet og konsistent:

  • Alle sider skal have samme baggrunds- og tekstfarver.
  • Overskrifts- og afsnitstypografi skal være ens på alle sider.
  • Brugen af fed skrift og kursiv skrift skal holdes på et minimum for ikke at forvirre brugeren.
  • Der skal ikke bruges understreget tekst, da det ligner hyperlinks.

Dette kan ses på vores web-sider. Vi har holdt et meget konsistent layout, hvor alle sider er skrevet i samme type og bruger de samme farver. Kun oversigtssiderne er anderledes; de bruger de samme farver, men der er byttet om på tekst- og baggrundsfarver. Og ligesom i almindelige tekster har vi benyttet et sobert layout med få fremhævede ord.

Navigation mellem siderne

En navigationsmekanisme skal sørge for, at brugeren aldrig er i tvivl om, hvor vedkommende er på web-siderne, og hvordan man kommer videre på web-siderne. De skal også sørge for, at alle relevante - og kun de relevante - sider kan nås.

En mulig metode, der mest minder om en bog, er at have en side, der fungerer som indholdsfortegnelse, hvorfra man vælger, hvad man vil se. Problemet med denne metode er, at man hele tiden skal tilbage til denne indholdsfortegnelse for at komme videre, hvilket efter vores opfattelse indeholder to alvorlige problemer. Dels tager det tid og er besværligt at bladre frem og tilbage, og dels bliver det meget hurtigt uoverskueligt for brugeren, fordi det er meget svært at se strukturen i siderne. Samtidig er denne navigationsform meget ufleksibel. Hvis man klikker på et link på en side, er oversigtssiden pludselig mere end ét tryk på "back"-knappen væk.

Et alternativ til denne form for navigation er at benytte en navigationslinie, der går igen på alle sider. Så har man hele tiden mulighed for at springe videre. Ulempen er, at det kræver meget vedligeholdelse. Hvis et menupunkt ændrer sig ét sted, skal man rette i alle dokumenter, der har navigationslinien indbygget. Avancerede web-værktøjer kan håndtere dette let og elegant. For eksempel gøres det i Microsoft FrontPage ved at lave navigationslinien i en separat fil, som derefter blot "includes" i hver side, der skal bruge den. Et eksempel på dette kan ses Jubii. Dermed forsvinder den megen administration, da der kun skal rettes ét sted. Overblikket kan samtidig forbedres ved denne form for navigation, ved at hver side har en anderledes navigationslinie, hvor det aktuelle emne er fremhævet. Et eksempel på varierende navigationslinier findes hos Microsoft. Men så opstår administrationsproblemet igen, fordi det ikke længere er identisk indhold, og her kan ikke engang programmer som Microsoft FrontPage bruges.

Konkurrenten til disse metoder er frames. Frames er en metode til at dele browserens vindue op i flere mindre vinduer, hvor hvert vindue kan indeholde netop den web-side, der er brug for. Frames kan let bruges forkert, hvis designet ikke er gennemtænkt, men det smarte ved at bruge frames er, at det vil blive utroligt nemt at navigere rundt, fordi man navigerer fra det samme sted hele tiden. Samtidig har alle siderne konsistente overskrifter, der henviser til det valgte menupunkt i navigationsframen, så det skulle være meget svært at "fare vild". At brugeren hele tiden ved, hvor vedkommende er henne, er et centralt emne i web-design [Sano s.140].

Strukturen

Den struktur, der skal binde alle vores web-sider sammen og være med til at skabe overblikket, skal tage hensyn til flere ting:

  • Alle informationer skal være nemt tilgængelige.
  • Informationer af særlig interesse for cookie-fans skal være mulige at få fat på direkte via menuen.
  • Ud over disse informationer er der en lang række teoretiske overvejelser, som også skal struktureres på en sådan måde, at man kan betragte web-siderne som en egentlig online projektrapport.

For at opfylde disse krav har vi besluttet, at det hele skal opbygges ud fra frames og en menu, der hele tiden er til stede i en frame. Her vil man hele tiden have overblik over alle tilgængelige hovedpunkter, samtidig med at man kan se det valgte hovedpunkts tilhørende underpunkter. Vi vil dele vinduet vertikalt i to dele, så vi kan placere oversigten til venstre og indholdet til højre. Således vil navigationen komme til at virke ligesom mange udbredte programmer som Windows Explorer, Microsoft Outlook eller Lotus Notes, der alle har en træstruktur i et vindue til venstre og indholdsvinduet til højre

Vi bygger vores menu op af hovedpunkter med tilhørende underpunkter. Man vil hele tiden kunne se hovedpunkterne, og desuden underpunkterne til ét hovedpunkt. Hvis man kunne se alle underpunkterne til alle hovedpunkter hele tiden, kunne man nemt blive forvirret, miste overblikket, og blive i tvivl om, hvor man var. Ved kun at vise en del af den samlede information, bevares overblikket, men vi bevarer muligheden for hurtigt at finde resten af information.

Denne menu er i praksis implementeret ved, at startsiden ikke er en almindelig web-side, men et frameset, der definerer de to frames. Den venstre frame kalder vi menu og den højre main. Hovedpunkterne i menu-framen refererer til menu, mens underpunkterne refererer til main. Som udgangspunkt vises kun hovedpunkterne, og klikker man på et hovedpunkt, folder det sig ud, så man kan se underpunkterne til det, men indholdet i main-framen ændres ikke. Vi ændrer ikke indholdet i main-framen for at spare på overførelsen af filer fra serveren til klienten. Samtidig er det også mere brugervenligt, at indholdet ikke ændres, blot fordi brugeren benytter indholdsoversigten til at kigge efter et emne.

Klikker man på hovedpunktet igen, folder strukturen sig sammen igen. Hvis man klikker på et hovedpunkt, mens et andet hovedpunkt er foldet ud, folder det åbne punkt sig sammen og det nye folder sig ud. Når man klikker på et underpunkt, vises dets tekst i den højre frame. Således har man hele tiden overblikket til venstre og detaljerne til højre.

Service til brugeren

Hvis brugeren føler sig godt serviceret, vil vedkommende vende tilbage til web-siderne. Ud over, at vores web-sider skal indeholde projekt-teksterne, kan vi tilbyde brugere nogle services, der er helt unikke for World Wide Web mediet.

Vi vil tilbyde brugeren en mulighed for at downloade alle siderne, så de kan læses offline. Dermed kan brugeren spare telefontid (og dermed penge), samtidig med at der så er større chance for, at det hele bliver læst i den rette sammenhæng. Ud over denne service vil vi lave en online gæstebog, som har et bestemt formål. Brugerne skal have mulighed for at give os feedback på vores arbejde, hvilket er en stor fordel for os. Brugerne af siderne må betegnes som den ultimative testgruppe, og hvis noget enten ikke virker eller er uhensigtsmæssigt, er det en fordel, at brugeren kan komme i kontakt med forfatterne. Alternativet var selvfølgelig, at man nederst på hver side kunne give brugeren en mulighed for at sende mails til os, men gæstebogen er efter vores opfattelse nemmere at have med at gøre, samtidig med at det er en del mere sofistikeret. Den enkelte bruger kan samtidig se andre brugeres kommentarer i gæstebogen.

Vi vil desuden tilbyde mulighed for at slette alle de cookies, som vores web-sider gemmer hos brugeren. Dermed kan en bruger efter endt besøg slette alle vores cookies.

Konklusion

Der kan næppe være nogen tvivl om, at designet udgør halvdelen af budskabet. For at vi kan formidle vores budskab, bliver vi nødt til at sikre os, at rammerne er i orden, og at konteksten passer. Der er tekniske forskelle og begrænsninger, såvel som mere bløde, kognitive fælder, som er vigtige punkter, der skal tages højde for i designet af vores web-sider, og vi har beskrevet, hvordan vi har valgt at arbejde med designet.

For at sikre et så optimalt design som muligt vælger vi at teste vores web-sider på forskellige platforme og med forskellige browsere. Vi tester vores sider på Netscape Navigator 3.01 og Microsoft Internet Explorer 3.02 på Windows 95 og Windows 3.11, Netscape Navigator 2.02 på OS/2 Warp og OS/2 Merlin samt Netscape Navigator 3.01S på IRIX 6.3. Ifølge BrowserWatch er de mest udbredte browsere Netscapes Navigator og Microsoft Internet Explorer. Dette baseres på, at over 90% af de besøgende hos BrowserWatch bruger disse to. Vi mener derfor, at vores tests er tilstrækkelige.

Vores web-sider skal have et ensartet og konsistent layout, så brugen af web-siderne forenkles. Navigationen på vores web-sider skal foretages via to frames; en menu-frame og en indholdsframe. Endelig skal vores web-sider tilbyde forskellige services til den enkelte bruger af siderne. En service vi vil tilbyde er for eksempel muligheden for at downloade alle vores web-sider.

Teori: Cookies i Netscape Navigator og Microsoft Internet Explorer - Praksis: Teknisk analyse »