Du er bare ny brukar ein gong

I foredraget snakka dei om kor viktig det er å forstå korleis brukaropplevinga på nettstaden din er for ein heilt ny brukar. Då funkar det ikkje å følgja designsfilosofien til Jason Fried i 37signals: “We design for ourselves first”. 

Skal du få til å designa for førstegangsbrukarar må du bruka dine empatiske evner til å setja deg inn i den nye brukaren sin situasjon.

1. La brukaren koma i gang før du krev noko av dei

For å motivera brukarane bør du få fram kva som er det unike med løysningen din. Du må vidare sørgja for at dei skjønar at det som skjular seg bak innlogginga er verdt å få med seg. På nettstaden Geni (digitalt familietre) får du ei forklaring på kva som skjuler seg av funksjonar lenger inn i løysninga med ein kort filmsnutt. Og sjølv om ein ikkje startar filmen gir startbiletet eit godt inntrykk av kva det dreier seg om.

Det er ikkje fokus på registrering på førstesida, men fokus på å koma i gang. Det står ikkje “logg inn” eller “opprett brukar” på knappen, men “Start my family tree!”. For å ikkje mista det ein har begynt på kan ein leggja til eit passord i etterkant.

Registreringssida til Geni.com

2. Design for “A-ha”-augneblinken -  augneblinken der brukarane dine forstår kva som gjer løysninga di unik.

Registreringsprosessen til FaceBook vart brukartesta. Ein brukar hadde masse trøbbel med å registrera seg og skjønte ikkje heilt vitsen. Først då ho kom til steget “Finn folk du kjenner” og fekk opp bilete og namn på folk ho hadde gått på barneskule med – då gjekk lyset opp for ho. Dess tidlegare du klarar å gi folk denne opplevinga dess større sjanse er det for at dei vil fortsetja. Etter brukartesting flytta FaceBook dette steget lenger fram i prosessen.

3. Motiver brukaren din undervegs – når dei gir deg informasjon, gi dei noko tilbake.

Her kan du henta inspirasjon frå speldesign: når brukarane prøver litt, gi dei meir informasjon/funksjonalitet. I registreringsprosessen hos Mint (budsjettside) får du betryggande tilbakemeldingar steg for steg. Dersom du skal leggja inn all informasjon om kontoane dine etterpå så kan det vera greit at dei framstår som om dei er til å stola på.

Mint

4. Gjer opplæringa til ein del av opplevinga.

Google gjer dette i for eksempel Google Calendar. I staden for å laga manualar eller ta deg til ei eiga side som forklarar nye ting, så legg dei informasjon og tips om nye funksjonar rett inn i skjermbileta.

Google Calendar

Eit anna eksempel kjem frå bloggverktøyet Tumblr. Der kjem du i gang ved kun å oppgi epost, passord og ønska url. Straks du er inne kjem du i gang med å laga bloggen din. Det er ingen vegvisar, men opplæringa skjer gjennom at du tar i bruk bloggen og lagar den slik du vil ha den.

Bloggverktøyet Tumblr(

Forøvrig var konferansen Frontend2010 òg ei første brukaroppleving. I regi av våre venner i iXD, vart konferansen for første gang arrangert i Oslo denne veka. Det var eit godt stykke arrangement, så eg lurar på om dei hadde sniklytta på foredraget først:-)

Korleis møter du dine brukarar for første gong?

Her er nokre av dei sidene og designarane eg synst har fått det til:

Mike Kus frå Carsonified / Carsonified si nettside

Klar og reindyrka fargebruk der kvart menyområde er i kun to fargar; ein lys og ein sterk farge. Eg tilrår å gå inn og klikka på dei ulike toppmenyvala; det er veldig stilig. Den enkle fargebruken gjer at det ser ryddig og oversiktleg ut og tillet at det er ein relativt kompleks illustrasjon midt på.

_______

Mike Kus frå Carsonified / The Mattinator

The Mattinator er ei teneste frå Carsonified og som gir deg mogleiken til å twitra på fleire kontoar samtidig. Friske fargar, handteikna element, litt humor og likevel oversiktleg og enkelt.

_______

Vitor Lourenço, produktdesignaren til Twitter / Twitter

Vitor Lourenço har jobba som produktdesignar for Globo, Yahoo og no for Twitter (han kjem òg på Webdagene 2010 og fortel meir om godt design av innhald). Designet til Twitter er reint og enkelt samtidig som det ser koseleg ut. Det er ikkje så mange ekstra element og det er i hovudsak innhaldet som er designa.

_______

Jason Santa-Maria frå Happy Cog / Happy Cog si nettside

Sida er godt organisert og framhevar innhaldet. Dei gjer det ved først og fremst designa teksten og la det vera det viktigaste.

_______

Jason Santa-Maria frå Happy Cog  / Typekit

