Publicerat Nyheter
En tillgänglighetsanpassad webb

Designa webb för alla funktionsuppsättningar

Det är mer aktuellt än någonsin att prata om tillgänglighetsanpassning gällande webbdesign. Viktor Pinje är gränssnittsutvecklare på Spinit och menar att det är mer än hög tid att prioritera en webb för alla och hoppas att man börjar se detta som en prioriterad självklarhet i beställarnas kravspecifikationer.

– ”Alla har en unik uppsättning av kroppsfunktioner. Vissa funktioner fungerar bättre än andra, och ibland råkar vi alla ut för så kallade nedsättningar”, säger Viktor.

– ”Åldern medför flera olika svårigheter, och sjukdomar och olyckor kommer att drabbas alla i någon mån, då är vi tacksamma att något har gjort det lätt för oss att fortsätta använda internet på samma villkor som tidigare”.

Ända sedan den 1 januari 2015 är bristande tillgänglighet en form av diskriminering, något som säkert fått många att få upp ögonen för tillgänglig webb. Men ännu är mer än varannan svensk webbplats bristfällig ur tillgänglighetssynpunkt menar Viktor.

Gör webben uppläsbar

När man pratar om tillgänglighet för webben brukar man ofta tala om så kallade skärmläsare. Det är ett datorprogram, i många fall redan förinstallerat i datorn, som tolkar och läser upp innehållet på skärmen. Främst används detta av synskadade, men verktyget kan också vara till hjälp för personer med till exempel lässvårigheter.

För att en skärmläsare ska kunna tolka webbplatsen rätt krävs det att HTML-koden som bygger upp sidan är skriven på ett korrekt sätt för att skärmläsaren ska kunna beskriva innehållet med ord.

Tillgänglighetsanpassning är sökmotoroptimering

Det är vanligt idag att företag redan lagt mycket pengar på sökmotoroptimering och på så vis bland annat sett till att bilder har beskrivande text och rätt rubriker används för att beskriva sidans delar med mera. Detta är även till nytta för användare av skärmläsare.

– ”Jag brukar säga att en sökmotorrobot, det vill säga det program som till exempel Google använder för att tolka sidan, är både blind, döv och förståndshandikappad. På många vis är alltså tillgänglighetsanpassning en del av sökmotoroptimering. Men vi ser sällan företag som nischat sig på det förstnämnda. Är det verkligen så mycket viktigare att alla ser dig än att alla kan använda dig?”

Var konsekvent och nyttja designkonventioner

Förutom att göra innehållet tillgängligt för skärmläsare ligger det mycket mer i tillgänglighetsanpassad webbdesign.

Här är några exempel på sådant som förbättrar upplevelsen för personer med synnedsättning, dyslexi, autism och färgblindhet för att nämna några.

  • Lättläst typografi
  • Korta stycken
  • Skalbart innehåll
  • Tillräckligt stor textstorlek
  • Få layoutkolumner (gärna en)
  • En tydlig huvudnavigation, med genomtänkt struktur.
  • Tydliga och konsekventa färger
  • Förklarande bilder och ikoner
  • Betonade nyckelord och fraser
  • Animerade övergångar
  • Konsekvent designspråk

Ett konsekvent designspråk gör att man snabbare kan ta till sig ett gränssnitt och få det att kännas intuitivt. Om man tar del av de konventioner och oskrivna regler som finns i webbdesign behöver användaren inte gissa sig fram.

Tänk utanför datormusen

En av de viktigaste funktionerna att testa när man bygger för webben är att alla interaktionselement, så som t.ex. länkar och knappar, ska kunna ”klickas” även utan mus. Datormusen är ett verktyg som kräver att du har god precision och kontroll på dina arm- och handrörelser, något som långt ifrån alla har.

– ”Personer drabbade av till exempel Parkinsons sjukdom, ALS, Downs syndrom, och CP, såväl som personer utan armar, använder alternativ till datormus. Många gånger gör jag även själv det för att det lättare för stunden”, säger Viktor.

Genom att se till att webbplatsens element går att nå med genom att flytta fokus med tab-tangenten kan man komma åt alla klickbara element. Detta brukar fungera utan att man behöver göra något extra, men för att underlätta för användaren finns möjlighet att bland annat ändra fokuseringsordningen, skapa genvägar och autofokusera, samt se till att det finns alternativ till dra-och-släpp-funktioner och liknande. Dessutom så är det viktigt att se till att alla interaktiva element får en tydlig indikation när de blir fokuserade.

