» Uncategorized » Stegvis tips i webutvikling

Stegvis tips i webutvikling

Når du skal utvikle og designe en webside er det mange ting man bør tenke på men man utgår ofte utfra to ting;

Brukervennlighet og Tilgjengelighet. Men hva er det?

 

Brukervennlighet

Kort forklart handler mye om brukerens tilfredshet. Oppfyller websiden brukerens behov?

 

Tilgjengelighet

Får brukeren tilgang til all informasjon på en god og enkel måte.

 

De her to termene er mye brukt i Universell utforming, men hva betyr de i prakis?

 

Når det gjelder brukervennlighet finnes det mange teorier, prinsipper og rekommendasjoner på nett. Eksempel er  Jakob Nielsens heuristiske design prinsipper eller Don Norman’s design prinsipper.

 

STEG 1 – Bestem innhold og lag en skissering

 

Hva er brukerens mål med nettsiden?

Hva ska den innholde? Hva er det som skal formidles? Hva ska første side presentere? Meny, hvor mange kategorier og underkategorier?

Farger – Hvilke farger skal brukes på nettsiden?
Sen lager du en skissering eller en lo-fi prototype. 

 

STEG 2 – Lag et første utkast og gjør en heuristisk evaluering

 

Når du har lagd et første utkast på nettstedet ditt, da kan du begynne evaluere og eventuelt brukerteste. I denne steg i prosessen kan du godt gjøre dette selv som utviklere eller designere. Tips er å gjøre en heuristisk evaluering og svare på de her spørsmålene;

 

  • Er websiden enkel og intuitiv?

– Unvik unødvendig mye informasjon eller visuelle elementer.

 

  • Er informasjonen forståelig?

– Bruk ord eller fraser som er kjent for brukerene. Hvis ikke -> gi god forklaring

 

  • Er nettstedet konstistent?

– Ikke bruk forskjellige type ord men som leder brukeren til samme sted.

– Sjekk så at navigeringen fungerer likt. Det vil for eksempel si at ikke noen elementer er utformet som en knapp men at den ikke går å trykke på eller at en link er markert men den fører deg ikke noe sted, men at en annen link gjør det

 

  • Se til at du hjelper brukeren på veien

– Både når det gjelder feil som kan oppstå på websiden (hvis brukeren må fylle i et obligatorisk felt etc)

