Systems, methods, and computer program products providing an integrated user interface for reading content

• US 9,361,130 B2
• Filed: 05/03/2010
• Issued: 06/07/2016
• Est. Priority Date: 05/03/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: SanGiovanni, John, Bederson, Benjamin B.
• Primary Examiner(s): Riegler, Patrick
• Assistant Examiner(s): PAN, PHOEBE X
• Application Number:
  US12/772,738
• Publication Number:
  US 20120254745A1
• Time in Patent Office: 2,227 Days
• Field of Search: 715784-787
• US Class Current: 1/1
• CPC Class Codes: G06F 16/338 Presentation of query results
• CPC Class Codes: G06F 16/34 Browsing; Visualisation therefor
• CPC Class Codes: G06F 16/40 of multimedia data, e.g. slideshows comprising image and additional audio data retrieval of still image data G06F16/50; retrieval of audio data G06F16/60; retrieval of video data G06F16/70
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/04886 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

A method performed by a portable, processor-based device with a display screen is disclosed. The method includes rendering a Graphical User Interface (GUI) on the display screen. The GUI includes a first scrollable column with a plurality of graphical elements arranged sequentially within the first column, each graphical element of the plurality of graphical elements associated with at least one article of a plurality of articles. The GUI also includes a second scrollable column with a plurality of independent text portions, each of the text portions corresponding to a respective article. The method further includes coordinating the first and second scrollable columns so that when a first article is selected a first text portion associated with the first article is displayed on the display screen, and a first graphical element associated with the first article is displayed next to the first text portion.

Claims

1. A method, comprising:

at a portable computing device with a touch screen display;

displaying a plurality of articles in a first scrollable column and a second scrollable column on the touch screen display, wherein;

the first scrollable column and the second scrollable column are independently scrollable;

a respective article in the plurality of articles includes text for the respective article, and

one or more graphical elements contained within the respective article that are a distinct subset of the respective article from the text of the respective article;

the text for the respective article is displayed in the first scrollable column on the touch screen display;

the one or more graphical elements contained within the respective article are displayed in the second scrollable column on the touch screen display;

the first scrollable column and the second scrollable column are separate from each other, and are displayed concurrently with each other;

detecting selection of a first article in the plurality of articles;

in response to detecting selection of the first article in the plurality of articles, concurrently displaying text for the selected first article in the first scrollable column and a first graphical element contained within the selected first article in the second scrollable column, next to the text for the selected first article in the first scrollable column; and

,

in response to a first input that scrolls the selected first article in either of the first scrollable column or the second scrollable column, automatically concurrently scrolling the other scrollable column, of the first scrollable column and the second scrollable column, at a rate such that an end of the text in the selected first article in the first scrollable column is reached as a last graphical element in the selected first article in the second scrollable column is reached.

2. The method of claim 1, wherein the one or more graphical elements contained within the respective article include still pictures, video, ads, interactive widgets, and/or 3D models.

3. The method of claim 1, wherein the selected first article is concurrently displayed with one or more unselected articles in the plurality of articles and the selected first article is visually emphasized relative to the one or more unselected articles.

4. The method of claim 1, including:

detecting a second input; and

,

in response to detecting the second input;

scrolling the first scrollable column to display text for a second article in the plurality of articles, distinct from the text in the selected first article; and

scrolling the second scrollable column to display a second graphical element contained within the second article, distinct from the first graphical element contained within the selected first article, next to the text for the second article in the first scrollable column.

5. The method of claim 4, wherein the second input is a finger swipe on the touch screen display on the first scrollable column or the second is a finger swipe on the touch screen display on the second scrollable column.

6. The method of claim 4, wherein the second is activation of a button for going to a next article in the plurality of articles.

7. The method of claim 1, wherein graphical elements contained within the selected first article are cued to sections within the text for the selected first article, the method including:

detecting a second input; and

,

in response to detecting the second input;

scrolling, in the first scrollable column, the text for the selected first article from a first section of text to a second section of text in the selected first article; and

scrolling, in the second scrollable column, graphical elements contained within the selected first article from a first graphical element cued to the first section of text to a second graphical element cued to the second section of text.

8. A portable computing device, comprising:

a touch screen 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 a plurality of articles in a first scrollable column and a second scrollable column on the touch screen display, wherein;

the first scrollable column and the second scrollable column are independently scrollable;

a respective article in the plurality of articles includes

text for the respective article, and

one or more graphical elements contained within the respective article that are a distinct subset of the respective article from the text of the respective article;

the text for the respective article is displayed in the first scrollable column on the touch screen display;

the one or more graphical elements contained within the respective article are displayed in the second scrollable column on the touch screen display;

the first scrollable column and the second scrollable column are separate from each other, and are displayed concurrently with each other;

