Brukervennlighet for alle andre. Gunnar Bråthen www.e-guiden.no



Like dokumenter
DIAGNOSERAPPORT. for. Dato: Utført av: Tommy Svendsen

Gode råd og tips for bedre lesbarhet klarer dine kunder å lese det du skriver?

Søkemotorer. - en guide for en bedre rangering. Søkemotorer en guide for bedre rangering. InBusiness AS

DIAGNOSERAPPORT. B&W Caravan DA Utført av: Jan Erik Iversen

DIAGNOSERAPPORT. for. Dato: Utført av: Jon P Hellesvik

DIAGNOSERAPPORT. Pris kr 1 890,- eks MVA. for. Dato: Utført av: Jon P Hellesvik

DIAGNOSERAPPORT. for. Dato: Utført av: Tommy Svendsen

DIAGNOSERAPPORT. Utført av: Jon Petter Hellesvik

DIAGNOSERAPPORT. Arne Fallrø AS. Utført av: Jan Erik Iversen

SEO. Erlend Nilsen Senior rådgiver Seo og Content Marketing

Søkemotoroptimalisering

Profilhåndbok. for Troms fylkeskommune

Riksarkivet. Designretningslinjer for elektroniske medier. Designdokumentasjon for Riksarkivet. Versjon 01

Analyse av Web- medier, Lenker. Oppgaven jeg her skal presentere har tatt utgangspunkter et gruppearbeid vi fikk utlevert. Dette lyder som følgende :

Oblig 3 Webutvikling. Oppgave 1

Noe av innholdet. Bli funnet på nett uten juks! Gunnar Bråthen Søkemotorkrigen. Søkemotorkrigen

Odd Fellow Webadministrasjon

Kom i gang. Nå er det enklere en noensinne å redigere hjemmesiden din med Plone CMS. 17. mars 2010

NORSKE MUSEER. Google Plus Local / Google Local. Agnete Tøien Pedersen Head of SEO. Copyright 2011, iprospect, Inc. All rights reserved.

Vedlikeholde nettstedet i Joomla 2.5 +

Få din egen hjemmeside

Bounce 30-70% Kikkere % Tvilere 10-20% Sene tvilere 5-10% Konverterte 1-5%

King Kong Erfaren Scratch PDF

Mal for fagrom. Hvorfor benytte en ferdig mal for rommet? Eksempel på en startside i et tradisjonelt rom. Eksempel på en startside i et malrom

Brukermanual.

Brukerveiledning Bruk av siden. Når du går inn på siden får du opp følgende bilde:

1 SYMBOL 2 LOGO 3 LOGO FARGEVARIANTER 4 FARGEPALETT 5 TYPOGRAFI 6 EKSEMPLER PÅ BRUK 7 WEB

Salg og markedsføring på internett. Børre Berglund

ActiveBuilder Brukermanual

Innledning. Persona. For å ta for oss noen målgrupper kan vi tenke oss:

Noen viktige poenger for deg som er typograf eller designer hos produsenter av Tekna kursbrosjyrer:

HR analysen. Ny versjon Brukermal. Administratorer

KOMME I GANG 3. Logge på 3. I redigeringsvinduet 4 OVERSIKT OVER KNAPPENE SOM LIGGER ØVERST I REDIGERINGSVINDUET 6

Web Accessibility Toolbar. Struktur. Funksjonene. Headinger. Mer om tilgjengelighet og Flash.

Brukermanual. Itpays W3 Publish. Sette opp, logge inn og komme i gang. Redigert den 23. mai

Memoz brukerveiledning

Pålogging. Hovedsiden på Bilde 1

Brukerveiledning i Siteman CMS for Godt Vann Drammensregionen

BORRENYTT. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp.

Hvordan forene alle nettsidene til FSFE? Vanlige virkemidler i en grafisk profil

Brukermanual for NROFs lokalavdelinger - hvordan redigere egne hjemmesider

Fagerjord sier følgende:

SØK som en del av mediemixen

Få din egen hjemmeside

KOMME I GANG 2. Logge på 2. I redigeringsvinduet 3 OVERSIKT OVER KNAPPENE SOM LIGGER ØVERST I REDIGERINGSVINDUET 5

