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 FTW! Redesign av blindeforbundet.no

2,991 views

Published on

Du får unik innsikt fra et web-prosjekt hvor den primære målgruppen er blinde og svaksynte. Foredraget vil ta for seg hvordan arbeidet med universell utforming bidro til innovasjon i nye metoder og løsninger.

Foredraget ble holdt på Yggdrasil konferansen i Sandefjord 14. april 2015. Av Joakim Bording og Nikolai Krister Strandskogen fra Netlife Research

Published in: Design
  • Be the first to comment

Universell utforming FTW! Redesign av blindeforbundet.no

  1. 1. Universell utforming FTW! Redesign av blindeforbundet.no Joakim Bording Nikolai Krister Strandskogen Yggdrasil 14. april 2015
  2. 2. Foto: greatbuildings.com
  3. 3. Universell utforming Bruker- vennlighet ❤
  4. 4. Universell utforming og brukervennlighet er to sider av samme sak #1
  5. 5. Mange elefanter i rommet når det gjelder universell utforming
  6. 6. – Tilgjengelighet er fint, men hvor mange blinde er det egentlig?
  7. 7. Synshemmede Fargeblinde Blinde +++
  8. 8. – Vel og bra, men hvem er egentlig dere?
  9. 9. Joakim Nikolai
  10. 10. Hvordan få universell utforming inn i et prosjektløp? Lær mer på UU- skolen etter lunsj
  11. 11. Målgrupper 1. Synshemmede og pårørende 2. Medlemmer 3. Den interesserte almuen 4. Givere
  12. 12. Prioriterte mål 1. Flere medlemmer 2. Aktivt og selvstendig liv for den enkelte 3. Øke kunnskapen 4. Øke inntektene, redusere utgiftene
  13. 13. Tverrfaglig team Design og frontend Prosjektledelse Design Interaksjon og innhold Grafisk design
  14. 14. Alle har ansvar for universell utforming #2
  15. 15. Start med innholdet og ikke stopp
  16. 16. Blindeforbundets
 mål Brukernes
 behov
  17. 17. Prosjektstart Brukerintervju Spørreundersøkelse Mål og målgrupper Overordnet konsept Bakgrunnsdokumenter
  18. 18. De viktigste oppgavene Forskning på øyehelse og syn Hjelpemidler for blinde og svaksynte. Hva finnes, hvor selges det? Symptomer på synshemninger og øyesykdommer Å leve med synshemming (råd og tips) Øyesykdommer og synshemninger: råd og fakta om min diagnose Uleselig (kampanje for større skrift) Rettigheter: Hvilke rettigheter har jeg som blind eller svaksynt? Behandling av øyesykdommer gging, risikofaktorer og arvelighet ved synshemninger og øyesykdommer m kan brukes av blinde og svaksynte (apper, klokker, mobiltelefoner o.l.) 0 % 10 % 20 % Topp 25% 797 respondenter
  19. 19. Kjernesideworkshop
  20. 20. Hør mer om Kjernemodellen i morgen
  21. 21. Opplæring av webredaksjonen
  22. 22. Introduksjon til HTML
  23. 23. Gi redaksjonen kunnskap til å lage tilgjengelig innhold #3
  24. 24. Grafisk (universell) design
  25. 25. – Tilgjengeligheten begrenser kreativiteten min
  26. 26. – Har du sjekket kontrasten på de fargene?
  27. 27. Ikke utsett universell utforming til slutt #4
  28. 28. Thord
  29. 29. InnholdKjernesideinngangerSeksjonsinnganger Forside Transportside Kjerneside
  30. 30. Forstørrelse av skjermen Forstørrelse innebygget i nettleseren Annet Egne innstillinger for farger og fontstørrelse Skjermleser på datamaskin Skjermleser på mobiltelefon eller nettbrett Leselist Invertering av farger Talestyring Tekstnettleser 0 % 5 % 10 % 15 % 40%
 av målgruppen bruker tilleggsutstyr Fra en undersøkelse med 537 deltakere av Blindeforbundets medlemmer utført av Netlife Research i 2014. Spørsmålsformulering: «Bruker du noe av utstyret i følgende liste, når du surfer på nett? Du kan hake av på flere.»
  31. 31. Se mulighetene bak begrensningene #5
  32. 32. Innhold og design inn i én felles prototype
  33. 33. Protoype i HTML
  34. 34. Tverrfaglige jobbing InnholdDesign UX PL
  35. 35. – Jeg kan ikke HTML
  36. 36. Skisser Leveranse Designretning Designprinsipper Designsystem Form Innhold Funksjon Prototype Teste og
 evaluere
  37. 37. Kjernemodellen bygd inn i CMS
  38. 38. Som også ble implementert i produksjon
  39. 39. Ny startpakke for å jobbe med innhold
  40. 40. Ny startpakke for å jobbe med innhold
  41. 41. – Dette må da ha tatt altfor mye tid??
  42. 42. Fonter og farger for blinde
  43. 43. – Alt dette visuelle høres bra ut, men hva med oss som ikke ser? Styremedlem
  44. 44. Stil og tone Prioritering Struktur Video og lyd Rekkefølge Antall valg Antall steg Fokus Status Størrelse Flater Farger Typografi Symboler Grafisk Innhold Interaksjon
  45. 45. Gi meg innholdet jeg er ute etter så kjapt som mulig Or else …
  46. 46. =For tastatur- brukere Ingen har gjort dette tidligere
  47. 47. – Jeg liker denne best fordi den går «rett til kjernen» Medlem i referansegruppen Men det trengs mer testing …
  48. 48. Se mulighetene bak begrensningene #5
  49. 49. Hvorfor kampanjerigg redder dagen
  50. 50. Kampanjehvaforno?
  51. 51. kampanjerigg
  52. 52. The Sans
  53. 53. La satelittene komme hjem!
  54. 54. blindeforbundet.no Rasjonelt Mange bruksoppgaver Forsiden mindre viktig «Hvordan kan vi hjelpe deg?» Kampanjeside Emosjonelt Én bruksoppgave Forsiden er viktig «Hvordan kan du hjelpe oss?»
  55. 55. Dette burde knytte dem sammen: Saken Avsender Visuell identitet Layout Funksjonelle moduler Lenker på tvers
  56. 56. Mål for en kampanje- rigg 1) Effektivisere ved at det kreves mindre utviklingstid og administrasjonstid
 2) Øke inntektene ved at man stadig forbedrer skjemaer, øke tilgjengelighet o.l.
 3) Styrke merkevaren ved at sidene har et felles visuelt uttrykk
  57. 57. Du når flere kunder med tilgjengelige nettsider #6
  58. 58. Byggeklosser
  59. 59. La oss bygge en kampanje
  60. 60. En kampanjerigg skal være et fleksibelt system som tåler gjenbruk
  61. 61. Vi bygger flere kampanjer
  62. 62. Byggeklosser
  63. 63. Se mulighetene bak begrensningene #5
  64. 64. Så hvordan gikk det egentlig med førerhundkalenderen i år?
  65. 65. Andel konverteringer på mobil i 2014 21% 45% Andel konverteringer på mobil i 2015
  66. 66. Snitt betalingssum økte med 5%
  67. 67. Andel som betalte økte med 151%
  68. 68. Brukertesting, krav og lansering
  69. 69. Ekstern referanse- gruppe på 16 personer
  70. 70. - Jeg likte denne best fordi den på venstre side hadde samlet andre linker.
 - Denne er mest gjenkjennelig fra andre nettsider.
 - Denne har en slik lang meny før man kommer til det som skal leses, og det er ikke bra på leselist.
 - Denne blir så mye detaljer i venstremarg og logo osv.
 - Listen med lenker på venstre side [er noe jeg liker] når jeg ønsker å bruke øynene å lese med.
 - Her kom jeg direkte inn på omtalen av grå stær, uten å måtte innom flere knapper.

  71. 71. - Jeg liker best denne når jeg benytter skjermleser fordi den går rett “til kjernen” i lenkelisten
 - Denne er helt grei.
 - Liker denne best: Artikkelen starter fra topp. En ser tråden/stien som en linje først, denne kunne også ha stått nederst. En fin orientering.
 - Listen med lenker på venstre side [er noe jeg savner] når jeg ønsker å bruke øynene å lese med.

  72. 72. Eksterne referansgrupper var ikke fleksibelt nok En brukertest med hver av personene ville trengt like mye forberedelser men gitt mye mer lærdom.
  73. 73. Brukertesting med blinde og svaksynte
  74. 74. Utfordringen er å få tak i brukere å teste på Unngå å kun teste på «ekspertbrukere»
  75. 75. Test tidlig, test enkelt og test ofte #7
  76. 76. Vi burde holdt av mer tid til testing underveis i prosjektet
  77. 77. – Tilgjengelighet gjør prosjektet dyrere
  78. 78. – When you say accessibility is slowing your development down. It’s not because of accessibility. It’s because you are learning a new skill. Derek Featherstone
  79. 79. Sett av tid og ressurser til å lære #8
  80. 80. beta.blindeforbundet.no Inviter de du frykter mest til å kritisere før den er live
  81. 81. Selv om vi lanserer er vi ikke ferdig.Vi har mange ting vi fortsatt ønsker å forbedre
  82. 82. Du blir aldri helt ferdig#9
  83. 83. Loven krever WCAG 2.0 A & AA
  84. 84. Jobb med kravene og dokumenter prosessen i det Da mange krav er basert på skjønn blir det viktig at designere dokumenterer hvorfor de har gjort som de har gjort
  85. 85. – Så lenge vi dekker WCAG kravene er vi tilgjengelige.
  86. 86. Universell utforming Bruker- vennlighet ❤
  87. 87. Design for mennesker - ikke for krav #10
  88. 88. Rådene våre oppsummert
  89. 89. Universell utforming og brukervennlighet er to sider av samme sak #1
  90. 90. Alle har ansvar for universell utforming #2
  91. 91. Gi redaksjonen kunnskap til å lage tilgjengelig innhold #3
  92. 92. Ikke utsett universell utforming til slutt #4
  93. 93. Se mulighetene bak begrensningene #5
  94. 94. Du når flere kunder med tilgjengelige nettsider #6
  95. 95. Test tidlig, test enkelt og test ofte #7
  96. 96. Sett av tid og ressurser til å lære #8
  97. 97. Du blir aldri helt ferdig#9
  98. 98. Design for mennesker - ikke for krav #10
  99. 99. Takk for oss! Nikolai Strandskogen nikolai@netliferesearch.com @nkstrand Joakim Bording joakim@netliferesearch.com @spispeas Slides bit.ly/______

×