Design som kräver pilar

I Stockholm har vi fått nya spärrar i tunnelbanans entréer. De nya spärrarna är sinnebilden av dålig design med knasigt placerade kortläsare. Många resenärer förstår inte var man ska placera sitt kort när de ska passera genom spärren.

Vid flera tillfällen har det hänt att någon har råkat dra sitt kort på höger sida av apparaten, det vill säga sidan närmast den bemannade spärren. När man drar där öppnas dörrarna istället på vänstra sidan. Och eftersom kortet redan använts en gång blir det tillfälligt inaktiverat varpå det krävs hjälp av spärrvakten för att komma igenom.

Det här skapar onödig efterfrågan.

För att förhindra att situationen uppstår är det vanligt att någon har klistrat på förklarande pilar på kortläsaren. Här borde man ha reagerat. 

Tjänstedesign handlar mycket om att se världen genom användarens ögon. I fall som de här kan man knappast ha designat resenärsupplevelsen tillsammans med riktiga användare.

SL-spärr med två kortläsare på höger sida och påklistrade pilar som visar på vilken sida av spärren respektive kortläsare hör till.

Och det stannar inte vid SL:s spärrar. Här är fler pilar som jag har stött på under den senaste tiden. Man kan undra om tillverkarna någonsin får veta att deras produkter kräver pilanpassning när de möter verkligheten.

Här har man klistrat på lappar med Tryck här så man ska förstå var man ska klicka för att få väntelapp för recept.

Apparaten för könummerlappar på Apoteket.

Lägg också märke till hur knappen för synsvaga dessutom är extra svår att läsa, både på grund av den svaga kontrasten och klisterlappen med punktskrift som sitter ovanpå.

Biljettläsaren på flygbussen har försetts med en stor pil nedåt så kunderna ska förstå var de ska blippa sin biljett.

Biljettläsaren på flygbussen.

Kölappsapparaten för provtagning på Karolinska behöver en påklistrad pil som pekar på en blå ruta med ordet provtagning eftersom ingen förstår var man trycker. Dessutom har man täckt över något annat i nederkant med en svartmålad klisterremsa.

Kölappsapparat i väntrummet för provtagning.

Man har målat

I den här butiken verkar kunderna haft svårt att veta var de ska gå in och ut.

Annonser

Så blir er grafiska profil digitalanpassad och tillgänglig för alla

barnteckning

Dags att ta fram en ny visuell identitet? Då är det viktigt att man redan från början ser till att den fungerar digitalt och inte skapar dålig tillgänglighet när den används.

Innan ni sätter igång arbetet, tänk igenom en extra gång varför ni vill ändra er grafiska profil. Många användare känner igen sig i era färger och är vana vid varumärket. Folk tröttnar mer sällan på utseendet än vad du själv gör. De tillbringar ju betydligt mindre tid på er webbplats än på alla andra.

En bra anledning att byta grafisk profil är om den nya fungerar bättre i en digital verklighet. Många grafiska profiler togs fram i en tid då trycksaker dominerade.
Här är några saker som kan vara bra att fundera på:

1. Tänk digitalt först!

Utgå i första hand från digital kommunikation. Se till att profilen fungerar bra på webb och i sociala kanaler. Och att den fungerar bra på både stora och små skärmar.

Ta fram logotyp som kan inneslutas i en fyrkant. På så sätt kommer den att fungera i olika digitala kanaler. Ta samtidigt fram en favicon av logotypen.

Ett exempel på hur det kan bli om man inte utgår från fyrkant-principen från början:

Exempel på hur det kan bli när man inte kan ha logotyp som favicon. Arbetsförmedlingen har löst det med en mörkblå kvadrat istället.

Arbetsförmedlingens logga är svår att använda som favicon. De använder istället en blå kvadrat. (Skärmklipp från Arbetsförmedlingens webbsidor.)

Arbetsförmedelingens logotyp på Linkedin. Texten är avhuggen efter ordet Arbet.

Arbetsförmedlingens nya logga från mars 2018 fungerade inte så bra i sociala medier. (Skärmklipp från Linkedin)

Arbetsförmedlingens logga kapas även på Twitter. Det står Arbet och under den texten står det Swedish.

… Och lika tokigt blev det på Twitter. (Skärmklipp)

Efter två månader tog man dock fram en ny logga som var bättre anpassad för att användas i digitala kanaler:

Skärmklipp från Linkedin och Twitter med Arbetsförmedlingens allra senaste logga som är anpassad för att rymmas i en kvadrat och fungera bättre i digitala medier.

Skärmklipp från Linkedin respektive Twitter som visar Arbetsförmedlingens allra senaste logga från maj 2018.

Ta också fram hur ni vill att e-postsignaturen ska se ut. Det är en detalj som vi ofta glömmer bort. Se till att signaturen blir tydlig med bra kontraster och att kontaktinformationen är lätt att ta till sig.

2. Se till att färgerna fungerar för alla behov

Välj ett färgschema med färger som det går att skapa goda kontraster med.

Att mäta kontraster är jätteenkelt och det finns massor av gratisverktyg. Använd de gränsvärden för kontraster som når upp den högsta nivån (AAA) i tillgänglighets-standarden WCAG 2.0. Då kommer kontrasten att fungera bättre för alla användare, såväl för en person med svag syn som för den som surfar på en liten mobiltelefon i starkt solljus. Alltså inte inte bara för en designer som sitter framför en stor och välkalibrerad skärm i ett dunkelt kontorslandskap.

