User-centred Design Guideline for

Complex Visual Content:

A Case Study of an Innovative Digital Shadow Theater in Taiwan

Tin-Kai Chen

CREATE 201030th June to 2nd July 2010, Edinburgh Napier University, UK

2

About myself

Tin-Kai Chen M.Sc M.Phil Ph.D

Assistant Professor/Head of Human-Computer Interaction Lab

Department of Digital Technology & Game Design

Faculty of Art and Design

SHU-TE University, Taiwan.

Research Areas：

• Human-Computer Interaction (HCI)

• Design Research

• Digital Game Design

• Ergonomics

3

Human-Computer Interaction Lab

3D presentation3D presentation3D presentation3D presentation

AR (Augmented Reality)AR (Augmented Reality)AR (Augmented Reality)AR (Augmented Reality)

About

Tangible Interaction TableTangible Interaction TableTangible Interaction TableTangible Interaction Table

ProjectorProjectorProjectorProjector----based interactionbased interactionbased interactionbased interaction

Digital Shadow PlayDigital Shadow PlayDigital Shadow PlayDigital Shadow Play

HCIHCIHCIHCI

4

Definition of Shadow Play

• "Shadow Play" is a set of comprehensive art involving

literature, music, painting, crafts and Chinese drama.

5

Definition of Shadow Play

• In the shadow play, the shadow of fur made characters with delicate carving and brilliant colours shadows. These shadow characters, which are projected by the man-made lights behind the curtain, could be seen by the audience in front of the curtain.

• The Piying artists behind the curtain control the actions of the characters using sticks fastened to the shadow characters.

Figure : Horng Shinq Ger shadow show in Taiwan

6

Motivation

• Owing to the impact of the modern media, the

shadow theaters have been disappearing in

contemporary society.

• Nowadays, there are only five shadow show

troupes in Taiwan and these are considered to

be a priceless cultural asset.

7

Background

Figure: Han’s multi-touch screen (Source: Han, 2005)

�Han, J. Y. (2005), Low-Cost Multi-Touch Sensing through Frustrated Total Internal Reflection.

In Proceedings of the 18th Annual ACM Symposium on User Interface Software and

Technology, pp. 115-118.

8

Aim

• This paper examines emerging interface paradigms, to a certain extent exemplified by the Digital Shadow Theater

interface, for interacting with complex visual content.

• Two case studies will be conducted to provide an

overview of recent research devoted to the creation of intuitive, user-friendly interfaces and the conceptual

analysis of design principles.

9

Digitalization Process

Photographic Highlighting Removing the background

Producing the components

Programming & Testing

10

Design Case Study

Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 1)(Version 1)(Version 1)(Version 1)

• The first design case study was developed and exhibited at the Kaohsiung Puppet Festival, from 14 to 22-Feb, 2010. In Taiwan, Kaohsiung County is known as the homeland of puppet arts.

• The first version of the digital shadow play “Wu-Song and Tiger”. It is developed based on the 80" infrared-based multi-touch display.

CASE 1

11

Design Case Study

Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 1)(Version 1)(Version 1)(Version 1)

Figures: The first version of the digital shadow show “Wu-Song and Tiger”, as demonstrated at the Kaohsiung Puppet Festival 2010 (Chen and Chen, 2010)

CASE 1

12

• The first design case uncovered issues that had mainly to do with the cognition of the visual feedback with a

large-scale display.

• One problem detected was that if the user hit the characters that were not fully controlled by the touch

event, then s/he had to stop playing in order to readjust the components. Indeed it de-motivated the users to

interact with the interface. A similar problem was also found with the second design case.

Design Case Study

Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 1)(Version 1)(Version 1)(Version 1)

CASE 1

13

Design Case Study

• The second design case study was exhibited at the Exhibition of Shadow Art and Culture at the National Museum of History in Taiwan, from 23-April to 17-Oct, 2010.

• Based on the problems identified by the first case study, this prototype is developed based on the 23” infrared-based multi-touch display.

Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 2)

CASE 2

14

Projector

Multitouch screen

Design Case StudyDigital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 2)

CASE 2

15Figure: The second version of the digital shadow show “Wu-Song and Tiger”, as demonstrated at the Exhibition of Shadow Art and Culture 2010.

Design Case StudyDigital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 2)

CASE 2

16

• In the second case study, all touch events are captured

by the two-point infrared-based desktop display.

• It is cost-effective.

• However, the following failures were found, including

– inaccuracy,

– inability to use multiple fingers to control the characters naturally,

– the touch event size is too small to use the fingertip to operate,

– etc.

CASE 2Design Case StudyDigital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 2)

17

Discussion

• The design is, at this point of time, simple and has been shown to be versatile and feasible for digital shadow

theater.

18

Recommendation

• Based on the case study, the following design factors are recommended for

design innovation to create a digital shadow play.

• Screen size: It is found that users preferred the large screen interaction

because they had more freedom during interaction and could solve the

presented task significantly faster.

• Touch size: It can be said that the larger the size to trigger a touch, the

higher the accuracy of the interaction. However, touch is a very intuitive

modality for interacting with objects displayed on surfaces.

• User-friendly: It is highly risky for an audience, in particular of children, to

damage the stage and themselves. For instance, the physics engine is

integrated for both design cases, which allows the creation to “jump”, “hit”

and “fall”. However, the introduction of this new element highlighted some

problems with the interpretation of the shadow characters’ movements

which could not easily be understood by children. Thus, when the shadow

characters sometimes cause a temporary disappearance, users might

damage the stage due to their over-vigorous activities.

19

Future Study

• As for the research methodology for the evaluation of the multi-touch interaction, there is an insufficient, objective,

evaluation metric, which needs to be further studied.

• The next steps are to develop a digital shadow play to

allow Piying artists to control the actions of characters based on his/her experience, which is similar to using

sticks fastened to the characters.

20人本設計就是要了解使用者

User-centred design approach is about understanding your users.

Thank you for listening.

Tin-Kai Chen MSc MPhil PhD

tkchen@acm.org

21

Latest VersionDigital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater Digital Shadow Play Theater (Version 3)

CASE 3

22

Recent Projects

3D presentation on a large screen3D presentation on a large screen3D presentation on a large screen3D presentation on a large screen

AR Moo Card 1AR Moo Card 1AR Moo Card 1AR Moo Card 1

About

3D presentation on a container3D presentation on a container3D presentation on a container3D presentation on a container

AR Moo Card 2AR Moo Card 2AR Moo Card 2AR Moo Card 2

23

Background

圖、土耳其傳統皮影戲『卡拉戈茲』(Karagöz)故事中的數位戲偶 (Ugur and Tolga, 2002)

•Ugur Güdükbay, Fatih Erol and Nezih Erdogan. (2000), Beyond Tradition and Modernity: Digital Shadow Theater, Leonardo, 33(4), pp. 264-265.

•Ugur Gudukbay and Tolga Abaci. (2002), Karagoz: A Hierarchical Modeling and Animation System for Turkish Shadow Theater, Fine Art Forum, 61(1), [Electronic Journal: Available at http://www.fineartforum.org/Backissues/Vol_16/faf_v16_n01/ text/karagoz.html] (accessed March. 6, 2010).

24

25

26