Transcript Slutrapport Tillgängliga mobilgränssnitt
Slutrapport: Framtagande av riktlinjer för utveckling av tillgängliga mobilgränssnitt
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
Innehåll
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
2 (
30)
Inledning
Allt fler använder pekskärmar och traditionella mobila enheter. De flesta har förutsättningar att fungera väl för användare med funktionsnedsättning, med eller utan behov av hjälpmedel. Därmed ökar kraven på att de som utvecklar app’ar och mobilgränssnitt har kunskap om tillgänglighet och de olika behov som användarna kan ha. De internationella riktlinjerna för tillgänglighet, WCAG 2.0, som svensk offentlig sektor skall följa och många andra stora aktörer såsom banker etc följer frivilligt, saknar utvecklingsprinciper för mobila gränssnitt. Själva telefonerna har numera bra stöd för tillgänglighet, men det saknas kompetens, dokumentation och praxis både vad gäller teknisk tillgänglighet (för personer som surfar med hjälpmedel) och pedagogisk tillgänglighet (för alla, men särskilt viktigt för äldre, invandrare, teknikovana och personer med kognitiva funktionsnedsättningar, synskada, motoriska problem eller läs- och skrivsvårigheter). Projektet har kartlagt, testat och analyserat befintliga riktlinjer och mobilgränssnitt, skissat på förbättringar och testat dessa med användare samt sammanställt resultaten i form av riktlinjer fria för alla att använda men med särskilt fokus på spridning till informationsansvariga inom offentlig sektor.
Mål och syfte
Målet med projektet har varit att ta fram ett verktyg för att säkra tillgängligheten som kan användas av alla som ska utveckla mobilgränssnitt. På så sätt hoppas vi kunna bidra till att öka den totala tillgängligheten till information för personer med funktionsnedsättning och även till ökad internetanvändning via mobilgränssnitt.
Projektbeskrivning
För att komma fram till de slutliga riktlinjerna har vi valt att både genomföra inventeringar och praktiska tester. Inledningsvis har vi scannat marknaden efter alla relevanta riktlinjer som berör tillgänglighet i digitala gränssnitt eller mobila enheter. Dessa har utvärderats och relevanta delar har testats och inkluderats i de färdiga riktlinjerna. Vi har också valt att genomföra en enkätundersökning för att få veta vad användare upplever som problem och hur de använder mobiltelefoner idag. Resultatet har vi använt för att skräddarsy praktiska tester och slutligen också inarbetat i riktlinjerna. Som en del i informationsinhämtningen har vi också varit i kontakt med flera olika handikappförbund, bland annat FSDB (Förbundet Sveriges Dövblinda). Praktiska tester av befintliga gränssnitt och skräddarsydda prototyper har genomförts med användare med och utan funktionsnedsättning. Vi valde att testa befintliga gränssnitt och sedan utveckla testprototyper för att testa specifika aspekter av tillgängligheten. Exempelvis tog vi fram en prototyp för att testa klickytors storlek med olika användare. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
3 (
30)
En första version av riktlinjerna har presenterats på ett seminarium i Funkas regi och sedan funnits tillgängliga för granskning och feedback.
Leverabler
Datum 2011-06-01 2011-06-15 Projektresultat Projektstart Kartläggning 2011-09-15 2011-10-31 2011-11-30 2012-01-15 Användartester Sammanställning Tester av skisser Riktlinjer utarbetas Aktiviteter Ett urval gränssnitt och enheter för test Test av befintliga gränssnitt och enheter Resultat analyseras och bearbetas, nya skisser utarbetas för test Användartest av prototyparbete Det samlade resultatet bearbetas till begripliga riktlinjer Slutrapporten sammanställs 2012-01-31
Resultat
Slutrapport
Inventering av riktlinjer
Det finns ett flertal olika riktlinjer för utveckling av mobilgränssnitt. Det är dels systemspecifika riktlinjer, exempelvis Apples riktlinjer för utvecklingen av appar för Iphone/Ipad, dels några övergripande riktlinjer från W3C.
Systemspecifika riktlinjer
De här riktlinjerna och rekommendationerna är specifika för olika operativsystem och fokuserar delvis på exakta implementationer. De går alltså delvis djupare än de riktlinjer som det här projektet ska ta fram. Vid utvecklingen av applikationer för olika mobila enheter ska respektive riktlinjer användas, men de är inte tillräckliga för att säkra tillgängligheten utan ska användas som ett stöd för exakta implementationer snarare än som övergripande riktlinjer. Observera att nedanstående guider och riktlinjer förändras med tiden och att nya tillkommer. Detta är inte ett försök till någon komplett eller aktuell lista utan endast en uppräkning av riktlinjer som ingått som input i arbetet.
iOS Human Interface Guidelines
http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual /MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556-CH1 SW1 Riktlinjerna innehåller övergripande krav på design och implementation av appar för iOS. Den här typen av riktlinjer ska som utgångspunkt följas eftersom det skapar en igenkänning för användaren vilket i sig är positivt för tillgängligheten. Det finns enstaka rekommendationer här som försvårar ur ett tillgänglighetsperspektiv men det går oftast att kombinera tillgänglighet med riktlinjerna om de tolkas korrekt. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
4 (
30)
Ett exempel:
Riktlinjerna innehåller en rekommendation som säger ”Onscreen User Help Is Minimal” vilket kan tolkas som att gränssnittet inte bör erbjuda någon hjälp till användaren. Utgångspunkten för rekommendationen är dock att gränssnittet i första hand ska vara så enkelt att det inte behövs någon hjälp i hur man interagerar med det. Det finns flera exempel på appar som haft en interaktion som varit så svår att det krävts långa förklaringar om hur man navigerar med 2, 3 och till och med 4 fingrar. Där har användaren tvingats lära sig ett antal icke intuitiva gester för att kunna hantera gränssnittet. Detta är givetvis något som måste undvikas. Men därmed inte sagt att det inte kan finnas behov av kontextuell hjälp. Exempelvis instruktioner för hur ett formulär ska fyllas i, eller ordförklaringar till komplicerade termer i gränssnitt där innehållet inte kan göras enklare.
Accessibility Programming Guide for iOS
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/iP honeAccessibility/Accessibility_on_iPhone/Accessibility_on_iPhone.html
Information om hur man som utvecklare implementerar tillgängliga applikationer för iOS. Dokumentet har framförallt ett tekniskt fokus och mycket handlar om hur man implementerar för iOS inbyggda skärmläsare VoiceOver. Detta är ett dokument som ska följas men det räcker inte att enbart bygga i enlighet med detta, lösningen måste också testas praktiskt med åtminstone någon gravt synskadad användare som inte varit med under utvecklingsarbetet. Även om man följer riktlinjerna kan det vara svårt att förutse alla typer av problem som kan uppstå.
Android Best Practices User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html
Riktlinjer för utvecklingen av applikationer för Android. Den här typen av riktlinjer ska följas så långt möjligt, så länge de inte medför tillgänglighetsproblem. Vi har inte detaljstuderat de här riktlinjerna och kan därför inte säga exakt var det kan finnas avsteg mot tillgänglighetsriktlinjerna.
Android Best Practices Designing for Accessibility
http://developer.android.com/guide/practices/design/accessibility.html
Riktlinjer som är relativt tekniska och går ner på detaljnivå kring hur man märker upp objekt i applikationer för android. En skillnad mot Apples Accessibility Programming Guide for iOS är att många androidtelefoner har olika typer av styrknappar. Riktlinjerna här är därmed också fokuserade på att se till att dessa styrknappar kan användas.
Design Guidelines: Accessibility and Ergonomic Guidelines for Windows Mobile
http://msdn.microsoft.com/en-us/library/bb158589.aspx
Riktlinjer som på ett övergripande plan tar upp viktiga principer för utvecklingen av tillgängliga applikationer. Mycket fokus ligger på användarens möjligheter att ställa in gränssnittet, exempelvis textstorlek, samt läsbarheten i gränssnittet. Vid tiden för vårt arbete med mobilriktlinjerna var inte Windows Phone 7 möjligt att göra tillgängligt för gravt synskadade användare och därför finns det inte heller | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
5 (
30)
information om hur man märker upp knappar och element för dessa användares hjälpmedel. De riktlinjer som Funka tagit fram berörs inte av det, men som utvecklare är det viktigt att hålla ögonen öppna för nya möjligheter att tillgängliggöra applikationer för nya grupper av användare.
Design Guidelines: Usability Guidelines for Windows Mobile
http://msdn.microsoft.com/en-us/library/bb158578.aspx
En kort checklista med användbarhetskrav på Windows Mobile applikationer. Dessa är högst relevanta för tillgängligheten i applikationen men ger i dagsläget ganska lite information och hjälp till utvecklare.
Riktlinjer och rekommendationer med fokus på webb och mobila enheter Mobile Web Best Practices 1.0
www.w3.org/TR/mobile-bp/ Rekommendationer från W3C med fokus på utvecklingen av mobila webblösningar. Dokumentet togs fram 2008 med fokus på webb, alltså hur webbaserade gränssnitt ska utvecklas för att fungera bra på mobila enheter. Syftet med Funkas projekt var att ta fram riktlinjer för utveckling av mobilgränssnitt, både webb och appar. Dock finns det mycket i de här rekommendationerna som är applicerbart även om man rör sig utanför webben. Dokumentet poängterar att strävan måste vara ”one web”, alltså att samma webbgränssnitt ska kunna användas i olika enheter, både vanliga datorer och mobila enheter. Därmed inte sagt att det måste se ut likadant och fungera på exakt samma sätt, men att det ska vara samma gränssnitt i botten. Mobile Web Best Practices är delvis framtagna från WCAG riktlinjerna men WCAG riktlinjerna utgör samtidigt ett komplement till Mobile Web Best Practices. Vid utvecklingen av mobila webbgränssnitt måste man alltså ta hänsyn både till Mobile Web Best Practices och WCAG. Ett problem med rekommendationerna är att de är framtagna med utgångspunkt ur WCAG 1.0 vilka ersattes av WCAG 2.0 samma år som Mobile Web Best Practices kom ut i nuvarande version. Mycket av det som står i Mobile Web Best Practices är applicerbart även idag och bör utgöra en grund för arbetet, men innehållet här räcker inte för att säkra tillgängligheten. Det finns också exempel på rekommendationer här som har fått en klart minskad betydelse.
Exempel:
5.3.2 Page Size. Divide pages into usable but limited size portions. Ensure that the overall size of page is appropriate to the memory limitations of the device.
http://www.w3.org/TR/mobile-bp/#PAGE_SIZE_USABLE Punkten är inte lika aktuell längre. Det är bra att begränsa sidornas storlek men vi bör idag utveckla gränssnitt som ger bästa möjliga användarnytta och då är det i första hand ”one web” som bör vara utgångspunkten. Om det då visar sig innebära för tunga sidor för äldre telefoner bör det inte resultera i att vi minskar användarnyttan med | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
6 (
30)
grundgränssnittet men det kan vara tillfälle att utreda behovet av en anpassad mobil version av gränssnittet.
WCAG 2.0
www.w3.org/TR/WCAG20/ Riktlinjer för utvecklingen av tillgängliga webbgränssnitt oavsett teknik. Riktlinjerna kom ut 2008 och anger hur webbaserade gränssnitt ska vara konstruerade för att vara tillgängliga. Tanken är att riktlinjerna ska kunna appliceras på webbgränssnitt oavsett vald teknik, de ska alltså gå att använda både för vanliga html-sidor och exempelvis pdf-dokument. Riktlinjerna utgör en bra bas för tillgänglighetsområdet men de innehåller också några tillkortakommanden, inte minst när det gäller mobilgränssnitt. Exempelvis finns det i WCAG 2.0 en rekommendation kring att gränssnittet ska vara möjligt att hantera med tangentbord (2.1 – Keyboard Accessible: Make all functionality available from a keyboard - www.w3.org/TR/WCAG20/#keyboard-operation ), men det finns ingen riktlinje kring klickytors storlek. Ett vanligt problem på många webbplatser är att det i vissa funktioner och menyer krävs att användaren har god precisionsförmåga för att kunna klicka rätt. Det här problemet blir ofta större i mobila enheter som inte sällan används när användaren är i rörelse. Stora, tydliga träffytor underlättar och är för en del användare en förutsättning, men det finns det som sagt inget stöd för i WCAG 2.0. Det finns inte heller något som säger att det ska vara möjligt att komma åt all funktionalitet via en pekskärm vilket är grundläggande för utvecklingen av tillgängliga mobilgränssnitt. Ett vanligt avsteg idag är att menyer fäller ut sig när muspekaren vilar över en länk/knapp. Dessa kan ibland utformas så att de går att hantera med tangentbordet, men utan att det går att hantera med en pekskärm. WCAG 2.0 ska användas som en bas för att ta fram tillgängliga mobila webblösningar och bör delvis även appliceras på appar, men riktlinjerna är inte tillräckliga i sig själv. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
7 (
30)
Enkät till användare
Som verktyg för att samla in användarnas erfarenheter har vi använt oss av en webbenkät. Enkäten har varit öppen för alla att svara på men vi har också gjort riktade utskick till en del handikapporganisationer, bland annat till Förbundet Sveriges Dövblinda (FSDB). Enkätfrågorna presenteras i Bilaga 1. Förfrågan om att delta i enkätundersökningen skickades ut via Funkas upparbetade kanaler och nätverk. Därmed kan vi anta att det finns en överrepresentation av användare med funktionsnedsättning och att det finns en klar överrepresentation av personer som jobbar med IT på ett eller annat sätt. Syftet med enkäten var inte att få representativa siffror för befolkningen i stort utan att identifiera svårigheter och problem, något vi bedömer är lättare att göra om man frågar de användare som har de största problemen och de användare som har de största erfarenheterna.
Resultat av enkäten Bakgrundsinformation
Totalt svarade 146 personer på enkäten. Av dessa använde 78,1% en smartphone. Andelen som använder en smartphone är alltså betydligt större i vår enkät än i befolkningen i stort. De som väljer att svara på en sådan här enkät kan antas vara intresserade av frågan om mobilgränssnitt och då framförallt pekskärmsgränssnitt. Så här fördelar sig svaren angående operativsystem i mobiltelefonen:
Operativsystem
iOS (Iphone) Android Windows Mobile
Antal
63 38 5
Procent %
43.4% 26.2% 3.4% | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
8 (
30)
Operativsystem
Symbian Annat Vet inte
Antal
15 7 17
Procent %
10.3% 4.8% 11.7% Bland de svarande finns det en bra representation från användare som använder iOS, Android och Symbian. Idealt skulle vi haft med något fler som använder Windows Mobile. På frågan om man använder någon form av hjälpmedel är det 9 som uppger att de använder talsyntes eller skärmläsare. Dessa är troligen gravt synskadade, men man skulle kunna tänka sig att någon med lässvårigheter också finns i denna grupp. Ungefär lika många använder förstoring i olika situationer. En person uppgav stavningskontroll (men att den inte fungerade så bra). En person uppgav att mobilen i sig är ett kognitivt hjälpmedel.
Användningen
Hur mycket använder du din mobiltelefon till följande? a. Ringa med b. Skicka och ta emot SMS c. Få fram trafikinformation (exempelvis vägverket eller SJ) d. Navigera med (exempelvis GPS) Aldrig 1.4%
2
Någon gång i månaden 2.8%
4
1.4%
2
4.1%
6
19.4%
28
26.2%
38
e. Att lyssna på musik, ljudböcker eller se på film med (utan uppkoppling) g. Sociala medier, exempelvis Facebook eller Twitter 24.7%
36
f. Att lyssna på musik/ljudböcker över nätet med (exempelvis Spotify) 38.9% eller se på TV/film (exempelvis SVT Play)
56
26.2%
38
38.9%
56
31.7%
46
24.7%
36
9.7%
14 12
8.3% h. Läsa tidningar i. Banktjänster j. Som hjälp vid nödsituationer 28.5%
41
53.5%
77
68.6%
96
14.6%
21
13.2%
19
25.7%
36
Någon gång i veckan 5.5%
8
9.0%
13
Flera gånger i veckan Dagligen 13.8%
20
76.6%
111
26.9%
39
58.6%
85
16.0%
23
20.0%
29
16.7%
24
19.3%
28
9.0%
13
2.8%
4
16.4%
24
17.4%
25
6.2%
9
8.3%
12
16.0%
23
3.6%
5
16.4%
24 30 14
20.8% 9.7% 13.9%
20
13.9%
20
0.0%
0
17.8%
26 19
13.2% 49.7%
72
34.7%
50
3.5%
5
2.1%
3
Siffrorna i grått visar antalet respondenter som angett detta alternativ.
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
9 (
30)
Värt att notera är att nästan hälften av de som svarat använder mobilen dagligen till Sociala medier. Av de svarande uppgav hela 64 % att de använder mobilen en gång om dagen eller oftare för att surfa med.
Hur ofta använder du din mobiltelefon till att surfa med?
Flera gånger om dagen Cirka en gång om dagen Några gånger i veckan Några gånger i månaden Mer sällan Aldrig
Antal
80 13 14 15 10 13
Procent %
55.2% 9% 9.7% 10.3% 6.9% 9% Endast 9 % uppger att de aldrig använder mobilen för att surfa med. Återigen återspeglar siffran vilka typer av användare som svarat, för befolkningen som helhet är naturligtvis siffran högre.
Har du laddat ner någon app till din mobiltelefon?
Ja, många som jag använder dagligen Ja, några som jag också använder ganska ofta Ja, någon som jag använder ibland Ja, men jag använder den/dem inte Nej, jag har inte känt något behov Nej, jag kan inte ladda ner någon till den här mobilen
Antal
68 30 17 3 5 22
Procent %
46.9% 20.7% 11.7% 2.1% 3.4% 15.2% Endast 18,6 % uppger att de inte laddat ner någon app till mobiltelefonen. Siffran motsvarar ganska väl antalet svarande som inte har en smartphone (21,9 %).
Hur ofta använder du din mobiltelefon för att surfa eller använda en app i följande situationer?
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
10 (
30)
a. Hemma i lugn och ro b. Utomhus, när jag sitter ner c. Utomhus, när jag är ute och går d. På kontoret e. På bussen/ tåget/ tunnelbanan/ spårvagnen f. När jag åker bil g. När jag kör bil h. När jag cyklar i. På krogen/restaurang Aldrig Någon gång i månaden Någon gång i veckan Flera gånger i veckan Dagligen 11.2%
16
16.1%
23
11.2%
16
13.3%
19
48.3%
69
15.4%
22
14.0%
20
16.1%
23
25.2%
36
29.4%
42
27.0%
38
23.9%
34
22.7%
32
28.1%
39
14.2%
20
10.6%
15
18.4%
26 49
35.3% 19.9%
28
12.7%
18
12.1%
17 25
18.0% 17.7%
25
14.1%
20
17.0%
24 14
10.1% 21.3%
30 55 42 12
38.7% 29.8% 8.6% 75.7%
106
78.4%
109
34.8%
49
12.1%
17
13.7%
19
41.1%
58
5.7%
8
5.0%
7
16.3%
23
4.3%
6
1.4%
2
5.0%
7
2.1%
3
1.4%
2
2.8%
4
Siffrorna i grått visar antalet respondenter som angett detta alternativ.
De vanligaste situationerna där man använder sin mobil för att surfa med är i hemmet eller på kontoret. Värt att notera är också att något fler surfar när de kör bil än när de cyklar. I efterhand kunde vi konstatera att frågan troligen borde ha formulerats annorlunda. För att exempelvis svara att man använder mobilen på krogen/restaurang dagligen krävs det att man är på krogen/restaurang dagligen. De flesta går inte på korgar och restauranger dagligen, men snarare några gånger i veckan och med det i åtanke visar siffrorna att det också är en vanlig situation där mobilen används. På den här frågan kunde man även ange andra situationer då man surfade. Några situationer som flera svarande angav var: På toaletten När jag sitter och väntar På föreläsningar, seminarier och möten Det vi tar med oss från de här siffrorna är att man använder sin mobiltelefon överallt. Det tycks knappt finnas någon situation då människor inte använder mobilen.
Om du använder mobiltelefonen för att besöka webbplatser, använder du då oftast webbplatsens mobilversion (om en sådan finns) eller försöker du använda den vanliga webbplatsen?
Jag vet inte
Antal
24
Procent %
17.1% | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
11 (
30)
Jag försöker främst använda mobilversionen Jag försöker främst använda den vanliga webbplatsen Det beror helt på vilken webbplats det gäller
Antal
62 19 35
Procent %
44.3% 13.6% 25% Hela 44.3 procent föredrar mobilversionen. På den efterföljande frågan fick de svarande ange vad som avgör att de väljer en viss version. Bland svaren finns en tydlig trend att man föredrar mobilversionen eftersom den oftast är enklare att använda och snabbare, men att den ska innehålla samma information som den vanliga webbplatsen för att man ska vilja använda den. Användarna vill alltså inte ha allt innehåll, men i enklare och bättre anpassat efter mobiltelefonens egenskaper. De som väljer den vanliga webbplatsen uppger också att man gör det eftersom innehållet är ”bättre”. Det finns enligt de som svarat också ett problem med mobilwebbplatser som förkortar informationen för mycket. Exempelvis svarade en person att rubrikerna i DN:s mobilversion är så förkortade att man i princip måste klicka på var och en för att avgöra vad de egentligen handlar om. Värt att notera är också att enstaka individer använder mobilversionen även på en vanlig dator eftersom den upplevs som enklare. Slutligen så stänger 16 % av de svarande ibland av bildvisningen i mobilen för att exempelvis minska laddningstiden.
Rapporterade problem
I tabellen nedan fick de svarande ange hur stora de olika problemen upplevdes.
a. Att se på skärmen när du är ute b. Att höra vad som sägs i telefonen när du är ute c. Att styra mobilen när du är i ett fordon som du inte kör själv (bil, tåg, buss, spårvagn, tunnelbana osv.) d. Att styra mobilen när du är i ett fordon som du kör själv Inte Inga aktuellt problem Vissa problem Besvärligt Mycket svårt 3.5%
5
22.2%
32
39.6%
57
22.2%
32
9.7%
14
Går inte alls 2.8%
4
2.1%
3
4.9%
7
50.0%
72
e. Att skriva med mobilen när du sitter ner i en lugn miljö 2.8%
4
f. Att skriva med mobilen när du är ute, rör på dig eller gör något annat samtidigt 9.0%
13
46.2%
67
63.2%
91
4.9%
7
66.9%
97
13.2%
19
41.4%
60
24.3%
35
13.2%
19
26.2%
38
43.8%
63
8.3%
12
5.6%
8
11.8%
17
4.1%
6
23.6%
34
2.1%
3
2.1%
3
16.7%
24
0.0%
0
6.3%
9
0.0%
0
0.0%
0
3.5%
5 0 6
0.0% 4.2% g. Att styra telefonen med röstkommandon i offentliga miljöer 76.4%
110
3.5%
5
6.3%
9
7.6%
11
3.5%
5
2.8%
4 | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
12 (
30)
h. Att klicka på objekt på skärmen i appar i. Att klicka på knappar och länkar på webbsidor Inte aktuellt Inga problem Vissa problem Besvärligt Mycket svårt 19.4%
28
56.3%
81
18.1%
26
4.2%
6
2.1%
3
Går inte alls 0.0%
0
9.8%
14
23.1%
33
49.0%
70
14.7%
21
3.5%
5
0.0%
0
Siffrorna i grått visar antalet respondenter som angett detta alternativ.
Störst problem var det inte helt oväntat att styra mobilen samtidigt som man kör. Mer intressant är att konstatera att så många som var tredje som svarade uppgav att det är besvärligt, mycket svårt eller omöjligt att se innehållet på skärmen utomhus. Ungefär lika många tycker att det är besvärligt, mycket svårt eller omöjligt att skriva på mobilen när man är ute, rör på sig eller gör något annat samtidigt. Endast 6,3 % uppgav att det är besvärligt eller mycket svårt att klicka på objekt på skärmen i appar medan motsvarande siffra för webbplatser är 18,2 %, alltså nästa 3 gånger så hög. Här fanns också en öppen fråga kring andra upplevda problem. Några svar är värda att notera: ”Fingrarna är för stora”, är en vanlig kommentar både här och i våra praktiska tester. Det är många som rapporterar att det är svårt med små klickytor/knappar och att det är lätt att ”komma åt” att klicka när det inte är meningen. Flera olika personer noterade problem vid surfande på webbplatser, exempelvis: o att täckande lager lägger sig över objekt på webbsidor man besöker o att det öppnas många nya fönster o lång laddningstid o att det är svårt att zooma o ologiska menyer o vissa funktioner fungerar inte på webbsidor när de visas i en mobil Knappar och funktioner är placerade inkonsekvent i olika gränssnitt. Att det inte går att zooma i många appar samtidigt som texten upplevs som liten. Det är problem för vänsterhänta då många gränssnitt är optimerade för att styra med höger tumme. Svårt att använda mobilen med en hand.
Bra och dåliga gränssnitt
De som svarade på enkäten uppmanades att ge exempel på applikationer och webbplatser som fungerar bra. Bland de som nämns ofta finns: Facebooks app Swedbanks app | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
13 (
30)
Handelsbankens app SMHI SR Play:s app SVT Play:s app Google Aftonbladet mobilversion av webbplatsen SVD mobilversion av webbplatsen De svarande uppmanades även att ge exempel på applikationer och webbplatser som fungerar dåligt. Bland de som nämns ofta finns: DN Eniro Flashbaserade (exempelvis ATG.se) Vanliga webbplatser som är stora och kräver mycket zoom, exempelvis Aftonbladet Analyserar vi svaren syns ett tydligt samband. Enkla, rena, avskalade gränssnitt med tydliga funktioner och bra klickytor upplevs som enkla och bra, medan omfattande, röriga och tunga gränssnitt upplevs som ett problem.
Slutsatser från enkätundersökningen
Mobilen används i alla tänkbara och otänkbara situationer. Det går inte att göra antaganden om i vilken miljö användaren befinner sig eller hur mycket uppmärksamhet man kan ägna åt mobilen medan man använder den. Exempelvis använder en del den för att surfa med samtidigt som de kör bil och cyklar. Nästan hälften föredrar en mobilversion om det finns. Avgörande är att den innehåller samma information som den vanliga webbversionen, utan att förkorta för mycket men med en enklare navigation och ett enklare, renare upplägg. Detta återspeglas också i de exempel som vi fått in på bra och dåliga gränssnitt. Bra gränssnitt är oftast avgränsade, enkla, med tydliga funktioner. Stora, tunga webbsidor med mycket reklam och många saker som händer anges fungera dåligt och vara problematiska. Något som många anger är ett problem är att se innehållet på skärmen ute. Det återkommer också i att många upplever allt zoomande som ett problem. Man vill kunna zooma men det ska inte behövas så mycket zoom. Det är färre som uppger att man har problem med att klicka i olika situationer, men värt att notera är att när de svarande ska skriva ner vad som kan vara svårt nämner de flesta just att det kan vara svårt att klicka på små objekt. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
14 (
30)
Praktiska tester
För att få en mer fullständig bild av användningen av mobilgränssnitt har vi genomfört intervjuer och praktiska tester med personer med funktionsnedsättningar. Vi har i testerna använt oss av personer med följande funktionsnedsättningar: Motoriska funktionsnedsättningar Grav synnedsättning Synsvaga Dövblinda Dyslexi Vi har genomfört praktiska tester i kontorsmiljö och utomhus, med användare i gatumiljö och i kollektivtrafiken. I de praktiska testerna har vi använt: Vanliga webbplatser med mycket information, exempelvis www.expressen.se
Mobilversioner av vanliga webbplatser, exempelvis mobil.eniro.se
Webbgränssnitt byggda med Responsive Design som ska fungera bra både på vanliga datorer och i mobiler, exempelvis www.svt.se/ug Applikationer för Ipone och Androidtelefoner, exempelvis DN:s applikation för Iphone och Swedbanks app för Android Egenutvecklade prototyper/testgränssnitt för att testa specifika saker, exempelvis använde vi ett gränssnitt för att testa hur små objekt användaren kunde klicka på i olika situationer.
Figur 1: Gränssnitt där användaren skulle klicka på den mittersta ikonen i grupperna för att se hur god precisionen var i olika situationer.
Testpersonerna har i första hand fått testa med sina egna mobila enheter. Testerna har totalt sett inkluderat: | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
15 (
30)
iPhone 4, Samsung Galaxy SII Samsung Galaxy mini Google Nexus One Sony Ericsson Experia Arc Ipad
Resultat av de praktiska testerna Skärmläsare för gravt synskadade
En skärmläsare är ett program som omvandlar det som visas visuellt till tal, via en talsyntes eller punktskrift via en punktskriftsdisplay. Den används av gravt synskadade användare men också en del användare med kognitiva funktionsnedsättningar eller lässvårigheter/dyslexi. I och med en ny generation hjälpmedel för gravt synskadade användare i pekskärmsmiljöer är det numera möjligt för en gravt synskadad användare att uppfatta layout och design på ett sätt som tidigare inte varit möjligt. Det sätt som en individ med grav synskada nu uppfattar ett pekskärmsgränssnitt påminner mycket om hur synsvaga med förstoring interagerar med vanliga digitala gränssnitt. En person med förstorande hjälpmedel ser bara en liten del av skärmen åt gången och måste scanna av gränssnittet. På samma sätt ser nu en person med grav synnedsättning bara det som fingret vilar på för stunden, och måste då scanna av gränssnittet med fingret.
Figur 2: Illustration över hur lite man ser av en webbsida vid förstoring. En del användare sitter med förstoringar som gör att de bara ser ett par bokstäver åt gången.
Fördelen är att det nu går att få en överblick över hur sidan är visuellt uppbyggd och organiserad, men det skapar också nya svårigheter för användargruppen: Det är lätt att missa objekt som är små Det är lätt att missa objekt i övre högra hörnet Det är lätt att missa objekt som ligger tätt Det är omöjligt att veta om man missat något. Skärmläsare för gravt synskadade läser normalt sett upp rad för rad i koden. Det gör att användaren sällan missar något på sidan, hjälpmedlet hoppar inte självmant över | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
16 (
30)
objekt. Men när skärmläsaren ger feedback på det användaren pekar på är det lätt att missa objekt.
Figur 3: Illustration över området en blind användare i första hand scannar av.
Det gröna området visar vilken del av skärmen gravt synskadade användare tenderar att scanna av. Objekt i de vita områdena missade användaren oftast. Området påminner om hur seende användare ser en webbsida på en vanlig skärm, objekt till höger och upptill ignoreras ofta.
Klickytor
Klickytans storlek är viktig men den upplevdes oftast inte som något problem i vanliga applikationer. I webbgränssnitt däremot är det ibland ett problem, främst för användare med nedsatt motorisk förmåga i händerna och användare som ser dåligt men som inte använder skärmläsare.
Att styra enheten
En del användare vi testat med har enbart möjlighet att använda ett finger i taget. En hel del funktionalitet kräver samtidigt användande av flera fingrar, exempelvis används ofta två fingrar som förs ihop/isär för att zooma in/ut. För användare som har svårt att använda mer än ett finger åt gången blir detta svårt eller omöjligt. Några mobiler erbjöd knappar med samma funktion i gränssnittet och då var det enklare. I takt med att gränssnitten blir mer omfattande och funktionsspäckade ökar också de olika typer av gester som ska utföras för at styra programmet. Men det måste vara en utgångspunkt att så mycket som möjligt ska fungera med ett finger.
Läs- och skrivsvårigheter
De flesta användare upplever svårigheter att skriva på mobila enheter. Det går inte lika snabbt och det blir oftare fel än om man skriver på ett vanligt tangentbord. Det har också gjort att tillverkarna bygger in funktioner som till exempel ordprediktion (telefonen gissar vad det är du försöker skriva och föreslår ord). Problemen är olika stora för olika grupper men i princip gäller samma riktmärke vid utvecklingen av gränssnitt:
Undvik textinmatning, och om det krävs, hjälp användaren så mycket du kan.
För personer med lässvårigheter innebär mobila enheter ofta ett problem. Dels saknas många gånger bra inställningsmöjligheter för färg, typsnitt och textstorlek, dels saknas bra hjälpmedel för uppläsning. Medan det finns flera hjälpmedel för gravt synskadade användare som verkligen hjälper användaren är det relativt få uppläsande hjälpmedel för personer med lässvårigheter och de som finns tenderar att erbjuda en uppläsning av | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
17 (
30)
hela sidan utan möjlighet att hoppa i texten och utan möjlighet att få den upplästa texten markerad så att det går att följa med, med ögonen. Dessutom innebär visningen i en mobilenhet att bilder ofta blir problematiska. Det är svårt att hantera innehållsrika bilder på små skärmar, antingen måste användaren zooma väldigt mycket och tappar då överblicken, eller så visas bilden i ett ganska litet format. Att använda bilder som komplement till text är normalt sett ett viktigt och väl fungerande sätt att hjälpa alla användare, men speciellt personer med läs- och skrivproblem, att ta till sig innehållet.
Utformningen och placeringen av objekt
Hur objekt placeras visar sig vara viktigt. Många användare föredrar att hålla telefonen i en hand och att använda tummen för att komma åt de viktigaste funktionerna. Det innebär större svårigheter att nå övre delen av skärmen liksom det nedre högra hörnet för högerhänta och nedre vänstra hörnet för vänsterhänta.
Figur 4: Illustration över området på skärmen som är enklast att nå (grönt) med höger tumme om man håller mobilen med en hand.
Ikoner placeras ofta på rad längst ner på skärmen, framförallt gäller det för Iphone. Det behöver inte vara något problem. Om man exempelvis lägger in tre ikoner som får en tredjedel av skärmen var längst ner så fungerar det relativt väl ändå eftersom klickytan blir relativt stor. Problem uppstår däremot om det blir många ikoner, som var och en får en mindre del av skärmbredden. Placering av ikoner och knappar högst upp är ofta ett större problem än att de ligger längst ner eftersom det ofta är svårt att nå högt upp när man använder mobilen med bara en hand, det är helt enkelt svårt att hålla mobilen stadigt i handen och strecka ut tummen till övre delen av skärmen. Funktioner här uppe bör i första hand vara mindre använda, exempelvis kan en ikon för att komma till applikationens inställningar läggas i övre raden, medan bläddring mellan sidor bör ligga längre ner.
Responsive design
I gränssnitt som använder ”Responsive design” eller ”Responsive web design” (gränssnittet anpassar sig efter skärmens storlek) ändras ofta ytors position beroende på skärmstorlek. Det gör att exempelvis högerspalter kan flyttas ner under innehållet. Detta skapar svårigheter om högerspalten används för relaterad information till ett innehåll | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
18 (
30)
med flera olika informationsdelar. Det kan vara svårt att förstå vilken del av högerspalten som hör till vilken del av huvudinnehållet när högerspalten plötsligt ligger nedanför innehållet. Problemet påminner mycket om det problem gravt synskadade användare länge haft på webbplatser, men blir här extra framhävt då det plötsligt blir ett problem för alla användare. Det visade sig också viktigt vad som händer med objekt som ändrar teknisk lösning beroende på skärm eller enhet. Exempelvis ändrar en del webbplatser menyn och lägger den i en dropdown lista om skärmbredden blir för liten. Användarna tycks förstå och kunna hanterar detta under förutsättning att listan får en bra uppmärkning. Däremot har det visat sig skapa större problem om objekt döljer sig bakom en knapp när ytan blir för liten. Knappens position, konstruktion, utformning och funktion skapar ofta problem som gör att exempelvis gravt synskadade inte kan hitta eller aktivera listan samt att ovana användare/stressade användare får svårt att hitta och identifiera den.
Slutsatser
Viktiga aspekter för användarna: Ju färre och tydligare objekt desto lättare att hantera. Det är viktigare att tänka först-sist än att tänka vänster-höger. Prioriteringen av områden/objekt på skärmen blir mycket viktig. Uppmärkningen av knappar, formulär, bilder och länkar är mycket viktig för användarens förmåga att hantera gränssnittet. Viktiga objekt bör vara stora och placerade så att de upptar en betydande del av skärmbredden (höjden är inte lika viktig). Placera inte frekvent använda ikoner/knappar i översta raden, använd övre delen av fönstret för mindre frekventa ikoner, statusmeddelanden och liknande. Minimera behovet att zooma. Undvik gränssnitt som kräver scroll i sidled för att läsa innehållet. Gör det möjligt att styra så mycket som möjligt med ett finger, det kan exempelvis innebära att en del funktioner döljs under en meny, alltså att det krävs två tryckningar för att utföra dem. Placeringen av relaterad information blir viktig om gränssnittet anpassar layouten efter skärmbredd. Om sidan är lång kan relaterade objekt (exempelvis länkar) i högerspalten behöva delas upp i flera områden som skjuts in på olika ställen i texten när innehållet flödar om i en smalare skärm, så att inte användaren måste scrolla långt för att hitta de relaterade länkaran till den notisen användaren för stunden läser. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
19 (
30)
Riktlinjer för utveckling av tillgängliga mobilgränssnitt
Val av lösning
1.
Se till att din grundwebbplats fungerar på mobila enheter
Den behöver inte fungera optimalt, men den ska vara så enkel som möjligt och all funktionalitet ska så långt praktiskt möjligt gå att hantera via ett mobilgränssnitt. Exempel på vanliga problem här är menyer som kräver att muspekaren vilar över ett menyalternativ för att fälla ut en undermeny. En bra strategi är ”mobile first”, alltså att utformningen av gränssnittet utgår ifrån visning i en mobil.
2.
Tvinga inte användaren att använda en mobilversion men erbjud gärna en sådan om grundwebbplatsens sidor är stora eller funktionerna komplexa
Många användare föredrar en mobilversion av webbplatser. Det gäller inte minst om webbplatsen är omfattande och innehåller många grafiska objekt. Det kan därför finnas skäl till att erbjuda en mobil version, men tvinga inte användaren att använda mobilversionen. Erbjud länkar mellan de olika versionerna och kom ihåg användarens val.
3.
En eventuell mobilversion av webbplatsen ska så långt möjligt ge användaren tillgång till samma information och tjänster som den vanliga webbplatsen om det inte är en uttalad mobilversion av en specifik avgränsad tjänst/funktion
Om du erbjuder en mobil version av webbplatsen så ska den gå att använda för att göra och läsa samma saker som på den vanliga webbplatsen, men i ett enklare format där exempelvis stora mängder information och tillval göms i första läget i stället för att alltid ligga synligt. Ett undantag kan vara om det är en mobilversion av en tjänst/funktion, exempelvis en biljettbokning hos ett reseföretag. Då ska mobilversionen ses som ett enklare alternativ till denna tjänst/funktion.
4.
Skapa applikationer för klart avgränsade funktioner som en användare kan behöva tillgång till ofta
Applikationer (appar) fungerar i första hand bra för klart avgränsade uppgifter, till exempel för att visa aktuell trafikinformation/störningar. Applikationen bör i första hand vara skapad för väl avgränsade uppgifter som en användargrupp kan tänkas behöva utföra/nå ofta.
Konstruktion
5.
Följ WCAG 2.0 utom där de här riktlinjerna motsäger WCAG 2.0
WCAG 2.0 appliceras i första hand på webbgränssnitt men flera delar av riktlinjerna kan också appliceras för applikationer, exempelvis framgångskriterier som handlar om uppmärkning av icke-textobjekt samt framgångskriterier om kontraster.
6.
Vid skapande av applikationer för specifika enheter ska eventuella design- och tillgänglighetsriktlinjer följas så länge dessa inte motsäger de här riktlinjerna
Om det finns specifika riktlinjer för utveckling av applikationer för den valda | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
20 (
30)
enheten/operativsystemet så ska dessa följas, exempelvis ska Apples riktlinjer följas vid utvecklingen av applikationer för Iphone.
7.
Om du utvecklar en applikation för en specifik plattform ska denna stödja de för plattformen karakteristiska egenskaperna
Till exempel ska det så långt möjligt gå att zooma in/ut via att knipa/dra isär två fingrar. Många användare är vana vid detta sätt att interagera på pekskärmar och det är därför viktigt att erbjuda möjligheten om det är praktiskt möjligt. Tänk dock på att det också måste finnas möjlighet att göra den typen av inställningar med ett finger, så för just exemplet med knipande rörelser med två fingrar så bör gränssnittet också erbjuda ett alternativ för att zooma, exempelvis två knappar för att zooma in och ut. På Androidtelefoner finns oftast fysiska knappar som ska fungera på ett för användaren invant sätt, medan telefoner med iOS i stället använder mjukvaruknappar längst ner på skärmen.
8.
Märk upp grafiska element, ikoner och knappar med deras motiv eller funktion
På webbsidor ska meningsbärande bilder ha en alt-text, på samma sätt ska bilder och knappar i applikationer förses med en beskrivning. Exakt hur det görs varierar i de olika operativsystemen.
9.
Varje formulärobjekt ska antingen ha en ledtext eller en beskrivning
Formulärobjekt, exempelvis textfält, radioknappar och kryssrutor, ska så långt möjligt ha en synlig ledtext som kopplas till formulärfältet på ett korrekt sätt. På webbsidor görs detta med elementet label. Om en ledtext inte kan ge hela instruktionen kan formulärobjektets title-text användas för att ge användaren information. Dock måste instruktionen alltid även finnas visuellt synlig på sidan, eftersom användare utan skärmläsare i de flesta mobila enheter inte kan få fram en title-text.
10.
Använd inte ramar i webbgränssnitt
Ramar (frames) eller inline-ramar (iframes) fungerar dåligt i många mobila enheter och ska därför undvikas. Om en iframe måste användas för en tjänst bör du så långt möjligt också erbjuda användaren en länk för att visa funktionen i ett eget fönster utan ramar. Man kan till exempel tänka sig en integration av en karta i en iframe på den vanliga webbsidan, men samtidigt ge användaren en länk för att visa kartan i ett eget fönster utan ramar.
11.
Hjälp användaren vid inmatning genom att anpassa det virtuella tangentbordet efter vad som ska matas in
I webbaserade gränssnitt kan detta åstadkommas genom att använda html5 för att markera olika typer av inmatningsfält, exempelvis telefonnummer, e-post, eller text.
12.
Minimera användningen av script på klientsidan
Mobila enheter har ofta sämre prestanda än vanliga datorer och användningen av många script kan orsaka problem. Kräv inte mer av enheten än vad som är nödvändigt.
13.
Genomför praktiska tester av lösningen
Oavsett hur väl man följer riktlinjerna vid utvecklingen av en ny applikation eller | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
21 (
30)
ett nytt webbgränssnitt som ska fungera för mobila enheter är komplexiteten större. Det skapar tillgänglighetsproblem som kan vara svåra att förutse. Man ska därför alltid testa lösningen praktiskt med personer som inte varit med vid utvecklingen. Man bör alltid inkludera testpersoner med funktionsnedsättningar i användartester och låta tillgänglighetsexperter tolka resultatet.
Layout och design
14.
Positionera viktiga saker högre upp och mindre viktiga saker längre ner i scrollande vyer
Eftersom skärmarna ofta är mindre på mobila enheter bör den viktigaste informationen positioneras högt upp för att se till att den syns utan att det krävs scroll. Men tänk också på att det är svårt att nå att klicka på objekt allra överst på skärmen. Viktig interaktion bör alltså inte ligga allra överst.
15.
Gruppera delar som hör ihop
Detta gäller generellt men blir extra viktigt att hantera vid utveckling med Responsive design. På många webbplatser ligger relaterade länkar till höger vilket ofta funkar när det visas på en stor skärm. Om mindre skärmar får högerspalten att åka ner under innehållsspalten kan det däremot bli mycket scroll för att hitta relaterade länkar till en del av innehållet. Då bör sidan så långt möjligt flöda om på ett sätt så att den relaterade informationen positioneras direkt efter det område det är relaterat till i stället för att allt relaterat material placeras tillsammans längst ner.
16.
Sträva efter att skapa en ren design och minimera antalet ”onödiga” objekt
Ett stort problem är sidor som innehåller många objekt som inte användaren upplever som intressanta/viktiga för användningen. Webbplatser som utformats för visning på vanliga datorer med skärmar med hög upplösning inbjuder till en design med många objekt och områden. När sådana sidor visas på en liten skärm skapas stora problem för användaren eftersom sidan tar lång tid att ladda och kräver mycket scroll. Om en sida exempelvis har en högerspalt med reklam bör denna flödas om på en mindre skärm och läggas sist, om den inte går att ta bort helt.
17.
Sträva efter att göra sidhuvudet litet
I mobila enheter är det ofta problem med mycket scroll. Genom att minimera sidhuvudet kan du minska problemet samtidigt som menyer och innehåll kan göras synligt direkt när sidan laddas.
18.
Skapa stora klickytor
Eftersom enheternas skärmstorlek, dpi och upplösning varierar går det inte att ange ett exakt mått. Det är också skillnad på en webbsida och en applikation, men sträva efter att klickytan åtminstone ska vara brödtextens radhöjd åt ena hållet och brödtextens radhöjd * 3 åt andra hållet. En ikon i en app bör ha en bredd och höjd på minst 9 millimeter.
19.
Lägg inte ofta använda knappar ute vid höger-/vänsterkanten om de inte upptar minst en tredjedel av skärmbredden
Viktiga knappar bör i första hand placeras centralt och relativt långt ner på skärmen eftersom det är svårt att trycka på knappar ute vid kanten för | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
22 (
30)
användare som bara använder en hand eller som måste balansera mobilen på ett knä för att kunna använda den. Det gäller exempelvis användare med nedsatt motorisk förmåga som kan ha svårt att hålla i telefonen.
20.
Högerjustera inte knappar, funktioner eller grupper med knappar och funktioner om inte gruppen med knappar/funktioner sträcker sig över minst 75 % av skärmen i alla lägen
Användare som inte ser sidan använder pekfingret för att scanna av gränssnittet. Telefonen läser upp det användaren pekar på. Detta görs mest naturligt uppifrån övre vänstra hörnet och nedåt på sidan. Knappar som ligger långt ute till höger utan att det finns något annat på samma rad blir mycket svåra att upptäcka.
21.
Orientera knappar och länkar på tydliga rader (horisontellt och vertikalt)
Det gör det lättare för användare som inte ser gränssnittet att hitta dem. Hittar användaren en knapp blir det lättare att hitta de andra knapparna också. Detta skapar också en tydligare visuell överblick för seende användare.
22.
Ledtexter till inmatningsfält ska i första hand positioneras ovanför fältet
Undantag för kryssrutor och radioknappar där texten kan ligga till höger om knappen/rutan. Grupper med radioknappar och kryssrutor ska dock ha en överskrift inlagd som anger vad gruppen har för funktion. Denna ska positioneras ovanför gruppen med radioknappar/kryssrutor.
23.
Radlängder ska anpassas efter skärmbredden men alltid hålla sig till max 70 tecken per rad inklusive mellanslag
Det ska så långt som möjligt inte krävas scroll i sidled för att läsa en rad i innehållet. Samtidigt bör inte radlängden bli så kort att enskilda ord måste delas upp på flera rader om det inte är en naturlig brytning, exempelvis ”innehålls- förteckning”. Målsättningen bör vara radlängder som håller sig till 55-60 tecken inklusive mellanslag per rad.
24.
Begränsa informationsmängden och antalet objekt som visas
För att underlätta för användare med små bildskärmar är det bra att begränsa mängden objekt och text som visas. Det betyder inte att du ska ta bort delar, men det kan underlätta för användaren om du döljer delar i exempelvis så kallade dragspelsfunktioner (du klickar på en rubrik för att fälla ut den underliggande informationen). Då får användaren en snabb överblick men också enkel tillgång till all eventuell information och funktionalitet. Ett annat sätt att dölja objekt är att lägga menyer och länkgrupper i utfällande menyer. Tänk dock på att funktionaliteten måste vara tydlig, det ska vara intuitivt för användaren att få fram dolda delar.
25.
Använd kända ikoner
Uppfinn inte egna utseenden på vanliga ikoner, utan återanvänd utseenden som användaren har en chans att känna igen sedan tidigare.
26.
Utforma klickbara objekt så att de ser klickbara ut
Utforma länkar så att de ser ut som länkar. Använd inte enbart färg för att visa att något är länkat. Länkarna blir då bland annat svåra att uppfatta i direkt | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
23 (
30)
solljus. Gör knappar tredimensionella och återanvänd kända utformningar och placeringar av ikoner.
27.
Använd höga kontraster
Många användare uppger att det är svårt att se det som visas på skärmen när mobilen används i direkt solljus. För att underlätta användandet är det viktigt att alltid sträva efter att ha bra kontraster. Brödtext och text till ikoner bör så långt som möjligt presenteras som svart text på vit bakgrund, eller tvärtom, om inte texten är stor eller kan zoomas. Text som kan zoomas eller som i utgångsläget är stor bör minst följa WCAG 2.0:s strängare punkt, 1.4.6.
28.
Det ska vara möjligt att använda gränssnittet i både stående och liggande visning
Interaktion
29.
Använd enkla navigationskoncept
När en webbsida visas på en vanlig skärm finns det ofta gott om plats att låta navigationen ta stora ytor i anspråk. Ett exempel på det är så kallade megamenyer som ofta visar 2-3 nivåer i menystrukturen samtidigt. I mobila enheter fungerar detta dåligt. Här behöver menyerna utformas så att de tar lite plats och har en visuellt tydlig uppställning. För en webbtjänst som ska fungera både på en dator och i en mobil enhet kan det då i vissa lägen finnas behov av att låta menyn visas på olika sätt beroende på skärmbredden.
30.
Om du utvecklar en applikation för ett operativsystem eller en mobil enhet som kan ha styrknappar (exempelvis piltangenter och en ok-knapp) ska dessa gå att använda för att navigera i gränssnittet
Det här gäller idag exempelvis Android. Den fysiska tillbaka/backa-knappen ska alltid fungera.
31.
Om du utvecklar ett gränssnitt som kan användas av enheter där du kan koppla in ett tangentbord ska gränssnittet så långt det är möjligt gå att styra med tangentbordet 32.
Lägg in genvägar för att låta användaren hoppa mellan delar i innehållet i långa sidor
En genväg bör vara visuellt dold i utgångsläget men dyka upp när den får fokus vid tangentbordsnavigering.
33.
Minimera textinmatning i gränssnittet
Textinmatning är både svårt och tidskrävande i mobila enheter och bör därför om möjligt undvikas. Ett sätt att undvika det är att erbjuda listor med val i stället för att kräva textinmatning samt att tillhandahålla ”auto complete” (gränssnittet föreslår fraser när användaren börjat mata in text).
34.
Om gränssnittet medger styrning med gestik bör detta implementeras
Gestik är ett sätt att styra en enhet genom att göra olika gester på skärmen med ett eller flera fingrar. Exempelvis kan användaren på Ipad ofta bläddra mellan olika sidor genom att dra fingret över skärmen. I många gränssnitt kan man också zooma ut/in genom att föra två fingrar ifrån varandra eller mot varandra. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
24 (
30)
Gestiken ska vara intuitiv och konsekvent. Använd de gester användarna är vana vid.
35.
Lägg inte in funktioner som enbart går att hantera via gestik, utan komplettera alltid med en knapp/länk 36.
Gör det möjligt att styra gränssnittet med bara ett finger
Det kan finnas situationer där det inte går men så långt möjligt ska det gå att styra all funktionalitet med bara ett finger. Det kan kräva att knappar döljs och dyker upp när man rör ett visst område på skärmen eller klickar på en annan knapp.
37.
Var konsekvent
Lägg till exempel knappar med en viss funktionalitet på samma ställe på skärmen och utforma dem konsekvent.
38.
Använd inbyggda objekt som det är tänkt att de ska användas och som användaren förväntar sig att de ska användas
Exempelvis innehåller ofta operativsystemen inbyggda komponenter/widgets som en applikation kan använda i stället för att utvecklarna implementera egna komponenter med motsvarande funktionalitet. På enheter som har fysiska knappar ska dessa så långt möjligt stödjas av applikationen.
39.
Ge feedback till användaren
När användaren gör en inmatning bör detta bekräftas både med ett ljud och med en kort vibration om enheten stödjer detta. Det bör dock också finnas möjlighet att stänga av feedbacken. Notera att inmatning inte nödvändigtvis måste vara text via ett tangentbord. Det kan vara ett röstkommando, ett taget foto, en gest eller en rörelse med mobilen. Feedback bör ges i de flesta fall men det kan finnas undantag då det skulle upplevas som störande med för mycket feedback (exempelvis ska inte en applikation som fungerar som en stegmätare ge feedback för varje registrerat steg).
40.
Ge tydlig statusinformation till användaren
Många använder mobila enheter i stressade situationer. Det är då viktigt att användaren hela tiden får veta vad som händer, i synnerhet när användaren väntar på applikationen/webbsidan. Om exempelvis applikationen/webbsidan håller på att ladda data så är det bra att visa hur långt laddningen kommit. Ge alltid tydlig statusinformation. Det är en fördel att erbjuda både visuell feedback och feedback med ljud.
41.
Ge användaren tillräcklig tid och varna innan tidsgränser uppnås
Många använder mobilen på resande fot. Det är då vanligt att det uppstår avbrott i användningen på grund av yttre omständigheter. Detta kan till exempel vara att användaren använder mobilen i väntan på bussen. När bussen kommer uppstår ett avbrott i användningen när man går på bussen. Under den tiden får mobilen vila. Det är då viktigt att applikationen/tjänsten ger användaren tillräckligt med tid och varnar användaren när tiden håller på att löpa ut. Går det att lösa bör det också finnas möjlighet att förlänga tiden på ett enkelt sätt. Det vanligaste exempelet på tidsgränser är automatiska utloggningar. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
25 (
30)
42.
Hjälp användaren att undvika fel och att korrigera eventuella fel
Detta är extra viktigt i mobila enheter där det är lätt att klicka på fel knapp. Tekniker för att hjälpa användaren att undvika att göra fel är till exempel ”auto complete” och sökförslag. Om fel ändå uppstår ska det tydligt meddelas till användaren både högt upp på sidan och där felet uppstått. Ge också så långt möjligt förslag på lösningar.
Innehåll
43.
Använd bara bilder om det verkligen hjälper användaren
Bilder är bra för att förmedla information men i mobila enheter fungerar de ofta mindre bra. Dels eftersom de blir små och dels eftersom de tar längre tid att ladda. Bilder ska därför användas enbart när de verkligen hjälper användaren. Dekorationsbilder bör minimeras och så långt möjligt placeras i css-koden.
44.
Använd korta men beskrivande rubriker för att strukturera informationen
Om det finns möjlighet att ange vad som är rubriker i koden ska detta göras. För webbsidor innebär det html-elementen H1-H6. En grundregel är också att hålla rubrikerna relativt korta, men de får inte bli så korta att de inte på ett begripligt sätt för användaren sammanfattar vad man kan läsa om under rubriken.
45.
Undvik förkortningar
Även om mobila enheter med en mindre skärm kan locka till att använda förkortningar bör detta undvikas. Förkortningar av organisationsnamn och liknande kan användas om de förklaras första gången de används.
Användarinställningar
46.
Se till att det går att zooma gränssnittet
I en applikation måste en förstoringsfunktion byggas in medan en webbplats måste gå att zooma på ett för webbläsaren naturligt sätt.
47.
Överväg att tillhandahålla en inställning för att invertera färger
Om applikationen exempelvis har mörk text på ljus botten bör användaren få möjlighet att ställa om så att det istället är ljus text på mörk botten, och visa versa.
48.
Överväg att tillhandahålla en inställning för att ändra typsnitt
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
26 (
30)
Utvärdering och analys Utvärdering av resultat
Resultatet, de färdiga riktlinjerna tror vi utgör en bra första version. De pekar på en den väg vi vill att utvecklarna ska ta. Dock ser vi att detta inte är någon ”färdig” version. De kommer att vidareutvecklas vartefter de används i riktiga projekt och i takt med att de mobila enheterna utvecklas.
Förslag på förbättringar
Riktlinjerna behöver konkretiseras mer och inkludera handfasta exempel. Det har vi inte haft möjlighet till i det här projektet men på sikt ser vi att riktlinjerna kommer att behöva byggas ut med konkreta lösningar och kodexempel. Det kräver dock ett aktivt förvaltande av riktlinjerna.
Framtida arbeten
Vi ser ett behov av de här riktlinjerna även utanför Sveriges gränser. Förfrågningar om arbetet har inkommit från flera olika standardiseringsorgan och konferenser. Vi planerar därför att översätta dem både till Norska och Engelska i ett första skede. De måste också på sikt konkretiseras i sammarbete med utvecklare som använder riktlinjerna i konkreta projekt. Vi hoppas därför att Internetfonden skulle se positivt på ett fortsättningsprojekt där vi i samarbete med utvecklare av mobilgränssnitt och appar vidareutvecklar riktlinjerna till att bli fullmatade med praktiska kodexempel för att ytterligare underlätta mobilanvändarnas internetanvändande. | Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
27 (
30)
Bilaga 1, enkätfrågor
1. Vilken typ av mobiltelefon har du?
Smartphone (Iphone etc) Mobil utan pekskärm Annat
2. Om du vet vilken tillverkare och modell av mobiltelefon du har så skriv gärna det.
(t.ex Iphone4, HTC Desire, Sony Ericssons Xperia Arc etc)
3. Vet du vilket operativsystem din mobiltelefon har?
iOS (Iphone) Android Windows Mobile Symbian Annat Vet inte
4. Hur mycket använder du din mobiltelefon till följande? Aldrig Någon gång i månaden Någon gång i veckan Flera gånger i veckan a. Ringa med b. Skicka och ta emot SMS c. Få fram trafikinformation (exempelvis vägverket eller SJ) d. Navigera med (exempelvis GPS) e. Att lyssna på musik, ljudböcker eller se på film med (utan uppkoppling) f. Att lyssna på musik/ljudböcker över nätet med (exempelvis Spotify) eller se på TV/film (exempelvis SVT Play) g. Sociala medier, exempelvis Facebook eller Twitter h. Läsa tidningar i. Banktjänster j. Som hjälp vid nödsituationer 5. Hur ofta använder du din mobiltelefon till att surfa med?
Flera gånger om dagen Cirka en gång om dagen Några gånger i veckan Några gånger i månaden Mer sällan Aldrig
6. Har du laddat ner någon app till din mobiltelefon?
(app = applikation/program) Ja, många som jag använder dagligen
Dagligen
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
28 (
30)
Ja, några som jag också använder ganska ofta Ja, någon som jag använder ibland Ja, men jag använder den/dem inte Nej, jag har inte känt något behov Nej, jag kan inte ladda ner någon till den här mobilen
7. Hur ofta använder du din mobiltelefon för att surfa eller använda en app i följande situationer? Aldrig Någon gång i månaden Någon gång i veckan Flera gånger i veckan Dagligen a. Hemma i lugn och ro b. Utomhus, när jag sitter ner c. Utomhus, när jag är ute och går d. På kontoret e. På bussen/ tåget/ tunnelbanan/ spårvagnen f. När jag åker bil g. När jag kör bil h. När jag cyklar i. På krogen/restaurang 8. Annan situation 9. Om du använder mobilen för att besöka webbplatser, använder du då oftast webbplatsens mobilversion (om en sådan finns) eller försöker du använda den vanliga webbplatsen?
(jämför exempelvis m.facebook.com och www.facebook.com) Jag vet inte Jag försöker främst använda mobilversionen Jag försöker främst använda den vanliga webbplatsen Det beror helt på vilken webbplats det gäller
10. Om du väljer version, vad är det som avgör om du väljer den mobilversionen eller den vanliga webbplatsen? 11. Ange hur stora följande problem är för dig. Går Inte aktuellt Inga problem Vissa problem Besvärligt Mycket svårt inte alls a. Att se på skärmen när du är ute b. Att höra vad som sägs i telefonen när du är ute c. Att styra mobilen när du är i ett fordon som du inte kör själv (bil, tåg, buss, spårvagn, tunnelbana osv.) d. Att styra mobilen när du är i ett fordon som du kör själv e. Att skriva med mobilen när du sitter ner i en lugn miljö f. Att skriva med mobilen när du är ute, rör
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
29 (
30)
Inte aktuellt Inga problem Vissa problem Besvärligt Mycket svårt Går inte alls på dig eller gör något annat samtidigt g. Att styra telefonen med röstkommandon i offentliga miljöer h. Att klicka på objekt på skärmen i appar i. Att klicka på knappar och länkar på webbsidor 12. Är det något annat du upplever som ett problem när det gäller att hantera din mobiltelefon? 13. Använder du någon form av hjälpmedel i mobiltelefonen, exempelvis uppläsning, kognitiva hjälpmedel, förstoringshjälpmedel?
(Om Ja, i så fall vad?)
14. Har du några exempel på appar och/eller webbsidor som du tycker har gränssnitt som fungerar bra i mobiltelefonen, som alltså är lätta att hantera?
(Skriv gärna villka och varför du tycker att de är bra)
15. Har du några exempel på appar och/eller webbsidor som du tycker har gränssnitt som fungerar dåligt i mobiltelefonen, exempelvis är jobbiga att hantera?
(Skriv gärna villka och varför du tycker att de är dåliga)
16. Stänger du någonsin av bildvisningen i webbläsaren i telefonen för att exempelvis minska laddningstiden?
Ja Nej
17. Övrigt/kommentarer:
| Funka Nu AB | Döbelnsgatan 21, 111 40 Stockholm | 08-555 770 60 | [email protected] |
30 (
30)