Färgerna ska också fungera för personer som har olika typer av färgblindhet. Utöver det bör färgkombinationerna också fungera i svart-vitt för de personer som helt saknar färgseende.

Ta även med några starkare färger i färgschemat. Här är några exempel på varför de behövs:

  • Som varningsfärg för felmeddelanden.
  • När man ska rita upp ett linjediagram eller en annan graf med tre olika serier i distinkta färger. Bestäm då också färgordning för bästa särskiljning och kontrast och se till att färgerna fungerar i svart-vitt.
  • För att signalera olika tillstånd hos länkar (När man för muspekaren över länken eller när länken är besökt.)

Definiera färger för grafiska element

Bestäm hur bakgrundsplattor som kan användas för citat- eller faktarutor ska se ut för bästa kontrast.

3. Välj typografi som även fungerar på skärm

Se till att välja typsnitt som fungerar att läsa digitalt och som vanliga webbläsare stöder. Glöm inte att ändå ta fram alternativa typsnitt som man kan falla tillbaka på ifall det föreslagna inte skulle fungera.

Undvik tunna typsnitt eftersom de kan vara svåra att läsa, särskilt på liten skärm. Prova alltid all typografi på mobiltelefonen.

Tänk på att radavstånd och radlängd är viktigt för läsbarheten. Se till att bevaka så att de fungerar på både smal och bred skärm.

Text plus bild

Skapa inte mallar eller format som bygger på att text ligger ovanpå bild. Texten blir oftast svårläst mot en bakgrund som växlar i färg och kontrast.

När designen anpassas till olika skärmstorlekar kommer dessutom textens placering i bilden, och det utrymme den tar med all sannolikhet att förändras. Så även om det såg läsbart ut på skärmen där det skapades – texten låg på en mörk del av bilden till exempel – är det inte alls säkert att det fungerar på en mindre skärm.

4. Ta fram presentationsmallar

På stora skärmar blir det bäst med en presention som har mörk bakgrund. Den blir lättare att läsa eftersom kontrasterna blir tydligare. Om presentationen är ljus blir dessutom ansiktet otydligt på den som presenterar.

Ta därför fram mallar i både mörk och ljus version. De ljusa är bra att använda när man vill skicka ut åhörarkopior efteråt. (Om mallarna dessutom är uppmärkta med konsekventa format på rubriker och brödtext, går det lätt att växla mellan olika teman så presentationen kan inverteras utan onödigt merarbete.)

5. Använd ett bildmanér som inkluderar

Undvik stereotypa bilder och tänk en extra gång på vad bilderna kommunicerar.

Till exempel:

  • Hur står de olika personerna gentemot varandra?
  • Hur tittar de?
  • Vilka roller intar de? (En person som kör rullstol kanske inte bara ska vara med i rollen som handikappad och så vidare.)

Var väldigt tydliga med vad ni vill ha för bilder från början när ni beställer. Berätta vem som ska vara aktiv på bilden. Med bilder som många människor kan känna sig hemma i så blir bildspråket tillgängligare för fler.

Titta på Region Värmlands Schyst! – en inspirationskälla till jämlik kommunikation. Även Gävle kommun har tagit fram en bildhandbok. 

Om ni tar hjälp av en byrå …

Försäkra er om att byrån ni anlitar har rätt kompetens för digital, inkluderande och tillgänglig design. Be om att få se några av deras tidigare case och kolla av med riktiga användare som har olika behov, till exempel personer med synnedsättning, motoriska eller kognitiva svårigheter. Ställ detaljerade krav.

Det här var några exempel. Är det något annat du tycker jag bör ta upp? Berätta gärna i kommentarsfältet.

 


Länktips:
Tillgänglig design, visuellt och kognitivt har en del gemensamt med informationsdesign. Missa inte Jonas Söderströms blogginlägg på ämnet!

5 saker jag önskar av en ny digitaliseringsmyndighet

Eniac, den första stordatorn och två kvinnor som arbetar i datorhallen.

Efter att ha läst delredovisningen om myndigheten för digitalisering av den offentliga sektorn är jag positiv. Om vi lyckas med digitaliseringen kan vi tillsammans ge människor ett sömlöst och smidigt möte med det offentliga Sverige. Behovet som jag ser det är i första hand inte nya digitala verktyg – utan en gränsöverstigande och användarcentrerad tjänsteutveckling.

Här är några saker som jag tror behövs för att underlätta det arbetet:

1. Hjälp till att ta fram stöttande nyckeltal (KPI:er)

Det är onödigt att alla sitter på varsin kammare och arbetar med liknande utmaningar. Men eftersom man på många myndigheter följs upp på interna mål så kan samverkan nerprioriteras. Därför behövs KPI:er som driver ökad myndighetssamverkan på gräsrotsnivå (”tillsammans-KPI”). Samverkan ska inte begränsas i trögrörliga forum, vilket är lätt hänt om samverkan institutionaliseras.

Hjälp också till att ta bort motverkande KPI:er. Det kan handla om KPI:er som driver kostnadsminimiering på en enskild avdelning eller myndighet på ett sätt så att det totala värdeskapandet försämras.

Ett exempel på det är öppna data där värdet inte alltid skapas inom den egna organisationen utan ute i samhället. Här kan Digitaliseringsmyndigheten uppmuntra de andra offentliga verksamheterna till att utforska hela värdekedjan.

