MORGENBOOSTER

MICROINTERACTIONS
DJÆVLEN I DETALJEN
LOUISE KLINKER, SENIOR UX DESIGNER
SØREN SIGFUSSON, SENIOR INTERFACE D...
MORGENBOOSTER
MORGENBOOSTER
MORGENBOOSTER

MAJOR FAIL ELLER SIGNATURE MOMENT
MORGENBOOSTER

“THE DETAILS ARE NOT
THE DETAILS. THEY MAKE
THE DESIGN”
Charles Eames
MORGENBOOSTER

EN MICROINTERACTION
ER ET LILLE STYKKE
FUNKTIONALITET, DER
GØR EN TING
MORGENBOOSTER

…SOM EN DEL AF EN FEATURE ELLER ET STØRRE PRODUKT
MORGENBOOSTER

…ELLER SOM EN APP DESIGNET OMKRING EN ENKELT MICROINTERACTION
MORGENBOOSTER

DEFINITION
MORGENBOOSTER

STRUKTUR
MORGENBOOSTER

STRUKTUR – OG OPSKRIFT PÅ SUCCESFULD MICROINTERACTION
MORGENBOOSTER

TRIGGER
MORGENBOOSTER

TRIGGER
MORGENBOOSTER

TRIGGER

MANUEL TRIGGER
> ER BRUGERINITIERET

SYSTEM TRIGGER
> ET SÆT BETINGELSER
ER OPFYLDT

>
>
>
>

> LO...
MORGENBOOSTER

GØR DATA SYNLIG
MORGENBOOSTER

RULES
MORGENBOOSTER

RULES

REGLER ER HJERTET AF
EN MICROINTERACTION
REGLER ER USYNLIGE
DE SES GENNEM
FEEDBACK
DE MÅ IKKE FØLES ...
MORGENBOOSTER

MÅL: LÆG VARE I KURV
1.

BRUGEREN KLIKKER ”ADD”
PÅ EN PRODUKTSIDE

2.

PRODUKTET LÆGGES I
KURVEN

TILFØJ EV...
MORGENBOOSTER

FJERN KOMPLEKSITET
MED BEGRÆNSEDE
VALGMULIGHEDER OG
SMARTE DEFAULTS
MORGENBOOSTER

ENKELHED I RULES
MORGENBOOSTER

RULES
MORGENBOOSTER

RULES

DONT START FROM
ZERO
MORGENBOOSTER

RULES

VI VED ALTID NOGET OM
BRUGEREN OG
KONTEKSTEN
> HVAD HAR BRUGEREN TIDLIGERE
GJORT?
> KOMMER DE FRA MO...
MORGENBOOSTER

RULES

UNDGÅ
MENNESKELIGE FEJL
MORGENBOOSTER

RULES
MORGENBOOSTER

RULES
MORGENBOOSTER

FEEDBACK
MORGENBOOSTER

FEEDBACK

TYPER
>
>
>
>
>
>

VISUEL
ANIMATION
BESKEDER
AUDIO
HAPTISK – BEVÆGELSE
LYS
MORGENBOOSTER

FEEDBACK

FOR MENNESKER!
>
>
>
>
>
>

NOGET ER SKET
DU GJORDE NOGET
EN PROCES ER STARTET
EN PROCES ER AFSLU...
MORGENBOOSTER

FEEDBACK

BEHØVER IKKE AT VISE,
HVORDAN REGLERNE
VIRKER, MEN SKAL VÆRE
NOK TIL, AT BRUGEREN
KAN DANNE SIG E...
MORGENBOOSTER

FEEDBACK
MORGENBOOSTER

MICROINTERACTIONS
=
GIMMICKY DETALJER
MORGENBOOSTER

LOOPS AND MODES
MORGENBOOSTER

MODES

METAREGLERNE
> SETTING MODE – SPECIFICER,
HVORDAN DIN MICROINTERACTION
SKAL VÆRE
> SPRING LOADED MOD...
MORGENBOOSTER

LOOPS AND MODES

LOOP - EN CYKLUS, DER
GENTAGER SIG
> HENT DATA HVERT 30. SEKUND
> SEND EN REMINDER OM 5 DA...
MORGENBOOSTER

