Arkiv for ‘Usability’ Kategori

Har du disse symptomene?

Når du går til dokteren, så lister du opp dine symptomer, og hvis du er heldig, så vi dokteren gi deg et lite ark med foreskrevet medisin som skal ta knekken på problemene dine. Vi som jobber med design vil at du kommer til oss med dine symtomer heller enn hvilken medisin du tror du trenger. Men nå har vi jo denne kjekke lommelegen, hvor enkelte bruker mer tid enn på facebook (de som har barnehage-barn). Hvor er designsymptomenes versjon av lommelegen? Her er mitt bidrag til designkundenes lommelege. Har du disse symptomene?

Symptomer: mye dobbeltarbeid og inkonsekvent design

Bortgjemt CSS, duplikatkode, uklar visjon og inkonsekvent design

  • CSS kode gjemmer seg i ulike hjørner av systemene
  • Unødvendig duplikat kode gjør sidene tregere
  • Tidkrevende grafisk design prosesser for hver eneste grafiske detalj
  • Utydelige designprinsipper
  • Ingen tydelig designvisjon for den helhetlige UX på tvers av prosjekter og enheter
  • Inkonsekvent design på tvers av ulike skjermoppløsninger, enheter og papirutgaver

Medisin: en levende digital stilguide

En levende og digital stilguide kan bestå av gjenbrukbare kodebiter:

  • Side layouts
  • Box layouts
  • design stiler
  • Arkiv (logo, vektorgrafikk ol.)
  • UX prinsipper
  • Front-end kode standarder

Hver bit burde inneholde:

  • Tingens navn med en unik url
  • Rationale for hvorfor tingen er som den er, og hvordan den er ment å brukes
  • Et eksempel på selve tingen
  • Og kodesnutten som genererer tingen

Stilguiden er løpende arbeid, det er ikke bare å lage stilguiden, den må også implementeres og revideres løpende i takt med løpende prosjekter. En stilguide skal være et kommunikasjons-verktøy, ikke en tvangstrøye.

Designerne bruker stilguiden til å:

  • Dele designelementer
  • Referere til designbiter som allerede har rasjonale beskrevet, istedenfor å forklare hver detalj i hver eneste prototype
  • Finne filer og kodesnutter

Front-end utviklere bruker stilguiden:

  • Som et hjelpemiddel for å skrive gjenbrukbar kode og bygge gjennomgående grensesnitt
  • Hjelper med å forstå designvisjonen
  • Live eksempler speeder opp utviklingsprosessen og testing

Ledere og nettredaktører bruker stilguiden til:

  • Hjelper nyansatte og vikarer med å forstå systemene og formidlingsmulighetene
  • Forstå hvordan de kan tilpasse sidene til sine behov
  • Et kommunikasjons-hjelpemiddel

 

Et sunt digitalt design består av gjenbrukbare deler, organiserte biter, en tydelig visjon og et fleksibelt og gjennomgående design

  • Gjenbrukbare deler som er lett å finne og gjenbruke
  • Organiserte biter, arrangert så du kan scanne, velge og bruke hver del raskt
  • Mindre duplikatkode som gjør sidene raskere
  • LO-FI prototyper kan tas rett til produksjon raskt
  • Fleksibelt og gjennomgående design på tvers av ulike skjermoppløsninger, enheter og papirutgaver
  • Tydelig designvisjon på tvers av mennesker og prosjekter
  • Det kunne vert enklere å teste
  • Dere kunne hatt et felles vokabulær
  • En nyttig referansebase
  • Og ikke minst, en mer effektiv arbeidsflyt

 

Resirkulering av designbiter gjør tjenesten mer intuitiv for de som bruker tjenesten

Når de interaktive bitene har et gjennomgående designspråk og adferd på tvers av skjermer, er det lettere å bruke, fordi det er mer lærbart og forutsigbart for de som skal bruke tjenesten. Dersom en funksjon oppfører seg på en måte på mobil, er det veldig kjekt for brukeren å kjenne igjen denne triggeren på en annen skjerm, og allerede vite hva den gjør.

 

Riv ned veggen

Siden CSS og HTML er kode, blir front-end utviklere ofte puttet i den samme boksen som Java/PHP/Ruby/back-end utviklere, heller enn hos resten av designteamet. Dette er et problem. Html og CSS er design.

Ettersom vi må være tigjengelig på alle de enhetene våre kunder/lesere/seere/brukere lever livene sine på, blir det viktigere og viktigere å jobbe i dynamiske miljøer for å artikulere hvordan designet skal oppføre deg på tvers av alle de ulike enhetene våre brukere sitter med. Sist jeg sjekket statistikken var det over 700 ulike skjermoppløsninger som besøkte våre tjenester.