Typekit er ei abonnementsbasert teneste som gir deg mogleiken til å lenkja til fontar (på den måten kan ein bruka andre fontar enn dei som finst som standardfontar på datamaskinen i webdesignet). Sjølve websida brukar i hovudsak teksten som design og det passar jo veldig godt når det er det det dreiar seg om.

_______

Jason Santa-Maria frå Happy Cog / A list apart

Godt typografisk handtverk gjer at det ser oversiktleg ut sjølv om det er store mengder tekst. Den duse fargeprofilen forsterkar det lette uttrykket.

_______

iA / informationarchitects.jp si nettside

Mange av oppdraga til iA er på design av nettaviser. Og det skin kanskje gjennom i designet av deira eiga nettside? Designet er i hovudsak basert på tekst, og eit stramt og gjennomtenkt oppsett gjer at det ser ryddig og elegant ut.

_______

iA / Zeit Online

Ei av dei mange nettavisene som iA har designa. Eg synst dei er veldig flinke til å få store mengder tekst til å sjå ryddig og strukturert ut. Godt bruk av grid og justering av linjer på tvers av spalter forsterkar det ryddige inntrykket.

Eg har sikkert ikkje fått med meg alle kule og brukarvenlege design der ute, så om du har tips eller innspel blir eg glad for det!

Ledetekstar

Toppjusterte ledetekstar er det som er mest effektivt. Bruk det om du ikkje har nokon særskilte grunnar til å la vera. Det gjer det enklare å skriva lengre og meir forklarande ledetekstar. Under er skjema henta frå Origo.no

Registreringsskjema på origo.no

Høgrejusterte ledetekstar (høgrejustert inntil feltet) kan funka. Det krev mindre vertikal plass, men gjer det vanskelegare å skanna raskt gjennom skjemaet på grunn av ujamn venstrekant. Yahoo har gjort dette betre med å gruppera felta med skannbare overskrifter.

Registreringsskjema på Yahoo

Venstrejusterte ledetekstar bør i hovudsak ikkje brukast. Dersom det er uvanlege/ukjente opplysningar som skal inn kan det vera ei løysning sidan det gjer det lettare å skanna gjennom alle ledetekstane for å få oversikt over kva det vert spurt etter.

Skjema frå Hotels.com - ikkje eit eksempel til etterfølgjing

Nødvendige felt

Tenk over kva opplysningar du må ha og kva du bare synst er kjekt å ha. Dess færre felt du har, dess mindre brukar du av tålmodet til brukaren din. Der brukaren må logga seg inn eller registrera seg er det viktig at dette ikkje kjem i vegen for at brukaren får gjort det han skal. Amazon har løyst dette fint ved å la brukaren få fortsetja med handlinga si og så la han oppretta passord seinare.

Innlogging på Amazon

Dersom det er fleire opplysningar du ønskjer, bør du la brukaren registrera seg raskt i første omgang og heller la dei leggja inn fleire opplysningar i etterkant. Slideshare lar deg opprett ein brukar med brukarnamn, epostadresse og passord. Går du inn og ser på profilen din seinare så får du mogleik til å leggja inn fleire opplysningar med ein indikator på kor komplett profilen din er.

Profilside på SlideShare

Valfrie/obligatoriske felt

Regelen her er enkel og grei; marker dei felta det er færrast av – enten med “Valfritt” eller “Obligatorisk”. Eksemplet under er frå eit påmeldingsskjema frå våre eigne nettsider der dei to felta som er valfrie å fylla inn er markert.

Påmeldingsskjema til kurs hos NetLife Research

Hjelpetekstar

Når hjelpeteksten nærmast er nødvendig for å fylla ut skjemaet bør den alltid vera tilgjengeleg og stå i tilknytning til feltet. Storebrand brukar slike hjelpetekstar i forsikringsløysninga si.

Skjema frå Storebrand skadeforsikring

Der det er mykje hjelpetekst kan ein la det aller viktigaste vera synleg og lenka inn til ein light box for å få opp meir informasjon, som i eksemplet nedanfor frå Ebay.

Skjema frå Ebay

Særs viktig for hjelpetekstar er å fjerna dei som er unødvendige. Med eit kritisk blikk på eit Elmer-skjema hos ein kommune, så er noko av problemet at mogleiken for å gi hjelpetekstar vert brukt der det ikkje trengst og skjult bak eit i-ikon. Dette førar til ekstra klikking for ingen hjelpande informasjon, som i skjemaet nedanfor der hjelpeteksten til “Telefon dagtid” ikkje gir meir meining.

Utdrag frå Elmer skjema

Innskrivingsfelt

Lengda på feltet skal kommunisera kva opplysningar som skal inn, t.d at eit postnummerfelt ikkje treng å ha plass til fleire enn 4 siffer. Har du mogleik bør du òg validera opplysningane som vert skrivne inn etterkvart, så unngår du at brukarane skriv inn feil og må gå tilbake i skjemaet i etterkant. I eksemplet under frå Newsvine.com sjekkar dei umiddelbart om brukarnamnet eg ønskjer er tilgjengeleg.

