6
Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy Context and Interaction in Zoomable User Interfaces Stuart Pook 1,2,4 Eric Lecolinet 1 Guy Vaysseix 2,3 Emmanuel Barillot 2,3 1 ´ Ecole Nationale Sup ´ erieure des T´ el´ ecommunications, CNRS URA 820, 46 rue Barrault, 75013 Paris, France 2 Infobiogen, 7 rue Guy Mˆ oquet – BP 8, 94801 Villejuif cedex, France 3 en´ ethon, 1 bis rue de l’Internationale, 91000 ´ Evry, France 4 stuart@acm org ABSTRACT Zoomable User Interfaces (ZUIs) are difficult to use on large in- formation spaces in part because they provide insufficient context. Even after a short period of navigation users no longer know where they are in the information space nor where to find the information they are looking for. We propose a temporary in-place context aid that helps users position themselves in ZUIs. This context layer is a transparent view of the context that is drawn over the users’ focus of attention. A second temporary in-place aid is proposed that can be used to view already visited regions of the information space. This history layer is an overlapping transparent layer that adds a his- tory mechanism to ZUIs. We complete these orientation aids with an additional window, a hierarchy tree, that shows users the struc- ture of the information space and their current position within it. Context layers show users their position, history layers show them how they got there, and hierarchy trees show what information is available and where it is. ZUIs, especially those that include these new orientation aids, are difficult to use with standard interaction techniques. They provide a large number of commands which must be used frequently and on a changing image. The mouse and its buttons cannot provide a rapid access to all these commands without new interaction techniques. We propose a new type of menu, a control menu, that facilitates the use of ZUIs and which we feel can also be useful in other types of applications. 1. INTRODUCTION Zoomable User Interfaces (ZUIs) are no longer new and their theo- retical bases [7] and practical applications [1] have been discussed in various papers. When using a ZUI, the users are presented with a view of an information space. The initial (or top level) view shows the entire information space at a scale which allows it to fit on the users’ screen. The users can then zoom (or enlarge) a section of the view that they find interesting. The graphical objects will get bigger until, as soon as there is enough room on the screen, they are replaced by other graphical objects showing the underlying in- formation in more detail. This is called semantic zooming. We developed a ZUI for browsing the HuGeMap [14] database of the Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. AVI 2000, Palermo, Italy. c 2000 ACM 1-58113-252-2/00/0005..$5.00 major genetic and physical maps of the human genome. This ZUI was used as a testbed for the new techniques described in this pa- per. For the purposes of this paper it is sufficient to know that the top level view in the ZUI shows 24 chromosomes, these chromo- somes each have three genetic maps, and these maps consist of a large number of genetic markers positionned along an axis. The first three images on the Colour Plate show what a user would see in zooming from the top level view (image 1), to a view of the bands and maps on chromosome 10 (image 2), and then to a view of the G´ en´ ethon map on this chromosome (image 3). ZUIs are used to present an information space to users. One of the reasons that users are unable to successfully use ZUIs is that the view of the information space shown to users, or the focus, does not always contain the context needed by users to position this focus in the information space. Once users are in this situation they are disoriented, sometimes to the point of not understanding what they are looking at and not knowing whether they should pan, zoom, or dezoom to find what they are looking for. It could be said that they are ‘lost in hyperspace.’ We present two new temporary aids that the system can display at the users’ command if they arrive in this situation. The first, a con- text layer, allows users to position the focus with respect to more global views of the information space. The second, a history layer, allows users to revisit the route they took through the information space to arrive at their present position. We also present a third aid, a hierarchy tree, that is always visible. This aid is a second window in the ZUI and shows at all times the structure of the information and the users’ current position within this structure. Users can also use this window to change their position in the information space. ZUIs are complex programs with complex user interfaces that are normally controlled using the mouse, buttons and standard menus. When navigating in a ZUI, users zoom, dezoom, scroll, create magic lenses, move and resize magic lenses, move and scrolls portal, etc. Some of these actions are executed very frequently. A user zooms until the desired scale has been obtained and scrolls until the object looked for has been found. The graphical objects used to present the information space change frequently; a zoom or dezoom can completely change the objects visible. Making these objects active and using them to control the ZUI is problematic because these ob- jects change and move too frequently. We propose a new type of menu, a control menu, that allows users to control ZUIs in a consis- tant and rapid fashion. A control menu can also include up to two scroll bars; a single interactor can thus control a complex operation. A ZUI incorporating these new techniques can be tested over the Web at the URL http://www.infobiogen.fr/services/zomit/. 2. CONTEXT LAYER In ZUIs users can only see one view at a time: the focus. Users often 227

Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

Context and Interaction in Zoomable User Interfaces