På liknande sätt kan en enskild myndighetsavdelnings öppna data skapa värde internt inom den egna organisationen. Därför bör man också underlätta för myndigheter att använda sina egna öppna data.

För att lyckas med digitalisering behöver man våga experimentera. Och då inte bara på innovationsavdelningsnivå. Experiment behöver bedrivas i själva verksamheten. Kanske kan man öka viljan att våga genom KPI:er som stöttar experimentlustan. Men för att det ska fungera måste även budgetprocesser och projektmodeller ses över.

2. Gör det lättare att utföra olika slags tester på digitala tjänster

Det är ofta krångligt att få tag i konstgjorda användaridentiteter med fejkade personnummer och annan data när man ska testa olika digitala tjänster. Kanske kan man ge Skatteverket i uppdrag att ta fram fejkade testpersoner som alla som utvecklar digitala tjänster kan använda sig av. Gemensamma testpersoner skulle också vara bra för den samlade användarupplevelsen.

Se gärna över möjligheten att ta fram myndighetsgemensamma testlabb, både fysiska och virtuella.

3. Ge alla tillgång till en smidig digital arbetsmiljö

När man arbetar med att ta fram digitala tjänster är det viktigt att ha arbetsverktyg som underlättar.

Många av dagens IT-verktyg är omoderna och inte särskilt användarvänliga. Har man ett digitalt verktyg på jobbet som man aldrig skulle vilja använda på fritiden, så ger det en fingervisning om verktygets brist på användarvänlighet. Människor måste få använda de verktyg som de tycker är bäst.

Även samverkan mellan myndigheter görs extra krånglig när man begränsas av e-post som enda kommunikationsmedel. De flesta myndigheter har Skype for Business men det går ändå inte att chatta över myndighetsgränserna. Möjlighet att köra Slack eller något liknande skulle göra underverk för myndighetsgemensamma projekt och samarbeten.

Säkerhetskrav underkänner ibland vissa molnlösningar. Går det att se över ifall det går att lösa? Kanske kan man klassa olika arbetsuppgifter så att högsta säkerhetsnivån inte gäller alla. Kan en medarbetare som arbetar med interaktionsdesign få använda andra verktyg än en handläggare med kundkontakter? Går det att ta fram ett gemensamt myndighetsmoln där man kan samarbeta med enkla verktyg över gränserna?

4. Skapa möjligheter att återkoppla för de som ser vad som skaver

Digitala tjänster är inte bara en teknikfråga. Det handlar om verksamhetsutveckling och processer. Det handlar även om politik och juridik vilket är jättebra att den kommande myndigheten ska titta på. När verksamheten utvecklar sig underlättar det digitaliseringen.

När man tar fram digitala tjänster hjälper det inte hur smarta lösningar man än tar fram ifall verksamheten bakom bygger på antaganden om en svunnen tid. Alla har till exempel inte tillsvidareanställning med 40-timmarsvecka. Numera arbetar en del som digitala nomader med hela världen som arbetsplats, fler och fler blir frilans och så vidare …

Här efterfrågar jag en kanal tillbaka till regeringen, en ”anti-krångel”-ingång. Det skulle underlätta om det fanns ett sätt att dela med sig av insikter runt sådant som hämmar den digitala utvecklingen. Kanske ett idéforum som alla kunde föra fram förbättringsförslag på.

5. Se till att digital tillgänglighet inte bara blir ett påklistrat tillägg

När man ska ta fram digitala tjänster måste användare med olika slags behov involveras tidigt i processen så att tjänsterna redan från början fungerar för alla.

Här ser jag att Digitaliseringsmyndigheten har en viktig uppgift. Det är avgörande att tillgänglighet inte bara ses som ett lagkrav utan som en möjliggörare för ett samhälle där alla kan delta.

Det är bra att den nya myndigheten fått ansvaret för att ta fram en ny lösning för elektronisk identifiering och underskrifter då nuvarande Bank-ID-lösning fungerar dåligt för stora grupper av användare. Här finns stor potential att bygga en tjänst som alla kan använda utan hinder.

Avslutningsvis kräver ett nytt tänkande också ett nytt ledarskap. Därför är jag glad att det finns på den nya myndighetens agenda. Det finns behov av att odla trygga ledare som förstår att de själva kanske inte vet allting om det digitala – men som litar på att de har medarbetare som gör.

Morfar, sniglarna och nyckeltalen

Snigel som kryper på ett grönt blad.

Morfar hade problem med sniglar i trädgården. Därför fick jag och min kusin i uppdrag att plocka sniglar och lägga dem i en plasthink. För varje snigel i hinken skulle vi få 50 öre.

Sagt och gjort, vi började vandra runt på mormor och morfars tomt och plocka sniglar.

Vi skulle bli rika! Men insamlandet gick ju faktiskt rätt långsamt. Och eftersom vi var två förslagna tjejer i nioårsåldern kom vi snabbt på en bra idé: Det fanns ju fler sniglar i skogspartiet längre bort, på andra sidan gatan. Vi gick dit och fyllde hinken under glada utrop.

Morfar, som var nöjd med utfallet i hinken, betalade oss väl. Det han inte visste, när han senare skulle tömma ut hinken i skogen, var att hans fina trädgård nu huserade minst lika många sniglar, som innan uppdragets utförande.

Hur ofta styrs vi inte på ogenomtänkta nyckeltal? Hur ofta mäts vi inte blint på ett utfall, utan att vi först har pratat om hur vi ska arbeta eller vad vi ska uppnå? På pappret ser allt bra ut när ledningen följer upp. Men jag funderar ibland på hur många skogssniglar som döljer sig bakom de fina siffrorna i statistikrapporterna.