– Gi beskjed til brukeren hvor den befinner seg på siden (ved hjelp av en sti (breadcumb)

 

  • Responsive design

– At nettstedet ditt ser bra ut uansett skjermstørrelse. Dette forventes idag!

En side som ikke ser bra ut på smarttelefon for eksempel kan være forødende for siden din.

 

Allt det nevnte over dreier seg mye om brukervennlighet (user experience) mens når det gjelder tilgjengelighet, da må vi se på andre funksjoner i tillegg.

Tilgjengelighet er viktig for at alle mennesker skal få lik tilgang til websiden, selv de med funksjonshemminger eller nedsettelser.

 

Når det gjelder tilgjengelighet må man tenke på mennesker som kanskje ikke har samme evner eller ferdigheter som folk flest. Det kan være alt fra manglende syn, hørsel eller motorikk. Derfor er det viktig å sjekke at nettstedet faktisk oppfyller de kriterier som kreves for at de skal ha samme tilgang og samme gode opplevelse som alle andre.

For å forsikre seg om dette kan man ta hjelp av WCAG 2.0 (Web Content Accessibility Guidelines) som blant annet er utviklet av WC3 som dere sikkert har kjennskap til eller hørt om.

 

 

STEG 3 – Sjekk tilgjengeligheten

 

Noen nevnte kriterier fra tidligere nevnte er det samme som må oppfylles i WCAG 2.0 men det er noen flere som også er ekstremt viktige for tilgjengeligheten.

 

  • Tastatur funksjonalitet

– Det vil si at brukeren enkelt kan navigere seg runt på siden kun ved hjelp av tastaturet.

– Noen tag elementer i HTML 5 har dette automatisk innebyg som for eksempel <nav>, <form> eller <button> men for noen må dette settes manuellt ved hjelp av en tabindex. Enkleste er å bruke de elementene som har dette innebygd i browseren dersom det er mulig.

Viktige å huske på er at man tydelig lager en markering på hvor brukeren befinner seg ved hjelp av å sette en focus i css og med en tydelig farge.

 

  • Kontrast

– i WCAG 2.0 finner dere et minimumkontrast som dere kan måle ved hjelp av en så kalt kontrast kontroll. (finnes gratis på internet, som for eksempel Contrast Checker)

 

  • Zoom

– I tillegg til en responsive design skal det også kunne gå å zoome in nettstedet ditt til 200% uten at informasjon forsvinner.

– Her er det viktig at man ikke setter en fast størrelse på teksten, det vil si med px. Sett heller en prosentuell størrelse.

 

  • Struktur

– Bruk headings (h1,h2,h3) til overskrifter og <p> til paragrapher. Viktig her er at de er i en logisk rekkefølge.

 

  • Førse brukeren med alternativ tekst

– Dette gjelder alle bilder eller illustrasjoner du bruker på websiden. En alternativ text setter du gjennom tag alt =”forklaring” i din <img> tag.

 

  • Kompatibel

– Gjør en sjekk at websiden ser bra ut på alle browsere, dette er nemlig ikke gitt at det gjør.

– Er den kompatibel med Java, Javascript dersom du bruker det?

– Vil den fungere med en skjermlesere?

 

STEG 4 -Brukertest

 

Beste måten å finne ut om siden din er brukervennlig og tilgjengelig er til syvende og sist ved hjelp av brukertesting. Brukertest betyr at du gjør en test av siden din på aktuelle brukere. Husk at vi alle er ulike og har ulike preferenser, så selv om du syns at websiden oppfyller alle kravene på brukervennlighet og tilgjengelighet, så betyr det ikke at alle andre syns det også.
For å sjekke tilgjengeligheten bør du gjøre et brukertest som involverer de menneskene som for eksempel har funksjonshemminger eller funksjonsnedsettelser. (motoriske, sensoriske eller kognitive)

Et brukertest kan settes opp ved hjelp av ulike målinger.

Det kan først være ved hjelp av et spørreskjema, eller en undersøkelse. Eller det kan være direkte på en test med brukerinnvolvering. Det er det sistnevnte som er det aller viktigste.

Her lager du noen oppgaver som den skal fullføre på siden din og du kan måle den, enten ved å ta tiden på hvor lang tid det tar for brukeren å fullføre oppgaven, eller hvor mye feil den eventuelt gjør på veien til å fullføre oppgaven.

Du kan også ved hjelp av en Eye-tracker få resultat i hvor brukeren fokuserer mest på siden. Rør seg blikket mye frem og tilbake, er det ofte fiksert kun på et spesifikk sted eller ser man en konsistens i hvordan brukeren navigerer seg på siden.

 

STEG 5 – Gjør om – gjør rett

Sett sammen resultatene og se på hva som eventuelt kan forbedres på websiden din.

Gjør om denne prosess dersom det er mye som på en måte “feiler” med brukervenneligheten og tilgjengeligheten

 

 

STEG 6 – Oppfyller siden alle kriterier

Før du lanserer siden, sjekk om den oppfyller nivå A-AA i WCAG 2.0. (med noen unntak, sjekk Difi.no for mer info)

Fra og med 2014 sier loven at alle nye websider riktet mot det offentlige skal være universellt utformet og da bør websiden oppfylle nivå A-AA. (2021 for eksisterende løsninger)

 

Andre tips

 

Et bra eksempel på en webside som er universelt utformet er Funka sin hjemmeside.

 

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *