THÈSE. En vue de l'obtention du DOCTORAT DE L UNIVERSITÉ DE TOULOUSE

Transcription

1 THÈSE En vue de l'btentin du DOCTORAT DE L UNIVERSITÉ DE TOULOUSE Délivré par l Université Tuluse 3 Paul Sabatier Discipline u spécialité : Infrmatique Présentée et sutenue par Thmas Mirlacher Le 19 Décembre 2012 Titre : Mdel-based Engineering f Animated Interactive Systems fr the Interactive Televisin envirnment JURY Jean Vanderdnkt Jean-Daniel Fekete Ferdinand Maier Philippe Palanque Regina Bernhaupt Ecle dctrale : Mathématiques Infrmatique et Télécmmunicatins de Tuluse (MITT) Unité de recherche : IRIT UMR 5505 Directeur(s) de Thèse : Philippe Palanque, Regina Bernhaupt Rapprteurs : Jean Vanderdnkt, Jean-Daniel Fekete

2

3 Abstract Graphical User Interfaces used t be mstly static, representing ne sftware state after the ther. Hwever, animated transitins between these static states are an integral part in mdern user interfaces and prcesses fr bth their design and implementatin remain a challenge fr designers and develpers. This thesis prpses a prcess fr designing interactive systems fcusing n animatins, alng with an architecture fr the definitin and implementatin f animatin in user interfaces. The architecture prpses a tw levels apprach fr defining a high-level view f an animatin (fcusing n animated bjects, their prperties t be animated and n the cmpsitin f animatins) and a lw-level ne dealing with detailed aspects f animatins such as timing and ptimizatin. Fr the frmal specificatin f these tw levels, we are using an apprach facilitating bject-riented Petri nets t supprt the design, implementatin and validatin f animated user interfaces by prviding a cmplete and unambiguus descriptin f the entire user interface including animatins. Finally, we describe the applicatin f the presented prcess exemplified by a case study fr a high-fidelity prttype f a user interface fr the interactive Televisin dmain. This prcess will lead t a detailed frmal specificatin f the interactive system, including animatins using bject-riented Petri nets (designed with the PetShp CASE tl).

4

5 Acknwledgements Lking back t the beginning f my dctral thesis, there are many peple wh prvided their share t make this pssible. Of curse there were my supervisrs, and clleagues, wh prvided insights and fd fr thught all alng the way. But there were many thers - family, relatives and friends wh have been equally imprtant. First f all I wuld like t thank my supervisr Philippe Palanque wh is an exceptinal persn bth prfessinally as well as persnally. He guided me thrugh this rller caster with inspiratin and insight, especially his real-life explanatins made cmplex cnnectins tangible. Thrugh him I see the german language in a different light, learning every day a new phrase I never thugh abut befre. Regina Bernhaupt, my c-supervisr wh shared a lng prtin f my jurney. She is als the ne wh shuld be held respnsible fr getting me int this. Nt nly did she spend cuntless hurs f making sure my writing was at least half-way sane, she is a well f knwledge and there is always a lt t learn frm her. Ferdinand Maier, my bss at ruwid is a remarkable persn wh I really we my deep gratitude fr supprting me wherever he can. His dedicatin t his wrk was and is an inspiratin every day. I wuld als like t thank als the team in Tuluse, wh prvided priceless help and supprt. Eric Barbni, ne f the resident geniuses, fr prving me a lift in his car and exampling PetShp - withut him understanding and grasping PetShp wuld have never been pssible. Marc Winkler wh was acting as a tur guide in whatever city we were, and fr finding me a rf ver my head whenever I was in Tuluse. If I ever find an Schwarzwälderkirschtrtenschlüsselanhänger, I will make sure I ll send it t yu. Thanks are als ging t my ther clleagues in Tuluse fr discussins and helping with cping with the immense paperwrk which needed t be prduced every year fr satisfying the french administratin. I am grateful and thank my reviewers, Jean Vanderdnkt and Jean-Daniel Fekete fr taking the time t review my thesis, and being n my cmmittee. I wuld like t thank my parents Ernst and Karline Mirlacher, fr their never-ending supprt thrughut the whle endeavr. Rmana Wieder, my significant ther deserves a special mentin amngst all the peple wh supprted me in my thesis. Especially during demanding times, when the nights were lng, she was there caring and understanding, and helping me t carry the weight f writing.

