Design of Interactive Public Display Installations

Lecture 5 - Design av grafiska gränssnitt - 1ME4032016-11-28

Maximilian MüllerDepartment of Media TechnologyLinnaeus Universitymaximilian.muller@lnu.se

Digital public displays

Advances in display and projection technology and interaction mechanisms make display installations more and more present in urban public life: media facades, museum displays, displays embedded in urban settings (bus stop, shop windows) and community displays.

[Ten Koppel et al., 2012]

[Ackad et al., 2015]

[Wang et al., 2015]

Digital public displays● Digital displays situated in public environments and common areas

● Simple way for spreading digital information in the physical world

● Great potential for generating curiosity leading to people interacting

● Care for social interactions around the display

● Have an impact on the settings they are deployed in

● Non-interactive displays○ Single-content digital signage○ Scheduled multi-content signage (static/dynamic)

● Interactive display installations○ Single-purpose displays (1 application)○ Multi-purpose displays (several applications)

■ Scheduled applications (static/dynamic)■ On-demand and app launcher

Types of public displays

● Non-interactive displays○ Single-content digital signage○ Scheduled multi-content signage (static/dynamic)

● Interactive display installations○ Single-purpose displays (1 application)○ Multi-purpose displays (several applications)

■ Scheduled applications (static/dynamic)■ On-demand and app launcher

Types of public displays

[Michelis, 2009]

Design Elements of Public displays I

[Michelis et al., 2010], [J. Müller et al., 2010]

The Audience FunnelInteractions with public displays do not start and end with the interaction itself.

● Users of desktop/web apps access the apps alone, sitting, and with some time at hand

● Shared and public displays are situated in areas where○ People are on the move and have little time○ People are involved in other activities ( → goals)

Challenges of situation and access

With the exploration of different types of public display installations in a variety of real-world scenarios, research in this area has expanded from addressing just technical concerns to examining topics such as participation and engagement.

● Engaging users to interact and keeping them motivated to do so is still one of the biggest challenges in the design of public display systems.

● Users’ incentives and motivations for interacting with public displays are often far from being understood. Audience has own goals and context.

Research Challenges

● Display Blindness (J. Müller et al., 2009)○ Audience expectations: People learned to actively avoid displays○ Historical development○ Research is still addressing this: form factors, user behaviours, settings

● Honeypot-Effect (Brignull and Rogers, 2003)○ Interacting users attract further users of public systems○ What drives this effect?○ How can it be exploited?

→ Challenge especially in scenarios with mobile interactions

Known Research Findings

Macro level

→ How to design systems so users know how/why to interact

Micro level

→ How to design specific UI elements

Design on 2 levels

[Kara Pernice, 2015]

● Users● Social Constellations● Settings● Environment

Design Elements of Public displays II

[Michelis, 2009]

● General UI patterns/guidelines (as for desktop/mobile) do not really exist and are hard to formulate○ Young field○ UI depends on application○ Applications are often “unconventional”○ Situations are crucial

● Research often focuses on:○ Getting attention○ Communicating interactivity○ Role of the display for the spot it is situated in

UI Patterns and Design Guidelines!?

● Non-distracting display of information (ambient display)○ Fit into surroundings

● Subtle notifications● Short-duration fluid interaction● Immediate usability (easy to use)

Important design aspects I

[Vogel et al., 2004]

[Ackad et al., 2015]

● Shared use○ Essential for positive experience

● Combining public and private information○ Delicate topic, user decides what is harmless

● Privacy● Placement defines experience (position and location)● Communal and shared info should be preferred

Important design aspects II

[Vogel et al., 2004]

[Ten Koppel et al., 2012]

● Standalone displays○ Mouse/trackball and keyboard (e.g. kiosks)○ Touchscreens (multi-touch)○ Air gestures○ Others: gaze, speech, facial expression, body position○ Implicit: presence scanned by sensors affects display

● Display + X: Interactions mediated by○ Personal devices (mobile phones, tablets etc.)○ Other provided endpoints

Interaction techniques for public displays

● Multi-purpose public displays in Oulu

Touchscreen public displays

[Ojala et al., 2012]

Air gesture interaction (e.g. Kinect)

[J. Müller et al., 2012]