Stuart Pook1,2,4 Eric Lecolinet1 Guy Vaysseix2,3 Emmanuel Barillot2,3

1 Ecole Nationale Superieure des Telecommunications, CNRS URA 820, 46 rue Barrault, 75013 Paris, France2 Infobiogen, 7 rue Guy Moquet – BP 8, 94801 Villejuif cedex, France

3 Genethon, 1 bis rue de l’Internationale, 91000 Evry, France4 stuart@acm org

ABSTRACTZoomableUser Interfaces(ZUIs) are difficult to useon large in-formationspacesin partbecausethey provide insufficient context.Evenafterashortperiodof navigationusersnolongerknow wherethey arein theinformationspacenor whereto find theinformationthey arelooking for. We proposea temporaryin-placecontext aidthathelpsuserspositionthemselvesin ZUIs. Thiscontext layer is atransparentview of thecontext thatis drawnovertheusers’focusofattention.A secondtemporaryin-placeaid is proposedthatcanbeusedto view alreadyvisitedregionsof theinformationspace.Thishistory layer is an overlappingtransparentlayer that addsa his-tory mechanismto ZUIs. We completetheseorientationaidswithanadditionalwindow, a hierarchy tree, thatshows usersthestruc-ture of the informationspaceandtheir currentpositionwithin it.Context layersshow userstheir position,history layersshow themhow they got there,andhierarchy treesshow what informationisavailableandwhereit is.ZUIs, especiallythosethat includethesenew orientationaids,aredifficult to usewith standardinteractiontechniques.They providealargenumberof commandswhichmustbeusedfrequentlyandonachangingimage.Themouseandits buttonscannotprovidea rapidaccessto all thesecommandswithout new interactiontechniques.Weproposeanew typeof menu,acontrol menu, thatfacilitatestheuseof ZUIs andwhich we feel canalsobeusefulin othertypesofapplications.

1. INTRODUCTIONZoomableUserInterfaces(ZUIs)areno longernew andtheir theo-reticalbases[7] andpracticalapplications[1] have beendiscussedin variouspapers.Whenusinga ZUI, theusersarepresentedwith aview of aninformationspace.Theinitial (or top level) view showstheentireinformationspaceat a scalewhich allows it to fit on theusers’screen.The userscanthenzoom(or enlarge) a sectionofthe view that they find interesting.The graphicalobjectswill getbiggeruntil, assoonasthereis enoughroom on the screen,theyarereplacedby othergraphicalobjectsshowing theunderlyingin-formation in more detail. This is called semanticzooming. Wedevelopeda ZUI for browsing the HuGeMap[14] databaseof the

Permission to make digital or hard copies of all or part of this work forpersonal or classroom use is granted without fee provided that copiesare not made or distributed for profit or commercial advantage andthat copies bear this notice and the full citation on the first page. Tocopy otherwise, to republish, to post on servers or to redistribute tolists, requires prior specific permission and/or a fee.AVI 2000, Palermo, Italy.

c�

2000 ACM 1-58113-252-2/00/0005..$5.00

majorgeneticandphysicalmapsof thehumangenome.This ZUI

wasusedasa testbedfor thenew techniquesdescribedin this pa-per. For thepurposesof this paperit is sufficient to know that thetop level view in the ZUI shows 24 chromosomes,thesechromo-someseachhave threegeneticmaps,andthesemapsconsistof alarge numberof geneticmarkerspositionnedalongan axis. Thefirst threeimageson theColourPlateshow whata userwould seein zoomingfrom the top level view (image1), to a view of thebandsandmapson chromosome10 (image2), andthento a viewof theGenethonmapon thischromosome(image3).ZUIs are usedto presentan information spaceto users. One ofthereasonsthatusersareunableto successfullyuseZUIsis thattheview of theinformationspaceshown to users,or thefocus,doesnotalwayscontainthecontext neededby usersto positionthis focusinthe information space. Onceusersare in this situationthey aredisoriented,sometimesto thepointof notunderstandingwhattheyarelooking at andnot knowing whetherthey shouldpan,zoom,ordezoomto find whatthey arelooking for. It couldbesaidthattheyare‘lost in hyperspace.’We presenttwo new temporaryaidsthat thesystemcandisplayattheusers’commandif they arrive in thissituation.Thefirst, acon-text layer, allows usersto positionthe focuswith respectto moreglobalviewsof theinformationspace.Thesecond,ahistorylayer,allows usersto revisit theroutethey took throughthe informationspaceto arriveat theirpresentposition.Wealsopresentathird aid,ahierarchytree, thatis alwaysvisible. Thisaid is asecondwindowin the ZUI andshows at all timesthe structureof the informationandtheusers’currentpositionwithin thisstructure.Userscanalsousethiswindow to changetheir positionin theinformationspace.ZUIs arecomplex programswith complex userinterfacesthat arenormallycontrolledusingthemouse,buttonsandstandardmenus.Whennavigatingin aZUI, userszoom,dezoom,scroll,createmagiclenses,move andresizemagiclenses,move andscrollsportal,etc.Someof theseactionsareexecutedvery frequently. A userzoomsuntil thedesiredscalehasbeenobtainedandscrollsuntil theobjectlooked for hasbeenfound. The graphicalobjectsusedto presentthe informationspacechangefrequently;a zoomor dezoomcancompletelychangetheobjectsvisible. Making theseobjectsactiveandusingthemto controltheZUI is problematicbecausetheseob-jectschangeandmove too frequently. We proposea new type ofmenu,acontrol menu, thatallowsusersto controlZUIs in aconsis-tantandrapid fashion.A controlmenucanalsoincludeup to twoscrollbars;asingleinteractorcanthuscontrolacomplex operation.A ZUI incorporatingthesenew techniquescanbe testedover theWebat theURL http://www.infobiogen.fr/services/zomit/.

