1 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile Technologies context and task challenges input technologies challenges in interaction design output technologies 2 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile Theories and Models context and task • Device Support – how HCI research started to consider the kinematic chain challenges – spatial relationship to the device affects interaction performance and perceived comfort input • BiTouch Design Space, extension of Guiard’s theory technologies • Gestural Input challenges in – what we loose when moving from keyboard and mouse and direct interaction touch interaction design – missing standards, how to describe gestures? • gesture documentation output technologies • physical approach to gestures • Hand Occlusion – how a controlled experiment can help you to come up with an approximate model of you hand occlusion – how that inspires design of interaction techniques • Pointing – how to describe the imprecision by extending Fitt‘s law 3 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile Proton++ Gesture context and task • describe a gesture as regular expression over these touch event symbols challenges Device E A 1 : A 2 : A 3 ... where E ∈ {D,M,U}, attribute values A 1 :A 2 :A 3 , A 1 Support T ID corresponds to first attribute etc. is the touch action, Gestural Input input technologies Proton++ expands the ‘ | ’ shorthand into the full challenges in xpression ( D s : N | D s : S )( M s : N | M s : S )*( U s : N | U s : S interaction ). 1 1 1 1 1 1 design allows developers to use the ‘ • ’ character to consider attributes: output hit-target shape, technologies direction Literature: Kin,K. et al. ”Proton++: A Customizable Declarative Multitouch Framework”, UIST 2012 4 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile Proton++ context and task • Allow holding touch – e.g. for calling callback “paste” challenges input technologies s:O M1 s:O * M1 s:N|S M1 s:. ⦁ s:. ⦁ * U1 D1 challenges in interaction s: N | M1 s: S | M1 s: O ) * (M1 design translate() copy() output technologies A1 ∈ {s}, s= star element A2 ∈ {N, S, O}, O = hold touch consider attributes: hit-target shape, direction 5 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile (b) (c) Occlusion (a) context and task challenges Device • problem: system generated messages may be Support positioned under the user’s hand. Gestural • one approach: experimental study using a Input novel combination of video capture, Occlusion augmented reality marker tracking, and image processing techniques to capture occlusion input technologies silhouettes . • result: five parameter geometric model which challenges in interaction matches the silhouette with larger precision design than the simple bounding box approach output • useful for occlusion aware interfaces technologies Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 6 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile Vogel’s Controlled Experiment context and task (b) (a) challenges Device Support Gestural Input • goal: measure size and shape of occluded Occlusion area of a tablet-sized display. input • home target: on the far right side technologies • measurement target: positioned somewhere challenges in interaction on an invisible grid (7 x 11 = 77 different design locations) output technologies � � Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 � 7 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide � � �
Mobile Image Processing context and task (b) (a) challenges Device Support Gestural Input • Frame extraction: video frames taken between Occlusion successful down and up pen event. input – synchronize video and data log similar to a movie clapperboard: technologies blend in a large red square containing a unique number. • Rectification: track fiducial and determine screen challenges in interaction corners design • Isolation: blur filter (noise reduction) + extract blue output color channel + applied threshold to create an inverted technologies � binary image. � Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 � 8 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide � � �
Mobile Image Processing context and task (a) (b) (c) challenges Device Support Gestural Input • Frame extraction: video frames taken between Occlusion successful down and up pen event. input – synchronize video and data log similar to a movie clapperboard: technologies blend in a large red square containing a unique number. • Rectification: track fiducial and determine screen challenges in interaction corners design • Isolation: blur filter (noise reduction) + extract blue output color channel + applied threshold to create an inverted technologies binary image. Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 9 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide �
Mobile Results 38.8% context and task • largest occlusion when tapping the top left corner challenges (occlusion rate: 38.8%) 50 Y (pixels) % % 25 Device • identified 3 grips 0 Support X (pixels) 800, 1280 • large within-subject Gestural Input consistency in occlusion shape. Occlusion • “can we find a simple input geometric model that could technologies describe the general shape challenges in and position of the � interaction � design occlusion silhouettes?” � � � � � � � � output � � technologies � � Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 10 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � Mobile � Scalable Circle and Pivoting Rectangle Model context and task e challenges serve p p p Device q r Support p Gestural elaborate Input w Occlusion (b) input (c) technologies (a) challenges in 12. Three occlusion shape models: ( interaction Bézier spline bounding rectangle design model output technologies Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 11 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
� � � � � � � � � � Mobile � � Scalable Circle and Pivoting Rectangle Model � context and � task • 5 parameters: challenges – q offset from pen position to circle edge Device p � Support � – r radius of the circle � � q r � � � � � � � � Gestural – ɸ rotation angle of circle around p p � � Input – Θ rotation angle of rectangle around the center of the circle Occlusion w – w width of rectangular input representation of forearm. technologies (b) challenges in interaction 12. Three occlusion shape models: ( design output technologies Literature: Vogel, D. et al. (2009). Hand Occlusion with Tablet-sized Direct Pen Input, CHI’09 12 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Mobile Occlusion-aware techniques context and task • occlu challenges Device Support Gestural Input Occlusion input technologies challenges in interaction design output technologies http://www.youtube.com/watch?v=4sOmlhEJ2ac 13 LMU München — Medieninformatik — Andreas Butz — ! Mensch-Maschine-Interaktion II — WS2013/14 Slide
Recommend
More recommend
