morgenbooster / microinteractions

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

Upload: 1508-as

Post on 02-Nov-2014

587 views

Category:

Business


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Morgenbooster / Microinteractions

MICROINTERACTIONS DJÆVLEN I DETALJEN LOUISE KLINKER, SENIOR UX DESIGNER

SØREN SIGFUSSON, SENIOR INTERFACE DEVELOPER

MORGENBOOSTER

Page 2: Morgenbooster / Microinteractions

MORGENBOOSTER

Page 3: Morgenbooster / Microinteractions

MORGENBOOSTER

Page 4: Morgenbooster / Microinteractions

MAJOR FAIL ELLER SIGNATURE MOMENT

MORGENBOOSTER

Page 5: Morgenbooster / Microinteractions

“THE DETAILS ARE NOT THE DETAILS. THEY MAKE THE DESIGN”

Charles Eames

MORGENBOOSTER

Page 6: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 7: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 8: Morgenbooster / Microinteractions

…ELLER SOM EN APP DESIGNET OMKRING EN ENKELT MICROINTERACTION

MORGENBOOSTER

Page 9: Morgenbooster / Microinteractions

DEFINITION

MORGENBOOSTER

Page 10: Morgenbooster / Microinteractions

STRUKTUR

MORGENBOOSTER

Page 11: Morgenbooster / Microinteractions

STRUKTUR – OG OPSKRIFT PÅ SUCCESFULD MICROINTERACTION

MORGENBOOSTER

Page 12: Morgenbooster / Microinteractions

TRIGGER

MORGENBOOSTER

Page 13: Morgenbooster / Microinteractions

TRIGGER

MORGENBOOSTER

Page 14: Morgenbooster / Microinteractions

TRIGGER

MANUEL TRIGGER

> ER BRUGERINITIERET

> EN KONTROL

> ET IKON

> EN FORM

> STEMME, BERØRING ELLER GESTUS

SYSTEM TRIGGER

> ET SÆT BETINGELSER ER OPFYLDT

> LOKATION

> INDGÅENDE DATA (3 NYE MAILS)

> ANDRE MICROINTERACTIONS

> ANDRE MENNESKER (REPOST ETC.)

> FEJL

MORGENBOOSTER

Page 15: Morgenbooster / Microinteractions

GØR DATA SYNLIG

MORGENBOOSTER

Page 16: Morgenbooster / Microinteractions

RULES

MORGENBOOSTER

Page 17: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 18: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 19: Morgenbooster / Microinteractions
Page 20: Morgenbooster / Microinteractions

FJERN KOMPLEKSITET MED BEGRÆNSEDE VALGMULIGHEDER OG SMARTE DEFAULTS

MORGENBOOSTER

Page 21: Morgenbooster / Microinteractions

ENKELHED I RULES

MORGENBOOSTER

Page 22: Morgenbooster / Microinteractions

Indholdsslide:

Almindelig

indholdsside med

stort element

RULES

MORGENBOOSTER

Page 23: Morgenbooster / Microinteractions

DONT START FROM ZERO

RULES

MORGENBOOSTER

Page 24: Morgenbooster / Microinteractions

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?

MORGENBOOSTER

Page 25: Morgenbooster / Microinteractions

UNDGÅ MENNESKELIGE FEJL

RULES

MORGENBOOSTER

Page 26: Morgenbooster / Microinteractions

RULES

MORGENBOOSTER

Page 27: Morgenbooster / Microinteractions

RULES

MORGENBOOSTER

Page 28: Morgenbooster / Microinteractions

FEEDBACK

MORGENBOOSTER

Page 29: Morgenbooster / Microinteractions

FEEDBACK

TYPER

> VISUEL

> ANIMATION

> BESKEDER

> AUDIO

> HAPTISK – BEVÆGELSE

> LYS

MORGENBOOSTER

Page 30: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 31: Morgenbooster / Microinteractions

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.

MORGENBOOSTER

Page 32: Morgenbooster / Microinteractions

FEEDBACK

MORGENBOOSTER

Page 33: Morgenbooster / Microinteractions

MICROINTERACTIONS = GIMMICKY DETALJER

MORGENBOOSTER

Page 34: Morgenbooster / Microinteractions

LOOPS AND MODES

MORGENBOOSTER

Page 35: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 36: Morgenbooster / Microinteractions

LOOPS AND MODES

MORGENBOOSTER

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?

Page 37: Morgenbooster / Microinteractions

