Keyboard-based navigation of a user interface

Various embodiments of systems and methods for keyboard-based navigation of a user interface are described herein. An area around a first object displayed on a user interface is divided into quadrants and one or more segments for at least one of the quadrants. The user interface includes a plurality of objects and the quadrants represent directions with respect to the first object. In response to a key stroke indicating a first direction, a first one of the quadrants corresponding to the first direction is identified. The segments of the first quadrant are scanned to identify a second object that is closest to the first object in the first quadrant. The second object is then selected.

FIELD

The field relates generally to user interface navigation. More particularly, the field relates to user interface navigation using a keyboard.

BACKGROUND

Mouse and keyboard are typical means for navigating a user interface (UI). A user can navigate a UI and reach a desired UI object using a mouse or a keyboard. A mouse can be more versatile for navigating a user interface. A user can simply move the cursor to a desired UI object using the mouse and make a selection. Keys such as up arrow key, down arrow key, left arrow key, and right arrow key are used for keyboard-based navigation. A combination of these keys can be used to navigate a UI and reach a desired UI object. Spreadsheets, tables, and other grid-type user interface environments can be conveniently navigated using a keyboard. However, keyboard-based navigation is not convenient and, in some cases, not possible for free or unstructured environments where UI objects are not in a grid-like arrangement. A user has to resort to a mouse to navigate such unstructured environments.

DETAILED DESCRIPTION

Reference throughout this specification to “one embodiment”, “this embodiment” and similar phrases, means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the present invention. Thus, the appearances of these phrases in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.

Grid type user interfaces can be conveniently navigated using a keyboard. A grid type user interface (UI) includes UI elements arranged in rows and columns or along vertical and horizontal lines. For example, referring toFIG. 1, a spreadsheet100is a grid type UI that includes a plurality of cells. The cells are arranged in rows and columns. Directional keys such as up arrow key102, down arrow key104, left arrow key106, and right arrow key108are used to navigate the spreadsheet and select cells. If a user intends to select a cell that is above a currently selected cell, the up arrow key102is used. Therefore, it is straightforward to determine which direction the user intends to navigate and accordingly represent the movement on the spreadsheet.

FIG. 2illustrates another grid-type UI120. This UI120is includes UI objects arranged in a grid. For example, the UI objects122in the quicksteps portion124are arranged along a vertical line. These UI objects122can be selected using the up arrow key102and the down arrow key104. The edit button126, duplicate button128, and delete button130are arranged along a horizontal line. A user can move between edit, duplicate, and delete buttons using the left arrow key106and the right arrow key108and select one of them. Therefore, it is easier to determine which direction the user intends to navigate in case of structured environments.

In unstructured environments, UI objects are scattered in a UI area without any specific pattern. These UI objects are not arranged in a grid or in any other sequence.FIG. 3Aillustrates UI objects in an unstructured environment150. Navigating such unstructured environments with a keyboard is not possible. Consider the UI objects A, E, and D in the unstructured environment150. Object E152and object D154are on the right side of the object A156. If a user selects the right arrow key, then it is not possible to determine which object the user is intending to select since both object E152and object D154are on the right side of the object A156. Similarly, if a user selects the left arrow key, then it is not possible to determine which object the user is intending to select since both object B158and object H160are on the left side of the object A156.

There are several types of unstructured environments that include scattered UI objects. One such unstructured environment is a map displayed on a UI, as shown inFIG. 3B. A map180includes UI objects such as pins182which represent various locations. Navigating from one pin to another pin may not be possible using the keyboard since the pins182are scattered. The pins182are not in a grid-type or any sequential arrangement. The keyboard-based navigation method200is explained in reference to the map environment. However, it should be understood that the method can be applied to any unstructured environment for navigating between UI objects.

Although a pointing device such as a mouse can be more versatile in navigating a user interface, there are several situations where a keyboard is preferable. For example, some users, while working with a keyboard, may be more comfortable using the keyboard to navigate the UI instead of switching to a mouse. As another example, physically challenged users may also find a keyboard more comfortable and practical since operation of a mouse requires relatively more precision. A keyboard can be any type of keyboard on a computing device or any input device that includes keys to move up, down, left, and right in a user interface.

FIG. 4illustrates an embodiment of the keyboard-based navigation method200. At202, an area around a first object displayed on a user interface is divided into quadrants. The user interface is an unstructured user interface250including a plurality of UI objects, as shown inFIG. 5. The area around the first object252is divided into four equal quadrants, with the first object252as the center. In one embodiment, the area around the first object252is the user interface area around the first object252. The quadrants are defined by lines L1, L2, L3, and L4that originate from the first object252.