STRUKTUR – OG OPSKRIFT PÅ SUCCESFULD MICROINTERACTION
MORGENBOOSTER

EXERGI
SOLCELLE APP
MORGENBOOSTER

FOR AT KUNNE REGNE DET UD, SKAL DU BRUGE TRE DATASÆT

LÆNGDE OG
BREDDE

HÆLDNING OG
RETNING

BILLEDE AF
SOL...
MORGENBOOSTER

MÅL: TAGE BILLEDE VED
DEN RETTE RETNING OG
HÆLDNING
DET VED VI…
> FUNKTIONALITET KØRER I
BROWSEREN
> KAMERA...
MORGENBOOSTER

DET PRØVEDE VI
> FLERE FOTOS - LÆS METADATA

> BEVÆG KAMERAET OG FIND DET
RETTE BILLEDE UD FRA DETTE

> FOR...
MORGENBOOSTER

KOM I GANG MED AT
TÆNKE
MICROINTERACTIONS
MORGENBOOSTER

KOM I GANG

1. DESIGN EN KOMPLET
MICROINTERACTION
MORGENBOOSTER
MORGENBOOSTER

KOM I GANG

2. GØR EN ALLEREDE
EKSISTERENDE
MICROINTERACTION
ENGAGERENDE
MORGENBOOSTER

SPØRG
> HVILKET PROBLEM SKAL DET LØSE?
> STARTER JEG FRA SCRATCH? HVAD VED JEG ALLEREDE OM BRUGEREN?
> HVAD...
MORGENBOOSTER

KOM I GANG

3. GØR EN
MICROINTERACTION
IDENTITETSBÆRENDE
- TIL ET SIGNATURE
MOMENT
MORGENBOOSTER

IDENTIFICER
MICROINTERACTIONS OG
POTENTIELLE SIGNATURE
MOMENTS
> HVOR NEM SKAL INTERAKTIONEN
VÆRE AT HUSKE?...
MORGENBOOSTER

ØVELSE: PEAKS AND VALLEYS
MORGENBOOSTER
MORGENBOOSTER

KOM I GANG

4. FORETAG EN
KONKURRENTVURDERING OG
IDENTIFICER
POTENTIALER
MORGENBOOSTER

HVOR MEGEN LIGHED ER
DER MELLEM
PRODUKTERNE?
> ER INTERAKTIONERNE DE SAMME?
> IDENTIFICER, HVOR EN
MICROINT...
MORGENBOOSTER

KOM I GANG

5. PROTOTYPE PÅ
PLATFORMEN
MORGENBOOSTER

5. PROTOTYPE MICROINTERACTION PÅ PLATFORMEN

BARE GØR DET – TRIAL AND ERROR
>
>
>
>
>
>
>

AFPRØV TESER - V...
MORGENBOOSTER

EN LILLE ØVELSE TIL AT STARTE PÅ ALLEREDE I DAG
HVILKEN MICROINTERACTION KUNNE TRIGGES, NÅR DU VENDER DIT D...
MORGENBOOSTER

GLÆDELIG JUL
MORGENBOOSTER

1508 JULEKUGLE
MORGENBOOSTER

DET ER IKKE GRATIS, MEN DET KAN GØRE EN KÆMPE FORSKEL

TÆNK SMÅT
DET KAN
ÆNDRE VERDEN
MORGENBOOSTER

RESSOURCER
MORGENBOOSTER

RESSOURCER
TAK FOR I DAG

NÆSTE MORGENBOOSTER
DIGITAL STRATEGI TOOLKIT
D. 22. JANUAR 2014
MORGENBOOSTER

DEFINITION

EN MICROINTERACTION
ER ET LILLE STYKKE
FUNKTIONALITET, DER
GØR ÉN TING OG HAR ÉN
USE CASE.
MODS...
MORGENBOOSTER

FILOSOFI
1.

CASE BY CASE

>IDENTIFICER MULIGE
MICROINTERACTIONS OG FOKUSER
PÅ DEM INDIVIDUELT

2.

REDUCÉR...
Morgenbooster / Microinteractions
Upcoming SlideShare
Loading in...5
×

Morgenbooster / Microinteractions

514

Published on

Se videoen fra vores oplæg om Microinteractions på www.1508.dk/Morgenbooster

