Mikael Samuelsson
Mus- och touchinteraktioner
för responsiv webbutveckling
Mouse- and Touch Interactions for responsive web development
Informatik C-uppsats
Termin: 13-05-28
Handledare: Lennart Molin Examinator: John Sören Petersson
2
Sammanfattning
Denna studie innehåller forskning som berör mus- och touchinteraktioner för responsiv webbutveckling. Man utvecklar en webbplats som ska fungera lika bra på en dator som på surfplattor och mobiltelefoner. Detta medför att det finns skillnader i utförandet av mus- och touchinteraktioner mellan dessa enheter.
Det som har framkommit i denna studie är rekommendationer för att kunna skapa förbättrade möjligheter vid touchinteration och skapa en bra användbarhet. Några delar som kommer att avhandlas i rapporten är navigering och menyer, länkar, precision och träffytor och
formulärdata.
Utifrån dessa delar har en prototyp tagits fram, syftet har varit att undersök det koncept som man använder i windows8 med stora komponenter. Hur fungerar det att applicera dessa delar i webbutveckling och kan detta generera ett bra stöd mellan enheterna? Det man kan se är att det ger ett bra stöd för touchinteraktioner på webbplatser samtidigt som större objekt
underlättar för muspekare.
3
Innehållsförteckning
Sammanfattning ... 2
1. Inledning ... 5
1.1 Problembakgrund ... 6
1.2 Syfte ... 7
1.3 Avgränsning ... 7
2. Metod ... 8
2.1 Urvalsgrupp ... 8
2.2 Metod för insamling av data ... 8
2.3 Validitet och reliabilitet ... 9
2.4 Genomförande ... 10
2.4.1 Prototyp ... 10
2.5 Bortfall ... 11
3. Teori ... 12
3.1 Problematiska aspekter vid touchinteraktion ... 12
3.2 Precisionsaspekter vid touchinmatning ... 13
3.2.1 Precision mellan mus och touch ... 13
3.2.2 Skillnader mellan mus och touch ... 14
3.3 Användartester från Nielsen ... 14
3.4 Mobilanpassad och responsiv webbutveckling ... 14
3.5 Mus- och touchinteraktion för tabletop ... 15
4. Empiri ... 16
4.1 Prototyp ... 16
4.1.1 Prototyp liggande mobil format... 17
4.1.2 Prototyp mobil stående format ... 18
4.2 Datainsamling ... 19
5. Analys ... 23
5.1 Funktioner mellan enheter ... 23
5.1.1 Hover-efftekt på objekt ... 23
5.1.2 Precision för objekt ... 24
5.1.3 Länkar ... 26
5.1.4 Navigering ... 27
5.1.5 Formulärdata ... 27
5.1.6 Visuell Feedback... 28
5.1.7 Indexsida i responsiv webbutveckling ... 28
5.1.8 Framtiden utveckling ... 29
6. Slutsatser ... 29
4
7. Referenser ... 31
Bilagor ... 32
Bilaga 1: Information om intervjuer ... 32
Bilaga 2: Intervjumall ... 32
Bilaga 3: Analys av enheter och funktioner ... 32
5
1. Inledning
Den här studien avser att behandla interaktioner (benämning av inmatningsmetod som touch och muspekare samt den händelse som skapas) riktade mot webbsidor. Som det ser ut i dagsläget används massor av olika mobila plattformar för att få åtkomst till internet, det här gör att man inte enbart kan fokusera utveckling av webben för ett datorbaserat bruk. Det ställer högre krav på alla som arbetar med utveckling av webben då användare över hela världen vill kunna vara uppkopplande vart de än befinner sig. Även om antalet uppkopplade datorer
fortfarande dominerar så väljer vissa användare idag att avstå från en vanlig uppkopplad dator.
En del personer väljer idag bort en dator till förmån för internetåtkomst via sin mobiltelefon, andra kanske ser telefonen som ett komplement till sin vanliga dator för att ständigt kunna vara uppkopplad.
Det här är vår vardag som den ser ut idag. Man har skaffat sig ett behov av att ständigt kunna få åtkomst till information via webben. Sedan har vi även surfplattor och de nya
hybridlösningarna (surfplatta som går att montera till ett tangentbord) som är ännu ett alternativ av mobila plattformar. Dessa fungerar kanske mer som ett komplement eller
alternativ till våra bärbara datorer. Den ska vara lätt och smidig att kunna ta med sig, samtidigt som det erbjuder en större skärm som ska underlätta användandet. Det kan också vara så att dessa nya hybridlösningar kommer att ersätta den vanliga laptopen i framtiden.
Utvecklingen kommer fortsätta att gå framåt och mobila plattformar kommer förmodligen att utvecklas än mer och det finns inget som tyder på att utvecklingen kommer att avstanna. Detta ställer höga krav på utvecklingen av webben som måste bli väldigt flexibel för att kunna täcka alla dessa enheter som vi använder oss av.
Det finns idag stora skillnader i hur vi använder olika typer av enheter. Vi använder oss av muspekare på våra vanliga datorer medan vi använder oss av touchinteraktion på våra mobiltelefoner och surfplattor. Den här studien kommer handla om de olika typer av interaktioner som vi använder oss av på olika enheter. Studien är viktig utifrån ett
användarperspektiv då det finns fördelar, nackdelar och begränsningar mellan dessa sätt att utföra interaktioner på.
Den faktor som ligger som en grund till det här är responsiv (skalbar, anpassningsbar)
webbutveckling, det här är den nya tekniken som börjar användas mer och mer för att man ska kunna utveckla en webbplats som fungerar överallt och på alla enheter. Att en webbplats är responsiv innebär att den ska skala om sig och anpassa sig till storleken på enheten man
använder. Det här bygger på att man använder en grid-layout (rutmönster) med ett antal boxar som man ganska flexibelt kan strukturera om utifrån den aktuella enhet som sidan ska köras mot. Detta kan man jämföra mot den traditionella webbplatsen som använder en fast struktur och inte tillåter någon förändring i storlek. Här får man istället en scrollbar (möjlighet att kunna röra sidan i sidled) där man kan scrolla i sidled om enheter är för liten i jämförelse mot den aktuella storleken på webbplatsen.
Anledningen till att man har börjat använda sig av denna teknik, är den tekniska utvecklingen av mobiltelefoner som idag finns i många olika skärmstorlekar. Det finns även surfplattor i miniformat som ligger nära de största mobiltelefonerna och även större surfplattor som ligger närmare en laptop i storlek. Det kommer hybridlösningar där man kan ta loss skärmen och använda den som en surfplatta, alternativt att man kan montera och koppla in den mot ett litet tangentbord.
6
Skulle man utveckla speciella versioner av en webbsida för att täcka alla olika typer av format kommer man få hålla på väldigt länge. Därför är responsiv webbutveckling väldigt viktigt då det är den typ av teknik som kan fungera som en lösning för alla enheter. Denna teknik innebär dock även en annan problematik. Vissa av dessa enheter använder mus och tangentbord
medan andra använder touch. Därmed är en stor utmaning för responsiv webbutveckling att få olika typer av interaktioner mellan mus och touch att fungera enhetligt.
1.1 Problembakgrund
Problematiken för studieområdet är hur man ska lösa en bra användbarhet mellan mus och touchinteraktion. En webbplats som är utvecklad för musinteraktion ger nödvändigtvis inte en bra användbarhet för touchinteraktioner. Idag har tekniken med responsiv utveckling börjat komma igång mer och mer, speciellt då man upptäcker fördelen med en skalbar och
funktionsduglig lösning på alla enheter. Idén med responsiv webbutveckling är bra, men problemet är att vi använder olika typer av interaktion och navigering på olika enheter. En användare som besöker sidan via sin dator kommer att använda sig av en muspekare medan den användaren som besöker sidan i sin mobiltelefon använder sig av touchinteraktion.
Samma sak gäller för surfplattor där man kanske får webbplatsen i ett originalformat som är anpassat för en dator.
Muspekaren har en precision som ger en väldigt exakt koordinatträff samtidigt som ett finger har en väldigt stor kontaktyta, detta medför problem när man utvecklar en sida som ska vara funktionsduglig på många olika plattformar.
Tittar man hur det ser ut på nätet idag väljer många att utveckla en specifik mobil webbplats samtidigt som man använder en original webbplats för vanliga datorer. Det här är ett sätt att lösa situationen på, men problemet finns fortfarande kvar då man endast skapat en mobil version av sin webbplats. Man får inte sin webbplats tillgänglig på enheter som blir mitt i mellan dessa två, som ett exempel miniversioner av en surfplatta eller en mobiltelefon med en större skärm. En responsiv webbplats löser problemet för att täcka alla olika enheter från en mobil till en stor skärm, dessa går även att få funktionsdugliga om man skulle vilja anpassa webben för att köras på en tv-monitor.
Det finns många olika sätt att utveckla en webbplats för att få den att fungera på olika enheter, dessvärre finns det inte bara fördelar utan även nackdelar i dessa olika tillvägagångsätt. Även om vi löser det här på ett bra sätt kommer vi alltid att återkomma till att vi har olika typer av interaktioner på en mängd olika enheter. Utvecklingen av de teknologiska enheterna går väldigt fort och vi måste hänga med när det gäller att anpassa webbutvecklingen för att uppfylla behovet från användarna.
Den senaste delen av utvecklingen ligger nu hybridlösningar, vilket är en vidareutveckling som ligger mellan surfplattor och en traditionell laptop. Den viktiga faktorn i det hela är att anpassa sig mer till touchinteraktioner, vilket medför att vi bör se över den traditionella webbplatsen som används idag. Mobiltelefoner har redan kommit så långt att grid-layout med ikoner är anpassande för att skapa bra touchinteraktioner. Ser vi sedan till surfplattor och de nya hybridlösningarna medför dessa en annan problematik. Här kommer vi närmare en original webbplats i storlek, men skillnaden är att vi ska använda touchinteraktion. Det här medför problem då den traditionella webbplatsen oftast utvecklas och anpassas för mus och
tangentbord.
7
Tanken är att man ska kunna använda sig av en responsiv webbplats som en bra lösning. Det gäller dock att lägga vikten på interaktioner och användbarhet. Detta för att täcka alla olika aspekter som kan förekomma då den ska vara funktionell på många enheter. Det får inte bli att den fungerar bra på vissa enheter och halvbra på andra.
1.2 Syfte
Syftet med den här studien är att undersöka hur man ska kunna skapa ett bra stöd för både touch- och musinteraktion, med ett fokus på responsiv webbutveckling. Det handlar om att undersöka hur man ska skapa en bra enhetlig lösning. Hur bör man tänka kring problematiken som finns när man ska vara funktionell på många enheter.
Det finns en prototyp och ett koncept (baserat på windows8 med knappar/ikoner) som ligger till grund för det här forskningsarbetet (prototyp avsnitt 2.4.1 och 4.1, 4.1.1, 4.1.2). Tanken är att prototypen och konceptet ska kunna besvara om det kan vara ett möjligt tillvägagångssätt för den framtida utvecklingen. Grid-layout med ikoner och knappar är väldigt vanligt då vi använder en mobil enhet, syftet är att undersöka om den tekniken är applicerbar för den traditionella webbplats vi har. Detta för att kunna hitta ett samband som kan möjliggöra en enhetlig lösning med bra interaktionsmöjligheter för touch och muspekare.
Studien ska beskriva en problematik som finns inom det här området, samt relatera till den prototyp och koncept som arbetet utgår ifrån. Hur man bör tänka kring touchinteraktioner för webbplatser och hur dessa ska fungera på ett bra sätt för användaren.
Studien ska beskriva om det finns en möjlighet att förändra den traditionella utformning vi har på en webbplats idag och anpassa den för den nya teknik som kommer. Studien ska även
beskriva skillnader i de olika typer av interaktioner vi har, det görs från en mobil enhet via surfplattor till den traditionella webben som vi använder på en dator.
Frågeställning:
Hur kan man utveckla responsiva webbplatser med ett bra/förbättrat stöd för både mus- och touchinteraktioner?
1.3 Avgränsning
Studien kommer att ha huvudfokus på mus- och touchinteraktion. Det finns en mängd olika varianter av enheter, därför kommer inget fokus läggas mot en specifik enhet. Däremot kommer det att relateras till skillnader mellan mobil, surfplattor och stationär datorer i den undersöknings som görs.
8
2. Metod
Detta kapitel beskriver de tillvägagångssätt som har valts för undersökningsarbetet. Enligt Patel och Davidson (1991, 2011:131) används den här delen för att läsaren ska kunna göra en egen bedömning av resultatet och dess rimlighet. Det kommer att ges en beskrivning av teknikerna som har använts för datainsamling, samt en motivering till urvalet av de personer som medverkar i studien.
2.1 Urvalsgrupp
För att fånga olika personers erfarenheter i datainsamlingen gjordes ett urval med olika roller och befattningar för intervjuerna. Inom IT-branschen gjordes intervjuer med en projektledare, två interaktionsdesinger, en utvecklare samt en beställare för att kunna sammanställa synen på problematiken om man är verksam inom IT-branschen vid olika roller. Det här medför att data som samlades in är information som kommer från personer med expertis inom ämnesområdet.
Det är också viktigt att poängtera att data som samlades in är resultat utifrån personernas kunskap och erfarenhet som verksam inom IT-branschen.
En av dessa intervjuer gjordes med en beställare, det här syftar till att samla in data från ett företag som ligger i en övergångsfas. Företaget ska byta ut den webbplats man har och börja använda sig av en responsiv webbsida istället. Därmed är den här typen av problem och frågeställningar högst aktuella i detta skede då man har en pågående förstudie ute just nu.
Eftersom datainsamlingen genomfördes via intervjuer var det fokus på en liten grupp. Det prioriterades personer där det var lätt att boka ett möte med hänsyn till ort. Fanns det ingen möjlighet att genomföra ett möte i samband med intervjun genomfördes en telefonintervju istället. Telefonintervjuer genomfördes vid två av fem tillfällen för att avståndet var för stort för att boka in ett möte. Anledningen till detta var att de här personerna hade kunskap som det var svårt att hitta i anslutning till orten.
Storleken på undersökningsgruppen består av fem personer, i det här avseendet gjordes en bedömning att träffa och genomföra intervjuer som tidskrävande. Därför lades fokus på ett fåtal personer för att arbetet skulle kunna genomföras inom de tidsramar som fanns angivna.
2.2 Metod för insamling av data
Andersen (2012:163) diskuterar insamling av data i två steg, den ena är primärdata och den andra är sekundärdata. Primärdata är den data som i det här fallet har samlats in via intervjuer och sekundärdata är den data som samlats in av andra personer (litteratur & artiklar) eller institutioner.
För insamling av primärdata används intervjuer. Eftersom det här är ett ämne som är relativt nytt lades det ett fokus på att samla in data med personer inom IT-branschen. Fördelen med att använda intervjuteknik i det här fallet är att man fick chansen att träffa personer och prata med dem. Det gav en bra möjlighet att ge en bakgrund till studieområdet, så att personen som intervjuades fick en förståelse för studien och de data som skulle samlas in. Det gav också en möjlighet att förklara och visualisera den prototyp som används i studien. Detta för att den intervjuade personen bättre skulle få en förståelse för problematiken.
Sekundärdata har hämtats från litteraturer och vetenskapliga artiklar. Responsiv
webbutveckling är väldigt ny, det medför ett begränsat utbud i litteratur och forskningsartiklar.
9
Däremot finns det andra studier och litteraturer för användbarhet i mobiltelefoner som ändå gick att relatera till ämnet.
Eftersom data har samlats in via intervjuer genomfördes dessa med personer inom IT- branschen samt en beställare, frågorna anpassades därför efter vad som var lämpligt för den intervjuade personen. En mall med ämnesområden (Bilaga 2) har använts som stöd för att intervjuerna skulle hålla en liknande struktur.
Studien följer en hög grad av standardisering, men intervjuerna anpassades efter personerna och det gavs utrymmen för fria frågor och diskussioner. Detta var också syftet med att välja intervjutekniken i jämförelse med en enkätundersökning. Då dessa personer har olika
erfarenheter och kunskap var det viktigt att ge personen en möjlighet att kunna få fram dessa fakta utan att låsa dem för mycket i deras svar. Det här gav även en låg grad av strukturering, då den intervjuade personerna har besvarat frågorna utifrån sin egen erfarenhet. Det fanns inga färdiga svarsalternativ som styrde svaren.
Björklund & Paulson (2012:65) redogör för begreppen kvalitativ och kvantitativ forskning. Den beskrivning av dessa begrepp som ges är att kvantitativa studier lämpar sig bra när det handlar om data som kan mätas och utvärderas numeriskt. Det här är dock inte det sätt som passar för denna studie, utan det är den kvalitativa forskning som lämpade sig bäst.
Kvalitativ forskning enligt Björklund & Paulson (2012:65) en process där man vill skapa sig en djup förståelse för en problematik. Detta är en väldigt bra förklaring för den aktuella
undersökningen eftersom det handlar om en problematik för den nya teknik (responsiv
webbutveckling) som kommit. Den kvalitativa forskning var mest lämplig när man använde sig av intervjutekniker som datainsamling. Detta är också fallet i denna studie då datainsamlingen bygger på att använda sig av intervjuer.
2.3 Validitet och reliabilitet
För att kunna säkerställa en god validitet följs Patel och Davidson (1991, 2011:102) definition.
Eftersom studien bygger på att undersöka olika typer av interaktion mellan olika enheter används en mall där nio (Bilaga 3) olika typer av aspekter har beskrivits. Dessa delar har ställts upp och jämförts mot varandra för att lätt kunna se skillnaderna mellan olika enheter. Dessa kommer lätt att kunna överskådas och jämföras om en viss typ av funktionalitet är möjlig att genomföra på en stationär dator i jämförelse mot en surfplatta eller mobiltelefon. Denna mall ska följas för att kunna säkerställa att mätning verkligen kommer att mäta det som är avsett.
För att kunna säkerställa en god tillförlitlighet kommer datainsamling att göras med personer som är yrkeskunniga inom området och ämnet. Det innebär att datainsamling har gjorts utifrån personlig kunskap och erfarenhet, vilket gör att den inte är generell utifrån en större mängd. För att få en trovärdighet har data jämförts mot litteratur och tidigare
forskningsarbeten. Detta för att kunna analysera och få fram fakta som anses vara korrekt och trovärdig. Vissa delar kommer även praktiskt att prövas (denna prototyp har även använts som diskutionsunderlag vid intervjuer. Detta för att respondenten ska förstå vad jag är ute efter.) via en prototyp för att kunna säkerställa utfall.
10
2.4 Genomförande
CGI är en stort IT företag som arbetar med systemintegration, affärskonsultation och
webbutveckling. Kontakt med CGI i Karlstad togs i samband med att forskningsarbetet skulle påbörjas. Detta för att den här studien är fokuserad på teknik som är väldigt ny, vilket kan medföra att det inte finns så mycket litteratur och forskning att luta sig mot. Samtidigt så skulle datainsamling baseras på intervjuer och fokus har legat på intervjupersoner som arbetar inom IT-branschen.
För de intervjuer som genomförts under datainsamling, lades önskemål fram till CGI om vilka typer av intervjupersoner som behövdes för studien. Dessa personer är en utvecklare, en projektledare, en interaktionsdesigner och en beställare. Anledningen till att dessa har valts är att den omfattar hela processen från utvecklingssidan fram till kunden. Två av intervjuerna genomfördes på CGI kontor i Karlstad. Dessutom har CGI i Karlstad hjälpt till att förmedla kontakt till sitt kontor i Stockholm för en intervju med en interaktionsdesigner, samt en beställare på MSB i Karlstad.
Inuse arbetar med webbutveckling och interaktionsdesign, man tillhandahåller också
utbildningar samt en del skriven litteratur och undersökningar. Kontakt togs med Inuse i syfte att få genomföra en intervju med någon av deras interaktionsdesigner.
Dessa personer som har blivit intervjuade kommer i rapporten att benämnas med IP (Intervjuperson), dessa delas sedan in med ett nummer id (IP1, IP2).
IP 1: CGI Stockholm
Yrkesroll: Interaktionsdesigner 40 min Telefonintervju.
IP 2: CGI Karlstad Yrkesroll: Utvecklare 40min Plats: CGI Karlstad IP 3: CGI Karlstad
Yrkesroll: Projektledare:
40min Plats: CGI Karlstad IP 4: Inuse Göteborg
Yrkesroll: Interaktionsdesigner 40 min Telefonintervju
IP 5: MSB Karlstad Roll: Beställare
20 min Plats: MSB Karlstad 2.4.1 Prototyp
Utifrån den studie som har gjorts har det funnits ett koncept som har legat som underlag när intervjuerna har genomförts. Det här konceptet kan kopplas till utveckling av windows8 när man fokuserat på touchinteraktioner. Man kan kalla det för lösningsförslag på problematiken men ett mer passande yttryck vore att benämna det som ett koncept. Syftet med prototypen var att ha ett diskussionsunderlag och på det sättet identifiera för- och nackdelar.
11
För att kunna visualisera konceptet så har en prototyp programmerats och lagts ut på en server. Detta för att det ska finns ett underlag till intervjuerna och det skulle ges en möjlighet för de personer som har deltagit via telefonintervjuer att kunna ta del av prototypen.
Anledning till att lägga upp den här prototypen online var för att kunna visa hur sidan ser ut i mobiltelefoner samtidigt som man ska kunna se den stationära versionen. Sedan är
webbplatsen responsiv vilket medför att man kan dra i webbläsaren och se alla förändringar som sker i olika typer av format. Det underlättade att kunna visualisera i intervjusituationer, istället för att försöka förklara konceptet. En konkret faktor var att dessa personer som har blivit intervjuade kan ge korrekt fakta utifrån det man fick se, detta för att undvika
missförstånd under intervjuerna.
En annan faktor som ger en fördel med att kunna demonstrera konceptet från en webbplats som ligger online är att man får se den faktiska versionen mobilt. Man kan dra ner webbläsaren på en dator för att se hur den kommer att skala om sig, men detta kan skapa problem eftersom det är lätt att missförstå storlek och proportioner. Som ett exempel kan man se att objekt skiljer i proportion mellan en dator och mobiltelefon. Tittar man på det här objektet i
webbläsaren på en dator kommer det att se väldigt stort ut, detta kan medföra att man låter sig luras att det är väldigt stort och man borde designa det mycket mindre. Vilket inte är en
korrekt uppfattning då dessa 37 pixlar i en mobiltelefon inte alls blir stort. Detta gör att man bör köra webbplatsen både mobilt och på en dator för att kunna se och relatera till dess skillnader mellan olika enheter.
Sedan har prototypen gett en möjlighet att kunna test enklare typer av händelser. Problem och frågeställningar som har uppkommit under studiens gång har kunnat testas för att få ett mer korrekt utfall.
2.5 Bortfall
Alla de planerade intervjuerna har genomförts. Det enda som kan räknas som ett bortfall är intervjuen på MSB. På grund utav oförutsedd händelse hade man inte tid att genomföra hela intervjun. Intervjutiden blev mycket kortare än beräknat, så endast delar av den tänkta
intervjun hans med. Vilket resulterade i att datainsamlingen inte blev så stor som det var tänkt.
12
3. Teori
Den här studien ska undersöka mus- och touchinteraktioner, det här baseras på att man ska använda sig av responsiva webbplatser för att kunna få en webbplats att fungera bra på alla olika typer av enheter.
Det här kan man relatera till utvecklingen av Windows 8, där man har skapat ett
operativsystem som ska vara väldigt anpassat för touchinteraktion. Man har valt att sätta touchinteraktion och mobila enheter i fokus istället för att enbart utveckla för mus och tangentbord.
Det finns vissa webbplatser där man har använt sig av den här typen av koncept i sin design.
Dessa webbplatser använder sig inte av någon responsiv sida, däremot har man har använt sig av den här typen koncept på sina webbplatser. Det vill säga en grid-layout med kvadratiska stora knappar/ikoner. Dessa webbplatser är Rättighetsalliansen (n.d) och Yasuragi (n.d), det man tydligt kan se är att man valt menyer i form utav grid-layout. Den här typen av design kan relateras till den grid-layout som används i windows8.
Författaren har noterat att många responsiva webbplatser använder en global meny för den stationära versionen och sedan gör man om denna meny till en drop-down som kan öppnas och stängas i den mobila versionen. I det här avseendet skulle dessa webbplatser kunna underlätta hela processen med omskalning mellan olika enheter, eftersom man behåller samma grid-layout mellan enheterna. Det enda som behöver ändras är formatet på grid- strukturen (2x3 eller 3x2) mellan olika enheter.
3.1 Problematiska aspekter vid touchinteraktion
Budiu och Nielsen (2011), redogör för problemområden vid touchinteraktioner för
applikationer och webbsidor. Denna studie är en uppföljning där man redovisar olika problem som man har upptäckt gällande touchinteraktioner.
Budiu och Nielsen (2011:25, 26) klargör att 10mm x 10mm är den en bra storlek för objekt som ska vara klickbara när man använder touchinteraktioner. Man kommenterar att objekt som är mindre inte bara skapar problem när man utför själva interaktionen, utan dessa kan också leda till att användaren har svårt att se och upptäcka dessa objekt.
Budiu och Nielsen (2011:28) redogör för ”fat-finger issue” (svårt med precision), grupperar man för många små objekt väldigt nära varandra skapar det problemet när man ska använda touchinteraktioner. Detta medför att det kan vara svårt att endast träffa det objektet man vill.
Det kan lätt resultera i att användaren träffar andra närliggande objekt samtidigt.
Budiu och Nielsen (2011:30) har kommit fram till att användare förväntar sig att en hel rad ska vara klickbar när man ställer objekt ovanpå varandra. Till exempel artikelrubriker, dessa gruppers oftast på varandra i en list-cell. Använder man en lista eller likande för att gruppera dessa skapas oftast tomma ytor i varje list-cell då själva artikelrubriken endast är en textlänk mot tom bakgrund. Användaren utgår från att hela cellytan är klickbar och inte enbart
textlänken.
Budiu och Nielsen (2011:40) redogör för inmatning av formulärdata. De föreslår att man endast begär postnummer som inmatning och att stad ska kopplas per automatik. Det ska också vara förlåtande när det gäller inmatning i formulär, man ska tillåta att användaren att
13
mata in data i olika format. Lagring av inmatningshistoriken gör att användaren inte behöver skriva in samma sak flera gånger.
3.2 Precisionsaspekter vid touchinmatning
En relevant aspekt att diskutera när man studerar skillnader mellan mus- och
touchinteraktioner är precisionen. Enligt en studie gjord av Park & Han (2010) redogör de för olika objekt och svårigheter att utföra touchinteraktion med dessa. De visar avläsningar hur stor del av touchinteraktionen som träffade på objektet och även punkter som har träffat utanför.
Den här studien är baserad på precisionstester där man låter ett antal personen genomföra touchinmatning mot olika typer av objekt. Dessa objekt har varit 4mm, 7mm och 10mm och har varit placerade på olika positioner på telefonskärmen. Man har redogjort utfall för hela testgruppen i procent där man fick ett utfall på 62.6% på objekt som är 4mm, 84.3% på objekt som är 7mm och slutligen 94.2% på 10mm objekt. De procentsatser som redogörs är det tillfredställande resultat som redovisas från deras tester. Man har räknat ut en procentsats för varje enskild testperson hur många lyckade träffar personen gjorde i förhållande till antalet försök. Det ska tilläggas att testerna gjordes med höger tumme i utförandet av interaktionen.
Utifrån de olika positioner objekten hade under deras test redovisar man hur vissa positioner gav ett bättre utfall och andra gav ett sämre. Generellt för alla objekt (gällande storlek på objekt) gav vänster sida på telefonskärmen en hög träffsäkerhet. Det fanns även ytterligare två ställen på skärm som gav en bra träffsäkerhet, ena punkten var placerad högt upp till höger och den andra i mitten på den nedre halvan av telefonen. Längst ner i botten på skärm var
träffsäkerheten som sämst med undantag för mitten längst ner, även här fanns det två ställen som hade gett dåligt utfall lite högre upp på telefonskärmen mot höger sida.
Det man kan nämna om den här undersökningen är att mer än hälften av personer som deltog i dessa tester hade ingen erfarenheter av att använda mobiltelefoner med touchinteraktion.
Vilket naturligtvis kan ge inverkan på resultat när det gäller att skapa interaktioner med touchinmatning. Det man kan se på deras resultat och de bilder man redogör för är att 10mm är den storlek som ger ett bra utfall i touchinteraktion från deras tester.
3.2.1 Precision mellan mus och touch
Wu et al. (2011) har genomfört tester där man jämfört tider och utförande på webkartor. Man har valt att jämföra dessa mellan mus- och touchinteraktioner. Nu är denna studie baserad på webbkartor men de intressanta aspekter som rör skillnaden mellan dessa typer av
interaktioner är relevant att relatera till.
De redogör för vissa fördelar som en musinteraktion kan medföra, då musen har en bra precision, positionering, mindre felfrekvens och en snabb rörelse. Detta jämförs sedan mot touchinmatning, där man kan utföra kontrollen direkt utan att behöva externa enheter. En till fördel är att touchskärmarna är mer robusta och slitstarka.
Wu et al. (2011) redogör för tidigare studier där man har haft objekt som varit 1, 4, 16 och 32 pixlar. Här påstår man att när avståndet varit mer än 4 pixlar eller större är tiden lika mellan mus- och touchinteraktion. Om avståndet är mindre än 4 pixlar är muspekaren snabbare i sin precision när det gäller att träffa objektet.
14
Utifrån de tester som gjordes kom man fram till att muspekaren var snabbare. Handen/fingret hamnar i olika vinklar vilket gjorde att man valde att lyfta handen/fingret för att kunna se vart man ska trycka. Det här anges som ett skäl till att tiden blev längre vid touchinteraktion.
Man kom också fram till att dessa pilar medförde problem om de var grupperade för tätt intill varandra när man utförde touchinteraktion. Muspekaren var säkrare i det här avseendet då risken att klicka på fel objekt ansågs vara mindre.
3.2.2 Skillnader mellan mus och touch
Wu et al. (2011) har en tabell där man redogör för olika enheter hur dessa fungerar i
interaktioner. Single/multi-touch, muspekaren är single-mode då man endast kan träffa en x/y koordinat åt gången. Touchskärmar stödjer multi-touch där exempelvis spel tillåter
användaren att utföra input på två ställen samtidigt.
Man visar också skillnaderna i rapid pointing (snabbhet) och accuracy pointing (precision), både mus och touch redogörs som att ha bra snabbhet men precision för touch är sämre än för en muspekare. Man definierar också att muspekaren är bättre anpassad för prolonged use (långvarig användningstid) än an vad touchskärmar är.
3.3 Användartester från Nielsen
Budiu och Nielsen (2013:18) redogör för ett antal användartester som de har genomfört mot webbsidor för mobilt användande. Det man har gjort är att testa den traditionella webbplatsen i en mobiltelefon och jämfört detta mot sidor som varit mobilanpassande.
I dag väljer många att utveckla specifika mobila webbplattformar som ett komplement till den traditionella webbplatsen. Det här gör man för att kunna uppnå en bättre användbarhet i mobila enheter. Det finns intressanta aspekter som Budiu och Nielsen (2013) redovisar från de två tester man utförde. Testerna från 2009 gav ett resultat av 64 % som uppnått lyckade
resultat för en mobilanpassad webbplats. Detta kan då jämföras mot 53 % som uppnått lyckade resultat då man genomförde samma test fast mot den traditionella webbplatsen.
Budiu och Nielsen (2013) fortsätter redogöra för att testerna sedan har genomförts igen år 2011. Det som är intressant här är att de som uppnått lyckade resultat i testerna på
mobilanpassad webbplats fortfarande ligger kvar på 64 %, vilket antyder att användbarhet och interaktioner inte har förbättrats avsevärt på dessa två år. Däremot kan man se en tydlig förbättring på den traditionella webbplatsen i mobiltelefoner, här kan man nu visa att 60 % lyckades uppnå tillfredställande resultat.
Det som den här studien kan visa är att man har blivit mycket bättre på att utveckla webbsidor där man har dessa aspekter touchinteraktion. Man har förmodligen ett tankesätt när man skapar design och interaktioner att dessa ska kunna användas mobilt. Det finns förmodligen en medvetenhet i utvecklingen för att skapa bättre stöd för touchinmatning idag.
3.4 Mobilanpassad och responsiv webbutveckling
Tittar man på hur utveckling med webbsidor ser ut för tillfället väljer många att utveckla en mobilanpassad lösning av sin traditionella webbplats. Kadlec (2013:186) diskuterar vissa skillnader i de här två alternativa utvecklingsätten.
15
Många som väljer att utveckla en mobilanpassad version där man erbjuder en del utav informationen som finns tillgänglig på den vanliga traditionella webbsidan. Ett citat från Kadlec (2013)
”He wants a design optimized for his device, but the content needs to be the same and the experience needs to be familiar.”
Utifrån det här citatet kan man se att Kadlec (2013) påpekar vikten av webbplatsen ska vara optimerad för olika enheter. Samtidigt ska sidan vara konsekvent så användaren känner att det är samma webbplats man besöker oavsett om enheten är en dator eller mobiltelefon. Samma sak gäller all funktionalitet som finns på webbplatsen ska vara likadana, användaren ska erbjudas samma möjligheter i mobiltelefonen som på en dator.
3.5 Mus- och touchinteraktion för tabletop
Forlines et al. (2007) redogör för relaterade studier för deras forsökning. Denna studie berör skillnader mellan mus- och touch interaktioner men i ett syfte för tabletop displays (liknar touchskärmar som används vid automater eller biljettstationer). Man kom fram till att objekt som har en storlek på 16 pixlar eller större hade en fördel av att touchinteraktion var snabbare än musinteraktion. Objekt som hade storlek på 32 pixlar hade 66 % mindre felfrekvens i sina utföranden. Dock föredrog användaren musinteraktion trots att man hade ett bättre utförande med touchinteraktion.
Forlines et al. (2007) redogör även för det test man har utfört. Studien bygger på att plocka upp ett objekt (selection) och sedan släppa det vid en annan punkt (docking). Det finns en
jämförelse mellan mus- och touchinteraktion där man kan se touchinteraktion har varit snabbare på alla objekt. I denna studie använde man objekt som var 16, 32, 48 och 64 pixlar stora. Det objekt som är 16 pixlar har en betydlig längre tid för att träffa objektet (selection time) i jämförelse med det övriga större objekt. Man kan tydligt se att tiden för de tre övriga objekten ligger väldigt nära varandra. Man redogör också för att felfrekvens var dubbelt så stor på touchinteraktion än vid utförande med mus. Man har även redogjort för avstånden
(targeting distance) man har använt sig av, dessa ligger på 300, 400, 500 och 600 pixlar.
När det gäller att släppa objektet vid ett speciellt ställe kan man se att musinteraktion har varit snabbare i samtliga fall. Dessa redovisas både utifrån storlek på objektet och
avståndsförhållande från objektet till den plats den skulle släppas på. Felfrekvens redogörs enligt följande, för att plocka upp ett objekt hade touch 8.5% och mus 4.1%. Vid dockning var felfrekvensen 2.7% för touch och 2.6% för mus.
16
4. Empiri
I det här avsnittet kommer det att göras en redovisning av datainsamlingen som är gjord i studien. För att lätt kunna överskåda datainsamlingen redovisas dessa efter den mall som angavs för intervjuområden. Prototypen som har används som underlag kommer också att redovisas i form utav skärmbilder.
4.1 Prototyp
Här kan man se hur prototypen är uppbyggd i fullformat där man låst storleken på 960 pixlar.
Det man kan se här är framförallt uppbyggnaden av menyn, genom att använda större knappar i menyn ska dessa ge ett bra stöd för touchinteraktioner. Komponenten kan på det här sättet visuellt visa för användaren hur stor träffytan verkligen är för objektet, istället för att enbart kanske låta textlänken vara en aktiv träffyta. Har man sedan mycket fler menyalternativ så får man tänka i samma koncept men använda sig av grid-layout, består menyn av åtta stycken menyalternativ hade man fått tänka 2x4 struktur istället. Samma sak gäller för den knapp som finns under formuläret där man ska kunna skicka formulärdata. En stor knapp med en tydlig träffyta, den är väldigt utdragen också för att ge en bra träffyta när sidan skalar om mot ett mobilt format. Dessa objekt är relativt breda vilket ska göra att användaren inte ska behöva tänka på precision att träffa rätt, man ska kunna träffa lite på sidan och interaktion ska ändå genomföras på ett korrekt sätt.
Figur 1: Fullformat 960px
17
4.1.1 Prototyp liggande mobil format
Det här formatet kommer att visa hur det ser ut i landscape format på en Iphone som ett exempel. Man kan här se skillnaderna i hur formuläret täcker hela telefonytan, den text som låg till höger har i det här fallet positionerats under knappen skicka.
Figur 2: 480 pixel liggande format
18
4.1.2 Prototyp mobil stående format
Den här bilden visar det designläge som är anpassat för mobiltelefoner i stående format.
Skillnaden mot förgående bild på liggande designläge är att menyn struktureras om.
Figur 3: 320 pixel stående format
19
4.2 Datainsamling
Här kommer all insamlad data att redovisas. Redogörelsen kommer att visa de personer som har gjort uttalanden inom ett område. I vänster kolumn visas det ID som intervjupersonen har fått och i höger kolumn visas deras uttalande inom ämnesområdet. All data har delats upp i flera tabeller för att lätt kunna överskåda de olika ämnesområdena.
ID Mus-Event, Hover funktioner
IP 1 Man måste inaktivera hover funktioner, då dessa kan skapa problem på touchskärmar. Det kan resultera i att man måste klicka på objektet två gånger.
IP 4 En tanke för att kunna underlätta interaktion är om man använder någon form av event där objektet aktiveras när man släpper det istället.
Detta medför att man ska kunna trycka på ett objekt och om man sedan inser att man har tryck på fel ställe så kan man hålla kvar fingret och dra tills man träffar det objektet som man vill aktivera. Bäst är det om enheten ger feed-forward om vilket objekt som kommer väljas när man släpper.
ID Precision aspekter
IP 1 10mm är ett bra standardformat för touchobjekt. Finns det sedan plats är det ingen nackdel att göra större objekt. Även stora objekt
underlättar interaktionen för muspekare.
IP 4 Det finns en gammal standardformat för dessa som ligger på 26x22 mm (Gäller för automater, biljettstationer). I precisionssyfte kan ett liggande objekt underlätta när man skapar touchinteraktion.
Andledning till detta är att man har lättare att parera i sidled än på höjden. Framförallt om handen vilar på ett bord eller på skärmen.
IP 5 I den rollen som beställare när man är på väg att förändra sin
webbplats är man inne på den här typen av koncept att använda sig av större objekt. Stora objekt underlättar inte bara touchinteraktioner utan det kan skapa en bättre användbarhet för alla grupper.
Användbarhet och tillgänglighet är en central faktor som man är fokuserade på.
20
ID Formulär Data
IP 1 Man kan göra en hel del arbete på back-end sidan. När man matar in formulärdata ska den kunna validera direkt i fältet och sedan
automatiskt hoppa vidare till nästa fält. Man ska även kunna mata in data i flera olika format och dessa ska kunna tolkas rätt.(Exempelvis ett datum som kan skrivs på många olika sätt.)
IP 2 De tekniska bitarna med formulärdata, hur man ska få bra interaktioner när man använder touchenheter. Man har inte samma tab funktioner på mobila enheter som man har på ett tangentbord (vissa telefoner har knapp för att byta fält). Man kan validera inmatad data direkt för varje fält. För att undvika att man fyller i ett helt formulär och sedan se att man har fel data på flera ställen. En alternativ lösning är att kunna visa dessa fel direkt innan man hinner gå vidare till nästa fält.
IP 4 Inmatning av formulärdata så skulle man kunna någon form av knapp eller objekt bredvid formulärfälten som man ska kunna trycka på så man kan gå till nästa fält. Detta är en knapp som ska kunna motsvara en tab funktion som man har på tangentbordet. Knappens placering bör vara beroende av inmatning. Om man till exempel använder sig av mjukt tangentbord kan Previous/Next-knapparna på iPhonens tangentbord användas.
ID Navigering, Meny
IP 1 Använda sig av en grid-struktur (knapp & ikoner) i menyer och
navigering kan mycket väl bra ett bra koncept att använda om man ska utveckla webbsidor där man vill ha ett stöd för touch interaktion. Han har inte själv haft något projekt där man arbetat med den här typen av koncept, men ser det som en möjligväg att arbeta på.
IP 2 Utifrån prototypen och dess menystruktur var reaktionen att just interaktionsmässigt fungerar det bra att använda den här typen av struktur, men att det finns en nackdel då man kommer ner i en mobil enhet och man endast får knappar på sin startsida. Här tror man att kunderna vill ha en annan typ av information synlig också och det gör så att det finns fördelar man att gömma undan menyn.
IP 3 Utifrån prototypen och själva strukturen i menyn som är knappbaserad.
Här påpekar man att det finns en del som kan vara bra i att den är konsekvent. Eftersom samma knappstruktur finns på en dator version och det finns även i den mobila versionen. Med andra ord, menyn göms inte undan utan den är fullt synlig. Vikten av att kunna vara konsekvent ses som en fördel. Detta för att användaren ska känna i sig när man besöker en webbplats från olika plattformar.
IP 5 Vi pratade om menyer och hur man ska hitta en funktionell lösning på detta, för deras nya webbplats är man inne på att ha meny som skulle kunna vara scrollbar i sidled. Detta för att kunna lösa plats och
utrymme så man får in annan information och samtidigt ska kunna ska ha menyn funktionell. Samtidigt är man inne på att ha större objekt i sina menyer.
21
ID Länkar
IP 2 Vi diskuterade länkar och hur man ska få dessa klickbara på ett bra sätt.
Många länkar som körs i löptext är ofta väldigt små. Finns det inga andra klickbara objekt i närheten då kan en länk ha en mindre träffyta då den inte riskerar att träffa något annat objekt. Det vi diskuterade var hur man kunde göra länksamlingar på varje sida, så man får en
gruppering med alla länkar och en markering i löptext som visar att det finns en länk här. Det här slutade med att vi undersökte träffytan på en länk, utifrån de 20 pixlar som var angivet som träffyta kunde man räkna om det och se att den faktiska träffytan var 5.2 millimeter.
IP 4 Vi pratar även om länkar, länkar är oftast små och har en liten träffyta.
Det här menar man att det är beroende av vad som finns runt omkring.
Är det enbart löptext så gör det kanske inte så mycket att man har en liten träffa då man inte riskerar att träffa andra objekt. Finns det däremot en mängd andra objekt i närheten blir det problematisk med små träffytor.
ID Visuell Feedback/Användarstöd
IP 1 Eftersom hover funktioner inte fungerar för touch måste man kunna visualisera att objekten är klickbara. Mobiltelefoner har inbyggda stöd i sina operativsystem, men om dessa fungerar för webbsidor är inte helt klart?
Man använder sällan breadcrumbs/pathways i mobiler, detta oftast beroende på platsbrist då det kan bara svårt att få in långa
navigeringslänkar. Ett alternativt sätt att lösa detta på är om man kan använda sig av färg och form, för att användaren ska kunna känna igen sig.
IP 2 Vi diskuterade hur man kan lösa visuell feedback till användaren när man använder mycket mobila enheter. Här nämner man den canvas funktion som finns i html5 där det går att programmera animationer, alternativt att man skulle kunna använda sig av jquery mobile.
22
ID Framtidens Webbutveckling
IP 1 Man måste komma ifrån att utveckla mobilanpassade webbsidor, eftersom det finns flera storlekar på telefonskärmar. Dessa ligger också väldigt nära till exempel Ipad mini. Enheter har skärmar som går i varandra så därför är den responsiva utveckling ett viktigt steg för webbutveckling som det mobila enheter. IP1 konstaterar att man kommer ifrån den vanliga typen av interaktioner mer och mer, då det kommer mer mobila enheter och man kommer ifrån användandet av muspekare och tangentbord.
IP 3 En aspekt är hur man kan se på framtiden med utvecklingen av webben.
Man kommer ifrån mus/tangentbord mer och mer. Man använder mer och mer touchskärmar.
ID Responsiv utveckling, indexsida
IP 3 Vi diskuterar den responsiva webbutveckling utifrån den prototyp som fanns, och det som påpekas är vikten av att man måste kunna erbjuda samma information och funktioner på alla enheter. Man får inte skala bort en viss typ av funktioner bara för att man kommer ner på en mobil enhet där plats och utrymme blir mindre.
En annan del som baseras på att ha menyn synlig är att den tar upp plats på startsidan. Åsikt som finns gällande slideshow och stora bilder är att man tycker dessa är intressant första gången man besöker sidan.
När man sedan återkommer bryr man sig inte så mycket dessa.
IP 4 Vi är inne på funktioner och information för den responsiv sidan, här påpekas det vikten av att man erbjuder samma funktioner och
information på alla enheter.
Vi pratade också om första sidan, lite om bilder och slideshows och vikten av den information som finns där för att kunna sälja in företaget.
Första sidan för ett företag är extremt viktigt, samtidigt är kanske inte slideshow ett nödvändigt objekt att ha.
23
5. Analys
I det här avsnittet kommer en redogörelse av analyser från primär- och sekundärdata. Någon analysmodell har inte använts, teori och datainsamling kommer att analyseras mot prototypen och det koncept (windows8) som har använts i denna studie.
5.1 Funktioner mellan enheter
Kadlec (2013) beskriver vikten av att ha samma information och funktioner tillgängliga på alla enheter. Detta för att man ska kunna få samma funktioner mobilt som finns på en desktop miljö. Det här ger en webbplats som är konsekvent mellan alla enheter, som användare ska man kunna känna igen sig när man använder webbplatsen mellan mobiltelefon, surfplattor och stationära datorer.
Den här aspekten har påpekats under de intervjuer som har gjorts, både från IP3 och IP4 betonar man vikten av att samma information och funktioner måste finns tillgängliga på
mobiltelefoner, surfplattor och datorer. En webbplats som är responsiv kan erbjuda det här och ge samma funktionalitet överallt, dock är man tvungen att strukturera om designläget i vissa enheter beroende av platsutrymme. Eftersom det går att relatera den här aspekten mot både litteratur mot de intervjuer som har gjorts kan man se att det är en viktig del när man pratar om webbutveckling.
Detta är inte relevant för att ge svar på problematiken i denna studie och det gör det inte heller.
Däremot betonar det vikten av denna studie, att man behöver hitta en bra lösning på den här typen av problem. Eftersom det är väldigt viktigt att erbjuda samma funktioner i alla enheter så dyker också problemen upp här, webbplatsen behöver bra stöd och användbarhet i alla
enheter.
5.1.1 Hover-efftekt på objekt
Dessa olika states (exempel on/off) som finns på ett objekt är en del man måste tänka på om man ska utveckla responsiva webbplatser. Att använda en hover-effekt på ett objekt fungerar utmärkt då webbplatsen befinner sig i desktop läge. Här skapas interaktionen med muspekare och funktion används på det sätt som den är tänk att göra. Om webbplatsen responsiv och användaren väljer att besöka sidan från sin mobiltelefon kommer utgångsläget att ha andra förutsättningar. Funktioner som hover-effekt inte är byggda för touchinteraktion som primär faktor, nu gäller det här även andra typer av mus-event (händelser som är kopplade till muspekaren).
IP1 menar att den här typen av funktioner måste man avaktivera när man utvecklar för touchinteraktioner, eftersom detta kan skapa problem för användaren istället. IP1 menar att det kan bli störningar på objekten som gör att användaren måste trycka två gånger istället för en.
IP4 är inne på en linje att man bör använda sig av release (när man klickar och släpper objektet) funktioner för touchobjekt. Detta för att skapa bättre förutsättningar för en
användare att minimera ”fat finger issue”. De objekt som är klickbara är ställda så de aktiveras när man släpper kommer användaren ha en möjlighet att kunna parera eventuella misstag.
Detta genom att dra fingret åt sidan till man hittar rätt objekt och sedan släppa fingret.
En förutsättning för att IP4 teori ska fungera är att man måste ha tydlig visuell feedback på alla objekt. Användaren måste tydligt kunna se vilket objekt som har blivit träffat för att kunna ges
24
den möjligheten att parera och träffa rätt objekt. Tanken är förmodligen väldigt bra och skulle kunna medföra en förbättrad möjlighet för användaren undvika eventuella misstag vid
touchinteraktioner. Däremot sker utförandet av en touchinteraktion väldigt fort, vilket resulterar i att användaren inte hinner upptäcka felet förens det är för sent.
Hoverfunktion är testad via den prototyp som finns redovisad i avsnitt 4.3 figur3, den här prototypen är testad både på mobila enheter och på desktop för att kunna få fakta över beteenden på vissa funktioner. Hover-effekten ska i det här fallet ge en grafisk feedback till användaren träffar objektet. De problem som IP1 är inne på kan inte bekräftas utifrån denna prototyp, hover funktionen aktiveras vid touchinteraktion och genererar samma visuella feedback som den gör för muspekare.
5.1.2 Precision för objekt
Park & Han (2012) beskriver i sin studie precisionstester på touch objekt i mobiltelefoner. I deras studie visar man upp bilder hur alla dessa träffytor ser ut, det här ger en väldigt bra bild av hur mycket av tummen som träffar på och utanför själva objektet. De visar upp dessa bilder på alla objekt som de har genomfört tester på, dessa är 4mm, 7mm och 10mm. Man redovisar även procentsatser av hur många som klarade av att genomföra dessa tester med ett lyckat resultat utifrån de mått man har valt att använda. Utifrån deras studie kan man konstatera att objekt som ligger på 10mm är där man får en bra träffyta på touchobjekt. Utifrån de övriga objekten kan man säga att 4mm är för litet för touchinteraktion och 7mm är en storlek som kan fungera beroende på vad som finns runt objektet. Det handlar hela tiden om storleken på ett objekt och dess förhållanden runt objektet.
Wu et al. (2011) hänvisar till studier där man har granskat mus- och touchinteraktion. Dessa två är lika snabba när avståndet till objektet är 4 pixlar eller mer. Man påstår också att objekten har haft storlekar på 4, 8, 16 & 32 pixlar. Det man kan ifrågasätta är hur långt avståndet är när man benämner det i 4 pixlar. Konverterar man pixlar mot millimeter för att få ett bättre
proportionsperspektiv är 4 pixlar ungefär 1 mm enligt UnitConversion (1998-2009). Objekten som anges på 4 och 8 pixlar är extremt små och förmodligen väldigt svåra att träffa med en touchinteraktion, det bör även vara svårt med en muspekare. Dessa fakta kan man ifrågasätta i jämförelse med övriga delar som redogör för att touchobjekt bör vara 10x10mm (37x37 pixlar).
Detta är dock en rekommendation för att skapa bra träffytor och användbarhet.
Forlines et al. (2007) redogör för de tester man har utfört. Skillnaden här är att testerna har gjorts mot större objekt, man utgår från 16 pixlar och uppåt. Utifrån deras redogörelse kan man se att touchinteraktion är snabbare när det gäller att träffa objektet. Detta går att relatera mot Wu et al. (2011) som redogör för att muspekaren är snabbare mot mindre objekt. Man kan se ett förhållande utifrån storleken på ett objekt och hur skillnaderna påverkar mus- och
touchinteraktionen.
Forlines et al. (2007) redogör också för det avstånd man har använt i sina tester. Man använde avstånd på 300, 400, 500, och 600 pixlar. Detta bör jämföras med Wu et al. (2011) som hävdar att mus- och touchinteraktion var lika snabb vid ett avstånd på 4 pixlar. Skillnaderna i dessa påståenden är väldigt stora, men utifrån den konvertering pixlar mot millimeter känns Forlines et al. (2007) påstående mer trovärdig. Forlines et al. (2007) redogör också för ett bättre
utförande för muspekaren när det gäller att släppa ett objekt, men den delen (dockning) är inte relevant i denna studie för responsiv webbutveckling.
25
Budiu och Nielsen (2011) redogör också för samma standardformat på 10mm för touchobjekt.
Mindre objekt skapar inte bara problem vid interaktion utan kan även vara svåra att upptäcka.
Deras artikel är en uppföljningsstudie så detta är fakta som framkommit när de har analyserat delar som har skapat problem. Samtidigt som man påpekar att förhållanden där många objekt ligger nära varandra försvårar utförandet av touchinteraktioner.
Utifrån de intervjuer som är gjorde kan man se att IP1 bekräftar att man kan utgå från att 10mm ger en bra standard när man ska arbeta med touchobjekt, samtidigt som att större
objekt underlättar även för användare med muspekare också. Finns det utrymme kan man med fördel skapa objekt som är större. IP5 bekräftar också detta, man kan tänka sig i den nya
utformningen på sin webbplats att använda större objekt. Dels för att få stöd för
touchinteraktioner men samtidigt att ge en bra accessibility (tillgänglighet) på webbplatsen.
IP4 nämner att det finns en gammal standard för touchobjekt där de ska vara 22x26 mm. Det här är förmodligen en standard som är definierad för automater av olika slag som använder touchskärmar. Denna standard är förmodligen inte relaterad till den nya tekniken med mobiltelefoner och webbplatser i alla fall.
Utifrån de fakta som framkommit kan man se att touchobjekt bör befinna sig runt 10mm i storlek för att kunna skapa bra möjligheter för touchinteraktioner. Skapar man objekt som ligger under den här storleken kommer det att skapa svårigheter i interaktionerna även om det fungerar bra för vissa människor med mindre objekt. En bra linje att gå efter är att större objekt underlättar användbarheten generellt sätt.
Här nedan kan vi se figur4 och figur5, två alternativ för menyer. Den vänstra är en vanlig meny som många använder på sina webbplatser och den högra är från den prototyp som använts i studien. Tanken är att visa skillnaderna i hur man utvecklar objekt när man ska använda touchinteraktioner. Man kan jämföra dessa mot de menyalternativ som ligger till vänster. Det man kan se är främst storleken på objekten, men också hur en grafisk komponent hjälper till att visualisera träffytan. Tydliga stora objekt underlättar för användaren när man skapar touchinteraktion, har man enbart en textlänk i menyn är det väldigt svårt att veta hur stor träffytan för objektet är.
Figur 4: textmeny Figur 5: knappbaserad meny
UnitConversion (1998-2009) tillhandahåller en funktion där man kan konvertera pixlar och millimeter mot varandra. Detta är nu en webbaserad tjänst så man kan ifrågasätta hur trovärdiga dessa konverteringar är. Den komponent som redovisas i figur6 har värden på 37x37 pixlar och enligt den konvertering som UnitConversion anger ska dessa resultera i 10x10 mm. Utifrån detta får man använda en rimlig slutsats att man ligger i närheten av 10mm och konvertering från denna sida är relativt trovärdig.
Figur 6: 37x37 pixlar (10x10 mm)
26
5.1.3 Länkar
Interaktion med länkar sker oftast genom att dessa är definierade i löptext. Oftast kan man se att träffyta på länkar är väldigt liten, normalt sett ligger dessa långt under de rekommenderade måtten för touchobjekt. Svårigheter med att träffa en länk är väldigt beroende på vad som finns runt omkring den enligt vad IP4 är inne på.
Budiu och Nielsen (2011:28) pratar om samma sak, man belyser problematiken med
touchinteraktioner när man har många små objekt som grupperas nära varandra. Man kallar det för ”fat finger issue”, man är klumpig med fingrarna och detta resulterar i att man kanske träffar två eller tre objekt samtidigt.
Det kan man konstatera är att väldigt få länkar har en träffyta som är 10mm, däremot är länkar oftast längre än 10mm så det ger kanske en större träffyta i sidled men man tappar yta på höjden. IP2 är inne på att man kan använda länksamlingar för varje sida för att gruppera länkar för sig. Göra grupperingar av den här typen är en gestalt princip som Benyon
(2010:336) beskriver. Det bygger på att man grupperar likheter med varandra, skulle man i det här fallet ha många länkar är en länksamling av den här typen ett alternativ. Detta gör att man kan få bort enstaka länkar som kanske blir svåra att utföra interaktioner i avseende till andra närliggande objekt.
Ett annat alternativ är att öka träffytan på en länk för att förbättra touchinteraktioner. Detta redogörs i prototypen, här visas ett exempel på hur en länk är skapad som en grafisk
komponent. Detta görs i syfte att visualisera hur stor träffytan är, nu är dessa gjorda utifrån det rekommenderade format för touchobjekt. En fördel är att man förbättrar interaktionsmöjlighet genom att förstora träffytan, nackdelen kan vara om man anser att det blir för stora och
störande komponenter. Den klassiska definitionen av hur en länk brukar se ut frångås och det kan vara en nackdel då användaren är van vid att en länk ska visas på ett specifikt sätt, detta exempel är väldigt fokuserat på att skapa en bra interaktionsmöjlighet för användaren.
Figur 7: Länksamling
27
5.1.4 Navigering
Navigering och menystrukturer är de delar på en webbsida som man kan anse är bland det som bör ha en hög prioritet. Om inte användaren vet hur de enkelt ska navigera sig runt på sidan kommer de förmodligen att lämna sidan direkt. När vi använder oss av responsiva
webblösningar är en meny som visas i figur4 inte helt optimalt. En generell uppfattning är att många som utvecklar menyer ofta bygger dessa för små i förhållande till de rekommenderade format för touchinteraktioner.
Delar av menykomponenterna från prototypen visas i figur5, detta är ett tankesätt som
grundar sig i windows8. IP1, IP2 & IP3 är alla inne på samma linje att menykomponenter som skapas i figur5 kommer att innebär bra möjligheter för touchinteraktioner. IP2 är dock inne på en nackdel med dessa kan vara att de tar stor plats, vilket medför att man inte får plats på annan information. Det kan vara så att vissa beställare har bilder eller annan information som ska var synlig direkt. IP3 är inne på en annan linje där man ser en fördel med den här typen av menystruktur. Man kan hålla en konsekvent linje mellan alla enheter, vilket gör att menyn kommer se likadan ut på en dator, surfplatta och mobiltelefon. IP5 är inne på att den här typen av idé med större komponenter för deras kommande webbplats, för att underlätta
interaktionsmöjligheterna. Man kan konstatera att det är ett bra sätt att använda större grafiska komponenter för touchinteraktioner. Däremot är det svårt att vara generell då varje fall ska utgå från beställarens behov och detta medför att lösningen kanske inte passar för alla.
Detta kan relateras till Budiu och Nielsen (2013) studie där man har kommit fram till att användartesterna har gett bättre utfall i den senare studien på de traditionella webbplatserna.
Den faktor som kan ligga till grund är att vi har fått mer mobila enheter och mer
touchinteraktioner. Detta kan ha skapat en större medvetenhet att man bör använda sig av större komponenter på webbplatserna idag.
5.1.5 Formulärdata
Det som har framkommit under studien gällande formulärdata är mycket fokus på hur man ska validera. Budiu och Nilsen (2011) diskuterar att man endast bör skriva in ett postnummer och sedan få ort kopplad per automatik. Detta är inget ovanligt, den typen av funktionalitet har vi haft tidigare också. Det man kan säga är att dessa funktioner blir ännu viktigare när man sitter med touchskämar för att underlätta för användaren.
Budiu och Nilsen (2011) diskuterar också att man bör kunna mata in ett datum i olika format och dessa ska tolkas korrekt. Det här påpekar även IP1 att man bör arbeta mycket med back- end (tekniska lösningar via programmering) lösningar för att inmatning av data ska kunna ske i olika format men ändå tolkas korrekt.
IP1 är även inne på att använda direkta valideringar och sedan automatisk hoppa till nästa fält.
Detta kan ses som ett bra sätt då man skulle kunna minimera antalet utförda interaktioner i en sekvens. Problemet ligger i att veta när data är korrekt, som ett exempel kan vi ta
telefonnummer. När vet man att telefonnumret är klart och kan skicka användaren vidare till nästa fält, eftersom telefonnummer finns i olika typer av format.
IP2 är inne på samma linje till viss del, i det avseendet att använda direkta valideringar. Men skillnaden här är att man validerar för att se att data är accepterad innan man kan gå vidare.
Som ett exempel med en email, den genomför validering att en korrekt email är skriven innan användaren kan gå till nästa fält. Detta för att undvika att man fyller i ett helt formulär och
28
sedan får felmeddelande att data inte är korrekt skriven. Det blir ett sätt att minimera chansen för att användren ska göra fel och sedan behöva gå tillbaks.
IP4 är inne på en linje där man skapar två knappar (tab funktionalitet som finns på
tangentbord) som ska fungera för att navigera framåt och bakåt genom formuläret. Nu finns den här typen av funktion på vissa telefoner redan, men implementerar man den här typen av funktion skulle det säkert kunna vara väldigt bra.
Det man kan konstatera som en viktig faktor när det gäller inmatning av formulärdata att minimera antalet utförda interaktioner. Kan man göra det genom att minimera att användaren gör fel eller att man har bra back-end lösningar som byter fält automatiskt. Då kan man
åstadkomma bra utförande för touchskärmar. Samtidigt som Budiu och Nilsen (2011) påpekar att man bör logga inmatningshistoriken. Skulle däremot något bli fel är det bra kunna
återställa eller återskapa tidigare data utan att behöva skriva in det på nytt.
5.1.6 Visuell Feedback
Visuell feedback är en viktig del för att kunna hjälpa användaren. IP1 påpekar att hover funktioner och andra mus-event inte fungerar för touchinteraktioner. Dock har prototypen provats och den hover funktion som finns i denna här prototypen skapar visuell feedback när sidan körs på mobiltelefon. Samma effekt skapas när man aktiverar objektet genom
touchinteraktion som när muspekaren ställer sig på objektet.
IP2 är inne på canvas funktioner som kommit med html5. Man kan skapa visuella effekter via canvas eller om man väljer att använda jquery (bibliotek med javascript funktioner). Canvas funktionerna som kommit med html5 har skapat möjligheter som inte har funnits förut. Det finns alla möjligheter att skapa visuella effekter eller animationer. Dock finns det en risk att dessa kan bli väldigt tunga och påverka prestandan på webbplatsen.
5.1.7 Indexsida i responsiv webbutveckling
Indexsidan är ett svårt område när det kommer till responsiv webbutveckling. Detta gäller speciellt när man kommer till mobiltelefoner, man vill ha in så mycket information som möjligt på väldigt begränsad yta. Ett exempel är bilder eller slideshows, är dessa så pass viktiga att man måste prioritera dessa i förhållande till meny och navigeringsstrukturer. Det handlar om en prioritering vad som anses vara viktigast att visa när sidan öppnas. Dessa problem finns inte lika tydligt när sidan körs på surfplattor eller datorer då man har större utrymme.
Både IP3 och IP4 påpekar tydligt att sidan måste vara konsekvent, den måste erbjuda samma funktioner på alla enheter. Det här är samma påpekande som Kadlec (2013) gör också. Både IP3 och IP4 är inne på samma linje när det gäller stora bilder och slideshows (bildspel), att dessa komponenter bör kunna undvikas. Detta ska man påpeka att det är ett perspektiv från utvecklingssidan, många beställare kan anse att bilderna fyller en funktion för deras
verksamhet.
Vill man ha en grid-layout med menykomponenter för att underlätta touchinteraktionen och användbarheten på sidan eller vill man skapa en attraktivare design för besökaren. Det man kan relatera till är Yasuragi (n.d) som nämndes tidigare. Här har man valt att använda en grid- layout vilket skulle medföra bra touchinteraktioner, dessa komponenter består också av små bilder med menytext. En smart lösnings där man kan kombinera både touchinteraktion och attraktiv design.
29
5.1.8 Framtiden utveckling
För att knyta ihop de delar som analyserats tidigare, vad som sker de kommande åren är svårt att veta. Men det man kan konstatera är att utveckla mobilanpassade webbplatser är något man bör komma ifrån. IP1 nämner det att antalet enheter börjar bli så pass många att man behöver använda responsiv utveckling för att kunna vara funktionella överallt.
IP3 är inne på att muspekare och tangentbord är delar som minskar mer och mer. Det kommer hela tiden nya enheter med touchskärmar. Detta visar att man måste ta med de aspekter som gäller för touchinteraktioner redan från början. Man måste ha det tankesättet för
webbutveckling i sin helhet, det är inte bara mobiltelefonerna som använder touchinteraktion.
6. Slutsatser
Det man kan se från denna studie är att det finns vissa delar som man bör använda som rekommendationer. Generellt sett kan man se att storleken på ett objekt och hur man grupperar objekten har väldigt stor betydelse för touchinteraktioner. Utifrån det som
framkommit i denna studie är 10mm en rekommenderad storlek. Man kan tänkta sig att man kan gå ner lite mindre om det finns mycket fri yta runt objektet, men det bör inte bli mindre än 7-8mm.
Menyer och navigeringsstruktur har varit en intressant del i denna studie. Som det ser ut idag gör de flesta en kollaps på menyn i mobilformat. Det bli en drop-down som man kan öppna och stänga. När det kommer till att skapa fria ytor är det här ett bra sätt, däremot går många mot de rekommendationer som framkommit i studien. Man skapar små objekt som sitter nära intill varandra vilket skapar svåra användarförhållanden. Här har prototypen kommit in i syfte att pröva om man använder en grid-layout med knappar (windows8). Man kan konstatera att sidan bli mer konsekvent i utformning, det skapar bra möjligheter för touchinteraktioner. Det skapar en bra användbarhet mot alla enheter, man får bra stöd både för mobil, surfplattor och datorer.
Man använder visuella grafiska delar för att ge feedback mot användaren. Man kan även se en möjlig fördel med att använda grafiska delar för att visualisera träffytor också. Det
framkommer att användare förväntar sig träffytor som är större än textlänken. Därför kan det finnas en fördel att ha en grafisk del som visar hur stor själv träffytan är. I syfte att visa att ytan är större än själva textlänken som finns. Detta kan medföra att användaren direkt kan utföra interaktionen istället för att fokusera på precision.
Vid användande av touchinteraktioner tänker man oftast på att objekt ska vara lätta att träffa.
Men när det kommer till formulärdata blir ett annat tankesätt, här får man se hela processen som en sekvens. I den här sekvensen får försöka minimera antalet utförda interaktioner för användaren. Det kan bestå av att minimera ett fel eller att slippa utföra en onödig interaktion. I detta fall handlar det om att underlätta processen, vilket alltid ska finns där. Men det blir mer påtagligt när man sitter med små enheter och svårare interaktionsförhållanden.
För att besvara den frågeställning för denna studie, användande av en grid-layout med knappar/ikoner (windows8) skapar ett bra stöd och förbättrade möjligheter för
touchinteraktioner. De delar som har redogjorts innan är rekommendationer för att förbättra förhållanden mellan olika enheter för responsiv webbutveckling. Det man kan konstatera är att
