UX & Prototyper med Adobe Experience Design

1. Online Konduktør
© Charlotte Frank Czepluch
UX &
PROTOTYPER
I AXD

2. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

3. Hvad er UX – User Experience?
• Den oplevelse brugeren får i mødet med fx et
digitalt værktøj, et spil eller dit web site
Hvad er UXD – User Experience Design?
• Arbejdet med at optimere fx dit web site, så
du sikrer brugeren den bedst mulige UX
Hvad er UCD – User Centered Design?
• Sætter brugeren i centrum og anvender test
til at sikre optimal UX
Hvad er Usability?
• Et mål for hvor brugervenligt fx dit site er.
Er det nemt at finde rundt på? Nemt at bruge?
Hvad er UI – User Interface?
• Dit web sites overflade / ‘ansigt’
Hvad er en User Journey?
• Den rejse brugeren oplever ved brug af fx dit
web site
Hvad er et User Scenario?
• En brugerrejse eller fx et Site Map i tegneserie
format
Hvad er IA – Information Architecture?
• Den måde du har organiseret dit content / din
information på, fx på dit web site
Hvad er Flow?
• Den sti du arbejder for at få din bruger til at
følge – måske fordi du mener, at det er den
bedste vej for brugeren
User Experience er en bredt orienteret ekspertise
DEFINITIONER

4. Komplekse sites og systemer
• Amazon er et godt eksempel
APPs
• Store skærme er snart passé
Nystartede virksomheder
• Virksomheder der starter deres online liv
fra scratch og som er åbne for at tage
udgangspunkt i optimeret UX
• Eller måske en ny Branson Branch :o)
Projekter med OK budgetter
• Som i ‘for virksomheder med penge’
Projekter med længere tidshorisonter
• UX tager sin tid ...
Eksempler
HVAD LAVER EN UX DESIGNER

5. At sikre ENGAGEMENT & FASTHOLDELSE
(var der nogen, der hviskede ‘SPIL’ ...??)
FORNEMSTE OPGAVE

6. Lidt ligesom i kunstskøjteløb
Teknisk orienteret UX
• Navigation
• Høre – Se – Føle
• Brugervenlighed
• Interaktion
Kunstnerisk orienteret UX
• Er dit site inspirerende – fænger det?
• Nytteværdi – udvikler det?
• Forståelse – empati – interaktion
Teknisk & Kunstnerisk karakter
2 FORMER FOR UX

7. Findability
• SEO / SEM / SMO
Accessibility
• Er der taget højde for alle skærmstørrelser,
båndbredder og eventuelle handicap
Desirability (baseret på UCD)
• Gider jeg? Har nogen gjort sig umage for at
gøre denne hjemmeside fed for mig? Er der
tænkt over mine behov / ønsker?
UI – User Interface – Interaktionsdesign
• Er det fedt? Smukt? Spændende?
Usability – Forgiveness
• Er det nemt at bruge? Kan jeg? Bliver jeg
hjulpet med feedback undervejs?
IA – User Journey
• Finder jeg rundt uden besvær eller farer
jeg vild? Kan jeg finde hvad jeg skal bruge?
Finder jeg noget andet end det jeg kom for –
og er det godt eller skidt?
Usefulness
• Er det nyttigt? Gør det nok for mig? Er det
lovligt? Stoler jeg på det? Tør jeg bruge mit
betalingskort her?
Den gode UX afhænger af mange forskellige elementer
GOD UX – EN KOMPLEKS SAG

8. Det dykker vi ned i senere på semesteret :o)
SEO • SEM • SMO
FINDABILITY

9. Software
• Kode tilpasset forskellige browsers, som igen
er tilpasset forskellige hardware platforme
• Fx iOS, Android, Safari, Firefox, Chrome ...
Hardware
• Responsive lay-outs, der automatisk tilpasser
sig forskellige skærmstørrelser
• Lay-outs der udnytter hardware potentiale og
muligheder, såsom lyd, billeder, bevægelse ...
Design
• Optimeret brugervenlighed
• Optimeret brugeroplevelse
Tilgængelighed
ACCESSIBILITY

10. APPs & www
• Underholding (spil, chat, facebook)
• Nytte (GPS, madopskrifter, Trello)
• Information (BBC, vejrudsigten, Trivia)
Tæt forbundet med Content & Koncept
USEFULNESS

11. INTERAKTIONSDESIGN

12. • Design
• Mus – Pen – Pege
• Intuitive kvaliteter
• Feedback
• Layout
• Billeder
• Video
• Links
• Lys / Mørke
• PopUp – DropDown
• CRAP Rules – især Proximity & Gentagelse
• Cognitive dimensioner
• Bevægelse
• Berøring
• Lyd – Musik
• Timing
Virkemidler
INTERAKTIONSDESIGN

13. Mobile enheder er kommet for at blive
Og her er der særlige hensyn at tage
MOBILE UX