Registrering av brukar på Newsvine.com

Navigering i skjema

Uansett om skjemaet er over fleire sider eller ei så må det vera tydeleg kva som er primæraksjon og kva som er sekundæraksjon. Aksjonar som Lagre, Send inn eller Gå vidare bør vera store knappar. Avbryt, Gå tilbake og Tøm skjema bør vera små lenkjer. Godt eksempel frå BaseCamp i skjermbiletet for å oppretta ein ny milepæl; stor knapp for å laga milepælen og lita lenkje ved sida av for å avbryta.

Oppretting av milepæl i BaseCamp

Eit eksempel på korleis ein ikkje bør gjera det finn ein hos NAV der ein skal bestilla Europeisk helsetrygdekort. I tillegg til at knappane ser heilt like ut er Nullstill-knappen plassert der ein vanlegvis blar seg vidare til neste side. Eg måtte prøva eit par gangar før eg fekk det til.

Bestillingsskjema for helsetrygdekort

Gjer det meir moro

Det er vel dei færraste som fyller ut skjema fordi dei synst det er moro i seg sjølv. I dei aller fleste tilfella er skjemaet noko ein må gjennom for å få gjort det ein skal. Då kan det vera fint å gjera opplevinga bare litt betre med humor. Som å skulda advokatane for at ein må akseptera avtalevilkåra hos TurboTax i eksemplet nedanfor.

Akseptering av avtale på TurboTax

Registreringsskjemaet hos Ethnio gjer at humrar medan ein fyller det ut. Mange fine kommentarar/hjelpetekstar nedover – utan å forkludrar enkelheiten i skjemaet. Kommentaren på val av tidssone er min personelege favoritt.

Registreringsskjema hos Ethnio

Redesign av Elmer-skjema

Skjemaet under er eit typisk Elmer-skjema frå ein norsk kommune (skjemaet er ekte og vart funne på nettet.) Poenget er ikkje å henga ut nokon, så for høvet er det anonymisert.

Skjema for å søkja på stilling

Skjemaet ser tungt og byråkratisk ut, så eg har gjort ein redesign av det basert på triks og tips frå Web 2.0 verda.

1. Kva felt treng ein?
   • Fødselsnummer: treng ein fødselsnummer for å søkja på ei stilling? Må det vera med så bør ein i det minste seia kvifor ein må oppgje det.
   • Poststad bør koma automatisk opp etter at ein har lagt inn postnummer og treng ikkje ha eige felt
   • Felta for nasjonalitet og kjønn er eg usikker på kva motivasjonen for å spørja om er – er ikkje dette meir “kjekt å veta”- informasjon? I mange tilfeller kan ein lesa dette ut i frå namnet. Dersom ein framleis skal spørja om fødselsnummer så vert ein vel definert som norsk så lenge ein har norsk fødselsnummer.
2. Ledetekstane bør vera toppjusterte over innskrivingsfelta. Det går raskast å fylla ut og gir eit meir ryddig uttrykk.
3. Unngå krøkkete formuleringar – bruk vanleg språk. I staden for å ha eit spørsmål som “Skal søknaden haldast attende frå offentlegheit” med kun ein sjekkboks med “Ja”, bør ein formulera dette meir aktivt og heller la felt for grunngjeving koma opp dersom ein hukar av.
4. Navigasjonen i skjemaet bør prioriterast. Knapp for å gå til neste side bør vera stor, og avbryt bør vera ei lita lenkje.
5. Hjelpeteksten bør inkluderast der den trengs (og fjernast der den ikkje trengs!).
   • Forklaring av kva “Telefon dagtid” er er unødvendig.
   • Hjelpeteksten for fødselsnummer bør inkluderast i ledeteksten: Fødselsnummer (11 siffer). Erfaringsmessig kan folk ofte blanda om det er fødselsdato, personnummer eller heile fødselsnummeret og talet på siffer kan derfor vera til hjelp.
   • For hjelpetekst til kor vidt søknaden skal haldast attende frå offentlegheita, så bør denne vera synleg. Eg tippar det er fleire enn meg som ikkje forstår dette heilt. Dersom ein av ulike årsaker ønskjer at søknaden skal atterhaldast offentlegheita så er det ok å få veta at det finst unntak. Sidan teksten i dette tilfellet er ganske lang kan ein lenkja inn til ein lightboks med meir informasjon.
6. Ta vekk unødvendige og forstyrrande element.
   • Navigeringsmenyen til venstre er ikkje det viktigaste på sida og bør tonast ned.
   • Innlogging til Min ID ser ikkje ut til å vera nødvendig i søknadsprosessen, så inntil motsette er bevist så forsvinne denne òg
   • Fargevalet kan med fordel gjerast litt lettare
