Journal of Visual Languages and Computing (1996) 7 , 3 – 31
`
` Pad 11 : A Zoomable Graphical Sketchpad For Exploring
` Alternate Interface Physics
`
` B ENJAMIN B . B EDERSON , * J AMES D . H OLLAN , * K EN P ERLIN , † J ONATHAN
` M EYER , † D AVID B ACON † AND G EORGE F URNAS ‡
` * Computer Science Department , University of New Mexico , Albuquerque , NM 8 7 1 3 1 , U .S .A . ,
` † Media Research Laboratory , Computer Science Department , New York University , NY 1 0 0 0 3 ,
` U .S .A . , ‡ Bell Communications Research , 4 4 5 South Street , Morristown , NJ 0 7 9 6 0 , U .S .A .
`
` Received 7 March 1 9 9 5 and accepted 2 9 September 1 9 9 5
`
` We describe Pad 11 , a zoomable graphical sketchpad that we are exploring as an
` alternative to traditional window and icon-based interfaces . We discuss the motivation
` for Pad 11 , describe the implementation and present prototype applications . In
` addition , we introduce an informational physics strategy for interface design and
` briefly contrast it with current design strategies . We envision a rich world of dynamic
` persistent informational entities that operate according to multiple physics specifically
` designed to provide cognitively facile access and serve as the basis for the design of
` new computationally-based work materials .
` ÷ 1996 Academic Press Limited
`
` 1 . Introduction
` Imagine a computer screen made of a sheet of a miraculous new material that is
` stretchable like rubber but continues to display a crisp computer image , no matter
` what the sheet’s size . Imagine that this sheet is very elastic and can stretch orders of
` magnitude more than rubber . Further , imagine that vast quantities of information are
` represented on the sheet , organized at dif ferent places and sizes . Everything you do
` on the computer is on this sheet . To access a piece of information you just stretch to
` the right part and there it is .
` Imagine further that special lenses come with this sheet that let you look onto one
` part of the sheet while you have stretched another part . With these lenses , you can see
` and interact with many dif ferent pieces of data at the same time that would ordinarily
` be quite far apart . In addition , these lenses can filter the data in any way you would
` like , showing dif ferent representations of the same underlying data . The lenses can
` even filter out some of the data so that only relevant portions of the data appear .
` Imagine also new stretching mechanisms that provide alternatives to scaling objects
` purely geometrically . For example , instead of representing a page of text so small that
` it is unreadable , it might make more sense to present an abstraction of the text , per-
` haps so that just a title that is readable . Similarly , when stretching out a spreadsheet ,
`
` * ( bederson , hollan ) ê cs .umn .edu , † ( perlin , meyer bacon ) ê play .cs .nyu .edu , ‡ gwf ê bellcore .com
` URL : http : / / www .cs .unm .edu / pad 1 1
`
` 1045-926X / 96 / 010003 1 29 $18 . 00 / 0
`
` ÷ 1996 Academic Press Limited
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 001
`
`

`

` 4
`
` B . B . BEDERSON ET AL .
`
` Figure 1 . A sequence of views as we zoom into some data
`
` instead of showing huge numbers it might make more sense to show the compu-
` tations from which the numbers were derived or a history of interaction with them .
` The beginnings of an interface like this sheet exists today in a program we call
` Pad 11 . We don’t really stretch a huge rubber-like sheet , but we simulate it by
` zooming into the data . We use what we call portals to simulate lenses , and a notion we
` call semantic zooming to scale data in non-geometric ways . The user controls where
` they look on this vast data surface by panning and zooming . Portals are objects on the
` Pad 11 data surface that can see anywhere on the surface , as well as filter data to
` represent it dif ferently than it normally appears .
` Panning and zooming allow navigation through a large information space via direct
` manipulation . By tapping into people’s natural spatial abilities , we hope to increase
` users’ intuitive access to information . Conventional computer search techniques are
` also provided in Pad 11 , bridging traditional and new interface metaphors . Figure 1
` depicts a sequence of views as we pan and zoom into some data .
`
` 1 .1 . Motivation
` If interface designers are to move beyond windows , icons , menus and pointers to
` explore a larger space of interface possibilities , additional ways of thinking about
` interfaces that go beyond the desktop metaphor are required .
` There are myriad benefits associated with metaphor-based approaches , but they
` also orient designers to employ computation primarily to mimic mechanisms of older
` media . While there are important cognitive , cultural and engineering reasons to
` exploit earlier successful representations , this approach has the potential of under-
` utilizing the mechanisms of new media .
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 002
`
`