The central angle of each quadrant is 90 degrees. For example, a right-side quadrant254is the area between lines L1and L2. The angle between the lines L1and L2is 90 degrees, which is the central angle of the right-side quadrant254. Similarly, a lower quadrant256is the area between lines L2and L3, a left-side quadrant258is the area between lines L3and L4, and an upper quadrant260is the area between lines L4and L1. The quadrants divide the area around the first object252into four equal parts.

Each quadrant represents a direction corresponding to the first object252. The right-side quadrant254corresponds to the right-side direction of the first object252, the lower quadrant256corresponds to a direction below the first object252, the left-side quadrant258corresponds to the left side direction of the first object252, and the upper quadrant260corresponds to a direction above the first object252. The right-side quadrant254is associated with the right arrow key262, the lower quadrant256is associated with the down arrow key264, the left-side quadrant258is associated with the left arrow key266, and the upper quadrant260is associated with the up arrow key268. Therefore, if a user selects a right arrow key262, the right-side quadrant254would be identified.

Each quadrant is divided into one or more segments. The segments are concentric. For example, a first or center segment of the right-side quadrant254is the area encompassed by the lines L1and L2and the curve C1. A second segment of the right-side quadrant254is the area encompassed by the lines L1and L2and the curves C1and C2. A third segment of the right-side quadrant254is the area encompassed by the lines L1and L2and the curves C2and C3. These segments of the right-side quadrant are concentric in that the curves C1, C2, and C3have the same center270but different radii.

The curves C1, C2, and C3are parts of circles with the same center270. For example, the curve C1is a quarter circle extending from the line L1to line L2. Similarly, the curve C2is also a quarter circle extending from the line L1to line L2, but has a larger radius than the curve C1. If the first object represents a point, then the center270of the curves is the location of the first object. In another embodiment, if the first object is not a point, then this center270can be the center of a boundary (e.g., a rectangle) that encompasses the first object.

In one embodiment, the segments are divided such that the width of the segments is equal to the shortest of the distances between the objects. Distances between pairs of the objects can be determined and the shortest of such distances is used for the width of the segments. Consider that the distance between the object C272and the object H274is the least among distances between any other pair of the objects. This distance between the object C272and the object H274is then used as the width for the segments. Therefore, the segments have equal width. The width of the first segment of the right-side quadrant254is the distance between the center (e.g., first object) and the curve C1. The width of the second segment of the right-side quadrant254is the distance between the curve C1and the curve C2. The width of the third segment of the right-side quadrant254is the distance between the curve C2and the curve C3.

Referring toFIG. 6, considering the example of a map300, the first object is a first pin302indicating a location. The map also includes several other pins indicating other locations. The first pin (pin ‘C’)302can be a pin that is currently selected. This selection can be a default selection when the map is first rendered based on a user request. The area around the first pin is divided into four quadrants by lines L1, L2, L3, and L4and each quadrant is divided into segments, as explained previously.

Referring back toFIG. 4, in response to a keystroke indicating a first direction, a first quadrant corresponding to the first direction is identified at204. The keystroke includes up, down, left, or right direction with respect to the first object. For example, referring toFIG. 6, when a user selects a right arrow key or any other key indicating a right-side direction, a right-side quadrant254is identified. The right-side quadrant254is the quadrant that corresponds to a right-side direction with respect to the first pin302. This right-side quadrant254is the area between the lines L1and L2.

Referring back toFIG. 4, once the first quadrant is identified, the segments in the first quadrant are scanned sequentially at206. The segments are scanned to identify a second object that is closest to the first object in the first quadrant. For example, referring toFIG. 6, after the right-side quadrant254is identified, the segments in the right-side quadrant254are scanned sequentially starting from the first or center segment304to identify a second pin that is closest to the first pin302. The first segment304is scanned first to determine if a second pin lies in the right-side quadrant254. If the second pin represents a point, then it is determined whether that point lies within the first segment304. In another embodiment, if the second pin or object does not represent a point, then it is determined whether a boundary of the second object overlaps with the first segment304.

In the example ofFIG. 6, the first segment304does not include any pins. Therefore, as shown inFIG. 7, a second segment306of the right-side quadrant254is then scanned to determine if there are any pins in the second segment306. Since there are no pins in the second segment306, a third segment308is then scanned as shown inFIG. 8. The second pin310lies in the third segment308and is therefore identified. This second pin310is closest to the first pin302in the right-side quadrant254. Referring back toFIG. 4, once identified, the second pin310is selected at208. This selection can be represented by changing a display attribute such as color, size, etc., of the second pin310, as shown inFIG. 9.