7. Gjer det bittelitt meir moro. Det er ikkje så mykje som skal til. Sleng til dømes på ein kommentar bak feltet “Telefon dagtid” for å forklara kvifor det trengs. Det er sjølvsagt fordi kommunalt tilsette ikkje jobbar etter klokka 16.

Skjema for å søkja på stilling, redesigna

Kva syns du om redesignet? Blogginnlegget er basert på eit kveldsforedrag eg har holdt her i NetLife Research, så for dei som var tilstades her vart dette ein liten repetisjon.

Som designar er det desse 11 tinga du bør hugsa på å kommunisera til utviklaren:

1. Er layouten din fast eller flytande?
Fast layout er når designet er laga for å passa med ei bestemt skjermoppløysning. Fast layout gjer at ein har meir kontroll på korleis designet ser ut i og med at det ikkje strekk seg med nettlesarvindauget. Ofte er det òg enklare å koda.
Flytande layout fyller nettlesarvindauget og gjer at dei som har store skjermar/høg oppløysning får sjå sida di i stort format. Tekstlinjer kan bli veldig lange og vanskelege å lesa. Som Wikipedia eller Jakob Nielsen sin nettstad på ein brei skjerm.

2. Har du teke høgde for ekspandering av alle felt?
Det kan koma meir tekst og meir innhald enn det som er brukt som eksempeltekst i designet. Kva skjer med dei andre elementa om noko plutseleg vert større? Dette er særleg eit problem for alle dei som framleis brukar Lorem Ipsum tekst og ikkje reelt innhald i designet.

3. Er dei grafiske elementa laga slik at dei kan verta utvida?
Til dømes om overskrifta ligg i ein boks – kva skjer med boksen når teksten bryt over to linjer? Eksemplet er henta frå Gilde si framside – her vert boksen bak litt knapp når den nederste lenkja strekk seg over to linjer (i alle fall i FireFox på min Mac).

4. Har alle interaktive element ein status både med og utan JavaScript?
For dei brukarane som har JavaScript deaktivert bør det vera ei alternativ løysing. Til dømes om ei lenkje opnar ein lightbox må det kanskje òg finnast ei separat side som viser denne informasjonen.

5. Har kvart element ein status for både innlogga og ikkje-innlogga brukarar?
Dersom ein brukar loggar inn på nettstaden, får det konsekvensar for kva som vert vist på sida? Er det nokre element som kun skal visast for innlogga brukarar?

Eksempel frå Twitter som har denne toppmenyen når ein ikkje er innlogga:

og endrar til denne for dei som er innlogga:

6. Har du brukt nokon fancy skrifttypar som truleg treng ein eller annan teknikk for å bli vist rett i nettlesaren?
Dersom du har brukt ein av dei skrifttypane som ikkje finst på dei fleste maskinar må utviklaren nytta t.d sIFR for å visa dei. Har du vurdert konsekvensane av dette? Det er ingen garanti for at det vil fungera ut i frå tilgjengelegheitsomsyn, sjølv om det ser bra ut.

7. Har du laga feilmeldingar/ bekreftingar der dette er aktuelt?
Korleis skal desse sjå ut og kvar skal dei plasserast? Dersom du ikkje lagar noko kjem utviklaren til å gjera dette sjølv, og det er det ikkje sikkert du vert fornøgd med

8. Alle skjemafelt skal ha ein ledetekst og kvart skjema skal ha ein eigen “Send inn”-knapp
I mi verd så vil sjølvsagt dette vera på plass allereie når den grafiske designeren mottek wireframen frå interaksjonsdesignaren. Men om det mot formodning ikkje skulle skje så bør den grafiske designaren ta ansvar og få det på plass.

9. Er PhotoShop-fila di godt dokumentert?
Har du rydda opp og laga gode og forståelege namn på laga dine, slik at det er mogleg for utviklaren å skjøna kva lag som skal av og på for å visa ulike tilstandar?

10. Har du laga pdf’ar for alle tilstandar?
Det kan vera ei utfordring for utviklaren å skjøna korleis alt skal vera, så det kan vera lurt å ha med eit flatt bilete som visar korleis det skal vera.

11. Har du lagt med ein fargereferanse for alle fargane du har brukt?
Dersom du gir fargepaletten med fargekodar til utviklaren og spesifiserer kvar dei er brukt så vert han/ho glad og det vert enklare å få rett farge på rett stad.

Har du nokre erfaringar eller tips frå overgangen mellom grafisk design og utvikling som du vil dela?

99% av alle skrifttypar er designa for trykk og ikkje for bruk på nettet. Skrifttypane har som regel blitt utvikla til eit særskilt føremål – meir om historia til mange av dei vanlege fontane. Times New Roman vart i si tid designa for å kunna trykkast fort på dårleg papir og hadde derfor skarpe seriffar som skulle blø ut på papiret. Det er ikkje ein skrifttype for nettet i utgangspunktet sjølv om den ofte vert nemnt som nettsikker fordi den finst på dei aller fleste datamaskinar.