● Extended input/retrieval device: mobile device acts as a simple upload client and receiver of copied content

● Mirrored content

Types of display + X interactions

[Alt et al., 2013]

● Direct control and pointing device (remote control)

Types of display + X interactions

[Veps et al., 2016]

● Integral part of the interaction● DUI with dedicated role

Types of display + X interactions

[M. Müller et al., 2015]

Design recommendations for both small and very large touchscreens

Many guidelines hold true - whether designing for 7- or 70-inch touchscreens:

1. Allow natural gestures.

2. Minimize the interaction cost of tapping, typing, etc.

3. Offer user feedback via simple animations.

4. Make it easy-to-decipher which elements are tappable.

5. Make targets easy to tap.

6. Offer legible text and graphics.

Design recommendations for both small and very large touchscreens

[Kara Pernice, 2015]

● If the display is affixed to a wall, angle the screen 45 degrees

● Prompt to touch with words on/around the screen and other

touchable-looking items on the screen.

Recommended signifiers to indicating that a large screen is a touchscreen I

[Kara Pernice, 2015]

Audio cues and text messages [Kukka et al., 2016]

● After a particular amount of idle time, start an “attract mode”

that encourages people to try the device.

● Make the UI engaging so there are often other people using it

- people learn how to use it by seeing others using the

touchscreen → The honey-pot effect

Recommended signifiers to indicating that a large screen is a touchscreen II

[Kara Pernice, 2015]

Further research: Attention and Interactivity

[J. Müller et al., 2012] [K. Grace et al., 2013]

Audio cues and text messages [Kukka et al., 2016]

● Arm reach

● Arm motion

● Hand touch with palm or multiple fingertips (unintended)

● Height of the person

Consider Human Physical Traits

[Kara Pernice, 2015]

[M. Müller et al., 2015]

Further research: Attention and Interactivity

Features conveying peer interactionsDynamic feedback to user interactions in form of pop-up notifications

[M. Müller et al., 2015]

This regards touchscreens as well as air gesture interaction

● Large screens engage the whole body○ Arm, head, and full-body movement

● Interactions become noticeably tiring when tasks go

beyond casual browsing

● Taps are not the issue usually○ But apps get more sophisticated (people demand) also applying

swipe, flick, drag, pinch etc...

Fatigue - Gorilla Arms

[Kara Pernice, 2015]

● Make large (enough) interface elements○ Adapt size and position based on frequency of use

● Add animations and movements to elements of interest○ These get attention and guide interacting users

● Make text, images and buttons legible and decipherable

● Make on-screen keyboards moveable○ Users may move it to their own comfort, e.g. height

● If items are draggable etc, adjust their acceleration to ease

the interaction

Recommendations for gestures and text input and for signifiers indicating UI controls:

[Kara Pernice, 2015]

The issue of privacy on large public displays

● Easy sharing of content on large screens for groups

comes with the downside of little to no privacy for users

● Recommendations:○ Consider what type of info you show and ask from users

○ If users need to enter info, keep text small as possible, so it’s only

legible for the active user

[Kara Pernice, 2015]

Timer animations

Timer animations to communicate schedule and application information on multi-purpose public displays

● made people curious/interested about the display content● made them aware that something else will happen● allowed them to plan their consumption of content● made them pay attention [M. Müller et al., 2016]

“A large touchscreen can look beautiful and is enjoyable to interact with! At the same time, a large display

will magnify a poor user experience.”

[Kara Pernice, 2015]

References I

● Müller, M., Otero, N., Alissandrakis, A. and Milrad, M. 2014. Evaluating usage patterns and adoption of an interactive video installation on public displays in school contexts. Proceedings of the 13th International Conference on Mobile and Ubiquitous Multimedia - MUM ’14 (New York, NY, USA, 2014), 160–169.

● Müller, M., Otero, N., Alissandrakis, A. and Milrad, M. 2015. Increasing user engagement with distributed public displays through the awareness of peer interactions. Proceedings of the 4th ACM International Symposium on Pervasive Displays - PerDis 2015 (2015), 23–29.

● Müller, M., Otero, N., Alissandrakis, A. and Milrad, M. 2015. Application features to convey peers’ interactions to engage users in a display network. Proceedings of the 4th ACM International Symposium on Pervasive Displays - PerDis 2015 (2015), 267–268.