Kom videre på:
http://1508.dk/services/digital-strategi
http://1508.dk/services/digitale-services

Published in: Business

Morgenbooster / Microinteractions

  1. 1. MORGENBOOSTER MICROINTERACTIONS DJÆVLEN I DETALJEN LOUISE KLINKER, SENIOR UX DESIGNER SØREN SIGFUSSON, SENIOR INTERFACE DEVELOPER
  2. 2. MORGENBOOSTER
  3. 3. MORGENBOOSTER
  4. 4. MORGENBOOSTER MAJOR FAIL ELLER SIGNATURE MOMENT
  5. 5. MORGENBOOSTER “THE DETAILS ARE NOT THE DETAILS. THEY MAKE THE DESIGN” Charles Eames
  6. 6. MORGENBOOSTER EN MICROINTERACTION ER ET LILLE STYKKE FUNKTIONALITET, DER GØR EN TING
  7. 7. MORGENBOOSTER …SOM EN DEL AF EN FEATURE ELLER ET STØRRE PRODUKT
  8. 8. MORGENBOOSTER …ELLER SOM EN APP DESIGNET OMKRING EN ENKELT MICROINTERACTION
  9. 9. MORGENBOOSTER DEFINITION
  10. 10. MORGENBOOSTER STRUKTUR
  11. 11. MORGENBOOSTER STRUKTUR – OG OPSKRIFT PÅ SUCCESFULD MICROINTERACTION
  12. 12. MORGENBOOSTER TRIGGER
  13. 13. MORGENBOOSTER TRIGGER
  14. 14. MORGENBOOSTER TRIGGER MANUEL TRIGGER > ER BRUGERINITIERET SYSTEM TRIGGER > ET SÆT BETINGELSER ER OPFYLDT > > > > > LOKATION > INDGÅENDE DATA (3 NYE MAILS) > ANDRE MICROINTERACTIONS > ANDRE MENNESKER (REPOST ETC.) > FEJL EN KONTROL ET IKON EN FORM STEMME, BERØRING ELLER GESTUS
  15. 15. MORGENBOOSTER GØR DATA SYNLIG
  16. 16. MORGENBOOSTER RULES
  17. 17. MORGENBOOSTER RULES REGLER ER HJERTET AF EN MICROINTERACTION REGLER ER USYNLIGE DE SES GENNEM FEEDBACK DE MÅ IKKE FØLES SOM REGLER, MEN SOM ET FLOW GENERERES UD FRA ET MÅL: FX AT LOGGE EN BRUGER IND
  18. 18. MORGENBOOSTER MÅL: LÆG VARE I KURV 1. BRUGEREN KLIKKER ”ADD” PÅ EN PRODUKTSIDE 2. PRODUKTET LÆGGES I KURVEN TILFØJ EVT. FLERE NUANCER 1. TJEK OM PRODUKTET ALLEREDE ER I KURVEN, HVIS JA, SÅ VIS ”ADD ANOTHER”, HVIS EJ, SÅ VIS ”ADD” 2. BRUGER KLIKKER KNAPPEN 3. PRODUKTET LÆGGES I KURVEN
  19. 19. MORGENBOOSTER FJERN KOMPLEKSITET MED BEGRÆNSEDE VALGMULIGHEDER OG SMARTE DEFAULTS
  20. 20. MORGENBOOSTER ENKELHED I RULES
  21. 21. MORGENBOOSTER RULES
  22. 22. MORGENBOOSTER RULES DONT START FROM ZERO
  23. 23. MORGENBOOSTER RULES VI VED ALTID NOGET OM BRUGEREN OG KONTEKSTEN > HVAD HAR BRUGEREN TIDLIGERE GJORT? > KOMMER DE FRA MOBIL, WEB ELLER TABLET? > TID PÅ DAGEN? > HVOR LÆNGE SIDEN SIDSTE BRUG? > BATTERILEVETID? > LOKATION/RETNING?
  24. 24. MORGENBOOSTER RULES UNDGÅ MENNESKELIGE FEJL
  25. 25. MORGENBOOSTER RULES
  26. 26. MORGENBOOSTER RULES
  27. 27. MORGENBOOSTER FEEDBACK
  28. 28. MORGENBOOSTER FEEDBACK TYPER > > > > > > VISUEL ANIMATION BESKEDER AUDIO HAPTISK – BEVÆGELSE LYS
  29. 29. MORGENBOOSTER FEEDBACK FOR MENNESKER! > > > > > > NOGET ER SKET DU GJORDE NOGET EN PROCES ER STARTET EN PROCES ER AFSLUTTET EN PROCES ER I GANG DU KAN IKKE GØRE DET HER
  30. 30. MORGENBOOSTER FEEDBACK BEHØVER IKKE AT VISE, HVORDAN REGLERNE VIRKER, MEN SKAL VÆRE NOK TIL, AT BRUGEREN KAN DANNE SIG EN MENTAL MODEL AF MICROINTERACTIONEN.
  31. 31. MORGENBOOSTER FEEDBACK
  32. 32. MORGENBOOSTER MICROINTERACTIONS = GIMMICKY DETALJER
  33. 33. MORGENBOOSTER LOOPS AND MODES
  34. 34. MORGENBOOSTER MODES METAREGLERNE > SETTING MODE – SPECIFICER, HVORDAN DIN MICROINTERACTION SKAL VÆRE > SPRING LOADED MODE > ON/OFF MODES – OFTE EN TRIGGER – MEN F.EKS OGSÅ DOBBELT TAB I IOS FOR AT COPY/PASTE
  35. 35. MORGENBOOSTER LOOPS AND MODES LOOP - EN CYKLUS, DER GENTAGER SIG > HENT DATA HVERT 30. SEKUND > SEND EN REMINDER OM 5 DAGE > HVAD SKER DER NÅR DU VENDER TILBAGE ANDEN GANG? 100. GANG?
  36. 36. MORGENBOOSTER STRUKTUR – OG OPSKRIFT PÅ SUCCESFULD MICROINTERACTION
  37. 37. MORGENBOOSTER EXERGI SOLCELLE APP
  38. 38. MORGENBOOSTER FOR AT KUNNE REGNE DET UD, SKAL DU BRUGE TRE DATASÆT LÆNGDE OG BREDDE HÆLDNING OG RETNING BILLEDE AF SOLCELLERNES ”UDSIGT”
  39. 39. MORGENBOOSTER MÅL: TAGE BILLEDE VED DEN RETTE RETNING OG HÆLDNING DET VED VI… > FUNKTIONALITET KØRER I BROWSEREN > KAMERAET LIGGER ”OVENPÅ”
  40. 40. MORGENBOOSTER DET PRØVEDE VI > FLERE FOTOS - LÆS METADATA > BEVÆG KAMERAET OG FIND DET RETTE BILLEDE UD FRA DETTE > FORTÆL MIG, NÅR JEG SKAL TAGE BILLEDET
  41. 41. MORGENBOOSTER KOM I GANG MED AT TÆNKE MICROINTERACTIONS
  42. 42. MORGENBOOSTER KOM I GANG 1. DESIGN EN KOMPLET MICROINTERACTION
  43. 43. MORGENBOOSTER
  44. 44. MORGENBOOSTER KOM I GANG 2. GØR EN ALLEREDE EKSISTERENDE MICROINTERACTION ENGAGERENDE
  45. 45. MORGENBOOSTER SPØRG > HVILKET PROBLEM SKAL DET LØSE? > STARTER JEG FRA SCRATCH? HVAD VED JEG ALLEREDE OM BRUGEREN? > HVAD ER DEN CENTRALE DATA OG KAN DEN SYNLIGGØRES FOR BRUGEREN? > VIL EN SPECIALDESIGNET KONTROL VÆRE PÅ SIN PLADS? > UNDGÅR JEG MENNESKELIGE FEJL? > ER TEKST OG IKON MENNESKEVENLIGE? LYDER TEKSTEN SOM NOGET MAN VILLE SIGE HØJT? > GIVER DET MENING AT TILFØJE EN ANIMATION FOR AT GØRE DET MINDRE STATISK? > GIVER DET MENING AT TILFØJE ANDRE FEEDBACKKANALER? LYD ELLER HAPTISK? > HVAD SKER DER, NÅR BRUGEREN KOMMER TILBAGE TIL INTERAKTIONEN FOR ANDEN GANG? ELLER FOR 100. GANG?
  46. 46. MORGENBOOSTER KOM I GANG 3. GØR EN MICROINTERACTION IDENTITETSBÆRENDE - TIL ET SIGNATURE MOMENT
  47. 47. MORGENBOOSTER IDENTIFICER MICROINTERACTIONS OG POTENTIELLE SIGNATURE MOMENTS > HVOR NEM SKAL INTERAKTIONEN VÆRE AT HUSKE? JO LETTERE AT HUSKE, JO RIGERE FEEDBACK OG KONTROLLER (MÅSKE SPECIALDESIGNEDE) > SPØRG DIG SELV: ER DET HER ET SIGNATURE MOMENT? > 90% AF TIDEN ER SVARET NEJ!
  48. 48. MORGENBOOSTER ØVELSE: PEAKS AND VALLEYS
  49. 49. MORGENBOOSTER
  50. 50. MORGENBOOSTER KOM I GANG 4. FORETAG EN KONKURRENTVURDERING OG IDENTIFICER POTENTIALER
  51. 51. MORGENBOOSTER HVOR MEGEN LIGHED ER DER MELLEM PRODUKTERNE? > ER INTERAKTIONERNE DE SAMME? > IDENTIFICER, HVOR EN MICROINTERACTION KUNNE GØRE EN FORSKEL I BRUGEROPLEVELSEN > HVILKE MICROINTERACTIONS KAN FORBEDRES IFT. TIL KONKURRENTEN? > HVILKE IRRITATIONSMOMENTER ER DER HOS KONKURRENTEN?
  52. 52. MORGENBOOSTER KOM I GANG 5. PROTOTYPE PÅ PLATFORMEN
  53. 53. MORGENBOOSTER 5. PROTOTYPE MICROINTERACTION PÅ PLATFORMEN BARE GØR DET – TRIAL AND ERROR > > > > > > > AFPRØV TESER - VI ER NØDT TIL AT TESTE NØDT TIL AT FORNEMME DET INGEN ABSOLUT VIDENSKAB KAN FØRST RIGTIGT VURDERES, NÅR MAN SIDDER MED DET START MED AT SNIGE EN VELDESIGNET MICROINTERACTION IND DEN VIL SMITTE AF PÅ ANDRE MICROINTERACTIONS MVP – MINIMUM VIABLE PRODUCT PERMISSION
  54. 54. MORGENBOOSTER EN LILLE ØVELSE TIL AT STARTE PÅ ALLEREDE I DAG HVILKEN MICROINTERACTION KUNNE TRIGGES, NÅR DU VENDER DIT DEVICE?
  55. 55. MORGENBOOSTER GLÆDELIG JUL
  56. 56. MORGENBOOSTER 1508 JULEKUGLE
  57. 57. MORGENBOOSTER DET ER IKKE GRATIS, MEN DET KAN GØRE EN KÆMPE FORSKEL TÆNK SMÅT DET KAN ÆNDRE VERDEN
  58. 58. MORGENBOOSTER RESSOURCER
  59. 59. MORGENBOOSTER RESSOURCER
  60. 60. TAK FOR I DAG NÆSTE MORGENBOOSTER DIGITAL STRATEGI TOOLKIT D. 22. JANUAR 2014
  61. 61. MORGENBOOSTER DEFINITION EN MICROINTERACTION ER ET LILLE STYKKE FUNKTIONALITET, DER GØR ÉN TING OG HAR ÉN USE CASE. MODSAT FEATURES ER MICROINTERACTIONS ENKLE, KORTE OG UBESVÆREDE.
  62. 62. MORGENBOOSTER FILOSOFI 1. CASE BY CASE >IDENTIFICER MULIGE MICROINTERACTIONS OG FOKUSER PÅ DEM INDIVIDUELT 2. REDUCÉR ET KOMPLEKST >REDUCER KOMPLICERET PRODUKT TIL FEATURE TIL EN KERNEENKELSTÅENDE PRODUKTER MICROINTERACTION BYGGET OMKRING EN MICROINTERATION 3. SE KOMPLEKSE PRODUKTER >BEHANDEL EN FEATURE SOM ET SOM EN HARMONI AF SÆT AF SAMMENKÆDEDE MICROINTERACTIONS, DER MICROINTERACTIONS SPILLER SAMMEN
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×