Storebrand lanserer nye nettsider
Det er alltid gøy å besøke nylig publiserte nettsteder som man selv har jobbet med. Jeg kan se for meg at det er litt som å besøke sitt nyfødte barn på fødestua for første gang (jeg kommer tilbake sent i juli for å bekrefte eller avkrefte akkurat det). Tirsdag denne uken, ca klokken 13:00 gikk nye storebrand.no på lufta og jeg må si det var en storartet opplevelse å klikke seg rundt på de nylanserte sidene. Dette til tross for at jeg har stirret disse sidene opp og ned i lange tider allerede.
De nye sidene til Storebrand tilbyr flere typer forsikring, bl.a. bilforsikring, husforsikring, innboforsikring og barneforsikring. Målet er å selge mest mulig forsikring gjennom å lage en brukervennlig webløsning.
Arbeidet med Storebrand.no har som du skjønner pågått en stund. Netlife Research har jobbet med diverse redaktører og interne hos Storebrand siden før jul. Tidlig i år flyttet jeg inn hos Storebrand og produserte opp de første klikkbare HTML-skissene, samtidig som min kollega Teodor begynte å tegne skisser i Photoshop. Vi har vært gjennom flere brukertester underveis og endret og forbedret helt frem til helgen som var.
Hva innebærer det så at Netlife Research (heretter Netlife) “jobbet med redaktørene”? Dette arbeidet begynner ofte ved at Netlife har en workshop sammen med redaktørene for et gitt område – for eksempel bank. Målet for denne workshopen er å komme frem til hvilket innhold brukerne av dette området er interessert i, hvilket innhold området ønsker å presentere, og hva som er viktigere enn det andre. Netlife lager på bakgrunn av disse workshopene en såkalt wireframe, en strukturell skisse over banksidene.
Slike skisser, “wireframes”, produseres så for alle områdene, og alle nivåene i hierarkiet tegnes ut og samles slik at man kan bla igjennom. En slik skisse gir intet grafisk inntrykk, men et detaljert bilde av innholdet som skal presenteres, hvordan det linkes sammen og hvordan det presenteres. Denne wireframen blir det så kjørt en brukertest på, for å se om hierarkiene, plassering av innhold og formuleringer er intuitive og greie å forstå. Det er på dette stadiet også mulig å teste om navigasjonen på nettstedet er intuitiv for brukerne. Basert på tilbakemeldinger fra denne testen ble det jobbet videre med wireframen.
Som jeg nevnte tidligere kom jeg inn i starten av året for å skrive XHTML, CSS og Javascript til løsningen – med andre ord “implementere brukergrensesnittet”. Med wireframen på plass er det strukturelle på plass, og dermed var det duket for at jeg kunne skrive XHTML for en del av sidene. Merk at dette skjer FØR en eneste strek er tegnet i Photoshop. Man får da en skisse med samme “triste” strukturelle utseende som wireframen som man kan klikke gjennom i en nettleser, og som man kan begynne smått å se på tekstene i. Da vi jobbet med skadeforsikring i fjor hadde vi i HTML-prototypen en klikk-rediger-lagre-løsning som redaktørene kunne bruke for å endre hjelpetekster og lignende. Dermed var mye av tekstene på plass mens designet enda var i sin spede barndom.
Etter å ha avduket noen forbedringspunkter gjennom brukertester, videre arbeid med wireframen OG arbeidet med HTML-prototypen kunne Teodor starte arbeidet med designet. Det er et viktig poeng her at HTML-arbeidet også kan hjelpe til med utforming av strukturen. Når tjenesten bygges med strukturell og minimalistisk HTML, og styles med CSS, er det lett å se hvor man har vært litt for impulsiv, og glemt å være inkonsekvent. Det skjer den beste, og arbeidet med å samle sammen en wireframe til noe som er programmatisk konsekvent er en hod støttespiller i å nøste opp de løse trådene.
Med en klikkbar HTML-prototype er det også mulig å gjøre brukertester på interaksjonen i siden. Wireframes kan linkes sammen og gjøres klikkbare i for eksempel Visio, men det er vanskelig å få til mer avansert funksjonalitet. Derfor var det for eksempel nyttig å ha en HTML-prototype med design i versjon 0.1 Beta på brukertest for å kunne teste popup-vinduene som vi bruker en del av på Storebrand.no.
Etterhvert som designet kommer på plass implementeres det løpende inn i HTML-prototypen. Siden strukturen fortsatt er den samme slipper vi unna uten for mange endringer i den opprinnelige HTML’en, vi skriver bare ny CSS. Over tid kommer også publiseringsløsningen på plass, og designet droppes da også jevnlig over i denne. Siden den baserer seg på samme rammeverk som HTML-prototypen (man kan kanskje si at HTML-prototypen er oppskriften på grensesnittet til publiseringsløsningen) kan vi her også bare slippe inn nye CSS- og Javascript-filer etterhvert som de blir klare.
Alt er selvfølgelig ikke mulig å forutse, og endringer i HTML forekommer stadig, men de forekommer i små doser hele veien, og man trenger kun å flikke litt i malverket til publiseringsløsningen for å komme opp å stå med en ny versjon av designet.
Denne prosessen illustrerer hvordan vi mener det skal være å jobbe med web i 2007: Først fokuserer man på brukerens målsetning med besøket. Deretter går man løs på innhold, presentasjon og glitter. Prosessen blir spesielt vellykket når vi bruker verktøy som skiller innholdet fra glitteret slik at vi ikke mister fokus underveis. I tillegg er det morsomt fordi man så lekende lett kan prøve ut endringer som rister fundamentet, om så bare for et lite øyeblikk, bare for å se hvordan det blir.
Hele veien under prosessen sitter vi selvfølgelig klare med saksene våre, og utøver kuttisme ved hver eneste anledning. Resultatet, håper vi, er et nettsted med klart fokus på innholdet, hvor alt krimskramset er kuttet vekk, hvor tung tekst er byttet ut med lettforståelige og scanbare punktlister, hvor mer bakgrunnsinformasjon er tilgjengelig på en ryddig måte der de korte tekstene ikke gir deg nok å gå på.
Hva vi mener får nå være så, det som er viktig er hva brukerne syns om det nye nettstedet. Så fortell oss kjære Kuttisme-leser, hva syns du om nye www.storebrand.no?
Det er forøvrig interessant å lese nettbankvurderingen i Dine Penger om hva som er viktig for nettbanker.
Innlegget ble skrevet 20. april 2007, 19:32 under
Du kan følge med på tilbakemeldingene til dette innlegget gjennom RSS 2.0-feeden. Legg igjen en kommentar, eller trackback fra din egen side.
18 Kommentarer til "Storebrand lanserer nye nettsider"
Gratulerer, dette ser skikkelig bra ut. Flott gjennomført design og en fryd å surfe rundt på.
Dere bruker en slags popup for å presentere en vesentlig del av innholdet på nettstedet. Jeg kunne tenke meg å høre mer om hvorfor dere har valgt dette, spesielt siden du skriver at det er brukertestet. Hva kom dere fram til i testingen, hvorfor funker popups, til hva slags innhold, etc.
Nydelig side. Det var en avslappet enkelhet og ro over storebrand.no. Har du tenkt på SEO oppe i all denne kuttismen?
Takk til dere begge for ros.
@st: Popupen har sitt opphav i skadeforsikringen fra ifjor. Der benyttet vi den i utgangspunktet til “Hva dekkes/hva dekkes ikke” og litt mer bakgrunnsinformasjon om forsikringene. Ved å presentere det på denne måten kunne vi med enkelhet også gi folk tilgang til denne informasjonen under beregningen, uten at de trengte å avbryte prosessen.
Dette fungerte såppass bra at vi tok den mer i bruk på Storebrand.no, selvom man der ikke er i en prosess hele tiden.
@gb: Vi har forsøkt å være opptatt av SEO underveis, og har lagt til rette for dette gjennom HTML-malverket vårt, ved å være bevisst på tittel-felt og bruk av overskrifter ellers.
Det er også bygd inn muligheter i publiseringsverktøyet for redaktørene å benytte seg av meta-tagger til nøkkelord og beskrivelse. Sistnevnte er kanskje ikke et veldig utslagsgivende grep, men jeg syns ihvertfall at en god description lettere kan fange brukerens oppmerksomhet enn et tilfeldig sammendrag.
Fremover blir det opp til redaktørene å ha SEO i bakhodet når de produserer innhold.
Gratulerer. Likte siden veldig godt. Forenkler valgsprosessen for brukerne.
Når det gjelder optimalisering av innholdet har Per Erik Skramstad i Webkommunikasjon.no vært en viktig brikke. Les hans beskrivelse på webkommunikasjon.blogspot.com
[...] Kuttisme og Webkommunikasjon kommenterer nye, enkle storebrand.no (men Helge Tennøe savner salgsdrivarar) [...]
[...] Mer om utviklingsprosessen og samarbeidet mellom IxD og oss i Christians eminente blogginnlegg. [...]
Jeg synes URL-designet ikke er spesielt bra, men ellers liker jeg det nye designet svært godt. Kodemessig er det også over pari. Bra jobbet!
Asbjørn: Jeg er enig med deg hva URLer gjelder, men de er så gode som omstendighetene tillot at de kunne bli. De har ikke veldig stor verdi for brukeren (slik som en enkel hierarkisk URL kan ha), men de hjelper oss litt i søkemotorene ved at vi får nøkkelord inn i URLen. Det kunne ha vært verre
[...] Kuttisme.no: Storebrand lanserer nye nettsider .IXD with more info on the Storebrand relaunch. [...]
[...] 2007 vil handle om prosessen jeg tidligere har pratet om (og andre), grundig beriket med eksempler fra det virkelige liv. Her dekkes alt fra [...]
[...] noen uker siden gikk Storebrands nye nettsider på lufta, og jeg skrev et lengre innlegg på Kuttisme.no hvor jeg forsøkte å forklare prosessen vi jobber med når vi gjør slike [...]
Gratulerer med lanseringen av de nye sidene til Storebrand. De ser veldig bra ut.
I avsnitt nummer seks skriver du:
Når tjenesten bygges med strukturell og minimalistisk HTML, og styles med CSS, er det lett å se hvor man har vært litt for impulsiv, og glemt å være inkonsekvent.
Her mener du vel [...] glemt å være konsekvent.
Bra jobb, men vitterlig stygt med pixelert bilde av forstørrelsesglasset i søkeboksen
Meget bra site!
Strukturen i artikkelen kunne dog vært litt bedre, og den gav utrykk for at folket ikke viste hva xhtml, js og css er.
* Fikk inntrykk av at du lagde html/css under wireframingen. Det finnes som mulig kjent utallige gode wireframe programmer.
* Det er ikke alltid lurt å lage xhtml/css osv og sende det over til programmererne. Dette bør best gjøres i samråd med koderne.
* En god utviklingsmetode må også benyttes på dette stadiet. Et godt nettsted er viktig, men det kan bli betydlig dyrer hvis man ikke tar godt hensyn til de som skal faktisk programmer løsningen – ikke style (xhtml, css osv).
Ellers meget spennende å se hvordan dere gjorde det. Resultatene ble stunning.
-Thomas
Glad i kritikk & skriver masse stavefeil
Hei Thomas, takk for gode innspill!
* Det er mange gode wireframe-programmer, og de som laget wireframen brukte nok minst ett av dem
Det jeg gjorde var å ta tak i strukturen på sidene, og begynte å bygge rammeverket for XHTML-delen av nettstedet allerede mens utvikling var på wireframe-stadie.
* Helt enig i at man bør spare seg for å sende XHTML-maler av gårde og håpe på det beste. På storebrand.no var det bare en på storebrand pluss meg som gjorde det tekniske, og vi hadde tett dialog hele veien, en viktig suksessfaktor.
Når vi jobbet med Skadeforsikring var det flere utviklere, og jeg jobbet da direkte i JSPene og hadde dermed (tilnærmet) full oversikt og ansvar for XHTML-delen av applikasjonen.
* Igjen, helt enig. Det er viktig å få på banen så tidlig som mulig hva man jobber med – hvilke begrensninger man må godta, hvilke som må løses og hvordan man best kan samarbeide. Dette er individuelt og må løses per prosjekt.
Jeg ser at jeg i dette innlegget har gapet over mye og sannsynligvis burde komme med noen utfyllende innlegg på enkeltelementer. Vi får se om tiden strekker til
[...] Ved å ta grensesnittsutviklere inn i prosjektet på et tidlig stadium er det mulig å gi utviklerne en sjanse til å ligge litt foran. Med semantisk HTML som grunnleggende dokumentstruktur kan man tidlig begynne å utvikle skjermbilder, selvom designet ikke er klart. Så fort wireframes, eller andre konseptuelle skisser foreligger kan grensesnittsutvikleren lage skjermbilder av disse som utviklerne i sin tur kan begynne å jobbe med (slik jeg tidligere har gjort blant annet på Storebrand). [...]
Du skal ha skryt. Dette er den foerste norske og gode siden jeg har sett
Absolutt brukervennelig(!)
Legg igjen en kommentar