Navigating among content items in a browser using an array mode

• US 9,524,272 B2
• Filed: 01/25/2013
• Issued: 12/20/2016
• Est. Priority Date: 02/05/2012
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Decker, Kevin W., Zambetti, Nicholas, Bernstein, Jeffrey Traer, Sepulveda, Raymond, Kerr, Duncan R., Missig, Julian, Brown, Matthew Irvine, Melton, Donald
• Primary Examiner(s): Hong, Stephen
• Assistant Examiner(s): Robinson, Marshon
• Application Number:
  US13/750,586
• Publication Number:
  US 20130205194A1
• Time in Patent Office: 1,425 Days
• US Class Current: 1/1
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 2203/04806 Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/017 Gesture based interaction, e.g. based on a set of recognized hand gestures interaction based on gestures traced on a digitiser G06F3/04883
• CPC Class Codes: G06F 3/0483 Interaction with page-structured environments, e.g. book metaphor
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 40/10 Text processing natural language analysis G06F40/20; semantic analysis G06F40/30; processing or translation of natural language G06F40/40

Abstract

In any context where a user can view multiple different content items, switching among content items is provided using an array mode. In a full-frame mode, one content item is visible and active, but other content items may also be open. In response to user input the display can be switched to an array mode, in which all of the content items are visible in a scrollable array. Selecting a content item in array mode can result in the display returning to the full-frame mode, with the selected content item becoming visible and active. Smoothly animated transitions between the full-frame and array modes and a gesture-based interface for controlling the transitions can also be provided.

Claims

1. A method of navigating among a plurality of content items in a browser, the method comprising:

at a computer system with a display;

displaying, in a page-display area of the browser, a first one of the plurality of content items in a full-frame mode in which the first content item fully occupies the page-display area;

while in the full-frame mode, displaying a plurality of tabs in a tab-display area of the content browser, the plurality of tabs including a first tab associated with the first content item and a second tab associated with the second content item;

receiving a first user input requesting a switch from the full-frame mode to an array mode;

in response to receiving the first input;

transitioning the page-display area from the full frame-mode to the array mode, wherein in the array mode, the plurality of content items are arranged in an array and the content items are sized such that each of two or more of the content items is at least partially visible in the page-display area;

concurrently with transitioning from the full-frame mode to the array mode, transitioning the first tab from the tab-display area to an area at the edge of the first content item; and

,

ceasing to display the plurality of tabs in the tab-display area;

receiving a second user input selecting one of the content items that is at least partially visible in the page-display area; and

transitioning the page-display area, in response to receiving the second user input, from the array mode to the full-frame mode such that the selected content item fully occupies the page-display area.

2. The method of claim 1 further comprising:

while in the array mode, receiving a third user input indicative of scrolling the array; and

shifting, in response to the third user input, the visible portion of the array such that different portions of the content items become visible.

3. The method of claim 1 further comprising:

identifying a remote device associated with the user;

obtaining information about one or more remote content items open on the remote device; and

including in the array a representation of each of the one or more remote content items.

4. The method of claim 1 wherein in the array mode the content items are arranged in an order that is determined by an order associated with the plurality of tabs.

5. The method of claim 1 wherein transitioning the page-display area from the full-frame mode to the array mode includes providing an animation in which the first content item gradually shrinks and the tab corresponding to the first content item detaches from the tab-display area and attaches to an edge of the first content item.

6. The method of claim 5 wherein transitioning the page-display area from the full-frame mode to the array mode includes providing an animation in which the tabs in the tab-display area become hidden.

7. The method of claim 5 wherein transitioning the page-display area from the array mode to the full-frame mode includes transitioning a second tab from an area at the edge of the selected content item to a predetermined location in the tab-display area of the content browser.

8. The method of claim 7 wherein the predetermined location is based on an order in which the tabs were displayed while in the full-frame mode prior to the transition to the array mode.

9. The method of claim 1 further comprising:

concurrently with transitioning from the full-frame mode to the array mode, transitioning the second tab from the tab-display area to an area at the edge of the second content item.

10. The method of claim 1 wherein the array is a one-dimensional array and wherein the content items are arranged horizontally in the array.

11. A non-transitory computer readable storage medium encoded with instructions that, when executed by a computer system with a display, cause the computer system to:

display, in a page-display area of the browser, a first one of the plurality of content items in a full-frame mode in which the first content item fully occupies the page-display area;

while in the full-frame mode, display a plurality of tabs in a tab-display area of the content browser, the plurality of tabs including a first tab associated with the first content item and a second tab associated with the second content item;

receive a first user input requesting a switch from the full-frame mode to an array mode;

in response to receiving the first user input;

transition the page-display area from the full frame-mode to the array mode, wherein in the array mode, the plurality of content items are arranged in an array and the content items are sized such that each of two or more of the content items is at least partially visible in the page-display area;