6

7 Table f Cntents PART 1 INTRODUCTION 2 PART 2 STATE OF THE ART 8 CHAPTER 1 ANIMATION Animatin Design Animatin Implementatin Summary 16 CHAPTER 2 CONCEPTS Classificatin f animatins Classificatin by Descriptin Classificatin by Animatin Technique Classificatin by Interactivity Applicatin Dmains Animated Mvies and Special Effects Character Animatin and Avatars Vide Games Particle Animatin Simulatin Data Visualizatin Sftware Visualizatin and Algrithm Animatin Presentatins Help Systems User Interfaces Summary The Need fr Animatins in User Interfaces Attracting and Directing Attentin Tracking Objects and Understanding Changes Enhancing the Understanding f the Virtual Place f an Object Inducing Prperties f an Object Summary 34 CHAPTER 3 ENGINEERING Develpment Prcesses fr Interactive Systems Waterfall Develpment Prcess The V Develpment Prcess The Star Develpment Prcess The Spiral Develpment Prcess The Ratinal Unified Develpment Prcess The Usability Design Prcess Summary Framewrks fr animatins SMIL Silverlight Flex QML Summary Mdel based engineering Summary 49 VI

8 PART 3 ENGINEERING ANIMATIONS 50 CHAPTER 1 DEVELOPMENT PROCESS DEALING EXPLICITLY WITH ANIMATIONS Needs and Requirements Analysis Task Analysis and Task Mdeling Cncept Design Lw Fidelity Prttyping High Fidelity Prttyping Cmplete Animated UI Mdel Cnversin and Implementatin 53 CHAPTER 2 SPECIFYING ANIMATIONS Specifying High-level Aspects f Animatins Specifying Lw-level Aspects f Animatins Architecture fr Animatins 59 CHAPTER 3 FORMAL MODELS FOR DEFINING ANIMATIONS Infrmal Presentatin f the ICO Frmal Descriptin Technique PetShp Brief verview f Petri nets Mdeling Animatins Mdel fr Setup A Mdel fr the Canvas A Mdel fr Timer A Mdel fr Defining Animatins A Mdel fr calculating the Behavir f prperties Cmbining the mdels in an architecture Summary 92 CHAPTER 4 CROSSCUTTING CONCERNS FOR ANIMATIONS Easing Functins Handling Interruptins f animatins Changing the state f animatins Updating animatins Graceful Degradatin Cnstraint Animatin 97 PART 4 CASE STUDY 101 CHAPTER 1 ANIMATIONS IN THE UI: VOCOMEDIA Vcmedia Develpment Needs and requirements analysis Task Analysis Cncept design Lw fidelity Prttyping High fidelity prttyping and frmal mdeling Cmplete Animated UI Mdel Cnversin and Implementatin Summary 124 PART 5 CONCLUSION AND OUTLOOK 126 VII