As another example, if a user selects an up arrow key, then an upper quadrant260is identified as shown inFIG. 10. The upper quadrant260is the area above the first object320between lines L4and L1. The first segment322of the upper quadrant260is scanned to determine if there a second pin within the first segment322. Since the first segment322does not include any pin, a second segment324is then scanned, as shown inFIG. 11. The second segment324also does not include any pin. Therefore, the third segment326is then scanned, as shown inFIG. 12. The second pin328lies in the third segment326and is identified. This second pin328is closest to the first pin320in the upper quadrant260. Following, which the second pin328is selected and this selection is represented on the user interface, as shown inFIG. 13.

There can be scenarios in which a segment includes multiple objects. In such scenarios, the segment including multiple pins is divided into smaller segments. For example, referring toFIG. 14, the third segment350of the left-side quadrant258includes two pins, namely, pin E352and pin D354. The third segment350is concentrically divided into three segments as shown inFIG. 15. The third segment350is the area defined between the curves C4and C7and the lines L3and L4. A first divided segment356is the area defined between the curves C4and C5and the lines L3and L4. A second divided segment358is the area defined between the curves C5and C6and the lines L3and L4. A third divided segment360is the area defined between the curves C6and C7and the lines L3and L4. Curves C4, C5, C6and C7are concentric. These divided segments356,358, and360are then scanned sequentially to identify the second pin that is closest to the first pin362in the left-side quadrant258. The first divided segment356does not include any pins. Therefore, the second divided segment358is then scanned. The second pin354, i.e. pin D, is in the second divided segment358. The second pin354is therefore identified and selected as shown inFIG. 16.

Referring toFIG. 17, in one embodiment, even after dividing a segment, a divided segment can included more than one object. For example, the second divided segment358of the left-side quadrant258includes pin K370, pin L372, and pin M374. In such cases, referring toFIG. 18, a center line376that divides the left-side quadrant258is used as a reference for selecting a second pin that is closest to the first pin F378in the left-side quadrant258. A pin that is in the second divided segment358and closest to the center line376is identified as the second pin. Pin L372is the closest to the center line376and is therefore selected as the second pin. In one embodiment, the second pin372is the pin that has the least circle-distance from the center line376. In another embodiment, the divided segment in which the pins lie is scanned from the center line376(as represented by the shaded region) along the curvature380of the divided segment until a pin is encountered. The first encountered pin is the second pin372. The selection of the second pin372is then presented on the user interface as shown inFIG. 19.

Some unstructured environments can include active text objects. An example of such environments is a feed update400as shown inFIG. 20. The feed update400includes active text objects402,404,406, and408along with other text. The active text objects402-408are not in a grid-type arrangement and a user has to typically use a mouse to select an active text object. The active text objects402-408can be links. The feed update can also one or more visual objects to perform actions such as to flag, set as favorite, like/dislike, etc. The keyboard-based navigation method200described above in reference to map environment can be similarly used to navigate between the active text objects402-408. The area around a first active text object402is divided into four equal quadrants, with the first active text object402as the center, as shown inFIG. 21. The first active text object402can be the active text object that occurs first in the feed update400. The quadrants are defined by lines L1, L2, L3, and L4that originate from the first active text object. The central angle of each quadrant is 90 degrees. The right-side quadrant412is the area between lines L and L2, the lower quadrant414is the area between lines L2and L3, the left-side quadrant416is the area between lines L3and L4, and the upper quadrant418is the area between lines L4and L1.

The right-side quadrant412corresponds to the right-side direction of the first object402, the lower quadrant414corresponds to a direction below the first object402, the left-side quadrant416corresponds to the left side direction of the first object402, and the upper quadrant418corresponds to a direction above the first object402. The right-side quadrant412is associated with a right arrow key, the lower quadrant414is associated with a down arrow key, the left-side quadrant416is associated with a left arrow key, and the upper quadrant418is associated with an up arrow key.

Each quadrant is divided into one or more segments. The segments in each quadrant are parallel. For example, referring toFIG. 22, a first segment420of the right-side quadrant412is the area defined by the lines L1, L2, S1, and S2. A second segment422of the right-side quadrant412is the area encompassed by the lines L1, L2, S2, and S3. A third segment424of the right-side quadrant412is the area encompassed by the lines L1, L2, S3, and S4. A fourth segment426of the right-side quadrant412is the area encompassed by the lines L1, L2, S4, and S5. The lines S1to S5are parallel. In one embodiment, the segments are divided such that the width of the segments is equal to the line height428of the text objects in the feed update.

