Systems and methods for displaying an expanding menu via a user interface

• US 10,296,167 B2
• Filed: 09/11/2014
• Issued: 05/21/2019
• Est. Priority Date: 01/03/2014
• Status: Active Grant

• Current Assignee: Verizon Media, Inc. (Verizon Communications Inc.), Yahoo Assets LLC
• Original Assignee: Oath Inc. (Verizon Communications Inc.)
• Inventors: Liu, Agnes, Huang, Shin-Yi
• Primary Examiner(s): Sax, Steven P
• Application Number:
  US14/484,155
• Publication Number:
  US 20160077684A1
• Time in Patent Office: 1,713 Days
• CPC Class Codes: G06F 16/9535 Search customisation based on user profiles and personalisation
• CPC Class Codes: G06F 2203/04803 Split screen, i.e. subdividing the display area or the window area into separate subareas
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/0487 using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces
• CPC Class Codes: G06Q 10/1097 Task assignment
• CPC Class Codes: G06Q 30/0207 Discounts or incentives, e.g. coupons or rebates

Abstract

Various embodiments of the present disclosure relate to systems and methods for presenting content to users using expanding menus. Among other things, the expanding menus allow a range of categories of content to be simultaneously presented to a user on a display, even on smaller devices where display space is at a premium.

Claims

1. A computer-implemented method comprising:

displaying, by a mobile device, a view, the view including application content;

generating, by the mobile device, a plurality of menu bars via a touch-sensitive display screen of the mobile device, wherein the plurality of menu bars are disposed in parallel to each other at an angle diagonal to a vertical axis of the mobile device and extending along a horizontal axis of the mobile device wherein a first menu bar of the plurality of menu bars is proximate to a first side of the mobile device when displayed and a last menu bar of the plurality of menu bars is proximate to a second side opposite the first side of the mobile device when displayed, the last menu bar positioned opposite the first menu bar, such that the application content is at least partially visible;

identifying, by the mobile device, a first swipe gesture across the touch-sensitive display screen; and

in response to the first swipe gesture, gradually increasing the width of each of the plurality of menu bars displayed on the touch-sensitive display screen, the gradually increasing comprising;

displaying the menu bars in a first state, the displaying the menu bars in the first state comprising displaying the menu bars at fixed initial widths, and

displaying the menu bars in a second state after the first state, the displaying the menu bars in the second state comprising continuing to gradually increase the widths of the menu bars and changing positions of each of the menu bars such that the menu bars progressively occlude the application content in the view.

2. The method of claim 1, further comprising:

identifying a cessation of the first swipe prior to each of the menu bars being increased to a second width corresponding to a fully-expanded state; and

decreasing the width of each of the menu bars to their initial widths in response to the cessation of the first swipe.

3. The method of claim 1, further comprising:

identifying a cessation of the first swipe subsequent to each of the menu bars being increased to a second width corresponding to a fully-expanded state; and

displaying the plurality of menu bars at the second width in response to the cessation of the first swipe.

4. The method of claim 3, further comprising:

identifying, by the mobile device, a second swipe gesture across the touch-sensitive display screen; and

in response to the second swipe gesture, gradually decreasing the width of each of the plurality of menu bars displayed on the touch-sensitive display screen.

5. The method of claim 4, further comprising:

identifying a cessation of the second swipe gesture prior to each of the menu bars being decreased to the initial widths corresponding to the collapsed state; and

increasing the width of each of the menu bars to their second width in response to the cessation of the second swipe gesture.

6. The method of claim 4, further comprising:

identifying a cessation of the second swipe subsequent to each of the menu bars being decreased to the initial widths corresponding to the collapsed state; and

displaying the plurality of menu bars at the initial widths in response to the cessation of the second swipe.

7. The method of claim 1, wherein each of the plurality of menu bars is displayed with a color that is distinct from any other menu bar.

8. The method of claim 7, wherein each of the plurality of menu bars corresponds to a respective category of content items, and wherein text is displayed in each menu bar to identify the respective category of content items associated with each menu bar.

9. The method of claim 8, wherein a respective icon is further displayed in each menu bar to identify the respective category of content items associated with each menu bar.