9 List f Figures Figure 1: Squash and Stretch defines vlume, weight and material f an bject. 9 Figure 2: The duratin f an animatin defines weight and size f an bject. 10 Figure 3: Anticipatin: Frm the Preparatin t the Terminatin. 10 Figure 4: Slw-in and slw-ut fr accelerating and decelerating bjects. 12 Figure 5: Linear Sequence f Images frming an animatin. 13 Figure 6: Interplated sequence f images, where start and endpint are defined, whereas intermediate frames are interplated by a cmputer. 14 Figure 7: Animatin f multiple bjects at the same time. 15 Figure 8: Dependency f the animatin f multiple bjects. 15 Figure 9: Animatin classified by file frmats. 17 Figure 10: Overview f classificatin f animatins by animatin technique. 18 Figure 11: Animatins classified by interactivity. 21 Figure 12: Overview ver animatin dmains. 22 Figure 13: The Interactive Mannequin, an avatar in the shpping cntext. 23 Figure 14: GapMinder is a tl that allws the representatin f animated charts. 25 Figure 15: Data Visualizatin by animating frm stacked bars t gruped bars. 25 Figure 16: Prezi is a presentatin editr fcusing n zming presentatins. 27 Figure 17: Bump Tp is a virtual desktp envirnment facilitating physics simulatin. 28 Figure 18: Mac OSX animating the minimizatin f a windw, using the "genie" effect. 29 Figure 19: The pure Waterfall develpment prcess. 35 Figure 20: The V develpment prcess. 36 Figure 21: The star develpment prcess. 37 Figure 22: The spiral develpment prcess. 38 Figure 23: Ratinal Unified develpment Prcess. 39 Figure 24: User-Centered System Design Prcess. 40 Figure 25: Animating multiple bjects and multiple prperties in parallel. 42 Figure 26: Develpment Prcess fr develping interactive systems with animatins. 51 Figure 27: Develpment Prcess fr develping interactive systems with animatins: High fidelity prttyping and frmal mdeling. 54 Figure 28: Five steps fr defining an animatin invlving ne bject and prperties f the bject. 55 Figure 29: Animating a single bject by changing its psitin ver time. 55 Figure 30: Animating multiple bjects and multiple prperties in parallel. 56 Figure 31: Cmbinatin f steps fr defining animatins invlving multiple prperties and multiple bjects. 56 Figure 32: Generalizatin f Cmbinatin f steps fr defining animatins invlving several prperties and several bjects. 57 Figure 33: Principle functins f a lw-level prperty update blck. 58 Figure 34: Generalizatin f the principle functins f a lw-level prperty update blck. 58 Figure 35: Overview f the principal cmpnents used fr implementing animatins. 59 Figure 36: PetShp a tl fr design, specificatin, prttyping and validatin f ICO mdels. 62 Figure 37: Example f a basic Petri net mdel with an initial marking (ne tken in place1). 62 VIII

10 Figure 38: Example f a basic Petri net after firing f transitin t1 frm the initial state presented in Figure Figure 39: Example f a basic Petri net with (Standard) Arcs. 64 Figure 40: Example f a basic Petri net with Test Arcs. 65 Figure 41: Example f a basic Petri net with Inhibitr Arcs: initial marking with a tken in place place1. 65 Figure 42: Example f a basic Petri net with Inhibitr Arcs: initial marking withut a tken at place1. 66 Figure 43: Example f a CO high-level Petri net with substitutins. 67 Figure 44: Example f a CO Petri net shwing transitin with a nn-matching precnditin. 68 Figure 45: Example f a CO Petri net shwing transitins with precnditins. 68 Figure 46: Example f a CO Petri net shwing the cncept f unificatin. 69 Figure 47: Example f a CO Petri net with timed transitins. 70 Figure 48. Example f a CO Petri net with invcatin transitin. 71 Figure 49. Semantics f invcatin transitins in terms f high-level Petri nets. 72 Figure 50: Overview f the Architecture f mdels used t describe an animatin. 73 Figure 51: Interface fr the Setup cmpnent. 74 Figure 52: Mdel fr setting up the envirnment fr the animatin: Timer and Canvas. 75 Figure 53: Interface fr the Canvas cmpnent. 76 Figure 54: Mdel fr prviding basic canvas functinalities. 76 Figure 55: Interface fr the Timer cmpnent. 77 Figure 56: Mdel fr describing the Timer cmpnent. 77 Figure 57: States used fr managing the Timer mdel. 78 Figure 58: Stpped, Paused and Running State implemented in the Timer mdel. 79 Figure 59: Diagram shwing the slipping f time when using timed transitins. 79 Figure 60: Event prducing Timing element using a cnstant delay between timer events. 80 Figure 61: Event prducing Timing element, which dynamically adjusts delay between timer events. 80 Figure 62: Five steps fr defining an animatin invlving ne bject and prperties f the bject. 81 Figure 63: Interface fr defining Animatins cmpnent. 82 Figure 64: ICO mdel f the generic high-level animatin behavir. 82 Figure 65: Event based waiting - Executing an animatin and waiting fr an eventdne event. 83 Figure 66: Event based waiting - Detailed executin f an animatin and waiting fr an eventdne event. 84 Figure 67: Blcking waiting - Executing an animatin and blcking until the animatin is finished. 85 Figure 68: Detailed executin f an animatin and blcking until the animatin is finished. 85 Figure 69: Animating tw bjects and their prperties in parallel. 86 Figure 70: Mdel fr animating tw bjects and their prperties in parallel. 87 Figure 71: Animating tw bjects and their prperties in sequence. 87 Figure 72: Mdel fr animating tw bjects and their prperties in sequence. 88 Figure 73: Interface fr lw-level behavir cmpnent. 89 Figure 74: Mdel f the generic lw-level animatin behavir fr the Opacity prperty. 89 Figure 75: Interface fr cmbining all mdels. 90 Figure 76: Example with a tw mving bjects implemented in PetShp. 91 IX