Högerställda språk=hjärngympa för webbredaktören

Nyligen har jag arbetat med att publicera texter på arabiska och dari – språk som läses från höger till vänster – på webben. Det var rätt klurigt innan jag fick ordning på det. Kändes lite som att köra i vänstertrafik; till slut började jag till och med att drömma om texter som flödade åt andra hållet.

Eftersom vi bara har tillgång till svenska språkmallar i vårt webbpubliceringssystem tog det ett tag innan jag kunde lösa problemet med att texten blev spegelvänd.

Så här gjorde jag

Då sidorna var kodade på svenska la jag till attributen dir=”rtl” och lang=”ar” i den html-tagg som omgav texten. (Det vill säga i <h> om det var en rubrik, <ul> om det var en lista , eller i en <span> för text och så vidare …)

Som extra utmaning behövde jag också lägga in svenska ord inom parentes i de arabiska texterna. För att inte parenteserna skulle hoppa runt och hamna heltokigt blev jag tvungen att lägga in den svenska texten i en <nobr> med dir=”ltr” och lang=”sv” för just den lilla textsnutten.

Dir-attributen rtl och ltr står för textriktning right-to-left respektive left-to-right. (Ibland använder man också ”rtl-språk” som sammanfattande begrepp i dagligt tal.)

Exempel på hur det går att lösa problemet med olika textriktningar i samma text:

Exempel på hur det går att lösa problemet med olika textriktningar i samma text. Html-kod för arabiska och svenska.

I just det här fallet gick det bra ändå utan att lägga till svensk textriktning runt parenteserna. Men oftast skrev jag <nobr dir=”ltr” lang=”sv”> runt svensk text inom parentes. (<Nobr> behövs för parenteser eller svenska ord med mellanslag så att de inte radbryts och hamnar på andra ställen i texten.)

Några korta tips

Om du någon gång behöver lägga in högerställt språk på webben, se helst till att ha en egen stilmall för de sidorna. Om det inte går så underlättar det om du arbetar direkt i html i kodläget.

Ha tålamod om du inte kan språket: i början är det svårt att bara markera text eftersom markören rör sig åt andra hållet. Så här förvirrande kan det se ut:

 

Det går smidigast att markera text med hjälp av skifttangenten och pilarna. Antingen med högerpil i textriktningen, eller med vänsterpil från slutet av texten.

Se till att få rätt språkattribut (lang) för texten. Det är viktigt både för tillgängligheten (så att skärmläsare läser upp språket rätt) samt för att sökmotorerna ska hitta rätt – och för att de inte ska ”bestraffa” dig för duplicerat innehåll.

Här finns en lista för olika språk. Dari var svårt att hitta (även det ett högerställt språk), men har koden lang=”prs”.

Lycka till!


Fick en matnyttig kommentar på bloggens Facebooksida av duktiga Emil Öberg som är van att arbeta med olika språk på webben:

Ja jäklar vad det ställer till det innan man får kläm på det hur det funkar. Jag fick min första ögonöppnare när jag förstod att *allt* ska byta plats på arabiska (eller andra rtl-språk). Alltså att precis på samma sätt som vi ltr:are letar efter loggan uppe till vänster så letar de efter loggan uppe till höger. Och som vi letar efter sökrutan till höger så letar de efter den till vänster.

Det andra aha-momentet var när jag förstod att man *inte* ska rtl:a arabiska siffror utan de läses fortfarande vänster till höger, även om de står mitt inuti en rtl-text, precis som de instuckna orden i bloggposten.

Och så tipsar Emil Björklund om en cool grej:

Nya CSS-standarder som Flexbox och Grid Layout är sammanställda med flerspråkighet med i beräkningarna från början, så att riktningar anges med ”logiska riktningsord” istället för till exempel höger, vänster, upp, ner. En layout kan då beskrivas med start, end och så vidare, och följer då automatiskt riktningen i språket (om så önskas).

Kuriosa

Har just tagit reda på språkattributen för minoritetsspråken meänkieli (tornedalsfinska) och nordsamiska: ”se-fit” respektive ”se-sme”. De skrivs med så kallade subtaggar.

Edit: Det verkar räcka med lang=”fit” för meänkieli och lang=”se” för nordsamiska. Rekommendationen är att använda två- eller tre bokstavstaggar om det inte är specialfall där det är nödvändigt med en subtagg-kombination.

(Exempel på subtaggar: ”en-GB” har ett andra led som indikerar samma språk men annan geografisk region. Men om subtaggen skrivs med gemener tycks det indikera variant/dialekt på ett ”makrospråk” till exempel ”zh-yue” för kantonesiska.)

Upptäckte samtidigt att det finns en kod för svenskt teckenspråk också. I Facebook-gruppen Webbriktlinjer filurar vi på om den kanske kan användas i länk för en video med teckenspråk så att sökmotorer ska förstå (alltså typ:  <hreflang=”swl”>…</a>).

Läs mer

Hur gör vi webbvideo tillgänglig för fler?

Många myndigheter och kommuner arbetar hårt med att göra sina webbplatser mer tillgängliga. Men när det handlar om att publicera video på webben är det få som lyckas följa riktlinjerna för tillgängligt webbinnehåll (WCAG 2.0). Här bloggar jag om några saker som är bra att känna till.