2. CONTEXT LAYERIn ZUIsuserscanonly seeoneview atatime: thefocus.Usersoften

227

Page 2: Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

cannotunderstandwherethe focusfits into the informationspacebecause� it only showsa limited regionof thisspaceandignoresthesurroundingcontext. Fisheye views [6] areoneway of integratingthe context and focus into a single view. Someof the informa-tion surroundingthefocusis shown following therule: thegreaterthedistanceof theinformationfrom thefocusthemoreinterestingit mustbefor it to beshown. TheDocumentLens[15] allows theuserto focusonapartof adocumentwhile keepingthesurroundingpages(thecontext) visible. Threedimensionalpliablesurfaces[2]andhyperbolicdisplays[12] relatethescreenareagivento showingnon-focusinformationto thedistanceit is from thefocus.Thefur-therinformationis from thefocusthelessinterestingit is assumedto beandthusthesmallerit is shown. Thesemethodsdeformtheinformationspaceby eliminating informationor by changingthesizeandpositionof therepresentionsof information.In contrastto theabovemethodsthatintegratethecontext andfocusby deformation,we integratethecontext andthefocusby drawingthecontext (thecontext layer)over thefocus.Thesetwo views aretransparentsothat they canbothbeenseenat thesametime. Userstudies[8] haveshown thattransparentviewsandoverlaysarewellacceptedby users.Whenusinga context layer two orthogonalcontrolsareavailable:the scaleof the view shown in the layer andthe relative levels oftransparency of thecontext layerandthe focal view. Thescaleofthecontext layercanbechosensothatthecontext layershowsanyview betweentheinitial view andthefocus.Userscanalsocontroltherelative transparenciesof thecontext layerandthefocus. Thisallows usersto concentrateon either the context or the focus bymakingthechosenview bedrawn solidandtheotherastransparentasdesired.Theinteractorusedto controlthescaleandtransparencyis describedin section5.Thecontext layer is positionedsothat theregion of this layer thatcorrespondsto thefocusis in thecentreof theZUI ’swindow. Thisregionis indicatedby arectangledrawn in thecentreof thewindowthat shows the sizeandpositionof the focusrelative to the viewcurrentlyvisible in thecontext layer.Thismethodof combiningthefocusandthecontext avoidsthede-formationof theothermethodsdescribedabove,whichoftenmakesimagesdifficult to recognizeandunderstand.Theadvantageof de-formation,thatmoreinformationcanberepresented,is maintainedby a very fluid andrapid control of the scaleof the context layer.Theuserscanquickly find thecontext thatthey needto identify thefocus. Changingthe scaleof the context layer changesthe posi-tion andoftentheform of theobjectsin thelayer. This movementhelpsusersunderstandwhich objectsbelongto the context layerandwhich to the focus. The context layer is temporaryandonlyshown duringthegestureusedto createandcontrol it. This avoidsoverloadingthescreenwith context informationor allocatingvalu-ablescreenreal-estateto context informationwhenit is notneeded.Theview of thefocusshown in image3 on theColourPlateshowsa view thattheusermight seeafterhaving navigatedfor a while inthe ZUI. This view doesnot containany cluesthat would let theuserknow whatmapor chromosomeis visible. In thissituationtheusercanaskthe ZUI to show the context layer. Thecontext layercontainsthe initial view or context (image1) andis drawn on topof thefocus(image3) giving image6. Thepositionof thefocusisindicatedon thecontext layerby agreenrectangle.In image6 thisrectanglecoversthe text ‘10q’ andtells the userthat the focusisshowing thechromosome10. In image7 theuserhaszoomedthecontext layer so that it shows the namesof the geneticmaps(thefocusneverchangesduringtheuseof thecontext layer).Thegreenrectangleshowing thepositionof thefocuscoversthenameof theGenethongeneticmap.Thefocusis thusshowing this map.Using