concurrently with transitioning from the full-frame mode to the array mode, transition the first tab from the tab-display area to an area at the edge of the first content item; and

,

cease to display the plurality of tabs in the tab-display area;

receive a second user input selecting one of the content items that is at least partially visible in the page-display area; and

transition the page-display area, in response to receiving the second user input, from the array mode to the full-frame mode such that the selected content item fully occupies the page-display area.

12. The computer readable storage medium of claim 11 including instructions that, when executed by the computer system, cause the computer system to:

while in the array mode, receive a third user input indicative of scrolling the array; and

shift, in response to the third user input, the visible portion of the array such that different portions of the content items become visible.

13. The computer readable storage medium of claim 11 including instructions that, when executed by the computer system, cause the computer system to:

identify a remote device associated with the user;

obtain information about one or more remote content items open on the remote device; and

include in the array a representation of each of the one or more remote content items.

14. The computer readable storage medium of claim 11 wherein in the array mode the content items are arranged in an order that is determined by an order associated with the plurality of tabs.

15. The computer readable storage medium of claim 11 wherein transitioning the page-display area from the full-frame mode to the array mode includes providing an animation in which the first content item gradually shrinks and the tab corresponding to the first content item detaches from the tab-display area and attaches to an edge of the first content item.

16. The computer readable storage medium of claim 15 wherein transitioning the page-display area from the full-frame mode to the array mode includes providing an animation in which the tabs in the tab-display area become hidden.

17. The computer readable storage medium of claim 15 wherein transitioning the page-display area from the array mode to the full-frame mode includes transitioning a second tab from an area at the edge of the selected content item to a predetermined location in the tab-display area of the content browser.

18. The computer readable storage medium of claim 17 wherein the predetermined location is based on an order in which the tabs were displayed while in the full-frame mode prior to the transition to the array mode.

19. The computer readable storage medium of claim 11 including instructions that, when executed by the computer system, cause the computer system to:

concurrently with transitioning from the full-frame mode to the array mode, transition the second tab from the tab-display area to an area at the edge of the second content item.

20. The computer readable storage medium of claim 11 wherein the array is a one-dimensional array and wherein the content items are arranged horizontally in the array.

21. A computer system, comprising:

a display;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

displaying, in a page-display area of the browser, a first one of the plurality of content items in a full-frame mode in which the first content item fully occupies the page-display area;

while in the full-frame mode, displaying a plurality of tabs in a tab-display area of the content browser, the plurality of tabs including a first tab associated with the first content item and a second tab associated with the second content item;

receiving a first user input requesting a switch from the full-frame mode to an array mode;

in response to receiving the first user input;

transitioning the page-display area from the full frame-mode to the array mode, wherein in the array mode, the plurality of content items are arranged in an array and the content items are sized such that each of two or more of the content items is at least partially visible in the page-display area;

concurrently with transitioning from the full-frame mode to the array mode, transitioning the first tab from the tab-display area to an area at the edge of the first content item; and

,

ceasing to display the plurality of tabs in the tab-display area;

receiving a second user input selecting one of the content items that is at least partially visible in the page-display area; and

transitioning the page-display area, in response to receiving the second user input, from the array mode to the full-frame mode such that the selected content item fully occupies the page-display area.

22. The computer system of claim 21 including instructions for:

while in the array mode, receiving a third user input indicative of scrolling the array; and

shifting, in response to the third user input, the visible portion of the array such that different portions of the content items become visible.

23. The computer system of claim 21 including instructions for:

identifying a remote device associated with the user;

obtaining information about one or more remote content items open on the remote device; and

including in the array a representation of each of the one or more remote content items.

24. The computer system of claim 21 wherein in the array mode the content items are arranged in an order that is determined by an order associated with the plurality of tabs.

25. The computer system of claim 21 wherein transitioning the page-display area from the full-frame mode to the array mode includes providing an animation in which the first content item gradually shrinks and the tab corresponding to the first content item detaches from the tab-display area and attaches to an edge of the first content item.

26. The computer system of claim 25 wherein transitioning the page-display area from the full-frame mode to the array mode includes providing an animation in which the tabs in the tab-display area become hidden.

27. The computer system of claim 25 wherein transitioning the page-display area from the array mode to the full-frame mode includes transitioning a second tab from an area at the edge of the selected content item to a predetermined location in the tab-display area of the content browser.

28. The computer system of claim 27 wherein the predetermined location is based on an order in which the tabs were displayed while in the full-frame mode prior to the transition to the array mode.

29. The computer system of claim 21, wherein the one or more programs further include instructions for:

concurrently with transitioning from the full-frame mode to the array mode, transitioning the second tab from the tab-display area to an area at the edge of the second content item.

30. The computer system of claim 21 wherein the array is a one-dimensional array and wherein the content items are arranged horizontally in the array.