11 Figure 77: Overview f the mst cmmnly used Easing functins. 93 Figure 78: Mdel f the generic lw-level animatin behavir fr the Opacity prperty. 94 Figure 79: Changing the state f an animatin. 95 Figure 80: Transitin fr changing the state f an animatin during an active animatin. 95 Figure 81: Immediate updating the values f an animatin. 96 Figure 82: Interplated updating the values f an animatin. 96 Figure 83: A screensht f a cnstraint animatin, animating an bject accrding t external frces and inter-bject frces. 97 Figure 84: Setup f a cnstraint animatin by creating a canvas fr a physics engine. 98 Figure 85: A canvas fr handling cnstraint animatins, using a physics engine. 99 Figure 86: Defining the bjects and behavir f a cnstraint animatin. 99 Figure 87: Schematic view f the cntext f an interactive TV setup. 101 Figure 88: itv user interface depicting the main menu. 103 Figure 89: Develpment Prcess fr develping interactive systems with animatins. 104 Figure 90: Develpment prcess: Needs and requirements analysis. 105 Figure 91: Develpment prcess: Task analysis & Task mdeling. 106 Figure 92: Develpment prcess: Cncept design. 108 Figure 93: Cnceptual design f the main menu f an graphical itv user interface. 108 Figure 94: Develpment prcess: Lw fidelity prttyping. 109 Figure 95: 1 st Level Navigatin Page f the graphical user interface. 110 Figure 96: 2 nd Level Navigatin Page f the graphical user interface. 111 Figure 97: 3 rd Level Navigatin Page f the graphical user interface. 111 Figure 98: Develpment prcess: High fidelity prttyping and frmal mdeling. 112 Figure 99: Overview f the Architecture f mdels used t describe an animatin. 112 Figure 100: Mdel fr Defining Animatin: initializatin, interactin, dynamic behavir and animatin fr vcmedia with animated mvement f the menu. 114 Figure 101: Initializing the mdel and generating initial graphical bjects. 115 Figure 102: Defining the interactin f vcmedia. 116 Figure 103: Defining the dynamic behavir f vcmedia. 117 Figure 104: Mdel fr Defining Animatin: Defining initializatin, interactin, dynamic behavir fr vcmedia with stepwise mvement f the menu. 119 Figure 105: Example fr defining an animatin in vcmedia (vertical mvement f the vertical bar). 120 Figure 106: Optimized timer mdel including register and unregister calls. 121 Figure 107: Develpment prcess: Cmplete Animated UI. 122 Figure 108: PetShp CASE tl and a running itv graphical user interface. 122 Figure 109: Develpment prcess: Mdel Cnversin and Implementatin. 123 Figure 110: itv user interface depicting the channel change menu. 124 X

12 List f Tables Table 1: Subjective cmparisn f Animatin File Frmats. 18 Table 2: Classificatin f Applicatin Dmains accrding t the animatin technique. 30 Table 3: Classificatin f Applicatin Dmains accrding t the degree f interactivity. 31 XI

13 List f Listings Listing 1: SMIL animatin f multiple bjects. 42 Listing 2: silverlight/xaml animatin f multiple bjects. 43 Listing 3: FLEX animatin f multiple bjects. 44 Listing 4: FLEX animatin f multiple bjects using transitins. 45 Listing 5: QML animatin f multiple bjects. 46 Listing 6: QML animatin f multiple bjects using transitins. 47 XII

14

