Tagget med ‘tilgjengelighet’

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. 


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