STRUKTUR – OG OPSKRIFT PÅ SUCCESFULD MICROINTERACTION

MORGENBOOSTER

Page 38: Morgenbooster / Microinteractions

EXERGI SOLCELLE APP

MORGENBOOSTER

Page 39: Morgenbooster / Microinteractions

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

MORGENBOOSTER

LÆNGDE OG

BREDDE

HÆLDNING OG

RETNING

BILLEDE AF

SOLCELLERNES

”UDSIGT”

Page 40: Morgenbooster / Microinteractions

MÅL: TAGE BILLEDE VED DEN RETTE RETNING OG HÆLDNING

DET VED VI…

> FUNKTIONALITET KØRER I BROWSEREN

> KAMERAET LIGGER ”OVENPÅ”

MORGENBOOSTER

Page 41: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 42: Morgenbooster / Microinteractions

KOM I GANG MED AT TÆNKE MICROINTERACTIONS

MORGENBOOSTER

Page 43: Morgenbooster / Microinteractions

1. DESIGN EN KOMPLET MICROINTERACTION

KOM I GANG

MORGENBOOSTER

Page 44: Morgenbooster / Microinteractions

MORGENBOOSTER

Page 45: Morgenbooster / Microinteractions

2. GØR EN ALLEREDE EKSISTERENDE MICROINTERACTION ENGAGERENDE

KOM I GANG

MORGENBOOSTER

Page 46: Morgenbooster / Microinteractions

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?

MORGENBOOSTER

Page 47: Morgenbooster / Microinteractions

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

KOM I GANG

MORGENBOOSTER

Page 48: Morgenbooster / Microinteractions

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!

MORGENBOOSTER

Page 49: Morgenbooster / Microinteractions

ØVELSE: PEAKS AND VALLEYS

MORGENBOOSTER

Page 50: Morgenbooster / Microinteractions

MORGENBOOSTER

Page 51: Morgenbooster / Microinteractions

4. FORETAG EN KONKURRENT- VURDERING OG IDENTIFICER POTENTIALER

KOM I GANG

MORGENBOOSTER

Page 52: Morgenbooster / Microinteractions

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?

MORGENBOOSTER

Page 53: Morgenbooster / Microinteractions

5. PROTOTYPE PÅ PLATFORMEN

KOM I GANG

MORGENBOOSTER

Page 54: Morgenbooster / Microinteractions

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

MORGENBOOSTER

Page 55: Morgenbooster / Microinteractions

Indholdsslide:

Almindelig

indholdsside med

stort element

EN LILLE ØVELSE TIL AT STARTE PÅ ALLEREDE I DAG

HVILKEN MICROINTERACTION KUNNE TRIGGES, NÅR DU VENDER DIT DEVICE?

MORGENBOOSTER

Page 56: Morgenbooster / Microinteractions

GLÆDELIG JUL

MORGENBOOSTER

Page 57: Morgenbooster / Microinteractions

1508 JULEKUGLE

MORGENBOOSTER

Page 58: Morgenbooster / Microinteractions

TÆNK SMÅT DET KAN ÆNDRE VERDEN

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

MORGENBOOSTER

Page 59: Morgenbooster / Microinteractions

RESSOURCER

MORGENBOOSTER

Page 60: Morgenbooster / Microinteractions

RESSOURCER

MORGENBOOSTER

Page 61: Morgenbooster / Microinteractions

Blank slideTAK FOR I DAG

NÆSTE MORGENBOOSTER

DIGITAL STRATEGI TOOLKIT

D. 22. JANUAR 2014

Page 62: Morgenbooster / Microinteractions

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.

MORGENBOOSTER

Page 63: Morgenbooster / Microinteractions

FILOSOFI

1. CASE BY CASE

2. REDUCÉR ET KOMPLEKST

PRODUKT TIL

ENKELSTÅENDE PRODUKTER

BYGGET OMKRING EN

MICROINTERATION

3. SE KOMPLEKSE PRODUKTER

SOM EN HARMONI AF

MICROINTERACTIONS, DER

SPILLER SAMMEN

>IDENTIFICER MULIGE

MICROINTERACTIONS OG FOKUSER

PÅ DEM INDIVIDUELT

>REDUCER KOMPLICERET

FEATURE TIL EN KERNE-

MICROINTERACTION

>BEHANDEL EN FEATURE SOM ET

SÆT AF SAMMENKÆDEDE

MICROINTERACTIONS

MORGENBOOSTER