10. The method of claim 7, wherein each of the plurality of menu bars corresponds to a respective category of content items, and wherein a respective icon is displayed in each menu bar to identify the respective category of content items associated with each menu bar.

11. The method of claim 7, wherein each of the plurality of menu bars corresponds to a respective category of content items, the method further comprising:

detecting a selection of a menu bar from the plurality of menu bars via the touch-sensitive display screen; and

displaying, via the touch-sensitive display screen, a list of content items associated with the selected menu bar.

12. The method of claim 11, wherein the content items include one or more of:

text, an image, video, audio, a map, a uniform resource locator, a graph, a slideshow, an article, and a file.

13. A tangible, non-transitory computer-readable medium storing instructions that, when executed, cause a mobile device to:

display a view, the view including application content;

generate a plurality of menu bars via a touch-sensitive display screen of the mobile device, wherein the plurality of menu bars are disposed in parallel to each other at an angle diagonal to a vertical axis of the mobile device and extending along a horizontal axis of the mobile device wherein a first menu bar of the plurality of menu bars is proximate to a first side of the mobile device when displayed and a last menu bar of the plurality of menu bars is proximate to a second side opposite the first side of the mobile device when displayed, the last menu bar positioned opposite the first menu bar, such that the application content is at least partially visible;

identify a first swipe gesture across the touch-sensitive display screen; and

in response to the first swipe gesture, gradually increase the width of each of the plurality of menu bars displayed on the touch-sensitive display screen, the gradually increasing comprising;

displaying the menu bars in a first state, the displaying the menu bars in the first state comprising displaying the menu bars at fixed initial widths, and

displaying the menu bars in a second state after the first state, the displaying the second state comprising continuing to gradually increase the widths of the menu bars and changing positions of each of the menu bars such that the menu bars progressively occlude the application content in the view.

14. The computer-readable medium of claim 13, wherein the medium further stores instructions for causing the mobile device to:

identify a cessation of the first swipe prior to each of the menu bars being increased to a second width corresponding to a fully-expanded state; and

decrease the width of each of the menu bars to their initial widths in response to the cessation of the first swipe.

15. The computer-readable medium of claim 13, wherein the medium further stores instructions for causing the mobile device to:

identify a cessation of the first swipe subsequent to each of the menu bars being increased to a second width corresponding to a fully-expanded state; and

display the plurality of menu bars at the second width in response to the cessation of the first swipe.

16. A mobile device comprising:

a processor; and

memory in communication with the processor and storing instructions that, when executed by the processor, cause the mobile device to;

display a view, the view including application content;

generate a plurality of menu bars via a touch-sensitive display screen of the mobile device, wherein the plurality of menu bars are disposed in parallel to each other at an angle diagonal to a vertical axis of the mobile device and extending along a horizontal axis of the mobile device wherein a first menu bar of the plurality of menu bars is proximate to a first side of the mobile device when displayed and a last menu bar of the plurality of menu bars is proximate to a second side opposite the first side of the mobile device when displayed, the last menu bar positioned opposite the first menu bar, such that the application content is at least partially visible;

identify a first swipe gesture across the touch-sensitive display screen; and

in response to the first swipe gesture, gradually increase the width of each of the plurality of menu bars displayed on the touch-sensitive display screen, the gradually increasing comprising;

displaying the menu bars in a first state, the displaying the menu bars in the first state comprising displaying the menu bars at fixed initial widths, and

displaying the menu bars in a second state after the first state, the displaying the second state comprising continuing to gradually increase the widths of the menu bars and changing positions of each of the menu bars such that the menu bars progressively occlude the application content in the view.

17. The mobile device of claim 16, wherein the memory further stores instructions for causing the mobile device to:

identify a cessation of the first swipe prior to each of the menu bars being increased to a second width corresponding to a fully-expanded state; and

decrease the width of each of the menu bars to the initial widths in response to the cessation of the first swipe.

18. The mobile device of claim 16, wherein the memory further stores instructions for causing the mobile device to:

identify a cessation of the first swipe subsequent to each of the menu bars being increased to a second width corresponding to a fully-expanded state; and

display the plurality of menu bars at the second width in response to the cessation of the first swipe.