15 List f Abbreviatins API CASE CO CORBA CTT ICO IP IPTV itv ObCS OTT PIN PVR SIP SOP SMIL SVG UCSD VD XML Applicatin Prgramming Interface Cmputer Aided Sftware Engineering Cperative Objects Cmmn Object Request Brker Architecture Cncur Task Trees Interactive Cperative Objects Internet Prtcl Internet Prtcl TeleVisin interactive TeleVisin Object Cntrl Structure Over-the-tp Persnal Identificatin Number Persnal Vide Recrder Service Input Prt Service Output Prt Synchrnized Multimedia Integratin Language Scalable Vectr Graphics User-Centered System Design Vide n Demand extensible Markup Language

16

17 PART 1 Intrductin Animatin can be a very effective mechanism t cnvey infrmatin in visualizatin and user interface settings. Hwever, integrating animated presentatins int user interfaces has typically been a difficult task since, t date, there has been little r n explicit supprt fr animatin in windw systems r user interface tlkits. Sctt E. Hudsn Jhn T. Stask 1 In the wrld we are living in, we see things changing smthly every day. We see peple mving arund, and plants grwing. We are surrunded by animatins, by bjects that are changing clr and psitin while transitining frm ne state t the next. Mst bjects we cme in cntact with and are experiencing d nt jump frm ne state t the next, but they perfrm a smth transitin. User interfaces shuld d the same, they shuld prvide a smth way t transitin frm ne state t the next, direct and aid the user t understand the changes which are happening in a way the user is used t. Cartns and mvies are examples fr animatins, where the viewers attentin is guided, and where multiple principles are used t aid the user in understanding and experiencing an actin thrugh the supprt f animatins. Graphical User Interfaces used t be mstly static, representing ne sftware state after the ther. In mdern user interfaces hwever, animatins are gaining a mre prminent and imprtant rle, t aid and guide the user as well as t make changes between state transitins mre visible. One f the prblems when develping interactive systems with user interfaces that include animatins is that there are n specific design and develpment prcesses available that explicitly fcus n hw t deal with animatins. Other prblems arise frm the usage f animatins in user interfaces running n systems with lw(er) prcessing pwer and capabilities. In such cases it is unclear hw an animatin wuld be executed given that the system is slwer than expected, and the animatin can nt be shwn as intended. T understand the prblem area f animatins in user interfaces and hw t deal with them using a frmal apprach, it is imprtant t investigate animatins in user interfaces and then t describe the research prblem addressed in this thesis. 1 Qute frm [Hudsn & Stask 1993]

18 Perceptin f Animatin Every animatin is targeted t a user and since mtin (translatin) is ne f the basic ingredients f an animatin, we are ging t review the imprtance f mtin fr the human bserver. Seen frm an evlutinary perspective, being able t perceive mvement was crucial fr survival. The cnsequences f failing t perceive the mvement f a falling tree r any ther threat, and being able t act accrdingly, might be fatal [Palmer 1999]. Indeed, if we perceive mvement in ur peripheral visin we immediately turn ur attentin t it. Fr being able t benefit frm this fact, we need t explre mre hw we perceive mtin, and what are the bundaries f the human perceptin f a mving bject. Accrding t Read et al. [Read et al. 2000], the human eye, its receptin and transmissin system can transmit images per secnd. Each f these images will be retained fr 1/15 th f a secnd, and if a new image will be displayed within this time, the mtin f an bject will be cnsidered as fluid. Illusin f Animatin The act f animating is t give life t lifeless bjects, by creating the illusin f mvement by displaying a series f changing pictures in rapid sequence [Thmas & Calder 2001]. Each depicted frame cntains nly a small change, and if the frames are reprduced in a high enugh frequency, the human visual system fills in the details and the illusin f a smth and cntinuus mvement is cmplete, rather than a transitin between distinguished states. Accrding t the abve infrmatin f the perceptin f mvement, a frame rate higher than 20 frames per secnd shuld lead t the perceptin f a smth mvement. Animatin in the User Interface Tday, graphical user interfaces see an increasing use f animatins. This increase f use, especially fr areas away frm desktp applicatins, can be attributed t the fact that resurces remain available after the system s main functins are executed. Areas where animatins can be fund include dmains such as educatin [Byrne 1999; Wang 2010], representatin f life-like behavir n simulated bjects [Chang & Ungar 1995; Thmas & Calder 2001] r supprt understanding f dynamic systems (e.g. algrithms) [Karavirta et al. 2010; Urquiza-Fuentes et al. 2009] and fr graphical user interfaces [Baecker et al. 1991; Hudsn & Stask 1993]. Using animatins in these applicatin dmains can decrease cgnitive lad [Esteban et al. 1995] and increase usability, as they visually supprt the user in understanding the system s behavir and evlutin frm ne state t the next. With animatins, user interface interactin can be represented in a natural way (similar t state changes perceived as smth transitins in ur daily life), pssibly cnveying additinal infrmatin pertinent fr the users tasks. Animatin Develpment While animatins might increase usability, they als increase the cmplexity fr bth the specificatin as well as the implementatin f the sftware part f interactive systems, and therefre the prbability f ccurrence f faulty r undesired behavir. Fr instance, the timebased nature f animatins makes them hard t specify, hard t define and hard t assess the detailed tempral behavir befre implementatin. 3

