Phosphor: Explining Trnsitions in the User Interfce Using Afterglow Effects Ptrick Budisch, Desney Tn, Mxime Collom, Dn Roins, Ken Hinckley, Mneesh Agrwl, Shengdong Zho, Gonzlo Rmos To cite this version: Ptrick Budisch, Desney Tn, Mxime Collom, Dn Roins, Ken Hinckley, et l.. Phosphor: Explining Trnsitions in the User Interfce Using Afterglow Effects. UIST 06: User Interfce Softwre nd Technology, Oct 2006, pp.169-174, 2006. <lirmm-00128259> HAL Id: lirmm-00128259 https://hl-lirmm.ccsd.cnrs.fr/lirmm-00128259 Sumitted on 31 Jn 2007 HAL is multi-disciplinry open ccess rchive for the deposit nd dissemintion of scientific reserch documents, whether they re pulished or not. The documents my come from teching nd reserch institutions in Frnce or rod, or from pulic or privte reserch centers. L rchive ouverte pluridisciplinire HAL, est destinée u dépôt et à l diffusion de documents scientifiques de niveu recherche, puliés ou non, émnnt des étlissements d enseignement et de recherche frnçis ou étrngers, des lortoires pulics ou privés.
Phosphor: Explining Trnsitions in the User Interfce Using Afterglow Effects Ptrick Budisch, Desney Tn, Mxime Collom, Dn Roins, Ken Hinckley, Mneesh Agrwl, Shengdong Zho, nd Gonzlo Rmos Microsoft Reserch, One Microsoft Wy, Redmond, WA 98052, USA {udisch, desney, kenh, dcr}@.microsoft.com, mneesh@cs.erkeley.edu collom@lirmm.fr, {sszho, onzo}@dgp.toronto.edu ABSTRACT Sometimes users fil to notice chnge tht just took plce on their disply. For exmple, the user my hve ccidentlly deleted n icon or remote collortor my hve chnged settings in control pnel. Animted trnsitions cn help, ut they force users to wit for the nimtion to complete. This cn e cumersome, especilly in situtions where users did not need n explntion. We propose different pproch. Phosphor ojects show the outcome of their trnsition instntly; t the sme time they explin their chnge in retrospect. Mnipulting phosphor slider, for exmple, leves n fterglow tht illustrtes how the kno moved. The prllelism of instnt outcome nd explntion supports oth types of users. Users who lredy understood the trnsition cn continue intercting without dely, while those who re inexperienced or my hve een distrcted cn tke time to view the effects t their own pce. We present frmework of trnsition designs for widgets, icons, nd ojects in drwing progrms. We evlute phosphor ojects in two user studies nd report significnt performnce enefits for phosphor ojects. ACM Clssifiction: H5.2 [Informtion interfces nd presenttion]: User Interfces. - Grphicl user interfces. Generl terms: Design, Humn Fctors. Keywords: Phosphor, comic nimtion, crtoon nimtion, user interfces, informtion visuliztion, digrms. INTRODUCTION Computer users sometimes mke mistkes, such s ccidentlly deleting n icon or filing it into the wrong folder. Similrly, unexpected things my occur in collortion scenrios. Users trying to replicte process demonstrted y collortor my lter relize tht they missed some of the steps. This is prticulrly difficult for ctions tht leve no trce, such s shortcut commnds. The potentil chnges tht users need to keep trck of continues to rise with incresing user interfce complexity, more concurrently running pplictions, lrge screens where the user my e ttending to the wrong loction, nd Permission to mke digitl or hrd copies of ll or prt of this work for personl or clssroom use is grnted without fee provided tht copies re not mde or distriuted for profit or commercil dvntge nd tht copies er this notice nd the full cittion on the first pge. To copy otherwise, or repulish, to post on servers or to redistriute to lists, requires prior specific permission nd/or fee. UIST 06, Octoer 15 18, 2006, Montreux, Switzerlnd. Copyright 2006 ACM 1-59593-313-1/06/0010...$5.00. the possiility of remote collortion. Without knowing wht chnged nd how it chnged, users cn find it hrd to detect nd correct unintended or unexpected ctions. Animted trnsitions hve een proposed to help users understnd chnges in the user interfce [9, 19] nd hve found their wy into rnge of products. Windows Medi Plyer 10, for exmple, hides its ply controls in fullscreen mode y slowly moving them off screen. While this cn help users understnd where the controls went nd how to get them ck, it lso introduces lg into the interction, i.e., it forces users to wit for the nimtion to complete. For experienced users who do not need n explntion, this forced puse cn e cumersome nd my rek their concentrtion. Figure 1: These phosphor widgets use green fterglow effects to show how they hve chnged. The slider leled volume ws drgged ll the wy to the left. Two of the checkoxes in the next row were unchecked. The como ox ws set from 1 to 2. PHOSPHOR USER INTERFACE OBJECTS We propose explining user interfce trnsitions without forcing users to wit. We define phosphor trnsition s trnsition tht: 1. shows the outcome of the chnge instntly nd 2. explins the chnge in retrospect using digrmmtic depiction The spce of retrospective digrmmtic descriptions encompsses gret numer of possile designs. In this pper, we concentrte on specific suset sed on the notion of fterglow. Figure 1 shows n exmple. When user op-
ertes the shown phosphor widgets using the mouse or shortcut stylized fterglow effect shows how they hve chnged. In some cses, such s the slider, the fterglow is n lmost relistic depiction of the motion tht took plce during the chnge. Widgets tht chnge in more complex wys, such s the como ox, re provided with more strct nd symolic fterglow in order to limit clutter. Phosphor widgets re designed to focus users ttention on ojects tht hve chnged. If users elieve mnipultion took plce in error, they cn undo the ction y returning the widget to the previous stte suggested y the fterglow. Afterglow lso helps users to oserve chnges tht they hve not initited nd hence provides etter understnding in scenrios such s remote collortion. Afterglow effects re typiclly set to fde over period of few seconds. Actions occurring in rpid succession will therefore result in multiple concurrent fterglow effects. This is intended to help users ctch up with fst ursts of ctivity s might occur during demonstrtions or collortive work. Resulting enefits The proposed pproch differs sustntilly from nimted trnsitions: nimted trnsitions explin the trnsition nd then continue the regulr execution of the progrm; phosphor trnsitions do oth t the sme time. This prllelism results in three min enefits: (1) Users cn choose whether to ttend to the explntion or to continue with the regulr progrm execution. Users re never forced to wit. (2) Since users re never forced to wit, dditionl disply time comes t low price. Inexperienced or distrcted users cn therefore e ccommodted with incresed fterglow durtions. (3) Since disply time comes t low price, ppliction designers cn pick resonle upper ound. This frees them from hving to hnd-optimize durtion mjor chllenge fced y designers of nimted trnsitions. The use of phosphor widgets introduces tension etween screen rel estte nd interction time. Becuse phosphor widgets re susceptile to clutter, they require creful design. In the reminder of this pper, we give rief overview of the relted work. Then we tke closer look t the visul lnguge of phosphor. We present designs for trnsitions for different types of interfce ojects nd explin how to minimize clutter. After rief description of our implementtions we present two user studies. The first study finds significnt performnce enefits for phosphor over control condition: Prticipnts performed simulted collortion tsk fster when widgets were provided with n fterglow. The second user study finds tht phosphor s tsk performnce is similr or etter to nimted trnsitions. We conclude with summry of our findings nd n outlook to future work. RELATED WORK Two min fields of relted work for Phosphor re nimted trnsitions nd digrmmtic explntions. Animted Trnsitions Animted trnsitions re one of the eight clsses of nimtion in the user interfce [2]. Benefits of nimted trnsitions include tht they cn help increse the sliency of notifictions [4], drw ttention to peripherl displys, such s stock tickers [24], nd tht they cn help illustrte cusl reltionships [33]. Animted trnsitions cn help users follow trnsitions etween views [3], e.g., in pplictions displying complex dt, such s trees [28]. By dding effects inspired y crtoons such s nticiption nd followthrough, reserchers hve otined more lifelike effect (crtoon nimtion [9, 31]). Reserch hs not converged on consistent results regrding the efficiency of nimted displys [32]. Animted illustrtions my require more cognitive lod thn sttic ones [21]. Psychophysics reserch hs shown tht most users hve difficulty trcking five or more ojects [8, 36, 25]. Motion is hrd to ignore nd my thus cuse users to e distrcted y nimted trnsitions [4]. Stsko [29] points out tht nimtion durtion is crucil fctor in the design of nimtion. To minimize lg, n nimtion should e fst; mking n nimtion too fst, however, my lose the user. Reserchers exploring nimtion durtions hve found tht 300ms cn work well for simple scrolling trnsition [19], while comprehending 3D trnsitions cn require severl seconds [27]. Optimum nimtion speed depends on user- nd sitution-specific fctors such s fmilirity, expecttion, ttentiveness, nd perceptul ilities nd therefore re difficult to predict. While designers of phosphor ojects lso need to set the durtion for fding the fterglow, the question is less crucil ecuse the fterglow does not prevent users from continuing their tsk. Digrms in informtion visuliztion In the fields of visuliztion nd grphics, reserchers hve proposed illustrting dynmic phenomen using sttic depictions. Digrmmtic illustrtions re menle to printing [1], nd cn help users discover trends in lrge sets of motion dt [10]. On the flip side, users do not process digrms immeditely nd s whole; users first hve to discover the est order to process the informtion [7]. Digrmmtic summries come in mny different styles. Feiner orrows principles from technicl illustrtion [11], while Hill nd Holln use them to illustrte the pst usge of document [16]. Crefully selected individul frmes cn e comined to form stroe effect (Action Synopsis [1]). Chronovolumes comine successive frmes into continuous motion lur. They use color trnsitions to depict the progression of time [35]. Speed lines [22] re more strct type of motion lur creted using non-photorelistic rendering [26]. Speed lines hve lso een used to enhnce the experience of nimtion sequences in video gmes [14] nd to help users mke sense of gme mp overviews [17].
Comics use sttic depictions of dynmic contents tht hve een dopted y user interfce reserch such s Comic Cht [20]. The individul frmes of comic re multiplexed in spce, unlike crtoons tht show them in temporl succession [23]. The visul lnguge of phosphor is similr to tht of comic ooks in tht oth depict the pst; the ct of running is shown y dding motion lur ehind the chrcter; punch is shown s fist tht hs lredy followed through. Story ords in contrst tend to depict the future. Digrmmtic trnsitions in the user interfce There re only few exmples of digrmmtic cues depicting motion in user interfces. Mc OS X complements nimtion with motion lur when iconifying windows. High-density cursor improves trget cquisition y dding stroe effect to the mouse trjectory [5]. Gutwin nd Penner showed tht similr cues pplied to telepointers cn improve collortion [13]. Kptelinin et l. showed tht sttic cue cn improve the reding performnce of scrolled pges. Their design minimizes clutter y using only n outline to highlight new screen content [18]. Our work on phosphor is different in tht it focuses on individul ojects, rther thn view nvigtion. Our pper generlizes the trnsition styles of drg-nd-pop, n interction technique for ccessing distnt content on wll-size displys [6]. THE VISUAL LANGUAGE OF PHOSPHOR In this section, we show how the design spce of phosphor is pplicle to mny ojects nd trnsitions, such s icons, windows, or ojects in drwing progrm. Such ojects my experience rod rnge of trnsitions, such s rottion, chnge in stcking order, or chnges in opcity. Figure 2 illustrtes the generl concept for creting phosphor trnsition. First, we envision n nimted trnsition. Second, we conceptulize this trnsition s sttic depiction y projecting long the time xis. The result is single imge consisting of the initil stte of the trnsition, the finl stte, nd the pth in etween. For trnsltions, e.g., the kno of slider, this process is firly strightforwrd nd cn e implemented using motion lur effect. For in-plce trnsitions, such s rottion or chnge in opcity, however, ll frmes of the nimtion fll onto the sme loction. We present mesures to void occlusion in such cses. We lso present cues tht compenste for the loss of temporl order during the projection step. We first present visul styles for pths. For the ske of visul consistency, ll exmples in this section use the sme visul ojects, here two desktop icons. These re intended s exemplrs for phosphor ojects in generl. Pths styles: stroe, motion lur, nd speed lines Figure 3 shows the three sic pth styles we hve used, ll inspired y comic ooks [23]. The stroe style shown in Figure 3 consists of finite numer of prtilly overlpping frmes. It cn help convey complex trnsitions y reking it down into frme-yfrme illustrtion. The motion lur style shown in Figure 3 is generted from single copy of the oject y first compressing it to singlepixel-width nd then y stretching it to the desired length. This pproch leds to less clutter, s the individul frmes dissolve into single gestlt. In literl implementtion of stroes nd motion lur, long pths would e prcticlly invisile, ecuse ech of the n frmes the pth is composed from hs opcity of only 1/n [5]. We ensure pth visiility y incresing pth opcity to point were pths re clerly visile. Pth opcity is suject to trdeoff etween visiility nd clutter, ut we otined good results with opcities of 50% for the densest prt of the pth. For most of our pplictions, s well s oth user studies reported in this pper, we use the speed lines style shown in Figure 3c. This style consists of pir of edge lines nd center line on top of ckground surfce, s used in [6]. It provides good indiction of orienttion nd cuses less clutter thn the motion lur design. By using chrcteristic colors smpled from the oject, speed line pths often lso resemle their prent ojects more thn the wshed out colors of the ctul motion lur. This helps visully mtch pths with prent ojects nd visully seprte them from other intersecting pths (see lso Figure 11). Figure 2: The fterglow of phosphor ojects is generted y projecting n nimted trnsition long its time xis. Figure 3: Bsic pth styles () stroe () motion lur, nd (c) speed lines. We mke pths trnsprent to mouse input to llow users to interct with screen content temporrily occluded y pth. If trnsition is repeted while its fterglow is still on screen (for exmple, when mnully nudging geometric c
oject in drwing progrm), we keep the initil stte in plce nd only extend the pth. Reestlishing the time dimension Pths do not inherently offer ny sense of directionlity. So, to distinguish n oject moving from A to B from n oject moving from B to A, we dd three cues to reinforce temporl order, 1. Fding old pth segments: We render pth segments incresingly trnslucent the further wy they re from the finl stte. Accordingly, fding n fterglow cuses the pth to dispper initil stte-first (Figure 4). move copy Figure 5: Whether folder is eing () moved or () copied is determined y the initil stte visuls. Concve pths indicte trnsience: Some trnsltions re trnsient, such s trnsltion suggested y the system ut not yet confirmed y the user. We depict such trnsltions using pths with nrrow midriff section to suggest tht the finl stte is connected to the initil stte using n elstic ruer nd tht will eventully pull the finl stte ck (Figure 6). The sme effect cn lso e used to crete nd remove temporry copy (Figure 6) s done y drg-ndpop [6]. Since the pth is ttched to the initil stte we do not fde it. Note how the digrmmtic nture of phosphor llows depicting the future. Figure 4: () Pths fde initil stte first. () The temporl order of this stroe-style pth is emphsized y stcking frmes in chronologicl order. 2. Stcking newer frmes on top of older frmes: We lwys render the pth on top of the initil stte nd the finl stte on top of everything. This lso gurntees tht the finl stte is never occluded nd lwys fully redle. We use the sme concept mong the individul frmes of stroe style pths (Figure 4). 3. Distinctive initil sttes: In order to help users distinguish initil nd finl stte, we render them differently if possile. We lwys render the oject s finl stte s is; only then cn we gurntee tht it is legile nd immeditely ville for further interction.. In Figure 4 we rendered the initil stte s n outline to suggest the sence of tht oject, s pproprite for move opertion. We discuss other styles in lter section. We decided ginst other potentilly useful cues for temporl order, such s texturing pths with rrow symols or the use of nimted textures. Animted textures do not impct the redility or ccessiility of the oject s finl stte, ut they seemed distrcting. While tpered pths [17] could e used for this purpose, we insted chose to use this cue to depict trnsient opertions s descried elow. Depicting the opertion cusing the trnsltion We use different pth shpes nd initil sttes to dismigute whether the trnsltion of n oject occurred ecuse the oject ws moved, copied, or filed in sufolder Move vs. copy: A copy opertion is move opertion tht does not distur the initil stte. We therefore depict copy opertions s move opertions with solid initil stte (Figure 5). temp. move temp. copy Figure 6: A nrrow midriff on this pth indictes tht this folder ws () moved or () copied temporrily. Tpered pths indicte child-of reltionship: Sometimes n oject is spwned or unveiled y nother oject, such s child window eing spwned y its prent window or folder eing extrcted from nother folder. To void confusion with copy opertion, we use tpered pth, suggesting tht n oject needs to e shrunk efore it cn fit into nother oject (Figure 7) nd tht restored oject strts smll nd ends lrge (Figure 7). file extrct Figure 7: The tpered pth indictes tht () the folder t the ottom left ws dropped into the other folder or () expnded from it. Trnsitions tht do not involve trnsltion When collpsing the time dimension for trnsitions tht lck trnsltion, ll frmes project onto the sme loction. We llevite this prolem y dding motion to the nimted trnsition efore we project it so tht phosphor cn depict time in screen spce. Figure 8 shows n exmple. () Bringing n oject to the front cn e thought of s trnsition exclusively in Z-direction [9]. () Before projecting, we dd motion to the pth such tht it evdes the other oject. (c) Collpsing this second nimtion provides the desired pth.
time time Figure 8: () initil nimtion, () dding verticl motion, nd (c) resulting phosphor trnsition. Reveling the initil stte: Adding motion to the pth revels the pth, yet the initil stte remins occluded. We ensure the visiility of the initil stte y trnslting it forwrd in time long the pth, s shown in Figure 9. In cses where we cn expect users to know tht this trnsltion is not prt of the trnsition, we cn omit the pth (Figure 9 nd c, s well s the como ox in Figure 1). c Figure 9: () The initil stte of this scled-up oject ws reveled y moving it out long the pth. () If unmiguous, we my omit the pth. (c) The mtching scling down trnsition. Out-of-nd properties in the initil stte: In mny of our exmples, we repurposed properties of the initil stte. We used texture to convey temporl order (Figure 4), size to convey n inclusion reltionship (Figure 7), nd loction to void occlusion (Figure 9). But how cn users know tht the oject in Figure 4 did not chnge from n outline to solid oject, tht nothing shrnk in Figure 7, nd tht nothing moved in Figure 9? We used wht we cll out-of-nd signls, nother exmple of which is shown in Figure 10 nd. c d Figure 10: Trnsition () from trnsprent to opque nd () from 50% trnsprent to opque. (c) A rottion my e confused with trnsltion, unless (d) n out-of-nd cue is dded. c This trnsition shows n increse in opcity y showing trnsprent initil stte. Using rel trnsprency would cuse the initil stte to e invisile. We therefore use symolic representtion insted, here checkerord pttern tht shines through. This pproch is commonly used in pinting progrms, such s Adoe Photoshop. It works, ecuse checker ords re unlikely to occur in the ppliction re of interest, such s photogrphs or icons. The limittion of this pproch is tht the choice of out-of-nd signls is ppliction-specific. Appliction res tht include checker ord textures, for exmple, require using different stimulus. We hve used the out-of-nd concept for wide rnge of trnsitions, including rottion (Figure 10c nd d). Trnsitions tht involve multiple ojects If pths cross t n ngle, speed line gestlt is sufficient to ssure redility (Figure 11). During pilot testing, we found tht up to ten simultneous trnsltions on the screen were visully seprle, even when they where of the sme color scheme. For cses of exct overlp (Figure 11), redility cn e mintined y letting pths void ech other (Figure 11c). c Figure 11: () In the generl cse, pth overlp is not prolem. () Ojects trding plces (c) is etter hndled with pths voiding ech other. If lrge numers of ojects move, we my reduce clutter y shortening pths (Figure 12, see lso [30]). We cn use single pth for groups of ojects performing the sme trnsition (Figure 12). Figure 12: Avoiding clutter y () shortening pths nd () using single pth oject. IMPLEMENTATION In order to try out our concepts nd to run the user studies reported elow, we creted two prototypicl implementtions of phosphor. Figure 13 shows screenshot from our first prototype. It simultes computer desktop nd llows us to crete vriety of different trnsition types. It is implemented in Delphi using the.net frmework. The prototype llows loding ritrry grphics for ojects nd if desired seprte grphics for their initil sttes. It genertes different shpes of pths using Bezier curves with four control points. Colors of speed line pth re generted utomticlly y smpling nd verging colors from the respective ojects. The prototype llows customizing pth opcity; the defults re 12.5% to 50% opcity for the pth fill nd 25% to 87.5% for pth edges. Finlly, this prototype lso offers nimted trnsitions. Our second prototype is shown in Figure 14, close-up in Figure 1. It is implemented in Mcromedi Flsh nd offers
phosphor versions of stndrd GUI widgets. Widgets re implemented s Flsh components [12], which llows reusing them in other Flsh pplictions. Tsk Ech tril took plce in the following six steps. (1) Users clicked go utton. (2) A dilog ppered nd the user s mouse ws disled. The dilog contined mix of sliders, como oxes, nd checkoxes lid out in regulr 5x8 grid s shown in Figure 14. Lyout nd leling of widgets chnged ech tril. To indicte the non-interctivity, the window r of the dilog ws shown in gry. (3) After puse of 500 milliseconds, the mouse pointer strted trversing the screen nd consecutively djusted six of the forty widgets in the grid, i.e., two sliders, two checkoxes, nd two como oxes. Simulting humn motion pttern, the pointer would hover 200ms over widget efore djusting it. There were three plyck speed conditions. In plyck speed conditions medium the mouse trversl from one widget to the next took 600ms, 800ms, or 1000ms in rndom order, lwys resulting in the sme overll durtion of 4800 ms. In the slow nd fst plyck speed conditions ll trversl nd hover times were multiplied y fctors 1.3 nd 0.7 respectively. (4) There ws 4000ms puse. At the end of tht puse, ll of the 4000ms fterglow effects hd fded completely. (5) The mouse ws reenled, the window r of the dilog turned lue, nd text ws displyed instructing prticipnts to strt undoing s mny of the oserved chnges s possile. (6) The prticipnt djusted s mny widgets s they desired. Then they clicked the dilog s OK utton, which closed the dilog nd completed the tril. Tsk time ws counted from the moment the dilog turned interctive until the moment the user hit the OK utton. Interfces There were two interfce conditions, phosphor nd control. The phosphor condition ws identicl to the control condition, except tht widgets displyed n fterglow fter eing djusted y script or prticipnt s shown in Figure 1. Ech fterglow fded independently fter 4000ms. Figure 13: Our Delphi-sed prototype showing severl phosphor trnsitions. To ojectively evlute user performnce using phosphor trnsitions we crried out two user studies. USER STUDY 1: FOLLOWING A COLLABORATOR The purpose of the first study ws to exmine whether phosphor helps users visully trck trnsitions in the user interfce. The prticipnt s tsk ws to wtch (simulted) collortor djust widgets in control pnel dilog. Then prticipnts hd to demonstrte their comprehension y undoing s mny of the oserved ctions s possile. Our min hypothesis ws tht the phosphor interfce condition would led to etter perception nd memoriztion of the ctivities, which we would mesure s fster tsk performnce. Figure 14: The pprtus used in the first user study. The user s tsk ws to undo s mny of the six djustments oserved. Experimentl design The study design ws within sujects 2 3 (user interfce x plyck speed) with 8 repetitions for ech cell. For ech tril, we recorded completion time nd error. Error ws ny difference etween the initil stte efore the utomted trversl nd the finl stte fter the user djustments; clicking OK without mking ny djustments, for exmple, resulting in six errors. Interfce order nd speed fctors were counterlnced. Dilog lyout ws rndomized. Prticipnts received trining upfront nd t the eginning of ech lock. They filled in questionnire t the end of the study relted to sujective preference, lernility of phosphor trnsitions, nd usefulness. The study took out 20 min per prticipnt. Apprtus The experiment ws run on PC running WindowsXP with 17 LCD monitor, t resolution of 1280x1024 pixels. The interfce used in this study ws implemented in Mcromedi Flsh s descried erlier. The opticl Dell mouse ws set to medium mouse speed. Prticipnts 12 university students (1 femle) etween the ges of 24 nd 30 prticipted in this study. All hd experience with grphicl user interfces nd mice nd hd norml or corrected to norml vision nd color vision.
Hypotheses We hd two hypotheses: (H1) Prticipnts would e le to perceive nd memorize chnges etter in the phosphor condition. (H2) We expected the incresed performnce to cuse prticipnts to sujectively prefer the phosphor interfce. We hd no prticulr hypothesis out the impct of plyck speed. Results We nlyzed the dt for this experiment t the summry level, tking the medin of the completion times nd the men of the errors over the 8 trils in ech condition.. The dependent vriles were error rte nd tsk completion time. We nlyzed ech vrile using 2 (interfce) 3 (plyck speed) repeted mesures nlysis of vrince (RM-ANOVA). For tsk completion time, we oserved significnt min effect of interfce (F(1,11)=20.07, p=.001), with users completing the tsk fster with the phosphor interfce (Med=7.17 s) thn with the control interfce (Med=9.35 s). We lso oserved significnt min effect of plyck speed (F(2,22)=4.06, p=.031). Pired comprisons using Bonferroni corrections showed tht this difference ws driven y significnt differences etween the fstest condition (Med=7.34 s) with the slowest condition (Med=9.01 s, p=.02). We oserved no significnt interctions etween the two fctors. seconds 12 10 8 6 4 2 0 phosphor slow medium fst control Figure 15: Tsk completion times of the first user study. Prticipnts performed the undo tsk fster when widgets were provided with phosphor effect (times in seconds, +/- stndrd error of men). We oserved no significnt effects when we exmined error rtes. Users mde on verge out 3.1 errors, i.e., they were le to undo out hlf of the oserved chnges, with no significnt differences cross conditions. Hence, while Phosphor seemed to help with the speed t which users were le to retrieve nswers from memory, our tsk nd error rte metric ws not sensitive enough to pick up differences when using this interfce. At the end of the experiment, prticipnts nswered questionnire. All 12 prticipnts preferred the phosphor interfce to the control interfce. On 7-point Likert scle, prticipnts greed tht the phosphor interfce helped them rememer more chnges (men vlue: 5.9). Prticipnts lso expressed tht it did not tke long to get used to the phosphor interfce (men vlue: 2.6). Discussion The timing dt supports our first hypothesis. We elieve tht the difference in completion times represented the level of confidence tht users hd in their responses. When they used the Phosphor interfce, they were more certin of the nswers nd spent less time thinking when undoing chnges. This performnce difference lso mnifested itself in prticipnts sujective preference. Interestingly, prticipnts performed fster in the fster plyck conditions. One possile interprettion is tht the reduced time spent wtching the ctions helped prticipnts keep the ctions in their working memory. USER STUDY 2: COMPARISON WITH ANIMATION The purpose of the second user study ws to compre phosphor with nimted trnsitions. While phosphor effects hve the enefit of not introducing lg, we were wondering if this enefit would come t the expense of reduced tsk performnce when compred with nimtion. We lso used this experiment to lern more out how multiple simultneous trnsition effects nd distrctors impct user performnce nd user preference. Tsks This study simulted the sitution of user who hs copied nd psted one or more files into folder window nd who now tries to visully verify whether the expected ction hs tken plce. Ech tril proceeded s follows. (1) A simulted windows desktop screen ws displyed. The screen contined 11 smll windows nd 25 icons of the sme file type. (2) For 1200ms, the interfce highlighted three icons nd one trget window s shown in Figure 16. (3) The highlights were removed to prevent users from completing the tsk y simply trcking the highlights. There ws 500ms puse. (4) Three icons moved cross the screen. (5) Prticipnts pressed the Y key if they felt tht the shown trnsition corresponded to the highlighting showed erlier; otherwise they pressed the N key. The nswer keys could e pressed s soon s the trnsition strted nd prticipnts were encourged to press the correct key s soon s they knew the nswer. There were four possile outcomes for ech tril, ech of which occurred eqully often. Correct: All three icons successfully reched the trget window (Figure 16). ErrorNeighor: An incorrect icon moved; it ws locted closely to the expected one. ErrorOther: An incorrect icon moved; it ws locted fr wy from the expected one. ErrorUndershoot: The right icons moved, ut one of them did not rech the trget folder ecuse it over or undershot. There were three versions of this tsk clled singleicon, tripleicon, nd distrctor. The tripleicon tsk ws descried ove nd shown in Figure 16. The singleicon tsk ws identicl to tripleicon, ut only single icon ws highlighted, moved, nd needed to e verified. The distrctor
tsk ws mix of oth conditions. Only single icon ws highlighted nd needed to e verified, ut n dditionl two icons moved. The purpose of the distrctor tsk ws to provide insight out how motion on the screen ffects user performnce with nimtion nd phosphor. Figure 16: The tripleicon tsk. () Three icons re highlighted in green nd trget window in red, then () three icons perform trnsition, here shown using the phosphor interfce condition. In this exmple the trnsition mtches the erlier highlighting, so the correct response is to press Y. Interfces We tested two interfce conditions. The phosphor interfce (Figure 16) used the speed line design descried erlier nd the copy visuls shown in Figure 5. Phosphor cues were shown the moment the trnsition ws triggered nd were removed when the prticipnt hit the nswer utton. The nimtion interfce used slow-in/slow-out nimtion t 25 frmes per second. If multiple icons moved, they moved in synchrony. There were five nimtion conditions with nimtion durtions of 125ms, 250ms, 500ms, 1000ms, nd 2000ms, covering the comined rnge from severl experiments reported in the relted work, e.g. [19, 28]. Experimentl design The study ws 6 (Interfce: phosphor, 5 nimtion) 3 (Tsk: SingleIcon, TripleIcon, Distrctor) 4 (Outcome: Correct, ErrorUndershoot, ErrorNeighor, ErrorOther) within-sujects design. During the study, prticipnts performed ech tsk in its entirety using ll six interfces efore moving to the next tsk. Interfce nd tsk order were counterlnced. Prticipnts performed the sme 60 trils (15 icon lyouts x 4 outcomes) for ech of the six interfces of given tsk in different rndomized orders. This llowed us to control for the difficulty of the tril. Pilot testing nd nlysis on the study dt showed no lerning effects. For ech tril, we recorded tsk completion time nd error. Tsk time ws counted from the moment the trnsitions strted until the moment the prticipnt pressed one of the nswer keys. Prticipnts received trining t the eginning of the experiment nd prior to strting ech lock. At the end of the study, they filled in questionnire. Overll, the study took out 90 min per prticipnt. Apprtus The experiment ws run on three PCs running WindowsXP with LCD screens driven y NVIDIA grphics crds nd offering 60Hz refresh rte. The test progrm ws 1024x768 lrge (11 /28cm wide). Prticipnts intercted with the system using stndrd PC keyord. Prticipnts Twelve volunteers (4 femle) etween the ges of 22 nd 35 prticipted in this study. All hd experience with grphicl user interfces nd hd norml or corrected to norml vision nd color vision. Ech received smll grtuity for their time. Hypotheses Our min hypothesis ws tht the phosphor interfce, which llows users to view trnsitions t their own pce, would perform s well s the est nimtion condition. We lso ssumed tht the hrder tsks would impct tsk performnce cross interfce conditions, ut we hd no cler hypothesis out how. Results We nlyzed the performnce dt t the summry level, verging the 15 trils within ech condition. We used 6 (Interfce) 3 (Tsk) 4 (Outcome) repeted mesures nlysis of vrince (RM-ANOVA) for ech of the dependent mesures, tril time nd error rte. Tsk time phosphor vs. nimtion: For verge tril time, we oserved min effect of Interfce (F(5,55)=243.596, p<.001). Pirwise comprisons with Bonferroni correction showed significnce cross ll pirs of interfces, except for the Phosphor 125ms, the 125ms 250ms, nd the 250ms 500ms conditions (Figure 17 nd c). Tsk time cross tsks: We oserved significnt min effect of Tsk (F(2,22)=8.974, p<.001). In pirwise comprisons using Bonferroni correction, we found tht users were significntly slower in the TripleIcon condition (M=1160.4s) s compred to oth the Distrctor condition (M=995.9, p<.020) nd the SingleIcon condition (M=1062.0, p<.019). As one would expect, trcking three icons tkes longer tht trcking single icon. A plnned contrst on the Phosphor tsk times found tht ll three tsk conditions were significntly different from ech other (F2,22 = 17.68, p <.001). Trils of the TripleIcon tsk (1010.72ms) took prticipnts 56% longer thn the SingleIcon tsk (645.54ms). The dditionl two distrctor icons of the distrctor tsk incresed tsk time y 25% to 804.25ms per tril for the distrctor tsk. Tsk time cross outcomes: Finlly, we found significnt min effect of Outcome (F(3,33)=966.709, p<.001). Pirwise comprisons showed ll Outcomes significntly different from ech other. The ErrorNeighor nd ErrorOther
Time - Interfce x Tsk Error phosphor nimtion phosphor nimtion Time - Interfce x Outcome c Error d phosphor nimtion phosphor nimtion Figure 17: () Tsk time in seconds nd () error rte y interfce nd tsk. (c) Tsk time in seconds nd (d) error rte y interfce nd outcome (+/- stndrd error of the men). outcomes were fster thn the other two outcomes (Figure 17c). These two error conditions involved wrong icon moving, which prticipnts detected erly on nd dismissed these trils instntly. Correct nd ErrorUndershoot outcomes, on the other hnd, required prticipnts to wit for the nimted trnsitions to complete. Consequently, we sw higher tsk times overll nd in prticulr strong negtive impct in the slower nimtion conditions. Error rte: Similrly, for the error rte metric, we oserved min effect of Interfce (F(5,55)=4.704, p<.001), driven minly y differences etween the 2000ms nimtion Interfce nd the Phosphor, 125ms, 250ms, nd 500ms conditions. We lso sw min effect of Tsk (F(2,22)=16.985, p<.001). As expected errors in the TripleIcon condition were significntly higher thn tht of Distrctor (p<.006) nd SingleIcon (p<.001) tsks (Figure 17d). Finlly we sw min effect of Outcome (F(3,33)=21.243, p<.001), with ll pirs significntly different except for the correct v. ErrorUndershoot nd ErrorNeighor vs. ErrorOther. Error- Other nd ErrorUndershoot were esier to detect nd therefore led to low error rtes (Figure 17). The error in the ErrorNeighor tsk, on the other hnd, ws esily missed nd led to n error rte even higher thn the Correct outcome. Sujective preference: Prticipnts selected one fvorite interfce condition fter completing ech tsk. To simplify selection, we offered the four mnemonic choices super fst, fst, slower, super slow, nd Phosphor. Preferences vried etween tsks. For the singleicon nd the Distrctor tsks, the fst condition ws fvorite (7 out of 11 prticipnts). For the tripleicon tsks, preferences were more lnced with 3 prticipnts ech preferring the fst, slow, nd phosphor. The reson most commonly given for the lower populrity of the phosphor interfce ws tht it ws more distrcting, especilly in the distrctor tsk. The slow nimtion conditions received very low stisfction rting throughout, despite their superior error rte. Severl prticipnts expressed strong dislike for the wit time cused y these conditions. Discussion The findings of our second user study indicte tht the performnce of the phosphor interfce is comprle to nimted trnsitions. For ll pirs ut the fstest nimtion condition, Phosphor ws significntly fster. For the 125 ms nimtion condition, there ws no significnt difference etween conditions. This suggests tht the enefits of phosphor do not come t the expense of reduced tsk performnce.
At the sme time, the second study suggests there my e limits to the spce-for-time pproch ehind phosphor. With pths reching cross the entire screen, users cnnot fovete the entire pth t once, nd the resulting disply cn ecome distrcting, s the sujective preference dt indictes. While we my e le to push this limit out y fine tuning the pth visuls (e.g., thinner pths with lower opcity), the contrst with the strong positive findings of the first study indictes tht the gretest enefits of phosphor might lie in the spce of loclized effects (see lso Proximity Comptiility Principle [34]). CONCLUSIONS Phosphor is technique for explining trnsitions in the user interfce. Unlike nimted trnsitions, it never forces users to wit. Our first study indictes tht phosphor trnsitions help improve users ility to process chnges in the user interfce. Our second study indictes tht the enefits of phosphor over nimted trnsitions do not come t the expense of tsk performnce. As future work we pln to continue to investigte the lernility of our design. We lso pln to explore ppliction res tht re trditionlly less ccessile to nimtion, such s glncele displys. ACKNOWLEDGMENTS We thnk George Roertson for his comments on drft of this pper. Thnks lso to Steve Drucker. REFERENCES 1. Ass, J., Cspi, Y., nd Cohen-Or, D. Action synopsis: pose selection nd illustrtion. In Proc. Siggrph 05, pp. 667-676. 2. Becker, R., Smll, I., nd Mnder, R. Bringing Icons to Life. In Proc. CHI 91, pp 1-6. 1991. 3. Brtrm, L. Cn motion increse user interfce ndwidth? In Proc. IEEE Conference on Systems, Mn, nd Cyernetics 97. pp. 1686-1692. 4. Brtrm, L., Wre, C. nd Clvert, T. Moving Icons: Detection nd Distrction, Interct 2001. 5. Budisch, P., Cutrell, E., nd Roertson, G. High-Density Cursor: A Visuliztion Technique tht Helps Users Keep Trck of Fst-Moving Mouse Cursors. In Proc. Interct 03, pp. 236-243. 6. Budisch, P., Cutrell, E., Roins, D., Czerwinski, M., Tndler, P. Bederson, B., nd Zierlinger, A. Drg-nd-Pop nd Drg-nd-Pick: Techniques for Accessing Remote Screen Content on Touch- nd Pen-operted Systems. In Proc. Interct 03, pp. 57-64. 7. Bétrncourt, M. nd Tversky, B. (in press). Simple nimtions for orgnizing digrms. Interntionl Journl of Humn Computer Studies. 8. Cvngh, P. nd Alvrez, G. Trcking multiple trgets with multifocl ttention. TRENDS in Cognitive Science, Vol. 9. No. 7, pp. 249-354, July 2005 9. Chng, B.-W. nd Unger, D. Animtion: From Crtoons to the User Interfce. In Proc. UIST 93, pp. 45-55. 10. Chittro L., nd Ieronutti, L. A visul tool for trcing users ehvior in virtul environments. In Proc. AVI 04, pp. 40 47. 11. Feiner, S. APEX: An Experiment in the Automtic Cretion of Pictoril Explntions. IEEE Computer Grphics nd Applictions, 5(11), pp. 29-37, 1985. 12. Flsh components: downlod.mcromedi.com/pu/documenttion/en/flsh/fl8/fl8_using_components.pdf 13. Gutwin, C., nd Penner, R. Improving Interprettion of Remote Gestures with Telepointer Trces. In CSCW 05, pp.49-57. 14. Hller, M., Hnl, C., nd Diephuis, J. Non-Photorelistic Rendering Techniques for Motion in Computer Gmes. In ACM Computers in Entertinment 2(4) Octoer 2004. 15. Heer, J., Crd, S., nd Lndy, J. Prefuse: Toolkit for Interctive Informtion Visuliztion. Proc. CHI 05, pp. 421-430. 16. Hill, W., Holln, J., Wrolewski, D., nd McCndless, T. Edit wer nd red wer. In Proc. CHI 92, pp.3-9. 17. Hooler, N., Humphreys, G., nd Agrwl, M. Visulizing Competitive Behviors in Multi-User Virtul Environments. In Proc. Viz 04, pp. 163-170. 18. Kptelinin, V., Mäntylä, T., Åström, J. Trnsient Visul Cues for Scrolling: An Empiricl Study. In CHI 02 Extended Astrcts, pp. 620-621. 19. Klein, C. nd Bederson, B. Benefits of Animted Scrolling. In CHI 05 Extended Astrcts, pp. 1965-1968. 20. Kurlnder, D.J., Skelly, T, nd Slesin, D. Comic Cht. In Proc. SIGGRAPH 06, pp. 225-236 21. Lowe, R. Interctive nimted digrms: wht informtion is extrcted? In Proc. First Interntionl Conference on Using Complex Informtion Systems, Sept. 4-6 96, Poitiers, Frnce. 22. Msuch, M., Schlechtweg, S., nd Schulz, R. Speedlines Depicting Motion in Motionless Pictures. In SIGGRAPH'99 Conference Astrcts nd Applictions, p. 277. 23. McCloud, S. Understnding Comics. Perennil Currents, 1994. 24. McCrickrd, S., Ctrmone, R., nd Stsko, J. Evluting Animtion in the Periphery s Mechnism for Mintining Awreness. In Proc. INTERACT 01, pp. 148-156. 25. Oksm, L. nd Hyön, J. Is multiple oject trcking crried out utomticlly y n erly vision mechnism independent of higher-order cognition? An individul difference pproch. Visul Cognition, Vol. 11, pp. 631-671, 2004. 26. Reynolds, C. Stylized Depiction in Computer Grphics: Non- Photorelistic, Pinterly nd 'Toon Rendering. An nnotted survey of online resources www.red3d.com/cwr/npr 27. Roertson, G., Cmeron, K., Czerwinski, M., Roins, D. Polyrchy visuliztion: visulizing multiple intersecting hierrchies. In CHI 02 Extended Astrcts, pp. 423 430. 28. Roertson, G., Crd, S., nd Mckinly, J. The cognitive coprocessor rchitecture for interctive user interfces. In Proc. UIST 89, pp. 10-18. 29. Stsko, J. Animtion in User Interfces: Principles nd Techniques. In User Interfce Softwre 93, pp. 81-101. 30. Terveen, L. nd Hill, W. Finding nd visulizing inter-site cln grphs. In Proc. CHI 98, pp. 448-455. 31. Thoms, B., nd Clder, P. Applying Crtoon Animtion Techniques to Grphicl User Interfces. In TOCHI 8(3):198 222 (2001). 32. Tversky, B., Buer Morrison, J. Bétrncourt, M. Animtion: cn it fcilitte? Int. Journl Humn-Computer Studies 57(4): 247-262 (2002). 33. Wre, C., Neufeld, E. nd Brtrm, L. Visulizing Cusl Reltions. In Proc. INFOVIZ 99, pp. 39-42. 34. Wickens, C. And Crswell, C. The proximity comptiility principle: its psychologicl foundtion nd relevnce to disply design. Humn Fctors 37, 473 494, 1995. 35. Woodring, J., nd Shen, H.-W. Chronovolumes: A Direct Rendering Technique for Visulizing Time-Vrying Dt. In Proceedings IEEE TVCG Workshop on Volume Grphics 2003, pp. 27-34. 36. Yntis, S. Multi-element visul trcking: Attention nd perceptul orgniztion. Cognitive Psych. 24, pp. 295-340, 1992.