Webbvideo var ämnet på förra veckans samverkansträff med MITT-nätverket där olika myndigheter möts och delar erfarenheter kring arbetet med tillgänglighet. Temat passade mig perfekt eftersom jag var mitt uppe i att försöka ta reda på hur myndigheten där jag arbetar kan bli bättre när det gäller just video på webben.

Tänk på det här vid förinspelad video

Kortfattat är det viktigt att se över både teknik och innehåll. För att videon ska vara tillgänglig bör det gå att lägga till:

  • textversion av innehållet (nivå A av WCAG 2.0) 
  • undertexter (nivå A)
  • syntolkning (nivå AA)
  • teckentolkning (nivå AAA)

För att innehållet i filmen ska bli tillgängligt för fler människor är det bra om man:

  • Redan som beställare kan tänka på vad filmen ska innehålla för att vara tillgänglig.
  • Ställer krav på tillgänglighet i upphandling av produktionsbolag.
  • Tänker efter redan i manusstadiet.
  • Transkriberar innehållet.
  • Ser till att det går att välja olika bildkvalitet på filmen.
  • Ser till att det är bra kontraster.

Undvik så kallade tangentbordsfällor. Det ska gå att:

  • Tabba sig fram till videospelaren.
  • Kontrollera uppspelningen med endast tangentbordet (och det ska vara tydligt hur man gör).
  • Sedan ta sig vidare med hjälp av endast tangentbordet.

Olika format för olika behov

Jag har tyckt att det var svårt att först greppa skillnaden mellan de olika alternativa formaten och varför de behövs. Men det handlar inte bara om att göra filmen tillgänglig för personer med funktionsvariation, utan att göra något som är bra för alla. Textning gynnar även de som inte slår på ljudet, transkript är bra för SEO och för att bedöma om man ska titta på filmen eller inte.

Textning innebär att det finns en textversion av innehållet i anslutning till filmen. Den behöver inte vara ordagrann – det viktiga är att den innehåller samma information. Kan också vara en översättning. Hårdkoda inte utan låt användaren själv välja om hen vill ha textning eller inte. Observera att subtitles som syns i bilden inte läses upp av skärmläsare.

Med transkribering återges det talade ordet i text. Se TED Talks för inspiration.

Undertext (closed caption) liknar texning men tar också med ljudeffekter och annan ljudinformation, till exempel ”telefon som ringer”, ”någon hostar”.

Syntolkning (audio description) innebär att man kan välja ett extra ljudspår där en speakerröst återger det visuella innehållet i filmen. Mycket information går annars förlorad för den som är synsvag eller synskadad. Ickeseende kan dessutom haka upp sig på vissa ljud som inte förklaras.

Det är många saker som man måste tänka på när man gör en syntolkning. Den får till exempel inte krocka med repliker eller viktiga informationsbärande ljud. Ta därför helst in en professionell syntolk och se gärna till att syntolken är med från början. Det är också bra om hen får kontakt med manusförfattare eller regissör.

Här är en checklista på vad sådant som är bra att tänka på när man ska beställa syntolkning.

Man kommer långt med ett genomtänkt manus

Samverkansträffen gästades också av två syntolkar (Veronica Kesen Tundell och Jenny Salmson) som lärde oss att manus är nyckeln för att lyckas med tillgänglig video. Om manuset är bra behövs det ingen, eller endast lite syntolkning. Här är några tips som vi fick:

  1. Låt folk presentera sig. Då känner lyssnaren igen namnet och kan koppla det till rösten.
  2. Lägg ”voice over” över texten så får du med allt innehåll i ljud också. Exempel: Gata för alla från Synskadades riksförbund.
  3. Gör en händelseplacering. Lägg in saker i handlingen som gör att man kan se utan att behöva se bilderna. Vad händer om jag blundar och ser filmen? Vad går förlorat?
  4. Gör samma med ljudmiljöer. De ljuden behöver förstärkas. Dränk inte viktiga miljöljud med musik. (Ljudet ska helst höra ihop med bilderna och föra berättelsen framåt.)
  5. Byt inte kläder på personerna i filmen. Låt en person ha samma tröja resten av filmen så att man kan hålla reda på vem som är vem.
  6. Plocka in en riktig syntolk från början.

Hur gör vi med teckenspråk?

Teckenspråk är barndomsdövas första språk. Det finns också andra som är hjälpta av teckenspråk och därför räcker det inte med att bara texta/undertexta filmer. (Vartenda land har sitt egna teckenspråk även om det finns en esperanto-liknande variant som ingen använder.)

Många myndigheter tar fram teckenspråksfilmer där man berättar om delar av webbplatsens innehåll. Men det är sällan som det går att välja ett spår med teckentolkning på de andra filmerna som myndigheten lägger ut.

Mikael Hellman berättade om hur Malmö stad tagit fram en videospelare där man kan välja att slå på och slå av teckentolkning och textning medan filmen rullar! Ett problem med teckentolkning är annars att det behövs två filmer. Men i Malmö har man löst det genom att själva programmera videospelaren på den videoplattform som de använder. Mikael sa att Malmö stad inom kort planerar att göra likadant med syntolkning.

Bilden visar hur Malmö stad har lagt in ett spår för teckentolkning i sin videospelare på webben.

Informationsfilm om Malmö stads organisation med teckentolkning påslagen.

Filmen finns på Malmö stads webb. Titta på den och välj att slå på och slå av teckentolkning och olika språk.

Hur gör vi med livevideo då?