For å kunne jobbe effektivt med design for dagens og fremtidens nettsider, må vi erstatte utdaterte designmetoder med ekte samarbeid og kommunikasjon. Ettersom multi-device web blir normen, vil kaste-over-veggen metoden bli mer og mer utfordende. Den moderne designprosessen krever intenst samarbeid mellom designere og front-end utviklere.

 

Hvis du ignorerer symptomene…

Dersom dere ikke tar denne medisinen, risikerer dere å ikke ha en klar designvisjon, dere designer flere versjoner for hvert designelement, en økende mengde duplikat kode som gjør sidene tregere og tregere, og en inkonsekvent brukeropplevese som leder til frustrerte kunder og lesere.

 

Gjenbrukbart = konsekvent design = lett å bruke

Design stilguiden gir mulighet for å lage et mer gjennomgående, konsekvent, forutsigbart og lærbart grensesnitt og brukeropplevelse.

Standard biter og designstiler hjelper dere med å gjenbruke løste, effektive design løsninger igjen og igjen. Resultatet av dette blir at konsekvens og brukervennlighet øker.

Til slutt, er det de aller viktigste menneskene  – de som bruker tjenestene – som drar mest nytte av det når dere har en velfungerende stilguide.

Deleger kortene til mobilen

Hvorfor drar vi fortsatt rundt på 4-7 kort i lommen? Visakort, kaffekort, busskort og nøkkelkort. Hvorfor har vi ikke delegert visakort og busskort til mobilen? Ruter har allerede begynt å lage en billett-app på mobilen. Vi har allerede bank på mobilen.

Den beste måten du kan unngå å glemme ting på, er å ikke ha noe å huske

Jeg glemmer stadig ett eller flere av kortene mine, enten glemmer jeg nøkkelkortet, eller så glemmer jeg visakortet, eller kaffekortet. Men mobilen, den glemmer jeg (nesten) aldri. Og hver gang jeg går på bussen så står jeg og blar igjennom et arsenal av kort for å finne det riktige kortet. Gjerne mens jeg står i kø ute i regnet med paraply, sekk og veske som et annet pakk-esel og febrilsk forsøker å fiske opp riktig kort før det er min tur å gå på bussen.

Nokia gjorde 5 års research verden rundt der de spurte ‘what do you carry’?  Jan Chipchase jobber med å studere menneskelig adferd. Han fulgte folk rundt med videokamera og studerte hva de bærer på.

Hva tenker du på å ta med deg, hva tar du med deg, og hva ender du opp med å bruke og hvilken verdi har det for deg? Det de fant ut var at folk bærer nøkler, penger og mobiltelefon. Det høres kjent ut. Grunnen til at vi bærer disse tingene koker ned til overlevelse. For oss selv og de vi bryr oss om. Sikkerhet og fysiske behov, de to nederste trinnene på Maslows pyramide. Overlevelsen er avhengig av at vi bærer på disse objektene – MEN – vi er menneskelige, vi glemmer. Nokia fant på en garantert måte å aldri glemme noe på – å aldri ha noe å huske! Hva kan vi delegere til teknologien?

Å huske kontaktinformasjon har vi allerede delegert til teknologien. Hvem husker bestevennens telefonnummer i disse dager? Jeg husker den gangen da vi måtte pugge mobilnummer og huske de utenat. Klokker måtte vi også huske før i tiden. Klokken bærte vi først som lomme-ur og så ble det armbånds-ur. Dette ble så til lomme-ur igjen i form av mobilen, som ligger i lomma. (Når kommer armbånds-mobilen?)

Jeg tror ikke vi trenger to dingser for å betale med mobilen i fremtiden. Folk liker å bruke mobilen når de likevel er på mobilen, det er enkelt, og de slipper å dra seg opp av sofan for å hente visakortet som ligger på kjøkkenet (pes!).

Infografikken viser at mobil betaling blir mer og mer populært:

Mobile Payment 2015 [infographic]
Mobile Payment 2015 [infographic]
Infografikken er hentet fra Mobile Payments Today

Vi må være klare for at mye vil forandre seg raskt og lage fremtids-vennlige produkter og tjenester. Ved å se hva som kommer, og lage produkter og tjenester som er bygget for fremtiden, kan vi skape langsiktig verdi for folk og kunder.

Lokal-Aviser lanserte i dag

I natt lanserte Edda utvikling mer fleksible, fokuserte, tilgjengelige og dynamiske aviser som tar i bruk nye muligheter som kom med den nye annonsestandarden.

