Navigating a two-dimensional canvas such as a web page can be easily done using a mouse or similar pointing device on a personal computer. For example, when a user wants to click on a user interface object on a web page, such as a hyperlink, the user simply positions the mouse pointer directly over the hyperlink and appropriately clicks the mouse. Notwithstanding, this seemingly simple task is hard to perform on a hand-held or mobile device, such as a Smartphone, because these devices do not have a mouse. Rather, the user generally has to use directional buttons for any user interface interaction. Indeed, this is a main reason why the navigation that is available on mobile devices is primarily one-dimensional. For example, most mobile web browsers offer only the ability for users to navigate up and down on a web page.
As mobile devices are becoming more powerful and popular, the applications that run on them are becoming more feature-intensive. In the future, it will be likely desirable to have the web browsing experience on a mobile device be very similar to the web browsing experience on a desktop or notebook, including two-dimensional navigation aspects. However, any such two-dimensional navigation on a mobile device will need to deal with the difficulties of a mobile device's button mechanism that is far more suitable for one-dimensional navigation.
This Summary is provided to introduce a selection of representative concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used in any way that would limit the scope of the claimed subject matter.
Briefly, various aspects of the subject matter described herein are directed towards two-dimensional navigation among user interface controls of a canvas by choosing a control to have focus based on a received navigational command, the control that currently has focus, and criteria including distance and relative position (e.g., alignment) of each candidate control to the control currently having focus.
In one example implementation, when the navigation command comprises an up or down command, the criteria is evaluated, including determining whether each control of a set of a candidate controls horizontally overlaps with the current control having focus, and if so, by computing a distance for that candidate control based on a vertical distance to the control in focus. If the candidate control does not horizontally overlap, the distance is computed as an absolute distance to the control in focus. The chosen control is the control having the least computed distance that is also above the control having focus for an up command or below the control having focus for a down command, and is also currently visible in a viewport when the control having focus is currently visible in the viewport.
In one example implementation, when the navigation command comprises a left or right command, a distance is computed for each candidate control based on a vertical upper boundary distance to the control in focus and an absolute distance to the control in focus. The vertical upper boundary distance may be given more weight in the computed distance than the absolute distance. The chosen control is selected as the control having the least computed distance that is also to the left of the control having focus for a left command, or to the right of the control having focus for a right command, and is also currently visible in a viewport when the control having focus is currently visible in the viewport.
Other advantages may become apparent from the following detailed description when taken in conjunction with the drawings.
The present invention is illustrated by way of example and not limited in the accompanying figures in which like reference numerals indicate similar elements and in which:
Various aspects of the technology described herein are generally directed towards a technique for navigating a two-dimensional canvas such as a web page on a mobile device, using limited mobile device buttons, such as a four-directional button interface (of a D-Pad). In one example implementation, example logic/a mechanism is described that, whenever one of the four directional buttons is pressed on a mobile device, intelligently predicts which user interface object on a web page the focus is to be set. In other words, the logic determines where to set focus in response to detection of either a right, left, up or down button press.
While one example implementation described herein includes the example logic/mechanism in the form of an algorithm that provides a set of rules for determining on which object to focus in response to which button is pressed, it is understood that this is only one example. For example, a more complex algorithm can be used, such as one based on the algorithm described herein, and further enhanced with special exceptions to the general rules, such as determined from empirical testing. Further, the technology is not limited to a D-Pad interface, but rather contemplates any equivalent input mechanisms or combinations thereof; for example, sensors corresponding to left and right input navigation commands in conjunction with an up-and-down scroll wheel, or vice versa, would be an alternative multi-directional input mechanism.
As such, the present invention is not limited to any particular embodiments, aspects, concepts, protocols, structures, mechanisms, algorithms, functionalities or examples described herein. Rather, any of the embodiments, aspects, concepts, protocols, structures, mechanisms, algorithms, functionalities or examples described herein are non-limiting, and the present invention may be used various ways that provide benefits and advantages in computing and user interface navigation in general.
Turning to
Note that as represented in
As represented in
The control in focus is the UI control that is currently highlighted or otherwise marked as such, such as by a rectangular border. In normal operation, at any given time only one control may be in focus. As described below, image navigation begins with the control in focus; a default control may be specified by the content designer or selected by a device mechanism, e.g., when no control is focus, the control that is closest to the center of the viewport is chosen as the default control in focus in the following example description. Note that any suitable alternative may be used for selecting a default control, e.g., the uppermost/leftmost control that is visible may be the default focused control.
In
As can be readily appreciated, various considerations are needed to be handled to perform two-dimensional navigation that meets with users' general expectations. For example, in
Returning to the example of focus currently at the control UIC7 and moving left, a visual inspection of the controls' relative positions indicates that a typical user would most likely expect to navigate focus to the control UIC6 in response to a left user action when focus is at the control UIC7. However, the control UIC6 is not the closest control in absolute distance to the control UIC7; rather UIC5 is the closest control. Thus, example focus setting logic 122 (
Distance=Square root of ((p1.X−p2.X)*(p1.X−p2.X)+(p1.Y−p2.Y)*(p1.Y−p2.Y)
In general, the focus setting logic 122 decides which UI control is to be in focus based on the current control in focus and a user navigation action. In the event that no control is focus, in this example implementation, the control that is closest to the center of the viewport is chosen as the default control in focus.
Turning to
For example, when a “go up” command is detected at step 302, the example steps of
To this end, for a given control c (selected as represented via step 402) if at step 404 (c.L (c's left boundary) is less than f.L (f's left boundary), and c.R is greater than f.R) or (c.L is greater than f.L, and c.R is less than f.R), step 406 is executed. Note that “less than” and “greater than” can be replaced with “less than or equal” and “greater than or equal” in these computations, respectively, and indeed, some threshold closeness may be considered so that slightly imperfect alignment, position and/or distance can be considered acceptable. For example, if the left boundaries of two controls are within some allowable number of (e.g., one or two) x-values of one another, by including in the computations a slight offset adjustment, the two controls may be considered left-aligned for purposes of focus selection, even though the two are not exactly left-aligned.
Step 406 calculates the vertical distance to the control in focus by subtracting the f.T y-value (f's top boundary y-value) from the c.B (c's bottom boundary y-value) y-value. This means the new control, c, is horizontally overlapping with the control in focus, f. For example in
Otherwise, step 404 branches to step 408 to calculate the absolute distance between f.UL and c.BL, meaning left alignment takes precedence. For example, in
At this time in the example logic, a determination is made as to whether the currently selected control c will change the w control, that is, the control to which focus will change, unless a better control is found during subsequent iterations. To this end, w is replaced by c if and only if the criteria set forth in steps 408, 410 and 412 are met.
More particularly, step 410 evaluates whether c is above f, that is, whether f.T is greater than c.B. If not, another control is selected as the next candidate control c via steps 418 and 420, until none remain, at which time whatever control (if any) that was found to be the best w is the control to which focus will be changed.
If c is above f as evaluated at step 410, c's distance as calculated at step 406 or 408 is compared to w's distance to f. This may be the large w's distance as initialized, in which event c's distance will be shorter, or a comparison against an actual distance set during a previous iteration. If c's distance is less than the current w's distance, the criteria at step 414 is next evaluated, otherwise this c is discarded and a new c selected via steps 418 and 420 (until no other candidate controls remain to evaluate) as described above.
Step 414 evaluates whether c and w are both in the viewport 104 (
In the event that the criteria of steps 410, 412 and 414 are met, at step 416 the candidate control w is replaced with the current control under evaluation c. The distance from w to f is also changed to the distance from c to f as measured at step 406 or 408, for future iteration distance comparisons at step 412. Steps 418 and 420 repeat the process for another control c until all have been evaluated, as described above.
When the iterations over each of the non-focused controls is complete, w is known and is chosen as the control to which focus is to be set. Note that it is possible that no control satisfied the criteria, e.g., nothing was above f when the user pressed up, whereby focus need not change from f. Step 418 returns to
When a down command is received, step 304 executes the logic represented in
For example, when the candidate control c under evaluation is horizontally overlapping the control with focus f, the vertical distance at step 506 measures c's top y-value to the f's bottom y-value. This is represented in
Further, as part of the criteria for replacing w with c, step 510 evaluates whether f is above c, since the requested direction is down. Otherwise the replacement criteria is the same as in
Turning to a consideration of horizontal navigation,
Step 602 of
Step 606 calculates the absolute distance A between f.UL and c.UR. At step 608, the total distance for c is then set to A+V*V in this example implementation. This formula ensures that the vertical distance takes precedence over the absolute distance, while at the same time taking the absolute distance into consideration. For example, when going left from the control UIC7 in
At this time in the example, a determination is made as to whether the current candidate control c will change the w control, that is, the control to which focus will change unless a better control is found during subsequent iterations. To this end, w is replaced by c if and only if the criteria set forth in steps 610, 613 and 614 are met.
More particularly, step 610 evaluates whether c is to the left of f, that is, whether f.L is greater than c.R. If not, another control is selected as the next candidate control c via steps 618 and 620 until none remain, at which time whatever control (if any) found to be the best w is the control to which focus will be changed.
If c is to the left of f, c's distance as computed at step 608 is compared to w's distance to f. This may be the large w's distance as initialized, in which event c's distance will be shorter, or a comparison against an actual distance set during a previous iteration. If c's distance is less than the current w's distance, the criteria at step 614 is next evaluated, otherwise this candidate c is discarded and a new candidate c selected via steps 618 and 620 (until none remain) as described above.
Step 614 evaluates whether c (the current candidate) and w (the best candidate found thus far) are both in the viewport 104 (
In the event that the criteria of steps 610, 612 and 614 are met, at step 616 the control w is replaced with the current candidate control under evaluation c. The distance from w to f is also changed to the distance from c to f as computed at step 608, for future iteration distance comparisons at step 612. Steps 618 and 620 repeat the process for another candidate control c until all have been evaluated, as described above.
When the iterations over each of the non-focused controls is complete, w is known. It is possible that no control satisfied the criteria, e.g., nothing was left of the control f when the user pressed left, whereby f need not change. Step 618 returns to
Again, when iterating through each selected control c, w is replaced by the current candidate c if and only if the criteria of steps 710, 712 and 714 are met. Note that since attempting to move focus to the right, step 710 considers whether c is to the right of f, rather than vice-versa as in
While the invention is susceptible to various modifications and alternative constructions, certain illustrated embodiments thereof are shown in the drawings and have been described above in detail. It should be understood, however, that there is no intention to limit the invention to the specific forms disclosed, but on the contrary, the intention is to cover all modifications, alternative constructions, and equivalents falling within the spirit and scope of the invention.