`

` PAD 11 : A ZOOMABLE GRAPHICAL SKETCHPAD
`
` 5
`
` For the last few years we have been exploring a dif ferent strategy [21] for interface
` design to help focus on novel mechanisms enabled by computation rather than on
` mimicking mechanisms of older media . Informally , the strategy consists of viewing
` interface design as the development of a physics of appearance and behavior for
` collections of informational objects .
` For example , an ef fective informational physics might arrange for an object’s
` representation to be a natural by-product of normal activity . This is similar to the
` physics of certain materials that evidence the wear associated with use . Such wear
` records a history of use and at times this can influence future use in positive ways .
` Used books crack open at frequently referenced places . It is common for recently
` consulted papers to be at the tops of piles on our desks . Usage dog-ears the corners
` and stains the surface of index cards and catalogs . All these wear marks provide
` representational cues as a natural product of doing , but the physics of materials limit
` what can be recorded and the ways it can influence future use .
` Following an informational physics strategy has led us to explore history-enriched
` digital objects [18 , 19] . Recording on objects (e . g . reports , forms , source-code , manual
` pages , email , spreadsheets) the interaction events that comprise their use makes it
` possible on future occasions , when the objects are used again , to display graphical
` abstractions of the accrued histories as parts of the objects themselves . For example ,
` we depict the copy history on source code . This allows a developer to see that a
` particular section of code has been copied and perhaps be led to correct a bug not
` only in the piece of code being viewed but also in the code from which it was derived .
` This informational physics strategy has also lead us to explore new physics for
` interacting with graphical data . As part of that exploration we have formed a research
` consortium to design a successor to Pad [25] . This new system , Pad 11 , serves as a
` substrate for exploration of novel interfaces for information visualization and
` browsing in complex , information-intensive domains . The system is being designed to
` operate on platforms ranging from high-end graphics workstations to PDAs (Personal
` Digital Assistants) and interactive set-top cable boxes . Here we describe the
` motivation behind the Pad 11 development , report the status of the current
` implementation and present initial prototype applications .
` Today , there is much more information available than we can access readily and
` ef fectively . The situation is further complicated by the fact that we are on the
` threshold of a vast increase in the availability of information because of new network
` and computational technologies . Paradoxically , while we continuously process
` massive amounts of perceptual data as we experience the world , we have perceptual
` access to very little of the information that resides within our computing systems or
` that is reachable via network connections . In addition , this information , unlike the
` world around is , is rarely presented in ways that reflect either its rich structure or
` dynamic character .
` We envision a much richer world of dynamic persistent informational entities that
` operate according to multiple physics specifically designed to provide cognitively
` facile access . These physics need to be designed to exploit semantic relationships
` explicit and implicit in information-intensive tasks and in our interaction with these
` new kinds of computationally-based work materials .
` One physics central to Pad 11 supports viewing information at multiple scales and
` attempts to tap into our natural spatial ways of thinking . We address the information
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 003
`
`