Vid livesändningar bör man använda sig av livetolkning. Det ska också finnas tillgång till bildtext som någon antingen skriver live, eller ett färdigt manus som läggs in under sändning.  berättade hur hans företag arbetar med tillgängliga livesändningar

Livesändningar tillhör ett av undantagen i det nya tillgänglighetsdirektivet från EU. En anledning är gissningsvis att det kostar en del.

Youtube har visst stöd för tillgänglighet

Sedan Youtube släppte sin HTML5-spelare har förutsättningarna för tillgänglig video blivit mycket bättre. Youtube har stöd för autotranskribering vid kortare videoklipp (tyvärr är inte svenska ett av de tio språk som stöds idag) och även automatisk undertext. Autofunktionen går så klart inte att lita helt på, utan man måste redigera för hand efteråt, men den är säkert till god hjälp.

Vad jag har förstått så har Youtube fortfarande inget stöd för syntolkning men det finns en gratistjänst, YouDescribe, som går att använda åtminstone för engelska.

Var uppmärksam på eventuella tangentbordsfällor vid inbäddade videoklipp.

HTML5 och video

Webbstandarden HTML5 gör det möjligt att spela upp video och ljud direkt i webbläsaren. Med hjälp av HTML-taggen (som har flera attribut) går det att lägga till olika information om en video såsom text, undertext, beskrivning för skärmläsare, kapitel och metadata.

Filformatet som används heter Web Video Text Tracks. WebVTT (.vtt) är en ren textfil.

Avslutningsvis: Jag har försökt samla sånt som jag har tänkt på, hört och hittat om tillgänglig webbvideo. Du vet kanske mer? Kommentera gärna och berätta om fler saker som är bra att känna till – och som jag kan uppdatera det här blogginlägget med.

Tips

Så gör du dina tweets mer tillgängliga

Bilder är populära på twitter och får enligt statistiken oftast fler retweets än rena textinlägg. Men glöm inte att lägga till en bildtext om du twittrar ut en bild! Då kan även de följare som inte kan se själva bilden ta del av innehållet. Jag visar dig hur du kan göra.

Under helgens knytkonferens #digikollo på Barnens ö höll Pär Lannerö och jag en session där vi diskuterade Digital hållbarhet och inkludering.

En av deltagarna berättade att hans organisation ofta lägger ut bilder med text i själva bilden på twitter. Anledningen är att de känner sig begränsade av mikrobloggens 140 tecken. En sådan ”workaround” gör dessvärre att flera följare går miste om innehållet eftersom det blir otillgängligt. Men lyckligtvis finns det en lösning på problemet.

Lägg till en bildtext i twitter-appen

Jag tänker att det i första hand är bäst att undvika text i bild. Men om du ändå vill använda det, kan du göra så här för att lägga till en bildtext för skärmläsare i twitters mobil-app:

  1. Öppna twitter-appen och klicka på lilla kugghjulet för att komma till inställningar.
  2. Välj Bild och ljud.
  3. Gå in under Åtkomlighet.Skärmklipp från mobilappen som visar att inställningen för Skriv bildbeskrivningar ligger under Åtkomlighet.
  4. Aktivera Skriv bildbeskrivningar.
  5. Nästa gång som du laddar upp en bild i en tweet kommer du nu få upp Lägg till en beskrivning där du skriver din bildtext (max 420 tecken).
  6. Klicka Verkställ och skicka sedan din tweet som vanligt.

Exempel på hur man lägger till bildtext för synskadade i twitter-appen. Exempelbilden har en text där prinsen säger till Askungen: You can't go now.. It's only midnight. Askungen svarar "Let's get one thing straight. I can do whatever the fuck I want.

Bildtexten kommer sedan att läsas upp av skärmläsare (seeende ser alltså oftast inte texten även om vissa webbläsare visar den). En bonus är att även sökmotorer känner av den. Eller som Ola Berg lite klokt uttryckte sig under diskussionen: ”Robotar har ju en annan sorts funktionsuppsättning, precis som olika människor”.

Om du föredrar att twittra från datorn kan gratistjänsten Easy Chirp (hette tidigare Accessible Twitter) vara ett alternativ. Genom att koppla applikationen till ditt twitter-konto får du möjligheten att lägga till både en bildtext och en längre beskrivning.

Skärmklipp på Easy Chirp

När du har kopplat ditt twitterkonto till gratistjänsten Easy Chirp ser det ut så här. Nu kan du lägga till både en kortare och en längre bildbeskrivning som kan läsas av skärmläsare.

Om du är intresserad av att veta mer om digital tillgänglighet kan du läsa mitt tidigare blogginlägg Alla vinner på att tänka tillgängligt.

Bildkredd: Cinderella och Prince charming: 

 

Bota din fobi med virtuella spindlar

Kan virtual reality, VR, användas som hjälp inom psykoterapi?

I veckan var jag på öppet hus hos VR Sverige. Temat denna gången var hur VR kan användas inom forskning, utbildning och hälsa.

Mest fascinerande (i mina ögon) var William Hamilton. Han berättade om VR-appen Itsy som kan bota spindelfobi. Klart intressant med spelifierad, virtuell terapi.

spindeln

Först får användaren träffa en barnsligt snäll och söt tecknad spindel som är iklädd stövlar och hjälm. Helt ofarligt alltså. Men kanske ändå jobbigt för en person med svår spindelfobi, vem vet …

itsy-spindel

