Beställarens guide till mobil-lösning

2015-02-11 Artikelbanken Kravhantering Läst 6467 gånger

Det här är en guide till er som är beställare, business analyst eller kravhanterare i ett företag, stort som litet, och som funderar på att förbättra ert varumärke för besökare på mobila enheter. Jag har under mina sex år som testare och kravare i olika mobila projekt sett och lärt mig av fel och misstag som begåtts och jag vill med denna guide hjälpa er att så tidigt som möjligt fatta rätt beslut och undvika val som du senare kanske skulle ångra.

Funderar ert företag på att göra en mobilapp eller en bättre mobilanpassad hemsida? Då är det här en guide för er, där jag kommer presentera flera möjliga lösningar samt deras för- och nackdelar. Jag kommer även att lyfta fram viktiga frågor som är bra att känna till när ni fattar era beslut för att öka chansen att ni väljer rätt lösning för ert företag.

Förmodligen har ni redan en webbplats, och för att komma fram till den mobillösning som passar er bäst, behöver ni känna till VARFÖR ni vill göra en satsning på mobilitet. Först och främst bör ni ställa er frågan vad det är för behov som ni vill tillfredsställa - vilken efterfråga är det ni möter som ni inte kan uppfylla med dagens lösning? När ni vet det, så blir det lättare att värdera de olika lösningarnas för- och nackdelar. Det blir på så sätt lättare att välja just den lösning som passar ert företag bäst.

Som hjälpmedel till att komma fram till rätt lösning kommer jag följa ett beslutsdiagram, se figur nedan, och presentera vad som är för- och nackdelar med de olika alternativen vid varje beslutspunkt.

Beslutspunkt 1: App?

Guiden riktar sig till er som i dagsläget redan har en webbplats som ni önskar göra mer mobilanpassad. Detta kan påverka hela er internetlösning. Jag kommer därför inleda med att presentera mina definitioner av webbsida samt app.

Vad är en webbsida?

En webbsida är en sida på internet vars främsta syfte är att presentera information. Det är oftast en enkelriktad sida i den bemärkelsen att besökaren inte kan interagera så mycket med webbsidan och ert varumärke.

En webbsida kan liknas vid att företaget presenterar sin produkt eller tjänst, och de som besöker sidan lyssnar på presentationen. även om det är möjligt att göra webbsidor där besökare kan interagera så kan det jämföras med att stoppa in en formel 1-motor i en vanlig bil. Det är möjligt, men inte speciellt bra.

Vad är en app?