Fleksibelt

  • individuell profil for hver avis
  • ulike forsider fra dag til dag
  • ulike forsider fra avis til avis

Nettredaktørene skal ha fleksibilitet nok til å avspeile nyhetsbildet dag for dag og mulighet til et individuelt visuellt uttrykk også på nett. Rammeverket skal ikke være en tvangstrøye men et sett med moduler som de selv kan sette sammen til å passe deres behov som gir nettredaktørene rikelig med spillerom.

Bort med tjafs

Ny forside

Det er innholdet som gir den gode brukeropplevelsen og det er innholdet som hjelper brukeren til å finne frem på sidene.

Jo mer vi kan kutte bort innhold som ikke trenger å være der, som ikke blir klikket på, jo lettere blir det for leserne å finne det gode innholdet.

Jeg tenker nytt på seksjonssider. Seksjonssider er typisk lite besøkt, og er ofte en kopi av forsiden. Nå skal de være mer spisset mot hvert enkelt tema og det er kuttet ned masse på innhold som ikke trenger å være på seksjoner. Tidligere var vi bundet til å måtte «fylle ut» en hel kolonne med innhold, noe som gjorde seksjonene lite fokuserte. Nå er det lagt opp til moduler slik at en seksjon bare skal inneholde moduler som har noe på den seksjonen å gjøre. Nå må nettredaktørene deske seksjonene i større grad, noe som gjør at de må tenke mye mer fokusert og prioritere knallhardt hvilke seksjoner de egentlig trenger.

Horisontalt design

Det ligger i det nye designkonseptet at vi går fra et vertikalt design til et horisontalt design. Vi er ikke lenger bundet til en layout på tre kolonner. Med de tre kolonnene stopper blikket, siden deles i tre og blikket presser nedover kolonne 1 og en må scrolle opp og ned og opp igjen for å få med seg det som ligger i kolonne 2 og 3. Kolonne 2 var lite klikket på, men kolonne 3 var enda mindre klikket på. En vestlig person leser typisk fra venstre mot høyre, derfor fungerer det bedre med et horisontalt design der leseren kan scanne hele bredden nedover på linje fra venstre mot høyre.

Dynamikk

Mer fokus på dynamisk innhold, mindre statisk innhold som ingen klikker på. Jeg har sett at det statiske innholdet som lå i kolonnen til høyre for artiklene ble lite klikket på. Etter at vi utvidet nyhetskolonnen som lå til venstre ble denne effekten bare forsterket.

Faste elementer har en tendens til å bli rammet av banner blindness effekten, de blir etterhvert oversett av leserne.

Med det nye rammeverket må nettredaktørene prioritere mye bedre og ta bort mye av det statiske innholdet som ingen klikker på. Det er lagt opp til at redaktørene skal bruke mer av de dynamiske elementene for å promotere nye tjenester heller enn å legge opp et statisk element som blir liggende år etter år. Vi får et mye bedre meny med megameny og søk som gjør at leserne kan søke i alt innhold og produkter og tjenester, ikke bare nyhetssaker.

Megameny

Med den nye megamenyen kan vi vise frem mye tydeligere hva som gjemmer seg bak hvert menypunkt. Vi bruker mer plass og grupperer menyelementene. Eksemeplvis får vi snart en ny markedsplass med bookingtjeneste hvor «Sett inn annonse» får en stor megameny som viser alle kategoriene og vei inn til annonsering i en megameny.

Alle skal med

Ny artikkel

I denne rammeverksprosessen har det vert viktig for meg at vi har fokus på Universell utforming. 20% av befolkningen har en eller annen form for nedsatt funksjonsevne. I det nye rammeverket har vi lagt stor vekt på å tilrettelegge både design med gode kontraster og fontstørrelser, html som fungerer optimalt med skjermlesere og tastaturnavigasjon og innhold som er tilgjengelig. Dette blir en prosess som vi kommer til å fortsette å fokusere på fremover. Alle som er med på å legge energi inn i avisen, både designere, utviklere og redaktører må bli bevisst på prinsippene for en mer brukervennlig og tilgjengelig avis.

Nye annonseformater

Gridbasert html, 1280 skjermer og nye annonseformater.

I fjor kom de nye annonseformatene. Vi var raske med å legge opp det gamle rammeverket med bredere kolonne 1 slik at vi fikk inn de nye formatene. Men det er først nå vi virkelig har utnyttet de nye mulighetene som det nye annonsekonseptet gir. De nye annonseformatene går opp i en grid, noe som gjør at vi nå kan lage et design som har en grid som går opp i bredden siden alle bannerne har et format som slutter på -80.