`

` 6
`
` B . B . BEDERSON ET AL .
`
` presentation problem of how to provide ef fective access to a large structure of
` information on a much smaller display . Furnas [15] explored degree of interest
` functions to determine the information visible at various distances from a central focal
` area . There is much to recommend the general approach of providing a central focus
` area of detail surrounded by a periphery that places the detail in a larger context .
` With Pad 11 we have moved beyond the simple binary choice of presenting or
` eliding particular information . We can also determine the scale of the information and ,
` perhaps most importantly , the details of how it is rendered can be based on various
` semantic and task considerations that we describe below . This provides semantic
` task-based filtering of information that is similar to the early work at MCC on
` lens-based filtering of a knowledge base using HITS [20] and the recent work of
` moveable filters at Xerox [4] [30] .
` The ability to make it easier and more intuitive to find specific information in large
` dataspaces is one of the central motivations behind Pad 11 . The traditional approach
` is to filter or recommend a subset of the data , hopefully producing a small enough
` dataset for the user to navigate ef fectively . Pad 11 is complementary to these filtering
` approaches in that it promises to provide a useful substrate to structure information .
`
` 2 . Description
` Pad 11 is a general-purpose substrate for creating and interacting with structured
` information based on a zoomable interface . It adds scale as a first class parameter to
` all items , as well as various mechanisms for navigating through a multiscale space . It
` has several ef ficiency mechanisms which help maintain interactive frame-rates with
` large and complicated graphical scenes .
` While Pad 11 is not an application itself , it directly supports creation and
` manipulation of multiscale graphical objects , and navigation through spaces of these
` objects . It is implemented as a widget in Tcl / Tk [24] (described in a later section)
` which provides an interpreted scripting language for creating zoomable applications .
` The standard objects that pad 11 supports are colored text , graphics , images , portals
` and hypertext markup language (HTML) . Standard input widgets (buttons , sliders ,
` etc . ) are supplied as extensions .
` One focus in the current implementation has been to provide smooth zooming
` within very large graphical datasets . The nature of the Pad 11 interface requires
` consistent high frame-rate interactions , even as the dataspace becomes large and the
` scene gets complicated . In many applications , speed is important , but not critical to
` functionality . In Pad 11 , however , the interface paradigm is inherently interactive .
` One important searching strategy is to visually explore the dataspace while zooming
` through it , so it is essential that interactive frame rates be maintained .
` A second focus has been to design Pad 11 to make it relatively easy for third
` parties to build applications using it . To that end , we have made a clear division
` between what we call the ‘substrate’ and applications . The substrate , written in
` C 11 , is part of every release and has a well-defined API . It has been written with
` care to ensure ef ficiency and generality . It is connected to a scripting language
` (currently Tcl , but we are exploring alternatives) that provides a fairly high-level
` interface to the complex graphics and interactions available . While the scripting
` language runs quite slowly , it is used as a glue language for creating interfaces and
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 004
`
`

`

` PAD 11 : A ZOOMABLE GRAPHICAL SKETCHPAD
`
` 7
`
` putting them together . The actual interaction and rendering is performed by the C 11
` substrate . This approach allows people to develop applications for Pad 11 while
` avoiding the complexities inherent in this type of system . (See the Implementation
` section for more information on this . )
`
` 2 .1 . PadDraw : A Sample Application
` PadDraw is a sample drawing application built on top of Pad 11 . It supports
` interactive drawing and manipulation of objects as well as loading of predefined or
` programmatically created objects . This application is written entirely in Tcl (the
` scripting language) and was used to produce all the figures depicted in this paper . The
` tools , such as navigation aids , hyperlinks and the outline browser , that we discuss
` later , are part of this application .
` The basic user interface for navigating in PadDraw uses a three button mouse . The
` left button is mode dependent and lets users select and move objects , draw graphical
` objects , follow hyperlinks , etc . The middle button zooms in and the right button
` zooms out . Zooming is always centered on the cursor , so moving the mouse while
` zooming lets the user dynamically control which point they are zooming around .
` PadDraw has a primitive Graphical User Interface (GUI) builder that is in progress .
` Among other things , it allows the creation of active objects . Active objects can
` animate the view to other locations (a kind of hyperlink) or move other objects
` around on the surface .
`
` 2 . 1 . 1 . Navigation
` Easily finding information on the Pad 11 surface is obviously very important since
` intuitive navigation through large dataspaces is one of its primary motivations .
` Pad 11 supports visual searching with direct manipulation panning and zooming in
` addition to traditional mechanisms , such as content-based search .
` Some applications animate the view to a certain piece of data . These animations
` interpolate in pan and zoom to bring the view to the specified location . If the end
` point is further than one screen width away from the starting point , the animation
` zooms out to a point midway between the starting and ending points , far enough out
` so that both points are visible . The animation then smoothly zooms in to the
` destination . This gives both a sense of context to the viewer as well as speeding up the
` animation since most of the panning is performed when zoomed out which covers
` much more ground than panning while zoomed in . See the section on Space-Scale
` Diagrams for more detail on the surprisingly complex topic of multiscale navigation .
` Content-based search mechanisms support search for text and object names .
` Entering text in a search menu results in a list of all of the objects that contain that
` text . Clicking on an element of this list produces an automatic animation to that
` object . The search also highlights objects on the data surface that match the search
` specification with special markers (currently a bright yellow outline) that remain
` visible no matter how far you zoom out . Even though the object may be so small as
` to be invisible , its marker will still be visible . This is a simple example of task-based
` semantic zooming . See Figure 2 for a depiction of the content-based search
` mechanism .
` We have also implemented visual bookmarks as another navigational aid . Users can
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 005
`
`