thecontext layertheuserhasbeenableto positionthefocusin twodifferentcontexts.Whenthe context layer is visible the usercanchooseto concen-trate on either the focus or the context by changingthe relativetransparency of thesetwo views. Therelative transparency canbecontinuouslyadjustedfrom a statewhereonly the focusis visibleto a statewhereonly the context is visible. Image8 is similar toimage7 except that the useris now contentratingon the contextandhasfadedout thefocus.Therectanglethatshows thepositionof thefocusis alwaysvisibleandtheusercanseemoreclearlythatthefocusis currentlyshowing theGenethongeneticmap.Transparentoverview layers[4] area differenttypeof displaythatdiffersfrom oursin that: (1) their layer is permanentwhile oursisatemporaryorientationaid; (2) thetransparency level of their layercannotbechangedby theuser;(3) their layeralwaysshowsthetoplevel view of theinformationspacewhile ourscanbeusedevenifthereis no top level view; and,(4) their layercanbeusedto moveor modify theobjectsin theinformationspacewhile our ZUI doesnot allow objectsto bemanipulatedin thisway.

3. HISTORY LAYERContext layersallow the user to find the answerto the question‘whereamI?’ Anotherimportantquestionis ‘how did I gethere?’ZUIsneeda historysothattheusercanreturnto previously visitedregionsof the informationspaceandseetheseregionsin relationto the focusandthe top level view. We proposea transparentandtemporaryhistory layer that allows the userto move interactivelyalong the path taken in the ZUI. As with the context layer, thehistory layer is temporaryso asnot to overloadthe screenand itdisappearswhenthe userreleasesthe mousebutton at the endofthegestureusedto createit.The path taken by the userin the ZUI is a sequenceof views ofthe informationspace. The first view is the initial (or top level)view (image1 on the Colour Plate)andthe view on the screenisthelastcurrentview (image5). All theviews (calledthehistoricalviews) seenby usersarestoredin this sequence.Images2 and3are historical views that the userhasseenin going from the toplevel view to thelastcurrentview. Thehistorylayer is drawn overthetop level view (giving image4) andcontainsaview thatcanbevariedby usersfrom thelastcurrentview, via theall thehistoricalviews in order, to the initial view (andbackagain). The usercanthusinteractively ‘go backin time’ andseetheevolutionof thecur-rentview in relationto thetop level view. Thecomparisonis donedirectly becausetransparentviews areusedso asto show the toplevel view andthe historicalview simultaneously. This compari-sonis alsoaidedby therectangles,drawn in two differentcolours,thatshow thesizesandpositions,relative to the top level view, ofthelastcurrentview andthehistoricalview. Theinteractorusedtocontrolthehistorylayeris describedin section5.As with the context layer, the relative transparency levels of thehistory layer andthe top level view canbe adjustedso userscanconcentrateon thehistory layeror on the top level view. The tworectanglesshowing the position of the currentview and the lastcurrentview are always drawn solid and are not affectedby thelevel of transparency.Thecurrentimplementationof historyoverlaysrequiresa top levelview. This maynot exist in systemswhereuserscandezoomfroma view of their own files to a view of, potentiallyandfor example,thewholeInternet.Thescaleof thetop level view couldalsobesodifferentfromthatwheretheuseriscurrentlyworkingthatusersareunableto seechangesto thepositionsof thecurrentandhistoricalviews. We arecurrently investigating whetherthe systemshould

228

Page 3: Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

choosea differentview to replacethe top level view andwhether(andhow) userscancontrolthis choice.

4. HIERARCHY TREESZUIs are often usedon hierarchicallystructureddatasets.Creat-ing an informationspacefor a ZUI requiresthe developerto pro-videgraphicalobjectsvisible in thetop level view of thespacethatsummarizethoseobjectsfound whenuserszoom. Theseobjectswill thensummarizethoseobjectsto befoundasuserscontinuetozoom.A hierarchy is thuscreated.Objectsin theinformationspacethatarenot accessiblevia objectsvisible in thetop level view willbehardto find by usersbecausethey will have no way of knowingwereto zoomto find them. The critical zonestechnique[10] canbeusedto automaticallyprovide thecluesthat thereareobjectstobefoundby furtherzooming.Thetechniquespresentedin theprevioussectionhelpusersto un-derstandthe informationspacefrom the top level view to thecur-rent position. However, usersdo not know what is in otherpartsof the informationspaceandin particularwhat is to be found byfurther zooming. The useris alsounableto usethe hierarchy tonavigatein the informationspace.Userslooking at the detailsofanobjectareunableto rapidly dezoomto seetheentireobjectandcannoteasilymove from a sub-objectto anothersub-objectof thesametype.ZUIs are threedimensionalspaces[7] and the scaleis the verti-cal dimension. The main view in a ZUI shows a horizontalslicethroughthe informationspace. We proposea secondorthogonalview, calleda hierarchy tree, that is a view of a flattenedverticalslice throughthe informationspace.The namesof thoseobjectsabove thecurrentpositionof theuserin thespaceareshown. Ob-jects also have types(an object can be a chromosome,a map, asequence,etc). If theinformationspaceis highly regular, theentirehierarchy of typescanbedisplayedin thehierarchy tree,otherwisejust thatpartof thehierarchy centredontheuser’scurrentposition.This hierarchy treewill thusshow usersthestructureof the infor-mationspace,whatinformationis available,wherethatinformationis locatedandhow to find it.