14. USER
CENTERED
DESIGN

15. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

16. Hvad er en user?
• Den gennemsnitlige bruger
• Sagt på en anden måde:
Ikke helt det samme som en målgruppe
• Men for at få en bruger, skal man først markedsføre
sig effektivt overfor en målgruppe
“En bruger er en konverteret målgruppist”
– Charlotte Frank, OnLine Konduktør
Er det vigtigt at kende sin bruger?
• Google siger JA: ‘Follow the User and All Else Will
Follow’ – en Google Truth
• ‘All Else’ inkluderer omsætning / $$$
B2B & B2C Users
• Er der forskel?
User Centered Design
HVAD ER UCD?

17. 1) B2B eller B2C?
• Minder mistænkeligt om målgruppe
segmentering
2) Demografi – Geografi – Kultur
• Minder mistænkeligt om
yderligere segmentering
3) Behov
• Skjulte, erkendte, latente
• Var der nogen, der hviskede
Maslows behovspyramide?
4) Forudsætninger
• Hardware, Software, forbindelse
• Fysiske, mentale
• Sociale / Professionelle roller
Hvem er brugeren?
USER RESEARCH

18. Det kan gøres på to måder
INDSAMLING AF DATA

19. Databaser • Surveys
KØB DEM ELLER LAV DEM SELV

20. PERSONAS:
HISTORIEN
OM BRUGEREN

21. Hvad er det?
PERSONAS
En Persona ...
• ... er en fiktiv figur, som repræsenterer en
række rigtige brugeres behov.
Personas er IKKE ...
... markedssegmenter
... målgrupper
... rigtige brugere
En Persona afdækker bruger-
• -behov
• -motivation
• -aversion
• -kultur
En persona hjælper med at ...
... holde brugeren i centrum, mens du udvikler fx
web sites, idet en Persona gør den ellers anonyme
‘bruger’ mere konkret og gør det nemmere at finde
empati frem
UX Designers — know this: culture affects an
individual’s perception of usability.
Understanding this concept may require
Designers to take a step back and reevaluate
what makes a product or design usable.
Keval Baxi,
Usability Geek
(link, ja)

22. Der findes mange forskellige teknikker
HVORDAN LAVES PERSONAS?
En glimrende ‘bageopskrift’
Google den eller find den på DenSnuGnu (på facebook)

23. #1 Persona teknik
BRUG EN GENERATOR

24. #2 Persona teknik
DEN ANALOGE UDGAVE

25. #3 Persona teknik
POST•IT KOMBI

26. #4 Persona teknik • B2B Personas
FIRMA UDGAVEN

27. Personas øger fokus på BRUGEREN og konsensus i teamet
FÆRRE MISFORSTÅELSER
SOM KUNDEN
FORKLAREDE DET
SOM PROJEKTLEDEREN
FORSTOD DET
SOM DESIGNEREN
SÅ DET
SOM PROGRAMMØREN
OPFATTEDE DET
SOM KONSULENTEN
BESKREV DET
SOM PROJEKTET BLEV
DOKUMENTERET
SOMTEKNISK AFDELING
INSTALLEREDE DET
SOM KUNDEN BLEV
FAKTURERET
SOM DET BLEV
SUPPORTERET
HVAD KUNDEN
EGENTLIG BEHØVEDE

28. • makemypersona.com
• uxbooth.com
• smashingmagazine.com
• pinterest.com
• slideshare.net
• interaction-design.org
En hjælpende hånd i Persona produktionen (links)
RESSOURCER

29. XX
• xxx
• xxx
XXX
• xxx
• xxx
XXX
• xxx
• xxx
• xxx
Brugergrænsefladen
USER INTERFACE

30. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

31. Konverteringer
FORNEMSTE OPGAVE

32. Billeder
• Fotos
• Tegninger
• Widgets
• LOGOs
Design manual
• Farveholding
• Typografi
CRAP Rules (hjælp)
• Contrast
• Repetition
• Alingment
• Proximity
Billeder • Farver • Typografi
LAYOUT

33. BILLEDER
Styrer følelserne
Eksempel: Steve McCurry

34. FARVER & GRAFIK
Styrer stemningen

35. TYPOGRAFI
Styrer komfort og helhedsindtryk

36. Typografi
Serif vs Sans-Serif
(med eller uden fødder)
HardCopy (print)
Curabitur quis dui
Cras dictum. Maecenas ut turpis. In vitae erat ac
orci dignissim eleifend. Nunc quis justo. Sed vel
ipsum in purus tincidunt pharetra. Sed pulvinar,
felis id consectetuer malesuada.
Digital
Sit amet elit luctus aliqm
Cras dictum. Maecenas ut turpis. In vitae erat ac
orci dignissim eleifend. Nunc quis justo. Sed vel
ipsum in purus tincidunt pharetra. Sed pulvinar,
felis id consectetuer malesuada.
(SANS OVERSKRIFT) (SERIF OVERSKRIFT)
(SERIF BRØDTEKST) (SANS BRØDTEKST)

