Del I. Betydningen av god webdesign

Transkript

1 Del I 1 Betydningen av god webdesign

2 WEBDESIGN STEG FOR STEG I dette kapittelet ser vi på hvorfor god webdesign er viktig. Vi skal innom historien bak websider på Internett, og se at mange av begrensningene og utfordringene vi står ovenfor som webdesignere skyldes at to fundamentalt forskjellige interessegrupper, strukturalister og designere, på forskjellige tidspunkt har vært involvert i utviklingen av HTML-standarder og nettlesere. Vi definerer også begrepet tredjegenerasjonswebside, som i resten av boken fremholdes som et ideal i arbeidet med å utforme websider. Opplevelsen avgjør D ET STADIG ØKENDE antallet websider og Internett-brukere har to viktige konsekvenser. For det første finnes det som oftest alltid flere sider som tilbyr de samme produktene og tjenestene. Dette betyr at konkurransen for å nå frem til nettbrukerne blir stadig større, uansett hvilket produkt eller hvilken tjeneste du ønsker å nå frem med. For det andre blir vi som Internett-brukere stadig mer kritiske og utålmodige. Dersom en webside ikke umiddelbart gir deg akkurat det du ønsker, enten fordi den er for vanskelig å finne frem i eller tar for lang tid å laste ned, er neste alternativ alltid bare noen få museklikk unna. Netthandelen øker Til syvende og sist er målet for enhver webside å få besøkende, eller aller helst, besøkende som kommer tilbake. Du kan tenke på en webside på samme måte som du tenker på en restaurant. Du vurderer den utenfra og går forbi mange andre restauranter før du bestemmer deg for hvor du vil spise. Når beslutningen tas, er det i første omgang på bakgrunn av det visuelle inntrykket du har fått av restauranten. For restauranteieren (eller webdesigneren) er det antallet besøkende som kommer inn i selve etablissementet og spiser som teller. Ingen av dem som titter eller vurderer uten å komme inn har betydning. Restauranteieren vet også at det gjelder å behandle kundene slik at de ønsker å komme tilbake. På samme måte som for en webside, gjelder det å fremme god kom- - Det er en jevn økning i bruk av nettet som butikk, sier Paal Fure, trendforsker i Bengal Consulting. Det kommer nye kunder daglig, men om handel på Internett blir dagligdags, er avhengig av om disse kundene er fornøyd. - Det Internett brukes mest til i dag, er tjenester som bank og bestilling av reiser. Når det gjelder varer, er det mest vanlig å kjøpe data, bøker, filmer og CD er, sier Fure. - Vekstområdet kan ligge i brune og hvite varer. Flere vil ha det til at disse varene er de neste som kommer til å lykkes på nettet. Det blir også stadig mer vanlig å selge brukte ting, her kan Internett erstatte den tradisjonelle rubrikkannonsen. - Mobilt Internett er viktig, og den teknologiske kompetansen i befolkningen øker stadig. Det blir mer og mer vanlig med hjemmemaskin, og stadig flere bruker arbeidsdagen til private innkjøp. - At det er høykonjunktur i landet er heller ingen ulempe, sier Fure. VG, 11. mai