print quit

info

marker index

marker

chromosome2814

3915

41016

Arm

Chrband

Subchrband

data

mapCHLC v3Genethon sex−averagedWI/MIT RH

marker

sequence

AFMa337zh1

AFMb316yf1

AFMb014ye5

AFM183xh10

AFM343td9

AFMa311yc1

AFMa058yh9

AFM157xb12

AFMb321yf9

AFM025yb2

AFM144ye9

AFMb073xc1

AFM224zh10

AFMa054ze1

AFM144zg7

AFMb321zf1

AFMa044ta5

9, CHLC v3

AFM224zh10

9, Genethon sex−averagedAFMb073xc1

AFM224zh10

AFMa054ze1

AFM144zg79, Genethon sex−averaged

9, WI/MIT RH

WI−11585

AFM207vb8

WI−3203

NIB312

WI−12902

CHLC.GATA7D08

WI−9419

Figure1: hierarchy tree

Figure1 showspartof themainview of theinformationspaceplusthe hierarchy tree. In this regular informationspace,the chromo-somesarevisible on the top level view of the informationspace.The chromosomesconsistof arms,dataandmaps.This structureis displayedassoonasthe ZUI starts.The user’s currentpositionin thestructureis shown in magenta(or light gray);in thisexample

theuseris currentlylookingat the‘Genethon’mapon thechromo-some9. Thestructureindicatesthat if theusercontinuesto zoomon themap,it will bepossibleto find themarkers’ sequences.

4.1 NavigationThis techniqueoffers an efficient methodfor rapid navigation asuserscan use the hierarchy view to navigate in the informationspaceandto directly accessrelatedbut currentlyinvisible objects.If the userclicks on the string ‘chromosome’shown in Figure1,the ZUI will dezoomsufficiently to show all of chromosome9.Userscanalsoclick on thestring‘CHLC v3’ (thenameof themapnext to the‘Genethon’mapon thechromosome9) to move to mapCHLC v3. In thiscase,theZUI will show thesamerelativepositionon thenew map.

4.2 Similar techniquesExcentricLabeling [5] offers a way of identifying objectson thescreen. This techniquelabels,with ‘tool tips’ in the main view,thoseobjectslocatedaroundthecursor. Weproposeadifferent,nonintrusive way, of identifying theobjectcurrentlyunderthecursor.As usersmovethecursoracrossthemainview thehierarchy treeisupdatedto show thetypeandnameof theobjectunderthecursor.If thecursorleavesthewindow or is notonanobject,thehierarchyview indicatesthe lowest level in the hierarchy to which all theobjectsin themainview belong.Our methodof labellingremainssimilar to ‘tool tips’ in that the userdoesnot have to ask for theinformationto appear.ThegIBIS system[3] providesa globalview of thedisplayedIBISgraphstructurethat is in somewayssimilar to our hierarchy trees.Theirglobalview shows thesubjectof all thenodesin thenetworkorganisedby their primary link. As userszoomor pan the localview of thenetwork, theglobalview scrollsto show theusers’theircurrentpositionin thenetwork. Theglobalview canalsobeusedto navigatein thenetwork. Their globalview doeshowever differfrom our hierarchy treesin that it shows all the nodesin the net-work. This meansthat at any momentonly a small proportionofits contentsarevisible anda scroll bar mustbe usedto navigatewithin theglobalview. ZUIs typically containa very largenumberof objectsandsoaglobalview of all theobjectsin theinformationspacewouldbesobig asto beineffective. As discussedabove,ourhierarchy treesaredesignedto make useof thestructurepresentinmany ZUIs andthusshow the typesof theobjectsin the informa-tion spaceandthenamesof only thatobjectunderthecursorandits ancestorsin thehierarchy.