Detta är ett viktigt steg i att göra webbplatsen tillgänglig för användare som nyttjar specialdesignade muspekare, tangentbord eller fjärrkontroller.

Publicerat Tips

Tankar kring användarvänlighet, UX och UI – intervju med Marcus Fridholm på Spinit

Vi pratade design och digitala plattformar med min kollega Marcus Fridholm som jobbar som frontend-utvecklare. Ska webbplatser fungera bra, så krävs också bra design.

Hur förklarar du förkortningar som UX (user experience) och UI (user interface) för någon som inte känner till något om webbdesign?

Om vi börjar med UI, så betyder det användargränssnitt på svenska. Det är hur programmet, eller webbsidan är konstruerad för att du skall kunna göra det du vill. UI i en bil till exempel är saker som ratt, pedaler, växelspak, fönsterhiss och allt sånt. Men på en webbsida handlar det om var knappar och menyer sitter, hur texten ligger och var man letar efter olika typer av innehåll.

Kommer du till exempel in på en tidning, så finns det vissa saker som man tar för givet. Här ligger ofta artiklar tidningen vill lyfta fram extra mycket samlade på ett ställe, tillsammans med dem ligger det ofta annonser. Menyer hittar du längst upp eller till vänster. Effekten blir att de flesta känner igen sig, man kan säga att ”ratten” befinner sig där du tror att den skall sitta.

UX är då en förlängning på allt som har att göra med UI. Det handlar om själva upplevelsen. Hur smärtfritt du navigerar och gör det du vill göra, hur intuitivt det är, hur många manövrar du behöver utföra innan du kommer dit du vill, hur bra återkoppling du får på vad du gjort. Hur väl du får det du förväntade dig.

Ett skräckexempel är till exempel när man går in på en kvällstidning och istället för nyheterna man förväntade sig hamnar på en splash screen. Den innehåller inte någonting av tidningen, utan är bara är ett sätt mjölka så mycket annonspengar som möjligt. Det är inte så att jag inte förstår att de behöver pengarna, men det är inte bra UX. Du bryter på sätt och vis förtroendet mellan dig och besökaren, när besökaren får något annat än de förväntade sig.

Lite på samma sätt, så har många sajter en förmåga att blanda sin egen navigation med annonsnavigation. Klickar du på en länk, så skall du hamna där du förväntade dig att hamna. Om du liksom får hålla tummarna för att du hamnar där du ville och inte mitt i en annonskampanj, så är det riktigt dålig UX.

En annan vinkel på UX är om du köpt något, är missnöjd och vill kontakta kundtjänst. Om kontaktinformationen är dold fyra nivåer ner i hierakin, så är det inte roligt. Eller ännu värre om det krävs att du först går någon annanstans och registrerar sig innan du ens får kontakta företaget, då lär du inte vara på bra humör när du väl får kontakt. Om allt du söker är information eller svar på en undran, så är frågan varför du skall behöva registrera dig överhuvudtaget?

Allt sånt krångel: registrering för att söka info, åtta klick för att skicka en fråga, hopp till externa sajter, programmerade länkningar som förstör din webbläsarhistorik – allt sånt får dig till slut att trötta. Till slut vill du inte mer och försöker lösa ditt problem med Google istället.

När man möter bra UX så är det givet var man hamnar och du hittar lätt det du söker efter. Det absolut bästa betyget en UX-designer kan få är att användarna inte ens tänker på det arbete som lagts ner, utan bara är nöjda.

Har du några tankar om god informationsdesign och hur man gör webblösningar mer tillgängliga?

Vi lider idag av det som pedagogerna kallar snuttifiering. Med det menar jag att vi får en hagelskur av informationsbitar över oss. Problemet är att få människor är konstruerade att hantera den sortens flöde. Vi får för många sammanhang att ta ställning till samtidigt och förmågan att faktiskt ta in information blir lidande.

I vissa kontexter är det OK. Tittar du i ett Facebook-flöde så förväntar du dig mycket information och har nog också lärt dig att sortera bort det mesta som egentligen inte är så intressant.

Om du däremot kommer in på en myndighets hemsida, så vill du verkligen inte ha 14 olika sammanhang att ta ställning till. Där har du ofta en specifik orsak till varför du är på sidan och du vill att myndigheten ska förstå dig som besökare tillräckligt väl för att veta vilka slags frågor de flesta brukar söka svar på.