Vi har lagt opp til en grid på 980 som støtter bedre de nye annonseformatene og gjør det mye lettere og mer fleksiblelt for oss å designe nyvinninger på avisene. Jeg gleder meg til å designe nye moduler på det nye rammeverket, nå har vi mye mer spillerom. Tidligere kunne vi ikke designe noe som gikk over de 3 kolonnene på grunn av måten det var bygget opp på, men nå kan vi designe hele horisontale rader. Dette åpner for mye mer fleksibilitet i den videre utviklingen av rammeverket. Vi kan raskt teste ut nye konsepter uten å måtte gjøre en helt ny rammeverksprosess. Målet er at vi nå skal utvikle rammeverket kontinuerlig bit for bit, noe som gjør at vi antagelig ikke vil ha behov for å gjøre en total rammeverksprosess/redesign igjen men altså gjøre endringer mer gradvis. Dette er bedre for leserne våre og vil gi oss mer spillerom for løpende innovasjon og testing. Dette er i tråd med Edda Media sin visjon om å være Norges modigste og mest nyskapende medieselskap. 

Flat menystryktur

Vi slutter å tenke hierarki i menyer. Vi tenker nå mer i bane av kontekstuell meny. Menyen er mer oppløst, det betyr at hovedmenyen ikke lenger må kopieres ned på alle undersider. Nå kan vi lage under sider som har en meny som er relevant for hver brukeroppgave for hver side. Slik unngår vi å ha mange lag med menyer på undersider.

Løsrevet bildegalleri

Vi har laget et nytt bildegalleri som er løsrevet fra en galleri-seksjonsside. Slik kan vi lenke til en fullskjermvisning av galleriene uten å måtte vise frem først 3 menyrekker med menyhierarkie før bildene dukker opp. Nå er bildene i fokus.

Løpende innovasjon

Dette har vert en omfattende prosess, og når vi i dag lanserer er nok ikke alle detaljer på plass, men det kommer løpende!

En så stor omveltning vil også føre til at de faste leserne blir noe forvirret den første tiden og bruker litt tid på å venne seg til alt det nye. Kombinert med noen oppstartproblemer som bugs og lignende så kan en omlegging fort bli en negativ opplevelse for brukerne. Det er en av grunnene til at målet med denne rammeverksprosessen er at vi ikke skal behøve å gjøre slike store omveltninger flere ganger men heretter gjøre små justeringer gradvis, noe som den nye fleksibiliteten er lagt opp til. Se for eksempel Finn.no – det kan virke som de aldri endrer noe som helst. De gjør små endringer hele tiden, de gjør det bare så gradvis at nesten ingen legger merke til det. Slik unngår de å få en storm med sinte brukere på grunn av en designomlegging.

Det er to gode grunner til å utvikle avisene gradvis istedenfor å gjøre store rammeverksprosesser:

  • det er mer smertefritt for våre lesere – de slipper å bli forvirret av at alt plutselig er annerledes. Se for eksempel facebook.no Hver gang de gjør en stor endring får de en storm av sinte brukere som slett ikke liker at noe har blitt endret.
  • det gir oss spillerom for å gjøre små endringer, prøve ut nyvinninger raskt og se om det fungerer istedenfor å bruke et år på å utvikle noe som ikke er utprøvet. Mike Moran sa at å prøve og feile er ikke en tabbe. Det er en strategi for å lære seg hva brukerne vil ha. Han har skrevet boken «Do it wrong quickly». Det handler om å feile fort, og med en gang se om det fungerte eller ikke, og snu fort. Vi bør være glade og ta en liten fest når vi gjør en feil og oppdager den raskt, for da har vi lært noe nytt og har mulighet for å gjøre noe med det.

Når jeg begynte rammeverksprosessen i fjor hadde vi en tydelig overvekt av lesere på 1280 skjerm. Men jeg ser at antall ulike skjermer bare øker og øker og det blir stadig flere mobile lesere. Fremover må vi lage løsninger som fungerer bra på alle de skjermene som våre lesere befinner seg på.

Edda media – Norges modigste og
mest nyskapende medieselskap. 


Emosjonell design

A desire to be observed, considered, esteemed, praised, beloved, and admired by his fellows is one of the earliest as well as the keenest dispositions discovered in the heart of man.
John Adams