4.3 EvaluationTo aid the evaluationof the visualizationtechniquesproposedinthis paperwe createda modified versionof the ZUI without thehierarchy trees.Eightsubjects,chosenfrom ourcolleaguesat Info-biogen,weretaughthow to useourZUI. Thesubjectswereaskedtoanswer22 multiple choicequestions.A trainingsessionexplainedhow to answerthesequestionwith andwithout thehierarchy trees.This experimentaldesignallowedusto study, usingtwo interfacesotherwiseassimilar aspossible,whetherthehierarchy treeswereof assistance.Orderingeffectsweretaken into account.Half of thesubjectsan-sweredtheirfirst 11questionswith thehierarchy treesandtheotherhalf of thesubjectsansweredtheirfirst 11questionswithout thehi-erarchy trees.Half of thesubjectsweregiventhefirst 11 questionsin the list of 22 to do first while the otherhalf of the subjectsdidthesecondhalf of thequestionsfirst. Thisleadto four equallysizedgroupsof subjects.For eachsubjectwe calculatedthe time taken to answer11 ques-tions without the hierarchy treesdivided by the time taken to an-

229

Page 4: Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

swertheother11questionswith thehierarchy trees.A valuegreaterthanone� from this calculationwould meanthathaving thecontextaidswasan advantage.Themeanvaluewas1.58with a standarddeviation of 0.54. Thehigh standarddeviation wascausedby thelackof familiarity of someof thesubjectswith ZUIs. For thesepeo-plethetrainingsessionwasnotlongenoughandthey thusfoundthesecondsetof questionseasier. In generalhoweverthesubjectswerefasterwith thehierarchy treesandwerepositive in their commentsregardingtheseaids: in fact thosethat startedwith the hierarchytreeswerereluctantto continuetheexperimentwithout them.Theother new techniquespresentedin this paperare currently beingevaluated.

5. A NEW INTERACTORStandardmenussuchas pull-down, pop-upand marking menus[11] allow actionsto be selected.Pop-upandmarkingmenusarecontextual: they areactivatedat a locationchosenby users. Theprogramcan thus adaptthe contentsof the menuto the objectsfoundat thatpositionandapplytheactionchosento thoseobjects.Pop-upandmarkingmenusdo not allow the operationto be con-trolled onceit hasbeenchosenfrom the menu(a scroll operationcannotbecompletedusingjust a standardmenu)anddo not allowusersto supplytheparametersrequiredby theoperation.An oper-ationsuchasa font sizechangein a word processoroftenrequiresa dialogbox to provide thenew size.Theusersmustselecttheop-erationusingthemenuandthenconcentrateonasecondinteractor.Oncethenew sizehasbeenenteredthedialogbox disappearsandtheusersmustreconcentrateon themaintask.Panningin a ZUI requireseithera dedicatedmousebuttonso thatuserscandragtheimageor two scrollbars.It is notpossibleto panusinga standardmenuexceptwith difficult to usecommandssuchas‘move a little to the left.’ Zoomingis alsodifficult to performwith a standardmenuasuserswant to zoomuntil they reachtherequiredscale.Standardmenusonly allow usersto zoomby fixedstepsandthatonly by repeateduseof themenu.

5.1 Control menuWe proposea new form of pop-upmenu,called a control menu[13], that canintegrateup to two scroll barsor spin-boxes. With

Figure2: thecontrolmenuin our ZUI

this menuuserscanchoosean operationandcontrol it or supplyparameterswith asinglegesture.A controlmenuworkssomewhatlikeamarkingmenu.Thenoviceuserpressesthe mousebutton and waits (0.3 seconds)until themenuappearsunderthe cursorand thenmoves the cursorin thedirectionof the desiredoperation. The menudisappearsand theoperationstartsassoonasthe cursorhasbeenmoved the activa-tion distancefrom the centreof the menu. (We have empiricallychosenan activation distanceof five timesthe radiusof the circlein the centreof the menu.) The operationfinisheswhenthe userreleasesthe mousebutton. A userthat haslearnt the positionofthedesiredoperationdoesnothaveto wait to seethemenuandcanmove the cursorimmediately. The gestureis otherwisethe same.Thisuserhasthuslearntto beanexpertandis notdistractedby thenow unnecessarymenu.

5.2 A control menu integrating a scroll barA control menucan be usedto modify the scalein a ZUI. Thisoperationis an exampleof the integrationof a menuanda singlescroll bar. Figure3 shows themousemovementsduringtheuseof

� � � � � � � � � � � � � � �

� � � � � � � � � � � � � � �

� � � � � �

� � � � � �

� � � � � � � �

� � � � � � � � � � � �

� � � � � � � � � � � � � � � �

Figure3: zoomingwith acontrolmenu