Under ser du eit døme på ein nettstad, www.seedconference.com som utelukkande har brukt Times New Roman og likevel fått eit godt resultat. Dei har ikkje brukt skrifta i så litan storleik så då fungerar den bra likevel – det handlar å ta omsyn til eigenskapane til den skrifttypen ein har valt.

Georgia er ein Microsoft skrifttype designa for bruk på nett (laga av Matthew Carter) og har store seriffar som skal gjera den lettare å lesa på skjerm. Her vart òg nettversjonen av skrifta laga før ein laga trykketypen. Microsoft har òg laga andre skjermskrifttypar som Cambria og Calibri som vart laga for Vista.

Eit nyttig verktøy finn du på 24ways.org (adventskalender for nettnerdar) der det er laga ei skrifttypematrise som viser kva skrifttypar som er tilgjengelege på kva for nokre operativsystem.

Foreløpig er det ikkje så mange skrifttypar å velja mellom som er særskilt tilpassa nett og som finst på dei fleste maskinar, men eg trur heller ikkje det bare er det det står på. Etter at du har valt skrifttype er det alle dei andre justeringane du kan gjera med storleik, mellomrom, linjelengde, linjeavstand og kontrast som avgjer om resultatet ditt vert bra.

I bloggposten “Web design is 95% typography” seier Oliver Reichenstein “Å optimalisera typografien er å optimalisera lesbarheiten, tilgjengelegheiten, brukarvenlegheiten og overordna visuell balanse. Å organisera tekstblokker og kombinera dei med bilete,- er det ikkje det grafiske designerar, brukarvenlegheitsspesialistar, informasjonsarkitektar gjer?”

Så korleis lagar du god typografi?

1. Skrifttype

Tradisjonelt har det vore mest vanleg med sans serif skrifttypar som t.d Arial på nettet, men med betre skjermoppløysning treng ikkje seriffar å vera eit problem. Skal du ha eit seriøst og klassisk uttrykk kan serif skrifttypar vera med på å understøtta dette.

New York Times brukar seriffar:

Smashing Magazine brukar sans serif:

Skrift i nettlesaren vert rendra på brukaren sin maskin, så for å ha kontroll på utsjånaden kan det lønna seg å velja ein av skrifttypane som finst på dei fleste maskinar; kva for nokre desse er varierar, blant dei som plar nemnast er Arial, Georgia, Tahoma, Times New Roman og Verdana.

2. Skriftstorleik

Både for lita og for stor skrift kan forverra lesbarheiten. Mellom 13 – 15 pixlar plar gi god lesbarheit for brødtekst. Meir om dette kan du finna i blogginnlegget til Jostein (frå 2004, men framleis aktuelt) “Mysteriet skriftstørrelse“. Test ut skriftstorleiken på den skrifttypen du har valt. Bruk for eksempel www.typetester.org. Dette er eit fint lite verktøy der du kan testa ut ulike skrifttypar, storleikar, avstandar o.l og som lar deg samanlikna tre stilar i slengen (i tillegg kan du henta ut css’en for valt stil).

Eksempel frå Typetester på tekst i 10, 13 og 15 pixlar:

3. Lengda til ei tekstlinje (Engelsk: Measure)

Å finna ei linjelengde som passar er viktig for lesbarheiten. Mark Boulton anbefalar mellom 52 – 78 teikn i lengde (omlag 2 – 3 alfabet i valt skrifttype) for optimal lesbarheit. I eksemplet nedanfor, henta frå Wikipedia er det omlag 77 teikn per linje. Wikipedia køyrer ein flytande layout, noko som gjer at tekstlinjene vert mykje lengre når vindauget fyller heile skjermen og det vert då vanskelegare å følgja linjene med blikket.

4. Mellomrom mellom bokstavar/ord (Norsk: Sperring/kniping, Engelsk: Tracking)

Vanlegvis har den som har utvikla skrifttypen teke seg av denne jobben, og det kan vera eit godt utgangspunkt å bruka den sperringa/knipinga som vert sett automatisk. Ein kan få behov for å justera denne om ein brukar veldig stor eller veldig lita skrift. På Typografi.no vert det påpeikt at stor skrift krev mindre bokstavmellomrom fordi bokstavane i seg sjølv har mykje åpent rom i seg, mindre skrift treng meir. Under ser du eksempel frå Typetester.org der teksten til venstre har mindre skrift og auka mellomrom mellom bokstavane, teksten i midten er normal og teksten til høgre har større skrift og minska avstand mellom bokstavane.

5. Linjeavstand (Norsk: Skytning, Engelsk: Leading)