Om det är en myndighet så är det också deras skyldighet att se till att sidan är anpassad för olika typer av användare. Det kan handla om allt från uppläst innehåll, innehåll på enklare svenska och innehåll anpassad utifrån den kontext du befinner dig i.

Om man tittar på företag, så är de ibland onödigt hemliga med vad de gör. Det är inte supersmart att tvinga dig som besökare att gissa vad företaget sysslar med. Kommer du in på en bilverkstad, så bör det nog stå att ‘vi är en bilverkstad’ redan på första sidan högt upp. Säljer du bildelar, men inte har en verkstad, så får det väl istället stå ’vi säljer bildelar’. Eller ‘vi är konsulter inom marknadsföring’ om det är den tjänsten man erbjuder. Varför krångla till det?

Jag skulle vilja påstå att du har max tio sekunder på dig att förklara vad ni gör. Att vara mystisk gör att man håller kvar några som inte är intresserade av vad man gör och att andra som är intresserade tappar sugen och letar vidare. Varför ska du hålla kvar människor som inte är ute efter det du erbjuder? Gör det tydligt vad det är du håller på med, då hjälper du dina användare och de vet att de har hamnat rätt.

Vad är skillnad på frontend- och backendutveckling?

Oftast så går vårt arbete i varandra, jag gör en del saker som backend-utvecklarna också gör. Men min expertis är närmare det visuella och själva upplevelsen. Deras expertis handlar mer om hur saker fungerar bakom kulisserna. På riktigt stora utvecklingsföretag så är folk lite oftare specialister, medan kompetenserna på ett mindre företag som Spinit går ofta in i varandra. Bredare kunskaper gör oss mindre sårbara.

Är det stor skillnad på hur man designar för olika åldersgrupper?

Douglas Adams skrev ungefär att det som sker innan du fyllt 15, är lika naturligt som luft, vatten och mat, det är så världen fungerar. Det som sker mellan du är 15 och 30 är spännande, det senaste och det hetaste som du bygger din karriär på. Det som sker efter att du fyllt 30 är onaturligt, mot guds lagar och borde förbjudas. Haha, ungefär så är det.

Den största utmaningen med att designa för unga, för folk som är runt 15 till 20, är att de har inte en ”medveten medvetenhet” om hur saker och ting fungerar. För dom är den digitala tillvaron som att andas, de bara gör. Så om du bryter mot de oskrivna reglerna för hur saker och ting ska fungera, så kan du bara göra det till en viss gräns. När du kommer till en ny svårighetsnivå så blir ungdomarna ofta helt handfallna, för de har aldrig medvetet lärt sig hur saker fungerar. De vet inte, men vet inte att de inte vet.

De lite äldre är ofta mer medvetna, men lider lite av problemet som någon som lärt sig ett nytt språk. Den digitala tillvaron är inte deras ”modersmål”, så den kommer inte lika självklart och naturligt.

Sen har vi min föräldrageneration, de som är 75 och uppåt. Rätt många i den generationen vet knappt hur man använder internet alls, de hade helst behållt en stationär telefon och en tjock-tv.

Så nog är det är lite klurigt att designa för flera åldersgrupper.

Hur hittar du vilka trender som gäller inom UI och UX?

Google. Jag söker på olika nyckelord som UI, UX och design, sen lägger jag till nuvarande år och så sållar jag ordentligt och får upp relevant information. Jag hänger på en del forum där teknik och design diskuteras. Jag är inte så aktiv, utan mest där för att hålla koll på hur diskussionen går.

Vilka olika verktyg använder du i ditt jobb som frontend-utvecklare?

Photoshop, Illustrator, Acrobat, Sketch, webbläsare, IDE – programmeringsverktyg för all kodhjälp som jag kan tänkas behöva. Och sen lite webb-baserade verktyg som Toggl, Jira och Git.

Tack så mycket!

Publicerat Nyheter

Inspireras av Conscriptor och fokusera på att automatisera din verksamhet

Ett bra exempel på hur man kan använda digital teknik är Conscriptor som vi har varit med och hjälpt till att skapa en helt ny affär. Stort fokus har hela tiden varit att försöka automatisera så mycket som möjligt för att kunna vara konkurrenskraftig och utmana gamla mönster.

