15 insikterCAP&Design Live – ”Designa för mobilen”

Erik Töyrä

Web Developer

En dag om att designa för mobilen, tio

talare och mängder av intressanta

tankar och insikter.

I det här dokumentet har vi summerat

några av de insikter och lärdomar vi tog

med oss från vår dag på seminariet

CAP&Design Live – ”Designa för

mobilen” i Göteborg den 21 maj 2013.

15 insikterCAP&Design Live – ”Designa för mobilen”

Christer Hedberg

Digital Director

Christian Dompert

Web Developer

Christoffer Nordin

Art Director

Jocce Lindblom

Web Developer

Oskar Johansson

Web Developer

Thomas Varga

Systems Developer

Insikter#1 Make it simple – make it visual!

#2 Mobile first. Experience first.

#3 Prototypa för hand

#4 Allt sker på användarens villkor

#5 Fastna inte på tvåan

#6 Hierarki & typografi

#7 Den grå skissen

#8 Designer! Hjälp din utvecklarkompis!

#9 Animationer hjälper användaren

#10 Vikten av en bra ikon

#11 Testa, testa, testa!

#12 Användartesta!

#13 Skriv ner dina findings

#14 Lev upp till förväntningarna

#15 No more bulletpoints. Please, no more...

Insikt #1

Make it simple – make it visual!Man ska inte göra information snygg, man ska

göra en design av information som löser

användarens problem?

Don’t make me think!

Insikt #2

Mobile first. Experience first.Kedjan för en kunds upplevelse mot ett

varumärke/företag är kan aldrig vara bättre än

den svagaste länken i hela upplevelsekedjan.

Oavsett hur bra appen är blir inte den totala

erfarenheten bra om t ex supporten eller

upplevelsen i företagets fysiska butik inte lever

upp till förväntningarna.

Insikt #3

Prototypa för hand”Att skissa i datorn stänger av den kreativa

hjärnhalvan” – Mattias Nygård, Mobiento

Prototypa och skissa för hand. Skapa många

varianter. Snabbt.

Tips: Använd Prototyping on paper för att låta

användare testa appen redan i prototyp-stadiethttp://popapp.in

Insikt #4

Allt sker på användarens villkor39% använder mobilen på toaletten, 80%

använder mobilen när de har en kort stund över

och 86% använder den när man tittar på TV.

Mobilanvändaren är med andra ord inte under

stress som man lätt kan tro.

Designa appen för den situation den kommer

användas i. Västtrafik ska t ex tänka på att det

kan vara svårt att se skärmen utomhus, mycket

ljud runt omkring, stressad om man vill hinna

med spårvagnen, etc. Samma premisser gäller

inte för IMDB som används inomhus i ett mörkt

rum när man ser på film.

Insikt #5

Fastna inte på tvåanIngen har nånsin blivit glad av ”tekniker-design”.

Man kan ”måla grisen” och lägga en design på

datan. Det blir snyggare, men engagerar det?

Med en smula eftertanke och god design blir

lösningen betydligt bättre. Men baserar man

dessutom designen på användarinsikter och en

rejäl dos kärlek kan appen bli magiskt engagerande.

Insikt #6

Hierarki & typografiVikta information i gränssnittet mot varandra och

ge viktigare information högre prioritet i hierarkin.

Hierarki behöver inte vara storlek, det kan vara t.ex.

färg och form.

Med hjälp av en bra hierarki skapar man en guide

för användaren och sätter rätt stämning i appen.

Insikt #7

Den grå skissenInnan den slutgiltiga designen görs – gör en design i

gråskala. Var finns problemområden och var behövs

mer kontrast. Flyter något ihop?

Grånskaleskissen hjälper dig att ha fokus på rätt sak.

Insikt #8

Designer! Hjälp din utvecklarkompis!Om du designar en animation i gränssnittet – gör

ut den och visa utvecklaren hur den skall fungera.

Annars kommer jobbet bara bollas fram och

tillbaka, ta längre tid och ni blir onödigt

frustrerade på varandra.

Kärlek i projekten.

Tips: UI Transitions är en site med animationer

man kan länka till för att visa för utv hur man

tänkt om man inte kan animera det själv.http://ui-transitions.com

Insikt #9

Animationer hjälper användarenRätt använda är animationer ett kraftfullt sätt att

på ett subtilt sätt kommunicera till användaren

vad som pågår och vad man vill ha för action.

Exempel: ”huvudskakningen” i Apples

inloggningsruta när man skriver in fel lösenord.

Insikt #10

Vikten av en bra ikonIkonen är det första en användare kommer i kontakt

med i appstoren, och det man associerar appen

med när man ska starta och uppdatera den. Ikonen

är appens konstanta ”annons”, ikonen är lika viktig

som gränsnittet.

Slarva inte med ikonen!

”Exponering utanför appstore ger ingen effekt alls”

– Marthin Freij, Amazing Apps

Insikt #11

Testa, testa, testa!Testa alltid designen av en mobillösning i

mobilen eller läsplattan. Upplevelsen blir fel om

du testar i datorn. 

Ju förr man testar desto lättare är det att ändra för

att hitta lösningar på problemen. Längre in i

projektet blir det mer komplicerat, och därmed

dyrare. 

Tips: Använd Skala Preview eller Live View.http://bjango.com/mac/skalapreview

http://www.zambetti.com/projects/liveview

Insikt #12

Användartesta!Testa på riktiga användare. Hela tiden. Gör

iterationer av lösningen baserat på feedbacken

du får.

Exempel på testmetoder: eyetracking, A/B-test

och MVT-test. 

KLM ökade försäljningen med 30% efter att man

eyetrackingtestat sin webshop.

Insikt #13

Skriv ner dina findingsSkriv löpande ner de val av design/funktion du gör.

Spara allt från dina första ”scribbles” till färdiga

”mock-ups” så är det lättare för kunden att förstå

den resa du gjort för att komma fram till lösningen.

Insikt #14

Lev upp till förväntningarnaUtnyttja de unika möjligheterna i mobila

lösningar. Använd mobilens geopositionering,

gps, accelerator, kamera och alla andra funktioner

som finns i mobilen.

Användaren förväntar sig det.

Insikt #15

No more bulletpoints.Please, no more...Att se en bra presentatör är en fröjd. Att se en bra

presentatör prata engagerat om ett ämne är

dessutom inspirerande.

Men så fort presentationen består av sida upp

och sida ner bestående av bulletpoints faller allt

platt. Väldigt platt.

Ingen presentatör, hur engagerad man än må

vara, kan lyfta en bulletpoint-presentation.

Så låt oss lova varanda – inga fler bulletpoints.

Vi är 120 personligheter som drivs av nyfikenhet

och innovationsglädje.

Med hälften kreativa teknikutvecklare och hälften

kreatörer ser vi oss själva mer som uppfinnare än

som reklamare.

Lite mer om oss hittar du på www.stendahls.se.

Vill du få vårt veckomail där vi omvärldsbevakar

och tipsar om trender i den digitala världen?

Maila oss på online@stendahls.se.

Hälsningar,

Vi på Stendahls

Lite om oss