Linjeavstanden vert definert som avstanden mellom botnlinjene til to tekstlinjer. Skrifttypar har som regel ein standard skytning som gjer at overliggjarar og underliggjarar ikkje rører kvarandre. Tekstblokker krev positiv skytning, medan korte tekstar og overskrifter kan ha negativ skytning.  Mark Boulton brukar som tommelfingerregel at skytninga bør vera større enn mellomrommet mellom orda for at auget naturleg skal følgja linja bortover horisontalt og ikkje nedover linjene. Typografi.no seier om skytning at sans serif fontar vanlegvis krev litt meir avstand enn serif fontar og at lange linjer krev meir avstand enn korte. Vidare meiner dei at omlag 1,3 gangar skriftstorleiken i avstand kan vera eit utgangspunkt, men at ein må prøva seg fram til det som ser bra ut.

Eksemplet under frå Typetester viser til venstre: Georgia 13 pixlar med linjeavstand 13 pixlar, i midten viser Georgia 13 pixlar med 16 pixlar linjeavstand og til høgre Arial 13 pixlar med 17 pixlar linjeavstand.

6. Farge og kontrast mot bakgrunn

Som kjent gir svart skrift på kvit bakgrunn god kontrast. Er du i tvil om du har god nok kontrast kan du testa dette med Colour Contrast Check som lar deg sjekka om tekstfargen og bakgrunnsfargen har god nok kontrast opp mot WCAG 2.0 krava. Jeff Croft frå BlueFlavor gjer i sin SlideShare-presentasjon om elegant web typografi merksam på at kvit/svart kontrasten er større på skjerm enn på papir og at mange derfor føretrekk off-black/koksgrå på kvit bakgrunn og lysegrå skrift på svart bakgrunn, som for eksempel Apple gjer.

7. Hierarki

Det er viktig å tenka på disposisjonen og laga ein skala av fontar som du kan bruka gjennomgåande. Bruk ein stil for overskrifter, ein for underoverskrifter, ein for brødtekst og ein for lenkjer og så vidare.  Dette gjer det lett å få oversikt og skanna gjennom teksten. På informationarchitects.jp er det enkelt å sjå kva som er overskrift, ingress og kva som lenkjer vidare inn til heile teksten.

Syns du dette var interessant og vil veta meir? Smashing Magazine har laga ein oversikt over nyttige verktøy for å laga flott typografi for web’en: 50 Useful Design Tools For Beautiful Web Typography

Etter at me fekk pussa opp bloggen vår har me hatt mange diskusjonar i NetLife Research om korleis den fungerar. Fornøyeleg nok gjekk den største diskusjonen på om me skulle bruka Arial eller Georgia Eg trur me med fordel kan justera typografien på bloggen vår for å gjera den lettare å skanna og lettare å lesa.

Kva synst du, og har du nokre tips?

Det er ei utfordring å finna ut kva for nokre brukarprofilar ein skal laga i eit prosjekt. Korleis skal ein sikra seg at brukarprofilane Ola og Kari tilhøyrer dei viktigaste brukargruppene dine? For å koma i gang kan ein starta med å lista opp ulike mål ein brukar kan ha for bruk av sida – det dei verkeleg vil gjera på sida di. For ei tenkt forsikringsside kan dette vera:

1. Kjøpa forsikring
2. Sjekka pris på forsikring
3. Finna ut kva forsikringa dekkjar

Ein annan segmenteringsteknikk kan vera å laga ei matrise basert på oppførsel og haldningar. Korleis varierar brukarane basert på kva dei gjer eller kva dei tenkjer? For den same tenkte forsikringssida kan variablane til dømes vera:  frå “kjøper forsikring for første gang” til “rutinert forsikringskjøpar” opp mot kor mykje kjennskap dei har til forsikringsbransjen.

For å sjekka om du har funne gode segment bør segmenta:

• Forklara nøkkelforskjellar som du har observert blant ulike brukarar.
• Vera forskjellige nok frå kvarandre
• Kvart segment bør kunna innehalda personar som verkar realistiske
• Vera raske å forklara
• Dekka alle type brukarar, dvs. alle treng ikkje vera ønskja brukarar:)

Korleis vert Ola og Kari levande?

Når ein først set av tid til å laga gode brukarprofilar bør ein sikra seg at dei får ei viktig rolle å spela i resten av prosjektet. Under får du nokre tips til korleis dei kan dukka opp og minna prosjektdeltakarane på brukarane undervegs i prosjektet:

