Webdesign og webkommunikation 2008
Content
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Afleveret af Lasse Højer‐Pedersen ([email protected]) Vejleder Susana Pajares Tosca Afleveringsdato 17. december 2008 Gruppe Lissabon
IT‐Universitetet 2008
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Indhold
Del 1: Designdelen .............................................................................................................................................. 2 Introduktion ................................................................................................................................................... 3 Problemformulering ....................................................................................................................................... 3 Brugsmæssig funktionalitet ............................................................................................................................ 3 Målgruppe .................................................................................................................................................. 3 Navigation .................................................................................................................................................. 4 Informationsarkitektur ............................................................................................................................... 4 Æstetik ............................................................................................................................................................ 5 Teknisk konstruktion ...................................................................................................................................... 5 CSS (stylesheet) .......................................................................................................................................... 6 Usability test ................................................................................................................................................... 6 Del 2: Essay ......................................................................................................................................................... 7 8 Resumé ........................................................................................................................................................... Introduktion ................................................................................................................................................... 8 Diskussion ....................................................................................................................................................... 8 Konklusion .................................................................................................................................................... 1 1 Litteraturliste .................................................................................................................................................... 1 2 Bilag 1 ............................................................................................................................................................... 1 3 Bilag 2 ............................................................................................................................................................... 1 4 Bilag 3 ............................................................................................................................................................... 1 5
Side | 1
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Del 1: Designdelen
Følgende udgør en designanalyse indeholdende refleksion om konstruktion, funktion og form for vores case; Svendborg Architects
Side | 2
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Introduktion
Svendborg Architects (S.A.) er en arkitektvirksomhed med ca. 13 ansatte, som blev grundlagt i 2007. Stifte‐ ren Johnny Svendborg har 10 års erfaring, bl.a. fra projekter under Henning Larsen. Redegørelse for fremgangsmåde og begrundelser Jeg har valgt at tage udgangspunkt i Ida Engholms analysemodel (Engholm 2004) i ønsket om at vurdere vores udkast til en hjemmeside for S.A. Jeg bruger Engholms model i forbindelse med at klarlægge sitets struktur, æstetik og udtryk m.m. Ligeså ønsker jeg at begrunde vores designmæssige valg på baggrund på baggrund af samme. Der er opstået en række konventioner på nettet (Mcgovern 2002), som vi har haft i baghovedet for at hjælpe webbrugeren. Den gældende hjemmeside Ved første øjekast virker S.A.s gældende hjemmeside både smart og enkel i udtrykket, men efter at have set siden nærmere efter, vurderede vi at: Den automatiske billedfremvisning virker forstyrrende og går alt for hurtigt Visningen passer ikke til mindre skærme Navigationen er mangelfuld og inkonsekvent Vejen til undersider er ikke intuitiv Der mangler overblik over, hvor på siden man er Det æstetiske udtryk er kedeligt og passer ikke til det firmaet står for, som vi definerer som tro‐ værdighed, kreativitet og innovation.
Ovennævnte områder har løbende været med som en del af målsætningen for den nye hjemmeside.
Problemformulering
Hvordan kan vi skabe en hjemmeside for Svendborg Architects, der afspejler firmaets identitet, værdier og som samtidig giver brugeren fornemmelsen af troværdighed og kreativitet?
Hensigtserklæring Hjemmesiden skal være troværdig og seriøs Det skal tydeligt kunne ses at virksomheden er kreativ og innovativ Navigationen på siden skal være tydelig og give lyst til at udforske siden Teksten på siden skal være skrevet til nettet og være kort og præcis Det æstetiske udtryk skal være afdæmpet, enkelt og give et sigende billede af S.A.
Brugsmæssig funktionalitet
Målgruppe Vi ser målgruppen for hjemmesiden som en tredeling, og jeg har på figur 1 illustreret denne.
Side | 3
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Bygherren / entreprænøren
Har kapital og byggevisioner
Arkitekten
Måske kommende samarbejdspartner
Journalisten
Skal eks. vis skrive en artikel om et område gennem hvilket firmaet kan promovere sig
Ønsker troværdighed og seriøsitet
Ønsker praktiske informationer og at få et indtryk af arbejdspladsen og de ansatte
Ønsker let adgang til nyheder og pressekontakt
Figur 1: Oversigt over målgruppen som en tredeling.
I min skitsering af målgruppen ses de tre målgruppeopdelinger som ligeværdige. Rent ressourcemæssigt er jeg bekendt med, at uden bygherre/entreprenør ville der ikke være noget der hed S.A., men i forhold til hjemmesidens krav ønsker jeg at ligestille de tre. For en opstilling af brugerscenarier og brugerkarakteristi‐ ka se bilag 1. Navigation Vi har valgt at lade den globale hovedmenu og undermenuen følge samme udtryk. Vi har dog bevidst valgt en mindre font for undermenuen, for at tydeliggøre at den er underordnet den øverste. Vi har valgt, at have en forside for hjemmesiden, som hurtigt giver den besøgende et indtryk af virksomhe‐ dens image. Vi har valgt at have en forside af flere grunde: Rent æstetisk har det været oplagt, og efter at have besøgt flere førende arkitektfirmaers hjemmesider (hlt.com, entasis.dk, dortemandrup.dk m.v.) har vi iagttaget, at der kan siges at være en trend ved det at have en forside. Begge årsager har haft betydning for os. Vi har valgt at indsætte et søgefelt på hjemmesiden for at tilbyde en ekstra navigationsmulighed (Mcgovern 2002). Man kan således tilgå sider på baggrund af søgeord m.v. direkte fra toppen af forsiden samt under‐ sider. Den globale hovedmenu linker til undermenupunkter, der viser forskellige kategorier afhængigt at valget. Vi har valgt at linket ’Nyheder’ fører direkte til seneste nyt. På den måde få journalisten med kun et klik fra forsiden få eksponeret den seneste nyhed, og kan fra undermenuen vælge nyhedsarkiv. Linket ’Projekter’ fører til en underside, der fungerer som appetitvækker for projektbasen. Vi har valgt føl‐ gende titler; igangværende, opførte, konkurrence og CPH Vision, hvor sidstnævnte er et internt projekt på tegnestuen. Siderne der tilgås fra undermenuen under ’Projekter’ indeholder tekst og billeder, der beskri‐ ver projekterne. Informationsarkitektur Vi har holdt møde og haft en løbende kontakt med arkitektfirmaet for at få detaljeret viden om de forskelli‐ ge projekter, formål m.v. Det gav især mening for os med ekstra kontakt, da vi skulle strukturere informati‐ onsarkitekturen og kategorisere menuen ’projekter’, idet firmaets gældende hjemmeside på dette område har en mangelfuld visning. Gennem fastlægningen af informationsarkitekturen har det været os vigtigt at opretholde en konsekvent organiseret struktur. Vi har i den forbindelse fastlagt retningslinjer for sprogbrug og linktitler. På siden findes kun enkelte eksterne links, men vi har i titlen for disse tydeligt angivet indhold og destination. Eksempelvis: ’Se begrundelsen på hjemmesiden for Statens Kunstfond’.
Side | 4
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Æstetik
Gennem arbejdet med at finde det visuelle udtryk har minimalisme været et nøgleord for os. Vi har fra be‐ gyndelsen ønsket, at holde et enkelt og tydeligt udtryk med rene linjer og har løbende været i kontakt med arkitektfirmaet for at sikre os, at vi bevægede os inden for genreforventningerne, i takt med at siden blev gjort mere funktionel. Netop det at holde sig æstetisk inden for den rigtige genre er vigtigt og Thorlacius opsætter reglen: ”The aesthetic effects must be adapted to the genre of Web site” (Thorlacius 2007:67). Vi har i den forbindelse ikke forsøgt at skabe en anden version af firmaets gældende hjemmeside, men vi har alligevel bevidst holdt os inden for det samme farveskema, nemlig: ren sort, ren hvid og gråtoner. I forsøget på at kategorisere hjemmesiden efter stilart kan et bud være industriel postmodernisme. Vi har ladet os inspirere af betonelementer, jern, stål og papir. Vi har forsøgt at skabe en række hårde kontraster bl.a. gennem forholdende: sort / hvid, rå beton / sart papir, bløde fonte / skarpe kanter som hjælper til at give det fuldendte rå og distancerede look med en lækker finish. Ifølge Engholm er æstetik kontekstuelt betinget (Engholm 2004) og med det menes, at det ikke kun er hjemmesidens karakteristika der gør sig gældende når det kommer til æstetikken, men også selve brugerens oplevelse og kontekst, der styrer æste‐ tikken. For at brugeren skal få en æstetisk oplevelse, må vedkommende altså være æstetisk indstillet. Vi har arbejdet mod at skabe en for S.A. visuel identitet, der signalerer professionalitet og troværdighed. Forgrundens hvide flader skal henlede tankerne på materialet skitse‐/tegnepapir, som vi har forsøgt at fremhæve ved de flossede kanter og en blød drop shadow, som giver lidt dybde i billedet. Vi har skabt et nyt logo til S.A., der benytter sig af en blød font som tidligere nævnt. Vi benytter for øvrigt udelukkende sans serif fonte, idet vi arbejde med skærmmediet og ikke tryk. Vi anvender thumbnails på siden ’projekter/igangværende/munktellstaden’, idet vi ønsker at supplere na‐ vigationen med en mere grafisk og billedlig dimension. På forsiden har vi bevidst arbejdet med diagonallinjer; fra firmaets logo øverst til venstre har vi søgt at lede øget over skitsetegningen (som er autentisk materiale fra firmaet) for at ende ved de forskellige sprogmu‐ ligheder. Øget forstyrres ikke af diagonalen, men kan lade sige glide med denne. Kombinationen med det stærke tydelige filmstrimmel‐look med de sorte striber skaber en ramme for indholdet, hvis bredformat‐ format er behagelig for øget.
Teknisk konstruktion
Vi har opsat hjemmesiden i XHTML som styres af et eksternt stylesheet i CSS. På figur 2 til Bruger højre kan man se, hvordan XHTML og CSS kan opfattes som lag, der hjælper brugeren med at finde data gennem det interface, hvor begge supplerer hinanden. CSS Vi har opdelt html‐koden i div’er for at have muligheden for at positionere de enkelte XHTML områder separat. Figur 3 viser, hvordan vi har oprettet en container yderst og i den placeret hendholdsvis header, menu, contentfront, submenu og footer. Gennem Data processen har det været rart med sigende navne på indholdsområderne.
Figur 2: Anskuelse af XHTML og CSS som lag.
Side | 5
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Figur 3: Oversigt over div'er og deres placering.
Vi har optimeret hjemmesidens visning til skærmen på en standard 13” laptop på 1280 x 800 pixels. Vi har arbejdet med elastisk design, der muliggør at hjemmesiden automatisk justeres ved variation af browse‐ rens størrelsesforhold. Således kan hjemmesiden vises fornuftigt på op til 20”‐22” skærme med deres stan‐ dardopløsning. Midter‐div’en i CSS’en kaldet boxwide er et eksempel på et element, der hjælper til det elastiske design ved at være centreret og således uanset skærmens opløsning vil vise indholdet i midten. CSS (stylesheet) Ved hjælp af CSS har vi blandt andet kunnet opsætte ensartede regler for tekst, billeder, farver m.v. Vi har også haft muligheden for at placere objekter i flere lag; et eksempel er undermenuens undermenu, der vises oven på content‐div’en. Dette giver en fornemmelse af at siden ikke kun fremstår i to dimensioner. Menuens farve ændres, når cursoren er placeret oven på et af menuens link. Farven skifter fra grå til hvid, for at den besøgende tydeligere skal se, hvor man er ved at klikke. Ved klik forbliver linket permanent hvidt og indikerer således på hvilken underside man befinder sig.
Usability test
Vi udførte flere mindre usability tests ved hvilke følgende tilbagemelding blev udgangspunkt for en naviga‐ tionsmæssig ændring (se evt. bilag 2+3). Det blev sagt, at det ikke er tydeligt nok, hvor på siden man er! Vi løste problemet ved at lave fonten for den globale menu og undermenuen fed og derved blev skiftet til hvid tydeligere. Dette gav efterfølgende succes ved en afsluttende usability test.
Side | 6
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Del 2: Essay
Følgende del udgør en uddybning og stillingtagen til et af mig særligt udvalgt teoretisk område nemlig ’orientering og navigation’.
Side | 7
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Resumé
Redegørelse for at navigation på nettet er ens/uens i forhold til navigation i virkelighedens verden efter‐ fulgt af en analyse af en offentlig hjemmeside (fi.dk), hvor orienterings‐ og navigationskvaliteterne vurde‐ res.
Introduktion
Jeg er ansat ved Forsknings‐ og Innovationsstyrelsen (FI) som studentermedhjælper, hvor jeg indgår i et team, der vedligeholder styrelsens hjemmeside. Pr. 15. oktober i år fik siden en ny visuel profil samt et na‐ vigationsmæssigt løft som følge af en designskabelon udarbejdet af firmaet 1408. Jeg vil i dette essay rede‐ gøre for den navigationsmæssige kvalitet ved hjemmesiden og forsøge at argumentere for manglen på samme, på steder hvor det kræves. Problemformulering Hvad er en god og innovativ navigationsløsning, og hvordan kunne den se ud? o Hvordan er navigation på nettet ens/uens i forhold til navigation i virkelighedens verden? o Hvad er hovedprincipperne bag udbredte og gældende navigationsstrategier?
Gerry Mcgovern og Rob Norton (i det følgende omtalt Mcgovern) har opsat en række anbefalinger for navi‐ gation på hjemmesider og refererer til gældende konventioner på nettet. Jeg ønsker som udgangspunkt at følge disse anbefalinger, idet jeg supplerer med antagelser fra Anders Fagerjord og Mark Bernstein.
Diskussion
Navigation på nettet kontra virkelighedens verden Når der navigeres på gader og stræder, er flere ting lig den måde, vi navigerer på på nettet. Når vi oriente‐ rer os i virkelighedens verden benytter vi split vision, oversigtsblik m.v. for hurtigt at danne os et indtryk af omgivelserne. Ifølge Jakob Nielsen scanner vi websider, når vi læser på nettet og således er læsning på net‐ tet forskellige fra, hvordan man læser en bog (Nielsen 1997). Jeg vurderer at der er belæg for at sammen‐ ligne disse to orienteringsmåder, da jeg ser ligheder i måden hvorpå vi tilgår informationen. Et område som til gengæld er meget forskellig, i disse to skitserede sammenhænge, er den taktile dimensi‐ on. Ved navigation in real life kan man i nogle ofte føle sig frem ved fysisk at mærke efter. Et underlag kan føles hårdt eller blødt, der kan være påvirkende vejrforhold etc. Men hjemmesider kan man ikke holde i hånden, og informationen om placering og retning er således nødt til at være synlig hele tiden. Som et sidste eksempel kan nævnes, at der i den virkelige verden kan findes eksempler på, at de veje man benytter somme tider bærer præg af brugen. Nogle materialer bliver slidt, som fx en dørklokke (Brian Eve‐ ritt‐forelæsning) eller en sti i skoven der efterhånden kommer til syne, fordi nogle skyder genvej. I den vir‐ kelige verden efterlader vi os altså ofte spor, når vi navigerer rundt. Dette kan igen sammenlignes med hjemmesides navigationsvej. Dels er langt de fleste links lavet, så man kan se, hvis man har benyttet dem før, og efterhånden udvikles mere og mere intelligente systemer, der kan vise brugeren populariteten ved et link eller en give vare. Eksempelvis benyttes ofte ved køb af musik på nettet, at køberen får oplysninger om lignende køberes favoritmusik etc. Her kan altså trækkes paralleller fra den virkelige verden til webben, hvor jeg i samme moment ønsker at referere til web 2.0‐generationen som i høj grad lader brugerne ”tilfø‐ re nettet” alt fra statuskommentarer til videostreams.
Side | 8
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
En navigationsanalyse af hjemmesiden fi.dk Ved besøg på fi.dk vil man opleve at forsiden indeholder mange muligheder for at tilgå indholdsområder på hjemmesiden. Jeg har på figur 4 med mine egne ord forsøgt at karakterisere de forskellige typer af naviga‐ tion, der er tale om.
Søgenavigation Global navigation 1
Global navigation 2
Hurtigmenu‐ navigation
Indblik ‐ navigation
Karroussel‐ navigation
Nyhedsnavigation (nyeste øverst)
Opslags‐navigation (nærmeste frist øverst)
Kampagne‐ navigation
Figur 4: Fi.dk med angivelse af navigationstyper.
Fi.dk indeholder to forskellige globale navigationsmenuer, og der er to afgørende årsager til dette; i første omgang er der så mange underpunkter, der er relevante at placere i en global menu, at linjen ville blive meget lang. I anden omgang er der stor forskel på relevansen af de forskellige underpunkter ‐ den gule og største er den hyppigst benyttede. Jeg vurderer at fi.dk opfylder kravet om placeringen af en global menu og ser supplementet med endnu en global menu som oplagt i forbindelse med det store omfang af forskel‐ ligartede undersider. Mcgovern slår et slag for at synliggøre fagligt beslægtede områder på websider, så der let kan navigeres videre til et område, der med stor sandsynlighed giver mening for brugeren (Mcgovern 2002:11‐12). Denne tanke er også på fi.dk anvendt ‐ her under betegnelserne læs også og interne / eksterne links (se figur 5). På denne måde gives læseren løbende en vifte af videre navigationsmuligheder, også selv om de har bevæget sig lang ind i sidestrukturen. Det kalder jeg at udnytte tanken med HTML og ræsonnerer således at fi.dk på dette område lukker op for navigation til andre relevante sider direkte fra de respektive undersider.
Side | 9
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Figur 5: Eksempel på kontekstoplysninger på fi.dk.
På fi.dk er links til gengæld et interessant bekendtskab. Mcgovern anbefaler i flere omgange, at styling af links holdes konsistent og meget gerne anvender standardfarverne blå for ikke‐besøgte og lille for besøgte links (Mcgovern 2002:7). Alene fra forsiden på fi.dk kan iagttages mindst fire forskellige stylinger af tekst‐ links. Ved mouse over: Hvid tekst med understregning, rød tekst med understregning, sort tekst med un‐ derstregning og en fjerde uden mouse over: sort tekst med overstregning. På dette område halter fi.dk langt bagefter! Det er sandsynligt, at man har ønsket at afstemme styling i forhold til krav om balance og æstetik, men alfa omega er, at brugen af diverse links mere end noget andet skaber forvirring og efterlader brugeren med en fornemmelse af ikke at kunne gennemskue systemet, og jeg vurderer i samme åndedrag at sammenhængen helt er udeblevet. I forlængelse af kritikken af links bevæger jeg mig nu nærmere for at se på titlerne på samme. Her må jeg dog finde de gode ord frem. Mcgovern siger: ”Navigationen bør fortælle læserne, hvor de er på vej hen. Det opnås naturligvis ved, at man så vidt muligt etablerer klassifikationstyper, der er indlysende.” (Mcgovern 2002: 8). Således skal et link altså fortælle til hvad og hvor, der bliver linket. På fi.dk ses det tydeligt, at der er vedtaget en politik omhandlende syntaksen for links. Overalt på siden, med meget få undtagelser, er der anvendt link af samme art som følgende eksemplerne: ’Se hele bekendtgørelsen på Retsinformation’, ’Hent opslaget i PDF’, ’Læs opslaget (på engelsk)’ osv. Således informerer linkene allerede før klikket brugeren om destinationen og form. Jeg vurderer at linktitlerne på fi.dk bekræfter opsatte argument fra Mcgovern. Opdelingen af indholdsområderne på fi.dk er opdelt på hjemmesiden på baggrund af styrelsen formodning om de besøgenes ønsker og styrelsens organisationsdiagram. Til dette siger Anders Fagerjord: ”Mange ulike løsninger finnes, og det som vanligt fungerer dårligst, er å organiser nettstedet etter bedriftens organi‐ sasjonskart.” (Fagerjord 2004:135). Jeg vurderer at fi.dk i nogen grad bør revidere indholdsstrukturen og evt. vælge nye titler for menuerne ‐ et forslag kunne være: ’For forskere’, ’For det offentlige’ etc. Dette kan skabe en mere intuitiv tilgang. Logo og søgefelt er placeret henholdsvis til venstre og højre øverst på både forside og alle undersider. Syn‐ ligheden er afgørende for brugen, og da logoet linker til forsiden og søgningen både kan aktiveres ved klik
Side | 10
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
på den obligatoriske knap mærket ’søg’ og ved klik på enter, vurderer jeg, at fi.dk her opfylder konventio‐ nerne.
Figur 6: Et eksempel på en forsiderefence i forsidekarrusellen på forside af fi.dk
På fi.dk er anvendt en karrusel (figur 6), som fremviser billeder og en kort tekst af relevante områder for FI’s interessenter. I forbindelse med eksponering af sådanne indblikhistorier fra forsiden ønsker jeg at ind‐ drage Mark Bernsteins kontante tilkendegivelse: ”It’s far more effective to show your mission in action. If you’re a service leader, show off you service. If you’re a technology pioneer, show how you’ve advanced technology – and show what your labs are working on right now. If you’re a price leader, show your advan‐ tage. Don’t declare: do.” (Bernstein 2001:3). Han fremhæver vigtigheden af at placere det for virksomhe‐ den helt centrale produkt på forsiden. For FI er det bl.a. historier om forskere og forskningsformidling. Jeg vurderer at karruselen på hjemmesidens forside, på baggrund af Bernstein, er et pragteksemplar hvad an‐ går eksponering af aktivitet og område.
Konklusion
Navigation i virkelighedens verden adskiller sig fra navigation på nettet bl.a. ved den taktile dimension, der gør den store forskel. Der er dog en lighed i måden vi scanner informationen på. Ved slid af materialer i den virkelige verden kan trækkes en parallel til web 2.0‐baserede kontekstvisninger. FI’s hjemmeside giver fra forsiden et tydeligt overblik over mulighederne på hjemmesiden, og de to globale menuer skitserer en prioritering af indholdet. Hjemmesidens undersider inkorporerer elegant beslægtet stof bl.a. gennem læs også‐bokse. Linktitler er sigende og ensartede og gør god brug af forklarende tekst ved henvisning. Stylingen af linkene er dog ikke tilfredsstillende og giver brugeren en oplevelse af forvirring. Indholdsstrukturen bør i nogen grad revideres og menupunkter evt. ændres. Forsidekarussellen giver bru‐ geren hurtigt tilgængelig information om styrelsens arbejde, og logo og søgefelt opfylder gældende kon‐ ventioner.
Side | 11
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Litteraturliste
Bernstein, Mark (2001). ”Beyond Usability and Design: The Narrative Web”. In Brands Arts, (april 2001)S. pp. 1‐5. Engholm, Ida (2004): ”Webgenrer og stilarter”. In Digitale Verdener. Copenhagen: Gyldendall. Pp.57‐77. Fagerjord, Anders (2006): ”Web‐medier. Introduksjon til sjangre og uttryksformer på nettet.” Oslo: Universitetsforlager. Pp. 148‐174. Krug, Steve (2000) ”Don’t Make Me Think. A Common Sense Approach to Web Usability”. Indiana‐ polis: New Riders. Pp. 138‐181. Mcgovern, Gerry & Norton, Rob (2002): ”Professionel Webcommunication”, Copenhagen: Børsen. Pp. 163‐192. Nielsen, Jakob (1997): ”How users read the web”. http://www.useit.com/alertbox/9710a.html (15.12.2008) Thorlacius, Lisbeth (2007): ”The Role of Aesthetics in Web Design”. In Nordicom Review 28 (2007) 1. Pp 63‐76.
Side | 12
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Bilag 1
Brugerscenarier – hvilke spørgsmål vil de primære brugere af siden have brug for at få besvaret hurtigst muligt. Spørgsmål en arkitekt vil søge besvaret hurtigst muligt: Arkitekten har hørt om Svendborg Architects gennem sit netværk og vil nu kigge nærmere på hjemmesiden for at undersøge, om det er nogle som hun har lyst til at arbejde sammen med i et projekteringsforslag. Spørgsmål en journalist vil søge besvaret hurtigst muligt: Journalisten har en travl hverdag og har brug for hurtigt at finde den nyeste information om Svendborg Architects. Journalisten har typisk to scenarier: enten kender de konteksten eller også gør de ikke. Under alle omstændigheder er det vigtigt med et hurtigt overblik, en menu med pressekontakt på forsiden samt nemt tilgængelige kontaktoplysninger. Spørgsmål entreprenøren vil søge besvaret hurtigst muligt: Entreprenøren skal tage stilling til, hvilke arkitekt firmaer som skal prækvalificeres til konkurrencen om den opgave de udbyder. Har hørt om Svendborg Architects fra andre kollegaer eller kender dem oven i købet selv, måske fra Johnny Svendborg tid hos Henning Larsen. De ved at han er selvstændig nu og har brug for at tjekke hans hjemmeside for kontaktinformationer samt sikre sig, at han er kvalificeret til opgaven. Hvad har de lavet før? Kan jeg stole på, at de kan levere den arkitektoniske kvalitet vi ønsker. Hvem er Svendborg Architects? Hvordan kommer jeg i kontakt med dem, hvis jeg vil skrive en artikel? Hvordan kan jeg finde hurtigt information om den konkurrence de skal deltage i / eller vundet, og som jeg kort skal skrive om? Hvor kan jeg finde seneste nyt, helst med en præcis og kort tekst? Hvor kan jeg finde et billede af det arkitektforslag jeg skal skrive om? Hvem er Svendborg Architects? Hvad kan de? Hvilke opgaver har de fået tidligere? Hvordan arbejder de? Hvem er de på tegnestuen? Hvilke bygherrer og andre samarbejdspartnere har de? Er der billeder som viser mig, hvad de kan?
Side | 13
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Bilag 2
Vejledning til usability test Opgave: At finde frem til projektet ´Munktellstaden`.
Mål: At bruge navigationslinjerne til at finde frem til projektet ´Munktellstaden`. Opgavens trin, optimalt: Antal klik: Optimalt 3 Opgavetekst: Du har hørt om et projekt ´Munktellstaden` som tegnestuen Svendborg Architects står for, og ønsker at vide mere. Find frem til informationerne om ´Munktellstaden` ved hjælp af navigationslinjer‐ ne. Opmærksom på: Husk: Få dem til at fortælle hvad de tænker (tænke‐højt‐test) Stil uddybende spørgsmål hvis de går i stå Spørg ind til det de ikke er bevidste om at de ”tænker” (uden at tydeliggøre vores intentioner) Hvis de går i stå; prøv med: ”Hvad tror du, du skal gøre? ”Hvad ville du gøre hvis du var hjemme?” Forstår de sidens navigation, sidestruktur og navne? Vi vil gerne have feedback på den lille navigationsmand – hvorvidt brugeren har bemærket man‐ den og om han fungerer som ´vejviser`? Forstår brugere, at logoet indeholder en TILBAGE funktion Er menuerne tydelige og nemme at finde? Vælg menupunktet ´Projekter` i den globale navigationsmenu. Vælg menupunktet ´Igangværende` i undermenuen. Vælg menupunktet ´Munktellstaden` i vinduet.
Indledende spørgsmål: Spørgsmål til vores side: Hvad synes du som udgangspunkt om siden når du kigger på den første gang? Hvad tror du, du finder under de forskellige punkter? Hvad synes du er mest interessant/ hvad ville du klikke på først? Hvad laver du til daglig? Hvor lang tid bruger du på nettet hver dag? Hvad bruger du nettet til? Hvad er dine favoritsider? Har du nogle faste hjemmesider du besøger?
Side | 14
DEN INDIVIDUELLE RAPPORT Webdesign og webkommunikation ‐ efterår 2008
Lasse Højer‐Pedersen IT‐Universitetet i København
Bilag 3
Resultater fra usability tests – før ændring af menuskrift
Munktellstaden: Det tog mellem 3 til 6 klik for testpersonerne at finde frem til Munktellstaden. Nederste menulinje: Testpersonenerne opdagede ikke umiddelbart den nederste menulinje, og fandt generelt ikke punkterne så logiske under projekter (igangværende, osv.). En testperson syntes underunderme‐ nuen skulle have lignet papir eller noget der passede mere til resten. Logoet: Der var lidt uenighed om logoet. De fleste brugte det som tilbageknap, mens andre ikke opdagede funktionen. Den ”lille mand”: Ingen af testpersonerne lagde mærke til den lille mand, og forstod ikke rigtigt dens funktion.
Resultater fra usability tests – efter ændring af menupunkter til tykkere skrift
Nederste menulinje: Testpersonerne syntes, det var tydeligt med de hvide menupunkter, der viser hvor man er.
Side | 15