When a user selects a right arrow key, the right-side quadrant412is identified. The first segment420is scanned first to determine if a second active text object lies in the right-side quadrant412. Since the first segment420does not include any active text objects, the second segment422is then scanned. Since there are no active text objects in the second segment422, the third segment424is then scanned. The second active text object404lies in the third segment424and is therefore identified. The second active text object404is then selected, as shown inFIG. 23.

If a segment includes multiple active text objects, then the segment is divided into smaller segments. For example, referring toFIG. 24, the third segment424of the right-side quadrant412includes two active text objects. The third segment is divided into two segments. A first divided segment450is the area defined between the lines S3and SD and the lines L1and L2. A second divided segment452is the area defined between the lines SD and S4and the lines L1and L2. These divided segments450and452are scanned sequentially to identify an active text object that is closest to the first active text object402in the right-side quadrant412. The first divided segment450includes the second active text object404, which is therefore identified and selected.

Referring toFIG. 25, in one embodiment, even after dividing a segment, a divided segment can included more than one active text object. For example, a divided segment460of the lower quadrant414includes two active text objects462and464. In such cases, referring toFIG. 26, a center line466that divides the left-side quadrant414is used as a reference for selecting a second active text object that is closest to the first active text object404in the left-side quadrant414. An active text object that is in the divided segment460and closest to the center line466is identified as the second active text object. The active text object AT5462is the closest to the center line466and is therefore selected as the second active text object. In one embodiment, if there are multiple active text objects within same distance from the center line, left most of the active text objects is identified as the second active text object. For example, if the active text objects AT5462and AT6464are within the same distance from the center line466, then the active text object AT5462is selected because it is the left most.

FIG. 27is a block diagram of an exemplary computer system2700. The computer system2700includes a processor2705that executes software instructions or code stored on a computer readable storage medium2755to perform the above-illustrated methods of the invention. The computer system2700includes a media reader2740to read the instructions from the computer readable storage medium2755and store the instructions in storage2710or in random access memory (RAM)2715. The storage2710provides a large space for keeping static data where at least some instructions could be stored for later execution. The stored instructions may be further compiled to generate other representations of the instructions and dynamically stored in the RAM2715. The processor2705reads instructions from the RAM2715and performs actions as instructed. According to one embodiment of the invention, the computer system2700further includes an output device2725(e.g., a display) to provide at least some of the results of the execution as output including, but not limited to, visual information to users and an input device2730to provide a user or another device with means for entering data and/or otherwise interact with the computer system2700. Each of these output devices2725and input devices2730could be joined by one or more additional peripherals to further expand the capabilities of the computer system2700. A network communicator2735may be provided to connect the computer system2700to a network2750and in turn to other devices connected to the network2750including other clients, servers, data stores, and interfaces, for instance. The modules of the computer system2700are interconnected via a bus2745. Computer system2700includes a data source interface2720to access data source2760. The data source2760can be accessed via one or more abstraction layers implemented in hardware or software. For example, the data source2760may be accessed by network2750. In some embodiments the data source2760may be accessed via an abstraction layer, such as, a semantic layer.

In the above description, numerous specific details are set forth to provide a thorough understanding of embodiments of the invention. One skilled in the relevant art will recognize, however that the invention can be practiced without one or more of the specific details or with other methods, components, techniques, etc. In other instances, well-known operations or structures are not shown or described in details to avoid obscuring aspects of the invention.

Although the processes illustrated and described herein include series of steps, it will be appreciated that the different embodiments of the present invention are not limited by the illustrated ordering of steps, as some steps may occur in different orders, some concurrently with other steps apart from that shown and described herein. In addition, not all illustrated steps may be required to implement a methodology in accordance with the present invention. Moreover, it will be appreciated that the processes may be implemented in association with the apparatus and systems illustrated and described herein as well as in association with other systems not illustrated.

The above descriptions and illustrations of embodiments of the invention, including what is described in the Abstract, is not intended to be exhaustive or to limit the invention to the precise forms disclosed. While specific embodiments of, and examples for, the invention are described herein for illustrative purposes, various equivalent modifications are possible within the scope of the invention, as those skilled in the relevant art will recognize. These modifications can be made to the invention in light of the above detailed description. Rather, the scope of the invention is to be determined by the following claims, which are to be interpreted in accordance with established doctrines of claim construction.