• Sjølve brukarprofildokumentet bør helst ikkje vera meir enn ei A4-side og innehalda bilete av personen for å gjera dei lettare å hugsa. Som eksemplet ved sida av, Kari Nordmann, som tilhøyrer segmentet usikker førstegongskjøpar som treng mykje hjelp.
• Brukarprofilkort er ein meir kortfatta versjon av personasdokumentet, som eignar seg betre til å liggja på pulten, henga på tavla, festa til prosjektdokumentasjon eller sendast rundt i kontorlandskapet.
• Store plakatar som kan henga ved kaffiautomaten eller andre plassar i kontorlandskapet der folk samlast.
• Putta biletet av brukarprofilen saman med eit viktig mål eller eit sitat inn i prototypen for å forklara kvifor Ola eller Kari er så fornøgd med akkurat denne sida.
• Oppretta eigne epostadresser for brukarprofilen, til dømes; ola.nordmann@netliferesearch.com som kan senda epost til alle i prosjektet med innspel, kommentarar o.l
• Nokre av dei meir ekstreme variantane kan vera å laga pappversjon i heilfigur til å gi eigen plass i møter, laga ein kontorplass for dei og dekorera med familiebilder, dokumenter osv, ha ein brukarprofilquiz der ein får sjekka kven i prosjektgruppa som kjenner Ola og Kari best.

Har du andre tips til korleis ein kan få med seg Ola og Kari i prosjektet?

Norman sitt eksempel på dette var køståing hos Disneyworld. Sjølv om ein står ein time i kø så er det den fantastiske berg og dalbaneturen ein vil hugsa i ettertid. Om ein seinare skal vurdera korvidt ein skal reisa til Disneyworld igjen, så er det i hovudsak minnet av forrige oppleving som er utgangspunkt for avgjerdsla.

Bruce Tognazzini utdjupa dette i heildagsworkshopen sin i dag; ”Websites that sell”. Teorien bak stammar frå psykologen Daniel Kahneman (som for øvrig vann Nobelprisen i økonomi i 2002, med kun eitt økonomikurs innabords). Teorien går ut på at me ikkje hugsar alt som har skjedd i ei oppleving, men at me hugsar to delar best; høgdepunktet/botnpunktet og slutten.

Tognazzini presenterte ein studie med forsøkspersonar som åt ein sandwich og etterpå kun hugsa fyllet i midten og den aller siste brødbiten. Den ultimate sandwichen har då ein stor klump med roastbeef og majones i midten og ei herleg skorpe som brukaren hugsar i etterkant.

Dette kan førast over til at det er svært viktig at utsjekkingsprosessen for ein nettbutikk gir kunden ei positiv oppleving, for at dei òg skal tenkja tilbake på nettbutikken som bra. I følgje Tognazzini fortel ein nøgd kunde vidare om den positive opplevinga si til 1-2 personar medan ein misnøgd kunde vil fortelja det vidare til 5-10 personar.

Tognazzini gir oss nokre tips som kan sørga for at avslutninga på ein nettbasert handletur vert bra. Eg vil tru at mange har høyrt retningslinjene før og dei er ikkje så revolusjonerande:

• Ikkje tving brukaren til å registrera seg  i starten
• Gi dei mogleik til å alltid kunna handla meir
• Prøv å finna ut kva kunden kan vera redd for og forsøk å møta frykten i forkant
• Unngå masse advokatklausular og lovleg-babbel
• Sørg for at registreringsskjemaet er enkelt å fylla ut
• Støtt automatisk innfylling av felta om kunden har vore der før
• Sørg for at du ikkje kastar vekk informasjon som kunden har gitt deg tidlegare i prosessen

Ei side som eg synst gir ei positiv sluttoppleving er registreringsskjemaet til Ethnio. Det er både enkelt og morosamt – det er nesten så eg får lyst til å registrera meg sjølv om eg ikkje treng produktet.

Han meiner at ein ser meir og meir bruk av video på internett og at bruk av video i e-handel er det neste logiske steget i utviklinga av handel og reklame på nett.

Fordelen med bruk av video i dag er at alle kan produsera; alt du treng er ein mobiltelefon.

Ok, så kvifor meiner Justin at du skal bruka video?

• Video er det mest virale mediet. Eit eksempel er videoserien “Will it blend” som du finn på YouTube – den har hatt lassevis med visningar og er ein ganske kul marknadsføring (dei sel sjølvsagt blenderar). For eksempel kan du sjå dei testa ut å putta ein iPhone i hurtigmiksen. Det er veldig morosamt og litt dumt – og du sender sannsynlegvis ei lenke til ein kompis.
• Bruk av video er den mest engasjerande måten å overtala folk på.

• Sjølvproduserte videoar gir kredibilitet, ekstra verdi og gjer opplevinga meir personleg
• Du kan òg “stjela” andre sitt innhald, mange er interessert i å spre videoinnhaldet sitt så mykje som mogleg.
• Du kan òg gå for den brukargenererte varianten der kundar/brukarar lagar eigne videoar, for eksempel med korleis produktet ditt fungerar i bruk.

Kva bør du tenkja på før du startar?

• Ikkje lag ein video for å laga ein video, men det må støtta opp om den overordna strategien din.
• Forstå kva det kostar: produksjon-, bemannings-, distribusjons- og utplasseringskostnader.
• Reduser intern friksjon ved å starta med lave kostnader og få med deg andre i bedrifta.
• Mål resultata, og del dei med andre.
• Fortsett å justera og optimalisera etter lansering.