Presentasjonsdokument

Vi selger iphonedeksler med motiv til deg som ønsker å beskytte din mobil med stil.

ebudbok Elektronisk budbok på PDA Registrering av gangrekkefølge på web

PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO

Norsk konsulentselskap Alt innen brukeropplevelse på nett

PROFILHÅNDBOK. Veiledning og inspirasjon til Byggeriets profil

Brukerguide for

Innhold. Takk! Forord Hvem bør lese boken? Er dette en ny versjon av God nettskriving? Hva denne boken ikke handler om

Side 1. Sniggabo CMS brukermanual rev. 2

Bruk av NetBeans i JSP-delen av Web-applikasjoner med JSP og JSF

Så hva er affiliate markedsføring?

Begrepet SEO er død i den forstand at det har blitt en del av innholdsmarkedsføringen i større grad enn før, påstår Jackson.

Grafisk profilhåndbok Retningslinjer for grafisk profil

Grafisk håndbok. Rødt 2019 v 0.9

Noe av innholdet. Bli funnet på nett uten juks! Gunnar Bråthen Søkemotorkrigen. Søkemotorkrigen

Logo Typografi Farger Element/Layout Papir Fotostil PROFIL MANUAL

Den beste måten hvis du skal endre allerede eksisterende artikler

BRUKERVEILEDNING DIPS ELEKTRONISK DOKUMENTASJON AV SYKEPLEIE HSØ KURS JOBB SMART MED EDS

ThinkPage CMS 2.0. Hurtigveiledning. Av ThinkPage AS

Publiseringsveiledning for

Veiledning i administrering av egne loge-/leirsider i portalen

Norske Redningshunder Profilhåndbok

Retningslinjer. Retningslinjer for kommunikasjon gjelder for alle oss som arbeider med å synligjøre/profilere Stiftelsen KGJ.

Oblig 4 Webutvikling. Oppgave

PBL Barnehageweb. Brukerveiledning

Logo Logo plassering. Logo. Fargeprofil Fargesammensetning. Farge. Typografi Font hierarki. Skrifttype

CorePublish 6. Enklere kan det ikke bli!

Brukerveiledning nettsted Stjørdal kajakklubb. Tilgang til siden. Opprette bruker? Tilgang til siden... 1 Opprette bruker?... 1

Nettstedanalyse av pitchfork.com


Hvordan redigere fotoblogg sider i Joomla 3.x

Nettsideplanleggings Guide

D E S I G N M A N U A L 1

Slik legger du inn nyheter med Ingress og Hovedtekst

CSS-formatering: stilark med kommentarer

ff Brukermanual ebladadmin Pro

Brukermanual. PUS i Web. Mai 2009 (Versjon 1)

Designguide for ID-porten. Versjon 2.0

Brukerveiledning. Kom i gang. publiseringsverktøy. versjon 7 - revidert Gevir IT Drift AS Webside:

få en ny og og god hjemmeside på få minutter Quick guide

Webutvikling Oblig 3. Oppgave 1

WordPress startguide

Prosjektsider - Fylkesmannen

Veiviser til vilbli.no for rådgivere

Guide til publisering på Internett. Ver. 2.0

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems.

Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk

SJEKKLISTE: 10 ting du må ha på plass for SEO i 2019

GRATIS FOR ABONNENTER:

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

Steg 1: Hente grafikk fra nettet

Responsiv design Skalering av siden trenger å gjøres noe med, slik at den er tilpasset de fleste skjermstørrelser.

Hvordan redigere bilder i pixlr.com

OPPLÆRINGSREGION NORD. Skriftlig eksamen. NOR1206 Norsk Vg2 yrkesfag HØSTEN Privatister. Yrkesfaglige utdanningsprogram. 9.

Offentlige Internett-sider skal være brukervennlige. Offentlige Internett-sider skal være brukervennlige

Transkript:

Brukervennlighet for alle andre Gunnar Bråthen www.e-guiden.no

Kvalitet på nett og offentlige nettsteder Kravene er: Offentlige nettsteder skal være tilgjengelig for alle. Offentlig nettsteder skal presentere informasjon og tjenester på en måte som gjør det enkelt å orientere seg på nettstedet, ----- samt gjør det lett å finne og å anvende nettstedets informasjonsressurser.