3 KAPITTEL 1: BETYDNINGEN AV GOD WEBDESIGN munikasjon, gi deg gode inntrykk, lettfattelige valgalternativer og god service. Neste gang du blir sulten, er det den helhetlige opplevelsen fra ditt forrige besøk som avgjør om du kommer tilbake eller ikke. Form versus funksjon Da Internett først ble designet, ble struktur regnet som den aller viktigste egenskapen for en webside. Det gjaldt å markere siden etter strenge eksisterende regler for struktur, blant annet for at søkemotorer skulle kartlegge siden på riktigst mulig måte. Det var også viktig å følge reglene for struktur for at absolutt alle skulle kunne lese sidene, uavhengig av hvilke nettlesere de brukte. Websider ble sett på som dokumenter hvor kun innhold, og ikke utforming, var av betydning. Det var rett og slett ikke meningen at websider skulle være visuelt stimulerende å se på. Som en ytterlighet til de rendyrkede strukturalistene har vi de rendyrkede kreativistene i andre enden av spekteret. Disse ønsker helst å bryte alle regler som gjelder for struktur, og deres eneste mål er visuell tilfredsstillelse. Sjokkartede opplevelser og kreative designløsninger er viktigere enn god struktur. Det er fordi de vet at dersom man ikke når frem til brukeren med en side, er det revnende likegyldig hvor godt strukturert innholdet er. Midt i mellom strukturalister og rendyrkede kreativister finner vi klienter og surfere. Klientene ønsker å nå frem til sin bestemte målgruppe med sitt budskap eller produkt. Hvis du som webdesigner prøver å overbevise markedsføringssjefen for Burger King om hvor viktig det er med struktur på websiden deres, taler du for døve ører. Det som er viktig for ham, er at surferne har det mer moro på deres websider enn hos McDonalds. Når det gjelder surferne, er dette en svært sammensatt gruppe med enormt forskjellige behov, men med et stort fellestrekk; kravet om å få akkurat det de ønsker med én gang. Mange av de problemene og begrensningene vi møter som webdesignere i dag skyldes at Internett opprinnelig ble utviklet av strukturalister. Det tok relativt lang tid før designerne for alvor kom på banen og begynte å stille krav til endringer i betingelsene for utformingen av websider. Som vi skal se senere i boken, har dagens nettlesere kommet et godt stykke på vei for å møte kravene fra webdesignere, selv om mye fortsatt gjenstår før vi får full kontroll over utformingen av våre egne sider. Nettlesere Nettleserhistorie En nettleser (browser) er det programmet på datamaskinen som lar oss se websider. Programmet viser websider etter en David Siegel og Jakob Nielsen To viktige drivkrefter bak utviklingen mot en mer design- og brukervennlig web-verden har vært den amerikanske forfatteren David Siegel og danskamerikaneren Jakob Nielsen. David Siegels Kreating Killer Web Sites ble en bestselger hos Amazon da den kom i 1996, trolig fordi den var en av de første bøkene som ga webdesignere inspirasjon til å lage kreative websider, og hvor alle aspekter ved webdesign ble tatt på alvor. Siegel har en klassisk designerutdannelse i digital typografi og stiller seg svært kritisk til de begrensningene nettleserne har når det gjelder kontroll over utformingen av websidene. Han har blant annet uformet websidene til Sony og Hewlett-Packard. Kreating Killer Web Sites kom i ny utgave i Jakob Nielsen har skrevet mange bøker om webdesign, og er mest opptatt av å utforme websidene slik at de gir best mulig brukervennlighet. Hans bok Designing Web Useability: The Practice of Simplicity fra 2000 understreker betydningen av å minimalisere innholdet på websidene og gjøre dem mest mulig intuitive og lettfattelige for brukeren. Nielsen innehar 45 amerikanske patenter om teknikker for å gjøre Internett lettere å bruke. Denne boken henter inspirasjon fra David Siegels og Jakob Nielsens bøker. Begrepet tredjegenerasjonsside, som brukes i dette kapittelet og senere i boken, ble først introdusert av David Siegel. bestemt struktur som er fastlagt i det vi kaller et HTML-dokument. HTML står for HyperText Markup Language, og er altså ikke et programmeringsspråk, men et markeringsspråk som angir hvordan de enkelte momenter på en webside skal presenteres på skjermen. Markeringen foretas ved hjelp av såkalte tagger. 11