19 INTRODUCTION The prcess fr the design and implementatin f applicatins including animatins remains a challenge fr all stakehlders (especially fr the designers and develpers). In the HCI dmain, user centered design prcesses ften favr infrmal methds (mck-ups, lw-fidelity prttyping). Hwever, these appraches alne d nt slve the issue f mre cmplex cde and cmplex specificatin f user interfaces. Frmal methds (including frmal descriptin techniques, frmal analysis, perfrmance evaluatin, etc.) n the cntrary can be fund when designing interactive systems fr safety critical systems, which is arguable a niche within the field f HCI. Researchers and practitiners alike are advcating fr ne r the ther but usually nt bth f them. There is a strng difference in cst between these tw types f appraches (the frmal nes being much mre resurce demanding at design time) and even fr safety critical systems, the ecnmics f develpment has t be cnsidered calling fr using frmal methds sparingly. Hwever, fr the design f interactive systems including animatins, this mindset shuld be reevaluated, cnsidering the fllwing issues, which appear when designing and implementing interactive systems with animatins. difficult t describe animatins: the implementatin diverges frm the design, since there is ften n clear descriptin f what exactly an animatin shuld d. difficult t implement: adding animatins t an applicatin requires mre lines f cde. These mre lines f cde usually g hand in hand with mre cmplexity f the applicatin (which influences usability), and mre cmplexity ptentially intrduces mre bugs (which influences safety). Defining animatins: it is hard t define the reactin t system and/r user events. it is difficult t define an animatins reactin as a respnse t system perfrmance issues. Apprach prpsed in this thesis The basic research assumptin f this thesis is that develping interactive systems including animatins is cmplex and the implementatin exhibits a high prbability f ccurrence f faulty r undesired behavirs. There exists n develpment prcess that specifically targets applicatins including animatins, and uses frmal methds fr taming this cmplexity and specify animatin in an implementatin independent way. We therefre prpse a develpment prcess targeting animatins, which includes frmal specificatins f animatins using Petri net mdels. This allws us t develp applicatins including animatins by frmally defining them, and increase the reliability f the resulting prduct. This thesis prpses a develpment prcess t include animatins int the engineering prcess fr interactive systems. Furthermre, a Petri net mdel-based apprach is intrduced as a frmal descriptin f animatin, t bridge the gap between a multidisciplinary team respnsible fr the design, implementatin and validatin f animated user interfaces. This frmal mdeling apprach prvides a cmplete and unambiguus descriptin language fr defining animated interfaces. We will describe the develpment prcess and the mdels used fr the frmal descriptin f animatins. Hwever, we will nt prvide any design guidelines r design patterns. 4