eguiden kaster stein i glasshus Utfordringen var å tydeliggjøre faglig ulike temaer uten å miste eguidens identitet Løsningen ble funnet gjennom en fargepalett med farger som passer sammen med eguidens logo som er rød og hvit på blå bakgrunn.

eguiden kaster stein i glasshus

eguiden kaster stein i glasshus Sjalg Hostad foreslår følgende endringer Siden hovedfargen går i blått ville jeg valgt paletter med nødvendig antall sjatteringer i lyse blå pastellfarger. Disse er rolige for øynene og derfor naturlig som bakgrunn. Menyen blir mer lesbar dersom teksten i linkene endres til en gul farge som endrer seg til hvitt når linken er i bruk og til en lys grå farge når linken har vært i bruk. Hvitt og grått matcher alle farger og gult passer godt sammen med blått. Du kan også beholde den blå skriften, men det forutsetter at du bruker relativt lyse blå farger som bakgrunn. En slik endring vil gjøre menyene godt lesbare og sidene lysere og mer innbydende. Hele artikkelen finner du her: http://www.elektroniskhandel.no/cparticle250104-15245.html

Problem: Rød/Grønn fargeblindhet (8% av alle menn og ½% av alle kvinner) http://www.vischeck.com/

sept 1 - forside Logo maskert ut Logo maskert ut Det første designforslaget er basert på vedtatt fargepalett og spesielt den rød/oransje hovedfargen. Dessverre er denne fargen problematisk for rød/grønn fargeblindhet. Forslaget benytter også mye hvit skrift på rød bakgrunn, rød skrift på hvit bakgrunn og hvit/grå skrift på grå bakgrunn. Disse kombinasjonene har store kontrastmessige svakheter. Spesielt gjelder dette brukere med nedsatt syn og fargeforstyrrelse.

Rød/Grønn fargeblindhet (8% av alle menn og ½% av alle kvinner) http://www.vischeck.com/ Rødt transformeres til Grønt Rødt og grønt skal derfor ikke benyttes i kombinasjon Denne tekstfargen på hvit bakgrunn gir samtidig dårlig kontrast. Logo maskert ut Logo maskert ut

Justert designforslag Beholder paletten men forbedrer kontrasten ved å trekke inn palettens brune farge Logo maskert ut Logo maskert ut

ODIN med mellomstor tekststørrelse For liten hvit tekst på mellomlys rød bakgrunn blir dessverre ikke bedre på mellomgrønn bakgrunn for hver 8. man

ODIN med største tekststørrelse Brukere som velger største tekststørrelse (fordi de har et synsproblem) vil sannsynligvis ikke legge merke til at det er en global meny her. Dårlig kontrast og ikke større enn 12pt. 12pt er anbefalt for normal tekststørrelse.

Tekstbasert versjon av nettsider Nettlesere for blinde finner tekstversjonen Uten at dette behøver å være et menypunkt http://www.seoforum.no/index.php?textonly=1 Informasjonen skal helst ligge øverst i kildekoden:

Skatteetaten tekstversjon testet gjennom http://dev.wave.webaim.org ett på sak navigering for de. le bilder (menyelementer) har d beskrivelse

Skatteetaten i smal nettleser (PDA) Simulert med Opera nettleser og View -> Small screen Her kommer menyen øverst. Det vil den ikke nødvendigvis gjøre om du velger utradisjonell menystruktur I nytt design. TA STILLING TIL HVOR MENYEN SKAL PRESENTERES I EN PDA Øverst Nederst

SEOforum.no i smal nettleser Simulert med Opera nettleser og View -> Small screen Her kommer sidemenyen NEDERST. Bare den globale toppmenyen kommer øverst. Grunnen er at siden er Superoptimalisert for søkemotorer og sidemenyen ligger nederst i HTML-koden. Øverst Nederst Kun GLOBAL meny er her presentert øverst Sidemenyen kommer nederst og krever derfor mye SKROLLING

Bare hver 3. husstand har bredbånd Nedlastingstid simulert på: http://www.websiteoptimization.com/services/ I simuleringen får du også vite hva som forsinker nedlastingen Designere forutsetter at leserne også har bredbånd. usk at de med ISDN normalt bare benytter den ene kanalen til internett