När spelaren vant sig vid första spindeln trappas spelet sakta upp för varje nivå och spindlarna blir då allt mer verklighetstrogna. Till slut möter spelaren en stor och luden fågelspindel.

Appen testas i vetenskaplig miljö och personer med stark fobi har efter att ha spelat Itsy kunnat hålla i en spindel efteråt. Det verkar fungera lika bra som vanlig terapi alltså, men appens terapeut kan bota flera på samma gång och är inte bunden till tid eller rum.

Personligen är jag inte särskilt rädd för spindlar. Men ormar däremot … Funderar på om jag ens skulle våga sätta på mig VR-glasögon om jag visste att jag skulle mötas av en orm. Men har det fungerar på spindelfobiska, så kan det nog fungera även mot ormskräck.

Ska hursomhelst bli spännande att se vilka sorters terapeutiska användningar som dyker upp inom VR-området framöver.

Varför har du taggat dig själv på min profilbild?

Suck. Så har det hänt igen. Jag har halkat med fingret och råkat tagga mig själv när jag kollat Facebook i mobilen. Dumma mig, tänkte jag först – men egentligen är det ju dålig UX (User experience) som får mig att känna mig som en dunderklant.

Det ska vara lätt att göra rätt och svårt att göra fel. Men kör man Facebook i Safari på mobilen är det nästan en prestation att inte klanta sig. Och då har jag inte särskilt tjocka fingrar.

Ibland märker jag vad som hänt (i panik) eller också långt senare när någon accepterar en vänförfrågan jag inte skickat (medvetet), eller som igår när en Facebookvän undrade varför jag taggat mig i hans profilbild. Hans nya bild dök upp i mitt flöde och tydligen hade jag lyckats klicka felaktigt på den. D’oh!

taggad

Det är lätt att råka tagga sig själv när man skrollar igenom Facebookflödet i mobila webbläsaren. Men det är mindre lätt att avtagga sig. Inte särskilt vänligt mot användaren.

I Safari räcker det nämligen med att du råkar dutta på en bild med ansikten för att Facebook ska vilja tagga (och sedan går det inte att få bort taggningsförslaget med mindre än att du måste backa i webbläsaren eller klicka på pilen för nästa bild i albumet). Om du i det här läget råkar ”dubbeldutta”på bilden så vips har du satt dit en taggning innan du hinner blinka! (Och eftersom ditt eget namn står överst i listan med föreslagna taggar blir det troligen du själv som taggas.)

För att ytterligare bättra på känslan av förödmjukelse går det givetvis ut i alla vännernas flöde att ”Du har taggats i NN:s bild”. Och troligen får även personen, vars profilbild du taggat, en notifiering. Har du tur hinner kanske notifieringen försvinna om du avtaggar dig i tid.

Men det är just det: När du väl lagt till taggen, är det svårt (eller omöjligt) att ta bort den i mobilen. Det krävs att du är i närheten av en dator och kan logga in där. Och inte ens då är det lätt att komma på intuitivt hur du ska göra. Det lärde jag mig den hårda vägen under Almedalsveckan förra året …

frustration

Så här frustrerad blir man när man råkat klant-tagga sig i profilbilden på en person man inte inte känner. Självklart finns vänner på plats som förevigar ens pinsamma ögonblick. Foto: Kalle Eriksson

Jag skulle då kolla upp en ny kontakt jag träffat i Almedalen på Facebook – men naturligtvis lyckades jag tagga mig i hans profilbild. Den gången tog det tjugo minuter, åtskilligt med skräckblandade skrattanfall och tre sociala medie-experter (ok, det var rätt sent på natten) att komma underfund med hur vi skulle få bort min taggning.

Tips: Du måste föra muspekaren över ditt namn (inte i själva taggen, utan där det står ”Med [ditt namn]”).

taggad2

Hjälp, jag har råkat tagga mig i någon annans profilbild! Lugn, så här gör du: Håll muspekaren över ditt namn. Du får då du upp förslag om att ta bort din tagg.

Varför envisas jag ändå med att kolla Facebook i webbläsaren och inte via Facebook-appen? Av två anledningar:

  1. Appen slukar extremt mycket batteri.
  2. Jag ogillar att Facebook vill tvinga på mig ännu en app – Messenger.

Jag kan förstå om Facebook inte vill lägga krut på att förbättra användarupplevelsen för en motvallskärring som ”yours truly”, men det är ett irriterande problem som de lätt borde kunna fixa för att göra sina användare mer bekväma.

Till exempel med en kontrollfråga: ”Vill du verkligen tagga dig i NN:s profilbild?” (–Hell no!!!)  En enkel åtgärd som säkert skulle bespara många användare den jobbiga känslan av ett klumpigt svanhopp i klaveret …

Har du också råkat ut för det här? Jag antar att det kan hända vem som helst, men helst mig tydligen.
🙂

Första dagarna med socialt intranät

Att ta fram ett intranät med sociala funktioner i en stor organisation (4000 anställda) kan vara ett jättekliv. Men nu var det verkligen dags för något helt nytt och det gamla intranätet nynnade på sista refrängen efter många års trogen tjänst i kommunen.

Det har varit väldigt spännande att se hur det skulle tas emot. Det nya intranätet var ju helt annorlunda mot det tidigare traditionella intranätet och enkätundersökningen vi gjorde tidigare i år visade att nästan en fjärdedel av medarbetarna saknade social medievana.