20 T shw the applicability f the prpsed frmal mdeling apprach we finally present a case study. This selected case study psitined in the area f interactive TV. Interactive TV was chsen due t persnal reasns (as I am wrking in this area), but als t select an area were the gap between the cnsumers expectatins n high quality user interfaces including animatins and the hardware used (typically limited prcessing pwer n set tp bx platfrms) has becme evident. Especially fr interactive TV applicatins there is a need fr these kind f appraches t enhance the verall users experience and t fulfill cnsumers expectatins. Organizatin f this thesis This thesis is divided int three main parts. These parts present backgrund infrmatin abut animatin design, implementatin and engineering, the cntributin f this wrk regarding engineering and mdeling f animatins and finally a case study that is putting the appraches as described befre int wrk. State f the Art Part tw called State f the Art, gives an intrductin t the area f animatins and describes a set f basic cncepts that will be used in later parts. These cncepts include a classificatin f animatins, applicatin dmains f animatins as well as a sectin n why animatins are becme widespread used in tday's interactive systems. The classificatin fr animatins will help t determine which cncepts are cvered by ur frmal descriptin apprach described in this thesis, while the summary n applicatin dmains helps t lay a basis fr describing the applicability f the apprach In chapter three, we are ging t review develpment prcesses used fr interactive systems t see where animatins have their place. This review leads t the demand f defining a develpment prcess that explicitly takes animatins int accunt. Finally, part tw will cnclude with the cmparisn f implementatin framewrks used fr animatins identifying cmmn features n an infrmal basis fr the frmal descriptin f animatins (e.g. graphical bjects, prperties r the duratin fr a animatin). Engineering animatins In part three "Engineering animatins", we will present ur apprach t describe and implement animatins. Starting with a prpsed user-centered develpment prcess, treating animatins as first class citizens we then prceed with an abstract descriptin f hw t implement animatins. Using this abstract descriptin, we are ging t prpse an bject-riented Petri net apprach t mdel animatins, capable f representing the cmplexity f cmmn animatin framewrks. Case Study Finally, in part fur we will shw the applicatin f the prcess described in the previus chapter thrugh a case study. The case study is based n a user interface fr interactive TV systems called vcmedia. Using the develpment prcess fr the vcmedia system, we will shw the realizatin f the bject-riented Petri net mdels fr designing, specifying and implementing a graphical user interface fr the itv dmain. The case study demnstrates the applicability f the suggested develpment prcess as well as the ability t use the prpsed frmal mdeling apprach (part three) fr an industrial applicatin. 5

21 INTRODUCTION Cnclusin and Outlk Part five finally cncludes the thesis revisiting the cntributins as well as prviding an utlk n future wrk including insights n the applicatin f the apprach in the dmain f interactive TV. 6

22

23 PART 2 State f the Art "There is n particular mystery in animatin... it is really very simple, and like anything that is simple, it is abut the hardest thing in the wrld t d." Bill Tytla at the Walt Disney Studi, June 28, Part 2 "State f the Art" prvides an verview f the three main areas this thesis is based n. First the fundatins f animatin are intrduced (chapter 1), secnd an verview n pssible classificatin appraches fr animatins is prvided tgether with as an verview f the applicatin areas f animatins (chapter 2) and third, it presents a selectin f sftware engineering prcesses (chapter 3) highlighting advantages and limitatins f these prcesses. CHAPTER 1 Animatin Thmas & Calder [Thmas & Calder 2001] define animatin as fllws: Animatin is the illusin f mvement created by displaying a series f changing pictures, r frames in rapid sequence. Animatin has becme an integral part f user interfaces in the last years. While animatins are used widely and frequently, there is less wrk n hw t change the (user-centered) design and develpment prcess t cnsider animatins and hw t (unambiguusly) describe animatins in user interfaces. T be able t prvide such a design and develpment prcess r a (frmal) descriptin, it is necessary t understand hw animatins are designed and hw animatins can be implemented in a user interface f an interactive system. Based n a set f animatin design principles, the different prperties t cnsider fr animatins are shwn. Fllwing, an verview n basic appraches fr prducing animatin is given and finally the definitin f Thmas & Calder [Thmas & Calder 2001] is reexamined t take a user-centered design and develpment perspective int accunt. 1.1 Animatin Design When we want t design an animatin fr a user interface, we can rely n a set f animatin design principles that have been already established in the field f cartn animatin. Fr the applicatin f such animatins in the dmain f user interfaces f interactive systems, there are a number f examples already implemented in a wide variety f applicatin dmains. In the majrity