Navigasjon fra globale toppmenyer

Relevant plassering i global toppmeny?

KVASIR hotell i loen Betalte oppføringer. Du kan kjøpe deg topplass. Ikke nødvendigvis samsvar mellom søkefrase og søkeresultat. Eksempelvis Gloppeneventyret. Hjelpe og trøste. Hopp over og velg språk. Men hva er alexandra?

Det blir vanligere å søke på fraser Oppføring med kopi av tekst fra Alexandra sin hovedside Hvorfor sende kundene til kataloger som viser alle konkurrentene? Alexandra skulle selv ligget på førsteplass med lenke til alexandra.no

Men da må man tenke på språket Ingen treff på fjordarmer betyr kanskje at Alexandra bare vil ha engelsk- eller nynorsktalende gjester? Skal du være synlig i søkemotorene må du tenke igjennom hva dine potensielle kunder vil søke etter. Disse ordene og frasene må være tilstede i teksten på nettsidene. Dette er en god start men ikke nok.

NB: Alexandra.no har nå fjernet flash intro Alexandra.no Flash intro hindrer indeksering av de øvrige sidene. En søkemotor følger skip intro lenken og Hovedsiden blir liggende på nivå 2. Sider som ligger dypere i strukturen oppfattes som mindre relevante. Flaggene er bilder og lenkene bak bildene indekseres ikke. Flash, Bilder og Javakode er UEGNET som menyelementer Hovedsiden bryter de fleste regler, og flashvideo og java nedtrekksmenyer ødelegger for indeksering. Teksten med søkefrasen ligger i bunnen av 730 linjer med kode og oppleves derfor som lite relevant for en søkemotor.

Lag en relevant og brukervennlig søkemotorvisning

Lag en relevant og brukervennlig søkemotorvisning

Lag en relevant og brukervennlig søkemotorvisning <Title> har tre formål: Å sørge for høy rangering på riktige søkeord og -fraser Å sørge for at surferen velger å klikke på nettopp dette søkeresultatet. Tittelen, (overskriften), i søkeresultatet er det første og sannsynligvis det eneste den som søker ser på. Å bidra til merkevarebygging Ingressen i søketreffet hentes i dette tilfellet fra <description>.

Mange av leserne dine har en eller annen form for synsforstyrrelse som gjør at de ikke ser det samme som deg Her er en god sjekkliste: Benytt fonter uten seriffer (eks Verdana) og la 12pt være standard fontstørrelse Sørg for sterk kontrast mellom bakgrunnsfarge og tekstfarge på den samme bakgrunn Unngå mønstre i bakgrunnen for all tekst La ikke fargen ha stor betydning for budskapet eller det du ønsker den besøkende skal gjøre. Å indikere et felt som må fylles ut bare ved å bruke farger er ikke nødvendigvis en god ide Vær forsiktig med fargekoder for å indikere temaer, sidetyper, ønsket reaksjon etc. Bruk maksimalt 5 ulike farger og vær konsistent gjennom hele nettstedet. Den beste kombinasjonen for lesbarhet er sort tekst på hvit bakgrunn. Om dine besøkende oppholder seg på nettstedet i lengre tid, eller om du henvender deg til eldre lesere, så benytt klare farger. Det er lettere å skille farger fra hverandre om du bruker mørke varianter av blå, rød og rosa og/elle lyse varianter av grønn, gul og oransje Om ulike farger ved siden av hverandre (eller bak hverandre) er viktig så unngå rødt ved siden av grønt eller blått ved siden av gult Ikke bruk grått til tekst, eller gråskalaer for diagrammer med viktig informasjon Unngå blått for liten tekst og for tynne linjer

Tre filmer som demonstrerer hvordan skjermlesere for blinde og svaksynte fungerer. Meget lærerikt. http://www.doit.wisc.edu/accessibility/video/intro.asp http://www.doit.wisc.edu/accessibility/video/screen_magnification.asp http://www.doit.wisc.edu/accessibility/video/screen_readers.asp Web Accessibility verktøy http://www.webaim.org/products/ http://www.nils.org.au/ais/web/resources/toolbar/ http://usableweb.com/