I 2004 var weben veldig lite sosial. Det meste på nett var innhold med lenker som brukeren kunne klikke på. Det var lite sosial interaksjon og lite dialog i språket brukt på nettsidene. I dag er situasjonen en helt annen. Sosiale medier er ikke en hype som kommer til å gå over. Sosiale medier er et resultat av hva nettmedier har manglet: Nettmedier hadde behov for å hente prinsipper fra naturlig menneskelig dialog. Alle mennesker har et grunnleggende behov for å kommunisere og bli sett. Det som skiller mennesker fra dyrene er vår evne til å kommunisere gjennom språk og visuell kommunikasjon.

Visuell kommunikasjon

Studier viser at omtrentlig 90% av det vi kommuniserer er gjennom visuell kommunikasjon som fremtreden og gestikulering, bare 7% av det som blir kommunisert består av det verbale, det du sier. Når en bruker kommer til nettstedet ditt kommuniserer du også veldig mye visuelt. Den totale brukeropplevelsen er en sum av brukervennlighet, visuell design og det tekstlige som blir kommunisert på siden.

Dialog

Skriver du i en naturlig dialog kommer du enda nærmere brukeren og interaksjonen vil føles mye mer naturlig og menneskelig. Det kan være så enkelt som å formulere kontaktskjema labels slik «Hva heter du?» istedefor slik: «Navn:». Hadde du gått i skranken til banken din, hadde ikke personen bak skranken bare sagt «Navn», det hadde jo vert utrolig frekt! Hun hadde selvfølgelig brukt litt flere ord og dere hadde hatt en mer hyggelig dialog som hadde gjort det til en mye mer trivelig brukeropplevelse.

Want vs. Need

Mye av det du kjøper i dag trenger du strengt tatt ikke, men du føler at du bare må ha det likevel. Apple og flere kjente merkevarer spiller på nettopp dette. Du trenger ikke en ipad, men hvem har ikke innmari lyst på en likevel? Apple produktene er pene og se på, og de kan gjøre masse kule ting. Når du bærer et Apple produkt fungerer det nærmest som en accessorie som er med på å si noe om hvem du er som person sammen med de andre merkevarene du bærer av klær og sko. Apple og Nike spiller på Emosjonell design. Du vil ha det, men – du trenger det strengt tatt ikke.

På twitter og facebook har vi nå akkurat den samme effekten. Det du skriver på twitter sier noe om hvem du er, og over tid bygger du deg en identitet. Bare prøv å gå og se på en persons twitter feed og kjenn hvordan du gjør deg opp en mening om hvem denne personen er og hva han står for. På facebook klikker du «liker» på grupper som du føler du kan identifisere deg med og som du ønsker å knytte til deg, slik at andre kan forstå bedre hvem du er. De sosiale mediene dekker noen av menneskenes grunnleggende behov for å bli sett, likt, elsket og beundret.

Relatert lesestoff: Designing-for-emotion

Edda Medias lokalaviser på iphone og ipad

Våre videoer på lokalavisene kan nå også spilles av på ipad og iphone.

Gå til itunes og last ned eksempelvis Sandefjords Blad, Fredrikstads Blad, Moss Avis, Gjengangeren eller Drammens Tidende.

Universell utforming – test

Lurer du på hvordan dere ligger an?

Kvikk-sjekk

Web dyp-dykk

Tilgjengelighet for alle

3 Myter om tilgjengelighet og brukervennlighet;

  1. Tilgjengelighet = brukervennlighet eller ”det holder å følge retningslinjer”
  2. Leverandører har så mye peiling at de tar seg av det
  3. En versjon er best for alle uansett

Mild og alvorlig funksjonsudyktighet

Med mild funksjonsnedsettelse menes for eksempel muse-arm og brillebruk, alvorlig funksjonsudyktighet kan være blind eller kognitiv funksjonsudyktighet.

  • Blind
  • Døv
  • Funksjonsnedsatt
  • Senior
  • PDA og mobilbrukere
  • Gamle eller spesialtilpassede nettlesere
  • Brukere uten kompetanse
  • Google er blind

Hjelpemidler;

  • Skjermleser; Jaws
  • Skjermforstørrer
  • Brytere/scanning
  • Hodemus, øyestyring
  • +++

Hva kan vi gjøre for å oppnå brukervennlighet og tilgjengelighet?

  1. Validere
  2. Eksperthjelp – Hvem er ekspertene?
  3. Flere versjoner; Versjoner KAN være et alternativ, dette blir en vurderingssak (se for eksempel www.nav.no/www.nhf.no)
  4. Brukertesting; Opplevd tilgjengelighet, – test hos faktiske brukere. Kvantitative brukertester i leserens vante omgivelser og vante utstyr. Gi de oppgaver som de skal løse. Gjerne kjedelige oppgaver, dette er ikke for underholdningsformål. Få tilbakemelding på hvorvidt de finner frem. Brukertesting er helt klart det mest nyttige verktøyet for å oppnå brukervennlighet.

