ux axd 23-24_november
TRANSCRIPT
Online Konduktør© Charlotte Frank Czepluch
UX & PROTOTYPER
I AXD
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
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
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
At sikre ENGAGEMENT & FASTHOLDELSE
(var der nogen, der hviskede ‘SPIL’ ...??)
FORNEMSTE OPGAVE
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
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
Det dykker vi ned i senere på semesteret :o)
SEO • SEM • SMO
FINDABILITY
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
APPs & www• Underholding (spil, chat, facebook)• Nytte (GPS, madopskrifter, Trello)• Information (BBC, vejrudsigten, Trivia)
Tæt forbundet med Content & Koncept
USEFULNESS
INTERAKTIONSDESIGN
• 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
Mobile enheder er kommet for at bliveOg her er der særlige hensyn at tage
MOBILE UX
USERCENTERED
DESIGN
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
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?
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
Det kan gøres på to måder
INDSAMLING AF DATA
Databaser • Surveys
KØB DEM ELLER LAV DEM SELV
PERSONAS:HISTORIEN
OM BRUGEREN
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)
Der findes mange forskellige teknikker
HVORDAN LAVES PERSONAS?
En glimrende ‘bageopskrift’Google den eller find den på DenSnuGnu (på facebook)
#2 Persona teknik
DEN ANALOGE UDGAVE
#3 Persona teknik
POST•IT KOMBI
#4 Persona teknik • B2B Personas
FIRMA UDGAVEN
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
SOM TEKNISK AFDELING INSTALLEREDE DET
SOM KUNDEN BLEV FAKTURERET
SOM DET BLEV SUPPORTERET
HVAD KUNDEN EGENTLIG BEHØVEDE
• makemypersona.com• uxbooth.com• smashingmagazine.com• pinterest.com• slideshare.net• interaction-design.org
En hjælpende hånd i Persona produktionen (links)
RESSOURCER
XX• xxx• xxx
XXX• xxx• xxx
XXX• xxx• xxx• xxx
Brugergrænsefladen
USER INTERFACE
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
Konverteringer
FORNEMSTE OPGAVE
Billeder• Fotos• Tegninger• Widgets• LOGOs
Design manual • Farveholding• Typografi
CRAP Rules (hjælp)• Contrast• Repetition• Alingment• Proximity
Billeder • Farver • Typografi
LAYOUT
BILLEDERStyrer følelserne
Eksempel: Steve McCurry
FARVER & GRAFIKStyrer stemningen
TYPOGRAFIStyrer komfort og helhedsindtryk
TypografiSerif vs Sans-Serif(med eller uden fødder)
HardCopy (print)
Curabitur quis duiCras 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 aliqmCras 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)
LayOut Prototyper
WIRE FRAMES
Særligt hvis du kommunikerer via mindre skærmstørrelser
OVERVEJ MÅLGRUPPEN
STEP 2
STEP 3
STEP 4
STEP 1
Drop alt overflødigt Content
OMPLACER • OMPRIORITER
ONLINE STRATEGY
Nav
Ads
ArchiveMain Content
Action
Related
Nav
Ads
Archive
Main Content
Action
Related
Nav
Main Content
Action
Nav
Ads
Archive
Main Content
Action
Related
Her kan man vurdere sin produktion både via et SiteMap & som WireFrames
ADOBE EXPERIENCE DESIGN
INFORMATIONARCHITECTURE
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
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
Her kan man vurdere sin produktion både via et SiteMap & som WireFrames
ADOBE EXPERIENCE DESIGN
Klik for at indsætte dit navnKlik for at indsætte afdeling / e-mail
USER JOURNEY
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
En tur til LEGOland UK
LEGO
Via forskellige medier
REJSE ARRANGEMENT
Prize Tracking
AMAZON
BRUGERVENLIGHED
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
GOD USABILITYKongen 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
Each Click must be a Mindless Choise
#2 LAW OF USABILITY
NO•GO GO•GO
YES
BLACK
LEFT
UP
IN
WHITE
RIGHT
DOWN
OUT
MAYBENO
Click once ... Click twice ... Click ...
YES
BLACK
LEFT
UP
IN
WHITE
RIGHT
DOWN
OUT
MAYBE
NO
One Click ...
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
TESTING
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
Fordi brugerne aldrig tænker som man tror
HVORFOR TESTE?
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
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
Hardware & Software
TESTE PÅ HVAD?
Er virkelig nyttig som testværktøj
Prototyper kan sendessom links og kan somsådan anskues af bådeSMÅ og STORE test grupper, på både SMÅog STORE skærme
ADOBE EXPERIENCE DESIGN
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
(HubSpot) Website Grader
CONTENT TESTING
Hvordan tester man på brugere?
BRUGER TESTE
Check Usability Gov – Metoder, værktøjer, checklister mm