deformable and shape changing interfaces

Download Deformable and Shape Changing Interfaces

Post on 23-Jan-2017

100 views

Category:

Technology

2 download

Embed Size (px)

TRANSCRIPT

  • Deformable and shape-changing user interfaces

    Kasper Hornbk, University of Copenhagen

  • apple.com

  • wallviz.dk

  • Samsung, CES 2013

  • PaperPhone, CHI 2012

  • Samsung, CES 2014

  • MorePhone

    MorePhone, CHI 2013

  • PneUI, UIST 2013

  • PneUI, UIST 2013

  • Rasmussen et al., CHI 2012

  • 44 papers on shape change

  • 44 papers on shape change

  • Little UX

  • ghost-fet.org

  • ghost-fet.org

    Dr. Kasper Hornbk Dr. Esben W. Pedersen Giovanni M. Troiano John Tiab

  • UserExperience

    Technology Design

    GHOST

  • UserExperience

    Technology Design

    GHOST

  • Study 1:Guessability of Gestures

    Study 2:Crowd-Sourced Reactions

    Study 3:Repository Grid Evaluation

  • Troiano, Pedersen & Hornbk (AVI 2014)

  • Gestures were recorded with four cameras

  • Gestures were recorded with four cameras

  • 10 page coding manual

  • Many%varia)ons%

  • Influence of Elasticity

  • Study 1:Guessability of Gestures

    Study 2:Crowd-Sourced Reactions

    Study 3:Repository Grid Evaluation

  • Pedersen, Subramanian & Hornbk (CHI 2014)

  • Pedersen, Subramanian & Hornbk (CHI 2014)

  • Shape-changing Handheld

  • Shape-changing Handheld

  • Parameters of shape change

    1.5x

    3x

    5x

    pi

    -pi/2

    pi/2

    15 mm

    20 mm

    60 mm

    n = 3

    n = 8

    n = 14

    n = 1

    n = 2

    n = 3

    towards (18 mm)

    away (18 mm)

    13 mm/s

    0 1 2 3 64 5

    53 mm/s

    0 1 2 3 64 5

    Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend

    LowM

    ediumH

    igh

    Hemmert et al. Gomes et al. Roudaut et al.

  • Parameters of shape change

    1.5x

    3x

    5x

    pi

    -pi/2

    pi/2

    15 mm

    20 mm

    60 mm

    n = 3

    n = 8

    n = 14

    n = 1

    n = 2

    n = 3

    towards (18 mm)

    away (18 mm)

    13 mm/s

    0 1 2 3 64 5

    53 mm/s

    0 1 2 3 64 5

    Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend

    LowM

    ediumH

    igh

    Hemmert et al. Gomes et al. Roudaut et al.

  • Parameters of shape change

    1.5x

    3x

    5x

    pi

    -pi/2

    pi/2

    15 mm

    20 mm

    60 mm

    n = 3

    n = 8

    n = 14

    n = 1

    n = 2

    n = 3

    towards (18 mm)

    away (18 mm)

    13 mm/s

    0 1 2 3 64 5

    53 mm/s

    0 1 2 3 64 5

    Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend

    LowM

    ediumH

    igh

    Hemmert et al. Gomes et al. Roudaut et al.

  • Parameters of shape change

    1.5x

    3x

    5x

    pi

    -pi/2

    pi/2

    15 mm

    20 mm

    60 mm

    n = 3

    n = 8

    n = 14

    n = 1

    n = 2

    n = 3

    towards (18 mm)

    away (18 mm)

    13 mm/s

    0 1 2 3 64 5

    53 mm/s

    0 1 2 3 64 5

    Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend

    LowM

    ediumH

    igh

    Hemmert et al. Gomes et al. Roudaut et al.

  • Use scenariosNotification Approach

  • Use scenariosNotification Approach

  • 187 participants

    AttrakDiff2 Animacy SAM UC Specific

  • Zero crossing

    Area

    Curvature

    Amplitude

    Tapering

    Corner bend

    High

    Low

    Prag

    mat

    ic Q

    ualit

    y

  • Zero crossing

    Area

    Curvature

    Amplitude

    Tapering

    Corner bend

    High

    Low

    Prag

    mat

    ic Q

    ualit

    y

    Structured

    Simple

    Practical

    Predictable

    PQ

  • Zero crossing

    Area

    Curvature

    Amplitude

    Tapering

    Corner bend

    High

    Low

    Prag

    mat

    ic Q

    ualit

    y

  • Zero crossing

    Tapering

    Area

    Curvature

    Amplitude

    Corner bend

    High

    Low

    Hed

    onic

    Qua

    lity

  • Zero crossing

    Tapering

    Area

    Curvature

    Amplitude

    Corner bend

    High

    Low

    Hed

    onic

    Qua

    lity

    Captivating

    Stylish

    Premium

    Creative

    HQ

  • Corner Bend

    27 %less urgent than the three most urgent shape changes

  • Corner Bend

    27 %less urgent than the three most urgent shape changes

  • Corner Bend

    27 %less urgent than the three most urgent shape changes

    Amplitude Zero crossingArea

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    Area

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    Amplitude

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    amplitude

    Amplitude

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    amplitude

    Corner bend

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    amplitude

    Corner bend

    corner bend

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    amplitude

    corner bend

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    happy

    delighted

    excited

    astonishedaroused

    area

    amplitude

    corner bend

    taperingcurvature

    zero crossing

  • Calm

    Aroused

    PleasentUnp

    leasan

    t

    III

    III IV

    alarmedtense

    angryafraid

    annoyeddistressed

    frustrated

    miserable

    sadgloomy

    depressed

    bored

    droopytired sleepy

    relaxedsatisfied

    at easecontentserene

    gladpleased

    h

Recommended

View more >