This application relates generally to the field of machine operation. More specifically, the present invention relates to retaining selected items while scrolling.
Devices with a touch user interface typically have a limited number of gestures that can be used to interact with a device. Often, the touch gestures are limited to a press or touch, a long press/touch, a swipe and press while swiping. This limited number of gestures are usually put together to allow users to interact with the touch device and/or applications on the device.
It is within this context that the present embodiments arise.
The description that follows includes illustrative systems, methods, user interfaces, techniques, instruction sequences, and computing machine program products that exemplify illustrative embodiments. In the following description, for purposes of explanation, numerous specific details are set forth in order to provide an understanding of various embodiments of the inventive subject matter. It will be evident, however, to those skilled in the art that embodiments of the inventive subject matter may be practiced without these specific details. In general, well-known instruction instances, protocols, structures, and techniques have not been shown in detail.
Embodiments of the present disclosure target the problems that occur when a user selects an item in a list and then scrolls the list. In prior art device behavior, when an item from a list is selected and the list scrolled, the selected item scrolls off the device display. This results in display of a list without selected items. Additionally, the context of operations change when the selected item leaves the display device.
In representative embodiments, when a user selects an item in a list, the selection establishes a context. For example, when a user selects an item in a list, the context may allow for display of additional controls that would allow a user to perform actions relative to the selected item (edit, delete, and so forth). As the list is scrolled, a comparison is made to the position of the selected item and the edge of the viewable area. When the selected item is within a threshold distance of the edge of the viewable area, the system identifies another item that is outside of the threshold distance of the viewable area and transfers the selection to that item, deselecting the previous item. The context remains the context of a selected item, although the details of that context, such as what UI elements (controls, dialogs, etc.) are displayed and other aspects such as the size of the selected item, etc. may change as a result of the transfer of selection.
In this figure, the selected item (e.g., item 108 from
If a user wishes to select another item, the user must again touch or otherwise indicate the item to be selected. In that situation, the context can return to the “item selected” context and behave accordingly. Thus, in the prior art device operation, the context is continually changing depending on selection, scrolling and so forth.
The device 302 in the figure comprises an area 304 where status information such as signal strength, battery status, time and other such information can be displayed. The device 302 also comprises another area 322 where other permanent controls such as an action button, search button, arrow button and so forth can be located. The remainder of the display area can comprise one or more viewports where information is displayed. In the representative example, the display comprises a top viewport 306, a list viewport comprising a list of items 308, 310, 312, 314, 316, and 318, and a control viewport 320 where context controls can be displayed. In this example, the top viewport 306 remains constant, the middle viewport comprising the list of items (308-318) allows the list of items to be scrolled up and down and the bottom viewport 320 comprises controls that change with the current context.
The list of items (308-318) comprise multiple different types of information such as a figure/graphic and an area for text, although lists in this disclosure can be any type of item with a single or multiple content/information type(s). Furthermore, although the list in this example scrolls up and down, lists that scroll horizontally or both horizontal and vertical (such as a grid, spreadsheet, table, etc.) would also be suitable for use by the disclosed embodiments. Upon selecting an item, context viewport 320 displays controls to access functionality related to the “item selected” context of the application. As representative examples, such controls can enable a user to perform actions like edit an item, delete an item, forward an item, reorder the item, select an item relative to the selected item (select previous item, next item, etc.) or any other type of actions the application exposes when an item is selected.
In the example of
Returning for a moment to
Switching back to
The location of the top of the viewport 508 is indicated by a line 510. The bottom of the viewport 508 is indicated by a line 516. Items typically have width and height. Since the list scrolls vertically (e.g., up and down), the height of the items are of interest when deciding whether an item is within a threshold distance from the edge of the viewport. For example, the top of item 2 is represented by a line 512 and the bottom of item 2 is represented by a line 514.
When determining whether item 2 is within a threshold distance of the top of the viewport 510, the system can utilize the top 512 or bottom 514 of the selected item. Which is selected depends on whether the embodiment switches when the top or the bottom of the item is within a threshold distance from the edge. For example, if the threshold distance is calculated using the top of the viewport 510 and the bottom of the item 514, then depending on how far the threshold distance is set, the item may be partially scrolled off the viewport (e.g., such as how item 1 is illustrated in
di=Vp−1
Where: di is the calculated distance
The calculated distance, di, is then compared to a threshold and the item switched when the distance is within the threshold.
Additionally, or alternatively, whether the item is within the threshold distance can be dependent on the scroll direction. For example, when the scroll direction is up such that the item is scrolling off the top, the calculated distance can be computed using the bottom of the item (i.e., 514) and the top edge of the viewport (i.e., 510). When the scroll direction is down, such that the item is scrolling off the bottom, the calculated distance can be computed using the top of the item (i.e., 512) and the bottom edge of the viewport (i.e., 516). In an alternative example, when the scroll direction is up, the calculated distance is computed using the top of the item (i.e., 512) and the top of the viewport (i.e., 510) and when the scroll direction is down, the calculated distance is computed using toe bottom of the item (i.e., 514) and the bottom of the viewport (i.e., 516).
When the list scrolls horizontally, the calculated distance can operate similarly using the left/right of the viewport and the left/right of the item and the left/right scroll direction. If the list scrolls both horizontally and vertically (and/or at some other angle), similar calculations can be made and the selected item switched when the appropriate edge of the item comes within the appropriate threshold distance of the appropriate edge of the viewport. In the case of diagonal (e.g., an angle other than horizontal or vertical) scrolling, the diagonal motion can be broken down into a horizontal and vertical component and the selection switched when the horizontal and/or vertical component comes within the corresponding threshold distance of the edge of the viewport.
The threshold distances do not all need to be the same in all instances. Thus, the threshold distance from the top of the viewport can be different than the threshold distance from the bottom of the viewport. Similarly, in the case of horizontal scrolling, the left threshold distance can be different than the right threshold distance. In the examples of multi-directional (e.g., horizontal and vertical or diagonal) scrolling, the horizontal and/or vertical threshold distances can be different as well as the top/bottom and left/right differences described in the case of vertical and horizontal scrolling. This means that all threshold distances (top, bottom, left, right) can all be different if desired.
When identifying which item to switch the selection to, the system can take into account scrolling direction and/or scrolling speed. The newly selected item should be within the viewport. Thus, when the list is scrolled up, the newly selected item is below the currently selected item. When the list is scrolled down, the newly selected item is above the currently selected item. Similar selection is performed for left/right scrolling directions. When the scroll is both horizontal/vertical and/or diagonal (which breaks down into a horizontal and vertical component), the selected item can be away from the direction of scroll. Thus, in the case of diagonal scrolling, the selected item could be on the diagonal away from the direction of scroll. Alternatively, the selected item could be on the vertical or horizontal away from the direction of scroll.
If the list is being scrolled at a fast speed, selecting the next item in the list (i.e., away from the direction of scroll) may result in the selected item scrolling off the viewport before the selected item can be displayed as selected (i.e., the visual indication of selection moved to the newly selected item). Thus, the system can take into account the speed of scrolling. When the speed of scrolling is fast enough that the selected item is within the threshold distance by the time the visual indicator of selection is displayed, the system can select an item that is far enough away from the previously selected item that the user will be cognizant of the new selection before the new selection also is within the threshold distance. In other words, the newly selected item may not necessarily be the next item in the list in all instances.
When a scroll command is received by the system (operation 606), the system begins monitoring where the selected items is relative to the edges of the viewports. Thus, the operations within the scroll loop 608/618 (i.e., operations 610, 612, 614 and 616) are performed when the list of items is being scrolled.
Operation 610 tests to see whether the currently selected item is within the threshold distance to an edge of the viewport. This can be performed as described above in conjunction with
When the item is within the threshold distance, the YES branch is taken and execution proceeds to operation 612 where a new item is identified. This new item can be the next item in the list away from the direction of scroll or any other item as described in conjunction with
Once the new item is identified, the selection is changed to the new item while maintaining a selected item context (operation 614) as previously described. Updating the selection includes updating the visual selection indicator as described herein. Execution then proceeds to operation 616 where the display is updated to display both the new selection and the new positions of the items in the list.
The scroll loop ends at operation 618. As described, the loop is exited when the list is no longer scrolled. Execution ends at operation 620.
Example Machine Architecture and Machine-Readable Medium
While only a single machine is illustrated, the term “machine” shall also be taken to include any collection of machines that individually or jointly execute a set (or multiple sets) of instructions to perform any one or more of the methodologies discussed herein.
The example of the machine 700 includes at least one processor 702 (e.g., a central processing unit (CPU), system on a chip (SoC), a graphics processing unit (GPU), advanced processing unit (APU), etc., or combinations thereof), one or more memories such as a main memory 704, a static memory 706, or other types of memory, which communicate with each other via link 708. Link 708 may be a bus or other type of connection channel. The machine 700 may include further optional aspects such as a graphics display unit 710 comprising any type of display. The machine 700 may also include other optional aspects such as an alphanumeric input device 712 (e.g., a keyboard, touch screen, and so forth), a user interface (UI) navigation device 714 (e.g., a mouse, trackball, touch device, and so forth), a storage unit 716 (e.g., disk drive or other storage device(s)), a signal generation device 718 (e.g., a speaker), sensor(s) 721 (e.g., global positioning sensor, accelerometer(s), microphone(s), camera(s), and so forth), output controller 728 (e.g., wired or wireless connection to connect and/or communicate with one or more other devices such as a universal serial bus (USB), near field communication (NFC), infrared (IR), serial/parallel bus, etc.), and a network interface device 720 (e.g., wired and/or wireless) to connect to and/or communicate over one or more networks 726.
Executable Instructions and Machine-Storage Medium
The various memories (i.e., 704, 706, and/or memory of the processor(s) 702) and/or storage unit 716 may store one or more sets of instructions and data structures (e.g., software) 724 embodying or utilized by any one or more of the methodologies or functions described herein. These instructions, when executed by processor(s) 702 cause various operations to implement the disclosed embodiments.
As used herein, the terms “machine-storage medium,” “device-storage medium,” “computer-storage medium” mean the same thing and may be used interchangeably in this disclosure. The terms refer to a single or multiple storage devices and/or media (e.g., a centralized or distributed database, and/or associated caches and servers) that store executable instructions and/or data. The terms shall accordingly be taken to include, but not be limited to, solid-state memories, and optical and magnetic media, including memory internal or external to processors. Specific examples of machine-storage media, computer-storage media and/or device-storage media include non-volatile memory, including by way of example semiconductor memory devices, e.g., erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), FPGA, and flash memory devices; magnetic disks such as internal hard disks and removable disks; magneto-optical disks; and CD-ROM and DVD-ROM disks. The terms machine-storage media, computer-storage media, and device-storage media specifically exclude carrier waves, modulated data signals, and other such media, at least some of which are covered under the term “signal medium” discussed below.
Signal Medium
The term “signal medium” shall be taken to include any form of modulated data signal, carrier wave, and so forth. The term “modulated data signal” means a signal that has one or more of its characteristics set or changed in such a matter as to encode information in the signal.
Computer Readable Medium
The terms “machine-readable medium,” “computer-readable medium” and “device-readable medium” mean the same thing and may be used interchangeably in this disclosure. The terms are defined to include both machine-storage media and signal media. Thus, the terms include both storage devices/media and carrier waves/modulated data signals.
A method for maintaining selection while scrolling, comprising:
receiving from a user selection of an item (514) in a list of items (604);
monitoring a position of the item relative to an edge of a viewport (510, 516) while the list of items is scrolled;
responsive to identifying that the position of the item relative to the edge is within a threshold distance from the edge: (610)
identifying a second item outside the threshold distance from the edge; (612)
transferring selection from the item to the second item such that the item becomes deselected and the second item becomes selected. (614)
The method of example 1 further comprising:
displaying a visual indication of selection of the second item.
The method of example 1 further comprising transferring a visual indication of selection from the item to the second item.
The method of example 1, 2, or 3 wherein the edge is one of:
a top edge of the viewport;
a bottom edge of the viewport;
a left edge of the viewport;
a right edge of the viewport.
The method of example 1 further comprising maintaining a current context when the selection is transferred from the item to the second item.
The method of example 1 wherein the second item is a list item away from a direction of scroll.
The method of example 1 wherein the second item is a list item next to the item.
The method of example 1 wherein the threshold distance is measured from an item edge closest to the edge.
The method of example 1 wherein the threshold distance is measured from an item edge farthest from the edge.
A system for completing a question comprising:
a processor and executable instructions accessible on a computer storage medium that, when executed, cause the processor to perform operations comprising:
receiving from a user selection of an item (514) in a list of items; (604)
monitoring a position of the item relative to an edge of a viewport (510, 516) while the list of items is scrolled;
responsive to identifying that the position of the item relative to the edge is within a threshold distance from the edge: (610)
identifying a second item outside the threshold distance from the edge; (612)
transferring selection from the item to the second item such that the item becomes deselected and the second item becomes selected. (614)
The system of example 10 further comprising:
displaying a visual indication of selection of the second item.
The system of example 10 further comprising transferring a visual indication of selection from the item to the second item.
The system of example 10 wherein the edge is one of:
a top edge of the viewport;
a bottom edge of the viewport;
a left edge of the viewport;
a right edge of the viewport.
The system of example 10 further comprising maintaining a current context when the selection is transferred from the item to the second item.
The system of example 10, 11, 12, 13, 14, or 15 wherein the second item is a list item away from a direction of scroll.
The system of example 10 wherein the second item is a list item next to the item.
The system of example 10 wherein the threshold distance is measured from an item edge closest to the edge.
The system of example 10 wherein the threshold distance is measured from an item edge farthest from the edge.
A computer storage medium comprising executable instructions that, when executed by a processor of a machine, cause the machine to perform operations comprising:
receive from a user via a user interface, selection of an item (514) in a list of items; (604)
monitor a position of the item relative to an edge of a viewport (510, 516) while the list of items is scrolled;
responsive to the position of the item relative to the edge being within a threshold distance from the edge: (610)
identify a second item outside the threshold distance from the edge; (612)
transfer selection from the item to the second item such that the item becomes deselected and the second item becomes selected; (614) and
display a visual indicator that the second item is now selected. (412, 616)
The medium of example 19 further comprising maintaining a current context when the selection is transferred to the second item.
A method for maintaining selection while scrolling, comprising:
receiving from a user selection of an item (514) in a list of items (604);
monitoring a position of the item relative to an edge of a viewport (510, 516) while the list of items is scrolled;
responsive to identifying that the position of the item relative to the edge is within a threshold distance from the edge: (610)
identifying a second item outside the threshold distance from the edge; (612)
transferring selection from the item to the second item such that the item becomes deselected and the second item becomes selected. (614)
The method of example 21 further comprising:
displaying a visual indication of selection of the second item.
The method of example 21 or 22 further comprising transferring a visual indication of selection from the item to the second item.
The method of example 21, 22, or 23 wherein the edge is one of:
a top edge of the viewport;
a bottom edge of the viewport;
a left edge of the viewport;
a right edge of the viewport.
The method of example 21, 22, 23, or 24 further comprising maintaining a current context when the selection is transferred from the item to the second item.
The method of example 25 wherein maintaining the current context further comprises displaying a different context control.
The method of example 25 wherein maintaining the current context further comprises changing the user interface to correspond to selection of the second item.
The method of example 21, 22, 23, 24, 25, 26, or 27 wherein the second item is a list item away from a direction of scroll.
The method of example 21, 22, 23, 24, 25, 26, 27 or 28 wherein the second item is a list item next to the item.
The method of example 21, 22, 23, 24, 25, 26, 27, 28, or 29 wherein the threshold distance is measured from an item edge closest to the edge.
The method of example 21, 22, 23, 24, 25, 26, 27, 28, or 29 wherein the threshold distance is measured from an item edge farthest from the edge.
The method of example 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, or 31 wherein the threshold distance is set such that the selection changes before the item is scrolled off the screen in the direction of scroll.
The method of example 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, or 31 wherein the threshold distance is set such that the selection changes when the item is scrolled off the screen in the direction of scroll.
An apparatus comprising means to perform a method as in any preceding example.
Machine-readable storage including machine-readable instructions, when executed, to implement a method or realize an apparatus in any preceding example.
In view of the many possible embodiments to which the principles of the present invention and the forgoing examples may be applied, it should be recognized that the examples described herein are meant to be illustrative only and should not be taken as limiting the scope of the present invention. Therefore, the invention as described herein contemplates all such embodiments as may come within the scope of the following claims and any equivalents thereto.
Number | Name | Date | Kind |
---|---|---|---|
8314809 | Grabowski et al. | Nov 2012 | B1 |
9454290 | Ma et al. | Sep 2016 | B1 |
20050005248 | Rockey et al. | Jan 2005 | A1 |
20080168386 | Brinda et al. | Jul 2008 | A1 |
20100058240 | Bull et al. | Mar 2010 | A1 |
20100281374 | Schulz | Nov 2010 | A1 |
20100325533 | Artz | Dec 2010 | A1 |
20130080957 | Sirpal et al. | Mar 2013 | A1 |
20130159834 | Johnson et al. | Jun 2013 | A1 |
20140195965 | Brunet et al. | Jul 2014 | A1 |
20150378600 | Sloan et al. | Dec 2015 | A1 |
20160132567 | Dole et al. | May 2016 | A1 |
20160170576 | Brown | Jun 2016 | A1 |
Entry |
---|
Jacob Greenleaf, “Scroll Selection”, Aug. 11, 2013 [online], [retrieved on Sep. 22, 2018]. Retrieved from the Internet: <URL:https://web.archive.org/web/20160428161515/https://codepen.io/jacobgreenleaf/pen/HuhAm>, 4 pages. (Year: 2013). |
“DataGrid Keep Selected Item in the ScrollView”, https://www.codeproject.com/Questions/560276/DataGridplusKeepplusSelectedplusItemplusinplusthep, Published on: Mar. 11, 2013, 4 pages. |
“Working with Cards on Kanban Board”, http://help.swiftkanban.com/getting-started/projects/kanban-board/working-with-cards.html, Published on: 2009, 27 pages. |
“How to Use the Mini Toolbar and Contextual Menu in Microsoft Excel 2016”, http://www.simonsezit.com/article/how-to-use-the-mini-toolbar-and-contextual-menu-in-microsoft-excel-2016/, Published on: 2008, 3 pages. |
“International Search Report and Written Opinion Issued in PCT Application No. PCT/US2018/026149”, dated Jul. 18, 2018, 10 Pages. |
Number | Date | Country | |
---|---|---|---|
20180300032 A1 | Oct 2018 | US |