5 tips for betre rangering i søkemotorar:

• Bruk permalinks (Flash har ikkje dette default)
• Generer beskrivelsar av videoen
• Feed tag’ar til andre sider
• Putt inn metadata mens du kodar
• Fokuser på dei du treng å få oppmerksomheiten til

5 tips til høgare konverteringsrate

• Plasser lenker i videoen – når dei ser ein video ser dei ikkje andre stader
• Plasser videoar målretta  intelligent og automatisk
• Kryssalg inne i videoen
• Følg med på konverteringstala
• Lag ein kultur for optimalisering

Sånn kjem du igang

• Skaff innhaldet/videoen (kundar, leverandørar, sjølvprodusert)
• Launch a video site (Lavare risiko, mindre teknisk utfordrande, raskt til marknaden)
• Distribuer innhaldet ditt.

Me i NetLife Research har så smått byrja å ta i bruk video på nettstaden vår, og har lagt ut ein video som illustrerar korleis eye-tracking fungerar. Den viser på ein enkel måte korleis det fungerar, noko som kan vera vanskelig å forklara i tekstleg form.

Er det nokon der ute som har gode eksempel på bruk av video på nett?

For å sikra eit godt resultat bør du som forarbeid alltid setja deg inn i kva strategien og måla med nettstaden er, kven det er som skal bruka nettstaden, kva dei skal gjera der, samt sjå på kva innhald som må inn for å støtta desse oppgåvene. Så er du klar til å setja igang.
Til prototypinga treng du:

• 1 A3 ark
• Papp i ulike fargar
• Saks
• Teip
• Tac-it/blue-tec
• Kamera
• Pennar

Slik gjer du det:

1. Bakgrunn. Bruk et liggande A3-ark som bakgrunn og legg den på eit bord. Det passar sånn omlag med eit skjermutsnitt. Her kan du teikna opp faste element som logo, søkefelt og anna som skal gå igjen på alle sidene.
2. Menyelement, vindauge og lenker. Klypp ut papp-bitar i ulike fargar. Forsøk å la like element ha lik farge. T.d at alle menyelementa er gule, lenker er blå osv.
3. Tekst. Skriv på for hand og bruk ein tydeleg penn slik at det vert lett å sjå teksten sjølv etter at det er fotografert og digitalisert.
4. Knappar. For å få desse til å stå litt ut kan du putt ein liten klump med tack-it/blue-tec under.
5. Skrollbar. Fiffig detalj å laga denne slik at du kan visa ulike skjermutsnitt frå ei lang side. Klipp ut ei lang remse som du så teipar fast ein ny papp-bit på. Denne kan du så flytta opp og ned etter kva del av sida du viser.
   
6. Lightbox. Putt eit bakepapir over skjermbiletet og legg ein boks med det innhaldet du vil ha oppå den (eksempel finn du i bloggposten Lightbox: Årets interaksjonsdesignteknikk?)
7. Fotografering. Ta bilete av sida rett ovanfrå. Dersom du treng å forklara meir kan du lima ho inn i eit passande program og skriva punktvise forklaringar til skjermutsnittet.

Fordelen er at dersom du ikkje vert fornøgd kan du bare plukka av det du ikkje likar og leggja på nye element. For å laga ei ny side kostar du av alt og startar frå byrjinga igjen. Bruk gjerne element fleire gonger eller modifiser dei slik at dei passar. På denne måten køyrde me 3 iterasjonar av konseptprototypinga i forrige prosjekt der me brukte denne teknikken.

Kva synst me om teknikken?

• I tidleg konseptuvikling klarar ein betre å halda fokus på det konseptuelle i staden for på detaljane (pixelfiksing og anna). Dette gjeld både i prosjektgruppa og i kommunikasjon med kunden.
• Ein vert meir villig til å føreta endringar og laga fleire versjonar. Det er enkelt å flytta rundt på ting og å klyppa ut nye element.
• Unngår at kunden heng seg opp i utsjånaden til prototypen, noko som uansett ikkje er klart så tidleg i utviklinga.
• Det er relativt enkelt å laga ein klikkbar prototype ved å ta bilete av sidene og lenka dei saman ved hjelp av image-maps og litt html-triksing.
• I brukartestar skjønar testpersonen at dette er ikkje ei ferdig nettside, og terskelen for å koma med kommentarar og innspel kan verta lågare.

Men det er ikkje alltid at det vil fungera

• Dersom ein kjem inn seinare i eit prosjekt, der t.d grafisk profil er gitt, kan det fungera betre å halda seg til denne i prosjektet.
• Er det viktig for kunden at prototypen er tett opp til målbiletet i prosjektet er ikkje papp og papir tingen.
• På ein nettstad med mykje animasjon og ajax kan papp-prototyping bli ganske tungvindt.

Kva trur de? Er dette ein teknikk de kjem til å prøva?