Uppsala Universitet Institutionen för informationsvetenskap
Webbdesign för smartphones
– hur man anpassar ett befintligt webbaserat system
Mikael Viklund
Handledare: Mikael Berg Examinator: Andreas Hamfeldt VT-2010
Examensarbete C-nivå
Abstract
With the new generation of smartphones the boundaries for what is a mobile phone and what is a computer becomes more subtle. 2009 the shipment of smartphones with touchscreen more than double the 2008 figure and the total amount of smartphones is now over 10 % of the total worldwide shipments of mobile phones. There’s still one problem to solve and that is the lack of web content specifically adapted for smartphones.
The purpose of this paper is to identify and analyze from a user and usability perspective how to make a successful migration and design of a user interface for an existing web based system so that it also fit smartphones.
The paper starts with a theoretical reference material containing examples of different approaches for design and migration of an interface.
A case study is performed and prototypes are designed with support from guidelines and recommendations in the theory part.
The conclusion stipulates that in the present situation there are no shortcuts when it comes to migration of an existing web based system for the mobile web. The recommendation is a specific interface for each different unit that are going to interact with the system.
Sammanfattning
Med den nya generationen smartphones blir gränsen för vad som är telefon och vad som är dator alltmer diffus. Försäljningen av smartphones med touchscreen har fördubblats från 2008 till 2009 och totala mängden smartphones uppgår till över 10 % av den totala mobiltelefonsförsäljningen världen över. Ett problem som återstår att lösa är bristen på webbinnehåll anpassat för smartphones.
Syftet med den här uppsatsen är att utifrån ett användar- och användbarhetsperspektiv analysera och identifiera vad som krävs för att göra en lyckad design och anpassning av ett användargränssnitt i ett befintligt webbaserat system så att det även passar smartphones. Uppsatsen inleds med ett teoretiskt referensmaterial innehållande exempel på olika ansatser vid migrering och design av ett gränssnitt.
En fallstudie utförs där tre olika prototyper designas med stöd av riktlinjer och rekommendationer i teoridelen.
I en av slutsatserna konstateras det att i dagsläget inte finns inga genvägar om man vill anpassa ett befintligt webbaserat system för den mobila webben. Det som rekommenderas är ett specifikt anpassat gränssnitt för varje tänkt enhet som ska interagera med systemet.
Nyckelord
Innehåll
1 Inledning... 6 1.1 Bakgrund ... 6 1.2 Frågeställning ... 6 1.3 Syfte ... 7 1.4 Avgränsningar ... 7 1.5 Disposition ... 7 2 Metod ... 8 2.1 Forskningsmetoder ... 8 2.2 Litteraturgranskning ... 8 2.3 Datainsamlingsmetoder ... 82.4 Reliabilitet och validitet ... 9
2.5 Fallstudie ... 9
2.6 Kvalitativ analys... 10
2.7 Tillvägagångssätt... 11
3 Teori ... 12
3.1 Mobil webbstandard och WebKit ... 12
3.2 Utvecklingsmiljö ... 15
3.3 Ramverk ... 16
3.4 Design av ett användargränssnitt... 16
3.5 Metoder vid migrering av ett användargränssnitt... 22
3.6 Anpassningsprocess på servernivå efter typ av enhet ... 24
4 Fallstudie ... 25
4.1 Genomförande ... 25
4.2 Resultat... 29
5 Diskussion och slutsats... 31
5.1 Fortsatt forskning ... 32
Källförteckning... 33
Figurförteckning... 35
Bilaga 1 ramverk ... 36
Bilaga 2 samtal med uppdragsgivaren på Transitor AB... 37
Bilaga 3 begreppet smartphones, de sex största plattformarna och dess standardwebbläsare. 38 Bilaga 4 utvecklingsmiljö för den mobila webben... 41
1
Inledning
Uppsatsen kommer att beskriva, med bl.a. hjälp av en fallstudie, olika ansatser vid anpassning av ett befintligt webbaserat systems användargränssnitt så att det även passar för smartphones (se Bilaga 3). Fokus kommer att ligga på de rekommendationer och riktlinjer som finns idag. I detta inledningskapitel ges en bakgrund till valet av uppsatsämne, frågeställningen formuleras, syftet preciseras och uppsatsen avgränsas för att omfattningen inte ska bli för stor.
1.1
Bakgrund
Fundamentalt sett finns det bara ett Internet. Dess innehåll består av standardiserade märkspråk, stilmallar, skriptspråk (se 3.2, 3.3 och 3.4) och multimedia som synliggörs genom webbläsare. (Rahn & Lal, 2010)
Med framstegen inom den trådlösa kommunikationstekniken och uppkomsten av en mobil plattform för smartphones kommer mobila webbapplikationer vara ledande i nästa våg av teknisk innovation. (Liu, 2009)
Att utveckla för den mobila webben är en relativt ny disciplin eftersom den mobila webben är ny, användarna är nya och de mobila webbläsarna är nya. Den mobila webben har introducerat komponenter anpassade för smartphones i form av märkspråk, webbläsare och servrar1. (Rahn & Lal, 2010)
Antal personer som använder smartphones ökar kontinuerligt. Enligt försäljningsstatistik världen över har försäljningen av smartphones fördubblats från 2008 till 2009 och under 2010 spås den öka ytterligare. (Canalys, 2010)
Ett problem som återstår att lösa är bristen på webbinnehåll specifikt anpassat för
smartphones; det mesta innehållet är fortfarande skapat för enheter med stora skärmar och en
mer tilltagen hårdvaruprestanda. Konsekvensen blir att ett användbarhetsproblem uppstår när navigeringen och interagering på de små skärmarna blir alltför omfattande. (González, m.fl., 2006)
Design av webbsidor anpassade för smartphones innebär att sidornas struktur, menyer, text och grafik måste anpassas. Designers måste förhålla sig till design på ett nytt sätt vilket kräver ett nytt designtänkande (Kärkkäinen & Laarni, 2002).
Ett stort antal riktlinjer för webbdesigners finns tillgängligt på Internet och kan integreras med det egna projektet för att säkra konsekvens och vidhållande av utvecklade standarder. (Shneiderman & Plaisant, 2010)
1.2
Frågeställning
Frågeställningarna som denna studie ska besvara är följande:
1
Hur anpassar man ett användargränssnitt för ett befintligt webbaserat system så att det även passar för smartphones?
Måste man skapa ett helt nytt användargränssnitt eller finns det program som automatiskt kan generera ett användargränssnitt?
1.3
Syfte
Syftet med uppsatsen är att analysera och identifiera vad som krävs för att göra en lyckad anpassning och design av ett användargränssnitt i ett befintligt webbaserat system så att det även passar smartphones. Fokus kommer att ligga på att tilltala ett så brett spektrum av användare som möjligt och följa de rekommendationer och riktlinjer som finns idag.
1.4
Avgränsningar
Jag har valt att avgränsa studien till att enbart omfatta anpassning och design av ett användargränssnitt för ett i dagsläget fungerande webbaserat system och med den avgränsningen avses att anpassningen i första hand kommer att omfatta smartphones med
touchscreen2.
1.5
Disposition
I kapitel ett formuleras frågeställningen och syftet preciseras.
I kapitel två beskrivs vilka metoder som används i uppsatsen.
I kapitel tre ges en teoretisk bakgrund för de förutsättningar utvecklare har att förhålla sig till; språk som används, vilka standarder som stöds av mobil webbstandard samt de riktlinjer och rekommendationer som gäller och kan tillämpas vid anpassning och design av ett användargränssnitt.
I kapitel fyra beskrivs genomförandet av fallstudien och resultatet.
I kapitel fem diskuteras uppsatsens innehåll, en slutsats framförs med riktlinjer och rekommendationer och avslutas med tips om framtida forskning.
2 Touchscreen eller pekskärm är en tryckkänslig skärm där användare interagerar direkt på skärmen med penna
2
Metod
I detta kapitel görs en metodbeskrivning för att säkra möjligheten att göra om denna studie med liknande resultat. Inledningsvis beskrivs litteraturgranskning, datainsamlingsmetoder redovisas, följt av reliabilitet och validitet, fallstudien som strategi, kvalitativ analys och avslutningsvis tillvägagångssätt.
2.1
Forskningsmetoder
I forskningssammanhang nämns två ansatser: kvantitativ och kvalitativ. Kvalitativ forskning går ut på att få fram karaktär och egenskaper i området som undersöks till skillnad från kvantitativ forskning som går ut på att fastställa mängd. I stället för förekomst eller frekvens som är den kvantitativa forskningens fokus lägger den kvalitativa forskningen tyngdpunkten på forskningsområdets innebörd eller mening. De två angreppssätten utgör två olika läger där det kvalitativa ställer frågor som vad handlar det om eller vad betyder det. Det kvantitativa angriper istället problem med frågor som hur vanligt är det eller vilka är sambanden. (Widerberg, 2002)
2.2
Litteraturgranskning
Normalt används litteraturgranskning för att få idéer och upptäcka passande material till forskningsarbetet. Det slutliga målet är sedan att kunna hävda att det genererat ny kunskap. Till tillförlitliga litterära resurser räknas böcker, vetenskapliga artiklar, rapporter och doktorsavhandlingar. Man kan bryta upp genomförandet av granskningen i olika delar: Söka efter resurserna, införskaffa dem, fastställa vilka som ska användas, läsa dem, kritiskt utvärdera om de tillför relevant betydelse för uppsatsen och slutligen skriva en kritisk granskning av materialet. Det viktiga är att:
Ämnet är värt besväret
Ämnet inte repeterar tidigare arbeten
Arbetet skapar ny kunskap som inte var känd tidigare.
När det gäller granskning av källor från Internet har många bristfällig kvalité och särskild uppmärksamhet bör därför beaktas beträffande författarskap, källhänvisning, trovärdighet och äkthet.
(Oates, 2006)
2.3
Datainsamlingsmetoder
Data kan delas upp i primärdata som fås genom fältundersökningar t.ex. genom intervjuer och sekundärdata som fås genom skrivbordsundersökningar t.ex. via litteraturstudier
Med datainsamlingsmetoder menas producering av empiriskt data som kan vara antingen kvantitativ eller kvalitativ. Här följer exempel på fyra metoder:
Observationer som iakttar hur människor agerar i vissa situationer
Frågeformulär som ställer frågor rörande det aktuella forskningsområdet
Dokumentstudier kan vara existerande källor men även källor som uppstår enbart genom forskningsprocessen som t.ex. forskardagbok och även multimediadokument som fotografier, diagram, videos och animationer.
(Oates, 2006)
2.4
Reliabilitet och validitet
Validitet avser att man mäter det som är relevant i sammanhanget medan reliabilitet avser att man mäter på ett tillförlitligt sätt.
Kvantitativ och kvalitativ forskning skiljer sig vid bedömningen och användningen av validitet och reliabilitet. I kvantitativa sammanhang bestämmer man i regel före datainsamlingen påbörjas vilken datainsamlingsmetod med känd och acceptabel reliabilitet och validitet som används för det syfte man vill uppnå. I kvalitativa sammanhang arbetar man kontinuerligt under hela datainsamlingsprocessen med validitet och reliabilitet.
Validitet och reliabilitet i studier med kvalitativ inriktning handlar om att kunna beskriva att man har samlat in och bearbetat data på ett systematiskt och hederligt sätt. I den slutliga rapporten beskriver man även förutsättningarna inför projektet och hur resultaten under processen har vuxit fram.
Man bör alltid sträva efter hög validitet och reliabilitet. (Gunnarsson, 2002)
2.5
Fallstudie
En fallstudie är en empirisk undersökningsmetod som syftar till att ge detaljerade kunskaper inom ett valt område i ett verkligt sammanhang. Studien kännetecknas av att fokus ligger mer på djup än bredd, man ser mer till komplexiteten än enskilda isolerade faktorer och man använder ett stort urval av källor och metoder där datainsamlingen representeras av intervjuer, observationer och dokumentation.
Fallstudien kan ha olika avsikter och vara undersökande, beskrivande eller förklarande. Den undersökande definierar frågor och hypoteser som används i den påföljande studien, den beskrivande leder till en innehållsrik detaljerad analys av valt fall och dess kontext och den förklarande tar den beskrivande ett steg till genom att försöka förklara varför saker hände på det vis de gjorde. Oavsett studieansats kan man välja antingen ett eller flera fall. Den vanligaste ansatsen är att utreda ett fall.
Fallstudien kan även variera i ansatsen till tid:
En historisk studie undersöker vad som hänt i det förflutna.
En kortsiktig nutidsstudie undersöker nuet.
En långtidsstudie sträcker sig från en månad till ett par år.
bland och kan baseras på följande kriterier:
Typfallet är ett fall som har många likar. Om man bestämmer sig för att använda sig av detta typiska fall, gör man det vanligtvis för att man på det viset kan säga någonting om många andra fall.
Avvikaren är ett fall som i något avseende skiljer sig från typfallet. Därför kan det säga något om vilken betydelse den avvikelsen kan ha för förhållandena jämfört med typfallet.
Fallet som prövar teorin kan vara, beroende på vilka teoretiska utgångspunkter man har, något speciellt fall som är särskilt relevant och kan användas för att pröva om undersökningens teorier håller.
Det unika fallet är när oförutsedda händelser kan göra att det uppstår unika situationer, där man inte har några olika fall att välja bland.
Det bekväma fallet innebär att man inte bör välja ett fall där huvudskälet är att det fallet ligger närmast till hands. Om man däremot har flera fall att välja på och de alla är lika ändamålsenliga, kan man spara resurser genom att välja det som man lättast kan få tillgång till.
Det finns olika sätt att länka teori till fallstudier och kan användas till att bygga nya teorier, prova existerande teorier och utvärdera alternativa teorier.
(Oates, 2006)
2.6
Kvalitativ analys
Kvalitativa forskare har kritiserats för att inte tillhandahålla tillräckligt med information hur de gjort dataanalysen; hur de arbetat med rådata fram till slutsatsen. Ofta är det som om slutsatsen uppenbarat sig genom ren magi.
Man skiljer på olika typer av data som delas in i textbaserade data och icke-textbaserade data. De icke textbaserade omfattas av bilder, ljudklipp, videos, och multimediadokument.
Det finns två ansatser vid kvalitativ dataanalys:
Induktiv innebär att forskaren har en fullständigt öppen inställning till det han undersöker och låter materialet tala för sig.
Deduktiv innebär att forskaren först utvecklar en egen teori som sedan prövas. Fördelar med kvalitativ dataanalys:
Innehållet kan vara rikt och detaljerat och innehålla ord, ljud, webbsidor och bilder, allt av värde för ett informationssystem och ett databehandlande forskningsarbete.
Det finns möjlighet till alternativa förklaringar snarare än antagandet att det endast finns en enda korrekt förklaring. Detta innebär att det finns möjlighet att olika forskare kan nå skilda slutsatser med samma utvärdering av materialet.
Nackdelar med kvalitativ dataanalys:
Det finns en fara att känna sig översvämmad av mängden data kvalitativ forskning kan generera och forskare får svårt att hitta mönster och teman.
Icke-textbaserat data och dess analyser är det svårare att passa in i teser och på papper än textbaserat data.
(Oates, 2006)
2.7
Tillvägagångssätt
Studien baseras i huvudsak på deskriptiva kvalitativa data erhållna dels genom en litteraturstudie och dels genom en fallstudie. Beslutet att främst välja egenskaps- och karaktärsbestämmande kvalitativa data följer naturligt av studiens syfte då jag är intresserad av att skapa en helhetsförståelse där avsikten är att fånga processen för hur man anpassar ett användargränssnitt för ett befintligt webbaserat system så att det även passar smartphones. Analysmomentet följer ett induktivt synsätt där jag går in helt förutsättningslöst utan egna förutfattade meningar om vad undersökningen kan komma att leda fram till eller vilka slutsatser som kommer att kunna dras av det insamlade materialet.
Som strategi görs en fallstudie där en prototyp för ett användargränssnitt designas och kan betraktas som en kortsiktig nutidsstudie. Källan är i huvudsak dokumentationen i teoridelen, men följer även förlagan och vissa önskemål från uppdragsgivaren (se bilaga 2). Vissa komparativa inslag återfinns där det funnits relevant att jämföra förlagan med prototyperna. Teoriavsnittet baseras på litteratur, vetenskapliga artiklar samt uppgifter hämtade från Internet. Generellt sett har källorna använts för att ge teori som på en mer övergripande nivå beskriver det uppsatsen behandlar, men har även i ett mer specifikt hänseende bidragit med mer fokuserad teori.
För att säkra validitet och reliabilitet i litteraturstudien har de vetenskapliga artiklarna främst hämtats ur databaserna ACM och IEEE. De sökord som använts var ”smartphones”, ”mobile
webdesign” och ”human-computer interaction”, men även mer specifika sökord som
”usability” och ”userinterface” har använts för att ytterligare ge mer specifik substans åt de olika avdelningarna i teoridelen.
Eftersom ämnet är relativt nytt och lite forskning har gjorts i ämnet har det varit nödvändigt, för att få en uppfattning om smartphones-marknaden av idag, att även ta med visst innehåll i artiklar från webbupplagor av magasinen IDG, M3 och Computer Sweden. Det använda materialets vetenskapliga reliabilitet och validitet kan ifrågasättas men frambringar i sammanhanget en fingervisning om vad som kommer att gälla framöver i mobila sammanhang.
3
Teori
För att ge en uppfattning om vilka tekniker som finns att tillgå och tänkbara språkval som kan göras har jag i detta kapitel sammanställt vad som ingår i mobil webbstandard, de riktlinjer och rekommendationer som gäller vid design av ett användargränssnitt, teorier över olika ansatser vid migrering, val av utvecklingsmiljö, tillgängliga ramverk och hur man gör en anpassning på servernivå.
3.1
Mobil webbstandard och WebKit
WebKit är en klientbaserad3 layout och renderingsmotor för webbläsare och tillhandahåller strikt uppfyllande webbstandard utan att offra prestanda. Den kraftfulla webbläsarmotorn är fundamentet i många av de mobila plattformarnas standardwebbläsare.
Idag finns sex stora mobila plattformar på marknaden (se bilaga 3). De mobila plattformar som idag använder WebKit i sina standardwebbläsare är: Android, Iphone, Symbian och Palm.
Den version av WebKit som används idag utvecklades ursprungligen av Apple när man skapade en webbläsare för sitt operativsystem Mac OS X. Detta gjordes genom att förbättra HTML och JavaScript komponenter från ett KDE4 projekt. 2005 släppte Apple WebKit som öppen källkod. WebKit består av två bibliotek: JavaScript Core och Web Core. Tillsammans kontrollerar de renderingen av webbsidor d.v.s. det som möjliggör den grafiska återgivningen av sidorna. Det som motsvarar mobil webbstandard och som WebKit stödjer och är:
HTML 4.01, XHTML 1.0, delar av HTML 5 (se 3.1.1)
CSS 2.1 och delar av CSS3 (se 3.1.2)
JavaScript 1.8, AJAX, och DOM nivå 1, 2, och 3 (se 3.1.3)
(Rahn & Lal, 2010)
3.1.1 Märkspråk
Vid val av språk finns än så länge inte något universellt. Webbläsarna i smartphones varierar i sina förmågor. Vid språkval bör man ha klargjort vilka typer enheter som webbsidan ska passa för och anpassa valet därefter genom att modifiera och optimera syntaxen. På detta vis kan man tillhandahålla bästa möjliga mobila webbupplevelse och undvika inkompatibilitetsproblem. Med denna metod tar man både hänsyn till webbläsarnas förmågor och tillkortakommanden.
HTML5 är publiceringsspråket på WWW6 och är det som normalt sett används till hemsidor skapade för datorer med stora skärmar, där den sedan 1998 gällande
3 Klient är oftast ett program på en dator, t.ex. en webbläsare som används för att tolka innehållet som erhålls
från en webbserver (se 21) efter ett anrop från klienten. (CS 2010)
4 KDE är en sammanslutning som använder fri programvara (open source) när de utvecklar plattformsoberoende
applikationer (KDE, 2010)
5 Hyper Text Markup Language (W3C, 1999) 6
versionen är 4.01 (1997 kom 4.0). HTML är ett format där dokumentets struktur och logik bestäms av författaren, medan läsaren styr hur texten kommer att presenteras.
XHTML7 är en XML8 formaterad version av HTML där HTML och dess taggar används till fullo men med de strikta syntaxkraven som återfinns hos XML. Anledningen till att XHTML är att föredra framför HTML är att HTML har en mindre strikt syntax. Stationära datorers webbläsare gör enastående jobb med att korrigera fel som uppstår. Den strikta syntaxen hos XHTML underlättar för de mobila webbläsarna som kan ägna sig åt sidrendering istället för felsökning av koden och försöka avgöra skaparens intentioner med sidan. Tack vare begränsad processorkraft och minneshantering hos smartphones bör en striktare syntax därför prioriteras.
XHTML–MP där MP står för mobile profile är en variant av XHTML med inriktning på att ta de begränsningar som finns i mobila enheter med i beräkningen. Detta är det språk som många anser vara standard.
HTML5 är nästa stora publicering av ett grundläggande språk för webben. Det är en kombination som gör att utvecklare antingen kan använda den mer förlåtande HTML syntaxen eller använda den strikta XML syntaxen. Enligt W3C9 beräknas HTML5 uppnå rekommendationsfasen år 2012. Tiden anses då vara mogen för implementation av hela specifikationen i webbläsarna för både mobila och stationära enheter.
(Rahn & Lal, 2010; W3C, 1999 & 2010)
3.1.2 Stilmallar
Numera är det vanligt att webbutvecklaren själv styr presentationen av HTML-dokumentet med stilmallar, så kallade CSS10.
CSS introducerades inom HTML 4.0 specifikationen med avsikt att separera formatering från innehåll och på så vis uppnå en precisare sidlayout med kontroll över formateringen av sidan. CSS är designat att vara hierarkisk, vari basstilar ärvs och designers behöver endast ange ändringar i särskilda stilattribut. Detta minimerar redundans, inte bara ifråga om innehåll, utan även ifråga om stilspecifikation.
CSS3 specifikationen är från 2001 och vissa delar av den stöds av WebKit.
CSS 2.1 specifikationen är från 2009 och WebKit har fullt stöd för den.
Stilmallarna stöder inte bara separation av innehåll från presentation. I kombination med något märkspråk och JavaScript kan CSS användas för att skapa ett interaktivt användargränssnitt.
(Furth, 2008; Rahn & Lal, 2010; W3C, 2001 & 2009)
3.1.3 Skriptspråk
Ecmascript, mer känt som JavaScript, är det vanligast förekommande skriptspråket.
7 Extensible Hyper Text Markup Language (W3C, 2010) 8 Extensible Markup Language((Rahn & Lal, 2010)
9 World wide web consortium är den organisation som fastställer standarder för publiceringsspråk. (CS 2010) 10
JavaScript är ett procedurellt11 och objektorienterat12 skriptspråk, utvecklat av Netscape.
Javascript används främst på klientsidan i webbtillämpningar, det vill säga koden exekveras
av Webbläsarens JavaScript-motor när webbsidan laddas, eller som svar på en händelse utlöst av en användare. JavaScript kan även användas för mer avancerade funktioner i en webbläsare såsom spel och bildbehandling. Då Javascript används i webbläsare arbetar det mot ett gränssnitt som kallas Document Object Model (DOM).
För att förenkla användandet av Javascript har Javascript-bibliotek skapats. Dessa innehåller funktioner och objekt som man kan återanvändas.
AJAX13 är ett samlingsnamn för bland annat dessa tekniker:
XMLHttpRequest14, tillåter JavaScript på en webbsida att göra anrop till webbservern15 utan att sidan laddas om.
DOM, tillåter JavaScript att skriva om innehåll på den aktuella sidan.
XHTML
CSS
XML, används för att formatera data som transporteras mellan klient och server. Dessa tekniker används för att förenkla och snabba på interaktionen mellan användare, webbsida och bakomliggande system. Just XMLHttpRequest är det som gjort AJAX populärt och fungerar i stort sett likadant i de flesta av marknadens webbläsare.
(Rahn & Lal, 2010; W3C, 1999)
3.1.4 Metataggar
Mobila metataggar (meta tags) kan användas i XHTML och HTML för att markera att dokumentet är optimerat för mobila enheter. Mobila sökmotorer och mobila webbläsare letar efter mobila metataggar för att identifiera och rendera mobiloptimerat märkspråk.
Vanligt mobilt webbinnehåll identifieras via dokumenttypdeklarationen doctype och om språket definieras som XHTML blir det per definition optimerat för mobila enheter.
Dagens avancerade smartphones är kapabla att rendera både HTML 4 och 5 (en del klarar både JavaScript och Ajax). Men fortfarande föredrar designers att leverera mobiloptimerad webbupplevelse till dessa enheter.
Microsoft uppfann den mobiloptimerande metataggen för att kontrollera layoutbredden för märkspråk renderat i Internet Explorer Mobile. Innehållet i metataggen är en integer16 som i
11 Procedurell programmering är uppbyggd som en procedur, det vill säga ett antal instruktioner som ska
genomföras i en viss ordning. (CS,2010)
12
Enligt objektorienterat synsätt uppfattar man ett datorprogram som en modell av den verklighet som programmet ska samverka med. De enskilda enheterna i ett program, objekten, är då modeller av verkliga eller tänkta ting i programmets omgivning och ett datorprograms uppgift är att manipulera objekten. I programmen använder man klasser för att avbilda och beskriva objektens egenskaper. (Skansholm, 2005)
13
AJAX står för Asynchronous JavaScript with xml (Rahn & Lal, 2010)
14 XMLHttpRequest, där http står för hypertext transfer protocol och används för sig till att överföra hemsidor.
XMLHttprequest används för att överföra information i XMLfiler mellan server och klient (Rahn & Lal, 2010)
15 Ett program installerat på en dator som betjänar andra datorer, s.k. klienter (se 9). (CS,2010) 16
pixlar17 anger bredd. Metataggens närvaro tvingar fram en enkel kolumnlayout till den specificerade bredden och förhindrar att webbläsaren från att modifiera layouten till att passa den mobila enhetens skärm.
Det finns även en metatagg som heter viewport (se bilaga 5) och den kontrollerar den logiska dimensionen och skalbarheten för webbläsarnas fönstervy hos många smartphones, vilket medger användare att zooma in och ut. De mobila webbläsare som använder den är bl.a. Safari, Android, webOS, Opera Mobile och BlackBerry (se bilaga 3). Viewport metataggens närvaro indikerar att märkspråksdokument är optimerade för mobila enheter.
(Rahn & Lal, 2010)
3.2
Utvecklingsmiljö
Utvecklingsmiljö, eller IDE18, är benämningen på ett datorprogram eller programsvit som tillsammans med ett antal funktioner är avsedd att underlätta vid programmering. Programsviten innehåller vanligtvis textredigerare, kompilator och felsökare:
Textredigerare (texteditor) är ett program i vilken programkod, begriplig för människor, skrivs.
Kompilator (compilator) är ett program som översätter koden till ett lågnivåspråk, oftast maskinkod så att datorn förstår den.
Felsökare (debugger) är ett program som gör det möjligt att steg för steg söka igenom koden efter eventuella felaktigheter.
För att utveckla mobila webbaserade användargränssnitt för smartphones krävs inga specifika mjukvaruverktyg eller IDE:s, så det är fritt att välja under förutsättning att det finns stöd för något märkspråk. I vissa fall kan textredigeringsprogrammet notepad duga, men det underlättar med en lite mer avancerad utvecklingsmiljö, framförallt vid felsökning i koden. För att skapa dynamiska webbsidor kan t.ex. Java19, PHP20 eller ASP.NET21 användas tillsammans med CSS för stilkontroll och JavaScript för interaktivitet på klientsidan. Gemensamt för dessa är de exekveras och översätts på servern till html som sedan skickas tillbaka till klienten.
Vid utveckling finns en rad program att välja bland (se bilaga 4).
Om man inte har tillgång till en smartphone under utvecklingsarbetet, vilket naturligtvis är det bästa för att se hur användargränssnittet renderas i en mobil webbläsare, finns det mobila webbläsaremulatorer och simulatorer att tillgå fritt via Internet som kan användas på stationära eller bärbara datorer (se bilaga 1). De är inte helt tillförlitliga och finns inte tillgängliga för alla typer av plattformar och enheter, men kan fungera som fingervisning hur det kan komma att se ut.
(Rahn & Lal, 2010; Skansholm, 2005)
17 Pixel eller bildpunkt är det minsta elementet som en grafisk bild byggs upp av. Ordet pixel kommer av
engelskans picture element (CS,2010)
18 Integrated Development Enviroment (Rahn & Lal, 2010)
19 Java Server Pages och Servlet Api(application program interface) 20 Hypertext Preprocessor
21
3.3
Ramverk
Ett ramverk (framework) är återanvändningsbar design som kräver mjukvarukomponenter för att fungera. Ramverk kan beskrivas med regler, riktlinjer och rekommendationer och är oftast utvecklade bibliotek med funktioner som underlättar och snabbar upp t.ex. webb-utvecklingsprojekt. En nackdel med ramverk är att man inte riktigt har kontroll över all kod och det gör det svårare att felsöka, men de flesta kända ramverk har manualer och forum där man kan söka efter information. Ramverk kan ha skiftande formulerade licensvillkor, så det är av vikt att ta del av licenskraven innan man använder dem. (Murray, Carrington & Strooper, 2004)
Inledningsvis när man på egen hand börjar utveckla webbapplikationer, kan det underlätta om man använder sig av något befintligt ramverk för att bekanta sig med miljön. Många ramverk finns att tillgå via Internet och de flesta har fri licens. Genom att använda ett sådant, kommer man snabbt igång och kan se ett direkt resultat.
Webbutvecklingsramverken för smartphones består av färdiga CSS-filer och JavaScript-bibliotek anpassade till att fungera med den webbstandard som anges för WebKit och en medföljande manual beskriver hur man kommer igång med utvecklandet. Någon närmare kvalitetsanalys av ramverken kommer inte att göras, däremot kommer det ramverk jag valde för min fallstudie att bedömas. Skulle inte något av dessa ramverk (se bilaga 1) vara tillräckligt uttömmande kring ämnet, finns det även litteratur som beskriver hur man utvecklar webbdesign för smartphones. (se källförteckning)
3.4
Design av ett användargränssnitt
”Vad är design?... Det är när du står med en fot i två världar – en värld med teknik och en värld med människor och mänskliga avsikter – och du försöker att föra dem samman”. (Winograd, 1996)
Design är i sin natur kreativ och oförutsägbar där designers måste blanda noggrann kunskap om teknisk körbarhet med en estetisk känsla för vad som tilltalar användare. Man kan karaktärisera design som en process, inte ett tillstånd och passar därför inte att representeras statiskt. Processen är genomgripande transformerbar vilket innebär att utvecklingen av tillfälliga dellösningar kan komma att till sist sakna plats i den slutliga designen. Designs innersta väsen innefattar upptäckten av nya mål. (Shneiderman & Plaisant, 2010)
3.4.1 Systemutvecklingsmetoder – en översikt
När t.ex. ett webbaserat system utvecklas är design av ett användargränssnitt en viktig del av denna process och sker under designfasen. Det är via användargränssnittet som användarna sedan kommer att interagera med systemet.
(Dennis & Wixom, 2003)
3.4.2 Användargränssnittets designprocess
Användargränssnittet är en del av det webbaserade systemet med vilket användarna interagerar. Det inkluderar skärmens utseende, navigation mellan olika sidor, formulär för in- och utmatning av data och meddelanden som systemet producerar. Den grundläggande processen för design av ett användargränssnitt är av det iterativa slaget och uppdelad i fem steg. Designers hoppar mellan de olika stegen efter behov mer än rör sig genom dem sekventiellt.
Det första steget är utveckling av ett användarscenario där man utarbetar hur användare enkelt ska kunna interagera med systemet.
Under andra steget definieras ett strukturdiagram över användargränssnittet och visar hur sidorna ska sammankopplas.
Under det tredje steget designas gränssnittets standarder och man tar fram vilka grundelement som ska ingå som t.ex. utseende på formulär och knappar etc.
Under det fjärde steget görs en prototyp av användargränssnittet och den kan göras i pappersform där man skissar upp alla förutsättningar eller så kan en fullt navigerbar html prototyp konstrueras där det fundamentala representeras men utan kontakt med den underliggande logiken.
Under det femte steget görs en utvärdering av användargränssnittet och kan t.ex. göras interaktivt genom att navigera sig igenom prototypen för att få en uppfattning om eventuella förbättringar behöver göras.
(Dennis & Wixom, 2003)
3.4.3 Designens pelare
Användbarhet är lika med nytta gånger användarvänlighet, vilket är en definition som fångar de två viktigaste sidorna av användbarheten: det måste vara ett gott hantverk – webbplatsen måste vara användarvänlig i sin utformning av textlayout, navigation och hastighet. Funktionaliteten och nyttan måste motsvara behovet hos användarna. Om nyttan är noll – om webbplatsen inte innehåller något som intresserar användarna – är också användbarheten noll, hur väl webbplatsen än är gjord. På motsvarande sätt: har användaren stor nytta av innehållet tar hon till sig innehållet, hur illa webbplatsen än är gjord (om den inte är fullständigt omöjlig att använda). (Sundström, 2005)
möjligt. För universell användbarhet bör man möta behov hos t.ex. äldre användare som kan ha något nedsatt syn eller liten erfarenhet av smartphones. Där bör man tänka på att kanske använda distraherande animationer i mindre utsträckning, använda rätt storlek på typsnittet (eftersom skärmarna på smartphones är relativt små), göra rätt val av färger (t.ex. gul färg på typsnittet mot en vit bakgrund gör texten svår att läsa).
Varje projekt har olika behov, men man bör ha riktlinjer för typsnitt och storlekar, ikoner, grafikisk representation som t.ex. tjocklek på linjer, användning av färger, bakgrund, menyval, formulär, användning av sidhuvud och sidfot, direkt manipulation av slaget klicka, dra och släppa.
Ett exempel på hur man kan mäta användbarhet är:
Hur lång tid det tar för användare att lära sig förstå hur användargränssnittet ska användas
Hur snabbt systemet klarar av att utföra en uppgift
Antal fel orsakade av användare
Inlärning över tid för användare vid användandet av systemet
Subjektiv tillfredsställelse hos användarna
På expertnivå har webbdesigners börjat inse att pilottest, små och stora, är nödvändiga för att testa komponenterna innan de släpps till kunderna. Ett stort urval av granskningsmetoder, test med tänkta användare, enkätundersökningar och autonoma analysverktyg har bevisats vara värdefulla. Proceduren varierar kraftigt, beroende på målet med användbarhetsstudien, antalet förväntade användare, risken för fel och nivån på investeringen.
(Shneiderman & Plaisant, 2010)
3.4.4 Mentala modeller
Användare formar mentala modeller genom erfarenhet, träning och instruktioner - ofta i samband med att de måste göra ett ingripande eller förutse tillstånd eller skeenden. Det hela går ut på att användare som ställs inför en ny situation, genom tidigare erfarenheter, kan göra ett antagande om den nya situationen.
När användare besöker en webbsida använder de sig av mentala modeller för att förstå hur sidan fungerar. Modellen är uppbyggd på tidigare erfarenheter som föder förväntningar. När modellen inte överensstämmer med hur sidan fungerar uppstår ett användbarhetsproblem. (Preece, 1994)
3.4.5 Definition av ett användargränssnitt
smartphones som avgränsar användningsområdet är begränsat minne, skärmstorlek,
användargränssnittets enkelhet och litet keyboard eller begränsade inmatningsmöjligheter, vilket ställer större krav på användargränssnittet.
Lyckade utvecklare vet att en aktsam hållning till användarcentrerad design under utvecklingens tidiga skede reducerar dramatiskt utvecklingstid och kostnad. Användarcentrerad design leder till applikationer som genererar färre problem under utvecklingen och har lägre underhållskostnad under applikationens fortsatta livstid. De är lättare att lära sig och reducerar antalet fel väsentligt och uppmuntrar användare att i sin användning av applikationen utforska den utöver minimikravet för vad som krävs för att klara uppgiften. På så vis lyckas användarcentrerad design förena funktionalitet med den ekonomiska nyttan och dess prioriteringar.
(Ayob m.fl., 2009; Shneiderman & Plaisant, 2010)
3.4.6 De tio vanligaste designfelen
Webbdesigners kan lätt göra fel som inte omedelbart uppenbarar sig men kan resultera i bristande koncentration och förvirring hos användare. De tio vanligaste designmisstagen när det gäller att presentera information på nätet är följande:
1. Begrava information för djupt in i webbsidan 2. Överhopa sidan med alltför stora mängder material 3. Tillhandahålla konstig eller förvirrande navigering 4. Lägga information på oväntade ställen på sidan 5. Inte göra hyperlänkar uppenbara och tydliga 6. Presentera information i misslyckade tabeller
7. Använda typsnitt som är för litet så att många användare inte kan läsa innehållet 8. Använda färgkombinationer som vissa användare inte kan använda
9. Använda misslyckade formulär
10.Gömma eller inte tillhandahålla funktioner som kan hjälpa användare (Shneiderman & Plaisant, 2010)
3.4.7 Direkt manipulation
gjorts och vilket resultatet blev. En nyckelprincip med design av webbsidor är att under direkt manipulation tillhandahålla visuell och, om situationen tillåter, audiell eller taktil22 feedback. (Shneiderman & Plaisant, 2010)
3.4.8 Universell användbarhet
Universell användbarhet är en nyckelfaktor i webbdesign. Vid forskning i ämnet webbanvändbarhet för användare med nedsatt synförmåga undersöktes kommersiella webbsidor för att undersöka om designers verkligen kunde bygga sidor som även kan tillmötesgå behov hos dessa användare och förbättra deras prestation och den allmänna användarupplevelsen. En lösning skulle kunna innehålla både visuell och audiell hjälp, möjlighet att öka storleken på typsnittet och titta på sidan med reverserad kontrast.
För de flesta interaktiva system är skärmen nyckelkomponenten för lyckad design. Grafiska designers har producerat riktlinjer anpassade för skärm design och erbjuder tänkvärda råd med exempel på god och dålig design. Här följer sex kategoriserade riktlinjer för att uppdaga komplexiteten i en designers uppgift:
Elegant och enkelt: Enhetligt, förfinat och dugligt.
Skalbarhet kontrast och proportioner: Klarhet, harmoni, aktivitet och undantag.
Organisation och visuell struktur: Gruppering, hierarki, relation och balans.
Moduler och program: Fokus, flexibilitet och konsekvent applikation.
Bild representation: Omedelbar, generell, sammanhängande och karaktäriserande.
Stil: Distinkthet, integritet, begriplighet och lämplighet. (Shneiderman & Plaisant, 2010)
3.4.9 Färganvändning
Färg på skärmar är attraktivt för användare och kan ofta förbättra prestationer, men risken för felanvändning är stor. Färg kan göra följande:
Lugna eller stressa ögat
Lägga till en accent till en ointressant sida
Underlätta subtila särbehandlingar på komplexa sidor
Betona den logiska organisationen av information
Dra uppmärksamhet till en varning
Väcka starka känslor av glädje, upprymdhet, fruktan och ilska
Det finns inga enkla regler som bestämmer hur färg ska användas, men dessa riktlinjer kan man utgå från som designers:
Använd färg konservativt. Många nybörjare är väldigt ivriga med att använda färg för att lysa upp skärmarna, men resultatet är ofta kontraproduktivt. När färgerna inte visar
22 Taktil är exempel på information som kan överföras genom beröring t.ex. ytstrukturer. Blindskrift är exempel
på ett meningsfullt släktskap kan de förleda användare att söka släktskap som inte finns. Ett säkert kort är alltid att använda svarta bokstäver på vit botten och använda färg vid speciella tillfällen.
Begränsa antalet färger. Många guider föreslår fyra färger på en enda sida och max sju färger i en sekvens av sidor. Erfarna användare kan ha nytta av många färger, men oerfarna användare blir enbart konfunderade.
Erkänn potentialen i färg som kodningsteknik. T.ex. i ett flygtrafikskontrollsystem kan högtflygande plan vara färg kodade på annat sätt än lågtflygande plan. I programmeringsprogram kan färgen på variabler skilja sig från nyckelord. En stoppknapp kan vara röd och en startknapp grön.
Försäkra dig om att färgkodningen stödjer uppgiften. Var medveten om att använda färger som en kodningsteknik kan påverka prestationen av uppgifter som går emot färgningen av kodningsschemat. Designers ska försöka göra det möjligt att länka mellan användarens uppgift och färgkodningen och ge möjligheten till användarkontroll där det är möjligt.
Färgkodning frambringas utan ansträngning från användaren; användaren ska inte vara tvungen att slå på en färgkodning varje gång de utför en uppgift, den ska var automatiskt tillgänglig.
Ställ färgvalet under kontroll av användaren; användaren ska ha möjlighet att stänga av färgkodningen om den så vill. Till exempel en stavningskontroll markerar felstavade ord i rött och den funktionen ska användaren ha möjlighet att stänga av .
Designa för monokromt först. Inledande målet för en designer är att placera sidans innehåll i ett logiskt mönster, relaterade genom en box runtom ickerelaterade åtskiljs med mellanslag eller byte av rad. Det kan vara av fördel att inte förlita sig på färger då skärmar inte alltid är universellt användbara.
Ha i beräkning behoven hos färgblinda. De vanligaste färgerna är grön och röd och färgblindhet är inte helt ovanligt förekommande. Möjligheten för användarna att välja färg ska vara möjlig. Svart på vitt eller vitt på svart fungerar alltid.
Färg som hjälp vid formatering kan vara att liknade skärmobjekt kan grupperas med hjälp av liknande färg.
Var konsekvent i färgkodningen; använd samma färger i hela projektet.
Var uppmärksam på vanliga förväntningar av färgkoder. Rött ska indikera stop eller fara. Gult ska indikera varning. Grönt ska indikera klart eller gå. För kemister är rött varmt och blått kallt.
Var uppmärksam på problem med färgparning. Rött och blått ligger på varsin sida av spektrumet och röd text på blå bakgrund är svår att läsa eller gul text på vit bakgrund.
Använd färger för att indikera status förändringar genom att tillåten hastighet indikeras med grönt otillåten med rött.
Använd färg för bättre informationstäthet T.ex. Skilja rader åt med en linje är inte lika effektivt som att olika färg på raderna.
3.4.10 Användargränssnitt för smartphones
”Mobile = Mobility, Design = Communication, Therefore, mobile design is the art of communicating within an environment of mobility.” (Moll, 2006)
Menyer för små skärmar kan enbart delge en del av informationen. Man bör därför uppmärksamma hur användarna navigerar mellan olika menyposter i en sekvens, nivåer av hierarkin och delar av långa formulär. De mest frekvent använda måste ligga långt fram; man bör organisera dem så istället för efter kategori.
I användargränssnitt för smartphones, där enkelhet och lätt att lära sig är viktiga aspekter, är frekvent användning ofta en styrande faktor när man organiserar menyer. T.ex. är det mer vanligt att användare lägger till ett telefonnummer än tar bort ett så kommandot för att lägga till måste vara lättare att komma åt och kommandot för att ta bort placeras på en lägre nivå i menyn.
Om designers använder korta och koncisa texter och är aktsamma vid redigerande av titlar, etiketter och instruktioner kommer det att leda fram till ett simplare och enklare-att-använda gränssnitt. Varje ord räknas på en liten skärm och t.o.m. onödiga mellanslag och bokstäver bör elimineras. Man bör vara konsekvent och särskilja menytyper för att hjälpa användaren att hålla orienteringen på sidan. Små ikoner bör undvikas. Färgglada ikoner, av det slaget som används i Iphones, kan med stor fördel användas då de vid anblick känns igen när användaren väl lärt sig känna igen den.
(Shneiderman & Plaisant, 2010)
3.4.11 Optimering av mobila webbdokument
Den första och den mest basala optimeringen av mobila webbdokument är att reducera antalet länkade externa resurser. Till sådana länkade externa resurser hör CSS stilmallar, JavaScript- bibliotek, bilder eller någon annan typ av fil vars länkning ligger inbäddad i webbdokumentet. Varje extern resurs kräver ett mobilt nätverk för att få tag i en webbsidas innehåll. När enheten väl mottagit sidan kräver varje resurs webbläsarminne för att rendera sidan och ibland filsystemets cache-minne. Det finns åtgärder man kan vidta för att förebygga detta:
Använd CSS stilmallar sparsamt och inte mer än nödvändigt. Det ideala är att använda endast en.
Använd JavaScript-bibliotek sparsamt och inte mer än nödvändigt. Det ideala är att använda endast ett.
Minimera antal bilder i dokumentet och försäkra dig om att varje bild som används är fullständigt nödvändig för sidans design och funktionalitet.
(Rahn & Lal, 2010)
3.5
Metoder vid migrering av ett användargränssnitt
smartphones kallas för migrering.
Om olika enheter används för att granska samma källa av information behöver användargränssnitten vara annorlunda beroende på vilken typ av enhet som används p.g.a. enheternas varierande begränsningar. T.ex. en nyhetssida anpassad för en stationär dator med många hyperlänkar skulle inte fungera fullt ut i en smartphone. (Lin & Landay, 2008)
Det finns olika tekniker som används vid migrering. En teknik är att designa ett separat användargrändssnitt för varje typ av enhet, vilket är både tidsödande och ofta genererar fel. En annan teknik är att ha ett program som genererar användargränssnitten automatiskt, vilket leder till klumpig interagering för användarna.
Nuvarande prototypverktyg tar ingen hänsyn till användarbehov. Ett verktyg som tillät designers att snabbt få fram prototyper för användargränssnitt till de olika enheterna samtidigt skulle ge designers möjlighet att utforska ett bredare designspektra och potentiellt förbättra den slutliga designen av användargränssnitt.
Om informationen på sidorna som migreras bryts upp i fragment krävs något som håller kvar kontexten. Navigation är det sätt användarna förflyttar sig genom informationen när sidan migrerats. En rad navigationstekniker har utvecklats till detta syfte. Det finns fyra generella migrationstekniker som beskriver detta och kategoriseras i breda drag enligt följande: direkt migrering, data-modifiering, data-reducering och data-översikt. För var och en av dessa är en vanlig navigationsteknik identifierad och analyserad till att passa för användaruppgifterna och informationstyperna. (MacKay & Watters, 2003)
3.5.1 Direkt migrering
Den enklaste och mest frekventa migreringstekniken är direkt migrering. Med denna metod sker det ingen egentlig förändring av informationen eller organisationen på webbsidan. Denna teknik är snabb, billig och transformeringen kräver obefintlig mänsklig inblandning. Idén med metoden är att reducera den horisontella skrollningen. Problemet försvinner inte utan horisontell skrollning förvandlas istället till vertikal skrollning. (MacKay & Watters, 2003)
3.5.2 Data-modifiering
Data-modifiering innebär att antalet bilder reduceras, tabeller ändras till listor och text sammanfattas – detta för att minska nedladdningstider och användning av enheternas minne. Textsammanfattningen reducerar stycken av text till nyckelmeningar, en kortare representation av originaltexten. Användarna kan sedan klicka på texten för att se den i sin helhet. Med denna metod kan de snabbt bedöma relevansen i webbsidans innehåll. (MacKay & Watters, 2003)
3.5.3 Data-reducering
3.5.4 Data-översikt
Data-översikt innebär ett en överblick över all information på sidan genereras för användaren. Användaren kan själv välja vilken del av sidan som skall fokuseras – användaren kan alternera mellan kontext och fokus, där kontext hela tiden ligger i bakgrunden och fokus ligger i ett på sidan centrerat pop-up fönster. (MacKay & Watters, 2003)
3.6
Anpassningsprocess på servernivå efter typ av enhet
Det finns två olika ansatser när det gäller anpassning efter typ av enhet:
1. Den första är att man har ett allround användargränssnitt tänkt passa alla typer av enheter.
2. Den andra är att man för åtkomsten av ett och samma system skapar flera olika användargränssnitt – i detta fall väljer vi ett för smartphones och ett för enheter med stora skärmar. Dubbla gränssnitt kan innebära dubbelt arbete, men är oundvikligt om man vill hålla en tillfredsställande kvalitetsnivå.
I ett webbaserat system anpassat för stora skärmar och där man väljer alternativet att även tillhandahålla ett smartphones-anpassat användargränssnitt, är den enklaste lösningen två separata åtkomstadresser. Exempelvis Transitors demonstrationshemsida för systemet Comers har normalt adressen http://www.comers.se. Den mobila motsvarigheten skulle då kunna bli http://mobil.comers.se.
Om ambitionen däremot är att använda samma åtkomstadress, kan man på servernivå avgöra vad för slags klientenhet som gör anropet. Anpassningsprocessen på servern kan delas in i två avdelningar:
När klienten, i detta fall en smartphone, gör ett anrop till servern startar en identifieringsprocess av den anropande klienten som är uppdelad i tre steg och efter första steget exekveras efterkommande steg endast om steget innan misslyckats:
1. I steg ett undersöks om CC/PP23 existerar. CC/PP är ett utvecklingsbart ramverk som kan användas för att kommunicera information om en enhets leveranskontext till en webbserver, och denna server kan leverera innehåll som är användbart på den specifika enheten.
2. Skulle denna standard inte stödjas av den anropande enheten, fortsätter processen till steg två som är att analysera http anropet från enheten. I huvudet återfinns UA24 som innehåller en sträng med relevant information och används sedan som nyckel för att identifiera enheten mot en DB25.
3. Informationen där är lite grov och skulle identifiering misslyckas analyseras hela strängen från UA mot en DB.
Efter lyckad identifiering av enhet inleds en anpassningsprocess där först ett val av rätt märkspråksbibliotek görs. Sedan skickar servern tillbaka vald information till webbläsaren. Hela processen sker i realtid.
(Müller m.fl., 2005)
23 Composite Capability / Preference Profile (W3C, 2000) 24 User Agent (W3C, 2002)
25
4
Fallstudie
Under den inledande delen av fallstudien användes två Iphone-simulatorer (se bilaga 1). När utvecklingsarbetet kommit så långt att jag ville experimentera med inställningarna för
viewport i metataggen (se 3.1.4) upptäckte jag att simulatorerna inte tog någon notis om detta.
Det visade sig att simulatorerna visade upp sidan med en skärmupplösning som motsvarade en smartphone, men de hade inte förmåga att avgöra om sidan via metataggar hade specifikt mobilt webbinnehåll. Efter att detta uppenbarats nyttjades fortsättningsvis enbart Opera Mobile som är en simulator som visar hur webbinnehåll ser ut i en smartphone och kan installeras och användas på en stationär dator. Upplösningen som användes i fallstudien var 320x480.
I beskrivningen av fallstudien kommer fokus att ligga mer på designen än på beskrivning av de språk som använts eller kan användas.
4.1
Genomförande
Genomförandet av fallstudien inleddes med att utveckla ett användarscenario där tänkta användare av gränssnittet skissades upp och motsvarar designprocessens första steg (se 3.4.2). Informationen till detta förvärvades dels vid samtalet med uppdragsgivaren på Transitor AB (se bilaga 2) och dels genom studien av förlagan (Figur 4.2). Med stöd av detta och den litterära studien utformades detaljer för ett användargränssnitt som skulle:
Uppfylla kravet på universell användbarhet och användarvänlighet.
Vara anpassat efter de begränsningar en smartphone har: liten skärm och relativt klen hårdvaruprestanda.
Någorlunda följa strukturen i förlagan.
Ha ett gränssnitt som någorlunda överensstämmer med de idag rådande normerna för
smartphones.
Figur 4.1 Strukturdesign över navigering
När struktur och tänkta användare var fastställda togs en skiss fram och de standarder som skulle ingå sammanställdes. Detta motsvarar tredje steget under designprocessen (se 3.4.2). Ramverket som användes under utvecklingsarbetet var ett med fri licens och hette iWebKit5.04 och bestod av en mapp med ikoner, en CSS stilmall och ett JavaScript bibliotek anpassat efter den standard som WebKit stödjer (se kap 3.1). En manual och exempelfiler medföljde, så det gick relativt snabbt att komma igång med utvecklingsarbetet. Stilmallen var den som användes mest och med hjälp av den kontrollerades storlekar, färg och positioner av formulär, knappar, textboxar etc.
Det nuvarande gränssnittet var anpassat för stora skärmar där sidan bredde ut sig horisontellt. När sedan en sökning efter ledigt rum gjordes av användaren, hämtades och presenterades resultatet vertikalt i en lista direkt under gränssnittet där sökningen gjorts som man kan se i Figur 4.3.
Figur 4.3 Gränssnitt till bokningsapplikation med sökresultat
Figur 4.4 Gränssnitt till bokningsapplikation sett i Opera Mobile
Figur 4.4 är samma användargränssnitt som i Figur 4.2 men sett i Opera Mobile. Omfattande vertikal skrollning är i detta fall nödvändigt för att se bilden i sin helhet och den underliggande resultatlistan från sökningen efter lediga hotellrum. Den långa kolumn som denna design medför gör sidan svårnavigerad och resulterar i ett användbarhetsproblem. Under designprocessens fjärde steg (se 3.4.2) tas en prototyp fram i form av antingen en pappersskiss eller en fullt navigerbar html (se bilaga 5) utan kontakt med den underliggande logiken i systemet. I denna fallstudie valdes det senare.
exempelsidan från Figur 4.8 i en webbläsare på en stationär dator så flyter sidan ut som man kan se i Figur 4.5.
Figur 4.5 Exempelsida från fallstudien sett i en stationär dators webbläsare
Den migreringsteknik som tillämpades i Figur 4.6 var data-modifiering. Det som gjordes var att bilder togs bort och text sammanfattades och hyperlänkades för att användaren ska kunna klicka sig vidare om de önskar läsa texten i sin helhet. Alla bilder utom logotypen och almanacksikonerna eliminerades för att minska resursanspråk hos anropande enheter. Språkval kan förslagsvis läggas efter huvudsida och innan bokningsgränssnittet.
Figur 4.6 Smartphones-anpassat användargränssnitt för bokningsapplikation.
Figur 4.7 Listan av sökresultat (beskuren).
Figur 4.8 är en presentation av rummet som återfanns i listan. Sidan data-modifierierades och bilden med rummets planlösning eliminerades för att minska resursanspråk hos anropande enheter. Skulle det göras anspråk och finnas önskemål från uppdragsgivare är en möjlig lösning att man länkar vidare till bilden via en knapp eller en cell med en informativ textlänk och ger användarna möjlighet att själva välja om de vill se bilden på planlösningen eller inte.
Figur 4.8 Rumsbeskrivning (beskuren).
Femte steget i designprocessens består i utvärdering av de fyra tidigare stegen. Om det som i detta fall skapats en navigerbar html provas den, men även struktur och innehåll utvärderas och revideras om så behövs.
4.2
Resultat
Om olika enheter granskar samma informationskälla behöver användargränssnitten vara annorlunda. Meningen med de olika migreringar som gjordes i fallstudien var att skapa funktionella överblickbara sidor och göra navigeringen smidig och genom att bryta upp informationen och låta den representeras på flera sidor har förutsättningen för detta skapats. När man minskar mängden information på sidan ökar man fokus för användarna.
När användare uppsöker en webbsida använder de sig av mentala modeller när de tolkar och försöker förstå hur sidan ska användas. För att undvika förvirring hos användare som var vana vid förlagan valdes att i fallstudien följa strukturen för formuläret hos densamma (jämför Figur 4.2 och 4.6). Det gränssnitt som skapades är anpassat efter förutsättningarna i en
smartphone: storleksmässigt är gränssnittet något mer tilltaget och t.ex. textrutor,
med en muspekare, kan te sig ganska klumpigt och ställer helt andra krav på struktur och tydlighet. I många fall blir texthyperlänkar små och otydliga. Detta löstes genom att skapa en hel cell som var klickbar, inte bara texten i cellen; cellernas utformning och storlek anpassades så att interagering med fingrar skulle kunna göras obehindrat. Exempel på detta återfinns i Figur 4.6, 4.7 och 4.8. I 4.6 och har visualiserats genom att ge cellen en ram. Detta gäller även för knappar, formulär och ikoner: för att kunna interagera på ett smidigt vis måste de ha en tillräcklig storlek. För att göra knapparna så uppenbara som möjligt tillämpades principerna beskrivna i 3.4. Färgen grön, som enligt forskning signalerar starta, valdes och det namnet på knapparna som i förlagan var Sök Hotellrum respektive Boka Rum understödjer handlingen de var ämnade för. För att uppnå universell användbarhet och så stor tydlighet som möjligt bör färgvalet i grunden vara monokromt; svart text på vit botten, vilket var valet i fallstudien.
5
Diskussion och slutsats
Behållningen och lärdomen av denna studie är insikten att design är en föränderlig process där man inte alltid kan förutse resultatet; man måste alltid vara beredd på att revidera användargränssnittets utformning när man finner nya och bättre lösningar.
Jag tänker här inleda med att besvara den första av de två inledande frågeställningarna för den här studien som var hur man gör en anpassning av ett användargränssnitt för ett befintligt webbaserat system så att det även passar för smartphones:
Det finns många sätt att mäta användbarhet och ett av dem är nöjda användare och som det konstaterats tidigare: har man inte några nöjda användare saknar webbplatsen värde, hur väl webbsidan än är gjord. Eftersom användargränssnittet är en viktig del av ett webbaserat system där ett lyckat sådant kan dra till sig användare och ett misslyckat kan på motsvarande sätt stöta bort dem. Den här studien har visat att när man startar ett projekt för anpassning av ett gränssnitt bör man ha eller skapa riktlinjer för typsnitt, storlekar, ikoner, grafisk representation som tjocklek på linjer eller logotyper, användning av färger, bakgrund, menyval och formulär. Gränssnittets användbarhet måste motsvara förväntningarna hos användarna.
Man bör vidare försöka undvika vanliga designfel som att begrava informationen för djupt in i webbsidan eller att överhopa sidan med för stora mängder material. I fallstudien är nivåerna därför begränsade till två. Mängden information har reducerats med hjälp av olika migreringsmetoder.
Nyckelfaktorn för lyckad design har under denna studie visat sig vara att uppnå målet med universell design. Forskning har visat att om man tillmötesgår dessa användare förbättras deras prestation och användarupplevelse. I fallstudien har ett väl tilltaget typsnitt använts. När det gäller färganvändning finns det inga enkla regler för hur färg ska användas, men man bör använda färg konservativt. Felaktiga val kan göra att användare söker släktskap som inte finns på skärmen. Man bör även begränsa antalet färger till fyra på en skärm och sju i en sekvens. För att uppnå så stor tydlighet och kontrast som möjligt bör färgvalet precis som i fallstudien i grunden vara monokromt; svart på vit botten för att kontrasten ska vara så god och tydlig som möjligt.
Syftet med uppsatsen har varit att identifiera hur man gör en lyckad design och migrering av ett användargränssnitt i ett befintligt webbaserat system så att det passar smartphones. För att uppnå målet med en lyckad design bör man ta hänsyn till en mängd faktorer:
Initialt är det viktigt att undersöka rådande regler och riktlinjer som finns för design av ett användargränssnitt
När det gäller design för smartphones bör man ta i beaktande att det finns flera olika plattformar när man gör språkval, att smartphones kräver lite unika tankesätt jämfört normal gränssnittsdesign tack vare de små skärmarna
För att skapa ett gränssnitt för smartphones med god affordance bör man inte överösa sidorna med färger och information som kan desorientera och förvirra användarna. För mycket innehåll på en sida kan dra ner prestandan och försämra användarupplevelsen. De rekommendationer och riktlinjer som finns redovisade i denna studie har visat sig vara tillämpningsbara.
det finns program som automatiskt kan generera ett gränssnitt kan besvaras på följande vis: I studien har det visat sig att program som sköter anpassningen av sidor skapade för enheter med stora skärmar automatiskt till ett format som passar smartphones skapar en klumpig navigering som gör användarna både konfunderade och förvirrade. Det är därför inte någon metod som den här studien rekommenderar.
När det gäller automatisk anpassning av webbaserade gränssnitt kan man utifrån den litterära studien som gjorts dra slutsatsen att det inte finns någon tillfredsställande effektiv metod att göra detta på idag.
Slutsatsen pekar således på att vill man ha specifikt anpassade gränssnitt för olika enheter och vill hålla en tillfredsställande kvalitetsnivå får man räkna med att skapa ett gränssnitt för varje typ av enhet som ska interagera med systemet. Vinsten med detta är framförallt en större kontroll över resultatet och man undviker risken att gränssnittet visas på ett vis som varken var tänkt eller önskat.
5.1
Fortsatt forskning
Det mesta tyder på att vi går mot en större multianvändning av enheter i vår interagering med Internet. Det är därför av högt intresse med fortsatt forskning och utveckling inom området anpassning av existerande webbaserade system. Ett väl fungerande verktyg för detta ändamål skulle nog kunna vara av intresse. Även verktyg av det slaget där man redan i initialskedet av ett utvecklingsprojekt parallellt kan skapa användargränssnitt anpassade för olika slags enheter.
I min fallstudie hade jag av resursmässiga skäl inte haft möjlighet att testköra prototyperna i alla på marknaden förekommande mobila webbläsare, vilket hade varit oerhört intressant att få ha gjort. Om man skapar mobila webbsidor finns intentionen att så många som möjligt ska kunna ta del av sidorna utan att alltför stora kompromisser måste göras när de skapas. Forskning som undersöker skillnader och likheter mellan de olika mobila webbläsarna skulle var av intresse, en forskning som förhoppningsvis kan leda fram till riktlinjer för vilken nivå på mobil webbstandard webbläsarna bör kunna stödja, ett rekommenderat minimikrav. Sådana riktlinjer skulle kunna underlätta för framtidens utvecklare av den mobila webben. Att dessutom testa prototyperna på typiska användare eller en testgrupp är något som säkerligen skulle ha kunnat tillföra studien en ytterligare dimension.