4 WEBDESIGN STEG FOR STEG 1.1 Internet Explorer og Netscape Navigator har vært de to dominerende og konkurrerende nettleserne helt siden Internet ble allment tilgjengelig på midten av 1990-tallet. Tidlige nettlesere skilte mellom såkalt strukturelle og visuelle tagger. Et eksempel på en strukturell tag var dersom du ønsket å utheve en tekstbit. Da kunne du bruke taggen <em> (emphasize) foran det du ønsket å utheve. Da du var ferdig med det du ønsket å utheve, gjorde kommandoen </em> at uthevingen opphørte. Poenget her var at det var opp til nettleseren hvordan teksten ble uthevet. Som oftest ble teksten vist med typen kursiv (italic), men det kunne også tenkes at teksten ble fet (bold). Visuelle tagger ga mer bestemte instruksjoner om hvordan teksten skulle se ut. Taggen <b> gav fet skrift, <i> gav kursiv skrift og <u> gav understrekning. Nettleseren gir oss dessuten mulighet til å navigere mellom sider ved hjelp av å klikke på såkalte hyperkoblinger, eller linker. Med stadig flere innebygde funksjoner i nye versjoner av nettleserne, og ved hjelp av såkalte plug-ins (frittstående komponenter som gir nettleseren nye funksjoner) får vi også mulighet til blant annet å se Flash-animasjoner og benytte oss av bedre former for interaktivitet gjennom såkalte JavaScript (du kan lese mer om disse teknologiene i siste kapittel). Det ligger ingen automatikk i at de nye, innebygde funksjonene i nettleserne gir bedre utforming av websidene. Tvert imot. Som vi skal se senere i denne boken, er en av de eldste fallgruvene Mye mislykket Internett-handel Mer enn en fjerdedel av alle påbegynte nettkjøp går i vasken. De fleste som er misfornøyd slutter å handle på det bestemte webstedet hvor problemene oppsto. Det viser en fersk undersøkelse Boston Consulting Group (BCG) har gjort blant Internett-brukere i USA. USA ligger et drøyt år foran de nordiske landene når det gjelder Internett-bruk og e-handel, sier Adam Ikdal, e-commerce-ansvarlig i BCG Norge. BCG tror derfor problemene kan dukke opp i Norge etter hvert som e- handelen tar av. - Så langt har nettbutikkene tenkt mest på å bygge opp en flott webside, men mange tenker for lite på det som skjer bak skjermen. Det er flere årsaker til at så mange som 28 prosent av nettkjøpene mislykkes: NOEN GA OPP fordi det tok for lang tid å laste ned websiden. ANDRE fant webstedet så forvirrende at de ga opp å lete. NOEN KLAGER på at det tok for lang tid før varen kom frem. ANDRE IGJEN KLAGER på at den ikke kom frem i det hele tatt. MANGE har fått feil produkt. ANDRE ER MISFORNØYD med kundeservicen. FLERE har fått beskjed om at varen de ønsker ikke er på lager. At datasystemet kræsjer før kjøperen får bestilt, fører også til at handelen går i vasken. 43 prosent av alle netthandlere i undersøkelsen har hatt problemer. Det viser seg også at 6 prosent av dem som opplever plunder med nettbutikken, også slutter å handle i den fysiske butikken. Butikkens gode navn og rykte står dermed for fall hvis nettbutikken er dårlig. - Nettbutikkene er mest opptatt av å fortelle om trafikken på websiden. Kanskje burde man tenke mer på kundetilfredshet, sier Ikdal. Aftenposten, 11. mars