`

` 8
`
` B . B . BEDERSON ET AL .
`
` Figure 2 . The content-based search window lets users search for text and names , and then animate to any
` of those objects by clicking on the search entry
`
` remember places they have been , and maintain miniature views onto those places .
` Moving the mouse over one of these bookmark views places a marker in the main
` view to identify where it will take you (although the marker may be of f to the side
` and hence not visible) . Clicking on a view animates the main view to that place
` (Figure 3) .
`
` 2 .2 . Portals
` Portals are special items that provide views onto other areas of the Pad 11 surface , or
` even other surfaces . Each portal passes interaction events that occur within it to the
` place it is looking . Thus , you can pan and zoom within a portal . In fact , you can
` perform any kind of interaction through a portal . Portals can filter input events ,
` providing a mechanism for changing behavior of objects when viewed through a
` portal . Portals can also change the way objects are presented . When used in this
` fashion , we call them lenses (see below) .
` Portals can be used to replicate information ef ficiently , and also provide a method
` to bring physically separate data near each other . Figure 1 was created using several
` portals , each looking at approximately the same place at dif ferent magnifications .
` Portals can also be used to create indices . For example , creating a portal that looks
` onto a hyperlink allows the hyperlink to be followed by clicking on it within the
` portal , changing the main view . This however , may move the hyperlink of f the screen .
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 006
`
`

`

` PAD 11 : A ZOOMABLE GRAPHICAL SKETCHPAD
`
` 9
`
` Figure 3 . Visual bookmarks let users remember interesting places they have been by showing miniature
` views of those places . Clicking on one of the views animates the main view to the location
`
` We can solve this by making the portal (or any other object for that matter) sticky ,
` which is a method of keeping the portal from moving around as the user pans and
` zooms . Making an object sticky ef fectively lifts it of f the Pad 11 surface and sticks it
` to the monitor glass . Thus , clicking on a hyperlink through a sticky portal brings you
` to the link destination , but the portal index is not lost and can continue to be used .
`
` 2 .3 . Lenses
` Designing user interfaces is typically done at a low level , focusing on user interface
` components rather than on the task at hand . If the task is to enter a number , we
` should be able to place a generic number entry mechanism in the interface . However ,
` typically , once the specific number entry widget , such as a slider or dial , is decided
` on , it is fixed in the interface .
` We can use lenses to design interfaces at the level of specific tasks . For example ,
` we have designed a pair of number entry lenses for Pad 11 that can change a generic
` number entry mechanism into a slider or dial , as the user prefers . By default the
` generic number entry mechanism allows entering a number by typing . However ,
` dragging the slider lens over it changes the representation of the number from text to a
` slider , and now the mouse can be used to change the number . Another lens shows the
` data as a dial and lets you modify that with a mouse as well .
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 007
`
`

`

` 10
`
` B . B . BEDERSON ET AL .
`
` Figure 4 . Lenses that show textual data as scatter plots and bar charts
`
` More generally , lenses are objects that alter appearance and behavior of components
` seen through them . They can be dragged around the Pad 11 surface examining
` existing data . For example , data might normally be depicted by columns of numbers .
` However , looking at the same data through a lens could show that data as a scatter
` plot , or a bar chart (see Figure 4) .
` Lenses such as these support multiple representations so that information can be
` displayed in ways most ef fective for the task at hand . They make the notion of
` multiple representations of the same underlying data more intuitive and can be used to
` show linkages between the representations . For example , if the slider lens only
` partially covers the text number entry widge , then modifying the underlying number
` with either mechanism (text or mouse) modifies both . So typing in the text entry
` moves the slider , and vice versa .
`
` 2 .4 . Semantic Zooming
` Once we make zooming a standard part of the interface , many parts of the interface
` need to be reevaluated . For example , we can use semantic zooming to change the way
` things look depending on their size . As we mentioned , zooming provides a natural
` mechanism for representing abstractions of objects . It is natural to see extra details of
` an object when zoomed in and viewing it up close . When zoomed out , instead of
` simply seeing a scaled down version of the object , it is potentially more ef fective to
` see a dif ferent representation of it .
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 008
`
`

`