– Det hela började med att vi såg att journalhanteringen tog väldigt mycket tid och resurser i anspråk på en vårdcentral. Personalen på en vårdenhet ska ju i största möjliga mån arbeta med att behandla patienter. Men verkligheten är också att en vårdenhet dras med väldigt mycket kostsam administration, säger Henric Carlsson som är grundare och VD till Conscriptor.

Idén började ta form. Conscriptor ville kunna göra det möjligt för vårdenheterna att erbjudas en journalhantering som frigjorde betydelsefull tid och att kostnaderna därmed skulle kunna sänkas.

– Vi kände att målgruppen skulle kunna ha så pass mycket att vinna på en effektiviserad journalhantering att vi bestämde oss för att ta fram en lösning, fortsätter Henric. Vår idé gick ut på att vi ville erbjuda vårdenheterna en tjänst där diktat samlas in digitalt, förmedlas på ett säkert och tillförlitligt sätt till oss på Conscriptor, och att vi på distans agerar som läkarsekreterare.

Vill du veta mer om Conscriptor läs gärna vårt kundcase Conscriptor – från idéer till affärer.

Publicerat Uppdrag

Se hur LEQM löste sitt kompetensbehov inom systemutveckling med hjälp av oss

Många företag har idag svårt att behålla sina utvecklare. Vi har pratat med LEQMs VD Robert Wigemo om hur han använder oss på Spinit som utvecklings­partner istället för att själv anställa en utvecklings­avdelning.

Robert säger också att i framtiden kommer arti­ficiell intelligens (AI) att hjälpa oss att beräkna hur våra projekt går och även aktivt gå in med korri­gerande åt­gärder för att nå bättre projekt­kvalitet.

– Marknaden är mogen för att ta hjälp av AI och genom det få en bättre förstå­else för hur projekten ligger till, säger Wigemo.

Läs mer om hur LEQM löste det till­sammans med oss på Spinit.

Publicerat Tips
Niklas Lindwall, teknisk projektledare på Spinit

Om systemutveckling, arkitektur och Separation of Concerns, Intervju med Niklas Lindwall på Spinit

Niklas Lindwall på Spinit om hur han tänker när han förbereder och planerar inför nya stora it-projekt. Niklas har jobbat med systemutveckling i 20 år, är utbildad civilingenjör och jobbar som teknisk projektledare idag. Han brukar presentera sig som en social person som har lätt för att ta till sig saker och ting, och är öppen och nyfiken för nya tekniker.

I ett av mina möten med dig så visade du ett komplicerat Excelblad med massa flikar och beräkningar om hur lång tid ett av dina projekt skulle ta. Tror du att det skulle vara möjligt att bygga avancerade webblösningar utan hjälp av Excel?

– Nej, eller jo (skratt), många gillar ju inte att jobba i Excel, men det beror på vilka kunder man jobbar med. Om kunden är van vid att jobba i Excel så är det en fördel för att man får en bra översikt och det är lätt att göra uträkningarna inför ett projekt. Excel är ju inget vi använder när vi bygger system utan är praktisk hjälp när man skall räkna på ett projekt och ta fram en offert. När man väl har satt igång projektet så använder man inte det på samma sätt. Excel kan vara ett bra verktyg många gånger, men jag tycker inte att man ska grotta ner sig alltför mycket och bygga för avancerade modeller, då blir det ofta så att bara en person vet hur allt fungerar.

Spinit bygger och designar olika avancerade webblösningar. Var är dina tankar kring hur man ska designa hållbara webblösningar och it-system som ska kunna användas länge?

– Jag brukar alltid köra enligt mitt mantra Separation of Concerns, det vill säga att man ska tänka i moduler, där varje modul har en dedikerad uppgift så att man får mindre utbytbara micro-tjänster. Det här är något som är ganska givet i dagens arkitektur, men det har inte alltid varit lika självklart. När Spinit startade för över 20 år sedan då tänkte vi inte direkt i de banorna, då blev det mer färdiga applikationer som var lite monolitiska och slutna.

En del system gör att vi är beroende av att använda just deras produkter. Vad kan man tänka på när man bestämmer hur ett system ser ut så att man inte blir fastlåst i det i framtiden?

– Om man har mindre moduler i ett system så blir de lättare att utveckla för att man kan fördela arbetet på ett helt annat sätt och framför allt så får man inte ett beroende mellan de olika modulerna. Om man arbetar på detta sätt så får man utbytbara moduler och det blir lättare att underhålla systemet i framtiden. Detta därför att man kan byta ut en tjänst utan att behöva byta ut alla tjänster som ingår i applikationen.