Patent Application
20110199318
The design of an effective user interface poses many challenges. One challenge is how to provide a user with an optimal amount of visual information or functionality, given the space limitations of a display and the needs of a particular user. This challenge can be especially acute for devices with small displays, such as smartphones or other mobile computing devices. This is because there is often more information available to a user performing a particular activity (e.g., browsing for audio or video files in a library of files) than can fit on the display. A user can easily become lost unless careful attention is paid to how information is presented on the limited amount of available display space.
Whatever the benefits of previous techniques, they do not have the advantages of the techniques and tools presented below.
Techniques and tools described herein relate to presenting visual information to users on computer displays, and more particularly relate to presenting visual information on small displays, such as those found on smartphones and other mobile computing devices. In particular, techniques and tools are described that relate to different aspects of a user interface in which layers of visual information that relate to one another move at different rates. In one implementation, the layers move in the same direction at rates that are a function of the length of the layer (which can also be referred to as the width of the layer, such as when the layer is oriented horizontally), in response to user input. For example, a graphical user interface (GUI) comprises a background layer, a title layer, and a content layer. A user navigating through the content layer in a particular direction (e.g., from left to right in a horizontal dimension) also causes movement in the same direction in one or more of the background layer and the title layer. The amount and nature of the movement in the layers depends on one or more factors, such as the data in the layers, or the relative distance between corresponding lock points in the layers. For example, if a content layer is longer than a background layer, the content layer moves faster than the background layer. The movement rate of the content layer can match with a movement rate of a gesture on a touchscreen, to give the user a sense of directly manipulating the content on the touchscreen.
In one aspect, a UI system displays a GUI comprising at least first and second layers. A first portion of visual information in the first layer is within a display area of a touchscreen, and the layers are substantially parallel to each other. The UI system receives user input corresponding to a gesture on the touchscreen. The UI system calculates a first movement based at least in part on the user input. The first movement comprises a movement of the first layer from an initial first-layer position in which a second portion of visual information in the first layer is outside the display area to a current first-layer position in which the second portion of visual information in the first layer is within the display area. The first movement is in a first direction at a first movement rate. The UI system calculates a second movement based at least in part on the user input. The second movement comprises a movement of visual information in the second layer from an initial second-layer position to a current second-layer position. The second movement is in the first direction at a second movement rate. The second movement rate differs from the first movement rate. For example, the first layer is a content layer and the second layer (e.g., a section header layer or title layer) is a layer above the content layer in the display area.
In another aspect, a GUI displayed on a touchscreen of a computing device comprises at least a first layer (e.g., a content layer) and a second layer (e.g., a section header layer above the content layer). The second layer comprises a first portion (e.g., a first section header) and a second portion (e.g., a second section header). The computing device receives user input via the touchscreen indicating movement in the first layer. The computing device calculates a first movement based at least in part on the user input. The first movement comprises a movement of the first layer at a first movement rate (e.g., a movement rate substantially equal to the movement rate of a gesture made by a user's finger or other object on the touchscreen). The computing device calculates a second movement based at least in part on the first movement. The second movement comprises a movement of the first portion of the second layer. The second movement is substantially parallel to the first movement, and the second movement is at a second movement rate. The computing device calculates a third movement based at least in part on the user input. The third movement comprises a movement of the first layer at a third movement rate. The computing device calculates a fourth movement based at least in part on the third movement. The fourth movement comprises a movement of the second portion of the second layer. The fourth movement is substantially parallel to the third movement, and the fourth movement is at a fourth movement rate. The second movement rate differs from the fourth movement rate and the first movement rate. For example, a first section header is associated with a first set of one or more content panes in a content layer, and a second section header is associated with a second set of one or more content panes in the content layer. Movement rates in the section headers can differ. For example, the movement rates can be based on the widths of the section headers, associated content panes, and/or the width of the display area.
In another aspect, a UI system displays a GUI on a touchscreen operable to receive user input via gestures on the touchscreen. The GUI comprises a content layer, a section header layer, a title layer and a background layer. Each layer comprises at least first and second portions of visual information in the respective layer. The first portion of visual information in the respective layer is in a display area of the touchscreen, and the second portion of visual information in the respective layer is outside of the display area. The UI system receives user input corresponding to a gesture on the touchscreen. The UI system calculates a content-layer movement based at least in part on the user input. The content-layer movement comprises a movement of the content layer from (a) an initial content-layer position in which the second portion of visual information in the content layer is outside the display area, to (b) a current content-layer position in which the second portion of visual information in the content layer is within the display area. The UI system animates the movement from (a) to (b). The content-layer movement is in a first direction at a content-layer movement rate. The UI system calculates a section-header-layer movement based at least in part on the user input. The section-header-layer movement comprises a movement of the section header layer from (c) an initial section-header-layer position in which the second portion of visual information in the section header layer is outside the display area, to (d) a current section-header-layer position in which the second portion of visual information in the section header layer is within the display area. The UI system animates the movement from (c) to (d). The section-header-layer movement is in the first direction at a section-header-layer movement rate. The UI system calculates a title-layer movement based at least in part on the user input. The title-layer movement comprises a movement of the title layer from (e) an initial title-layer position in which the second portion of visual information in the title layer is outside the display area, to (f) a current title-layer position in which the second portion of visual information in the title layer is within the display area. The UI system animates the movement from (e) to (f). The title-layer movement is in the first direction at a title-layer movement rate. The UI system calculates a background-layer movement based at least in part on the user input. The background-layer movement comprises a movement of the background layer from (g) an initial background-layer position in which the second portion of visual information in the background layer is outside the display area, to (h) a current background-layer position in which the second portion of visual information in the background layer is within the display area. The UI system animates the movement from (g) to (h). The background-layer movement is in the first direction at a background-layer movement rate. The content-layer movement rate is equal to the section-header-layer movement rate, and the title-layer movement rate differs from the content-layer movement rate and from the section-header-layer movement rate. The content layer, the section header layer and the title layer are substantially parallel to each other and non-overlapping with respect to each other. Each of the content layer, the section header layer and the title layer overlaps the background layer.
Layers can include lock points. For example, a content layer that includes content panes can have lock points determined (e.g., automatically) based on the number and/or positions of the content panes. Lock points can be set in other ways. For example, lock points can be based on some aspect of a previous state of a layer, such as an exit position of a user interface element in the first layer. Lock points in a second layer (e.g., a background layer, title layer, or section header layer) can have second-layer lock points corresponding to the first layer lock points. Movement rates can be based on distances between lock points. For example, a movement rate can be proportional to a difference between the distance between second-layer lock points and a distance between first-layer lock points (e.g., content-layer lock points) corresponding to the second-layer lock points.
Locking animations can be performed. For example, a locking animation comprises determining whether a threshold number of pixels in a user interface element in a layer are inside the display area and, based on that determination, animating a transition in the layer from a current position to a post-locking-animation position such that the user interface element is visible in the display area. As another example, a locking animation comprises selecting a lock point and animating a transition in a layer from a current position to a post-locking-animation position in which the selected lock point is aligned with a part of the display area. Other transitions can be animated as well, such as a transition in a second layer from a current second-layer position to a second-layer post-locking-animation position that corresponds to the first-layer post-locking-animation position (e.g., a second-layer position in which a second-layer lock point is aligned with a selected first-layer lock point. As another example, a locking animation comprises selecting a first-layer lock point associated with a user interface element (e.g., a content pane) in a first layer (e.g., a content layer), and animating a transition in the first layer from a current first-layer position to a first-layer post-locking-animation position in which the selected first-layer lock point is aligned with a part of the display area and such that the user interface element is visible in the display area. Locking animations can be performed based on user gestures. For example, lock points can be selected based on a velocity of a flick gesture or on a position of a tap gesture.
Wrapping animations can be performed. For example, where two layers each comprise a beginning and an end, and the ends of the layers are displayed in a current position, performing a wrapping animation comprises animating a transition in the first layer from the current first-layer position to a post-wrapping-animation first-layer position in which the beginning of the first layer is displayed, and animating a transition in the second layer from the current second-layer position to a post-wrapping-animation second-layer position in which the beginning of the second layer is displayed. Animating the transitions can comprise moving visual information at a wrapping movement rate that differs from other movement rates.
Movement in the layers (e.g., movement rate, direction, and current position) can be calculated based on user input. For example, a current position can be based on an initial position, and a direction and velocity of a gesture. Movements in layers also can be calculated based on positions of other layers. For example, a current second-layer position can be calculated based on a calculated current first-layer position, such as by calculating the current second-layer position based on a location of a second-layer lock point that corresponds to a first-layer lock point.
Gestures can include, for example, pan, drag, flick, and tap interactions. A flick can be detected by determining whether a rate of movement of a gesture exceeds a threshold. Gestures that indicate direction can cause movement in the indicated direction or in some other direction. For example, a gesture in a horizontal direction can cause movement in a vertical or horizontal direction.
Movement rates can be determined in different ways. For example, a movement rate for a layer can be calculated based on a motion ratio for the layer, where the motion ratio is the width of the layer divided by a maximum width of another layer. As another example, a movement rate can be based on a difference between a length of the first layer and a length of the second layer.
Additional layers can be added. For example, the graphical user interface can include a third layer (or more layers) substantially parallel to the first and second layers. Movement rates in layers can be proportional to differences between lengths the respective layers. In one implementation, a section header layer is above a content layer in the display area, a title layer is above the section header layer in the display area, and the content layer, the section header layer and the title layer overlap a background layer.
The foregoing and other objects, features, and advantages of the invention will become more apparent from the following detailed description, which proceeds with reference to the accompanying figures.
Techniques and tools are described that relate to different aspects of a user interface in which layers of visual information that relate to one another move at different rates. In one implementation, the layers move in the same direction at rates that are a function of the length of the layer, in response to user input. For example, a graphical user interface (GUI) comprises a background layer, a title layer, and a content layer. A user navigating through the content layer in a particular direction (e.g., from left to right in a horizontal dimension) also causes movement in the same direction in the background layer and/or the title layer. The amount and nature of the movement depends on one or more factors, such as the relative length of the layers, or the relative distance between corresponding lock points. For example, if the content layer is longer (in terms of pixels) than the background layer, the content layer moves faster (on a pixel basis) than the background layer.
Various alternatives to the implementations described herein are possible. For example, techniques described with reference to flowchart diagrams can be altered by changing the ordering of stages shown in the flowcharts, by repeating or omitting certain stages, etc. As another example, systems described with reference to system diagrams can be altered by changing the ordering of processing stages shown in the diagrams, by repeating or omitting certain stages, etc. As another example, user interfaces described with reference to diagrams can be altered by changing the content or arrangement of user interface features shown in the diagrams, by omitting certain features, etc. As another example, although some implementations are described with reference to specific devices and user input mechanisms (e.g., mobile devices with a touchscreen interface), described techniques and tools can be used with other devices and/or user input mechanisms.
The various techniques and tools can be used in combination or independently. Different embodiments implement one or more of the described techniques and tools.
The design of effective user interfaces poses many challenges. One challenge is how to provide a user with an optimal amount of visual information or functionality, given the space limitations of displays. This challenge can be especially acute for devices with small displays, such as smartphones or other mobile computing devices. This is because there is often more information or functionality available than can fit on the display.
By putting layers of data on top of each other and allowing them to move in different ways, a graphical user interface can provide a context for information that a user is viewing, even if there is more information relevant to the user's current activity that is not visible on the display. For example, a content layer can move independently to at least some extent, allowing a user to move different parts of the content layer into view and out of view, while some portion of another layer associated with the content layer remains visible, even if that other layer moves to a lesser extent than the content layer.
Described techniques and tools relate to separating information (e.g., visual information, functional information and metadata) in a user interface (UI), such as a graphical user interface (GUI), into layers (e.g., parallel layers or layers that are at least substantially parallel), and moving such layers in different ways (e.g., at different speeds). For example, described embodiments involve a multi-layer UI system that presents UI layers that move at different speeds relative to one another. The rate of movement in each layer can depend on several factors, including the amount of data to be presented visually (e.g., text or graphics) in the layer, or the relative distance between corresponding lock points, which are described in more detail below. The amount of data to be presented visually in a layer can measured by, for example, determining the length as measured in a horizontal direction of the data as rendered on a display or as laid out for possible rendering on the display. Length can be measured in pixels or by some other suitable measure (e.g., the number of characters in a string of text). A layer with a larger amount of data and moving at a faster rate can advance by a number of pixels that is greater than a layer with a smaller amount of data moving at a slower rate. Layer movement rates can be determined in different ways. For example, movement rates in slower layers can be derived from movement rates in faster layers, or vice versa. Or, layer movement rates can be determined independently of one another.
The movement in various layers of the UI typically depends to some extent on user interaction. For example, a user that wishes to navigate from one part of a layer to another provides user input to indicate a desired direction of movement. The user input can then cause movement in one or more layers on a display. In some embodiments, a user causes movement of a layer visible in a display area of a device by interacting with a touchscreen. The interaction can include, for example, contacting the touchscreen with a fingertip, stylus or other object and moving it (e.g., with a flicking or sweeping motion) across the surface of the touchscreen to cause a layer to move in a desired direction. Alternatively, a user can interact with a layer in some other way, such as by pressing buttons (e.g., directional buttons) on a keypad or keyboard, moving a trackball, pointing and clicking with a mouse, making a voice command, etc.
When user interaction causes movement in layers, the movement of the layers is a typically a function of the length of the layers and the size, movement rate and direction of the motion made by the user. For example, a leftward flicking motion on a touchscreen produces a leftward movement of the layers relative to the display area. The layers also can be arranged relative to one another such that the layers can move at different rates while providing a user with visual context. For example, a section header (e.g., a text string such as “History”) can span visible and off-screen content (e.g., an image representing a currently-playing media file and a list of recently-played media) in a content layer, moving at a different rate than the content layer but providing context for the content.
Depending on implementation and/or user preferences, user input can be interpreted in different ways to produce different kinds of movement in the layers. For example, a multi-layer UI system can interpret any movement to the left or right, even diagonal movements extending well above or below the horizontal plane, as a valid leftward or rightward motion of a layer, or the system can require more precise movements. As another example, a multi-layer UI system can require that a user interact with a part of a touchscreen corresponding to the display area occupied by a layer before moving that layer, or the system can allow interaction with other parts of the touchscreen to cause movement in a layer. As another example, a user can use an upward or downward motion to scroll up or down in a part of the content layer that does not appear on the display all at once, such as a list of elements, and such upward/downward motion can even be combined with left/right motion for diagonal movement effects.
The actual amount and direction of the user's motion that is necessary to produce particular movements in the layers can vary depending on implementation or user preferences. For example, a multi-layer UI system can include a default setting that is used to calculate the amount of motion in a layer (e.g., in terms of pixels) as a function of the size or movement rate (or velocity) of a user movement. As another example, a user can adjust a touchscreen sensitivity control, such that the same motion of a fingertip or stylus on a touchscreen will produce smaller or larger movements of the layers, depending on the setting of the control.
In some embodiments, layers include lock points. Lock points in layers indicate corresponding positions with which a display area of a device will be aligned. For example, when a user navigates to a position on a content layer such that the left edge of the display area is at a left-edge lock point “A,” the left edge of display area will also be aligned at a corresponding left-edge lock point “A” in each of the other layers. Lock points also can indicate alignment of a right edge of a display area (right-edge lock points), or other types of alignment (e.g., center lock points). Typically, corresponding lock points in each layer are positioned to account for the fact that layers will move at different speeds. For example, if the distance between a first lock point and a second lock point in a content layer is twice as great as the distance between corresponding first and second lock points in a background layer, the background layer moves at half the rate of the content layer when transitioning between the two lock points.
In the example shown in
The lock points shown in
In addition to indicating corresponding positions in layers, lock points can exhibit other behavior. For example, lock points can indicate positions in a content layer to which the layer will move when the part of the layer corresponding to the lock point comes into view on the display. This can be useful, for example, when an image, list or other content element comes partially into view near the left or right edge of the display area—the content layer can automatically bring the content element completely into view by moving the layer such that an edge of the display area aligns with an appropriate lock point. A lock animation can be performed at the end of a navigation event, such as a flick or pan gesture, to align the layers with a particular lock point. In the event that a navigation event produces a user-generated movement that does not align precisely with a lock point, a lock animation can be used to align the layers. As an example, a lock animation can be performed at the end of a navigation event that causes movement of a content layer to a position between two content panes (e.g., where portions of two content panes are visible in a display area). A multi-layer UI system can check which content pane occupies more space in the display area and transition to that pane using the lock animations. This can improve the overall look of the layers and can be effective in bringing information or functionality (e.g., functional UI elements) into view in a display area.
Lock points also can be useful to provide a locking “notch” or “bump” effect during navigation. For example, as a user navigates along the length of a content layer, the layer can stop at lock points (e.g., at regularly spaced intervals, between content elements, etc.) after each navigation movement (e.g., a flick or pan motion on a touchscreen) made by the user.
Movement of various layers can differ depending on context. For example, a user can navigate left from the beginning of a content layer to reach the end of a content layer, and can navigate right from the end of the content layer to reach the beginning of a content layer. This wrapping feature provides more flexibility when navigating through the content layer. Wrapping can be handled by the multi-layer UI system in different ways. For example, wrapping can be handled by producing an animation that shows a rapid transition from the end of layers such as title layers or background layers back to the beginning of such layers, or vice-versa. Such animations can be combined with ordinary panning movements in the content layer, or with other animations in the content layer, such as locking animations. However, wrapping functionality is not required.
The content layer 314 includes content elements (e.g., content images 330A-H). Layers 310, 312 include text information (“Category” and “Selected Subcategory,” respectively). The length of content layer 314 is indicated to be approximately twice the length of layer 312, which is in turn indicated to be approximately twice the length of layer 310.
In
In the example shown in
When the user input indicates a motion to the right or left, the system produces a rightward or leftward movement of the layers 310, 312, 314 relative to the display area 300. The amount of movement of the layers 310, 312, 314 is a function of the data in the layers and the size or movement rate (or velocity) of the motion made by the user.
In the example shown in
Movement in the layers 310, 312, 314 may differ from the rules described above in some circumstances. In the example shown in
In
The lock points shown in
Described techniques and tools can be used on display screens in different orientations, such as landscape orientation. Changes in display orientation can occur, for example, where a UI has been configured (e.g., by user preference) to be oriented in landscape fashion, or where a user has physically rotated a device. One or more sensors (e.g., an accelerometer) in the device can be used to detect when a device has been rotated, and adjust the display orientation accordingly. In the example shown in
As in
At 410, the UI system displays a graphical user interface comprising plural layers. A first portion of visual information (e.g., content image 330 as shown in
The movements can be animated and/or rendered for display (e.g., on a touchscreen of a mobile phone or other computing device).
The content layer 514 includes Sections 1a, 1b, 1c, 1d, 2a, 2b, 2c, and 2d, which can be images, icons, lists of text strings or links, or some other content. The other layers 510, 512 include text information. Section header layer 512 includes two text strings (“Feature 1” and “Feature 2”). “Feature 1” is associated with Sections 1a, 1b, 1c and Id. “Feature 2” is associated with Sections 2a, 2b, 2c and 2d. Layer 510 includes one text string (“Application”). The length of content layer 514 is indicated to be longer than the total length of section header layer 512 (e.g., the combined length of the two strings), and longer than the length of layer 510.
In
In the example shown in
In
The lock points shown in
In the example shown in
Movement in layers 510, 512, 514 may differ from the rules described above in some circumstances. In the example shown in
The content layer 614 includes game images 640, 642, 644, lists 650, 652, 654, and avatar 630 (which is described in more detail below). The other layers 610, 612 include text information (“Games” in layer 610; “Spotlight,” “Xbox Live, “Requests” and “Collection” in layer 612). In
The lock points for each layer indicate the corresponding position of the left edge of the display area 300 on each layer. For example, when a user navigates to a position on content layer 614 such that the left edge of the display area 300 is at lock point “A,” the left edge of display area 300 also is aligned at lock point “A” of the other layers 610, 612, as shown in
The lock points shown in
The direction of motion that can be caused in layers 610, 612, 614 by user 302 is indicated by a left-pointing arrow and a right-pointing arrow in
When the user input indicates a motion to the right or left, the system produces a rightward or leftward movement of the layers 610, 612, 614 relative to the display area 300. In this example, the amount of horizontal movement of the layers 610, 612, 614 is a function of the data in the layers and the size or rate of the motion made by the user. Layers 610, 612, 614 move horizontally according to the following rules, except during wrapping animations:
Movement in the layers 610, 612, 614 may differ from the rules described above in some circumstances. In the example shown in
In addition to movements of entire layers, a user also can cause movements in elements or parts of layers, depending on the data in the layer and how the layer is arranged. For example, a user can cause movements (e.g., vertical movements) in layer elements (e.g., lists) that are orthogonal or substantially orthogonal to movements (e.g., horizontal movements) that can be caused in a layer as a whole. Orthogonal movements of layer elements in layers that move horizontally can include scrolling vertically in a list embedded in a content layer, such as when the list contains more information than can be displayed in a display area. Alternatively, a system that presents layers that move vertically can allow horizontal movements in layer elements.
In
The direction of motion that can be caused by user 302 is indicated by a left-pointing arrow and a right-pointing arrow in
At 710, the UI system displays a graphical user interface comprising plural layers. A first layer (e.g., content layer 614) comprises a user interface element (e.g., list 650) operable to move in a second direction (e.g., a vertical direction) substantially orthogonal to the first direction (e.g., a horizontal direction). A first portion of visual information (e.g., list 652 as shown in
At 720, the UI system receives first user input corresponding to a first gesture on the touchscreen. At 730, the UI system calculates a first movement based at least in part on the first user input. The first movement is a movement of the first layer from an initial first-layer position (e.g., the position shown in
At 750, the UI system receives second user input corresponding to a second gesture on the touchscreen. At 760, the UI system calculates a substantially orthogonal movement (e.g., a vertical movement) based at least in part on the second user input. The substantially orthogonal movement is a movement of visual information in the user interface element of the first layer from an initial element position to a current element position.
The substantially orthogonal movement can be a Movement of visual information in a vertically scrollable element (e.g., list 650) from an initial vertical position (e.g., the position of list 650 as shown in
The movements can be animated and/or rendered for display (e.g., on a touchscreen of a mobile phone or other computing device).
Layers can include elements that indicate relationships between other elements, such as other elements in a layer or sections of a layer. Elements that indicate relationships between other elements can be contained in a separate layer, or in the same layer as the respective other elements. For example, an avatar layer can include a visual element (an avatar) with a scope of motion that spans two related sections in another layer that relate to a user. Other elements also can be used to indicate relationships between elements. For example, an image of a music artist could be used to indicate a relationship between a list of albums by the artist and a list of tour dates for the artist.
In
Alternatively, avatar 630 can move in different ways, or exhibit other functionality. For example, avatar 630 can be locked to particular position (e.g., a lock point) in content layer 614 or in some other layer, such that avatar 630 moves at the same horizontal rate as the layer to which it is locked. As another alternative, avatar 630 can be associated with a list that can be scrolled up or down, such as list 650, and move up or down as the associated list is scrolled up or down.
Background layer 850 floats behind the other layers. Data to be presented visually in background layer 850 can include, for example, an image that extends beyond the boundaries of display area 300. The content layer 314 includes content elements (e.g., content images 330A-H). Layers 310, 312 include text information (“Category” and “Selected Subcategory,” respectively). The length of content layer 314 is indicated to be approximately twice the length of layer 312, which is in turn indicated to be approximately twice the length of layer 310. The length of background layer 850 is indicated to be slightly less than the length of layer 312.
In
When user input indicates a motion to the right or left, the system produces a rightward or leftward movement of the layers 310, 312, 314, 850 relative to display area 300. The amount of movement of layers 310, 312, 314, 850 is a function of the data in the layers and the size or movement rate (or velocity) of the motion made by the user.
In
The lock points shown in
In this example, layers 310, 312, 314, 850 move according to the following rules, except during wrapping animations:
Movement of layers 310, 312, 314, 850 may differ from the rules described above in some circumstances. In this example, wrapping is permitted. User 302 can navigate left from the beginning of content layer 314 (the position shown in
In this example, the system 900 includes a hub module 910 that provides a declarative description of a hub page to layer control 920, which controls display of parallel UI layers. Layer control 920 also can be referred to as a “panorama” or “pano” control. Such a description can be used when the UI layers move in a panoramic, or horizontal, fashion. Alternatively, layer control 920 controls UI layers that move vertically, or in some other fashion. Layer control 920 includes markup generator 930 and motion module 940.
In this example, layer control 920 controls several layers of UI elements: e.g., a background layer, a title layer, a section header layer, and a content layer. The content layer includes a set of content panes. Content panes can include, for example, images, graphical icons, lists, text, or other information to be presented visually. A set of content panes in a content layer can be referred to as a “generation” of content panes. Alternatively, layer control 920 controls greater than or less than three layers, or different kinds of layers. The declarative description of the hub page includes information that defines UI elements. In a multi-layer UI system, UI elements can include multiple layers, such as a background layer, a title layer, a section header layer, and a content layer. The declarative description of the hub page is provided to markup generator 930, along with other information such as style information and/or configuration properties. Markup generator 930 generates markup that can be used to render the UI layers. Motion module 940 accepts events (e.g., direct UI manipulation events) generated in response to user input and generates motion commands. The motion commands are provided along with the markup to a UI framework 950. In the UI framework 950, the markup and motion commands are received in layout module 952, which generates UI rendering requests to be sent to device operating system (OS) 960. The device OS 960 receives the rendering requests and causes a rendered UI to be output to a display on the device. System components such as hub module 910, layer control 920, and UI framework 950 also can be implemented as part of device OS 960. In one implementation, the device OS 960 is a mobile computing device OS.
A user (not shown) can generate user input that affects the way the UI is presented. In the example shown in
This example describes a detailed implementation comprising aspects of examples described above, along with other aspects. This detailed implementation can be implemented by a multi-layer UI system such as system 900 described above, or by some other system.
In this example, the system 900 presents multiple parallel UI layers (e.g., a background layer, a title layer, a section header layer, and a content layer) that, move horizontally. The content layer includes several content panes. Each content pane includes a right lock point and a left lock point.
A. Initialization
To initialize the parallel UI layers, the system 900 obtains information about the effective length of the background layer, the title layer, the section header layer and the content layer. (For UI layers that move horizontally, the effective length can be considered to be the effective width of the UI layers.) The system 900 can reduce memory and processing demands by dynamically creating content panes as they approach the display area, but this makes it more difficult to determine the effective width of the content layer. In this example, to determine an effective width of the content layer at initialization, the system 900 determines a maximum content layer width based on a maximum width for each content pane, and calculates a sum of the maximum widths of all content panes, which are non-overlapping.
Lock points in the content layer (for content panes) can be set automatically, for example, by dividing the content layer in increments of the width of the display area, to yield non-overlapping content panes. Alternatively, lock points can be set in the content layer by determining how many whole content images n fit in a content pane and starting a new content pane every n content images until each content image is in at least one content pane, which potentially yield overlapping content panes.
Motion in the layers is calculated based on motion ratios. For example, the system 900 calculates motion ratios for the background layer and the title layer by dividing the width of the background layer and the width of the title layer, respectively, by the maximum width of the content layer. Taking into account the widths of the background layer and the title layer, the system 900 maps locations of lock points in the background layer and the title layer, respectively, based on the locations of corresponding lock points in the content layer. An example of such a mapping of locations in a background layer is shown in
The lock points are used when moving the corresponding layers. For example, when the system 900 animates a transition to a pane in the content layer, the system looks up appropriate lock point positions for the background layer and the title layer and issues a command for the layers to scroll to those positions, setting relative motion rates depending on distances between lock points in the respective layers.
Motion ratios that are based on a maximum length of a content layer will only be approximate when compared with an actual rendered content layer. Because the ratios are approximate (the final width of the content panes is still unknown), the system 900 can perform lock animations to adjust layers such as the background layer or the title layer so that they align with corresponding lock points in a rendered final content layer.
Once initialization is complete, the system 900 can render the UI layers and begin accepting user input.
B. User Input
In this example, the system 900 accepts user input from a user interacting with a touchscreen on a mobile computing device. The system 900 can distinguish between different gestures on the touchscreen, such as drag gestures, pan gestures and flick gestures. The system 900 can also detect a tap gesture, such as where the user touches the touchscreen in a particular location, but does not move the finger, stylus, etc. before breaking contact with the touchscreen. As an alternative, some movement is permitted, within a small threshold, before breaking contact with the touchscreen in a tap gesture. The system 900 also can detect multi-touch gestures, such as pinch-and-stretch gestures.
The system 900 interprets an interaction as a particular gesture depending on the nature of the interaction with the touchscreen. The system 900 obtains one or more discrete inputs from a user's interaction. A gesture can be determined from a series of inputs. For example, when the user touches the touchscreen and begins a movement in a horizontal direction while maintaining contact with the touchscreen, the system 900 fires a pan input and begins a horizontal movement in the layers. The system 900 can continue to fire pan inputs while the user maintains contact with the touchscreen and continues moving. For example, the system 900 can fire a new pan input each time the user moves N pixels while maintaining contact with the touch screen. In this way, a continuous physical gesture on a touchscreen can be interpreted by the system 900 as a series of pan inputs. The system can continuously update the contact position and rate of movement.
When the physical gesture ends (e.g., when user breaks contact with the touchscreen), the system 900 can determine whether to interpret the motion at the end as a flick by determining how quickly the user's finger, stylus, etc., was moving when it broke contact with the touchscreen, and whether the rate of movement exceeds a threshold.
C. Responding to User Gestures
The system 900 can render motion (e.g., motion in a layer, list, or other UI element) on the display differently depending on the type of gesture. For example, in the case of a horizontal drag gesture (in which the user is currently maintaining contact with the touchscreen), the system 900 moves the content layer in a horizontal direction by the same distance as the horizontal distance of the drag. The title layer and background layer also move in response to the drag. The amount of movement is determined by multiplying the motion ratio for the respective layer by the horizontal movement of the drag. For example, if a motion ratio of 0.5 has been determined for the title layer, and the horizontal distance of the drag is 100 pixels, the movement in the title layer is 50 pixels in the direction of the drag.
In the case of a pan gesture (in which the user was moving more slowly, or was stopped, when the user broke contact with the touchscreen), moves the content layer in the amount of the pan, and checks the current position of the content pane relative to the display area of the device to determine whether to perform an additional movement in the content layer. For example, the system can perform a locking animation (i.e., an animation of a movement in the content layer to snap to a lock point) and move the content layer to a left or right lock point associated with a current content pane. The system 900 can determine which lock point associated with the current pane is closer, and transition to the closer lock point. As another example, the system 900 can move the content layer in order to bring a content pane that is in partial view on the display area into full view. Other gestures also can cause a content pane to be brought into full view. For example, if the left or right side of a vertically'scrollable list is outside the display area, a gesture on the list (e.g., a vertical or substantially vertical gesture) can cause a horizontal movement in the content layer (and horizontal movement in other layers, as appropriate) so that the whole list becomes visible. The horizontal movement of the layers may be in addition to any vertical movement in the list caused by the vertical gesture, but the vertical position of the content layer and any other layers are not affected. Alternatively, the system 900 can maintain the current position of the content layer.
In one implementation, the system 900 performs the following steps:
In the case of a flick gesture (in which the user was moving more rapidly when the user broke contact with the touchscreen), the system 900 initiates a transition animation that can advance the content layer to the next content pane or the previous content pane, depending on the direction and velocity of the flick gesture. If the velocity of the flick is large enough, the system 900 can transition to the next content pane in that direction. If the velocity isn't strong enough, or if a current content pane is wide, the system 900 can move the content layer in the direction of the flick without actually transitioning to the next content pane. The threshold velocity for a flick to be detected (i.e., to distinguish a flick gesture from a pan gesture) can vary depending on implementation. The threshold velocity for a flick to cause a transition to another content pane also can vary depending on implementation.
D. Non-Linear Motion
UI layers exhibit non-linear movement rates in some circumstances. For example, entire layers can move at different rates depending on context, or parts of layers can move at different rates than other parts of the same layer depending on context. One layer that can exhibit non-linear movement rates is a section header layer: A section header layer can be divided into several section headers, and each header can be associated with one or more content panes in the content layer.
In this example, the system 900 provides a section header layer, and each section header is associated with a content pane. The section header layer in this example moves according to the following rules:
In performing movements according to these rules, system 900 calculates a displacement value. First, a maximum displacement is calculated by taking the difference between the content pane width and the header width. In calculating the maximum displacement, the system 900 also can include an additional margin for buttons or other functional items in the header, and not just the width of text in the header.
The system 900 then calculates an actual displacement by determining the location of the left edge of the current pane relative to the left lock point. If the pane's left edge is to the right of the left lock point, the system 900 subtracts the horizontal position (x coordinate) of the left lock point from the horizontal position (x coordinate) of the left edge of the pane, which will be a positive value a. If the pane's left edge is to the left of the left lock point, the system 900 subtracts the horizontal position (x coordinate) of the left edge of the pane from the horizontal position (x coordinate) of the left lock point, which will be a positive value b. Adjustments can be made to the value (a or b), such as by multiplying the value by a constant. After any adjustments, if the value (a or b) is greater than the maximum displacement, the value is capped at the maximum displacement.
Displacement calculations also can be used for panning and transition animations. In the latter case, before the transition starts, the final locations of the panes are calculated and, based on that, final locations of the headers to be used in the transition animations are calculated.
E. Edge Taps
The system 900 also can implement edge tap functionality. In an edge tap, a user can tap within a given margin (e.g, 40 pixels) of edges (e.g., left or right edges) of the display area to cause a transition (e.g., to a next content pane or a previous content pane). This can be useful for example, where the next pane or previous pane is partially in view in the display area. The user can tap near the next or previous pane to cause the system to bring that pane completely into the display area.
Various extensions and alternatives to the embodiments described herein are possible.
In described examples, content layers are typically described as being longer than other layers, such as a background layer. A multi-layer UI system such as system 900 also can handle scenarios where layers such as a title layer or background layers are actually wider than the content layer. In such scenarios, the speed of the motion in the layers can be adjusted automatically adjusted to compensate. For example, where a content layer is shorter than a title layer, the content layer can move slower than the title layer.
In described examples, some layers are described as being locked to other layers. For example, in
A multi layer system also can lock layers, together to improve transition or wrapping effects. For example, a background layer can be locked to a title layer such that the background layer and title layer move at the same speed during wrapping. Such locking can be done even when the effective length of the layers is different.
Described examples show different positions of layers that may be of interest to a user, such as content layers. A user can begin navigation in multi-layer UI system at the beginning of layers, or use different entry points to begin UI layer navigation. For example, a user can begin navigation in the middle of a content layer, at the end of a content layer, etc. This can be useful, for example, where a user has previously exited at a position other than the beginning of a layer (e.g., the end of a layer), so that the user can return to the prior location (e.g., after a user uses an application invoked by actuating a content image). As another example, default lock points may be based on a prior state of the UI layers. For example, a user can return to a layer at lock point corresponding to a part of a layer that was being viewed previously. As another example, a multi-layer UI system can save states or make adjustments in more than one layer to allow different entry points. For example, if a user makes an entry where a content layer and a feature layer are visible as shown in
With reference to
A computing environment may have additional features. For example, the computing environment 1000 includes storage 1040, one or more input devices 1050, one or more output devices 1060, and one or more communication connections 1070. An interconnection mechanism (not shown) such as a bus, controller, or network interconnects the components of the computing environment 1000. Typically, operating system software (not shown) provides an operating environment for other software executing in the computing environment 1000, and coordinates activities of the components of the computing environment 1000.
The storage 1040 may be removable or non-removable, and includes magnetic disks, magnetic tapes or cassettes, CD-ROMs, DVDs, memory cards, or any other medium which can be used to store information and which can be accessed within the computing environment 1000. The storage 1040 stores instructions for the software 1080 implementing described techniques and tools.
The input device(s) 1050 may be a touch input device such as a keyboard, mouse, pen, trackball or touchscreen, an audio input device such as a microphone, a scanning device, a digital camera, or another device that provides input to the computing environment 1000. For video, the input device(s) 1050 may be a video card, TV tuner card, or similar device that accepts video input in analog or digital form, or a CD-ROM or CD-RW that reads video samples into the computing environment 1000. The output device(s) 1060 may be a display, printer, speaker, CD-writer, or another device that provides output from the computing environment 1000.
The communication connection(s) 1070 enable communication over a communication medium to another computing entity. The communication medium conveys information such as computer-executable instructions, audio or video input or output, or other data in a modulated data signal. A modulated data signal is a signal that has one or more of its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media include wired or wireless techniques implemented with an electrical, optical, RF, infrared, acoustic, or other carrier.
The techniques and tools can be described in the general context of computer-readable media. Computer-readable media are any available media that can be accessed within a computing environment. By way of example, and not limitation, with the computing environment 1000, computer-readable media include memory 1020, 1025, storage 1040, and combinations thereof.
The techniques and tools can be described in the general context of computer-executable instructions, such as those included in program modules, being executed in a computing environment on a target real or virtual processor. Generally, program modules include routines, programs, libraries, objects, classes, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The functionality of the program modules may be combined or split between program modules as desired in various embodiments. Computer-executable instructions for program modules may be executed within a local or distributed computing environment. Any of the methods described herein can be implemented by computer-executable instructions encoded on one or more computer-readable media (e.g., computer-readable storage media or other tangible media).
For the sake of presentation, the detailed description uses terms like “select” and “determine” to describe computer operations in a computing environment. These terms are high-level abstractions for operations performed by a computer, and should not be confused with acts performed by a human being. The actual computer operations corresponding to these terms vary depending on implementation.
In example environment 1100, various types of services (e.g., computing services 1112) are provided by a cloud 1110. For example, the cloud 1110 can comprise a collection of computing devices, which may be located centrally or distributed, that provide cloud-based services to various types of users and devices connected via a network such as the Internet. The cloud computing environment 1300 can be used in different ways to accomplish computing tasks. For example, with reference to described techniques and tools, some tasks, such as processing user input and presenting a user interface, can be performed on a local computing device, while other tasks, such as storage of data to be used in subsequent processing, can be performed elsewhere in the cloud.
In example environment 1100, the cloud 1110 provides services for connected devices with a variety of screen capabilities 1120A-N. Connected device 1120A represents a device with a mid-sized screen. For example, connected device 1120A could be a personal computer such as desktop computer, laptop, notebook, netbook, or the like. Connected device 1120B represents a device with a small-sized screen. For example, connected device 1120B could be a mobile phone, smart phone, personal digital assistant, tablet computer, and the like. Connected device 1120N represents a device with a large screen. For example, connected device 1120N could be a television (e.g., a smart television) or another device connected to a television or projector screen (e.g., a set-top box or gaming console).
A variety of services can be provided by the cloud 1110 through one or more service providers (not shown). For example, the cloud 1110 can provide services related to mobile computing to one or more of the various connected devices 1120A-N. Cloud services can be customized to the screen size, display capability, or other functionality of the particular connected device (e.g., connected devices 1120A-N). For example, cloud services can be customized for mobile devices by taking into account the screen size, input devices, and communication bandwidth limitations typically associated with mobile devices.
The illustrated mobile device can include a controller or processor 1210 (e.g., signal processor, microprocessor, ASIC, or other control and processing logic circuitry) for performing such tasks as signal coding, data processing, input/output processing, power control, and/or other functions. An operating system 1212 can control the allocation and usage of the components 1202 and support for one or more application programs 1214. The application programs can include common mobile computing applications (e.g., include email applications, calendars, contact managers, web browsers, messaging applications), or any other computing application.
The illustrated mobile device can include memory 1220. Memory 1220 can include non-removable memory 1222 and/or removable memory 1224. The non-removable memory 1222 can include RAM, ROM, flash memory, a disk drive, or other well-known memory storage technologies. The removable memory 1224 can include flash memory or a Subscriber Identity Module (SIM) card, which is well known in GSM communication systems, or other well-known memory storage technologies, such as smart cards. The memory 1220 can be used for storing data and/or code for running the operating system 1212 and the applications 1214. Example data can include web pages, text, images, sound files, video data, or other data sets to be sent to and/or received from one or more network servers or other mobile devices via one or more wired or wireless networks. The memory 1220 can be used to store a subscriber identifier, such as an International Mobile Subscriber Identity (IMSI), and an equipment identifier, such as an International Mobile Equipment Identifier (IMEI). Such identifiers can be transmitted to a network server to identify users and equipment.
The mobile device can support one or more input devices 1230, such as a touchscreen 1232, microphone 1234, camera 1236, physical keyboard 1238 and/or trackball 1240 and one or more output devices 1250, such as a speaker 1252 and a display 1254. Other possible output devices (not shown) can include a piezoelectric or other haptic output device. Some devices can serve more than one input/output function. For example, touchscreen 1232 and display 1254 can be combined in a single input/output device.
Touchscreen 1232 can accept input in different ways. For example, capacitive touchscreens detect touch input when an object (e.g., a fingertip or stylus) distorts or interrupts an electrical current running across the surface. As another example, touchscreens can use optical sensors to detect touch input when beams from the optical sensors are interrupted. Physical contact with the surface of the screen is not necessary for input to be detected by some touchscreens.
A wireless modem 1260 can be coupled to an antenna (not shown) and can support two-way communications between the processor 1210 and external devices, as is well understood in the art. The modem 1260 is shown generically and can include a cellular modem for communicating with the mobile communication network 1204 and/or other radio-based modems (e.g., Bluetooth or Wi-Fi). The wireless modem 1260 is typically configured for communication with one or more cellular networks, such as a GSM network for data and voice communications within a single cellular network, between cellular networks, or between the mobile device and a public switched telephone network (PSSTN).
The mobile device can further include at least one input/output port 1280, a power supply 1282, a satellite navigation system receiver 1284, such as a global positioning system (GPS) receiver, an accelerometer 1286, a transceiver 1288 (for wirelessly transmitting analog or digital signals) and/or a physical connector 1290, which can be a USB port, IEEE 1394 (firewall) port, and/or RS-232 port. The illustrated components 1202 are not required or all-inclusive, as components can be deleted and other components can be added.
The technologies from any example can be combined with the technologies described in any one or more of the other examples. In view of the many possible embodiments to which the principles of the disclosed technology may be applied, it should be recognized that the illustrated embodiments are examples of the disclosed technology and should not be taken as a limitation on the scope of the disclosed technology. Rather, the scope of the disclosed technology includes what is covered by the following claims. We therefore claim as our invention all that comes within the scope and spirit of these claims.
This application claims the benefit of U.S. Provisional Patent Application No. 61/304,004, filed on Feb. 12, 2010, entitled “MULTI-LAYER USER INTERFACE WITH FLEXIBLE MOVEMENT,” which is incorporated herein by reference.
| Number | Date | Country | |
|---|---|---|---|
| 61304004 | Feb 2010 | US |
