Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Universell utforming av digitale løsninger

806 views

Published on

Denne presentasjonen er fra Metronet sitt frokostsemeinar om universell utforming, som ble holdt 22. oktober 2014.

Universell utforming handler om god design og gode brukeropplevelser som alle har glede av. På dette seminaret fikk alle som jobber med web og digitale løsninger kunnskap om hvilken rolle universell utforming spiller for en bedre brukeropplevelse på nett.

Interessert i å lære mer? Kontakt oss på post@metronet.no.

Published in: Internet
  • Be the first to comment

Universell utforming av digitale løsninger

  1. 1. Dagen i dag 08:30 Velkommen til alle Anette Grande Urhamar, Metronet 08:45 Bruk av digitale løsninger for blinde og svaksynte Stein Erik Skotkjerra og Kristoffer Lium, Blindeforbundet 09:15 Verktøy og sjekkliste for webredaktører Lasse Olsen, Metronet 09:45 Pause – kaffepåfyll 10:00 SEO i Google og universell utforming Petter El Fakiri, Metronet 10:25 Universell utforming i en designers verden Shay Ponsonby, Metronet
  2. 2. Digitalt byrå som jobber med strategisk rådgivning, design og utvikling av digitale løsninger. Digitale løsninger Søkemotoroptimalisering Digital annonsering Webanalyse
  3. 3. 35 digitale hoder (+ 2 hunder) @metronetlife
  4. 4. Design for alle
  5. 5. Kort om kravet om universell utforming (uu) ➔ Diskriminerings- og tilgjengelighetsloven stiller krav om at digitale løsninger i Norge skal være universelt utformet slik at de kan brukes av flest mulig. Dette gjelder nettsteder og automater. ➔ Både private og offentlige virksomheter, lag og organisasjoner må følge regelverket. ➔ For nye digitale løsninger gjelder kravet fra 1. juli 2014. For eksisterende løsninger gjelder kravet først fra 1. januar 2021.
  6. 6. Enklere og bedre for alle
  7. 7. Hva oppnår vi? ➔ Færre løsninger å utvikle og holde ved like. ➔ Få eller ingen spesialløsninger for “de funksjonshemmede”. ➔ Løsninger som er enklere og bedre for alle. ➔ Flere måter å bruke løsninger på. ➔ Muligheter for at flere kan bruke løsningen.
  8. 8. Alle sliter av og til
  9. 9. Ulike variasjoner i funksjonsevne kan gi samme begrensninger i løsningen din Lese Trøtthet Forstå Konsentrasjon Allergi Se Hukommelse Snakke Motorikk Skrive Høre
  10. 10. Ulikt utgangspunkt – samme resultat Aksjemeglere på jobb = personer med utviklingshemming Dårlige lysforhold = fargeblind eller svaksynt Mobilsurfing = redusert motorisk funksjon Kilde: Torbjørn Helland Solhaug, Funka.
  11. 11. “Nye” og kjøpesterke brukere
  12. 12. Hvorfor jobbe med universell utforming?
  13. 13. Større potensiell kundemasse
  14. 14. Større grad av selvbetjening
  15. 15. Reduserer kostnader til manuell kundehåndtering
  16. 16. Reduserer kostnader til brukerstøtte
  17. 17. Økt kvalitet på nettstedet
  18. 18. God merkevarebygging
  19. 19. Anette Grande Urhamar Leder for Brukeropplevelser i Metronet anette.urhamar@metronet.no @anetteurhamar /anetteurhamar
  20. 20. For webredaktører
  21. 21. ➔ Gå gjennom noen av kravene i forskriften og forklare hvordan de kan oppfylles. ➔ Få deg til å komme i gang så du kan jobbe videre med universell utforming på din nettside. Agenda
  22. 22. Hvordan bruke uu.difi.no
  23. 23. Hvordan bruke uu.difi.no
  24. 24. Ulike nivåer A AA AAA Omfattet av forskriften Omfattet av forskriften Ikke omfattet av forskriften
  25. 25. Innhold er en stor del av universell utforming = Jobben med uu stopper aldri for webredaktøren
  26. 26. Webredaktøren Innholdspusher gjorhvaduvil@firma.no @alterokformeg /alterokformeg
  27. 27. Websjefen Vokteren ikkeforstyrr@firma.no @termitøren /termitøren
  28. 28. Sjekkliste for universell utforming
  29. 29. Utvikling Kategorier per punkt Krav Du klarer det
  30. 30. Husk «alt-tekst» på bilder. 1.1.1 Ikke-tekstlig innhold uu-krav
  31. 31. 1.1.1 Ikke-tekstlig innhold uu-krav
  32. 32. 1.1.1 Ikke-tekstlig innhold uu-krav
  33. 33. 1.1.1 Ikke-tekstlig innhold uu-krav
  34. 34. 1.4.4 Endring av tekststørrelse Man skal kunne bruke nettsiden selv om den er forstørret. uu-krav
  35. 35. 1.4.4 Endring av tekststørrelse uu-krav
  36. 36. 1.4.4 Endring av tekststørrelse uu-krav
  37. 37. 1.4.4 Endring av tekststørrelse uu-krav
  38. 38. 1.4.4 Endring av tekststørrelse uu-krav
  39. 39. Det du vil brukeren skal se må være markert med mer enn en farge. 1.4.1 Bruk av farge uu-krav
  40. 40. 1.4.1 Bruk av farge 1.4.1 Bruk av farge uu-krav
  41. 41. 1.4.1 Bruk av farge 1.4.1 Bruk av farge uu-krav
  42. 42. 1.4.1 Bruk av farge Oversikt over programmet Oversikt over programmet Oversikt over programmet > 1.4.1 Bruk av farge
  43. 43. 2.4.4 Formål med lenke (i kontekst) Slutt med “Les mer” og "Klikk her". uu-skolen
  44. 44. 2.4.4 Formål med lenke (i kontekst) 2.4.4 Formål med lenke (i kontekst)
  45. 45. 2.4.4 Formål med lenke (i kontekst) 2.4.4 Formål med lenke (i kontekst)
  46. 46. 2.4.2 Sidetitler – 2.4.6 Overskrifter og ledetekster Tittel skal beskrive hva som kommer under/til. A uu-skolen
  47. 47. Bruk h1, h2, h3, h4 og eventuelt h5 på titler. 2.4.10 Deloverskrifter A uu-skolen
  48. 48. 2.4.10 Deloverskrifter Overskrift 1 Overskift 2 Overskift 3 Overskift 4 Overskift 5
  49. 49. Oppsummering
  50. 50. Gjør punktene som er nevnt nå og du er på god vei
  51. 51. ➔ Last ned denne presentasjonen. ➔ Ta deg et glass vin, hør på noe musikk og gjør noe koselig ut av det. ➔ Ta eierskap og kontroll over nettstedet. ➔ Ikke en quick fix, men bedre måte å tenke på. ➔ Lek med Inspect Element. ➔ Se på Difi sine uu-verktøy. Første verktøy: Color Contrast Analyser.
  52. 52. Lasse Olsen Prosjektkoordinator i Metronet lasseolsen@metronet.no @hanlasse /hanlasse
  53. 53. SEO og UU
  54. 54. Minst 50 % av trafikken din kommer fra søkemotorer
  55. 55. Minst 50 % av trafikken din kommer fra søkemotorer Og denne trafikken konverterer 30 % bedre en annen trafikk
  56. 56. Agenda ➔ Hvordan virker Google? ➔ Søkemotoroptimalisering - heistesten ➔ Google + universell utforming = sant? ➔ Google Webmaster Guidelines ➔ Casestudie
  57. 57. Hvordan virker Google?
  58. 58. Googles tre faser
  59. 59. Googles tre faser 1. Crawling
  60. 60. Googles tre faser 1. Crawling 2. Indeksering
  61. 61. Googles tre faser 1. Crawling 2. Indeksering 3. Rangering
  62. 62. SEO på 1-2
  63. 63. Google og universell utforming
  64. 64. Utvalgte kilder til informasjon Difi Google uu.difi.no/veiledning support.google.com/webmasters uu.difi.no/veiledning/nettsider/uu-skolen support.google.com/webmasters/answer/35769 uu.difi.no/veiledning/nettsider/krav-til-nettlosninger support.google.com/webmasters/answer/70897 uu.difi.no/veiledning/nettsider/test-og-testverktoy support.google.com/webmasters/answer/35291?hl=en uu.difi.no/veiledning/nettsider/kvalitet-pa-nett-og-wcag-20 static.googleusercontent.com/media/www.google. com/no//webmasters/docs/search-engine-optimization-starter-guide. pdf
  65. 65. Google Webmaster Guidelines
  66. 66. Google Webmaster Guidelines: design og innhold ➔ Design nettsiden med et tydelig hierarki. ➔ Alle undersider må kunne besøkes fra statiske tekstlenker, men ha et fornuftig antall lenker på én side. ➔ Bruk sitemap. ➔ Lag nyttige, informasjonsrike nettsider og skriv tekster som tydelig beskriver det du ønsker å formidle. ➔ Bruk ord og uttrykk dine brukere ville ha brukt - det sikrer relevans i søk fra et brukerperspektiv. ➔ Unngå tekst som bilder. ➔ Bruk alt-attributter og andre meta-tagger som <title> <h1> . ➔ Unngå døde lenker.
  67. 67. Google Webmaster Guidelines: teknisk løsning ➔ Besøk nettsiden gjennom en tekstbasert nettleser - virker innholdet fornuftig? ➔ La søkemotorene «crawle» nettstedet og sørg for at interne lenker kan brukes av crawlere. Alt innhold må lenkes til. ➔ Sørg for at nettstedet virker i alle nettlesere. ➔ Overvåk og optimaliser nettstedet i henhold til lastetid. ➔ Google anbefaler sterkt å overvåke nettstedets «performance» gjennom verktøy som Google Page Speed, YSlow, WebPagetest etc.
  68. 68. Google Webmaster Guidelines: kvalitet Unngå ➔ Automatisert/duplisert innhold. ➔ Linkebygging for linkebyggingens skyld. ➔ Cloaking (bl.a. skjult tekst eller skjulte lenker). ➔ Misbruk av riktekst. Lag sider for mennesker, ikke søkemotorer ➔ Ville du ha vært komfortabel med å forklare en konkurrent eller Google hva du har gjort? ➔ Hjelper det du nå gjør brukerne dine? ➔ Ville du gjort dette om søkemotorene ikke fantes?
  69. 69. Design og innhold ➔ Snakk brukerens språk og ha godt innhold tilgjengelig i tekstformat. La linkene være nyttige og ikke døde. Teknisk løsning ➔ Sørg for «crawlbarhet» og tenk at alt innhold bør være tilgjengelig i en tekstbasert nettleser. Kvalitet ➔ Lag unikt innhold for mennesker. Innhold ➔ Brukeren skal kunne dra nytte av informasjon og funksjonalitet uavhengig av funksjonsevne. Teknisk uu ➔ Brukeren må kunne benytte nettstedet. Pedagogisk uu ➔ Brukeren må kunne forstå hvordan nettstedet og funksjonene benyttes.
  70. 70. Boliglån
  71. 71. Bank Rangering i Google URL DNB 3 www.dnb.no/privat/laan/boliglaan.html Skandiabanken 5 www.skandiabanken.no/Lan/Boliglan/ Nordea 8 www.nordea.no/privat/l%C3%A5n/boligl%C3%A5n/400914.html Sparebank 1 13 www.sparebank1.no/sr-bank/lan/boliglan/boliglan-for-unge/ Handelsbanken 31 www.handelsbanken.no/shb/inet/icentno. nsf/Default/q4f1b0ae9379fe7dfc1256cd900338cf2
  72. 72. <h1> </h1> <img src="/portalfront/bilder-dnb/bygg-lokaler- hus/680x150-boliglan-par.jpg" alt="illustrasjon boligln"> <h3> </h3> <h3> </h3> <h3> </h3>
  73. 73. Bank Rangering i Google URL DNB 3 www.dnb.no/privat/laan/boliglaan.html Skandiabanken 5 www.skandiabanken.no/Lan/Boliglan/ Nordea 8 www.nordea.no/privat/l%C3%A5n/boligl%C3%A5n/400914.html Sparebank 1 13 www.sparebank1.no/sr-bank/lan/boliglan/boliglan-for-unge/ Handelsbanken 31 www.handelsbanken.no/shb/inet/icentno. nsf/Default/q4f1b0ae9379fe7dfc1256cd900338cf2
  74. 74. <img src="/shb/inet/icentno. nsf/vlookuppics/0_central_images-leisure_ 0048_5895_380x131/$file/0048_5895_ph_s_pl_380 x131.jpg">
  75. 75. “Konklusjon” Minst 50 % av trafikken din kommer fra søkemotorer Og denne trafikken konverterer 30 % bedre en annen trafikk
  76. 76. Petter El Fakiri Leder for Digitale løsninger i Metronet petter@metronet.no /petterelfakiri
  77. 77. Design for alle
  78. 78. If the user is having a problem, it's our problem.
  79. 79. Topics ➔ Navigation ➔ Readability ➔ Colour and contrast ➔ Comprehension/Understanding ➔ Images and graphics
  80. 80. Navigation: Don't make me think ➔ Is it consistent throughout my site? ➔ Are there at least two ways to reach my content? ➔ Is the design set up for keyboard navigation?
  81. 81. Navigation: consistent
  82. 82. Navigation: 2 ways to acces content
  83. 83. Navigation: using the ‘tab’ key
  84. 84. Navigation: skipping over content
  85. 85. Navigation: focus states http://www.eplehuset.no
  86. 86. Navigation: keyboard tabbing http://www.regjeringen.no
  87. 87. Readability ➔ Hirearchy (<H tags>) ➔ Typography ➔ Size, characters per line and line height ➔ Colour and contrast
  88. 88. <H1> <H2> Readability: font hierarchy <H3>
  89. 89. Readability: serif and sans serif ➔ Sans serifs work better on screen Arial, Helvetica, Lucida Grande, Humanist ➔ Sans serifs scales best, more distinguisable ➔ Serif most popular typeface for body text Georgia, Times New Roman, Baskerville med uten
  90. 90. Readability: size, characters and line-height ➔ Paragraph text should be at least 16pt ➔ No more than 60-70 characters per line ➔ Good line-height increase speead and comprehension (1.5em) https://www.charactercountonline.com/
  91. 91. Readability: read the small print
  92. 92. Colour and contrast: grey on grey
  93. 93. Colour and contrast: testing contrast
  94. 94. http://www.paciellogroup.com/resources/contrastanalyser/
  95. 95. Colour and contrast: make it stand out
  96. 96. Colour and contrast: Colour Contrast Analyser http://www.paciellogroup.com/resources/contrastanalyser/
  97. 97. Colour and contrast: colourblindness Source: uu.difi.no
  98. 98. Colour and contrast: colourblindness Source: uu.difi.no
  99. 99. Comprehension: ➔ Forms(skjema) and errors ➔ Using sliders/carousel ➔ Confusing search behaviours
  100. 100. Comprehension: identify errors
  101. 101. Comprehension: stop/start control
  102. 102. Comprehension: stop/start control
  103. 103. Comprehension: searching for search
  104. 104. Comprehension: search?
  105. 105. Images and graphics ➔ Avoid using text on images ➔ Graphical elements ➔ Illustrations and visual aids
  106. 106. Images and graphics: text on images
  107. 107. Images and graphics: text on images
  108. 108. Images and graphics: graphic elements
  109. 109. Images and graphics: graphic elements
  110. 110. Images and graphics: visual aids http://www.knyteslips.no/dobbel-windsor-slipsknute/
  111. 111. Things to remember
  112. 112. ➔ Consistent placement and behavior of navigation ➔ Several ways to reach content: menu + 1 more (search/sitemap/lists) ➔ Always check you have good contrast (Colour contrast analyser) ➔ Provide controls (stop/start) if using a slider ➔ Graphic elements serve a purpose
  113. 113. Shay Ponsonby UX og web designer i Metronet shay@metronet.no /shayponsonby

×