● Otero, N., Alissandrakis, A., Müller, M., Milrad, M., Lencastre, J.A., Casal, J. and José, R. 2013. Promoting secondary school learners’ curiosity towards science through digital public displays. AcademicMindTrek ’13 Proceedings of the International Conference on Making Sense of Converging Media (2013), 204–210.

● Müller, M., Alissandrakis, A., Otero, N. 2016. There is more to come: anticipating content on interactive public displays through timer animations. Proceedings of the 5th ACM International Symposium on Pervasive Displays - PerDis 2016.

● Müller, M., Otero, N., and Milrad, M. 2016. Shared interactive music experiences in public spaces: user engagement and motivations. Proceedings of the ACM International Conference on Interactive Surfaces and Spaces - ISS 2016.

References II

● Online resource: Very Large Touchscreens: UX Design Differs From Mobile Screens, Kara Pernice● Jörg Müller, Robert Walter, Gilles Bailly, Michael Nischt, and Florian Alt. 2012. Looking Glass: A

Field Study on Noticing Interactivity of a Shop Window. CHI ’12 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, ACM, 297–306.

● Kazjon Grace, Rainer Wasinger, Christopher Ackad, et al. 2013. Conveying Interactivity at an Interactive Public Information Display Categories and Subject Descriptors. Proceedings of the 2nd ACM International Symposium on Pervasive Displays, ACM, 19–24.

● Hannu Kukka, Jorge Goncalves, Kai Wang, et al. 2016. Utilizing Audio Cues to Raise Awareness and Entice Interaction on Public Displays. DIS ’16 Proceedings of the 2016 Conference on Designing Interactive Systems, ACM Press.

● Jouni Veps, Petri Savolainen, Jouni Ojala, et al. 2016. Web-Based Public Screen Gaming: Insights from Deployments. IEEE Pervasive Computing.

● Florian Alt, Alireza Sahami Shirazi, Thomas Kubitza, and Albrecht Schmidt. 2013. Interaction techniques for creating and exchanging content with public displays. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems - CHI ’13, ACM, 1709.

● Timo Ojala, Vassilis Kostakos, Hannu Kukka, et al. 2012. Multipurpose interactive public displays in the wild: Three years later. Computer 45, 5: 42–49.

● Maurice Ten Koppel, Gilles Bailly, Jörg Müller, and Robert Walter. 2012. Chained Displays: Configurations of Public Displays Can Be Used to Influence Actor-, Audience-, and Passer-by Behavior. Proc. of CHI ’12, ACM Press, 317–326.

● Christopher Ackad, Rainer Wasinger, Richard Gluga, Judy Kay, and Martin Tomitsch. 2013. Measuring Interactivity at an Interactive Public Information Display. Proc. of OzCHI ’13, ACM, 329–332.

References III

● Daniel Michelis and Jörg Müller. 2011. The Audience Funnel: Observations of Gesture Based Interaction With Multiple Large Displays in a City Center. International Journal of Human-Computer Interaction 27, 6: 562–579.

● Harry Brignull and Yvonne Rogers. 2003. Enticing people to interact with large public displays in public spaces. Proceedings of INTERACT 3: 17–24.

● Jörg Müller, Dennis Wilmsmann, Juliane Exeler, Markus Buzeck, Albrecht Schmidt, and Antonio Krüger. 2009. Display blindness: The effect of expectations on attention towards digital signage. Pervasive Computing: 1–8.

● Daniel Michelis and Jörg Müller. 2011. The Audience Funnel: Observations of Gesture Based Interaction With Multiple Large Displays in a City Center. International Journal of Human-Computer Interaction 27, 6: 562–579.

● Jörg Müller, Florian Alt, Daniel Michelis, and Albrecht Schmidt. 2010. Requirements and design space for interactive public displays. Proceedings of the international conference on Multimedia, ACM, 1285–1294.

● Alf Inge Wang, Mari Hansen Asplem, Mia Aasbakken, and Letizia Jaccheri. 2015. Game-based Interactive Campaign using Motion-Sensing Technology. Entertainment Computing - ICEC 2015, Springer International Publishing, 195–208.