a control menuto choosethe zoomoperationandto thencontrolthe zoom. The userpressesthe mousebutton and moves it theactivation distance(movement1) towardsthe right (as the zoomoperationis on the right of the control menuin Figure 2). Thisselectsthe operationandthe cursorchangeson the screen.Fromthis momentuntil themousebuttonis released,mousemovementsto theright (movements2 and4) zoomtheview andmovementstothe left (movement3) dezoomit. The feedbackis immediate:theview changesastheusermovesthemouse.Theuserreleasesthemousebuttononcethedesiredscalehasbeenobtained(a dezoomin thisexample).During the zoom operation,the usercan undo the currentzoomby moving the mouseup or down a large distance.The usercanthenconfirm the undoby releasingthe mousebutton or canundotheundoby moving themousebacktowardsthecentreof thedis-play. It thiscasetheuserstill hasthemousebuttonpressedandcancontinuethezoom.

5.3 A control menu integrating two scroll barsA controlmenucanalsobeusedto performtwo dimensionalpans.It thusreplacestwo scroll bars. The panoperationis selectedbypressingthe mousebutton andby moving the mouseup (the panoperationis at the top of thecontrolmenuin Figure2). Theviewis draggedby themouseduringtheoperation.It is not possibletoundothisoperationasit is possibleto undoa zoombecauseall themovementsof thecursoralreadyhavea meaning.

5.4 Control menus and simple commandsA controlmenucancontainsimplecommandsthatdonothaveanyparameters.Commandsthatcanbecancelledareexecutedassoonasthecursorhasbeenmovedtheactivationdistancefrom wherethemousebuttonwaspressed.As theuserstill hasthe mousebuttonpressed,a movementin the otherdirectionundoesthe operation.The undocanbe undoneby moving the cursorbackagain. Theuserreleasesthebuttonwhenthedesiredresulthasbeenobtained.

5.5 Marking versus control menusWhenan expert usesa markingmenuthe distancemoved duringthe selectionof an operationis not important. Only the form ofthegestureis importantandis analyzedoncetheuserreleasesthemousebuttonor stopsmoving thecursor(soasto seea menu).Acontrolmenuis differentin that thedistancemovedby thecursoris important.Thepositionof thecursoris constantlyanalyzedandassoonasthecursorhasbeenmovedtheactivationdistancefromwherethemousebuttonwaspressed,theoperationindicatedby thedirectionof themovementis started.

230

Page 5: Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

5.6 Control menus with context and historylayers

A controlmenuis usedto controlthehistoryandcontext layerspre-sentedin sections2 and3. Thecontext layerhastwo parameters:thescaleandthe relative transparency. Thescaleis controlledbyhorizontalmovementsof the cursorand the transparency by ver-tical movements. The control of the history layer is similar; thechoiceof currentview is controlledby horizontalmovementsofthemouseandthetransparency by verticalmovements.Thesepa-rametersarenot integral [9] (a diagonalmovementof the cursorhasnosimplemeaning)andwearecurrentlyinvestigatingwhetherthisposesproblemsfor users.

6. IMPLEMENTATIONTheideaspresentedin theprevioussectionswereimplementedandtestedin a client/server systemdesignedto beusedover theInter-net (Figure4). Theclient is a Java appletthatcommunicateswith

browser

classes

connectionTCP/IPpage

applet)

(C++)library

application

client

code