I dagligt tal syftar app oftast på en mobilapp, men ordet app är en förkortning för applikation, dvs tillämpning på svenska, och i datorsammanhang då ett tillämpningsprogram (http://sv.wikipedia.org/wiki/Tillämpningsprogram). Det är ett fristående program som från början var begränsad till att köra på ett specifikt operativsystem, exempelvis Windows eller MacOS. Idag kan miljön vara begränsade till andra saker som exepelvis webbläsaren, en så kallad webbapp. Den kan också vara begränsad till en specifik domän på webben som exempelvis spelen inom Facebook som i sig är egna appar som bara fungerar när man är inloggad på facebook.com.

Webbsida vs App

Vi återgår först till ‘Varför’-frågan där ni skulle svara på varför företaget behöver bli mer mobilt. är svaret något i stil med ‘För att kunna nå ut med mer/bättre/rikare information till fler” är webbsidor troligen rätt lösning.

är svaret på ‘Varför’-frågan i stil med att ni önskar att besökarna ska interagera mer med ert varumärke är det troligen en app ni behöver. även om det är tekniskt möjligt att göra webbsidor där besökare kan interagera, så blir prestandan alltid bättre på en app.

En annan sak ni bör ha i åtanke är hur viktigt det är för ert företag att komma högt på sökmotorers sökresultat. Appar blir inte indexerade av sökmotorer och kommer därför inte dyka upp som sökresultat. Sett över hela webbplatsen så kan det finnas en del som är webbsidor och en del som är webbapp, och på så sätt kan de sidor man önskar vara sök- och indexerbara.

En annan väsentlig skillnad mellan en webbsida och en app är tankegången när man ska ta fram hela designen och strukturen, på det tekniska planet.

Med webbsidor så börjar man med att ta fram layout för sidan, dvs man lägger ut grunden med HTML. Sedan gör man det snygga, vanligtvis med CSS och till slut lägger man till logiken ovanpå med javascript. Det gör att vill man ändra sin layout så behöver man ofta anpassa om allting igen.

När man bygger appar så skiljer man mer på logik och vyer som det heter i appar istället för layout. Därför är det enklare att ändra utseendet utan att behöva modifiera logiken därefter.

Beslutsunderlag:

  • Enbart sprida information, där besökare ej förväntas integrera så mycket - webbsidor
  • Besökare förväntas integrera en hel del - app
  • är det viktigt att komma högt på sökmotorers träffar - webbsidor

Beslutspunkt 2: Vilken typ av app?

Här tas skillnaderna mellan webb- och mobilappar upp. Andra typer av appar, exempelvis de inom Facebook, har jag valt att inte ta upp här och anledningen till det är att om ni önskar stärka ert varumärke, så bör ni ha er egen app och inte vara inbakad under någon annans varumärke.

Mobilapp

En mobilapp är, enligt min erfarenhet, det som de flesta tänker på när man säger app. Det innebär att ett program (applikation) på telefonen kan köras och har tillgång till allt på telefonen som operativsystemet tillåter, givet att den som installerat appen tillåter det. Det kan exempelvis vara tillgång till kontaktboken, kameran, möjligheten att skicka notifiering, eller accelerometrarna som känner av i vilken vinkel telefonen är i. Eftersom mobilappen kommunicerar direkt med enhetens operativsystem så kan maximal prestanda ges.

Webbapp

En webbapp startas genom att URL:en skrivs in i en webbläsare. Det första som sker är att appen laddas ner och körs lokalt i webbläsaren. Besökaren får automatiskt alltid den senaste versionen och behöver inte lämna webbplatsen för att ladda ner en mobilapp. Skulle det hända att en allvarlig defekt blir lanserad så går det att fixa utan att en ny mobilapp behöver laddas upp till respektive operativsystems appbutik.

Det är möjligt att ställa in så att man inte behöver ladda ner hela appen vid varje besök utan bara ladda ner de delar av appen som har uppdaterats sen besökarens senaste besök.

Mobilapp vs Webbapp

Mobilappens största fördelar mot webbappen är att den kommunicerar direkt med enheten. Det gör att prestandan blir mycket bättre. Dessutom har mobilappen tillgång till bland annat kameran, kontaktboken, accelerometrarna, och möjligheten att skicka notifieringar.

Som exempel kan vi se på QR-koder i appen. Med en webbapp så måste besökaren lämna webbläsaren, starta kameran, skanna QR-koden, gå tillbaka in webbläsare, jämfört med en mobilapp där man kan aktivera kameran utan att lämna appen.

En annan potentiell fördel för mobilappar är att de kan vara helt tillgänglig offline. Det är även möjligt för en webbapp att vara tillgänglig offline men då styrs tillgängligheten av webbläsaren beroende på hur länge appen finns kvar i minnet. Vad som då riskerar att hända är exempelvis att bilder kan försvinna ganska fort från webbläsarens cache, så att användare inte kan se några bilder alls och upplevelsen blir helt enkelt inte bra.

En av fördelararna med en webbapp är att praktist taget alla mobiler har en webbläsare idag. Därför har alla tillgång till webbappen direkt och behöver inte gå till en appbutik (ex. AppStore eller Google Play) för att komma igång med en app.

Med en webbapp kan ni dessutom ha exakt samma lösning även till datorbesökare och ni har då endast en kodbas till båda lösningarna. En mobilapp fungerar endast på mobila enheter, så därför behöver ni även en webbplats.

Beslutsunderlag:

  • Prestanda är viktigt - mobilapp
  • Många kunder med få besök - webbapp
  • Begränsad budget - webbapp (baserat på att har man en mobilapp behöver man ändå ha en webbplats av någon form)
  • Tillgång till mobiltelefonens övriga system som kamera, notifieringar etc - mobilapp

Beslutspunkt 3: Vilken typ av vald lösning passar ditt företag bäst?

Typer av mobilappar

Det här stycket förutsätter att ni kommit fram till att det är en mobilapp ni behöver, med allt vad det innebär. Här diskuteras två olika typer av mobilappar; native samt cross platform och jag tar upp vad som är bra respektive dåligt med de båda typerna och jämför dem mot varandra.

Native app

Appar skrivna i samma språk som operativsystemet är s.k. native appar. För Android så ska appar vara skrivna i Java, för iOS är det Swift som gäller. Med en native app får appen tillgång till allt som operativsystemet delar med sig av och dessutom tredjepartsbibliotek ifall ni önskar göra något utöver det vanliga. Att appen är skriven i samma språk som operativsystemet innebär också att det är möjligt att få ut maximal prestanda.

Cross platform-app

En app som kan köra på flera olika plattormar kallas cross platform-app. Det kan t.ex. vara en app som kan köra i olika operativsystem på exempelvis Android och iOS. För att åstadkomma detta kan de kompileras till olika appar för de olika plattformarna.

Eftersom appen inte är skriven i samma språk som operativsystemet har man inte tillgång till allt, men fortfarande det mesta. Det finns tredjepartsbibliotek som inte går att nyttja eftersom de är anpassade för det språk som operativsystemet är skriven i, men allt det vanliga finns att tillgå.

Det finns flera olika ramverk för att göra en cross platform-app, och här diskuterar jag två stycken, där det ena ramverket riktar sig mot att göra allting för dig och därmed hålla nere underhållskostnaderna. Den andra vill göra appen så native lik som möjligt för att få upp prestandan så mycket som möjligt.

Phonegap

Phonegap är ett ramverk som översätter webbappar till mobilappar på ett väldigt enkelt och smidigt sätt. Har ni en webbapp idag, så går det att göra en mobilapp utan problem. Det bör dock nämnas att modifieringar kan behövas för att följa de riktlinjer som finns för operativsystemet, eller ifall man vill nyttja en eller flera av mobilens resurser (kontaktboken, kameran etc).

Med Phonegap så använder man deras api:er istället för operativsystemet. Fördelen är att appen fortfarande fungerar vid OS-uppdateringar och att licenskostnaden är relativt låg. Nackdelen är att prestandan blir lidande.

Xamarin

Xamarin konverterar appar skrivna i Swift till iOS, Android och Windows Phone. Deras styrka ligger i att apparna blir väldigt lika native appar även prestandamässigt. Nackdelen är att även om det finns möjlighet att dela kod mellan apparna för de olika operativsystemen, så är det en liten del av koden. Utvecklaren behöver därför verkligen känna till hur operativsystemet fungerar. Vinsten ligger i att man endast behöver ett språk istället för tre om man vill släppa sin app till iOS, Android och Windows Phone.

även vid OS-uppdateringar så måste man gå in och uppdatera sin app själv, så underhållet blir relativt högt för att vara en cross platform.

Native vs Cross platform

Prestandamässigt är native appen crème de la crème! Snabbare och bättre går det inte att göra och man kan göra allt som går att göra. Dock har en välskriven Xamarin-app troligen bättre prestanda än en vanlig native app men i regel är native bättre än cross platform.

Cross platform har sin stora fördel i kostnadsfrågan då man utvecklar alla sina appar i ett språk och det gör det enklare för färre utvecklare att släppa appar till fler operativsystem. Priset för att göra det enkelt är att prestandan blir sämre, men fortfarande bättre i en mobilapp än i en webbapp.

Har ni idag tillgång till flera Swift-utvecklare så kan Xamarin vara att föredra över Native då ni inte behöver ta in någon java eller objectiv-c utvecklare.

Beslutsunderlag:

  • Prestanda är väldigt viktigt: Native (Xamarin)
  • Begränsad budget: Phonegap. Men det beror på vilka programmeringsspråk utvecklarna behärskar. Xamarin (Swift) kan bli billigare än Phonegap (html,css,js) om utvecklarna föredrar Swift.

Typer av webbappar

Om ni har kommit fram till att det är en webbapp ni behöver så finns det egentligen bara en väg att gå och det är att göra den responsiv. Det innebär att man visar upp en design baserad på webbläsarens bredd. Det är lite av en ‘one solution fits all’. Det visas alltid samma sida, och den är anpassad just för besökarens webbläsarstorlek, vilket sker lokalt i webbrowser:n och belastar därför inte servern med att fråga vad det är för typ av enhet för att sedan skicka rätt sida.

För att inse varför man bör göra sina webbappar responsiva kan ni se på alternativen; väljer ni att göra en webbapp för datorer och en webbapp för mobiler, så blir det mycket bättre att göra en mobilapp åt mobilerna istället eftersom prestandan blir så mycket bättre med en mobilapp. Eftersom ni ändå tänker göra en webbapp för datorer så räcker det troligen med att modifiera den lite och sedan konvertera webbappen till en mobilapp med Phonegap.

En stor utmaning med responsiv design är att interaktionen från en besökare är olika på en pekskärm eller med en mus, och med responsiv webbsida så ska den passa båda.

Typer av webbsidor

För att få fram en bra mobillösning till era webbsidor så finns det främst två lösningar som kommer tas upp här:

  1. En speciell webbplats för mobilbesökaren
  2. En responsiv webbplats.

Webbplats för mobilen

Väljer ni att ha en specifik webbplats för mobilen kommer ni ha två separata webbplatser, en för datorer och en för mobiler och surfplattor. Exempelvis www.ertföretag.se samt m.ertföretag.se.

Här ser vi mobil.sj.se och www.sj.se som de ser ut i januari 2015. Båda webbplatserna är tillgängliga för mobilanvändare. Det är tydligt att mobil.sj.se har en design gjord för mobil och pekskärm och www.sj.se för en datoranvändare.

Det kan jämföras med exempelvis www.dn.se / mobil.dn.se som, i skrivandets stund, direkt visar en webbsida som är anpassad för den typ av enhet som besökaren sitter med. Besökaren har inget val själv.

även här krävs det att en del beslut fattas och det finns krav som behöver tänkas igenom:

  • Ska mobilbesökaren endast kunna se mobilsidan, och datorbesökaren endast kunna se datorsidan? En fördel kan vara när en besökare klickat på en länk som är utdelad via social media. Besökaren får då direkt upp den webbsida som är anpassad för den typ av enhet som denne sitter på.
    • Se dn.se som exempel där man alltid får den sida som är anpassad till den typ av enhet som besökaren surfar på.
    • Se sj.se/mobil.sj.se där besökaren kan välja själv vilken webbplats denna vill besöka, oberoende av vilken typ av enhet besökaren surfar på.
  • Till vilken kategori hör surfplattorna? Mobil eller dator?
  • Ska de båda webbplatserna spegla varandra, eller ska de kunna visa olika innehåll?
    • Se dn.se som exempel där innehållet speglar varandra.
    • Se sj.se/mobil.sj.se där mobilplatsen är tydligt riktad mot personer på mobil.

Responsiv webbplats

Responsiv webbsajt, som vi nämt tidigare, innebär att man visar upp en design baserad på webbläsarens bredd.

I bilden här ser vi www.alltomstockholm.se, som det ser ut januari 2015, i tre olika storlekar.

Nackdelarna är att det blir mer tidskrävande att tänka ut designen eftersom hela webbplatsen ska anpassas för alla möjliga storlekar, och vill man få in pengar via reklamplatsen så blir det svårt att placera ut reklamplatserna.

När en responsiv webbplats tas fram behöver man besluta om hur många storlekar man vill anpassa webbplatsen för. Lyckligtvis finns det redan flera ramverk som rekommenderar ett par inställningar och det vanligaste ramverket är twitter bootstrap (http://getbootstrap.com/ ochhttp://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)) som utgår från fyra olika skärmstorlekar:

  • Extra small; upp till 767 pixlar i bredd
    • Utgår från att det är en mobil enhet, men kan fortfarande vara en liten desktop webbläsare.
  • Small; från 768 pixlar till 991 pixlar
    • Räknas som tabletstorleken
  • Medium; från 992 pixlar till 1199 pixlar
    • För de mindre skärmstorlekarna
  • Large: 1200 pixlar och bredare
    • Wide screen, största möjliga skärmstorlek.

När en responsiv webbplats tas fram bör man utgå från den minsta storleken och bygga sig upp mot de större. Anledningen är att det ska laddas så lite som möjligt på mobiler eftersom de har sämre prestanda än en desktop-dator som är kraftfullare och snabbare.

Mobilwebbplats vs. responsiv webbplats

En av styrkorna med en mobilwebbplats är möjligheten att rikta innehållet mot mobilanvändare. Besökare på språng söker ofta annan typ av information än en besökare framför datorn.

En annan fördel med en mobil webbplats är att ni kan anpassa interaktionen mot mobilanvändare. Folk interagerar på olika sätt på mobilen jämfört med datorn. Men en responsiv webbplats visar samma sida på mobilen som på datorn, men med olika layout, och det blir en större utmaning att få en bra interaktion på både liten och stor skärm.

Styrkan i en resposiv design är att ni endast får en kodbas för en webbplats som ser bra ut på alla enheter! Och med en kodbas blir det enklare (och därmed billigare) att underhålla. Dock, ska man göra om en webbplats till en responsiv design bör man börja om från noll och designa från grunden.

Beslutsunderlag:

  • Besökare på mobila enheter har speciella behov: mobil webbsida
  • Ni hoppas att folk delar er länk på sociala medier: responsiv design.

Sammanfattning

För att veta vilken mobillösning som är bäst för ditt företag är det enkla svaret kort och gott: Det beror på. Och de saker som det beror på främst är:

  • Hur viktig är prestandan?
  • Vad vill ni göra?
  • Vad förväntas besökarna/kunderna göra?
  • Vilken budget har ni?

Och andra saker att tänka på:

  • Gör ni en mobilapp behöver ni ändå en webbplats.
  • Gör ni en webbapp kan ni väldigt enkelt konvertera om den till en mobilapp med exempelvis Phonegap.
  • Har ni tillgång till flera Swift-resurser överväg Xamarin istället för Native-app.

Nästa steg

När ni har kommit fram till den bästa lösningen för er, är det dags att påbörja kravarbetet för den. Konsultbolag1 erbjuder många och bra kurser om just kravhantering, exempelvis:

Det finns även flera andra bra artiklar som rör kravarbetet. Jag har valt ett litet urval:

KONTAKTA OSS

Har du frågor? Vill du ha hjälp med områden inom kravhantering och test?
Hör av dig till oss! Vi hjälper dig gärna. 

Kontakt 

Dela artikeln