37. LayOut Prototyper
WIRE FRAMES

38. Særligt hvis du kommunikerer via mindre skærmstørrelser
OVERVEJ MÅLGRUPPEN
STEP 2
STEP 3
STEP 4
STEP 1

39. Drop alt overflødigt Content
OMPLACER • OMPRIORITER
ONLINE STR ATEGY
Nav
Ads
Archive
Main Content
Action
Related
Nav
Ads
Archive
Main
Content
Action
Related
Nav
Main
Content
Action
Nav
Ads
Archive
Main
Content
Action
Related

40. Her kan man vurdere sin
produktion både via et
SiteMap & som WireFrames
ADOBE EXPERIENCE DESIGN

41. Web Sites optimeret til flere forskellige skærm størrelser
EKSEMPLER

42. INFORMATION
ARCHITECTURE

43. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

44. Navigation & Site Maps
IA
Information Architecture (IA), Navigation og
Site Maps er tæt forbundne. IA handler om,
hvordan content prioriteres og præsenteres
for brugeren.
Selvom Coggle egentlig er beregnet til at lave
Mind Maps i – og som sådan glimrende – så er
det også glimrende til at håndtere Site Maps.
På Coggle’s
forside findes
en lille
instruktions
film

45. Her kan man vurdere sin
produktion både via et
SiteMap & som WireFrames
ADOBE EXPERIENCE DESIGN

46. Klik for at indsætte dit navn
Klik for at indsætte afdeling / e-mail
USER
JOURNEY

47. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

48. En tur til LEGOland UK
LEGO

49. Via forskellige medier
REJSE ARRANGEMENT

50. Prize Tracking
AMAZON

51. BRUGER
VENLIGHED

52. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

53. GOD USABILITY
Kongen af Usability
Steve Krug
• Mener at god Usability er til stede, hvis
brugeren ikke behøver at tænke over brugen
af et online værktøj

54. Don’t Make Me Think!
#1 LAW OF USABILITY
Breadcrumbs

55. Each Click must be a Mindless Choise
#2 LAW OF USABILITY
NO•GO GO•GO
YES
BLACK
LEFT
UP
IN
WHITE
RIGHT
DOWN
OUT
MAYBE
NO
Click once ... Click twice ... Click ...
YES
BLACK
LEFT
UP
IN
WHITE
RIGHT
D O W N
OUT
MAYBE
NO
One Click ...

56. Get rid of half the text on each side ...
... and then delete half of the rest
#3 LAW OF USABILITY
BEFORE: 1.464 characters NOW: 254 characters

57. TESTING

58. HVOR ER
VI NU?
BRUGER oplevelse (UX)
BRUGER centreret design (UCD)
BRUGER grænseflade (UI)
INFORMATIONS arkitektur (IA)
BRUGER rejsen (User Journey)
BRUGER venlighed (Usability)
BRUGER testing

59. Fordi brugerne aldrig tænker som man tror
HVORFOR TESTE?

60. Så meget som muligt i forløbet
HVORNÅR TESTE?
SiteMaps / FlowCharts / WireFrames
+ Kan gøres nemt og billigt
- Er svære at dele
- Er ikke optimale i test regie
Introducer online værktøjer
+ Gør det nemmere at dele billige testversioner,
som SiteMaps / FlowCharts / WireFrames
- Ikke alle er til Coggle, Pinterest, Evernote,
Trello og JoinMe
- Kan ikke bruges i test regie
WordPress Test Site
+ Nem at dele med alle typer Interessenter
+ Optimale i test regie
- Indlæringskurven er stejl
Amazons $300 millioner knap

61. Igen sætter vi kunstskøjterne på
HVORDAN TESTE?
Teknisk
• Virker sitet på alle relevante browsere
• Virker sitet på alle relevante skærmstørrelser
Kunstnerisk
• Reagerer brugerne som forventet
• Udvikler konverteringerne sig som forventet

62. Hardware & Software
TESTE PÅ HVAD?

63. Er virkelig nyttig som
testværktøj
Prototyper kan sendes
som links og kan som
sådan anskues af både
SMÅ og STORE test
grupper, på både SMÅ
og STORE skærme
ADOBE EXPERIENCE DESIGN

64. Historisk udvikling
• Prøv og Prøv Igen
• Enten eller
A-B – Split Testing – når
• Trafikken er begrænset
• Koncept Niveau / Tidlig projekt fase
MVT – Multi Variate Testing – når
• Der er masser af data (og traffik)
• Kampagnen er kompleks med flere elementer
• Når ældre sites skal optimeres
Hvornår bruge hvad
TEST TYPER

65. (HubSpot) Website Grader
CONTENT TESTING

66. Hvordan tester man på brugere?
BRUGER TESTE
Check Usability Gov –
Metoder, værktøjer,
checklister mm