5 KAPITTEL 1: BETYDNINGEN AV GOD WEBDESIGN for en webside overlessing av irriterende effekter. Som webdesignere bør vi unngå å skjule manglende fantasi eller investeringer i tid bak det som gjerne oppfattes som forstyrrende effekter. Et stort problem vi som webdesignere står overfor når det gjelder nettlesere, er at de forskjellige nettleserne har en lei tendens til å vise et og samme HTML-dokument på forskjellige måter. Fra et designmessig ståsted er dette uakseptabelt. Selv om problemet er langt mindre i dag enn i tidligere nettlesere, er teknikker og fremgangsmåter for å minimalisere dette problemet fortsatt viktige for å lykkes med webdesign. Netscape versus Internet Explorer De to dominerende nettleserne i dag, Internet Explorer og Netscape Navigator, har vært konkurrerende helt siden websidenes spede barndom [1.1]. Netscape etablerte seg tidlig som den mest utbredte nettleseren, og var den første til å implementere <table>-taggen. Som vi skal se senere, var denne spesielt viktig for designhensyn, fordi den tillot webdesigneren å plassere tekst hvor som helst på skjermen med langt større presisjon enn tidligere. Designere, ja, selv den jevne HTML-programmerer, benyttet seg av denne kjærkomne muligheten og puttet store mengder tekst inn i tabeller (noe de jo egentlig ikke var beregnet til), og mange websider tok et stort skritt nærmere gode designmessige løsninger. Netscape ga ut versjon 2.0 og 3.0 av sin Navigator, hver gang med støtte for nye implementerte tagger, som gradvis vekket interessen til tidligere avspiste og misfornøyde webdesignere. Microsoft benyttet andre strategier enn Netscape og hadde store markedsandeler å ta igjen da de lyktes i å samarbeide med forskjellige komiteer om åpne HTML-standarder som de håpet skulle rydde banen for sin Internet Explorer. Internet Explorer 3.0 ble en stor suksess, først og fremst fordi den støttet såkalte rammer (frames), som ga mulighet til å dele opp skjermbildet i flere samtidige HTMLdokumenter, men også fordi den hadde et større utvalg skrifttyper og i det store og hele var en mer robust nettleser. Med Internet Explorer 4.0, som fulgte med innstallasjonen av Windows 95, ble nettleseren implementert inn i operativsystemet slik at man kunne bruke prinsipper fra Internett-navigering også på andre områder, for eksempel filbehandling. Netscape svarte med Navigator 4.0 som implementerte e-postfunksjoner og støtte for Intranett og gruppevareteknologi. Begge 4.0-nettleserne støttet såkalte style sheets, som du kan lese mer om i bokas siste kapittel. Disse skulle gi bedre kontroll for webdesignere, men det var ikke før i versjon 5.0 og 6.0 av nettleserne at disse begynte å bli fullt anvendelige. I skrivende stund foreligger Netscape Navigator i versjon 6.01 Dotcom manull? Mange ble overrasket da det i 2000 kom frem at Amazon, den største bokhandelen på nettet, mot betaling fra forlagene anbefalte bøker. Fordi Internett alltid har vært et medium hvor små, uavhengige websider har vært sidestilt med store selskaper, hvor informasjon og innholdsmessig relevans ble regnet som viktigere enn økonomiske fortrinn, ble dette av mange tolket som et tegn på begynnelsen på slutten for det økonomisk frie og uavhengige Internett. Etter flere år med etablerte kostnadsfrie Internett-tjenester, har nettbrukere blitt vant til at alt på nettet er gratis. Mens 1990-tallet var preget av at alle aviser og nettsteder gikk med underskudd og trodde på fremtiden, tror mange at tiden fremover blir preget av at nettjenester skal begynne å lønne seg. I 2000 sa nettavdelingen til The New York Times opp 69 ansatte, mens Rupert Murdoch, eieren av The Daily Express, skapte forundring ved å annonsere at avisen ikke lenger skulle legges ut på nettet. Etter hans mening var det forretningsmessig meningsløst i å gi bort en salgsvare uten rimelige utsikter for å få noe igjen for det. Enkelte tror det bare er et spørsmål om tid før også de større søkemotorene som AltaVista og Yahoo setter betaling fremfor innholdsmessig relevans som kriterium for listing av søketreff. Med overgangen til bredbåndstilkoplinger sprer dette også skepsis om hvorvidt det blir fritt frem for alle å gjøre informasjon tilgjengelig på motorveien, eller om dette vil bli styrt av økonomiske interesser, slik at mindre pengesterke aktører vil bli henvist til kjerreveien. og Internet Explorer i versjon versjonen av Internet Explorer foreligger trolig når du leser denne boken. I dag har Internet Explorer blitt den mest utbredte nett- 13

6 WEBDESIGN STEG FOR STEG leseren i Norge. Dette har sammenheng med at den følger med innstallasjonen av Windows, og at den er tilgjengelig på norsk. Likevel finnes det fortsatt miljøer som sverger til Netscape. En viktig tommelfingerregel når du utformer en webside er at hvis den vises riktig i Netscape, vil den også vises riktig i Internet Explorer. Det motsatte er ikke nødvendigvis tilfelle. Med andre ord: Det er større sjanse for at markeringen av en side gir uønskede resultater i Netscape enn i Internet Explorer. Du bør derfor alltid sjekke at siden ser ut som den skal også i Netscape. En ny generasjon websider Et ord som ofte brukes i datasammenheng for å uttrykke en utvikling, er generasjoner. I forbindelse med webdesign beskriver uttrykket førstegenerasjonswebside [1.2 A-C] den mest vanlige websiden på Internett. Den skal først og fremst gi informasjon, og består av en hovedside i én dimensjon, fra topp til bunn. Informasjonen presenteres i form av tekstavsnitt som atskilles med A B 1.2 A-C Førstegenerasjons-websider presenterer sitt innhold hierarkisk og i én dimensjon (nedover). C 14