` PAD 11 : A ZOOMABLE GRAPHICAL SKETCHPAD
`
` 11
`
` For example , we implemented a digital clock that at normal size shows the hours
` and minutes . When zooming in , instead of making the text very large , it shows the
` seconds , and then eventually the date as well . Similarly , zooming out shows just the
` hour . An analog clock (implemented as a lens that can be positioned over a digital
` clock) is similar—it does not show the second hand or the minute markings when
` zoomed out .
` Semantic zooming can take an even more active role in the interface . It can be used
` as a primary mechanism for retrieving data . We have built prototype tools for
` accessing system usage including information about the print queue , the system load
` and the users on the machine . They are depicted as small objects with labels . Zooming
` into each of them starts a process which gathers the appropriate information and
` shows it in the now larger object . Zooming out makes the information disappear and
` the data-gathering process inactive .
`
` 3 . Visualizations
` We are exploring several dif ferent types of interactive visualizations within Pad 11 ,
` some of which are described briefly here . Each takes advantage of the variable
` resolution available for both representation and interaction .
` Layout of graphical objects within a multi-resolution space is an interesting
` problem , and is quite dif ferent than traditional fixed-resolution layout . Deciding how
` to visually represent an arbitrary graph on a non-zoomable surface is extremely
` dif ficult . Often it is impossible to position all objects near logically related objects . In
` addition , representing the links between objects often requires overlapping or crossing
` edges . Even laying out a tree is dif ficult because , generally speaking , there are an
` exponential number of children that will not fit in a fixed size space .
` Traditional layout techniques use sophisticated iterative , adaptive algorithms for
` laying out general graphs , and still result in graphs that are hard to understand . Large
` trees are often represented hierarchically with one sub-tree depicted by a single box
` that references another tree .
` Using an interactive zoomable surface , however , allows very dif ferent methods of
` visually representing large data structures . The fact that there is always more room to
` put information ‘between the cracks’ gives many more options . Pad 11 is particularly
` well suited to visualizing hierarchical data because information that is deeper in the
` hierarchy can be made smaller . Accessing this information is accomplished by
` zooming .
`
` 3 .1 . Hypertext Markup Language (HTML)
` In traditional window-based systems , there is no graphical depiction of the
` relationship among windows even when there is a strong semantic relationship . For
` example , in many hypertext systems , clicking on a hyperlink brings up a new window
` with the linked text (or alternatively replaces the contents of the existing window) .
` While there is an important relationship between these windows (parent and child) ,
` this relationship is not represented .
` We are experimenting with multiscale layouts of hypertext document traversals
` where the parent – child relationships between links is represented visually . The layout
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 009
`
`

`

` 12
`
` B . B . BEDERSON ET AL .
`
` represents a tree that is distorted so that the page that has the focus (i . e . the one being
` looked at) is quite large . As nodes get further away from the focus , they get smaller .
` The distortion is controllable with a pop-up window . This is an example of a
` graphical fisheye view [15] . As links are followed , they are added to the tree and
` become the current focus . The view is animated so that the new node is centered and
` large enough to read .
` Pad 11 reads hypertext written in the Hypertext Markup Language (HTML) , the
` language used to describe hypertext documents used by WWW browsers such as
` Mosaic and Netscape . Pad 11 also can follow links across the internet . Figure 5
` shows a snapshot where several hypertext links have been followed . Two views show
` the same tree focused on dif ferent nodes . The Pad 11 user interface for accessing
` hypertext is similar to traditional systems , but zooming mechanisms are employed .
` There are also special mechanisms to return to an object’s parent .
` An alternative layout technique (not shown here) uses a camera with a special
` zoomed in view of the tree . The idea is to give an overview of the tree in one view
` while allowing individual pages to be read in another view . This gives both a global
` context and local detail simultaneously . The camera can be dragged around the
` overview , and the detail view is updated to see what the camera is pointing at .
` Clicking on a page causes the camera to animate to that page and , when a new page is
` brought in , the camera centers its view on it .
` This layout problem is challenging because the underlying data can be an arbitrary
` cyclic graph . Any graph can be viewed as a hierarchy by taking a single node and
` calling it the root node . Imagine taking that node and shaking the graph out . Its
` neighbors become children , and the children’s neighbors become grandchildren , etc .
` We use this approach to display HTML documents where the order of the links that
` are followed describe the particular hierarchy imposed on the data . When a cycle is
` encountered (i . e . a link is followed to a page that is already loaded) , the user is
` brought to the original copy of the page that was loaded , and the focus is put upon it .
`
` 3 .2 . Directory Browser
` We built a zoomable directory browser as another exploration of multiscale layout .
` The directory browser provides a graphical interface for accessing the directory
` structure of a filesystem (see Figure 6) . Each directory is represented by a folder icon
` and files are represented by solid squares colored by file type . Both directories and
` files show their filenames as labels when the user is suf ficiently close to be able to read
` them . Each directory has all of its subdirectories and files organized alphabetically
` inside it . Searching through the directory structure can be done by zooming in and
` out of the directory tree , or by using the content based search mechanisms described
` above . Zooming into a file automatically loads its text or image inside the colored
` square and it can then be annotated . At any particular view , typically three levels of
` the hierarchy are visible .
`
` 3 . 2 . 1 . Timeline
` Scale can be used to convey temporal information . Events which take place over a
` long period of time use a large scale and brief events are shown at a small scale . We
` used this notion to visualize some of the history of computing and user interfaces .
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 010
`
`