WCAG 2.0

Det holder ikke å følge retningslinjer. WCAG 2.0 er et kunnskapsbasert verktøy, ikke regelbasert. WCAG 2.0 bygger i større grad på forståelse enn på regler og bygger på 4 prinsipper for tilgjengelighet;

  1. Det skal kunne oppfattes
  2. Det skal fungere
  3. Det skal være forståelig for alle
  4. Det skal være robust (fungere på eksisterende og fremtidig teknologi)

Fokusér på tilgjengelighet og brukervennlighet fremfor slavisk bruk av retningslinjer. Et nettsted som følger samtlige retningslinjer kan fortsatt være totalt ubrukelig. WAI retningslinjer kan virke uoverkommelig, men tilgjengelighet trenger ikke være så vanskelig, -

Noen enkle praktiske tiltak;

  • Bruk H1 og ALT tags. Dette er jo ganske elementært, men jeg tar det med likevel for å understreke hvor viktig dette er for lesere med alvorlige funksjonsnedsettelser. Husk at det nytter ikke å bruke alt tags hvis ikke alt tagen er beskrivende. Det samme gjelder overskrifter. H1, alt, ahref og title tags skal beskrive hva det er som kommer. Dette vil hjelpe lesere som bruker ulike programmer for å få tilgang til å få en bedre oversikt. Her har vi en utfordring mht. brukergenerert innhold.
  • Bruk tabelloverskrifter; meny, innhold, kontaktinfo, ikke left, main, right, eller kryptiske tallkoder…
  • Bruk gjerne skjulte overskrifter (for de som bruker nettleser som jaws)
  • Ordforståelse; Gode navn på linker (/meny) og overskrifter! Disse skal være beskrivende og forståelige. Både ved bruk av td. Jaws og for samtlige lesere samt google er det uhyre viktig at menynavn gir en god beskrivelse av hva som ligger bak hyperkoblingen, dette beskrivende ordet skal være forståelig for alle. Gode linknavn vil også gi gevinst i søkemotorer
  • Temabasert venstremeny har vist seg å gi positive resultater ved brukertesting.
  • Viktigst innhold plasseres først i rekkefølgen i kildekoden
  • Bruk gode, beskrivende title tags, ikke bare bedriftsnavn. Det anbefales å benytte en tekst som beskriver hva en driver med i tillegg til navn på bedriften på startsiden. Eksempel; smp.no – Sunnmørsposten – Nettavis for Ålesund og Omegn. Dette er det første svaksynte og google ser. For undersider kan temanavn for undersiden vises før navnet.
  • Bruk gode, beskrivende/logiske url-er
  • Tekstversjoner av multimedia Td. Film
  • Konsekvent utforming

Seniorer; 55+; Tiltak for å inkludere de eldre;

  • Verdana er lettest å lese
  • Motivasjon er viktig for denne målgruppen – gulrot
  • Konsekvent plassering av knapper
  • Logisk, uniform plassering
  • Felles funksjon = Felles sted
  • Pull – teknologi: Hente ut data til egen senior – versjon
  • Kognitive programmer som finner ut av hvor de har problemer og tilbyr support

Innhold;

Utfordring; Hvordan kan vi sikre at brukergenerert innhold er brukervennlig?

  • Alt tags; Kan vi få leserne til å skrive gode beskrivelser på bilder?
  • Overskrifter; Vil leserne til å skrive gode beskrivende overskrifter?
  • Hva med teknikker for å skrive for nett? Vil de skrive lange og lite oversiktelige tekster eller dele teksten opp i logiske bolker?

Vista Aero;
Fonter som ser bra ut ved zoom; se Td. www.nytimes.com

Google [ Tilgjengelig = Søkemotorvennlig ]

Der er en klar sammenheng mellom brukervennlighet og tilgjengelighet for funksjonsnedsatte og søkemotorvennlighet.

  • Bilde søk; beskriv bilde
  • Bruk sunn fornuft, ikke prøv å lure søkemotorene
  • Få nettsteder til å linke til deg, seriøse nettsteder som er relevante og etablerte

Referanser;

http://www.norge.no/kvalitet/kvalitet2006/kriterier.asp#Tilgjengelig
http://www.medialt.no/
http://www.w3.org/WAI/
http://seniornett.no/Om-oss/Presentasjon-av-Seniornett
http://www.w3.org/WAI/GL/
http://www.bbc.co.uk/guidelines/newmedia/accessibility/
http://alistapart.com/articles/tohellwithwcag2

Universell utforming