7 KAPITTEL 1: BETYDNINGEN AV GOD WEBDESIGN blanke horisontale mellomrom eller (enda verre) mønstrede linjer. Underveis er det markert hypertekstlinker til andre dokumenter, som er bygd opp på samme måte som hovedsiden. En andregenerasjonsside er nesten identisk til en førstegenerasjonsside, bortsett fra at den i større grad benytter seg av innebygde finesser i nettleseren, slik som tabeller, mønstrede bakgrunner, enkelte symboler i stedet for ord, og bannere i stedet for tekst-overskrifter. Siden er menystyrt, og informasjonen presenteres fra topp til bunn i et hierarkisk system. Andregenerasjonssidene er vanligvis basert på samme hovedsideunderside-modell som førstegenerasjonssidene [1.3]. I dag er de fleste websider en mellomting mellom uoversiktelige førstegenerasjonssider og andregenerasjonssider hvor design og brukergrensesnitt ikke har vært viet en viktig del av utviklingsarbeidet. 1.3 Første- og andregenerasjons-websider består som oftest av ett nivå i form av en hovedside med linker til forskjellige undersider. A B C 1.4 A-C Andregenerasjons-websider benytter seg gjerne av flere av de innebygde mulighetene i nye nettlesere, som rammer og tabeller, enn førstegenerasjons-websider, men momenter som leservennlighet, design, navigasjon og brukervennlighet er ikke viet spesiell oppmerksomhet. 15

8 WEBDESIGN STEG FOR STEG A B Tredjegenerasjonswebsider Denne bokens ydmyke målsetning er å inspirere deg som leser til å lage websider i tredje generasjon. Det som skiller disse sidene fra andre sider er at designen er tilsynelatende fri og uavhengig av teknologiske forutsetninger og begrensninger, i stedet for at designen er fastlåst etter og tilpasset teknologien. Tredjegenerasjonssider veileder nettsurferen gjennom sitt innhold på en elegant måte ved hjelp av metaforer og ved å benytte etablerte modeller av forbrukerpsykologi [1.5]. Tredjegenerasjonswebsider er ikke basert på å fortelle brukerne hvilke produkter de bør bestille. Snarere er de laget for å få brukerne til å føle seg velkomne, og for å være så lette som mulig å bruke. På Internett er det viktigste virkemiddelet innen forbrukerpsykologi et nøye beregnet kompromiss mellom kreativitet og struktur. Det første er viktig for å fange brukerens interesse for websiden. Det andre er viktig for at brukeren med minst mulig problemer skal klare å navigere hensiktsmessig på websiden. Å lykkes med å lage tredjegenerasjons-websider er en utfordring som først og fremst krever tid, kreativitet, kjennskap til spesielle teknikker og ikke minst mye øvelse, men også innsikt i hvordan nettsurfere tenker og sans for hva de setter pris på. Det er disse aspektene vi skal se nærmere på i denne boken. 1.5 A-C Tredjegenerasjons-websider er ikke synlig styrt av tekniske begrensninger i HTML eller nettlesere, og presenteres gjerne i flere dimensjoner. Disse sidene kan være alt fra enkle, rent grafiske løsninger som i A, dynamiske og bevegelige som i B, eller strukturerte og oversiktelige som i C. C 1.6 Tredjegenerasjons-websider kan for eksempel ha en struktur som dette, hvor den besøkende får en opplevelse av helhet i form av veiledning gjennom inngangssider og avslutningssider. Slike sider må imidlertid brukes nøkternt og under enhver omstendighet ikke i nevneverdig grad forsinke eller forstyrre websiden i hastighet eller i brukervennlighet. 16