Det nya inslaget innebär kort att alla får varsin profilsida med ett eget aktivitetsflöde och att alla kan bli medlemmar i, eller själva skapa olika grupper på intranätet. På så sätt kan medarbetarna själva styra vad de vill följa i sitt flöde så att de får information som är relevant och intressant för just dem.

Nya grupper på sociala intranätet, såsom Språkintroduktion, Slöjdlärare, Lärarförbundet, Miljödiplomering, Vin, malt och gastronomi med mera.Hur har det gått då?

Jag hade inte väntat mig någon större aktivitet de första dagarna, men det tog inte lång tid innan nya grupper poppade upp i listan. De flesta är renodlade samarbetsgrupper. Men det har också skapats en hel del sociala intressegrupper, bland annat tre olika grupper som handlar om mat.

Maten, måltiden och dryckens vetenskap, hantverk och konst – till vardag och till fest – en grupp för att utbyta kunskap och konkreta tips! /Gruppen Vin, malt och gastronomi

Jag ser att kollegorna redan delar bra information och hjälper varandra. De verkar dessutom ha roligt när de får vara med och bidra.

Sociala profiler

På profilsidan får alla användare själva fylla i merparten av informationen. Det gör att du som medarbetare kan bli sökbar på både arbetsrelaterade ”skills”, och på intressen och kunskaper som andra kanske inte kände till. Pratar du nordsamiska? Skriv ner det, vem vet, det kanske kommer en dag då den kunskapen behövs!

Jag gillar verkligen att alla får presentera sig på ett sätt som passar dem. Det är charmigt och jag tycker att jag kommer närmare mina kollegor på grund av att det blir mer personligt än om profilen hade varit autogenererad.

minprofilsida

På profilsidan kan medarbetare själva lägga till titel, kompetenser och arbetsbeskrivning.

En förutsättning för att det ska gå att hitta en medarbetare i sökmotorn är att alla fyllt i relevant information om sig själva i profilen. För att uppmuntra till det, har vi tagit fram en tävling där de som har 100 procent profilstyrka kan vinna biobiljetter.

För att få full profilstyrka krävs att du fyllt i alla fält som går att fylla i, och att du också skrivit en kommentar i en grupp – eller interagerat med en medarbetare på dennes tidslinje. Det tycks vara en bra sporre för att få folk att komma igång!

Jag frågade en kollega på en annan förvaltning om vad de tyckte på hennes enhet. De var förtjusta i nya intranätet och hade varit väldigt aktiva under hela lanseringsdagen:

De har intranätat intensivt. Nästan så man undrar om det blev nåt mer gjort idag ☺️

AD-smolk i glädjebägaren

En nackdel med profilsidan har varit kopplingen till vårt AD (Active Directory). AD:t innehåller information om användarna, till exempel vilken enhet du arbetar på, eller vem som är din chef. Eftersom det visade sig att AD:t matas från lönesystemet, där de anställda är upplagda på ett helt annat sätt, kan det bli tokigt ibland.

Det går nämligen inte att skriva in hur långa teckensträngar som helst i lönesystemet, varpå alla möjliga egna förkortningar används. Därför arbetar jag på ”Information enheten” medan chefen enligt AD:t, tillhör ”Komm och Medborgserv ledn”. Mindre snyggt kanske. Men vi har inga alternativ och jag antar att det går att leva med det. (Såvida ingen tror att vi är ett gäng glada särskrivare på ”information enheten” då förstås …)

Sociala framgångsfaktorer

Vi tog inte fram några speciella riktlinjer för hur man ska bete sig på nya intranätet eftersom vi litar på att våra kollegor är kloka människor med gott omdöme.

Jag tror inte på att komma med massa pekpinnar eftersom jag är övertygad om att det skapar onödig ängslan som tar bort lusten att använda ett socialt intranät. Om det skulle uppkomma en situation när någon beter sig omdömeslöst, då får man väl lösa den enskilda situationen där och då. Utgångspunkten är att vi litar på våra medmänniskor och hittills har det gått hur bra som helst.

Vi har också uppmuntrat till ett transparent intranät, med öppna grupper i första hand (det går även att skapa modererade och slutna grupper i cms-verktyget Sitevision som vi använder) och då måste alla känna sig trygga med att våga skapa öppna grupper.

De rent sociala grupperna fyller en viktig funktion även om de inte har direkt koppling till kommunens arbetsuppgifter. De lättar upp och skapar gemenskap mellan de olika förvaltningarna och verksamheterna – vilket självklart är värdeskapande eftersom det kommer att göra framtida samarbeten smidigare.

I god tid före lanseringen letade vi upp medarbetare på olika ställen i organisationen som ville bli ambassadörer och sociala ambassadörer för nya intranätet.

Ambassadörerna har fått berätta om intranätet och förberett avdelningarna på att något nytt var på gång. De sociala ambassadörerna har haft till uppgift att vara extra aktiva i grupper och konversationer, att gå in och gilla, kommentera samt skriva egna inlägg så att andra användare ser ”att det inte är så svårt” och förhoppningsvis blir peppade att komma igång själva. Det har varit en mycket bra strategi och vi hittade snabbt engagerade ambassadörer.

Slutligen, frågan alla säkert sitter och undrar över: Ja det funkar med rörliga bilder i det sociala flödet! 😉

happy-friday-intranätet

Oh joy! Fredagarna räddade: Det funkar med gif-filer på nya intranätet!

Går inte få med känslan i skärmdumpen men så här såg det ut i fredags:

itsfriday.gif