I dag hadde vi fagdag om universell utforming i regi av Edda IT utvikling.

Av norges befolkning har ca. 20 % nedsatt funksjonsevne:

Synshemmede
- Svært vanskelig eller umulig å bruke ne!et.

Hørselshemmede
- Innhold med lyd er ikke meningsbærende.

Bevegelseshemmede
- Problematisk å bruke mus, f.eks det å treffe en knapp på 20×20 px.

Nedsatt kognitiv funksjonsevne
- Vansker med å lese og forstå tekst.

Lese- og skrivevansker
- Vansker med å lese og forstå tekst

§ Diskriminerings-­og tilgjengelighetsloven trådte i kraft 1. januar i år

«Lovens formål er å !emme likestilling og likeverd, sikre like muligheter og re!igheter til samfunnsdeltakelse for alle, uavhengig av funksjonsevne, og hindre diskriminering på grunn av nedsatt funksjonsevne. Loven skal bidra til nedbygging av samfunnsskapte funksjonshemmende barrierer og hindre at nye skapes.»

WAI: Web Accessibility Initiative (en arbeidsgruppe i W3C) har laget !ere IKT-retningslinjer:
WCAG 1.0 – kom i 1999 og består av tre nivåer innen tilgjengelighet
WCAG 2.0 - kom i 2008 og består av samme tre nivåer med endrede kriterier
ATAG (Authoring Tool Accessibility Guidelines) – for CMS-utviklere. CMS-et skal muliggjøre, oppmuntre og assistere brukeren til å publisere tilgjengelig nettinnhold

Referanser og ressurser:

http://www.universell.no

http://www.universaldesign.ie/

Mobilversjon og applikasjoner

I går var jeg på frokostseminar i regi av Making waves hvor tema var mobil. Nedenfor presenterer jeg noe av det som kom frem kombinert med egne høyst subjektive teorier rundt temaet.

Mobil, ipad, pc, papir…

Iphone, facebook, twitter, mobil, lesebrett og iphone er vår nye medie-hverdag. Utviklingen skjer raskt:

  • Rask teknologisk utvikling (ipad, lesebrett, iphone…)
  • Nye konkurranseområder
  • nye brukervaner (mobil) og
  • kanalflytt (facebook, twitter, google)

Hvordan møte brukerne på mobil? Utfordringen er å være tilstede på de plattformene de er på.

Trodde du de som bruker de teknologiske nyvinningene er stort sett unge og raske brukere? Da tar du feil. Making waves gjorde en undersøkelse hvor de fant at de fleste som har fancy nok mobiler til å bruke masse internett, applikasjoner osv på mobilen er eldre med høy inntekt som gjerne får dekket både utstyr og mobilregningen via jobben. Men de unge understreker at dersom de hadde hatt råd til iphone, hadde de helt sikkert brukt det mer!


Mobil web

Innledende når mobil ble et tema var løsningen å strippe nettavisen ned til en mye slankere versjon med bare nyheter og tilpasse bredden til en mobil skjerm, bruke minimalt med bilder og presentere en noe kjedelig nettside med nyhetskategorier og de siste nyhetene.

Men nettaviser som vi kjenner de i dag er så mye mer enn bare en liste med siste nytt. Nettsider blir mer og mer applikasjoner. På lokalavisene i edda har vi artikkelkommentarer, markedsplass, lokalguide, prisguide, bildegallerier, video, værmelding, spillerbørs, facebook linker, spørreundersøkelser, buskerudbenken, blogger, brukergenerert innhold og skattesøk for å nevne noe.

En mantra når en snakker om mobil har vert kontekst, kontekst, kontekst. Opera har gjort noen undersøkelser hvor de kategoriserte mobilbruken etter type bruk og sammenlignet dette med type bruk på pc. De fant at folk gjør de samme tingene på den mobile online varianten som de gjorde på pc. Er en mye på facebook på pc, ja da er en mye på facebook på mobilen også.

Grunnen til at mange mobilversjoner ikke er mye brukt tror jeg er fordi sitene blir strippet for mye, det vil si at en fjerner det innholdet som brukerne er ute etter.

At man gjør andre ting på den mobile weben enn på pc er en myte.

  • Bruk samme brand
  • Krysspubliser og optimaliser, ikke lag ulike varianter
  • Følg standarder
  • En mobil web holder til på bedriftens mobile url
  • ikke stripp bort innholdet fra mobilversjonen
  • Den primære kommunikasjonskanalen på mobil er på den mobile urlen, ikke på applikasjonen

Mobile applikasjoner