detecting selection of a first article in the plurality of articles;

in response to detecting selection of the first article in the plurality of articles, concurrently displaying text for the selected first article in the first scrollable column and a first graphical element contained within the selected first article in the second scrollable column, next to the text for the selected first article in the first scrollable column; and

,

in response to a first input that scrolls the selected first article in either of the first scrollable column or the second scrollable column, automatically concurrently scrolling the other scrollable column, of the first scrollable column and the second scrollable column, at a rate such that an end of the text in the selected first article in the first scrollable column is reached as a last graphical element in the selected first article in the second scrollable column is reached.

9. The device of claim 8, wherein the one or more graphical elements contained within the respective article include still pictures, video, ads, interactive widgets, and/or 3D models.

10. The device of claim 8, wherein the selected first article is concurrently displayed with one or more unselected articles in the plurality of articles and the selected first article is visually emphasized relative to the one or more unselected articles.

11. The device of claim 8, including instructions for:

detecting a second input; and

,

in response to detecting the second input;

scrolling the first scrollable column to display text for a second article in the plurality of articles, distinct from the text in the selected first article; and

scrolling the second scrollable column to display a second graphical element contained within the second article, distinct from the first graphical element contained within the selected first article, next to the text for the second article in the first scrollable column.

12. The device of claim 8, wherein the second input is a finger swipe on the touch screen display on the first scrollable column or the second input is a finger swipe on the touch screen display on the second scrollable column.

13. The device of claim 8, wherein the second input is activation of a button for going to a next article in the plurality of articles.

14. The device of claim 8, wherein graphical elements contained within the selected first article are cued to sections within the text for the selected first article, the device including instructions for:

detecting a second input; and

,

in response to detecting the second input;

scrolling, in the first scrollable column, the text for the selected first article from a first section of text to a second section of text in the selected first article; and

scrolling, in the second scrollable column, graphical elements contained within the selected first article from a first graphical element cued to the first section of text to a second graphical element cued to the second section of text.

15. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a portable computing device with a touch screen display, cause the device to:

display a plurality of articles in a first scrollable column and a second scrollable column on the touch screen display, wherein;

the first scrollable column and the second scrollable column are independently scrollable;

a respective article in the plurality of articles includes

text for the respective article, and

one or more graphical elements contained within the respective article that are a distinct subset of the respective article from the text of the respective article;

the text for the respective article is displayed in the first scrollable column on the touch screen display;

the one or more graphical elements contained within the respective article are displayed in the second scrollable column on the touch screen display;

the first scrollable column and the second scrollable column are separate from each other, and are displayed concurrently with each other;

detecting selection of a first article in the plurality of articles;

in response to detecting selection of the first article in the plurality of articles, concurrently displaying text for the selected first article in the first scrollable column and a first graphical element contained within the selected first article in the second scrollable column, next to the text for the selected first article in the first scrollable column; and

,

in response to a first input that scrolls the selected first article in either of the first scrollable column or the second scrollable column, automatically concurrently scrolling the other scrollable column, of the first scrollable column and the second scrollable column, at a rate such that an end of the text in the selected first article in the first scrollable column is reached as a last graphical element in the selected first article in the second scrollable column is reached.

16. The computer readable storage medium of claim 15, wherein the one or more graphical elements contained within the respective article include still pictures, video, ads, interactive widgets, and/or 3D models.

17. The computer readable storage medium of claim 15, wherein the selected first article is concurrently displayed with one or more unselected articles in the plurality of articles and the selected first article is visually emphasized relative to the one or more unselected articles.

18. The computer readable storage medium of claim 15, including instructions, which when executed by the portable computing device with the touch screen display, cause the device to:

detect a second input; and

,

in response to detecting the second input;

scroll the first scrollable column to display text for a second article in the plurality of articles, distinct from the text in the selected first article; and

scroll the second scrollable column to display a second graphical element contained within the second article, distinct from the first graphical element contained within the selected first article, next to the text for the second article in the first scrollable column.

19. The computer readable storage medium of claim 15, wherein the second input is a finger swipe on the touch screen display on the first scrollable column or the second input is a finger swipe on the touch screen display on the second scrollable column.

20. The computer readable storage medium of claim 15, wherein the second input is activation of a button for going to a next article in the plurality of articles.

21. The computer readable storage medium of claim 15, wherein graphical elements contained within the selected first article are cued to sections within the text for the selected first article, the computer readable storage medium including instructions, which when executed by the portable computing device with the touch screen display, cause the device to:

detect a second input; and

,

in response to detecting the second input;

scroll, in the first scrollable column, the text for the selected first article from a first section of text to a second section of text in the selected first article; and

scroll, in the second scrollable column, graphical elements contained within the selected first article from a first graphical element cued to the first section of text to a second graphical element cued to the second section of text.