`

` P
`
`AD 11 : A ZOOMABLE GRAPHICAL SKETCHPAD
`
` 1
`3
`
` Figure 5 . Many dif ferent HTML documents loaded in Pad 11 . Their layout implicitly shows the history of the user’s interaction . The two views show the
` same tree focused on dif ferent nodes
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 011
`
`

`

` 14
`
` B . B . BEDERSON ET AL .
`
` Figure 6 . A view of our file system
`
` The timeline visualization shows decades as large numbers . Zooming in on a decade
` reveals the years within that decade . Further zooming on a particular year shows
` events which took place during that year . Figure 7 shows a sequence of snapshots as
` the view is zoomed in .
`
` 3 . 2 . 2 . Oval Document Layout
` Since objects on the Pad 11 surface reside at absolute locations , the relative positions
` of objects can be used to encode information . Thus , with the Pad 11 HTML
` browser , position is used to encode the order of a user’s traversal of a hypertext
` document . In the Oval Document Layout , position is used to reinforce the narrative
` structure of documents (such as guided tours) in which the reader follows a sequence
` of steps which eventually lead back to the starting point (Figure 8) .
` In this layout , the first page is placed at the bottom edge of an arc . Subsequent
` pages are placed around the edge of the arc and are drawn at a scale which reflects
` their position in the tour—middle pages are shown distant and small , whereas start
` and end pages appear larger and closer to the user .
` Navigation buttons at the bottom edge of each page are used to advance through
` the document . Clicking on a page when it is distant causes Pad 11 to pan and zoom
` so that the page fills most of the screen .
` One advantage of this layout is that as the system animates from one page to the
` next , the user can infer progress through the document by the direction of the
` animation : near the start , pages move down and to the left ; towards the end , pages
` move up and to the right .
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 012
`
`

`

` PAD 11 : A ZOOMABLE GRAPHICAL SKETCHPAD
`
` 15
`
` Figure 7 . A sequence that views the history of computers and interfaces
`
` The layout is also ef fective for non-linear access to pages within the document .
` Zooming out a small distance reveals the whole document , and clicking on a page
` within the document takes you to that page .
` Hotwords and hyperlink buttons in an oval document can be shown with arrows
` which point towards the destination object . Clicking on the hyperlink animates
`indicated by the arrow , reducing the
` the Pad 11 surface
`in the direction
`
`Meta Platforms, Inc.
`Exhibit 1017
`Page 013
`
`

`

` 16
`
` B . B . BEDERSON ET AL .
`
` Figure 7 . Continued
`
` sense of disorientation that many users experience when navigating hypertext docu-
` ments .
` The Oval document view illustrates that a pan / zoom coordinate system can lead to
` interesting new ways of laying out even traditional page based material . However , the
` layout has several drawbacks . It is only practical for relatively short documents and
` for documents which adopt a circular narrative structure .
`
` 4 . Space-Scale Diagrams
` In an ef fort to understand multiscale spaces better , we have developed an analytical
` tool for describing them which we call space - scale diagrams . By representing the
` spatial structure of an information world at all its dif ferent magnifications simul-
` taneously , these diagrams allow us to visualize various aspects of zoomable interfaces
` and analyze their properties . We discuss these diagrams briefly here . They are
` discussed in more detail in [16] .
` While Pad 11 provides panning and zooming interactions over a two dimensional
` surface , the basic ideas of a space-scale diagram are most easily illustrated in one
` dimension . This would typically be a slice through a two-dimensional world .
` The basic one-dimensional diagram concept is illustrated in Figure 9 . This diagram
` shows six points that are copied over and over at all possible magnifications . These
` copies are stacked up systematically to create a two dimensional diagram whose
` horizontal axes represents the original spatial dimension and whose vertical axis
` represents the degree of magnification (or scale) . Because the diagram shows an
` infinite number of magnifications , each point is re