Den mobile applikasjonen - den som kan lastes ned via android market eller iphone er derimot mer kontekst og person sensitiv. Den kan fungere uten nett og løser en spesifikk oppgave. Der den mobile weben er en forlengelse av produktet, brukes applikasjonen til å forsterke kjerneproduktet.

  • En applikasjon skal løse en spesifikk oppgave og ikke være en portal
  • Tips: bruk web apps til å lage mock-ups til mobil applikasjoner
  • Følg design guidelines
  • Lag applikasjoner som forsterker kjerneproduktet. For eksempel kan en applikasjon til prisguide brukes til å scanne QR kode eller strekkode på et produkt i en fysisk butikk og få opp priser, omtaler og kart til nærmeste butikk med lavere pris på samme produkt, mens den mobile web-versjonen presenterer den vanlige websiden tilpasset mobilformatet og med samme brand
  • Brukere går igjennom faser når de laster ned applikasjoner som kan minne om fasene en har på en nettbutikk: kjennskap-vurdering-valg-bekreftelse-bruk-revurdering

Prisguide – skjema og handlelister

I fjor sommer gjennomførte vi den første brukertesten i samarbeid med Netlife Research. Testpersonene var generelt sett fornøyd med de nye sidene, og klarte å navigere dem godt.

Det er flere ting vi ønsker å oppnå med et nye designet:

  • Kortere vei fra landingsside til kjøp
  • Øke leserbidrag
  • Sømløs integrasjon av tjenester
  • Økt klikkrate

Noe av det som bør forbedres er for mye informasjon på produktsiden både om produktet, priser og butikker. “Jeg vil bare se det jeg er interessert i og ikke alt mulig annet.” Utfordringen ligger i å finne nøyaktig hva det er leserne bryr seg om og fjerne funksjonalitet og innhold som ikke bidrar til å løse brukeroppgaven. En annonse som ikke er relevant vil leserne gjøre sitt ytterste for å unngå å se. Noen dytter til og med hele nettleservinduet til høyre ut av skjermbildet for å slippe å se reklamer i høyre kolonne. Det som er viktig å merke seg her er at dersom reklamen er relevant nok så havner den jo innenfor ”…det jeg er interessert i”

skjema

Slik var skjemaet først

skjema_ny

Etter testen endret vi det slik

Funn i skjemadesign for brukererfaringer
Et av målene med nye prisguide er å øke lesernes bidrag i form av brukererfaringer på produkter og nettbutikker. Lesere som har som mål å finne informasjon, lære og utforske har nytte av å vite hva andre mener om produktene og hvilke erfaringer de har gjort seg med ulike nettbutikker.

Jeg er ikke journalist! kommenterte en testperson da han ble bedt om å finne på en overskrift til produkterfaringen sin. Skjemaer designes fortsatt ofte som tradisjonelle artikler med felter for ”overskrift”, ”ingress” og ”innholdsfelt”. Det er jo kjekt å ha en overskrift eller…? Våre funn viser at:

  • Skjema bør legges opp som en naturlig dialog, som et forløp i en samtale. En testperson kommenterte at han ville listet opp fordeler og ulemper fremfor å skrive en lang og sammenhengende tekst dersom han skulle anbefale et kamera til en venn.
  • Ved å inkludere ulempene blir anbefalingen mer troverdig. En typisk selgende tekst derimot ville bare fremhevet fordelene ved produktet.
  • I en produkterfaring er det mer naturlig for leseren å skrive en ”oppsummering” fremfor en ”overskrift”. Når sist svarte du på et spørsmål med å først finne på en overskrift på det du skal til å si?
  • Et bilde eller brukernavn knyttet opp mot innlegget gjør at leseren kan huske personer over tid og referere til denne i andre sammenhenger.
galleri

"Legg i liste" istedenfor "legg i handlekurv"

Handlelister eller handlekurv?
Brukergruppen som fortsatt er i utforskende søk modus er ikke i direkte modus for kjøp.

Ikke alle klikker på ”kjøp” knappen fordi de har til hensikt å kjøpe produktet. Enkelte bruker handlekurv funksjonaliteten som en liste over potensielt interessante produkter.

Prisguide er ikke en nettbutikk, men leverer produkt og prisinformasjon og sender deg videre til flere ulike norske nettbutikker. Det finnes ikke noen check-out prosess på prisguide. Er det da riktig å bruke metaforer som ”handlekurv” og ”kjøp”? Jeg tror ikke det, så jeg brukte begrepet ”legg i liste”. Testresultatene viste at:

  • Testpersonene hadde problemer med å forstå listefunksjonen og hvilken funksjon den faktisk hadde.
  • Sammenligne er et verdifullt triggerord