(Java

webserver

(C++)

serveruser’s machine

our machines

webhtml

Java

HuGeMapdata

serverbase

Figure4: client server implementation

a C++ server over a TCP/IP connection.Theclient communicatesthe user’s currentposition to the server and the server respondswith all theobjectsvisible at thepositionin theinformationspace.Theclientstockstheseobjectsandcanthusrespondrapidly to usercommands;only thearrival anddisplayof new objectsis delayedby the latency of thenetwork connectionto theserver. Theserverremainscloseto thedatabaseso that it canrapidly readthe largequantitiesof informationrequiredto constructtheobjectsto besentto theclient. Theclientandtheserver library thatit communicateswith arestandardanddo not needto bechangedto provide a sys-temto visualizeacompletelydifferentinformationspace.Only thedatabasecodeandthe codethat calls the server library, shown inbold text in Figure4, needto bechanged.

7. CONCLUSIONWe have attemptedto addressoneof themajorproblemsof ZUIs:thelack of context andthustheusers’difficultiesin understandingwherethey arein theinformationspaceandwherethey canfind theinformationthatthey arelookingfor. Wehavedevelopednew visu-alizationtechniquesthatprovideanew wayof combiningthefocusandcontext in ZUIs. Oneof our new context aids,hierarchy trees,is alwaysvisibleandprovidesaconstantreminderof theuser’spo-sition in theinformationspace.Theothercontext aids,context andhistory layers,areonly visible whenthe useris lost andrequiresorientationhelp.We will continueto comparethesequitedifferentaidsandtry to understandwhenandhow theusersfind themuseful.The interactioncomplexities that exist in ZUIs and especiallyinour ZUI with its extra context aidsleadusto developa new typeofmenuthat combinesthe selectionandcontrol of operations.Thisnew menuhasbeenintegratedinto our ZUI but we believe that itwill beusefulin othervisualizationprograms.Wehopethatthecombinationof ournew context aidsandournewinteractionmethodswill give usersbettercontrol over a betterin-terface.

This work wassupportedby the EuropeanUnion (contractBIO4-CT96-0346)andby theCNET (contract97 75421).

8. REFERENCES

[1] B. B. Bederson,J. D. Hollan, K. Perlin,J. Meyer, D. Bacon,andG. Furnas.Pad++: A zoomablegraphicalsketchpadforexploring alternateinterfacephysics.J. Vis. Lang. Comput.,7:3–32,Mar. 1996.

[2] M. S.T. Carpendale,D. J.Cowperthwaite,andF. D. Fracchia.3-dimensionalpliablesurfaces:For theeffective presentationof visualinformation.In UIST’95, pages217–226,PittsburghPA, USA, Nov. 1995.ACM Press.

[3] J. Conklin andM. L. Begeman.gIBIS: A hypertext tool forexploratory policy discussion.ACM Transactionson OfficeInformationSystems, 6(4):303–331,Oct. 1988.SelectedPa-persfrom CSCW’88.

[4] D. A. Cox,J.S.Chugh,C.Gutwin,andS.Greenberg.Theus-ability of transparentoverview layers.In CHI ’98 Summary,pages301–302,Los Angeles,CA USA, Apr. 1998. ACMPress.

[5] J.-D. Fekete and C. Plaisant.Excentric labeling: Dynamicneighborhoodlabeling for data visualization. In CHI ’99,pages512–519,Pittsburgh,PA, USA, May 1999.ACM Press.

[6] G. W. Furnas.Generalizedfisheye views. In CHI ’86, pages16–23,BostonMA, USA, Apr. 1986.ACM Press.

[7] G. W. FurnasandB. B. Bederson.Space-scalediagrams:un-derstandingmultiscaleinterfaces.In CHI ’95, pages234–241,DenverCO,USA, 1995.ACM Press.

[8] B. L. Harrison,G. Kurtenbach,andK. J. Vicente.An exper-imentalevaluationof transparentuserinterfacetools andin-formationcontent.In UIST’95, pages81–90,Pittsburgh PA,USA, Nov. 1995.ACM Press.

[9] R. J. K. JacobandL. E. Sibert.The perceptualstructureofmultidimensionalinput device selection.In CHI ’92, pages211–218,Monterey, CA USA, May 1992.ACM Press.

[10] S.Jul andG. W. Furnas.Critical zonesin desertfog: Aids tomultiscalenavigation.In UIST’98, pages97–106,SanFran-cisco,CA, USA, Nov. 1998.ACM Press.

[11] G. Kurtenbachand W. Buxton. User learning and perfor-mancewith marking menus.In CHI ’94, pages258–264,BostonMA, USA, Apr. 1994.ACM Press.

[12] J. Lamping and R. Rao. The hyperbolic browser: A fo-cus+context techniquefor visualizinglargehierarchies.J. Vis.Lang. Comput., 7(1):33–35,Mar. 1996.

[13] S. Pook,E. Lecolinet,G. Vaysseix,andE. Barillot. Controlmenus:executionandcontrol in a single interactor. In CHI2000, The Hague,The Netherlands,Apr. 2000.ACM Press.to appear.

[14] S. Pook,G. Vaysseix,andE. Barillot. Zomit: biologicaldatavisualizationand browsing. Bioinformatics, 14(9):807–814,Nov. 1998.

[15] G. G. Robertsonand J. D. Mackinlay. The documentlens.In UIST ’93, pages101–108,Atlanta GA, USA, Nov. 1993.ACM Press.

231

Page 6: Context and Interaction in Zoomable User Interfaces - pook.it · Published in the AVI 2000 Conference Proceedings (ACM Press), pp 227–231 & 317, 24–26 May 2000, Palermo, Italy

history layer)(relative to the

the historical viewposition and size of

the last current viewposition and size of

(1) the initial view of the 24 chromosomes (2) chromosomic bands and map names (3) markers on the axis of a map

(4) view with history layer

(6) view with (a top level) context layer (8) view concentrating on the context layer(7) view with (a zoomed) context layer

(initial view + historical view)

(5) last current view

the position and size of the focus (relative to the context layer)

317