UX - med användarens upplevelse i centrum

Post on 27-Jul-2015

167 views 1 download

Transcript of UX - med användarens upplevelse i centrum

snackamedmacka #

Det går inte att visa bilden. Det finns inte tillräckligt med ledigt minne för att kunna öppna bilden eller så är bilden skadad. Starta om datorn och öppna sedan filen igen. Om det röda X:et fortfarande visas måste du kanske ta bort bilden och sedan infoga den igen.

UX - med användarens upplevelse i centrum

AGENDA

Vad är UX? Förutsättningar Missar, myter Summering

08:00 08:45

UX = användarvänlighet

NOPE.

användbarhet

Reducera trösklar

psykologi

Öka motivation

$ + ? ?

Bra upplevelse

relevant

Affärsmål

Målgrupp

situation

TJÄNST

UX-missar, myter

Och nyttiga fakta &

#1

” - UX är något man kan stoppa in i slutet

av projektet

INNAN DU BÖRJAR

#2

” - Användare använder alltid lösningen precis

som det är tänkt.

MÅLGRUPP

#3

” - Användare läser på webben.

MÅLGRUPP

20% JACOB NIELSEN

#4

” - Funkar det för Apple funkar det för mig.

KONTEXT

#5

” - Kan ni lägga allt innehåll högst upp på sidan så att

man slipper skrolla?

BETEENDE

FOLD

FOLD

#6

” - Konverteringsdödare!

BETEENDE

#7

” …och nu då?

BETEENDE

#8

” Ibland blir det lite fel.

BETEENDE

#9

” - Varför behöver jag logga in?

Användarvänlighet – reducera trösklar

#10

” - Registrera i efterhand.

Användarvänlighet – reducera trösklar

#11

” - Är alltid färre klick eller steg bättre?

Användarvänlighet – reducera trösklar

#12

” - Informationsöverflöd.

Användarvänlighet – reducera trösklar

White Space: Mellanrummet mellan olika element på en websida.

ü  Scanna sidans innehåll ü  Läsbarhet ü Kan hjälpa vikta innehåll

#13

” - Var ska jag klicka?

Användarvänlighet – reducera trösklar

16-20 mm

#14

” - Hands off the keyboard!

Användarvänlighet – reducera trösklar

#15

” - Hur skulle jag göra nu igen?

Användarvänlighet – reducera trösklar

#16

” - Loading…

Användarvänlighet – reducera trösklar

#17

” - Vad betyder ikonen?

Användarvänlighet – reducera trösklar

Fördelar med ikoner

ü  Hjälpa navigering genom att sticka ut ü  Utrymmessparare ü  Visuellt tilltalande

Tänk på

ü  Håll det enkelt! ü  Testa, testa, testa! ü  Använd textlabels?

#18

” Vilken produkt ska jag välja?

Motivation – få folk att agera

#19

” Nu blev jag nyfiken!

Motivation – få folk att agera

#20

” Bara en kvar!

Motivation – få folk att agera

#21

” A/B test

Att ständigt förbättra

#22

” - Användartester?

Att ständigt förbättra

#23

” - Dags för en re-design?

Att ständigt förbättra

2010 2011 2012

2010

UX - med användarens upplevelse i centrum

þ  UX som en naturlig del tidigt i projektet

þ  Relevant upplevelse = Affärsmål, Målgrupp, Situation, Tjänst

þ  Användarupplevelse - reducera trösklar

þ  Motivation – få användare att agera

þ  Förbättra – användartester, A/B-testning

EXEMPEL Bonusmaterial…

VolksWagen ”Stundtals komplex funktionalitet och branding i ljuv symbios.

Uppmuntrar till interaktion.”

www.vw.com

GOV.UK ”Avskalat med fokus på uppgiften. Information i fokus.

Bra användning av white space.”

www.gov.uk

Virgin america ”Komplext flöde som flyter på bra och är grafiskt tilltalande. Sajten fungerar även mycket bra responsivt.

Vid längre laddning för att hämta sökresultat presenteras relevant information medans man väntar. Använder sig av snygga visuella cues för att scrolla i sidled i mobilen. Tydlig indikation för checka ut ur flödet som gäst, utan att skapa konto.”

www.virginamerica.com

FOLKS & VESPER ”Snygg använding av film i kombination med

tydliga visuella cues för ytterligare utforskning.”

www.vesperhotel.com www.folksverona.com

aquatilis ”Storytelling på hög nivå. Sätter tonen direkt med hjälp av videobakgrund och visuell cue för vidare utforskning. Trevlig applicering av hamburgerikonen.”

www.aquatilis.tv

Jonas Dahl

TACK!

Oscar Olin

TACK!