US20160357364A1 - Graphical User Interface for a Document Viewing Application - Google Patents
Graphical User Interface for a Document Viewing Application Download PDFInfo
- Publication number
- US20160357364A1 US20160357364A1 US14/872,045 US201514872045A US2016357364A1 US 20160357364 A1 US20160357364 A1 US 20160357364A1 US 201514872045 A US201514872045 A US 201514872045A US 2016357364 A1 US2016357364 A1 US 2016357364A1
- Authority
- US
- United States
- Prior art keywords
- document
- article
- user
- documents
- stage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Abandoned
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] 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
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G06F17/212—
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] 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
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] 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 using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] 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
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] 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 using a touch-screen or digitiser, e.g. input of commands through traced gestures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2200/00—Indexing scheme for image data processing or generation, in general
- G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
Definitions
- Document readers are often used for viewing electronic documents, such as electronic articles or webpages, on a device.
- the electronic articles are often from various sources or publishers, and related to a variety of different topics. Users often navigate between various groupings of articles (e.g., articles from a particular source, articles related to a particular topic, etc.), however, as documents often lead to other documents (e.g., through various links and other relationships), it is often difficult for a user to go back to view interesting documents that were displayed in previous groupings.
- Some embodiments provide a document reader application (also referred to as a document viewing application) for viewing and navigating between various documents.
- the document reader of some embodiments collects documents (e.g., magazine articles, web blog posts, word processing documents, slides of a presentation, etc.) from a variety of different sources (e.g., websites, magazine publishers, newspapers, etc.). In this application, many of the examples are described with reference to articles, but it should be clear to one skilled in the art that the articles may refer to any type of document.
- the document reader provides both native content (i.e., formatted content received directly from a publisher) and web content (i.e., content retrieved from a website) for display in the application.
- the document reader provides a graphical user interface (GUI) for onboarding (i.e., adding) channels for a user of the document reader.
- GUI graphical user interface
- the document reader displays a set of channel selection items in a display area of the GUI.
- the channel selection items of some embodiments include both sources (e.g., websites, magazine publishers, etc.) and topics.
- the topics may include different subjects, such as people, places, categories, products, companies, etc.
- the document reader of some embodiments Based on the selection of a channel selection item, the document reader of some embodiments provides additional channel selection items for additional sources and topics that are related to the selected channel selection item. In some embodiments, when the additional channel selection items cannot be displayed in the display area of the GUI, the document reader provides a visual effect (e.g., rippling) to indicate that new channel selection items have been added, but are not yet visible in the display area.
- a visual effect e.g., rippling
- the document reader retrieves documents published by the selected sources and related to the selected topics to be displayed in the GUI of the document reader.
- the document reader of some embodiments then provides different feeds, or groupings, of the identified documents (e.g., a channel feed with documents from a specific channel, a topic feed with documents related to a particular topic, etc.).
- the document reader of some embodiments also provides a feed for a set of documents that a user of the document reader has marked, or saved, for future viewing.
- the document reader provides an aggregated feed of the identified documents published by all of the selected sources and related to all of the different topics.
- the document reader of some embodiments provides different views of the aggregated feed throughout the day.
- the document reader provides a morning view of the aggregated feed with a featured article of the day that is presented in a different manner than any of the other documents in the aggregated feed.
- the featured article of some embodiments is only presented at certain times (e.g., when the application is opened for the first time in a given day or at various points throughout the day).
- the document reader provides the aggregated feed based on the user's previous viewing of documents in the feed.
- the document reader provides a GUI for adding additional channels for a user based on the user's individual reading preferences, selected channels, global user preferences (e.g., hot or trending channels), etc.
- the document reader provides a first interface for adding channels during an initial onboarding process and a second different interface for adding additional channels.
- the interface for adding additional channels in some embodiments provides recommendations for different channels (sources and topics), as well as a taxonomy view and search tool for discovering new channels.
- the document reader of some embodiments In order to display a particular feed in the GUI, the document reader of some embodiments generates a layout for the documents of the feed by generating and arranging document panes that provide summary information (e.g., title, image, excerpt, etc.) for each document of the feed.
- the document panes are arranged within a display area so that a user can view and interact with the various documents.
- the document reader of some embodiments provides different visual styles for the document panes based on whether the user of the application has seen (or scrolled past) a document or clicked through to read a document.
- the document reader provides a document marking menu for performing various operations on the document of a particular document pane.
- the document marking menu provides several selectable UI items for performing different operations (e.g., like, dislike, share, save, etc.) on the particular document.
- the document marking menu of some embodiments is only displayed while a user holds down a location (e.g., a specific button, or any location in the document pane).
- the user selects the different operations by sliding along the document marking menu to select a UI item.
- the UI items are placed on the document marking menu such that opposing actions (e.g., like and dislike) are performed by sliding along the document marking menu in opposing directions.
- the document reader of some embodiments displays a document view of the selected document for viewing by the user.
- the view that is presented to the user is different for native content and web content.
- the document reader provides a full article view for native articles, while providing an excerpt view for web articles.
- the excerpt view of some embodiments provides a short excerpt or summary of the web article, as well as a link to a full version of the document.
- the user of the document reader uses gestures (e.g., swiping up) to reach the full version of the document.
- the document reader of some embodiments preloads additional documents related to the loaded document. For example, the document reader of some embodiments preloads neighboring documents (i.e., a previous document and a next document) for a document selected from a feed. When the displayed view is an excerpt view of a web document, the document reader of some embodiments also preloads the full web document.
- neighboring documents i.e., a previous document and a next document
- the document reader of some embodiments also preloads the full web document.
- the document reader provides an end-of-document display region for displaying document panes for additional documents related to the document.
- the end-of-document display region of some embodiments provides a first scrollable region for displaying documents from the same source as the displayed document and a second scrollable region for displaying documents that are related to a topic of the displayed document.
- the document reader also includes a section of related document panes embedded within the body of the article itself.
- Some embodiments provide a method for navigating through a hierarchy of documents.
- new levels of the hierarchy are defined as a user navigates between different groups or feeds of the document reader (e.g., when a user selects a related article from the end-of-document display region).
- the document reader of some embodiments detects a first type of input (e.g., swipes within the display area, key entries, etc.) for navigating through the documents of a feed at a single level of the hierarchy, and a second type of input for navigating through pivot points identified in a history of documents that the user has viewed across multiple levels of the hierarchy.
- a first type of input e.g., swipes within the display area, key entries, etc.
- FIGS. 1 a - b illustrate an example of an initial interface for onboarding channels in a document reader.
- FIG. 2 illustrates another example of an initial interface for onboarding channels in a document reader.
- FIG. 3 conceptually illustrates a process for generating channel selection items.
- FIG. 4 illustrates an example of adding a new source channel for a document reader.
- FIG. 5 illustrates another example of adding a new topic channel for a document reader.
- FIG. 6 illustrates an example of an alternative interface for exploring new channels.
- FIG. 7 illustrates an example of an initial animation for an onboarding interface.
- FIG. 8 illustrates an example of a ripple effect to indicate the addition of off-screen items during the onboarding process.
- FIG. 9 illustrates an example of displaying a feed view of an aggregated feed and an article view of a particular document from the aggregated feed.
- FIG. 10 illustrates an example of different elements of a document pane.
- FIG. 11 illustrates an example of displaying a feed layout for a selected channel.
- FIG. 12 illustrates an example of displaying saved documents.
- FIG. 13 illustrates an example of intelligent cropping to fit images to a particular aspect ratio.
- FIG. 14 illustrates an example of receiving updates while displaying a feed layout.
- FIG. 15 illustrates an example of a document layout for a mobile device.
- FIG. 16 illustrates an example of a layout for a morning feed at various times.
- FIG. 17 conceptually illustrates a process for providing a morning feed.
- FIG. 18 illustrates an example of a document marking menu for performing different operations on articles in a feed layout.
- FIG. 19 illustrates an example of using the document marking menu to share a document in a document feed.
- FIG. 20 illustrates an example of an alternative UI for performing different operations on articles in a feed layout.
- FIG. 21 illustrates an example of displaying a web document.
- FIGS. 22 and 23 illustrate examples of displaying a full article from an excerpt view of a web document.
- FIG. 24 illustrates an example of the animation of a document pane for a web document in a feed to a full document view.
- FIG. 25 illustrates an example of displaying a native document.
- FIG. 26 illustrates an example of the animation of a document pane for a native document in a feed to a full document view.
- FIG. 27 illustrates an example of preloading neighboring articles when a particular document is selected.
- FIG. 28 conceptually illustrates an example of preloading documents in a document reader application.
- FIG. 29 illustrates another example of providing an end-of-article display region with related documents.
- FIG. 30 illustrates an example of providing an end-of-article display region with related documents.
- FIG. 31 illustrates an example of interacting with the end-of-document display region.
- FIG. 32 illustrates an example of embedding related document panes at the end of a document.
- FIG. 33 illustrates yet another example for providing related document panes at the end of a document.
- FIG. 34 conceptually illustrates a process for navigating a hierarchy of documents.
- FIG. 35 illustrates an example of navigating between documents at a particular level of a hierarchy of documents.
- FIG. 36 illustrates an example of navigating to different levels of the hierarchy of documents.
- FIG. 37 illustrates an example of navigating back through pivot points of the navigation.
- FIGS. 38 and 39 illustrate different examples of navigating back from a particular document.
- FIG. 40 illustrates an example of navigating back to a parent feed from a document in the hierarchy.
- FIGS. 41 and 42 illustrate different examples of navigating forward from a particular document.
- FIG. 43 illustrates an example of an architecture of a mobile computing device with which some embodiments are implemented.
- FIG. 44 conceptually illustrates another example of an electronic system with which some embodiments of the invention are implemented.
- Some embodiments provide a document reader application for viewing and navigating between various documents.
- the document reader of some embodiments collects documents (e.g., magazine articles, web blog posts, word processing documents, slides of a presentation, etc.) from a variety of different sources (e.g., websites, magazine publishers, newspapers, etc.). In this application, many of the examples are described with reference to articles, but it should be clear to one skilled in the art that the articles may refer to any type of document.
- the document reader provides both native content (i.e., formatted content received directly from a publisher) and web content (i.e., content retrieved from a website) for display in the application.
- the document reader provides a graphical user interface (GUI) for onboarding (i.e., adding) channels for a user of the document reader.
- GUI graphical user interface
- the document reader displays a set of channel selection items in a display area of the GUI.
- the channel selection items of some embodiments include both sources (e.g., websites, magazine publishers, etc.) and topics.
- the topics may include different subjects, such as people, places, categories, products, companies, etc.
- the document reader of some embodiments Based on the selection of a channel selection item, the document reader of some embodiments provides additional channel selection items for additional sources and topics that are related to the selected channel selection item. In some embodiments, when the additional channel selection items cannot be displayed in the display area of the GUI, the document reader provides a visual effect (e.g., rippling) to indicate that new channel selection items have been added, but are not yet visible in the display area.
- a visual effect e.g., rippling
- the document reader retrieves documents published by the selected sources and related to the selected topics to be displayed in the GUI of the document reader.
- the document reader of some embodiments then provides different feeds, or groupings, of the identified documents (e.g., a channel feed with documents from a specific channel, a topic feed with documents related to a particular topic, etc.).
- the document reader of some embodiments also provides a feed for a set of documents that a user of the document reader has marked, or saved, for future viewing.
- the document reader provides an aggregated feed of the identified documents published by all of the selected sources and related to all of the different topics.
- the document reader of some embodiments provides different views of the aggregated feed throughout the day.
- the document reader provides a morning view of the aggregated feed with a featured article of the day that is presented in a different manner than any of the other documents in the aggregated feed.
- the featured article of some embodiments is only presented at certain times (e.g., when the application is opened for the first time in a given day). At other times, the document reader provides the aggregated feed based on the user's previous viewing of documents in the feed.
- the document reader provides a GUI for adding additional channels for a user based on the user's individual reading preferences, selected channels, global user preferences (e.g., hot or trending channels), etc.
- the document reader provides a first interface for adding channels during an initial onboarding process and a second different interface for adding additional channels.
- the interface for adding additional channels in some embodiments provides recommendations for different channels (sources and topics), as well as a taxonomy view and search tool for discovering new channels.
- the document reader of some embodiments In order to display a particular feed in the GUI, the document reader of some embodiments generates a layout for the documents of the feed by generating and arranging document panes that provide summary information (e.g., title, image, excerpt, etc.) for each document of the feed.
- the document panes are arranged within a display area so that a user can view and interact with the various documents.
- the document reader of some embodiments provides different visual styles for the document panes based on whether the user of the application has seen (or scrolled past) a document or clicked through to read a document.
- the document reader provides a document marking menu for performing various operations on the document of a particular document pane.
- the document marking menu provides several selectable UI items for performing different operations (e.g., like, dislike, share, save, etc.) on the particular document.
- the document marking menu of some embodiments is only displayed while a user holds down a location (e.g., a specific button, or any location in the document pane).
- the user selects the different operations by sliding along the document marking menu to select a UI item.
- the UI items are placed on the document marking menu such that opposing actions (e.g., like and dislike) are performed by sliding along the document marking menu in opposing directions.
- the document reader of some embodiments displays a document view of the selected document for viewing by the user.
- the view that is presented to the user is different for native content and web content.
- the document reader provides a full article view for native articles, while providing an excerpt view for web articles.
- the excerpt view of some embodiments provides a short excerpt or summary of the web article, as well as a link to a full version of the document.
- the user of the document reader uses gestures (e.g., swiping up) to reach the full version of the document.
- the document reader of some embodiments preloads additional documents related to the loaded document. For example, the document reader of some embodiments preloads neighboring documents (i.e., a previous document and a next document) for a document selected from a feed. When the displayed view is an excerpt view of a web document, the document reader of some embodiments also preloads the full web document.
- neighboring documents i.e., a previous document and a next document
- the document reader of some embodiments also preloads the full web document.
- the document reader provides an end-of-document display region for displaying document panes for additional documents related to the document.
- the end-of-document display region of some embodiments provides a first scrollable region for displaying documents from the same source as the displayed document and a second scrollable region for displaying documents that are related to a topic of the displayed document.
- the document reader also includes a section of related document panes embedded within the body of the article itself.
- Some embodiments provide a method for navigating through a hierarchy of documents.
- new levels of the hierarchy are defined as a user navigates between different groups or feeds of the document reader (e.g., when a user selects a related article from the end-of-document display region).
- the document reader of some embodiments detects a first type of input (e.g., swipes within the display area, key entries, etc.) for navigating through the documents of a feed at a single level of the hierarchy, and a second type of input for navigating through pivot points identified in a history of documents that the user has viewed across multiple levels of the hierarchy.
- a first type of input e.g., swipes within the display area, key entries, etc.
- Section I describes examples for adding channels (i.e., topics and sources) to a user's collection in the document reader application.
- Section II then describes different feed views for viewing document feeds.
- This section also describes an interface for interacting with the documents of a feed from the different feed views.
- Section III describes animations and document views for different types of documents.
- Section IV describes navigation between documents at different levels of a hierarchy within the document reader application.
- Section V describes several example electronic systems that implement some embodiments described herein.
- the document reader is for viewing articles and other content that is provided by a variety of sources regarding a variety of different topics.
- the user selects various different sources and topics to add to their favorites collection based on their interests.
- the document reader then retrieves content from the various sources and content related to the various topics, and presents different views (e.g., feed views, article views, etc.) of the content to the user.
- FIGS. 1 a - b illustrate an example of an initial interface for onboarding (or subscribing to) channels in a document reader in four stages 101 - 104 .
- the initial interface is presented when a user first opens a document reader, allowing the user to select channels of interest to the user.
- the first stage 101 shows a graphical user interface (GUI) 100 that includes a status bar 110 and a channel selection region 130 with several channel selection items.
- the channel selection items 110 represent different sources and topics for documents.
- Source channel selection items represent various different providers of content, such as magazine publishers, newspaper publishers, websites, etc.
- Topic channel selection items represent topics or categories that the user may be interested in. Topic channel selection items do not represent any particular source, but rather may include documents related to the topic from a variety of different sources.
- the source channel selection items are presented differently (i.e., different shapes, colors, styles, etc.) from the topic channel selection items.
- the document reader application is meant to provide the feel of a magazine so the channel selection items are presented with the familiar aspect ratios of a magazine. As the images for the various sources and topics may vary widely, the document reader of some embodiments performs various operations for creating images with the familiar magazine aspect ratio. In some embodiments, the document reader application provides different shapes and sizes (e.g., circular items, etc.) for the channel selection items.
- the document reader of some embodiments stretches the bottom third of the image and applies a blurring effect to give the appearance of a portrait image while maintaining the detail of the original image.
- a user selects a source channel selection item 150 for a source, the Scoop, a fashion magazine.
- the second stage 102 shows that channel selection item 150 has been selected.
- Channel selection item 150 includes an image 152 , and a logo region 156 .
- the logo regions in some embodiments provide different appearances, or styles for selected and unselected channel selection items.
- the logo regions for unselected channel selection items are desaturated or presented in grayscale, while selected channel selection items are presented with a colored background.
- the background colors for different sources or brands are associated with a brand color.
- the brand color is a color that is associated with the brand.
- the logo region 156 and selection ring 154 for channel selection item 150 are presented in a brand color associated with the particular source (i.e., “Score”).
- topic channel selection items are also assigned a brand color to be associated with the particular topic.
- the second stage 102 also shows that the size of the channel selection item 150 is made smaller to indicate that it is being selected.
- the image 152 for channel selection item 150 is zoomed out, exposing more of the image 152 .
- the image 152 shows more of the little finger in the image than the same image in the first stage 101 .
- the third stage 103 shows that, upon selection of channel selection item 150 , new channel selection items 160 are added to the channel selection region 130 .
- channel selection items 160 include channel selection items for new sources (i.e., other fashion magazines) as well as for new topics (i.e., fashion) that are related to the selected channel selection item 150 .
- a process for generating and displaying the new channel selection items is described with reference to FIG. 3 below.
- the new channel selection items 160 have risen into the group of channel selection region 130 .
- some of the channel selection items like channel selection items 160 , are only partially displayed in the GUI 100 .
- the channel selection region 130 is full, new channel selection items may not be displayed at all, until a user scrolls down through the channel selection region 130 .
- FIGS. 1 a - b the channel selection items are displayed as rectangular tiles, with proportions similar to magazines or other periodicals.
- the document reader provides channel selection items with different appearances and layouts to provide a pleasing interface for a user of the application.
- FIG. 2 illustrates another example of an initial interface for onboarding (or subscribing to) channels in a document reader in three stages 201 - 203 .
- the first stage 201 shows a graphical user interface (GUI) 200 with a channel selection region 230 with several round channel selection items. Much like the channel selection items of FIGS. 1 a - b , the channel selection items of this example represent different sources and topics for documents. The first stage 201 also shows that a user selects a source channel selection item 250 for a source, Allure, a fashion magazine.
- GUI graphical user interface
- the second stage 202 shows that channel selection item 250 has been selected.
- Channel selection item 250 includes a selection ring 254 and a logo region 256 .
- the logo region 256 shows images or other descriptors for the source or topic associated with each channel selection item.
- the second stage 202 also shows that, upon selection of channel selection item 250 , new channel selection items 160 for other sources and topics are added to the channel selection region 230 .
- the new channel selection items 260 have risen to the group of channel selection items in the channel selection region 230 .
- the newly added channel selection items are not yet visible to the user.
- the interface provides an animation (e.g., a ripple animation, etc.) to indicate the addition of the new off-screen channel selection items.
- FIG. 3 conceptually illustrates a process for generating channel selection items.
- the process 300 of some embodiments is performed by the document reader application to provide additional suggested channels for a user.
- the process 300 identifies (at 305 ) the channels to which the user has subscribed.
- the process 300 Based on the subscribed channels, the process 300 identifies (at 310 ) a set of sources related to the subscribed channels. In some embodiments, the document reader application maintains a set of categories, or tags, for each source and topic. Based on the categories for the subscribed channels, the process 300 of some embodiments identifies other sources and topics that fall within the same categories. The process 300 similarly identifies (at 315 ) a set of topics related to the subscribed channels. The process 300 then displays (at 320 ) a set of recommended channel selection items based on the identified sets of sources and topics.
- new channels can be added to a user's collection after the initial onboarding process.
- the interface for adding additional channels in some embodiments provides recommendations for different channels (sources and topics), as well as a taxonomy view and search tool for discovering new channels.
- FIGS. 4 and 5 illustrate examples of adding new channels for the document reader.
- FIG. 4 illustrates an example of a GUI 400 for adding a new source channel for a document reader in four stages 401 - 404 .
- the first stage 401 shows a GUI 400 for a document reader that includes a status bar 410 , a channel view 430 , and a toolbar 420 .
- the channel view 430 is just one of the different views that the document reader displays for a user.
- the toolbar 420 includes icons for performing various operations in the document reader application, such as viewing different feeds and articles, as well as adding new channels.
- the first stage 401 shows that the user selects an explore icon 426 from the toolbar 420 .
- the selection causes the GUI 400 to show an explore view 440 , that includes a suggested sources region 450 , a suggested topics region 460 , and a browse region 470 , as illustrated in the second stage 402 .
- the explore view 440 includes various regions for finding new content that can be added to the favorite channels list of a user.
- the explore view 440 of the second stage 402 shows that suggestions for different sources and topics may be provided in separate regions (i.e., suggested sources region 450 and suggested topics region 460 ), but as shown in the onboarding interface of FIGS. 1 a - b above, in some embodiments, the sources and topics are intermixed.
- sources are displayed differently from topics.
- the channel selection items for sources in the suggested sources region 450 in some embodiments are presented as circular channel selection items, like those described above with reference to FIG. 2
- topics are displayed as rectangular channel selection items, as shown in suggested topics region 460 .
- the different appearances allow a user to quickly distinguish between channel selection items for sources and topics.
- Pose Magazine is listed as a topic, rather than as a source. Selection of the channel selection item for Pose Magazine would provide a feed of articles about Pose Magazine, and not necessarily from Pose Magazine. In some embodiments, a source selection item for the source Pose Magazine would be presented as a circular channel selection item, while a topic channel selection item for articles about Pose Magazine would be presented as a rectangular channel selection item.
- the browse region 470 is described below with reference to FIG. 5 .
- the document reader provides the different suggested channels and topics based on a variety of different factors.
- the document reader provides suggestions based on the channels that the user has subscribed to or based on properties of the articles that the user reads in the application.
- the articles are tagged with different topics or categories and the document reader makes suggestions for topics and/or sources based on the tags.
- the document reader of some embodiments suggests different channels and topics that are popular or trending with other users of the application.
- the second stage 402 also shows that the user selects channel selection item 452 from suggested sources region 450 .
- the third stage 403 shows that channel selection item 452 has been selected, as indicated by a checkmark 454 on channel selection item 452 . If the user selects the checkmark 454 (or channel selection item 452 ) again, the channel selection item 452 would be unselected and return to showing a plus sign.
- the suggested sources region 450 of some embodiments is provided as a region that is scrollable to reveal additional sources.
- the third stage 403 shows that the user scrolls through suggested sources region 450 to display new source selection items 459 as shown in the fourth stage 404 .
- FIG. 5 illustrates another example of adding a new topic channel for a document reader in three stages 501 - 503 .
- the first stage 501 shows GUI 400 with explore view 440 as described above with reference to FIG. 4 .
- the user scrolls down through the explore view 440 .
- the scrolling in the first stage 501 reveals more detail of the browse region 470 , as illustrated in the second stage 502 .
- the browse region 470 shows a taxonomy of different topics and sources, organized into several different categories.
- a user of the document reader can browse the browse region 470 to add additional channels to their favorites list.
- the user selects the topic channel selection item 565 .
- Channel selection item 565 adds a channel with articles related to technology from a variety of different sources.
- a topic channel only includes articles from sources that the user has added to their collection, while in other embodiments, topic channels include articles from other sources as well.
- the third stage 503 shows a checkmark 567 in the topic channel selection item 565 .
- FIG. 6 illustrates an example of an alternative interface for exploring new channels.
- GUI 600 is similar to the GUI 400 of FIGS. 4 and 5 , but rather than rectangular tiles, the GUI 600 presents spherical channel selection items for sources in the sources section 650 and rectangular topic selection items for topics in the topics section 660 .
- the GUI 600 may use various different appearances for sources and topics throughout the application.
- the GUI 600 provides a search bar 614 .
- the search bar 614 of some embodiments allows a user to search for particular results in the explore view 640 , filtering the channel selection items displayed in the explore view 640 based on user input in the search bar 614 .
- the various search and exploration functions allow a user to quickly and efficiently identify interesting channels to add to their collection.
- FIG. 7 illustrates an example of an initial onboarding animation that is shown when a user first begins the document reader application.
- GUI 700 shows an initial welcome screen with a welcome message 705 .
- the second stage 702 shows a group of blurred, channel selection tiles 720 for a group of channels (sources and topics) that fade in behind the welcome message 705 on the welcome screen.
- the second stage 702 also shows that the user selects a link 730 to begin adding channels for the document reader application.
- the selection in the second stage 702 causes welcome message 705 to fade out as the channel selection tiles 720 come into focus and grow larger, as illustrated in the third stage 703 .
- the GUI 700 shows status bar 710 and channel selection region 730 with the full-sized channel selection items 720 as described above in FIG. 1 .
- the user is then able to subscribe to channels, adding them to the user's favorite channels list to customize the content provided to the user through the document reader application.
- new channel selection items are added to the channel selection region based on the user's selections.
- the document reader of some embodiments provides a visual effect to indicate the addition of off-screen items.
- FIG. 8 illustrates an example of a ripple effect to indicate the addition of off-screen items during the onboarding process in four stages 801 - 804 .
- the GUI 800 shows status bar 810 and channel selection region 830 .
- the channel selection region 830 is full of channel selection items.
- the first stage 801 also shows that a user has selected channel selection item 850 .
- the document reader adds new channel selection items (not shown) to the channel selection region 830 , but the new items are not displayed because the displayed channel selection region 830 is already full.
- GUI 800 provides a visual effect, such as a ripple effect, that indicates that new channel selection items for suggested channels are available.
- the strength or visibility of the visual effect is dependent on the number of channel selection items that are added. Alternatively, or conjunctively, the strength or visibility of the visual effect is dependent on the number of channel selection items that are already available in the group of channel selection items. For example, in some embodiments, when the group of channel selection item already includes several off-screen channel selection items, the visual effect is weaker or more subtle than when the new channel selection items are closer to the bottom of the visible display area of the GUI.
- the second stage 802 shows that a ripple effect animation has begun.
- Channel selection items 852 - 858 have risen in a staggered fashion from their positions at the bottom of the channel selection region 830 .
- channel selection item 852 begins to descend back to its original position as channel selection items 854 - 858 continue to rise.
- the staggered movement of the channel selection items 852 - 858 cause a rippling, wave-like effect at the bottom of the screen, indicating to the user that new channel selection items (not shown) have been made available.
- the fourth stage 804 shows that channel selection items 852 - 858 have returned to their original positions.
- the document reader application of some embodiments provides a document feed view for viewing summaries or excerpts of several documents in a single ordered layout.
- the feed layouts are generated based on user preferences in order to provide an aesthetically pleasing display of document summaries.
- the generation of the feed layouts is further described in the concurrently filed U.S. Patent Application ** having Attorney Docket No. APLE.P0689 and entitled “Document Summary Feed Generation Method, Apparatus, and System”, which is incorporated herein by reference.
- FIG. 9 illustrates an example of displaying a feed view of an aggregated feed and an article view of a particular document from the aggregated feed in four stages 901 - 904 .
- the first stage 901 shows a GUI 900 that includes a status bar 910 , a main display area 930 , and a toolbar 914 .
- the user selects an icon 922 (“For You”) to display a feed layout 940 for an aggregated feed as illustrated in the second stage 902 .
- the second stage 902 shows the feed layout 940 , which displays document panes for each of several documents in the aggregated feed.
- the document panes are of varying sizes and contain different amounts of information (e.g., some document panes provide an image, while others do not).
- the document panes of some embodiments may use different internal layouts for the information presented in the document pane, with each internal layout using different aspect ratios, different amounts of text, etc.
- FIG. 10 illustrates an example of different elements of a document pane.
- the document pane 1000 includes an image 1010 , a title 1012 , a brief summary or excerpt 1014 , source information 1016 , and time value 1018 .
- the image 1010 is provided by the source along with the brief summary or excerpt 1014 for the corresponding article.
- the document reader application performs a crop on the image received from the source in order to fit the image to the layout of the document pane or to provide a parallax effect when animating from the feed view to an article view, as described below.
- Source information 1016 includes a logo and a source name (“PR”).
- the logo and source name are provided by the source of the article.
- the document reader when a logo is not available, the document reader generates a logo based on other information (e.g., source name, brand color) retrieved from the source.
- Time value 1018 of some embodiments is a time since the article was retrieved for the user. Alternatively, or conjunctively, time value 1018 provides a time since the article was published by the source, or the actual date/time of publication.
- the second stage 902 further shows that the user scrolls up through the document panes of the feed layout 940 .
- the feed layout 940 shows new document panes 942 and 944 .
- the third stage 903 also shows that the user has selected document pane 944 .
- GUI 900 shows an article toolbar 990 for interacting with the document and a full article view 950 corresponding to the selected document pane 944 as illustrated in the fourth stage 904 .
- the full article view 950 like the document pane 1000 described above with reference to FIG. 10 , includes an image, title, source information, and time value. However, rather than the summary or excerpt text, the full article view 950 includes the full content 988 of the article.
- the full content of articles may include additional text, images, graphics, videos, and other elements that are not displayed in the document panes.
- FIG. 11 illustrates an example of displaying a feed layout for a selected channel in four stages 1101 - 1104 .
- GUI 1100 shows status bar 910 , toolbar 920 , and an aggregated feed layout 940 as described above.
- the first stage 1101 also shows that the user selects a favorites icon 1124 to display a favorites view 1130 for the user as illustrated in the second stage 1102 .
- favorites view 1130 displays channel tiles that represent different sources (e.g., Newz, CQ, etc.) and topics (e.g., smartphones) that the user has added to their favorite channels list.
- the favorite channels may be selected by the user during the initial onboarding process or as the user explores for new channels from within the document reader application.
- the second stage 1102 also shows that the user scrolls through the favorites view 1130 to display more of the channel tiles.
- the user has scrolled to the bottom of the favorites view 1130 and selects channel card 1132 (i.e., for Self magazine).
- the GUI 1100 shows status bar 910 , toolbar 920 and a channel feed view 1140 in the fourth stage 1104 .
- Status bar 910 displays the title of the selected channel (i.e., Selfie magazine), but, unlike the aggregated feed layout 940 of FIG. 9 , the channel feed layout 1140 only includes articles from the selected channel (i.e., Selfie magazine). If, rather than selecting a source channel, the user had selected a topic channel in the third stage 1103 (e.g., smartphones), then the channel feed layout 1140 would provide articles from several sources, but would only include articles related to the selected topic.
- FIG. 12 illustrates an example of displaying saved documents in two stages 1201 and 1202 .
- the first stage 1201 shows GUI 1200 displays status bar 910 , toolbar 920 , and aggregated feed layout 940 .
- the user selects the saved icon 1228 from toolbar 920 to display a saved document layout 1230 as illustrated in the second stage 1202 .
- the saved document layout 1230 includes document panes for articles that were saved in the previous days and weeks.
- the saved articles are articles that the user has previously marked for saving through various interfaces described below.
- the document reader application stores full versions of each of the saved articles for offline viewing.
- images from the document may be cropped for the document pane to fit within a particular document pane.
- a document may include a portrait image while the document pane for the document may call for a landscape image.
- simple cropping of an image may have undesirable results, as important portions of the image may be cut off or misaligned.
- FIG. 13 illustrates an example of intelligent cropping to fit images to a particular aspect ratio.
- the first image 1301 illustrates an original image, as received from the source for a particular document.
- the original image 1301 may be the image that is used within a native article layout or may be an image provided with an article summary in a web feed (e.g., RSS, Atom, etc.).
- the second image 1302 illustrates a simple top cropping method that takes a portion 1310 of the original image to fit the desired aspect ratio that begins at the top of the original image.
- the proportions of the cropped portion 1310 are undesirable, as unnecessary space is left at the top of the player's head and the arms and trophies are cropped awkwardly.
- the third image 1303 illustrates a simple centered cropping method that captures a portion 1320 that is vertically centered on the image.
- the fourth image 1304 illustrates an intelligent cropping method.
- the intelligent cropping method begins the cropped portion 1330 at a calculated distance from the top of the image. The distance is calculated based on the aspect ratio of the image and creates a more pleasing effect in most images, providing the most desirable portions of the original image within the cropped portion 1330 .
- the calculation of some embodiments is based on the rule of thirds, which many photographers use, which places points of interest at intersections of imaginary lines that divide the image into thirds.
- the intelligent cropping method of some embodiments identifies gravity points at these intersections and is formulated to prominently capture a portion of the image with a desired aspect ratio.
- the intelligent cropping method is formulated such that the captured portion includes a set of the identified gravity points, regardless of the original aspect ratio of the image.
- the document reader while displaying a feed layout, the document reader updates the feed layout periodically or upon receiving instructions from a user to update the particular feed.
- the document reader of some embodiments retrieves new documents from the various sources and appends them to the currently displayed feed layout.
- FIG. 14 illustrates an example of receiving updates while displaying a feed layout.
- the GUI 1400 displays a status bar 1410 , toolbar 920 , and an aggregated feed layout 940 as described in FIG. 9 above.
- the status bar 1410 in addition to a title for the aggregated feed, displays a time and other device information.
- the second stage 1402 shows that the document reader has received updates to the current feed.
- the document reader provides a notification 1412 in the status bar 1410 of new documents that have been added to the feed.
- the notification 1412 indicates the number of new stories retrieved for a time period (e.g., “12 new stories this afternoon”).
- the aggregated feed layout 940 does not change.
- the notification 1412 appears for a designated period of time before animating back to identify the particular channel or view of the displayed feed.
- the third stage 1403 shows that after a short period of time, the status bar 1410 displays the title (“For You”) and a badge 1414 , which indicates the number of new articles that have not yet been seen. In some embodiments, the number in the badge changes as the user views documents by scrolling through the feed layout 940 .
- the document reader application of some embodiments provides different interfaces for different types and sizes of devices.
- the document reader provides a larger interface for tablet type devices and a smaller interface for other mobile devices (e.g., smartphones, etc.).
- FIG. 15 illustrates an example of a document layout for a smaller interface of a mobile device in four stages 1501 - 1504 .
- the first stage 1501 shows GUI 1500 with status bar 1510 , toolbar 1520 , and aggregated feed layout 1530 .
- the status bar 1510 and toolbar 1520 are similar to the status bar and toolbar of FIG. 9 .
- a similar interface is used between a variety of different devices and screen orientations to provide a consistent document reader experience.
- the document panes displayed in the aggregated feed layout 1530 include images, titles, source information, and time values for each document.
- the different document panes may have different layouts and sizes.
- the aggregated feed layout 1530 of some embodiments provides a different layout for the document panes of the aggregated feed.
- the document panes in the aggregated feed layout 1530 do not include the brief summary or excerpt of the article in order to save space and increase visibility. Due to the smaller screen size of some mobile devices, the document reader provides a simplified list view for displaying document panes of an article feed rather than using more complicated layouts.
- the first stage 1501 also shows that the user scrolls through the aggregated feed layout 1530 to show additional document panes, as illustrated in the second stage 1502 .
- the top article 1550 is no longer displayed in the feed layout 1530 .
- the user scrolls back up toward the top of the feed layout 1530 , displaying a portion of the top story 1550 .
- the top story 1550 includes a sticky point at which scrolling stops for large articles, such that the title, source information, and a portion of the image is visible, without showing the full size document pane, allowing the feed layout 1530 to show more stories at once.
- the user scrolls down again in the feed layout 1530 to display the rest of the top story 1550 , as illustrated in the fourth stage 1504 .
- FIG. 16 illustrates an example of a layout for a morning feed at various times in four stages 1601 - 1604 .
- the first stage 1601 shows GUI 1600 with status bar 1610 , toolbar 1620 , and morning feed layout 1630 .
- the GUI 1600 shows a morning feed layout 1630 , which includes a featured story 1632 for the day.
- the featured story 1632 is displayed differently (e.g., larger, with different visual styles, etc.) from all of the other stories.
- the featured story 1632 is the only story that takes up the entire width of the morning feed layout 1630 .
- the document panes for the remaining articles in the morning feed layout are arranged in a fashion similar to those described above for the different feed layouts (e.g., aggregated feed layout, channel feed layout, etc.).
- the featured story of some embodiments is only provided once within a given particular time period (e.g., a calendar day, morning/afternoon/evening, etc.).
- the document reader application selects the featured story from a set of stories received from the user's collection of sources.
- the publishers designate a set of stories as featured articles and the document reader application selects one of the designated stores based on the user's reading history and interests.
- the first stage 1601 also shows that the user scrolls through the feed layout to view additional stories in the aggregated feed, as illustrated in the second stage 1602 .
- the user also closes the document reader.
- the GUI 1600 shows the feed layout 1630 from the same position as when the user closed the application in the second stage 1602 earlier that day.
- the available articles in the feed have not changed, as new articles are added at the bottom of the feed.
- articles that the user has viewed are shown differently from new and unviewed articles.
- the feed layout 1630 displays the source information (e.g., source information 1650 ) for articles that were previously viewed as grayed out, to indicate that the user has previously seen these articles.
- the aggregated feed layout 1630 will begin with the first new article.
- the document reader application of some embodiments shows the first unseen articles at the top of the feed layout 1630 when the user returns to the document reader application. The user can then scroll back up to view the articles that they have previously seen.
- the third stage 1603 as the document reader was opened again during the same day, no new top story is displayed. Only one top story is displayed for a given day.
- the fourth stage 1603 illustrates the GUI 1600 when the document reader is opened for the first time on a subsequent day.
- the GUI 1600 displays a new feed layout 1640 with a new top story 1642 is presented at the top of the feed layout 1640 with new articles for the day as well.
- the user can scroll up to go back to the articles of the previous day, whether they have been seen or not.
- FIG. 17 conceptually illustrates a process for providing a morning feed layout.
- the process 1700 of some embodiments is performed by a document reader application each time the application is opened on a user's device.
- the process 1700 receives (at 1705 ) instructions to display a feed view for a set of documents. These instructions may be based on user input to display a feed (e.g., selecting a channel tile to display a channel feed, selecting an icon to display the aggregated feed, etc.) or may be automatically generated when the document reader application begins (i.e., a default feed view).
- the process 1700 determines (at 1710 ) whether this is the first display of the feed layout for a designated time period.
- the designated time period of some embodiments is a calendar day, a set number of hours, morning/afternoon/evening, etc.
- the process 1700 proceeds to step 1730 to display a normal feed layout as described below.
- the process 1700 retrieves (at 1715 ) a featured article.
- the process chooses the featured article to be retrieved by receiving a set of documents from a set of sources from the user's collection and identifying a top story based on the user's reading history and interests.
- each source of the set of sources specially designates a particular story as a feature story for the particular time period.
- the process 1700 then generates (at 1720 ) a document pane for the featured article with a unique style to be displayed in the feed layout.
- the process 1700 then inserts (at 1725 ) the generated document pane into the feed layout.
- the process 1700 inserts (at 1725 ) the generated document pane at the top (or at some other prominent location) of the displayed feed layout.
- the process 1700 retrieves (at 1730 ) any new articles for the feed.
- the process 1700 generates and appends (at 1735 ) document panes for the new articles to the feed layout.
- the process 1700 inserts (at 1725 ) the generated document pane for the featured article immediately before the document panes for the new articles.
- the process 1700 inserts (at 1725 ) the generated document pane at another location in the feed layout (e.g., immediately before the document panes for any unseen articles).
- the process 1700 displays (at 1740 ) the feed layout.
- FIG. 18 illustrates an example of a document marking menu for performing different operations on articles in a feed layout in five stages 1801 - 1805 .
- the first stage 1801 illustrates a portion of a feed 1800 .
- the portion 1800 includes three document panes 1810 , 1815 , and 1820 .
- the user holds a position to bring up a document marking menu 1840 on document pane 1820 , as illustrated in the second stage 1802 .
- the user holds a button for bringing up the document marking menu 1840
- a user can hold a location anywhere within the document pane to bring up the document marking menu 1840 .
- the second stage 1802 shows the document marking menu 1840 has been displayed at the location held by the user.
- the document marking menu 1840 includes four UI items 1842 , 1844 , 1846 , and 1848 for performing different operations on the particular document pane 1820 , as well as a placeholder icon 1850 .
- UI item 1842 is for sharing the article of the document pane 1820 using different services (e.g., email, social networks, etc.).
- UI item 1844 is for saving the article for future viewing.
- UI items 1846 and 1848 are for liking and disliking the article.
- liking and disliking various articles provides additional data for the document reader to provide more specific recommendations, both in terms of channels and topics, as well as in ranking articles for the user in the various feeds.
- Placeholder icon 1850 indicates the held location in the document pane. In some embodiments, selection of the different UI items 1842 - 1848 is performed by sliding from the placeholder icon 1850 to a particular UI item.
- the user slides from placeholder icon 1850 down to the UI item 1848 to dislike the article.
- the UI items of the toolbar 1840 are placed such that, if the user wanted to like the article, the user would slide in the opposite direction.
- opposing actions e.g., like/dislike
- the fourth stage 1804 shows that UI item 1848 has been highlighted to indicate that the user has selected UI item 1848 (e.g., by lifting their finger from the UI item).
- the fifth stage 1805 shows that once the user selects UI item 1848 , the toolbar 1840 is no longer displayed. However, to indicate that the user has disliked the article for document pane 1820 , icon 1852 is displayed in the lower right corner of the document pane 1820 .
- the UI items of the toolbar are for performing other operations on the article for a document pane.
- FIG. 19 illustrates an example of using the UI item to share a document in a document feed in six stages 1901 - 1906 .
- the first three stages 1901 - 1903 show that the user holds down a location in document pane 1820 to bring up toolbar 1840 and slides up from the placeholder icon 1850 to select UI item 1842 in order to share the article associated with document pane 1820 .
- the user has selected UI item 1842 to share the article, which brings up a secondary toolbar 1960 with UI items for three separate sharing services (e.g., social networking sites, image sharing sites, etc.).
- the fourth stage 1904 shows that the user slides from the selected UI item 1842 to select UI item 1962 .
- the user selects UI item 1962 to share the article.
- the UI item 1962 opens another display area (not shown) to share the article through a third party API.
- the sixth stage 1906 shows that the document pane 1820 now shows icons 1852 and 1952 to indicate that the article for document pane 1820 has been disliked and shared by the user.
- FIG. 20 illustrates an example of an alternative UI for performing different operations on articles in a feed layout.
- GUI 2000 shows a feed layout for a mobile device, similar to the one described above with reference to FIG. 15 .
- the user slides across document pane 2052 .
- the second and third stages 2002 and 2003 show that when the user slides across document pane 2052 , a menu 2040 slides into the display area.
- the menu 2040 includes UI item 2042 to share the article, UI item 2044 to bookmark (or save) the article, and UI items 2046 and 2048 to like and dislike the article respectively, as illustrated in the third stage 2003 .
- the user selects UI item 2044 to save the article for future viewing.
- the document reader of some embodiments provides a document view for content from various sources. Some sources provide the content in a native format that provides rich formatting and placement data that can be used to provide a dynamic and aesthetically pleasing layout. Other sources may provide content (i.e., web content) in a standardized, but less rich format (e.g., RSS, Atom, etc.) The document reader of some embodiments provides different presentations for the different types of articles.
- the source may not immediately provide a full article, but rather an excerpt view of the article.
- the document reader then provides access to the full article view from the excerpt view (e.g., through gestures, links, buttons, etc.).
- the excerpt view may include a limited number of images and an excerpt or summary of the full content of the web article.
- some embodiments generate the intermediate excerpt view and/or the full article view using a templating scheme that matches the received web content to a template and applies styling and/or formatting to the content according to the template in order to generate an aesthetically pleasing layout for the web content.
- FIG. 21 illustrates an example of displaying a web document from a feed layout in two stages 2101 - 2102 .
- the GUI 2100 shows the aggregated feed layout 930 .
- the first stage 2101 also shows that the user has selected document pane 2120 for a web article from the aggregated feed layout 930 .
- the second stage 2102 shows an article toolbar 960 and an excerpt view 2140 of the web article.
- the article toolbar 960 includes different affordances for interacting with the article (e.g., displaying related articles, sharing the article, bookmarking the article, etc.).
- the excerpt view 2140 includes an enlarged image 2142 , title pane 2144 , excerpted text 2146 , and an affordance 2148 to display a full version of the article.
- the title pane 2144 displays the title of the article, a logo and name for the source of the article and a time value (e.g., the publication date, time since the article was added to the user's feed, etc.) for the article.
- the affordance 2148 in some embodiments is a link that opens a full version of the web content in a browser object for displaying web content within the document reader application.
- the document reader applies a set of styles to the web content to provide a consistent view of the different articles from the various sources.
- FIGS. 22 and 23 illustrate examples of displaying a full document from an excerpt view of a web document.
- FIG. 22 shows an example of displaying a full document from an excerpt view in two stages 2201 - 2202 .
- a user selects an affordance 2148 that is provided in the excerpt view of a web document.
- the affordance 2148 to the full article is provided after the content, but before an end-of-article interface that is described in Section D below.
- the second stage 2202 shows that the GUI 2200 displays a full view 2230 of the article.
- the full view 2230 of the article is formatted similarly to the excerpt view 2140 , but rather than the affordance 2148 and the excerpted text 2146 , the full view 2230 displays the full text 2248 of the article.
- the document reader provides customized styles (e.g., through custom css style sheets) to provide a consistent experience for the different types of documents from different sources.
- the document reader of some embodiments provides the full article view for a web document through a browser object, allowing the document reader to treat the web article as a native article with interesting layouts and styles to improve readability and user experience.
- FIG. 23 illustrates another example of displaying a full web document from an excerpt view in two stages 2301 - 2302 .
- the example in this figure is similar to the example of FIG. 22 , however, rather than selecting the affordance 2148 , the first stage 2301 shows that the user performs a gesture (i.e., a swipe up) through the excerpt view 2140 .
- the second stage 2302 illustrates that the GUI 2300 loads the full view 2230 of the web document in the browser object as described above.
- the document reader of some embodiments provides animations between the layout view and the article views for the web and native documents.
- FIG. 24 illustrates an example of the animation of a document pane in a feed layout to an excerpt document view for a web article.
- the first stage 2401 shows GUI 2400 with status bar 2410 and feed layout 2430 .
- the status bar 2410 displays a name for the feed.
- a user selects article 2450 , with image 2452 , from the feed layout 2430 .
- the GUI 2400 zooms into the selected article 2450 as the neighboring articles expand and are pushed out of the display area, as illustrated in stages 2402 and 2403 .
- the third stage 2403 shows that the image 2410 and title are scaled to grow and move toward their final places within the excerpt view of the web article, shown in the fourth stage 2404 .
- the document reader of some embodiments recrops the image to expose portions of the image that were previously cropped to fit the image to the layout of the document pane.
- only the image 2410 and the title 2412 grow during the animation, while the summary text of the document pane fades out and the full article text fades in.
- the document reader application performs operations to recrop, rescale, and recenter image 2452 to animate the image 2452 into a specified location in the full article view 2440 , creating a parallax effect to provide a sense of depth in a flat image.
- the operations of the document reader application on the image 2452 create the appearance that the frame of the image 2452 moves independently of the image 2452 , creating an illusion of depth and motion within the transition animation.
- the document reader application uses cinemagraphs to animate the image 2452 into a specified location in the full article view 2440 .
- Cinemagraphs are still photographs in which a minor and repeated movement occurs.
- Cinemagraphs which in some embodiments are published in either animated GIF format or as video, can give the illusion of motion related to the animation to the specified location.
- FIG. 25 illustrates an example of displaying a native document in two stages 2501 - 2502 .
- GUI 2500 shows the aggregated feed layout 930 and shows the user has selected document pane 2550 for a native article.
- the second stage 2502 shows a full view 2540 of the native article.
- native articles are provided by the publishers in a special format that allows for flexible placement and styling of images and text, with rich formatting and animations to provide an enhanced multimedia experience.
- the second stage 2502 shows that the full view 2540 of a native article includes multiple images placed at various locations within the full view 2540 , as well as specially formatted text (e.g., quote text 2546 ).
- Native articles some embodiments have more sophisticated layouts, placing images, text and other multimedia objects at various locations within the article layout.
- FIG. 26 illustrates an example of the animation of a document pane in a feed to a full document view for a native article in four stages 2601 - 2604 .
- the user selects a document pane 2650 for a native article from the aggregated feed layout 930 .
- Selection of document pane 2650 begins an animation for elements (e.g., image 2652 , excerpt text 2654 , etc.) in the document pane 2650 to a full view 2630 , as illustrated in stages 2602 - 2603 .
- elements e.g., image 2652 , excerpt text 2654 , etc.
- the other document panes of the feed layout 930 are pushed out of the display area as image 2652 is recropped, rescaled and moved from the document pane to a location within the full view 2630 of the article.
- Stages 2603 and 2604 show that the full text of the native article, along with other elements such as images and quote text, fade into the full view 2630 of the article.
- FIG. 27 illustrates an example, in four stages 2701 - 2704 , of preloading neighboring articles when a particular article is selected.
- the first stage 2701 shows a sequence of articles 1 - 6 displayed in a feed layout.
- the sequence of articles may be ordered based on a variety of factors, including time order, user rank, placement within a particular layout, etc.
- a user selects a web article 2 from a feed layout 2730 in the GUI 2700 .
- the second stage 2702 shows an excerpt view 2740 of article 2 has been loaded in the display.
- the second stage 2702 shows that the next article in the sequence (i.e., article 3 ) is being preloaded (as indicated by a dashed line) into memory.
- the document reader rather than unnecessarily loading the entirety of an article the user may not be interested in, the document reader only loads a minimal portion of article 3 , such that an initial screen for article 3 can be loaded immediately when the user navigates to article 3 . The remainder of the article can then be loaded once the user decides to view article 3 (e.g., by swiping to the next article).
- the third stage 2703 shows that article 3 (or a portion of the article) has been preloaded (as indicated by a thick dashed line) and the previous article 1 within the sequence of articles is now being preloaded into memory.
- the document reader when an excerpt view 2740 of a web article is shown in GUI 2700 , the document reader preloads a full version of the web article.
- the document reader of some embodiments preloads a full version of the web article to be displayed if the user decides to view the full web article (e.g., by selecting a link or swiping up through the excerpt view).
- FIG. 28 conceptually illustrates a process 2800 of some embodiments for preloading documents in a document reader application.
- the process 2800 of some embodiments is performed by a document reader whenever a full article view is displayed (e.g., when an article is selected from a feed view, when a user navigates (e.g., by swiping) to a new article, etc.).
- the process 2800 loads (at 2805 ) a document in a sequence of documents (e.g., documents within a feed, linked documents embedded in a document, etc.).
- the process 2800 preloads (at 2810 ) the next document in the sequence before preloading (at 2815 ) the previous document in the sequence as well.
- the process 2800 determines (at 2820 ) whether the current view of the document is an excerpt view. When the process 2800 determines (at 2820 ) that the current view is not an excerpt view, the process 2800 ends. When the process 2800 determines (at 2820 ) that the current view is an excerpt view, the process 2800 preloads (at 2825 ) the full view of the current document. In some embodiments, the process 2800 preloads (at 2825 ) the full view by caching a mobile or desktop version of the article from the originating website of the excerpted article and preparing a set of styles to apply to the cached version of the article.
- the document reader also provides an end of article UI for providing access to additional articles related to a particular article that is viewed in the document reader.
- FIG. 29 illustrates an example of providing an end-of-article display region with related articles in three stages 2901 - 2903 .
- the first stage 2901 shows a feed layout view 930 with several document panes.
- the first stage 2901 shows that a user selects document pane 2950 .
- the GUI 2900 displays an excerpt view 2940 of the selected article and a document toolbar 2960 .
- the document toolbar 2960 includes several icons for performing different operations on the current article, much like those described above with reference to FIGS. 18-20 . Specifically, the document toolbar 2960 also includes an affordance 2962 for displaying articles related to the current article. In the second stage 2902 , the user selects affordance 2962 . In the third stage 2903 , the GUI 2900 moves the document toolbar 2960 up to display an end of article section 2970 .
- the end of article section 2970 includes a tag bar 2975 .
- the tag bar 2975 includes tags, or keywords, that the article has been tagged with.
- the tags are selectable UI items, where selection of one of the tags displays (e.g., in one of the layouts described above) additional articles that are tagged with the selected tag.
- the end of article section 2970 also displays document pane area 2980 , which displays document panes for articles related to the current article.
- the related articles of the document pane area 2980 include other stories from the same source as the current article, as well as stories related to the current article, but from different sources.
- the other sources are sources that the user has selected for their favorites collection (e.g., through the onboarding and explore options described above).
- FIG. 30 illustrates an example of providing an end-of-article display region with related articles using gestures in three stages 3001 - 3003 .
- the first stage 3001 shows a GUI 3000 with a full view 3030 of a native article.
- the user scrolls toward the end of the article.
- the GUI 3000 also displays toolbar 3020 , much like the toolbar 2920 described with reference to FIG. 29 , with icon 3022 for displaying an end of article section.
- the user uses a gesture to display an end of article section.
- the user has scrolled to the end of the article.
- the second stage 3002 also shows that when the user swipes up past the end of the article, the toolbar 3020 scrolls up to reveal a portion of the related articles section 3070 as it is being scrolled into view.
- GUI 3000 shows the full view 3030 of the native article and the end of article section 3070 overlaid above the native article.
- the end of article section 3070 includes a tag bar 3075 and document pane area 3080 , similar to the tag bar and document pane described above with reference to FIG. 29 .
- the document pane area includes UI tools for displaying document panes for additional related documents.
- FIG. 31 illustrates an example of interacting with an end of article section in three stages 3101 - 3103 .
- the first stage 3101 shows GUI 3100 with an excerpt view 3140 of a web article and a document pane area 3180 .
- the document pane area 3180 includes two scrolling elements 3182 and 3184 .
- the first scrolling element 3182 provides a set of articles that are from the same source as the displayed article. In some embodiments, the first scrolling element 3182 only includes related articles from the same source, while in other embodiments, the first scrolling element includes articles from the same source that are not directly related to the displayed article.
- the second scrolling element 3184 includes articles that are related to the topic from other sources.
- the related articles only include related articles from sources identified as favorites by the user.
- the user slides through the first scrolling element 3182 .
- the second stage 3102 shows that the first scrolling element 3160 has moved to show a portion of a new document pane 3150 for another article from the same source (i.e., “Score”).
- the scrolling elements 3182 and 3184 scroll to fixed points so that edges of the document panes align at the edges of the scrolling elements, while in other embodiments, the scrolling elements 3182 and 3184 scroll freely to any point.
- the second stage 3102 also shows that the user swipes the second scrolling element 3184 to show a new document pane 3152 for a related article from another source (i.e., Self Magazine).
- the related articles are all selected from sources in the favorites collection of the user.
- FIG. 32 illustrates another example for providing related document panes at the end of a document in two stages 3201 and 3202 .
- the first stage 3201 shows the GUI 3200 displaying a full document view 3230 for a native document.
- the user swipes up on the full document view 3230 to scroll to the end of the document.
- the second stage 3202 the user has reached the end of the document.
- the end of the document is indicated by a user logo 3210 .
- the full document view 3230 shows document panes 3252 and 3254 , which have been embedded at the end of the native article in an end of article section 3270 .
- the document reader provides embedded document panes, end of document regions, or both in different embodiments.
- the different regions i.e., the embedded document panes and each scrollable region of the end of document region
- one set of documents may include documents that are identified by the publisher as being related to the article.
- Another set of documents may also include documents from the same publisher, but these documents may be identified by the document reader (or a server communicating with the document reader) through a search of stored archives for the particular publisher.
- Yet another set of documents may include documents from other sources.
- FIG. 33 illustrates yet another example for providing related document panes at the end of a document in three stages 3301 - 3303 .
- the first stage 3301 shows the GUI 3300 displaying a full document view 3330 for a native document.
- the user swipes up on the full document view 3330 .
- the second stage 3302 shows that the GUI 3300 displays the end of the document.
- the second stage 3302 also shows that the user scrolls up beyond the end of the article.
- the GUI 3300 shows an end of article section 3340 .
- the end of article section like the end of article section 3270 of FIG. 32 , is embedded into the end of the article, rather than displayed as an overlay.
- the end of article section 3370 includes a source article section 3373 , a tag section 3375 , and a related articles section 3380 , similar to the corresponding sections described above.
- the document reader of some embodiments provides various methods for a user to navigate through the documents of the application.
- the navigations can be viewed as operations within a hierarchy of documents and views.
- the navigations are shown as a series of normal swipes (i.e., swipes beginning within the display area) and edge swipes (i.e., swipes beginning at the edge of the display area) in a touch interface of a device.
- normal swipes i.e., swipes beginning within the display area
- edge swipes i.e., swipes beginning at the edge of the display area
- the different methods of navigating through the hierarchy may be applied with other methods of input.
- the document reader of some embodiments models the documents and the history of a user as a hierarchy of documents.
- Each level of the hierarchy is composed of a sequence of documents that are related (e.g., a set of related documents in an end of document region, a feed view of a set of documents in a channel, etc.).
- the different levels of the hierarchy are connected through various relationships (e.g., links from a document, embedded document panes at the end of a document, end of article sections, a full version of an excerpt view, etc.).
- FIG. 34 conceptually illustrates a process for navigating a hierarchy of documents.
- the process 3400 of some embodiments is performed by a document reader to provide an interface for navigating documents in the document reader.
- the process 3400 identifies (at 3405 ) a direction and a type for a received user input for navigating a hierarchy of documents.
- the process 3400 determines (at 3410 ) whether the user input is of a first type or a second type.
- One of ordinary skill in the art will recognize that devices provide the ability to differentiate between various types of interactions (e.g., taps, double taps, press and hold, separate simultaneous interactions, multi-finger interactions, swipes, edge swipes, etc.)
- the first type of interaction is a normal swipe (i.e., one occurring within a display region)
- the second type of interaction is an edge swipe (i.e., a swipe that begins at the edge of the display region).
- the process 3400 determines (at 3410 ) that the user input is of a first type (e.g., a normal swipe)
- the process 3400 determines whether the current document is the last document in the identified direction at the same level of the hierarchy.
- the process 3400 determines (at 3415 ) that the current document is not the last document in the identified direction, then the process displays (at 3420 ) the next document in the identified direction of the sequence of documents at the particular level of the hierarchy.
- the process 3400 determines (at 3425 ) that the current document is the last document in the identified direction, then the process displays (at 3425 ) a parent to the current document.
- the parent to the current document is a feed view that displays all of the documents in the sequence of documents at the particular level of the hierarchy.
- the process 3400 determines (at 3430 ) whether there is a next pivot point in the identified direction.
- the next pivot point identifies a document in the user's history from which the current document was reached.
- Pivot points are identified in a user's history as a user moves between documents (e.g., from document A to document B), views of a document (e.g., from an excerpt view of a document to a full view of the document), or portions of a document (e.g., from the top of a document to an end of article section of the document). Navigations through a user history move between the identified pivot points, allowing a user to quickly return to previous views or documents.
- the process 3400 determines (at 3430 ) that there are no more pivot points in the identified direction (e.g., when the user is at the beginning or end of their history).
- the process 3400 proceeds to step 3415 and treats the user input as a user input of the first type.
- the process 3400 determines (at 3430 ) that there is a next pivot point in the identified direction, the process 3400 displays (at 3435 ) the document with the next pivot point. The process 3400 then ends.
- FIGS. 35-42 illustrate examples of various navigations through a hierarchy of documents.
- FIG. 35 illustrates an example of navigating between documents at a particular level of a hierarchy of documents in six stages 3501 - 3506 .
- the first stage 3501 shows GUI 3520 that displays a simplified feed layout, and a corresponding tree view 3530 of the document hierarchy.
- the feed layout in the GUI 3520 shows a sequence of articles 1 - 6 .
- the different nodes of the tree view 3530 represent articles or views of the document reader.
- the root node 3512 represents the feed layout view of articles 1 - 6 .
- Nodes 1 - 6 represent articles 1 - 6 respectively.
- the root node 3512 is shown in bold to indicate that it corresponds to the view displayed in the GUI 3520 .
- the root node 3512 is also represented as a square to indicate that it is a pivot point in the user's navigation history. Pivot points are identified at various stages of the user's navigation through the document hierarchy.
- the user selects article 2 .
- the second stage 3502 shows that the GUI 3520 shows a full article view for article 2 .
- the tree view 3530 shows node 2 in bold, indicating that it is displayed in the GUI 3520 .
- Node 2 has also changed to a square shape to indicate that a new pivot point has been identified.
- the second stage 3502 shows that the user swipes to a next article 3 at the particular level of the hierarchy. The effect of this gesture is shown as a dotted line from node 2 to node 3 in the tree view 3530 .
- the GUI 3520 shows article 3 and the tree view 3530 shows that a new pivot point is identified at node 3 .
- the third stage 3503 also shows that the user scrolls through the displayed article 3 .
- the document reader identifies a specific location with document 3 as a pivot point, so that the user can return to the same point in the document.
- the fourth stage 3504 shows that the user has scrolled down through the article 3 and swipes to the next article 4 .
- the tree view 3530 shows the same pivot point at 3 , but also shows that the user is navigating to node 4 .
- the user performs a right edge swipe.
- an edge swipe is used to move between pivot points in a user's history, rather than moving between nodes at a particular level of the hierarchy.
- the sixth stage 3506 shows that the user has returned to the saved location in document 3 .
- FIG. 36 illustrates an example of navigating to different levels of the hierarchy of documents. This figure continues the example of FIG. 35 .
- the first stage 3601 shows that the user scrolls through document 3 .
- the tree view 3530 shows that document 3 is shown in the GUI 3520 and pivot points are stored at the root node 3512 and nodes 2 - 4 .
- the second stage 3602 shows an end of article section 3640 with related articles 3 a - 3 d .
- the tree view 3530 shows that the related articles add new corresponding nodes a-d at a new level of the hierarchy.
- the second stage 3602 also shows that the user selects a web article 3 b.
- a particular node may have several different options for a next level in the hierarchy.
- the article view for a native document may include links to multiple sets of documents.
- a single document may include a set of documents related to the document from the same source, a set of documents related to the document from different sources, a set of documents tagged with a particular tag in the tag bar, etc. Each set of documents could provide different nodes at the new level of the hierarchy.
- the GUI 3520 shows an excerpt view for web article 3 b .
- the excerpt view also includes a link 3615 to a full article view.
- the full article view is represented as a new node 3625 at a new level of the hierarchy.
- the third stage 3603 also shows that the user selects the link 3615 to view the full article view of article 3 b.
- the GUI 3520 shows the full article view of article 3 b .
- the tree view 3530 shows that node 3625 that represents the full article view of article 3 b is in bold.
- node 3625 is not represented as a square because in some embodiments, the document reader does not generate a new pivot point for the full article view of a web article to avoid having to re-download the full article from the web. In other embodiments, the document reader generates a new pivot point for the full article view and stores a cached version of the full article to avoid re-downloading the article.
- the fourth stage 3604 shows that the user swipes from the full version of the web article. Even while the user is viewing external content from a webpage, the document reader of some embodiments allows the user to continue navigating within the hierarchy.
- the full view of the web article and the excerpt view of some embodiments act as parallel levels of the hierarchy, such that a user can navigate between the different levels for the web article, but navigating from the either the excerpt view or the full view has the same result.
- the fifth stage 3605 shows that when the user swipes from the full version of the web article 3 b , the GUI 3520 shows article 3 c , which is the next article at the particular level of the hierarchy in the tree view 3530 .
- FIG. 37 illustrates an example of navigating back through pivot points of the navigation.
- the example of this figure continues from the example of FIG. 36 .
- the user performs an edge swipe at each stage to traverse the pivot points of the user's history.
- the first stage 3701 shows that the user navigates back from article 3 c .
- the tree view 3530 shows that since the previous pivot point is identified at the excerpt view of 3 b , the navigation back returns to the node b, which represents the excerpt view of article 3 b.
- the GUI 3520 shows that the user performs an edge swipe from the displayed excerpt view of article 3 b .
- the tree view 3530 of the second stage 3702 shows that the previous pivot point is at article 3 , at the previous level of the hierarchy.
- the third stage 3703 show that the GUI 3520 shows the end of article section of article 3 based on a pivot point identified for article 3 when navigating from article 3 to article 3 b .
- the user edge swipes back through the history to article 2 , as indicated in the tree view 3530 .
- the fourth stage 3704 shows that the GUI 3520 shows article 2 , and that another edge swipe takes the user back to the feed layout, indicated by the root node 3612 in the tree view 3530 .
- an edge swipe was performed at each stage.
- the differences between the edge swipe and the normal swipe of some embodiments will be described with reference to FIGS. 38-42 .
- this example is described with reference to edge and non-edge swipes, one skilled in the art will recognize that the different methods of navigating through the hierarchy may be applied with other methods of input.
- FIGS. 38 and 39 illustrate different examples of navigating back from a particular document.
- FIG. 38 illustrates an example of navigating back from an article using a non-edge swipe (i.e., a gesture to navigate to a previous document within a particular level of the hierarchy).
- the first stage 3801 shows the GUI 3520 at article 3 b , indicated by node b in the tree view 3530 .
- the user performs a non-edge swipe to the right, to navigate to a previous article within the level of the hierarchy.
- the second stage 3802 shows that rather than going back to the previous pivot point, the GUI 3520 now shows article 3 a .
- article 3 a is the article within the sequence of articles that were presented to the user in the end of article section of article 3 .
- FIG. 39 illustrates an example of navigating back from an article using an edge swipe in order to navigate to a previous pivot point in the hierarchy.
- the first stage 3901 shows the same article 3 b as shown in the first stage 3801 of FIG. 38 .
- the user performs an edge swipe to navigate to the previous pivot point at node 3 in the tree view 3530 .
- the second stage 3902 shows that rather than going to the previous article 3 a within the sequence of articles, the GUI 3520 now shows the full article view of article 3 .
- FIG. 40 illustrates an example of another gesture for navigating directly to a parent feed view of a current article in two stages 4001 and 4002 .
- the first stage 4001 illustrates the GUI 3520 , which displays the excerpt view for article 3 b in the hierarchy as described above.
- the article 3 b was reached through the end of article region of article 3 , which was selected from a parent feed view.
- the user swipes down in the excerpt view to return directly to the parent feed view, as indicated in the tree view 3530 .
- the GUI 3520 and the tree view 3530 show that the parent feed view is now the active view.
- the document reader maintains a pivot point at 3 b , allowing the user to edge swipe back to 3 b , while in other embodiments, the gesture to return to a parent feed removes the pivot points in the hierarchy, as shown in the tree view 3530 .
- FIGS. 41 and 42 illustrate different examples of navigating forward from a particular document.
- FIG. 41 illustrates an example of navigating forward from an article using a non-edge swipe (i.e., a gesture to navigate to a next document within a particular level of the hierarchy).
- the first stage 4101 shows the GUI 3520 at article 3 , indicated by node 3 in the tree view 3530 .
- the user performs a non-edge swipe to the left, to navigate to the next article within the level of the hierarchy (i.e., article 4 ).
- the second stage 4102 shows that the GUI 3520 now displays article 4 .
- FIG. 42 illustrates an example of navigating forward from an article using an edge swipe in order to navigate to a next pivot point in the hierarchy.
- the first stage 4201 shows the same article 3 as shown in the first stage 4101 of FIG. 41 .
- the user performs an edge swipe to navigate to the next pivot point at node 3 b in the tree view 3530 .
- the user created a pivot point at 3 b by navigating to 3 b before returning to article 3 .
- a forward edge swipe will navigate to the forward pivot points.
- the second stage 4202 shows that rather than going to the next article 4 within the sequence of articles, the GUI 3520 now shows the excerpt article view of article 3 b.
- the edge swipe when no pivot points are available (e.g., at the end of a user's history), the edge swipe performs the same action as a non-edge swipe (i.e., navigates to a neighboring document in the particular level of the hierarchy).
- a non-edge swipe in some embodiments navigates to the parent document of the particular sequence of documents.
- Computer readable storage medium also referred to as computer readable medium.
- these instructions are executed by one or more computational or processing unit(s) (e.g., one or more processors, cores of processors, or other processing units), they cause the processing unit(s) to perform the actions indicated in the instructions.
- computational or processing unit(s) e.g., one or more processors, cores of processors, or other processing units
- Examples of computer readable media include, but are not limited to, CD-ROMs, flash drives, random access memory (RAM) chips, hard drives, erasable programmable read-only memories (EPROMs), electrically erasable programmable read-only memories (EEPROMs), etc.
- the computer readable media does not include carrier waves and electronic signals passing wirelessly or over wired connections.
- the term “software” is meant to include firmware residing in read-only memory or applications stored in magnetic storage which can be read into memory for processing by a processor.
- multiple software inventions can be implemented as sub-parts of a larger program while remaining distinct software inventions.
- multiple software inventions can also be implemented as separate programs.
- any combination of separate programs that together implement a software invention described here is within the scope of the invention.
- the software programs when installed to operate on one or more electronic systems, define one or more specific machine implementations that execute and perform the operations of the software programs.
- FIG. 43 is an example of an architecture 4300 of such a mobile computing device.
- the mobile computing device 4300 includes one or more processing units 4305 , a memory interface 4310 and a peripherals interface 4315 .
- the peripherals interface 4315 is coupled to various sensors and subsystems, including a camera subsystem 4320 , a wired communication subsystem(s) 4323 , a wireless communication subsystem(s) 4325 , an audio subsystem 4330 , an I/O subsystem 4335 , etc.
- the peripherals interface 4315 enables communication between the processing units 4305 and various peripherals.
- an orientation sensor 4345 e.g., a gyroscope
- an acceleration sensor 4350 e.g., an accelerometer
- the camera subsystem 4320 is coupled to one or more optical sensors 4340 (e.g., a charged coupled device (CCD) optical sensor, a complementary metal-oxide-semiconductor (CMOS) optical sensor, etc.).
- the camera subsystem 4320 coupled with the optical sensors 4340 facilitates camera functions, such as image and/or video data capturing.
- the wired communication subsystem 4323 and wireless communication subsystem 4325 serve to facilitate communication functions.
- the wireless communication subsystem 4325 includes radio frequency receivers and transmitters, and optical receivers and transmitters (not shown in FIG. 43 ). These receivers and transmitters of some embodiments are implemented to operate over one or more communication networks such as a GSM network, a Wi-Fi network, a Bluetooth network, etc.
- the audio subsystem 4330 is coupled to a speaker to output audio (e.g., to output voice navigation instructions). Additionally, the audio subsystem 4330 is coupled to a microphone to facilitate voice-enabled functions in some embodiments.
- the I/O subsystem 4335 involves the transfer between input/output peripheral devices, such as a display, a touch screen, etc., and the data bus of the processing units 4305 through the peripherals interface 4315 .
- the I/O subsystem 4335 includes a touch-screen controller 4355 and other input controllers 4360 to facilitate the transfer between input/output peripheral devices and the data bus of the processing units 4305 .
- the touch-screen controller 4355 is coupled to a touch screen 4365 .
- the touch-screen controller 4355 detects contact and movement on the touch screen 4365 using any of multiple touch sensitivity technologies.
- the other input controllers 4360 are coupled to other input/control devices, such as one or more buttons.
- Some embodiments include a near-touch sensitive screen and a corresponding controller that can detect near-touch interactions instead of or in addition to touch interactions.
- the memory interface 4310 is coupled to memory 4370 .
- the memory 4370 includes volatile memory (e.g., high-speed random access memory), non-volatile memory (e.g., flash memory), a combination of volatile and non-volatile memory, and/or any other type of memory.
- the memory 4370 stores an operating system (OS) 4371 .
- the OS 4371 includes instructions for handling basic system services and for performing hardware dependent tasks.
- the memory 4370 additionally includes layout rearranging instructions 4372 in order for the device 4300 to perform the layout rearranging process of some embodiments. In some embodiments, these instructions 4372 may be a subset of the operating system instructions 4371 , or may be part of the instructions for an application.
- the memory 4370 also includes communication instructions 4374 to facilitate communicating with one or more additional devices (e.g., for peer-to-peer data sharing, or to connect to a server through the Internet for cloud-based data sharing); graphical user interface instructions 4376 to facilitate graphic user interface processing; image processing instructions 4378 to facilitate image-related processing and functions; input processing instructions 4380 to facilitate input-related (e.g., touch input) processes and functions; audio processing instructions 4382 to facilitate audio-related processes and functions; and camera instructions 4384 to facilitate camera-related processes and functions.
- the instructions described above are merely exemplary and the memory 4370 includes additional and/or other instructions in some embodiments.
- the memory for a smartphone may include phone instructions to facilitate phone-related processes and functions.
- the above-identified instructions need not be implemented as separate software programs or modules.
- Various functions of the mobile computing device can be implemented in hardware and/or in software, including in one or more signal processing and/or application specific integrated circuits.
- FIG. 43 While the components illustrated in FIG. 43 are shown as separate components, one of ordinary skill in the art will recognize that two or more components may be integrated into one or more integrated circuits. In addition, two or more components may be coupled together by one or more communication buses or signal lines. Also, while many of the functions have been described as being performed by one component, one of ordinary skill in the art will realize that the functions described with respect to FIG. 43 may be split into two or more integrated circuits.
- FIG. 44 conceptually illustrates another example of an electronic system 4400 with which some embodiments of the invention are implemented.
- the electronic system 4400 may be a computer (e.g., a desktop computer, personal computer, tablet computer, etc.), phone, PDA, or any other sort of electronic or computing device.
- Such an electronic system includes various types of computer readable media and interfaces for various other types of computer readable media.
- Electronic system 4400 includes a bus 4405 , processing unit(s) 4410 , a graphics processing unit (GPU) 4415 , a system memory 4420 , a network 4425 , a read-only memory 4430 , a permanent storage device 4435 , input devices 4440 , and output devices 4445 .
- GPU graphics processing unit
- the bus 4405 collectively represents all system, peripheral, and chipset buses that communicatively connect the numerous internal devices of the electronic system 4400 .
- the bus 4405 communicatively connects the processing unit(s) 4410 with the read-only memory 4430 , the GPU 4415 , the system memory 4420 , and the permanent storage device 4435 .
- the processing unit(s) 4410 retrieves instructions to execute and data to process in order to execute the processes of the invention.
- the processing unit(s) may be a single processor or a multi-core processor in different embodiments. Some instructions are passed to and executed by the GPU 4415 .
- the GPU 4415 can offload various computations or complement the image processing provided by the processing unit(s) 4410 . In some embodiments, such functionality can be provided using CoreImage's kernel shading language.
- the read-only-memory (ROM) 4430 stores static data and instructions that are needed by the processing unit(s) 4410 and other modules of the electronic system.
- the permanent storage device 4435 is a read-and-write memory device. This device is a non-volatile memory unit that stores instructions and data even when the electronic system 4400 is off. Some embodiments of the invention use a mass-storage device (such as a magnetic or optical disk and its corresponding disk drive, integrated flash memory) as the permanent storage device 4435 .
- the system memory 4420 is a read-and-write memory device. However, unlike storage device 4435 , the system memory 4420 is a volatile read-and-write memory, such a random access memory.
- the system memory 4420 stores some of the instructions and data that the processor needs at runtime.
- the invention's processes are stored in the system memory 4420 , the permanent storage device 4435 , and/or the read-only memory 4430 .
- the various memory units include instructions for processing multimedia clips in accordance with some embodiments. From these various memory units, the processing unit(s) 4410 retrieves instructions to execute and data to process in order to execute the processes of some embodiments.
- the bus 4405 also connects to the input and output devices 4440 and 4445 .
- the input devices 4440 enable the user to communicate information and select commands to the electronic system.
- the input devices 4440 include alphanumeric keyboards and pointing devices (also called “cursor control devices”), cameras (e.g., webcams), microphones or similar devices for receiving voice commands, etc.
- the output devices 4445 display images generated by the electronic system or otherwise output data.
- the output devices 4445 include printers and display devices, such as cathode ray tubes (CRT) or liquid crystal displays (LCD), as well as speakers or similar audio output devices. Some embodiments include devices such as a touchscreen that function as both input and output devices.
- CTR cathode ray tubes
- LCD liquid crystal displays
- bus 4405 also couples electronic system 4400 to a network 4425 through a network adapter (not shown).
- the computer can be a part of a network of computers (such as a local area network (“LAN”), a wide area network (“WAN”), or an Intranet), or a network of networks, such as the Internet. Any or all components of electronic system 4400 may be used in conjunction with the invention.
- Some embodiments include electronic components, such as microprocessors, storage and memory that store computer program instructions in a machine-readable or computer-readable medium (alternatively referred to as computer-readable storage media, machine-readable media, or machine-readable storage media).
- computer-readable media include RAM, ROM, read-only compact discs (CD-ROM), recordable compact discs (CD-R), rewritable compact discs (CD-RW), read-only digital versatile discs (e.g., DVD-ROM, dual-layer DVD-ROM), a variety of recordable/rewritable DVDs (e.g., DVD-RAM, DVD-RW, DVD+RW, etc.), flash memory (e.g., SD cards, mini-SD cards, micro-SD cards, etc.), magnetic and/or solid state hard drives, read-only and recordable Blu-Ray® discs, ultra density optical discs, any other optical or magnetic media, and floppy disks.
- CD-ROM compact discs
- CD-R recordable compact discs
- the computer-readable media may store a computer program that is executable by at least one processing unit and includes sets of instructions for performing various operations.
- Examples of computer programs or computer code include machine code, such as is produced by a compiler, and files including higher-level code that are executed by a computer, an electronic component, or a microprocessor using an interpreter.
- ASICs application specific integrated circuits
- FPGAs field programmable gate arrays
- PLDs programmable logic devices
- ROM read only memory
- RAM random access memory
- the terms “computer”, “server”, “processor”, and “memory” all refer to electronic or other technological devices. These terms exclude people or groups of people.
- display or displaying means displaying on an electronic device.
- the terms “computer readable medium,” “computer readable media,” and “machine readable medium” are entirely restricted to tangible, physical objects that store information in a form that is readable by a computer. These terms exclude any wireless signals, wired download signals, and any other ephemeral signals.
- FIGS. 3, 17, 28, and 34 conceptually illustrate processes.
- the specific operations of these processes may not be performed in the exact order shown and described.
- the specific operations may not be performed in one continuous series of operations, and different specific operations may be performed in different embodiments.
- the process could be implemented using several sub-processes, or as part of a larger macro process.
- the invention is not to be limited by the foregoing illustrative details, but rather is to be defined by the appended claims.
Abstract
Description
- Document readers are often used for viewing electronic documents, such as electronic articles or webpages, on a device. The electronic articles are often from various sources or publishers, and related to a variety of different topics. Users often navigate between various groupings of articles (e.g., articles from a particular source, articles related to a particular topic, etc.), however, as documents often lead to other documents (e.g., through various links and other relationships), it is often difficult for a user to go back to view interesting documents that were displayed in previous groupings.
- Some embodiments provide a document reader application (also referred to as a document viewing application) for viewing and navigating between various documents. The document reader of some embodiments collects documents (e.g., magazine articles, web blog posts, word processing documents, slides of a presentation, etc.) from a variety of different sources (e.g., websites, magazine publishers, newspapers, etc.). In this application, many of the examples are described with reference to articles, but it should be clear to one skilled in the art that the articles may refer to any type of document. In some embodiments, the document reader provides both native content (i.e., formatted content received directly from a publisher) and web content (i.e., content retrieved from a website) for display in the application.
- In some embodiments, the document reader provides a graphical user interface (GUI) for onboarding (i.e., adding) channels for a user of the document reader. The document reader displays a set of channel selection items in a display area of the GUI. The channel selection items of some embodiments include both sources (e.g., websites, magazine publishers, etc.) and topics. The topics may include different subjects, such as people, places, categories, products, companies, etc.
- Based on the selection of a channel selection item, the document reader of some embodiments provides additional channel selection items for additional sources and topics that are related to the selected channel selection item. In some embodiments, when the additional channel selection items cannot be displayed in the display area of the GUI, the document reader provides a visual effect (e.g., rippling) to indicate that new channel selection items have been added, but are not yet visible in the display area.
- Once channels have been selected and added to the user's collection (e.g., a favorites collection), the document reader retrieves documents published by the selected sources and related to the selected topics to be displayed in the GUI of the document reader. The document reader of some embodiments then provides different feeds, or groupings, of the identified documents (e.g., a channel feed with documents from a specific channel, a topic feed with documents related to a particular topic, etc.). The document reader of some embodiments also provides a feed for a set of documents that a user of the document reader has marked, or saved, for future viewing.
- In some embodiments, the document reader provides an aggregated feed of the identified documents published by all of the selected sources and related to all of the different topics. The document reader of some embodiments provides different views of the aggregated feed throughout the day. In some embodiments, the document reader provides a morning view of the aggregated feed with a featured article of the day that is presented in a different manner than any of the other documents in the aggregated feed. The featured article of some embodiments is only presented at certain times (e.g., when the application is opened for the first time in a given day or at various points throughout the day). At any other time, the document reader provides the aggregated feed based on the user's previous viewing of documents in the feed.
- In some embodiments, the document reader provides a GUI for adding additional channels for a user based on the user's individual reading preferences, selected channels, global user preferences (e.g., hot or trending channels), etc. In some embodiments, the document reader provides a first interface for adding channels during an initial onboarding process and a second different interface for adding additional channels. The interface for adding additional channels in some embodiments provides recommendations for different channels (sources and topics), as well as a taxonomy view and search tool for discovering new channels.
- In order to display a particular feed in the GUI, the document reader of some embodiments generates a layout for the documents of the feed by generating and arranging document panes that provide summary information (e.g., title, image, excerpt, etc.) for each document of the feed. The document panes are arranged within a display area so that a user can view and interact with the various documents. The document reader of some embodiments provides different visual styles for the document panes based on whether the user of the application has seen (or scrolled past) a document or clicked through to read a document.
- In some embodiments, the document reader provides a document marking menu for performing various operations on the document of a particular document pane. For example, in some embodiments the document marking menu provides several selectable UI items for performing different operations (e.g., like, dislike, share, save, etc.) on the particular document. The document marking menu of some embodiments is only displayed while a user holds down a location (e.g., a specific button, or any location in the document pane). In such embodiments, the user selects the different operations by sliding along the document marking menu to select a UI item. In some embodiments, the UI items are placed on the document marking menu such that opposing actions (e.g., like and dislike) are performed by sliding along the document marking menu in opposing directions.
- Once a user has selected a document (e.g., by selecting a document pane from a feed), the document reader of some embodiments displays a document view of the selected document for viewing by the user. In some embodiments, the view that is presented to the user is different for native content and web content. The document reader provides a full article view for native articles, while providing an excerpt view for web articles. The excerpt view of some embodiments provides a short excerpt or summary of the web article, as well as a link to a full version of the document. In some embodiments, rather than a link to the full version, the user of the document reader uses gestures (e.g., swiping up) to reach the full version of the document.
- In addition to loading the selected document, the document reader of some embodiments preloads additional documents related to the loaded document. For example, the document reader of some embodiments preloads neighboring documents (i.e., a previous document and a next document) for a document selected from a feed. When the displayed view is an excerpt view of a web document, the document reader of some embodiments also preloads the full web document.
- In some embodiments, the document reader provides an end-of-document display region for displaying document panes for additional documents related to the document. The end-of-document display region of some embodiments provides a first scrollable region for displaying documents from the same source as the displayed document and a second scrollable region for displaying documents that are related to a topic of the displayed document. In some embodiments, the document reader also includes a section of related document panes embedded within the body of the article itself.
- Some embodiments provide a method for navigating through a hierarchy of documents. In some embodiments, new levels of the hierarchy are defined as a user navigates between different groups or feeds of the document reader (e.g., when a user selects a related article from the end-of-document display region). The document reader of some embodiments detects a first type of input (e.g., swipes within the display area, key entries, etc.) for navigating through the documents of a feed at a single level of the hierarchy, and a second type of input for navigating through pivot points identified in a history of documents that the user has viewed across multiple levels of the hierarchy.
- The preceding Summary is intended to serve as a brief introduction to some embodiments of the invention. It is not meant to be an introduction or overview of all inventive subject matter disclosed in this document. The Detailed Description that follows and the Drawings that are referred to in the Detailed Description further describe the embodiments described in the Summary as well as other embodiments. Accordingly, to understand all the embodiments described by this document, a full review of the Summary, the Detailed Description, and the Drawings is needed. Moreover, the claimed subject matters are not to be limited by the illustrative details in the Summary, the Detailed Description, and the Drawings, but rather are to be defined by the appended claims, because the claimed subject matters can be embodied in other specific forms without departing from the spirit of the subject matters.
- The novel features of the invention are set forth in the appended claims. However, for purposes of explanation, several embodiments of the invention are set forth in the following figures.
-
FIGS. 1a-b illustrate an example of an initial interface for onboarding channels in a document reader. -
FIG. 2 illustrates another example of an initial interface for onboarding channels in a document reader. -
FIG. 3 conceptually illustrates a process for generating channel selection items. -
FIG. 4 illustrates an example of adding a new source channel for a document reader. -
FIG. 5 illustrates another example of adding a new topic channel for a document reader. -
FIG. 6 illustrates an example of an alternative interface for exploring new channels. -
FIG. 7 illustrates an example of an initial animation for an onboarding interface. -
FIG. 8 illustrates an example of a ripple effect to indicate the addition of off-screen items during the onboarding process. -
FIG. 9 illustrates an example of displaying a feed view of an aggregated feed and an article view of a particular document from the aggregated feed. -
FIG. 10 illustrates an example of different elements of a document pane. -
FIG. 11 illustrates an example of displaying a feed layout for a selected channel. -
FIG. 12 illustrates an example of displaying saved documents. -
FIG. 13 illustrates an example of intelligent cropping to fit images to a particular aspect ratio. -
FIG. 14 illustrates an example of receiving updates while displaying a feed layout. -
FIG. 15 illustrates an example of a document layout for a mobile device. -
FIG. 16 illustrates an example of a layout for a morning feed at various times. -
FIG. 17 conceptually illustrates a process for providing a morning feed. -
FIG. 18 illustrates an example of a document marking menu for performing different operations on articles in a feed layout. -
FIG. 19 illustrates an example of using the document marking menu to share a document in a document feed. -
FIG. 20 illustrates an example of an alternative UI for performing different operations on articles in a feed layout. -
FIG. 21 illustrates an example of displaying a web document. -
FIGS. 22 and 23 illustrate examples of displaying a full article from an excerpt view of a web document. -
FIG. 24 illustrates an example of the animation of a document pane for a web document in a feed to a full document view. -
FIG. 25 illustrates an example of displaying a native document. -
FIG. 26 illustrates an example of the animation of a document pane for a native document in a feed to a full document view. -
FIG. 27 illustrates an example of preloading neighboring articles when a particular document is selected. -
FIG. 28 conceptually illustrates an example of preloading documents in a document reader application. -
FIG. 29 illustrates another example of providing an end-of-article display region with related documents. -
FIG. 30 illustrates an example of providing an end-of-article display region with related documents. -
FIG. 31 illustrates an example of interacting with the end-of-document display region. -
FIG. 32 illustrates an example of embedding related document panes at the end of a document. -
FIG. 33 illustrates yet another example for providing related document panes at the end of a document. -
FIG. 34 conceptually illustrates a process for navigating a hierarchy of documents. -
FIG. 35 illustrates an example of navigating between documents at a particular level of a hierarchy of documents. -
FIG. 36 illustrates an example of navigating to different levels of the hierarchy of documents. -
FIG. 37 illustrates an example of navigating back through pivot points of the navigation. -
FIGS. 38 and 39 illustrate different examples of navigating back from a particular document. -
FIG. 40 illustrates an example of navigating back to a parent feed from a document in the hierarchy. -
FIGS. 41 and 42 illustrate different examples of navigating forward from a particular document. -
FIG. 43 illustrates an example of an architecture of a mobile computing device with which some embodiments are implemented. -
FIG. 44 conceptually illustrates another example of an electronic system with which some embodiments of the invention are implemented. - In the following detailed description of the invention, numerous details, examples, and embodiments of the invention are set forth and described. However, it will be clear and apparent to one skilled in the art that the invention is not limited to the embodiments set forth and that the invention may be practiced without some of the specific details and examples discussed.
- Some embodiments provide a document reader application for viewing and navigating between various documents. The document reader of some embodiments collects documents (e.g., magazine articles, web blog posts, word processing documents, slides of a presentation, etc.) from a variety of different sources (e.g., websites, magazine publishers, newspapers, etc.). In this application, many of the examples are described with reference to articles, but it should be clear to one skilled in the art that the articles may refer to any type of document. In some embodiments, the document reader provides both native content (i.e., formatted content received directly from a publisher) and web content (i.e., content retrieved from a website) for display in the application.
- In some embodiments, the document reader provides a graphical user interface (GUI) for onboarding (i.e., adding) channels for a user of the document reader. The document reader displays a set of channel selection items in a display area of the GUI. The channel selection items of some embodiments include both sources (e.g., websites, magazine publishers, etc.) and topics. The topics may include different subjects, such as people, places, categories, products, companies, etc.
- Based on the selection of a channel selection item, the document reader of some embodiments provides additional channel selection items for additional sources and topics that are related to the selected channel selection item. In some embodiments, when the additional channel selection items cannot be displayed in the display area of the GUI, the document reader provides a visual effect (e.g., rippling) to indicate that new channel selection items have been added, but are not yet visible in the display area.
- Once channels have been selected and added to the user's collection (e.g., a favorites collection), the document reader retrieves documents published by the selected sources and related to the selected topics to be displayed in the GUI of the document reader. The document reader of some embodiments then provides different feeds, or groupings, of the identified documents (e.g., a channel feed with documents from a specific channel, a topic feed with documents related to a particular topic, etc.). The document reader of some embodiments also provides a feed for a set of documents that a user of the document reader has marked, or saved, for future viewing.
- In some embodiments, the document reader provides an aggregated feed of the identified documents published by all of the selected sources and related to all of the different topics. The document reader of some embodiments provides different views of the aggregated feed throughout the day. In some embodiments, the document reader provides a morning view of the aggregated feed with a featured article of the day that is presented in a different manner than any of the other documents in the aggregated feed. The featured article of some embodiments is only presented at certain times (e.g., when the application is opened for the first time in a given day). At other times, the document reader provides the aggregated feed based on the user's previous viewing of documents in the feed.
- In some embodiments, the document reader provides a GUI for adding additional channels for a user based on the user's individual reading preferences, selected channels, global user preferences (e.g., hot or trending channels), etc. In some embodiments, the document reader provides a first interface for adding channels during an initial onboarding process and a second different interface for adding additional channels. The interface for adding additional channels in some embodiments provides recommendations for different channels (sources and topics), as well as a taxonomy view and search tool for discovering new channels.
- In order to display a particular feed in the GUI, the document reader of some embodiments generates a layout for the documents of the feed by generating and arranging document panes that provide summary information (e.g., title, image, excerpt, etc.) for each document of the feed. The document panes are arranged within a display area so that a user can view and interact with the various documents. The document reader of some embodiments provides different visual styles for the document panes based on whether the user of the application has seen (or scrolled past) a document or clicked through to read a document.
- In some embodiments, the document reader provides a document marking menu for performing various operations on the document of a particular document pane. For example, in some embodiments the document marking menu provides several selectable UI items for performing different operations (e.g., like, dislike, share, save, etc.) on the particular document. The document marking menu of some embodiments is only displayed while a user holds down a location (e.g., a specific button, or any location in the document pane). In such embodiments, the user selects the different operations by sliding along the document marking menu to select a UI item. In some embodiments, the UI items are placed on the document marking menu such that opposing actions (e.g., like and dislike) are performed by sliding along the document marking menu in opposing directions.
- Once a user has selected a document (e.g., by selecting a document pane from a feed), the document reader of some embodiments displays a document view of the selected document for viewing by the user. In some embodiments, the view that is presented to the user is different for native content and web content. The document reader provides a full article view for native articles, while providing an excerpt view for web articles. The excerpt view of some embodiments provides a short excerpt or summary of the web article, as well as a link to a full version of the document. In some embodiments, rather than a link to the full version, the user of the document reader uses gestures (e.g., swiping up) to reach the full version of the document.
- In addition to loading the selected document, the document reader of some embodiments preloads additional documents related to the loaded document. For example, the document reader of some embodiments preloads neighboring documents (i.e., a previous document and a next document) for a document selected from a feed. When the displayed view is an excerpt view of a web document, the document reader of some embodiments also preloads the full web document.
- In some embodiments, the document reader provides an end-of-document display region for displaying document panes for additional documents related to the document. The end-of-document display region of some embodiments provides a first scrollable region for displaying documents from the same source as the displayed document and a second scrollable region for displaying documents that are related to a topic of the displayed document. In some embodiments, the document reader also includes a section of related document panes embedded within the body of the article itself.
- Some embodiments provide a method for navigating through a hierarchy of documents. In some embodiments, new levels of the hierarchy are defined as a user navigates between different groups or feeds of the document reader (e.g., when a user selects a related article from the end-of-document display region). The document reader of some embodiments detects a first type of input (e.g., swipes within the display area, key entries, etc.) for navigating through the documents of a feed at a single level of the hierarchy, and a second type of input for navigating through pivot points identified in a history of documents that the user has viewed across multiple levels of the hierarchy.
- Many examples of a document reader application are described below. Section I describes examples for adding channels (i.e., topics and sources) to a user's collection in the document reader application. Section II then describes different feed views for viewing document feeds. This section also describes an interface for interacting with the documents of a feed from the different feed views. Section III describes animations and document views for different types of documents. This section also describes preloading and an end of article region for the different document views. Section IV describes navigation between documents at different levels of a hierarchy within the document reader application. Finally, Section V describes several example electronic systems that implement some embodiments described herein.
- A. Adding Channels
- In some embodiments, the document reader is for viewing articles and other content that is provided by a variety of sources regarding a variety of different topics. The user selects various different sources and topics to add to their favorites collection based on their interests. The document reader then retrieves content from the various sources and content related to the various topics, and presents different views (e.g., feed views, article views, etc.) of the content to the user.
-
FIGS. 1a-b illustrate an example of an initial interface for onboarding (or subscribing to) channels in a document reader in four stages 101-104. In some embodiments, the initial interface is presented when a user first opens a document reader, allowing the user to select channels of interest to the user. - The
first stage 101 shows a graphical user interface (GUI) 100 that includes astatus bar 110 and achannel selection region 130 with several channel selection items. Thechannel selection items 110 represent different sources and topics for documents. Source channel selection items represent various different providers of content, such as magazine publishers, newspaper publishers, websites, etc. Topic channel selection items represent topics or categories that the user may be interested in. Topic channel selection items do not represent any particular source, but rather may include documents related to the topic from a variety of different sources. In some embodiments, the source channel selection items are presented differently (i.e., different shapes, colors, styles, etc.) from the topic channel selection items. - In some embodiments, the document reader application is meant to provide the feel of a magazine so the channel selection items are presented with the familiar aspect ratios of a magazine. As the images for the various sources and topics may vary widely, the document reader of some embodiments performs various operations for creating images with the familiar magazine aspect ratio. In some embodiments, the document reader application provides different shapes and sizes (e.g., circular items, etc.) for the channel selection items.
- Many of the images identified from the various channels are provided in a landscape aspect ratio. In order to create a portrait image, the document reader of some embodiments stretches the bottom third of the image and applies a blurring effect to give the appearance of a portrait image while maintaining the detail of the original image.
- In the
second stage 102, a user selects a sourcechannel selection item 150 for a source, the Scoop, a fashion magazine. Thesecond stage 102 shows thatchannel selection item 150 has been selected.Channel selection item 150 includes animage 152, and alogo region 156. - The logo regions in some embodiments provide different appearances, or styles for selected and unselected channel selection items. In some embodiments, the logo regions for unselected channel selection items are desaturated or presented in grayscale, while selected channel selection items are presented with a colored background. In some embodiments, the background colors for different sources or brands are associated with a brand color.
- The brand color is a color that is associated with the brand. In this example, the
logo region 156 andselection ring 154 forchannel selection item 150 are presented in a brand color associated with the particular source (i.e., “Score”). In some embodiments, topic channel selection items are also assigned a brand color to be associated with the particular topic. - The
second stage 102 also shows that the size of thechannel selection item 150 is made smaller to indicate that it is being selected. In addition to becoming smaller, theimage 152 forchannel selection item 150 is zoomed out, exposing more of theimage 152. In this example, theimage 152 shows more of the little finger in the image than the same image in thefirst stage 101. - The
third stage 103 shows that, upon selection ofchannel selection item 150, newchannel selection items 160 are added to thechannel selection region 130. In this example,channel selection items 160 include channel selection items for new sources (i.e., other fashion magazines) as well as for new topics (i.e., fashion) that are related to the selectedchannel selection item 150. A process for generating and displaying the new channel selection items is described with reference toFIG. 3 below. - In the
fourth stage 104, the newchannel selection items 160 have risen into the group ofchannel selection region 130. When there are too many channel selection items to be displayed in thechannel selection region 130 of theGUI 100, some of the channel selection items, likechannel selection items 160, are only partially displayed in theGUI 100. When thechannel selection region 130 is full, new channel selection items may not be displayed at all, until a user scrolls down through thechannel selection region 130. - In the example of
FIGS. 1a-b , the channel selection items are displayed as rectangular tiles, with proportions similar to magazines or other periodicals. In some embodiments, the document reader provides channel selection items with different appearances and layouts to provide a pleasing interface for a user of the application.FIG. 2 illustrates another example of an initial interface for onboarding (or subscribing to) channels in a document reader in three stages 201-203. - The first stage 201 shows a graphical user interface (GUI) 200 with a
channel selection region 230 with several round channel selection items. Much like the channel selection items ofFIGS. 1a-b , the channel selection items of this example represent different sources and topics for documents. The first stage 201 also shows that a user selects a sourcechannel selection item 250 for a source, Allure, a fashion magazine. - The second stage 202 shows that
channel selection item 250 has been selected.Channel selection item 250 includes aselection ring 254 and alogo region 256. In different embodiments, thelogo region 256 shows images or other descriptors for the source or topic associated with each channel selection item. The second stage 202 also shows that, upon selection ofchannel selection item 250, newchannel selection items 160 for other sources and topics are added to thechannel selection region 230. - In the third stage 203, the new
channel selection items 260 have risen to the group of channel selection items in thechannel selection region 230. As thechannel selection region 230 is full of channel selection items, the newly added channel selection items are not yet visible to the user. In some embodiments, the interface provides an animation (e.g., a ripple animation, etc.) to indicate the addition of the new off-screen channel selection items. -
FIG. 3 conceptually illustrates a process for generating channel selection items. Theprocess 300 of some embodiments is performed by the document reader application to provide additional suggested channels for a user. Theprocess 300 identifies (at 305) the channels to which the user has subscribed. - Based on the subscribed channels, the
process 300 identifies (at 310) a set of sources related to the subscribed channels. In some embodiments, the document reader application maintains a set of categories, or tags, for each source and topic. Based on the categories for the subscribed channels, theprocess 300 of some embodiments identifies other sources and topics that fall within the same categories. Theprocess 300 similarly identifies (at 315) a set of topics related to the subscribed channels. Theprocess 300 then displays (at 320) a set of recommended channel selection items based on the identified sets of sources and topics. - In some embodiments, new channels can be added to a user's collection after the initial onboarding process. The interface for adding additional channels in some embodiments provides recommendations for different channels (sources and topics), as well as a taxonomy view and search tool for discovering new channels.
-
FIGS. 4 and 5 illustrate examples of adding new channels for the document reader.FIG. 4 illustrates an example of aGUI 400 for adding a new source channel for a document reader in four stages 401-404. Thefirst stage 401 shows aGUI 400 for a document reader that includes astatus bar 410, achannel view 430, and atoolbar 420. Thechannel view 430 is just one of the different views that the document reader displays for a user. Thetoolbar 420 includes icons for performing various operations in the document reader application, such as viewing different feeds and articles, as well as adding new channels. - The
first stage 401 shows that the user selects anexplore icon 426 from thetoolbar 420. The selection causes theGUI 400 to show anexplore view 440, that includes a suggestedsources region 450, a suggestedtopics region 460, and abrowse region 470, as illustrated in thesecond stage 402. - The
explore view 440 includes various regions for finding new content that can be added to the favorite channels list of a user. Theexplore view 440 of thesecond stage 402 shows that suggestions for different sources and topics may be provided in separate regions (i.e., suggestedsources region 450 and suggested topics region 460), but as shown in the onboarding interface ofFIGS. 1a-b above, in some embodiments, the sources and topics are intermixed. In some embodiments, sources are displayed differently from topics. For example, the channel selection items for sources in the suggestedsources region 450 in some embodiments are presented as circular channel selection items, like those described above with reference toFIG. 2 , while topics are displayed as rectangular channel selection items, as shown in suggestedtopics region 460. The different appearances allow a user to quickly distinguish between channel selection items for sources and topics. - This is particularly useful when, in some embodiments, sources can also serve as topics. In this example, Pose Magazine is listed as a topic, rather than as a source. Selection of the channel selection item for Pose Magazine would provide a feed of articles about Pose Magazine, and not necessarily from Pose Magazine. In some embodiments, a source selection item for the source Pose Magazine would be presented as a circular channel selection item, while a topic channel selection item for articles about Pose Magazine would be presented as a rectangular channel selection item. The
browse region 470 is described below with reference toFIG. 5 . - The document reader provides the different suggested channels and topics based on a variety of different factors. In some embodiments, the document reader provides suggestions based on the channels that the user has subscribed to or based on properties of the articles that the user reads in the application. In some embodiments, the articles are tagged with different topics or categories and the document reader makes suggestions for topics and/or sources based on the tags. Alternatively, or conjunctively, the document reader of some embodiments suggests different channels and topics that are popular or trending with other users of the application.
- The
second stage 402 also shows that the user selectschannel selection item 452 from suggestedsources region 450. In response to the selection ofchannel selection item 452, thethird stage 403 shows thatchannel selection item 452 has been selected, as indicated by acheckmark 454 onchannel selection item 452. If the user selects the checkmark 454 (or channel selection item 452) again, thechannel selection item 452 would be unselected and return to showing a plus sign. - The suggested
sources region 450 of some embodiments is provided as a region that is scrollable to reveal additional sources. Thethird stage 403 shows that the user scrolls through suggestedsources region 450 to display newsource selection items 459 as shown in thefourth stage 404. -
FIG. 5 illustrates another example of adding a new topic channel for a document reader in three stages 501-503. Thefirst stage 501 showsGUI 400 withexplore view 440 as described above with reference toFIG. 4 . In thefirst stage 501, the user scrolls down through theexplore view 440. The scrolling in thefirst stage 501 reveals more detail of thebrowse region 470, as illustrated in thesecond stage 502. Thebrowse region 470 shows a taxonomy of different topics and sources, organized into several different categories. A user of the document reader can browse thebrowse region 470 to add additional channels to their favorites list. - In the
second stage 502, the user selects the topicchannel selection item 565.Channel selection item 565 adds a channel with articles related to technology from a variety of different sources. In some embodiments, a topic channel only includes articles from sources that the user has added to their collection, while in other embodiments, topic channels include articles from other sources as well. In response to the selection of topicchannel selection item 565, thethird stage 503 shows acheckmark 567 in the topicchannel selection item 565. -
FIG. 6 illustrates an example of an alternative interface for exploring new channels.GUI 600 is similar to theGUI 400 ofFIGS. 4 and 5 , but rather than rectangular tiles, theGUI 600 presents spherical channel selection items for sources in thesources section 650 and rectangular topic selection items for topics in thetopics section 660. TheGUI 600 may use various different appearances for sources and topics throughout the application. - In addition, rather than a separate screen for search, the
GUI 600 provides asearch bar 614. Thesearch bar 614 of some embodiments allows a user to search for particular results in theexplore view 640, filtering the channel selection items displayed in theexplore view 640 based on user input in thesearch bar 614. The various search and exploration functions allow a user to quickly and efficiently identify interesting channels to add to their collection. - B. Onboarding Animations
- The document reader application of some embodiments provides animations during the onboarding process to provide a simple and intuitive interface.
FIG. 7 illustrates an example of an initial onboarding animation that is shown when a user first begins the document reader application. In thefirst stage 701,GUI 700 shows an initial welcome screen with awelcome message 705. As a part of the initial loading animation, thesecond stage 702 shows a group of blurred,channel selection tiles 720 for a group of channels (sources and topics) that fade in behind thewelcome message 705 on the welcome screen. Thesecond stage 702 also shows that the user selects alink 730 to begin adding channels for the document reader application. - The selection in the
second stage 702 causeswelcome message 705 to fade out as thechannel selection tiles 720 come into focus and grow larger, as illustrated in thethird stage 703. In thefourth stage 704, theGUI 700shows status bar 710 andchannel selection region 730 with the full-sizedchannel selection items 720 as described above inFIG. 1 . The user is then able to subscribe to channels, adding them to the user's favorite channels list to customize the content provided to the user through the document reader application. - As the user subscribes to channels from the onboarding interface, new channel selection items are added to the channel selection region based on the user's selections. As the channel selection region fills up and more channel selection items are added off-screen, the document reader of some embodiments provides a visual effect to indicate the addition of off-screen items.
-
FIG. 8 illustrates an example of a ripple effect to indicate the addition of off-screen items during the onboarding process in four stages 801-804. In thefirst stage 801, theGUI 800shows status bar 810 andchannel selection region 830. Thechannel selection region 830 is full of channel selection items. Thefirst stage 801 also shows that a user has selectedchannel selection item 850. In response to the selection, the document reader adds new channel selection items (not shown) to thechannel selection region 830, but the new items are not displayed because the displayedchannel selection region 830 is already full. However, to indicate that new channel selection items have been added to thechannel selection region 130,GUI 800 provides a visual effect, such as a ripple effect, that indicates that new channel selection items for suggested channels are available. - In some embodiments, the strength or visibility of the visual effect is dependent on the number of channel selection items that are added. Alternatively, or conjunctively, the strength or visibility of the visual effect is dependent on the number of channel selection items that are already available in the group of channel selection items. For example, in some embodiments, when the group of channel selection item already includes several off-screen channel selection items, the visual effect is weaker or more subtle than when the new channel selection items are closer to the bottom of the visible display area of the GUI.
- The
second stage 802 shows that a ripple effect animation has begun. Channel selection items 852-858 have risen in a staggered fashion from their positions at the bottom of thechannel selection region 830. In thethird stage 803,channel selection item 852 begins to descend back to its original position as channel selection items 854-858 continue to rise. The staggered movement of the channel selection items 852-858 cause a rippling, wave-like effect at the bottom of the screen, indicating to the user that new channel selection items (not shown) have been made available. Finally, thefourth stage 804 shows that channel selection items 852-858 have returned to their original positions. - A. Feed Layouts
- The document reader application of some embodiments provides a document feed view for viewing summaries or excerpts of several documents in a single ordered layout. In some embodiments, the feed layouts are generated based on user preferences in order to provide an aesthetically pleasing display of document summaries. The generation of the feed layouts is further described in the concurrently filed U.S. Patent Application ** having Attorney Docket No. APLE.P0689 and entitled “Document Summary Feed Generation Method, Apparatus, and System”, which is incorporated herein by reference.
-
FIG. 9 illustrates an example of displaying a feed view of an aggregated feed and an article view of a particular document from the aggregated feed in four stages 901-904. Thefirst stage 901 shows aGUI 900 that includes astatus bar 910, amain display area 930, and a toolbar 914. In thefirst stage 901, the user selects an icon 922 (“For You”) to display afeed layout 940 for an aggregated feed as illustrated in thesecond stage 902. - The
second stage 902 shows thefeed layout 940, which displays document panes for each of several documents in the aggregated feed. The document panes are of varying sizes and contain different amounts of information (e.g., some document panes provide an image, while others do not). The document panes of some embodiments may use different internal layouts for the information presented in the document pane, with each internal layout using different aspect ratios, different amounts of text, etc. -
FIG. 10 illustrates an example of different elements of a document pane. Thedocument pane 1000 includes animage 1010, atitle 1012, a brief summary orexcerpt 1014,source information 1016, andtime value 1018. Theimage 1010 is provided by the source along with the brief summary orexcerpt 1014 for the corresponding article. In some embodiments, the document reader application performs a crop on the image received from the source in order to fit the image to the layout of the document pane or to provide a parallax effect when animating from the feed view to an article view, as described below. -
Source information 1016 includes a logo and a source name (“PR”). The logo and source name are provided by the source of the article. In some embodiments, when a logo is not available, the document reader generates a logo based on other information (e.g., source name, brand color) retrieved from the source. -
Time value 1018 of some embodiments is a time since the article was retrieved for the user. Alternatively, or conjunctively,time value 1018 provides a time since the article was published by the source, or the actual date/time of publication. - Referring back to
FIG. 9 , thesecond stage 902 further shows that the user scrolls up through the document panes of thefeed layout 940. As a result of scrolling up, thefeed layout 940 showsnew document panes third stage 903 also shows that the user has selecteddocument pane 944. - In response to the selection,
GUI 900 shows an article toolbar 990 for interacting with the document and afull article view 950 corresponding to the selecteddocument pane 944 as illustrated in thefourth stage 904. Thefull article view 950, like thedocument pane 1000 described above with reference toFIG. 10 , includes an image, title, source information, and time value. However, rather than the summary or excerpt text, thefull article view 950 includes thefull content 988 of the article. The full content of articles may include additional text, images, graphics, videos, and other elements that are not displayed in the document panes. -
FIG. 11 illustrates an example of displaying a feed layout for a selected channel in four stages 1101-1104. In thefirst stage 1101,GUI 1100 showsstatus bar 910,toolbar 920, and an aggregatedfeed layout 940 as described above. Thefirst stage 1101 also shows that the user selects afavorites icon 1124 to display a favorites view 1130 for the user as illustrated in thesecond stage 1102. - In this example, favorites view 1130 displays channel tiles that represent different sources (e.g., Newz, CQ, etc.) and topics (e.g., smartphones) that the user has added to their favorite channels list. The favorite channels may be selected by the user during the initial onboarding process or as the user explores for new channels from within the document reader application.
- The
second stage 1102 also shows that the user scrolls through the favorites view 1130 to display more of the channel tiles. In thethird stage 1103, the user has scrolled to the bottom of the favorites view 1130 and selects channel card 1132 (i.e., for Self magazine). In response to the selection, theGUI 1100 showsstatus bar 910,toolbar 920 and achannel feed view 1140 in thefourth stage 1104.Status bar 910 displays the title of the selected channel (i.e., Selfie magazine), but, unlike the aggregatedfeed layout 940 ofFIG. 9 , thechannel feed layout 1140 only includes articles from the selected channel (i.e., Selfie magazine). If, rather than selecting a source channel, the user had selected a topic channel in the third stage 1103 (e.g., smartphones), then thechannel feed layout 1140 would provide articles from several sources, but would only include articles related to the selected topic. - While viewing articles in feed layouts or in full article views, the document reader of some embodiments allows a user to save articles for future viewing or reference.
FIG. 12 illustrates an example of displaying saved documents in twostages first stage 1201 showsGUI 1200displays status bar 910,toolbar 920, and aggregatedfeed layout 940. In thefirst stage 1201, the user selects the savedicon 1228 fromtoolbar 920 to display a saveddocument layout 1230 as illustrated in thesecond stage 1202. The saveddocument layout 1230 includes document panes for articles that were saved in the previous days and weeks. The saved articles are articles that the user has previously marked for saving through various interfaces described below. In some embodiments, the document reader application stores full versions of each of the saved articles for offline viewing. - In the document panes of the various feed layouts (e.g., aggregated feed layout, channel feed layout, saved document layout, etc.), images from the document may be cropped for the document pane to fit within a particular document pane. For example, a document may include a portrait image while the document pane for the document may call for a landscape image. However, simple cropping of an image may have undesirable results, as important portions of the image may be cut off or misaligned.
-
FIG. 13 illustrates an example of intelligent cropping to fit images to a particular aspect ratio. Thefirst image 1301 illustrates an original image, as received from the source for a particular document. Theoriginal image 1301 may be the image that is used within a native article layout or may be an image provided with an article summary in a web feed (e.g., RSS, Atom, etc.). Thesecond image 1302 illustrates a simple top cropping method that takes aportion 1310 of the original image to fit the desired aspect ratio that begins at the top of the original image. In this example, the proportions of the croppedportion 1310 are undesirable, as unnecessary space is left at the top of the player's head and the arms and trophies are cropped awkwardly. - The
third image 1303 illustrates a simple centered cropping method that captures aportion 1320 that is vertically centered on the image. In this example, again the proportions of the croppedportion 1320 are undesirable, as the player's head is largely cropped out and the player's eyes are uncomfortably close to the top of the croppedportion 1320. Thefourth image 1304 illustrates an intelligent cropping method. The intelligent cropping method begins the croppedportion 1330 at a calculated distance from the top of the image. The distance is calculated based on the aspect ratio of the image and creates a more pleasing effect in most images, providing the most desirable portions of the original image within the croppedportion 1330. - The formula of some embodiments is y=(1−x)*30, where x is the aspect ratio (i.e., height/width) and y is the percentage from the top of the image at which to begin the cropped portion. For example, for 480×640 image, the aspect ratio is 0.67, so the formula provides that the cropped portion should begin at y=(1−0.67)*30=(0.33)*30=10. Thus, in this example, 10% of the top of the image would be cropped, and the selected portion would begin 64 pixels from the top of the image.
- The calculation of some embodiments is based on the rule of thirds, which many photographers use, which places points of interest at intersections of imaginary lines that divide the image into thirds. The intelligent cropping method of some embodiments identifies gravity points at these intersections and is formulated to prominently capture a portion of the image with a desired aspect ratio. The intelligent cropping method is formulated such that the captured portion includes a set of the identified gravity points, regardless of the original aspect ratio of the image.
- In some embodiments, while displaying a feed layout, the document reader updates the feed layout periodically or upon receiving instructions from a user to update the particular feed. The document reader of some embodiments retrieves new documents from the various sources and appends them to the currently displayed feed layout.
-
FIG. 14 illustrates an example of receiving updates while displaying a feed layout. In thefirst stage 1401, theGUI 1400 displays astatus bar 1410,toolbar 920, and an aggregatedfeed layout 940 as described inFIG. 9 above. Thestatus bar 1410, in addition to a title for the aggregated feed, displays a time and other device information. - The
second stage 1402 shows that the document reader has received updates to the current feed. In thesecond stage 1402, the document reader provides anotification 1412 in thestatus bar 1410 of new documents that have been added to the feed. Thenotification 1412 indicates the number of new stories retrieved for a time period (e.g., “12 new stories this afternoon”). The aggregatedfeed layout 940 does not change. - In some embodiments, the
notification 1412 appears for a designated period of time before animating back to identify the particular channel or view of the displayed feed. Thethird stage 1403 shows that after a short period of time, thestatus bar 1410 displays the title (“For You”) and abadge 1414, which indicates the number of new articles that have not yet been seen. In some embodiments, the number in the badge changes as the user views documents by scrolling through thefeed layout 940. - B. Alternate Views
- The document reader application of some embodiments provides different interfaces for different types and sizes of devices. For example, in some embodiments, the document reader provides a larger interface for tablet type devices and a smaller interface for other mobile devices (e.g., smartphones, etc.).
-
FIG. 15 illustrates an example of a document layout for a smaller interface of a mobile device in four stages 1501-1504. Thefirst stage 1501 showsGUI 1500 withstatus bar 1510,toolbar 1520, and aggregatedfeed layout 1530. Thestatus bar 1510 andtoolbar 1520 are similar to the status bar and toolbar ofFIG. 9 . In some embodiments, a similar interface is used between a variety of different devices and screen orientations to provide a consistent document reader experience. - Like the
document pane 1000 ofFIG. 10 , the document panes displayed in the aggregatedfeed layout 1530 include images, titles, source information, and time values for each document. In addition, the different document panes may have different layouts and sizes. However, unlike the aggregatedfeed layout 940 ofFIG. 9 , the aggregatedfeed layout 1530 of some embodiments provides a different layout for the document panes of the aggregated feed. - For example, in the
first stage 1501, the document panes in the aggregatedfeed layout 1530 do not include the brief summary or excerpt of the article in order to save space and increase visibility. Due to the smaller screen size of some mobile devices, the document reader provides a simplified list view for displaying document panes of an article feed rather than using more complicated layouts. - The
first stage 1501 also shows that the user scrolls through the aggregatedfeed layout 1530 to show additional document panes, as illustrated in thesecond stage 1502. Thetop article 1550 is no longer displayed in thefeed layout 1530. In thesecond stage 1502, the user scrolls back up toward the top of thefeed layout 1530, displaying a portion of thetop story 1550. - In some embodiments, the
top story 1550 includes a sticky point at which scrolling stops for large articles, such that the title, source information, and a portion of the image is visible, without showing the full size document pane, allowing thefeed layout 1530 to show more stories at once. In thethird stage 1503, the user scrolls down again in thefeed layout 1530 to display the rest of thetop story 1550, as illustrated in thefourth stage 1504. - In some embodiments, in addition to providing different views for different devices, the document reader provides different views throughout the day, even for the same device.
FIG. 16 illustrates an example of a layout for a morning feed at various times in four stages 1601-1604. Thefirst stage 1601 showsGUI 1600 withstatus bar 1610,toolbar 1620, andmorning feed layout 1630. In thefirst stage 1601, theGUI 1600 shows amorning feed layout 1630, which includes a featuredstory 1632 for the day. In some embodiments, the featuredstory 1632 is displayed differently (e.g., larger, with different visual styles, etc.) from all of the other stories. In this example, the featuredstory 1632 is the only story that takes up the entire width of themorning feed layout 1630. The document panes for the remaining articles in the morning feed layout are arranged in a fashion similar to those described above for the different feed layouts (e.g., aggregated feed layout, channel feed layout, etc.). - The featured story of some embodiments is only provided once within a given particular time period (e.g., a calendar day, morning/afternoon/evening, etc.). In some embodiments, the document reader application selects the featured story from a set of stories received from the user's collection of sources. In some embodiments, the publishers designate a set of stories as featured articles and the document reader application selects one of the designated stores based on the user's reading history and interests.
- The
first stage 1601 also shows that the user scrolls through the feed layout to view additional stories in the aggregated feed, as illustrated in thesecond stage 1602. In thesecond stage 1602, the user also closes the document reader. - In the
third stage 1603, the user returns to the document reader at a later point during the day. TheGUI 1600 shows thefeed layout 1630 from the same position as when the user closed the application in thesecond stage 1602 earlier that day. The available articles in the feed have not changed, as new articles are added at the bottom of the feed. However, articles that the user has viewed, whether from the aggregated feed or through another view (e.g., through the channel views of the favorites screen), are shown differently from new and unviewed articles. In this example, thefeed layout 1630 displays the source information (e.g., source information 1650) for articles that were previously viewed as grayed out, to indicate that the user has previously seen these articles. - In some preferred embodiments, the aggregated
feed layout 1630 will begin with the first new article. For example, rather than showing the same articles that were shown in thesecond stage 1602, the document reader application of some embodiments shows the first unseen articles at the top of thefeed layout 1630 when the user returns to the document reader application. The user can then scroll back up to view the articles that they have previously seen. In thethird stage 1603, as the document reader was opened again during the same day, no new top story is displayed. Only one top story is displayed for a given day. - Finally, the
fourth stage 1603 illustrates theGUI 1600 when the document reader is opened for the first time on a subsequent day. TheGUI 1600 displays anew feed layout 1640 with a newtop story 1642 is presented at the top of thefeed layout 1640 with new articles for the day as well. Although not shown, in some embodiments, the user can scroll up to go back to the articles of the previous day, whether they have been seen or not. -
FIG. 17 conceptually illustrates a process for providing a morning feed layout. Theprocess 1700 of some embodiments is performed by a document reader application each time the application is opened on a user's device. Theprocess 1700 receives (at 1705) instructions to display a feed view for a set of documents. These instructions may be based on user input to display a feed (e.g., selecting a channel tile to display a channel feed, selecting an icon to display the aggregated feed, etc.) or may be automatically generated when the document reader application begins (i.e., a default feed view). - The
process 1700 determines (at 1710) whether this is the first display of the feed layout for a designated time period. The designated time period of some embodiments is a calendar day, a set number of hours, morning/afternoon/evening, etc. When theprocess 1700 determines (at 1710) that this is not the first time that the feed layout is being displayed, theprocess 1700 proceeds to step 1730 to display a normal feed layout as described below. - When the process determines (at 1710) that this is the first display of the feed for a given time period, the
process 1700 retrieves (at 1715) a featured article. In some embodiments, the process chooses the featured article to be retrieved by receiving a set of documents from a set of sources from the user's collection and identifying a top story based on the user's reading history and interests. In some embodiments, each source of the set of sources specially designates a particular story as a feature story for the particular time period. - The
process 1700 then generates (at 1720) a document pane for the featured article with a unique style to be displayed in the feed layout. Theprocess 1700 then inserts (at 1725) the generated document pane into the feed layout. In some embodiments, theprocess 1700 inserts (at 1725) the generated document pane at the top (or at some other prominent location) of the displayed feed layout. - Once the featured article has been placed in the feed layout, the
process 1700 retrieves (at 1730) any new articles for the feed. Theprocess 1700 generates and appends (at 1735) document panes for the new articles to the feed layout. In some embodiments, theprocess 1700 inserts (at 1725) the generated document pane for the featured article immediately before the document panes for the new articles. In other embodiments, theprocess 1700 inserts (at 1725) the generated document pane at another location in the feed layout (e.g., immediately before the document panes for any unseen articles). Theprocess 1700 then displays (at 1740) the feed layout. - C. Document Marking Menu
-
FIG. 18 illustrates an example of a document marking menu for performing different operations on articles in a feed layout in five stages 1801-1805. Thefirst stage 1801 illustrates a portion of afeed 1800. Theportion 1800 includes threedocument panes first stage 1801, the user holds a position to bring up adocument marking menu 1840 ondocument pane 1820, as illustrated in thesecond stage 1802. In some embodiments, the user holds a button for bringing up thedocument marking menu 1840, while in other embodiments a user can hold a location anywhere within the document pane to bring up thedocument marking menu 1840. - The
second stage 1802 shows thedocument marking menu 1840 has been displayed at the location held by the user. Thedocument marking menu 1840 includes fourUI items particular document pane 1820, as well as aplaceholder icon 1850. In this example,UI item 1842 is for sharing the article of thedocument pane 1820 using different services (e.g., email, social networks, etc.).UI item 1844 is for saving the article for future viewing. -
UI items -
Placeholder icon 1850 indicates the held location in the document pane. In some embodiments, selection of the different UI items 1842-1848 is performed by sliding from theplaceholder icon 1850 to a particular UI item. - In the
third stage 1803, the user slides fromplaceholder icon 1850 down to theUI item 1848 to dislike the article. The UI items of thetoolbar 1840 are placed such that, if the user wanted to like the article, the user would slide in the opposite direction. In some embodiments, opposing actions (e.g., like/dislike) are placed in opposing directions relative to theplaceholder icon 1850 of thetoolbar 1840, such that opposing actions can be performed by sliding in opposing directions. - The
fourth stage 1804 shows thatUI item 1848 has been highlighted to indicate that the user has selected UI item 1848 (e.g., by lifting their finger from the UI item). Thefifth stage 1805 shows that once the user selectsUI item 1848, thetoolbar 1840 is no longer displayed. However, to indicate that the user has disliked the article fordocument pane 1820,icon 1852 is displayed in the lower right corner of thedocument pane 1820. - In some embodiments, the UI items of the toolbar are for performing other operations on the article for a document pane.
FIG. 19 illustrates an example of using the UI item to share a document in a document feed in six stages 1901-1906. The first three stages 1901-1903 show that the user holds down a location indocument pane 1820 to bring uptoolbar 1840 and slides up from theplaceholder icon 1850 to selectUI item 1842 in order to share the article associated withdocument pane 1820. - In the
fourth stage 1904, the user has selectedUI item 1842 to share the article, which brings up asecondary toolbar 1960 with UI items for three separate sharing services (e.g., social networking sites, image sharing sites, etc.). Thefourth stage 1904 shows that the user slides from the selectedUI item 1842 to selectUI item 1962. - In the
fifth stage 1905, the user selectsUI item 1962 to share the article. In some embodiments, theUI item 1962 opens another display area (not shown) to share the article through a third party API. Thesixth stage 1906 shows that thedocument pane 1820 now showsicons document pane 1820 has been disliked and shared by the user. -
FIG. 20 illustrates an example of an alternative UI for performing different operations on articles in a feed layout. In thefirst stage 1901,GUI 2000 shows a feed layout for a mobile device, similar to the one described above with reference toFIG. 15 . In thefirst stage 2001, the user slides acrossdocument pane 2052. - The second and
third stages document pane 2052, amenu 2040 slides into the display area. Themenu 2040 includesUI item 2042 to share the article,UI item 2044 to bookmark (or save) the article, andUI items third stage 2003. In thethird stage 2003, the user selectsUI item 2044 to save the article for future viewing. - Finally, the
fourth stage 2004 shows thatdocument pane 2052 now showsicon 2054 to indicate that the article fordocument pane 2052 has been bookmarked by the user. - The document reader of some embodiments provides a document view for content from various sources. Some sources provide the content in a native format that provides rich formatting and placement data that can be used to provide a dynamic and aesthetically pleasing layout. Other sources may provide content (i.e., web content) in a standardized, but less rich format (e.g., RSS, Atom, etc.) The document reader of some embodiments provides different presentations for the different types of articles.
- A. Web Documents
- For web content, the source may not immediately provide a full article, but rather an excerpt view of the article. The document reader then provides access to the full article view from the excerpt view (e.g., through gestures, links, buttons, etc.). The excerpt view may include a limited number of images and an excerpt or summary of the full content of the web article. When the web content is received in a non-native format (e.g., RSS, etc.), some embodiments generate the intermediate excerpt view and/or the full article view using a templating scheme that matches the received web content to a template and applies styling and/or formatting to the content according to the template in order to generate an aesthetically pleasing layout for the web content.
FIG. 21 illustrates an example of displaying a web document from a feed layout in two stages 2101-2102. In thefirst stage 2101, theGUI 2100 shows the aggregatedfeed layout 930. Thefirst stage 2101 also shows that the user has selecteddocument pane 2120 for a web article from the aggregatedfeed layout 930. - The
second stage 2102 shows anarticle toolbar 960 and anexcerpt view 2140 of the web article. Thearticle toolbar 960 includes different affordances for interacting with the article (e.g., displaying related articles, sharing the article, bookmarking the article, etc.). - The
excerpt view 2140 includes anenlarged image 2142,title pane 2144, excerptedtext 2146, and anaffordance 2148 to display a full version of the article. Thetitle pane 2144 displays the title of the article, a logo and name for the source of the article and a time value (e.g., the publication date, time since the article was added to the user's feed, etc.) for the article. Theaffordance 2148 in some embodiments is a link that opens a full version of the web content in a browser object for displaying web content within the document reader application. In some embodiments, the document reader applies a set of styles to the web content to provide a consistent view of the different articles from the various sources. -
FIGS. 22 and 23 illustrate examples of displaying a full document from an excerpt view of a web document.FIG. 22 shows an example of displaying a full document from an excerpt view in two stages 2201-2202. In thefirst stage 2201, a user selects anaffordance 2148 that is provided in the excerpt view of a web document. In some embodiments theaffordance 2148 to the full article is provided after the content, but before an end-of-article interface that is described in Section D below. - The
second stage 2202 shows that theGUI 2200 displays afull view 2230 of the article. In this example, thefull view 2230 of the article is formatted similarly to theexcerpt view 2140, but rather than theaffordance 2148 and the excerptedtext 2146, thefull view 2230 displays the full text 2248 of the article. In some embodiments, the document reader provides customized styles (e.g., through custom css style sheets) to provide a consistent experience for the different types of documents from different sources. Alternatively, or conjunctively, the document reader of some embodiments provides the full article view for a web document through a browser object, allowing the document reader to treat the web article as a native article with interesting layouts and styles to improve readability and user experience. -
FIG. 23 illustrates another example of displaying a full web document from an excerpt view in two stages 2301-2302. The example in this figure is similar to the example ofFIG. 22 , however, rather than selecting theaffordance 2148, thefirst stage 2301 shows that the user performs a gesture (i.e., a swipe up) through theexcerpt view 2140. In response to the swiping past the end of theexcerpt view 2140, thesecond stage 2302 illustrates that theGUI 2300 loads thefull view 2230 of the web document in the browser object as described above. - In some embodiments, in providing the different presentations for web and native articles, the document reader of some embodiments provides animations between the layout view and the article views for the web and native documents.
FIG. 24 illustrates an example of the animation of a document pane in a feed layout to an excerpt document view for a web article. Thefirst stage 2401 showsGUI 2400 withstatus bar 2410 andfeed layout 2430. Thestatus bar 2410 displays a name for the feed. - In the
first stage 2401, a user selectsarticle 2450, withimage 2452, from thefeed layout 2430. In response to the selection, theGUI 2400 zooms into the selectedarticle 2450 as the neighboring articles expand and are pushed out of the display area, as illustrated instages third stage 2403 shows that theimage 2410 and title are scaled to grow and move toward their final places within the excerpt view of the web article, shown in thefourth stage 2404. The document reader of some embodiments recrops the image to expose portions of the image that were previously cropped to fit the image to the layout of the document pane. In some embodiments, only theimage 2410 and the title 2412 grow during the animation, while the summary text of the document pane fades out and the full article text fades in. - In some embodiments, the document reader application performs operations to recrop, rescale, and recenter
image 2452 to animate theimage 2452 into a specified location in thefull article view 2440, creating a parallax effect to provide a sense of depth in a flat image. The operations of the document reader application on theimage 2452 create the appearance that the frame of theimage 2452 moves independently of theimage 2452, creating an illusion of depth and motion within the transition animation. - Alternatively, or conjunctively, the document reader application uses cinemagraphs to animate the
image 2452 into a specified location in thefull article view 2440. Cinemagraphs are still photographs in which a minor and repeated movement occurs. Cinemagraphs, which in some embodiments are published in either animated GIF format or as video, can give the illusion of motion related to the animation to the specified location. - B. Native Documents
-
FIG. 25 illustrates an example of displaying a native document in two stages 2501-2502. In thefirst stage 2501,GUI 2500 shows the aggregatedfeed layout 930 and shows the user has selecteddocument pane 2550 for a native article. In response to the selection, thesecond stage 2502 shows afull view 2540 of the native article. In some embodiments, native articles are provided by the publishers in a special format that allows for flexible placement and styling of images and text, with rich formatting and animations to provide an enhanced multimedia experience. Thesecond stage 2502 shows that thefull view 2540 of a native article includes multiple images placed at various locations within thefull view 2540, as well as specially formatted text (e.g., quote text 2546). Native articles some embodiments have more sophisticated layouts, placing images, text and other multimedia objects at various locations within the article layout. -
FIG. 26 illustrates an example of the animation of a document pane in a feed to a full document view for a native article in four stages 2601-2604. In thefirst stage 2601, the user selects adocument pane 2650 for a native article from the aggregatedfeed layout 930. Selection ofdocument pane 2650 begins an animation for elements (e.g.,image 2652,excerpt text 2654, etc.) in thedocument pane 2650 to afull view 2630, as illustrated in stages 2602-2603. Like the animation for a web article described above, the other document panes of thefeed layout 930 are pushed out of the display area asimage 2652 is recropped, rescaled and moved from the document pane to a location within thefull view 2630 of the article.Stages full view 2630 of the article. - C. Preloading
- In order to provide a smoother, uninterrupted experience when displaying documents, the document reader of some embodiments performs a set of preloading operations to load neighboring articles once a particular article has loaded.
FIG. 27 illustrates an example, in four stages 2701-2704, of preloading neighboring articles when a particular article is selected. - The
first stage 2701 shows a sequence of articles 1-6 displayed in a feed layout. The sequence of articles may be ordered based on a variety of factors, including time order, user rank, placement within a particular layout, etc. In thefirst stage 2701, a user selects aweb article 2 from afeed layout 2730 in the GUI 2700. In response the selection, thesecond stage 2702 shows anexcerpt view 2740 ofarticle 2 has been loaded in the display. - In addition, the
second stage 2702 shows that the next article in the sequence (i.e., article 3) is being preloaded (as indicated by a dashed line) into memory. In some embodiments, rather than unnecessarily loading the entirety of an article the user may not be interested in, the document reader only loads a minimal portion ofarticle 3, such that an initial screen forarticle 3 can be loaded immediately when the user navigates toarticle 3. The remainder of the article can then be loaded once the user decides to view article 3 (e.g., by swiping to the next article). - The
third stage 2703 shows that article 3 (or a portion of the article) has been preloaded (as indicated by a thick dashed line) and theprevious article 1 within the sequence of articles is now being preloaded into memory. - In some embodiments, when an
excerpt view 2740 of a web article is shown in GUI 2700, the document reader preloads a full version of the web article. In thefourth stage 2704, once the neighboringarticles - This example describes a particular order for preloading the full version of the article along with the neighboring articles, but this is not intended to limit the invention. One skilled in the art will recognize that the preloading of related articles may be performed in different orders without departing from the invention.
-
FIG. 28 conceptually illustrates aprocess 2800 of some embodiments for preloading documents in a document reader application. Theprocess 2800 of some embodiments is performed by a document reader whenever a full article view is displayed (e.g., when an article is selected from a feed view, when a user navigates (e.g., by swiping) to a new article, etc.). Theprocess 2800 loads (at 2805) a document in a sequence of documents (e.g., documents within a feed, linked documents embedded in a document, etc.). Theprocess 2800 preloads (at 2810) the next document in the sequence before preloading (at 2815) the previous document in the sequence as well. - The
process 2800 then determines (at 2820) whether the current view of the document is an excerpt view. When theprocess 2800 determines (at 2820) that the current view is not an excerpt view, theprocess 2800 ends. When theprocess 2800 determines (at 2820) that the current view is an excerpt view, theprocess 2800 preloads (at 2825) the full view of the current document. In some embodiments, theprocess 2800 preloads (at 2825) the full view by caching a mobile or desktop version of the article from the originating website of the excerpted article and preparing a set of styles to apply to the cached version of the article. - D. End of Article
- In some embodiments, the document reader also provides an end of article UI for providing access to additional articles related to a particular article that is viewed in the document reader.
FIG. 29 illustrates an example of providing an end-of-article display region with related articles in three stages 2901-2903. Thefirst stage 2901 shows afeed layout view 930 with several document panes. Thefirst stage 2901 shows that a user selectsdocument pane 2950. In thesecond stage 2902, theGUI 2900 displays anexcerpt view 2940 of the selected article and adocument toolbar 2960. - The
document toolbar 2960 includes several icons for performing different operations on the current article, much like those described above with reference toFIGS. 18-20 . Specifically, thedocument toolbar 2960 also includes anaffordance 2962 for displaying articles related to the current article. In thesecond stage 2902, the user selectsaffordance 2962. In thethird stage 2903, theGUI 2900 moves thedocument toolbar 2960 up to display an end ofarticle section 2970. - In this example, the end of
article section 2970 includes atag bar 2975. Thetag bar 2975 includes tags, or keywords, that the article has been tagged with. In some embodiments, the tags are selectable UI items, where selection of one of the tags displays (e.g., in one of the layouts described above) additional articles that are tagged with the selected tag. - The end of
article section 2970 also displaysdocument pane area 2980, which displays document panes for articles related to the current article. The related articles of thedocument pane area 2980 include other stories from the same source as the current article, as well as stories related to the current article, but from different sources. In some embodiments, the other sources are sources that the user has selected for their favorites collection (e.g., through the onboarding and explore options described above). -
FIG. 30 illustrates an example of providing an end-of-article display region with related articles using gestures in three stages 3001-3003. Thefirst stage 3001 shows aGUI 3000 with afull view 3030 of a native article. In thefirst stage 3001, the user scrolls toward the end of the article. TheGUI 3000 also displays toolbar 3020, much like the toolbar 2920 described with reference toFIG. 29 , with icon 3022 for displaying an end of article section. However, in this example, the user uses a gesture to display an end of article section. - In the
second stage 3002, the user has scrolled to the end of the article. Thesecond stage 3002 also shows that when the user swipes up past the end of the article, the toolbar 3020 scrolls up to reveal a portion of therelated articles section 3070 as it is being scrolled into view. - In the
third stage 3003,GUI 3000 shows thefull view 3030 of the native article and the end ofarticle section 3070 overlaid above the native article. The end ofarticle section 3070 includes atag bar 3075 anddocument pane area 3080, similar to the tag bar and document pane described above with reference toFIG. 29 . - In some embodiments, the document pane area includes UI tools for displaying document panes for additional related documents.
FIG. 31 illustrates an example of interacting with an end of article section in three stages 3101-3103. Thefirst stage 3101 showsGUI 3100 with anexcerpt view 3140 of a web article and adocument pane area 3180. Thedocument pane area 3180 includes two scrollingelements - The
first scrolling element 3182 provides a set of articles that are from the same source as the displayed article. In some embodiments, thefirst scrolling element 3182 only includes related articles from the same source, while in other embodiments, the first scrolling element includes articles from the same source that are not directly related to the displayed article. - The
second scrolling element 3184 includes articles that are related to the topic from other sources. In some embodiments, the related articles only include related articles from sources identified as favorites by the user. - In the
first stage 3101, the user slides through thefirst scrolling element 3182. Thesecond stage 3102 shows that the first scrolling element 3160 has moved to show a portion of anew document pane 3150 for another article from the same source (i.e., “Score”). In some embodiments, the scrollingelements elements - The
second stage 3102 also shows that the user swipes thesecond scrolling element 3184 to show anew document pane 3152 for a related article from another source (i.e., Self Magazine). In some embodiments, the related articles are all selected from sources in the favorites collection of the user. -
FIG. 32 illustrates another example for providing related document panes at the end of a document in twostages first stage 3201 shows theGUI 3200 displaying afull document view 3230 for a native document. In thefirst stage 3201, the user swipes up on thefull document view 3230 to scroll to the end of the document. In thesecond stage 3202, the user has reached the end of the document. In some embodiments, the end of the document is indicated by auser logo 3210. In addition, thefull document view 3230 showsdocument panes article section 3270. - The document reader provides embedded document panes, end of document regions, or both in different embodiments. In some embodiments, the different regions (i.e., the embedded document panes and each scrollable region of the end of document region) provide different sets of documents. For example, one set of documents may include documents that are identified by the publisher as being related to the article. Another set of documents may also include documents from the same publisher, but these documents may be identified by the document reader (or a server communicating with the document reader) through a search of stored archives for the particular publisher. Yet another set of documents may include documents from other sources.
-
FIG. 33 illustrates yet another example for providing related document panes at the end of a document in three stages 3301-3303. Thefirst stage 3301 shows theGUI 3300 displaying a full document view 3330 for a native document. In thefirst stage 3301, the user swipes up on the full document view 3330. Thesecond stage 3302 shows that theGUI 3300 displays the end of the document. Thesecond stage 3302 also shows that the user scrolls up beyond the end of the article. - In the
third stage 3303, theGUI 3300 shows an end of article section 3340. The end of article section, like the end ofarticle section 3270 ofFIG. 32 , is embedded into the end of the article, rather than displayed as an overlay. The end ofarticle section 3370 includes asource article section 3373, atag section 3375, and arelated articles section 3380, similar to the corresponding sections described above. - The document reader of some embodiments provides various methods for a user to navigate through the documents of the application. In some embodiments, the navigations can be viewed as operations within a hierarchy of documents and views. In the examples below, the navigations are shown as a series of normal swipes (i.e., swipes beginning within the display area) and edge swipes (i.e., swipes beginning at the edge of the display area) in a touch interface of a device. However, one skilled in the art will recognize that the different methods of navigating through the hierarchy may be applied with other methods of input.
- The document reader of some embodiments models the documents and the history of a user as a hierarchy of documents. Each level of the hierarchy is composed of a sequence of documents that are related (e.g., a set of related documents in an end of document region, a feed view of a set of documents in a channel, etc.). The different levels of the hierarchy are connected through various relationships (e.g., links from a document, embedded document panes at the end of a document, end of article sections, a full version of an excerpt view, etc.).
-
FIG. 34 conceptually illustrates a process for navigating a hierarchy of documents. Theprocess 3400 of some embodiments is performed by a document reader to provide an interface for navigating documents in the document reader. Theprocess 3400 identifies (at 3405) a direction and a type for a received user input for navigating a hierarchy of documents. - The
process 3400 determines (at 3410) whether the user input is of a first type or a second type. One of ordinary skill in the art will recognize that devices provide the ability to differentiate between various types of interactions (e.g., taps, double taps, press and hold, separate simultaneous interactions, multi-finger interactions, swipes, edge swipes, etc.) In the examples ofFIGS. 35-42 below, the first type of interaction is a normal swipe (i.e., one occurring within a display region), whereas the second type of interaction is an edge swipe (i.e., a swipe that begins at the edge of the display region). When theprocess 3400 determines (at 3410) that the user input is of a first type (e.g., a normal swipe), theprocess 3400 determines whether the current document is the last document in the identified direction at the same level of the hierarchy. - When the
process 3400 determines (at 3415) that the current document is not the last document in the identified direction, then the process displays (at 3420) the next document in the identified direction of the sequence of documents at the particular level of the hierarchy. When theprocess 3400 determines (at 3425) that the current document is the last document in the identified direction, then the process displays (at 3425) a parent to the current document. In some embodiments, the parent to the current document is a feed view that displays all of the documents in the sequence of documents at the particular level of the hierarchy. - When the
process 3400 determines (at 3410) that the user input is not of the first type (e.g., is an edge swipe), the process determines (at 3430) whether there is a next pivot point in the identified direction. The next pivot point identifies a document in the user's history from which the current document was reached. Pivot points are identified in a user's history as a user moves between documents (e.g., from document A to document B), views of a document (e.g., from an excerpt view of a document to a full view of the document), or portions of a document (e.g., from the top of a document to an end of article section of the document). Navigations through a user history move between the identified pivot points, allowing a user to quickly return to previous views or documents. - When the
process 3400 determines (at 3430) that there are no more pivot points in the identified direction (e.g., when the user is at the beginning or end of their history), theprocess 3400 proceeds to step 3415 and treats the user input as a user input of the first type. When theprocess 3400 determines (at 3430) that there is a next pivot point in the identified direction, theprocess 3400 displays (at 3435) the document with the next pivot point. Theprocess 3400 then ends. -
FIGS. 35-42 illustrate examples of various navigations through a hierarchy of documents.FIG. 35 illustrates an example of navigating between documents at a particular level of a hierarchy of documents in six stages 3501-3506. Thefirst stage 3501 showsGUI 3520 that displays a simplified feed layout, and acorresponding tree view 3530 of the document hierarchy. The feed layout in theGUI 3520 shows a sequence of articles 1-6. In thetree view 3530, the different nodes of thetree view 3530 represent articles or views of the document reader. Theroot node 3512 represents the feed layout view of articles 1-6. Nodes 1-6 represent articles 1-6 respectively. - In the
first stage 3501, theroot node 3512 is shown in bold to indicate that it corresponds to the view displayed in theGUI 3520. Theroot node 3512 is also represented as a square to indicate that it is a pivot point in the user's navigation history. Pivot points are identified at various stages of the user's navigation through the document hierarchy. In thefirst stage 3501, the user selectsarticle 2. - The
second stage 3502 shows that theGUI 3520 shows a full article view forarticle 2. Thetree view 3530 showsnode 2 in bold, indicating that it is displayed in theGUI 3520.Node 2 has also changed to a square shape to indicate that a new pivot point has been identified. Thesecond stage 3502 shows that the user swipes to anext article 3 at the particular level of the hierarchy. The effect of this gesture is shown as a dotted line fromnode 2 tonode 3 in thetree view 3530. - In the
third stage 3503, theGUI 3520 showsarticle 3 and thetree view 3530 shows that a new pivot point is identified atnode 3. Thethird stage 3503 also shows that the user scrolls through the displayedarticle 3. The document reader identifies a specific location withdocument 3 as a pivot point, so that the user can return to the same point in the document. Thefourth stage 3504 shows that the user has scrolled down through thearticle 3 and swipes to thenext article 4. Thetree view 3530 shows the same pivot point at 3, but also shows that the user is navigating tonode 4. - In the
fifth stage 3505, the user performs a right edge swipe. In some embodiments, an edge swipe is used to move between pivot points in a user's history, rather than moving between nodes at a particular level of the hierarchy. Thesixth stage 3506 shows that the user has returned to the saved location indocument 3. - In addition to navigating between documents at a particular level of the hierarchy, the document reader of some embodiments creates additional levels of the hierarchy based on user navigations.
FIG. 36 illustrates an example of navigating to different levels of the hierarchy of documents. This figure continues the example ofFIG. 35 . Thefirst stage 3601 shows that the user scrolls throughdocument 3. Thetree view 3530 shows thatdocument 3 is shown in theGUI 3520 and pivot points are stored at theroot node 3512 and nodes 2-4. Thesecond stage 3602 shows an end ofarticle section 3640 withrelated articles 3 a-3 d. Thetree view 3530 shows that the related articles add new corresponding nodes a-d at a new level of the hierarchy. Thesecond stage 3602 also shows that the user selects aweb article 3 b. - In some embodiments, a particular node may have several different options for a next level in the hierarchy. The article view for a native document may include links to multiple sets of documents. For example, in some embodiments, a single document may include a set of documents related to the document from the same source, a set of documents related to the document from different sources, a set of documents tagged with a particular tag in the tag bar, etc. Each set of documents could provide different nodes at the new level of the hierarchy.
- In the
third stage 3603, theGUI 3520 shows an excerpt view forweb article 3 b. The excerpt view also includes alink 3615 to a full article view. The full article view is represented as anew node 3625 at a new level of the hierarchy. Thethird stage 3603 also shows that the user selects thelink 3615 to view the full article view ofarticle 3 b. - In the
fourth stage 3604, theGUI 3520 shows the full article view ofarticle 3 b. Thetree view 3530 shows thatnode 3625 that represents the full article view ofarticle 3 b is in bold. However,node 3625 is not represented as a square because in some embodiments, the document reader does not generate a new pivot point for the full article view of a web article to avoid having to re-download the full article from the web. In other embodiments, the document reader generates a new pivot point for the full article view and stores a cached version of the full article to avoid re-downloading the article. - The
fourth stage 3604 shows that the user swipes from the full version of the web article. Even while the user is viewing external content from a webpage, the document reader of some embodiments allows the user to continue navigating within the hierarchy. The full view of the web article and the excerpt view of some embodiments act as parallel levels of the hierarchy, such that a user can navigate between the different levels for the web article, but navigating from the either the excerpt view or the full view has the same result. Thefifth stage 3605 shows that when the user swipes from the full version of theweb article 3 b, theGUI 3520 showsarticle 3 c, which is the next article at the particular level of the hierarchy in thetree view 3530. - The document reader of some embodiments allows the user to navigate through the pivot points that were identified as the user traversed the hierarchy.
FIG. 37 illustrates an example of navigating back through pivot points of the navigation. The example of this figure continues from the example ofFIG. 36 . In the example of this figure, the user performs an edge swipe at each stage to traverse the pivot points of the user's history. - The
first stage 3701 shows that the user navigates back fromarticle 3 c. Thetree view 3530 shows that since the previous pivot point is identified at the excerpt view of 3 b, the navigation back returns to the node b, which represents the excerpt view ofarticle 3 b. - In the
second stage 3702, theGUI 3520 shows that the user performs an edge swipe from the displayed excerpt view ofarticle 3 b. Thetree view 3530 of thesecond stage 3702 shows that the previous pivot point is atarticle 3, at the previous level of the hierarchy. - The third stage 3703 show that the
GUI 3520 shows the end of article section ofarticle 3 based on a pivot point identified forarticle 3 when navigating fromarticle 3 toarticle 3 b. The user edge swipes back through the history toarticle 2, as indicated in thetree view 3530. Thefourth stage 3704 shows that theGUI 3520 showsarticle 2, and that another edge swipe takes the user back to the feed layout, indicated by the root node 3612 in thetree view 3530. - In the example of
FIG. 37 , an edge swipe was performed at each stage. The differences between the edge swipe and the normal swipe of some embodiments will be described with reference toFIGS. 38-42 . Although this example is described with reference to edge and non-edge swipes, one skilled in the art will recognize that the different methods of navigating through the hierarchy may be applied with other methods of input. -
FIGS. 38 and 39 illustrate different examples of navigating back from a particular document.FIG. 38 illustrates an example of navigating back from an article using a non-edge swipe (i.e., a gesture to navigate to a previous document within a particular level of the hierarchy). Thefirst stage 3801 shows theGUI 3520 atarticle 3 b, indicated by node b in thetree view 3530. In thefirst stage 3801, the user performs a non-edge swipe to the right, to navigate to a previous article within the level of the hierarchy. Thesecond stage 3802 shows that rather than going back to the previous pivot point, theGUI 3520 now showsarticle 3 a. As described above,article 3 a is the article within the sequence of articles that were presented to the user in the end of article section ofarticle 3. -
FIG. 39 illustrates an example of navigating back from an article using an edge swipe in order to navigate to a previous pivot point in the hierarchy. Thefirst stage 3901 shows thesame article 3 b as shown in thefirst stage 3801 ofFIG. 38 . However, in this example, the user performs an edge swipe to navigate to the previous pivot point atnode 3 in thetree view 3530. Thesecond stage 3902 shows that rather than going to theprevious article 3 a within the sequence of articles, theGUI 3520 now shows the full article view ofarticle 3. -
FIG. 40 illustrates an example of another gesture for navigating directly to a parent feed view of a current article in twostages first stage 4001 illustrates theGUI 3520, which displays the excerpt view forarticle 3 b in the hierarchy as described above. Thearticle 3 b was reached through the end of article region ofarticle 3, which was selected from a parent feed view. In thefirst stage 4001, the user swipes down in the excerpt view to return directly to the parent feed view, as indicated in thetree view 3530. In thesecond stage 4002, theGUI 3520 and thetree view 3530 show that the parent feed view is now the active view. In some embodiments, the document reader maintains a pivot point at 3 b, allowing the user to edge swipe back to 3 b, while in other embodiments, the gesture to return to a parent feed removes the pivot points in the hierarchy, as shown in thetree view 3530. -
FIGS. 41 and 42 illustrate different examples of navigating forward from a particular document.FIG. 41 illustrates an example of navigating forward from an article using a non-edge swipe (i.e., a gesture to navigate to a next document within a particular level of the hierarchy). The first stage 4101 shows theGUI 3520 atarticle 3, indicated bynode 3 in thetree view 3530. In the first stage 4101, the user performs a non-edge swipe to the left, to navigate to the next article within the level of the hierarchy (i.e., article 4). Thesecond stage 4102 shows that theGUI 3520 now displaysarticle 4. -
FIG. 42 illustrates an example of navigating forward from an article using an edge swipe in order to navigate to a next pivot point in the hierarchy. Thefirst stage 4201 shows thesame article 3 as shown in the first stage 4101 ofFIG. 41 . However, in this example, the user performs an edge swipe to navigate to the next pivot point atnode 3 b in thetree view 3530. In this example, the user created a pivot point at 3 b by navigating to 3 b before returning toarticle 3. Until the user navigates to a different article (e.g., article 4) to remove the forward history, a forward edge swipe will navigate to the forward pivot points. Thesecond stage 4202 shows that rather than going to thenext article 4 within the sequence of articles, theGUI 3520 now shows the excerpt article view ofarticle 3 b. - In some embodiments, when no pivot points are available (e.g., at the end of a user's history), the edge swipe performs the same action as a non-edge swipe (i.e., navigates to a neighboring document in the particular level of the hierarchy). When no more documents are available at a particular level of the hierarchy (e.g., at the last document in a sequence of documents), a non-edge swipe in some embodiments navigates to the parent document of the particular sequence of documents.
- Many of the above-described features and applications are implemented as software processes that are specified as a set of instructions recorded on a computer readable storage medium (also referred to as computer readable medium). When these instructions are executed by one or more computational or processing unit(s) (e.g., one or more processors, cores of processors, or other processing units), they cause the processing unit(s) to perform the actions indicated in the instructions. Examples of computer readable media include, but are not limited to, CD-ROMs, flash drives, random access memory (RAM) chips, hard drives, erasable programmable read-only memories (EPROMs), electrically erasable programmable read-only memories (EEPROMs), etc. The computer readable media does not include carrier waves and electronic signals passing wirelessly or over wired connections.
- In this specification, the term “software” is meant to include firmware residing in read-only memory or applications stored in magnetic storage which can be read into memory for processing by a processor. Also, in some embodiments, multiple software inventions can be implemented as sub-parts of a larger program while remaining distinct software inventions. In some embodiments, multiple software inventions can also be implemented as separate programs. Finally, any combination of separate programs that together implement a software invention described here is within the scope of the invention. In some embodiments, the software programs, when installed to operate on one or more electronic systems, define one or more specific machine implementations that execute and perform the operations of the software programs.
- A. Mobile Device
- The user data sharing of some embodiments occurs on mobile devices, such as smart phones (e.g., iPhones®) and tablets (e.g., iPads®).
FIG. 43 is an example of anarchitecture 4300 of such a mobile computing device. As shown, themobile computing device 4300 includes one ormore processing units 4305, amemory interface 4310 and aperipherals interface 4315. - The peripherals interface 4315 is coupled to various sensors and subsystems, including a
camera subsystem 4320, a wired communication subsystem(s) 4323, a wireless communication subsystem(s) 4325, anaudio subsystem 4330, an I/O subsystem 4335, etc. The peripherals interface 4315 enables communication between theprocessing units 4305 and various peripherals. For example, an orientation sensor 4345 (e.g., a gyroscope) and an acceleration sensor 4350 (e.g., an accelerometer) is coupled to the peripherals interface 4315 to facilitate orientation and acceleration functions. - The
camera subsystem 4320 is coupled to one or more optical sensors 4340 (e.g., a charged coupled device (CCD) optical sensor, a complementary metal-oxide-semiconductor (CMOS) optical sensor, etc.). Thecamera subsystem 4320 coupled with theoptical sensors 4340 facilitates camera functions, such as image and/or video data capturing. Thewired communication subsystem 4323 andwireless communication subsystem 4325 serve to facilitate communication functions. - In some embodiments, the
wireless communication subsystem 4325 includes radio frequency receivers and transmitters, and optical receivers and transmitters (not shown inFIG. 43 ). These receivers and transmitters of some embodiments are implemented to operate over one or more communication networks such as a GSM network, a Wi-Fi network, a Bluetooth network, etc. Theaudio subsystem 4330 is coupled to a speaker to output audio (e.g., to output voice navigation instructions). Additionally, theaudio subsystem 4330 is coupled to a microphone to facilitate voice-enabled functions in some embodiments. - The I/
O subsystem 4335 involves the transfer between input/output peripheral devices, such as a display, a touch screen, etc., and the data bus of theprocessing units 4305 through theperipherals interface 4315. The I/O subsystem 4335 includes a touch-screen controller 4355 andother input controllers 4360 to facilitate the transfer between input/output peripheral devices and the data bus of theprocessing units 4305. As shown, the touch-screen controller 4355 is coupled to atouch screen 4365. The touch-screen controller 4355 detects contact and movement on thetouch screen 4365 using any of multiple touch sensitivity technologies. Theother input controllers 4360 are coupled to other input/control devices, such as one or more buttons. Some embodiments include a near-touch sensitive screen and a corresponding controller that can detect near-touch interactions instead of or in addition to touch interactions. - The
memory interface 4310 is coupled tomemory 4370. In some embodiments, thememory 4370 includes volatile memory (e.g., high-speed random access memory), non-volatile memory (e.g., flash memory), a combination of volatile and non-volatile memory, and/or any other type of memory. As illustrated inFIG. 43 , thememory 4370 stores an operating system (OS) 4371. TheOS 4371 includes instructions for handling basic system services and for performing hardware dependent tasks. Thememory 4370 additionally includeslayout rearranging instructions 4372 in order for thedevice 4300 to perform the layout rearranging process of some embodiments. In some embodiments, theseinstructions 4372 may be a subset of theoperating system instructions 4371, or may be part of the instructions for an application. - The
memory 4370 also includescommunication instructions 4374 to facilitate communicating with one or more additional devices (e.g., for peer-to-peer data sharing, or to connect to a server through the Internet for cloud-based data sharing); graphicaluser interface instructions 4376 to facilitate graphic user interface processing;image processing instructions 4378 to facilitate image-related processing and functions;input processing instructions 4380 to facilitate input-related (e.g., touch input) processes and functions;audio processing instructions 4382 to facilitate audio-related processes and functions; andcamera instructions 4384 to facilitate camera-related processes and functions. The instructions described above are merely exemplary and thememory 4370 includes additional and/or other instructions in some embodiments. For instance, the memory for a smartphone may include phone instructions to facilitate phone-related processes and functions. The above-identified instructions need not be implemented as separate software programs or modules. Various functions of the mobile computing device can be implemented in hardware and/or in software, including in one or more signal processing and/or application specific integrated circuits. - While the components illustrated in
FIG. 43 are shown as separate components, one of ordinary skill in the art will recognize that two or more components may be integrated into one or more integrated circuits. In addition, two or more components may be coupled together by one or more communication buses or signal lines. Also, while many of the functions have been described as being performed by one component, one of ordinary skill in the art will realize that the functions described with respect toFIG. 43 may be split into two or more integrated circuits. - B. Computer System
-
FIG. 44 conceptually illustrates another example of anelectronic system 4400 with which some embodiments of the invention are implemented. Theelectronic system 4400 may be a computer (e.g., a desktop computer, personal computer, tablet computer, etc.), phone, PDA, or any other sort of electronic or computing device. Such an electronic system includes various types of computer readable media and interfaces for various other types of computer readable media.Electronic system 4400 includes abus 4405, processing unit(s) 4410, a graphics processing unit (GPU) 4415, asystem memory 4420, anetwork 4425, a read-only memory 4430, apermanent storage device 4435,input devices 4440, andoutput devices 4445. - The
bus 4405 collectively represents all system, peripheral, and chipset buses that communicatively connect the numerous internal devices of theelectronic system 4400. For instance, thebus 4405 communicatively connects the processing unit(s) 4410 with the read-only memory 4430, theGPU 4415, thesystem memory 4420, and thepermanent storage device 4435. - From these various memory units, the processing unit(s) 4410 retrieves instructions to execute and data to process in order to execute the processes of the invention. The processing unit(s) may be a single processor or a multi-core processor in different embodiments. Some instructions are passed to and executed by the
GPU 4415. TheGPU 4415 can offload various computations or complement the image processing provided by the processing unit(s) 4410. In some embodiments, such functionality can be provided using CoreImage's kernel shading language. - The read-only-memory (ROM) 4430 stores static data and instructions that are needed by the processing unit(s) 4410 and other modules of the electronic system. The
permanent storage device 4435, on the other hand, is a read-and-write memory device. This device is a non-volatile memory unit that stores instructions and data even when theelectronic system 4400 is off. Some embodiments of the invention use a mass-storage device (such as a magnetic or optical disk and its corresponding disk drive, integrated flash memory) as thepermanent storage device 4435. - Other embodiments use a removable storage device (such as a floppy disk, flash memory device, etc., and its corresponding drive) as the permanent storage device. Like the
permanent storage device 4435, thesystem memory 4420 is a read-and-write memory device. However, unlikestorage device 4435, thesystem memory 4420 is a volatile read-and-write memory, such a random access memory. Thesystem memory 4420 stores some of the instructions and data that the processor needs at runtime. In some embodiments, the invention's processes are stored in thesystem memory 4420, thepermanent storage device 4435, and/or the read-only memory 4430. For example, the various memory units include instructions for processing multimedia clips in accordance with some embodiments. From these various memory units, the processing unit(s) 4410 retrieves instructions to execute and data to process in order to execute the processes of some embodiments. - The
bus 4405 also connects to the input andoutput devices input devices 4440 enable the user to communicate information and select commands to the electronic system. Theinput devices 4440 include alphanumeric keyboards and pointing devices (also called “cursor control devices”), cameras (e.g., webcams), microphones or similar devices for receiving voice commands, etc. Theoutput devices 4445 display images generated by the electronic system or otherwise output data. Theoutput devices 4445 include printers and display devices, such as cathode ray tubes (CRT) or liquid crystal displays (LCD), as well as speakers or similar audio output devices. Some embodiments include devices such as a touchscreen that function as both input and output devices. - Finally, as shown in
FIG. 44 ,bus 4405 also coupleselectronic system 4400 to anetwork 4425 through a network adapter (not shown). In this manner, the computer can be a part of a network of computers (such as a local area network (“LAN”), a wide area network (“WAN”), or an Intranet), or a network of networks, such as the Internet. Any or all components ofelectronic system 4400 may be used in conjunction with the invention. - Some embodiments include electronic components, such as microprocessors, storage and memory that store computer program instructions in a machine-readable or computer-readable medium (alternatively referred to as computer-readable storage media, machine-readable media, or machine-readable storage media). Some examples of such computer-readable media include RAM, ROM, read-only compact discs (CD-ROM), recordable compact discs (CD-R), rewritable compact discs (CD-RW), read-only digital versatile discs (e.g., DVD-ROM, dual-layer DVD-ROM), a variety of recordable/rewritable DVDs (e.g., DVD-RAM, DVD-RW, DVD+RW, etc.), flash memory (e.g., SD cards, mini-SD cards, micro-SD cards, etc.), magnetic and/or solid state hard drives, read-only and recordable Blu-Ray® discs, ultra density optical discs, any other optical or magnetic media, and floppy disks. The computer-readable media may store a computer program that is executable by at least one processing unit and includes sets of instructions for performing various operations. Examples of computer programs or computer code include machine code, such as is produced by a compiler, and files including higher-level code that are executed by a computer, an electronic component, or a microprocessor using an interpreter.
- While the above discussion primarily refers to microprocessor or multi-core processors that execute software, some embodiments are performed by one or more integrated circuits, such as application specific integrated circuits (ASICs) or field programmable gate arrays (FPGAs). In some embodiments, such integrated circuits execute instructions that are stored on the circuit itself. In addition, some embodiments execute software stored in programmable logic devices (PLDs), ROM, or RAM devices.
- As used in this specification and any claims of this application, the terms “computer”, “server”, “processor”, and “memory” all refer to electronic or other technological devices. These terms exclude people or groups of people. For the purposes of the specification, the terms display or displaying means displaying on an electronic device. As used in this specification and any claims of this application, the terms “computer readable medium,” “computer readable media,” and “machine readable medium” are entirely restricted to tangible, physical objects that store information in a form that is readable by a computer. These terms exclude any wireless signals, wired download signals, and any other ephemeral signals.
- While the invention has been described with reference to numerous specific details, one of ordinary skill in the art will recognize that the invention can be embodied in other specific forms without departing from the spirit of the invention. For instance, a number of the figures (including
FIGS. 3, 17, 28, and 34 ) conceptually illustrate processes. The specific operations of these processes may not be performed in the exact order shown and described. The specific operations may not be performed in one continuous series of operations, and different specific operations may be performed in different embodiments. Furthermore, the process could be implemented using several sub-processes, or as part of a larger macro process. Thus, one of ordinary skill in the art would understand that the invention is not to be limited by the foregoing illustrative details, but rather is to be defined by the appended claims.
Claims (20)
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US14/872,045 US20160357364A1 (en) | 2015-06-07 | 2015-09-30 | Graphical User Interface for a Document Viewing Application |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US201562172175P | 2015-06-07 | 2015-06-07 | |
US14/872,045 US20160357364A1 (en) | 2015-06-07 | 2015-09-30 | Graphical User Interface for a Document Viewing Application |
Publications (1)
Publication Number | Publication Date |
---|---|
US20160357364A1 true US20160357364A1 (en) | 2016-12-08 |
Family
ID=57452748
Family Applications (4)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US14/872,045 Abandoned US20160357364A1 (en) | 2015-06-07 | 2015-09-30 | Graphical User Interface for a Document Viewing Application |
US14/872,066 Abandoned US20160357366A1 (en) | 2015-06-07 | 2015-09-30 | Navigating Through Documents in a Document Viewing Application |
US14/872,057 Active 2038-01-12 US10474320B2 (en) | 2015-06-07 | 2015-09-30 | Document channel selection for document viewing application |
US18/475,095 Pending US20240094872A1 (en) | 2015-06-07 | 2023-09-26 | Navigating through documents in a document viewing application |
Family Applications After (3)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US14/872,066 Abandoned US20160357366A1 (en) | 2015-06-07 | 2015-09-30 | Navigating Through Documents in a Document Viewing Application |
US14/872,057 Active 2038-01-12 US10474320B2 (en) | 2015-06-07 | 2015-09-30 | Document channel selection for document viewing application |
US18/475,095 Pending US20240094872A1 (en) | 2015-06-07 | 2023-09-26 | Navigating through documents in a document viewing application |
Country Status (1)
Country | Link |
---|---|
US (4) | US20160357364A1 (en) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10346019B2 (en) * | 2016-01-09 | 2019-07-09 | Apple Inc. | Graphical user interface for providing video in a document reader application |
US20220019631A1 (en) * | 2020-07-16 | 2022-01-20 | Fox Sports Productions, Llc | System and method for animated website |
US11899703B2 (en) * | 2016-06-12 | 2024-02-13 | Apple Inc. | Arrangements of documents in a document feed |
Families Citing this family (51)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9591339B1 (en) | 2012-11-27 | 2017-03-07 | Apple Inc. | Agnostic media delivery system |
US9774917B1 (en) | 2012-12-10 | 2017-09-26 | Apple Inc. | Channel bar user interface |
US10200761B1 (en) | 2012-12-13 | 2019-02-05 | Apple Inc. | TV side bar user interface |
US9532111B1 (en) | 2012-12-18 | 2016-12-27 | Apple Inc. | Devices and method for providing remote control hints on a display |
US10521188B1 (en) | 2012-12-31 | 2019-12-31 | Apple Inc. | Multi-user TV user interface |
CN111078110B (en) | 2014-06-24 | 2023-10-24 | 苹果公司 | Input device and user interface interactions |
JP6482578B2 (en) | 2014-06-24 | 2019-03-13 | アップル インコーポレイテッドApple Inc. | Column interface for navigating in the user interface |
US20160371872A1 (en) * | 2015-06-18 | 2016-12-22 | Facebook, Inc. | Systems and methods for providing transitions between content interfaces |
US10296623B2 (en) * | 2015-11-03 | 2019-05-21 | International Business Machines Corporation | Document curation |
US10198838B2 (en) * | 2016-03-31 | 2019-02-05 | Qualcomm Incorporated | Geometric work scheduling with dynamic and probabilistic work trimming |
DK201670581A1 (en) | 2016-06-12 | 2018-01-08 | Apple Inc | Device-level authorization for viewing content |
DK201670582A1 (en) | 2016-06-12 | 2018-01-02 | Apple Inc | Identifying applications on which content is available |
USD816117S1 (en) * | 2016-06-13 | 2018-04-24 | Apple Inc. | Display screen or portion thereof with icon |
KR20230111276A (en) | 2016-10-26 | 2023-07-25 | 애플 인크. | User interfaces for browsing content from multiple content applications on an electronic device |
US10891338B1 (en) * | 2017-07-31 | 2021-01-12 | Palantir Technologies Inc. | Systems and methods for providing information |
CN108319414A (en) * | 2018-01-31 | 2018-07-24 | 北京小米移动软件有限公司 | interface display method and device |
US20190258373A1 (en) * | 2018-02-21 | 2019-08-22 | Apple Inc. | Scrollable set of content items with locking feature |
DK201870354A1 (en) | 2018-06-03 | 2019-12-20 | Apple Inc. | Setup procedures for an electronic device |
USD875115S1 (en) * | 2018-07-06 | 2020-02-11 | Beijing Microlive Vision Technology Co., Ltd. | Display screen or portion thereof with a graphical user interface |
US11121935B2 (en) | 2018-07-20 | 2021-09-14 | Paypal, Inc. | System architecture for dynamically rendering a customized user interface on a mobile device |
US11073971B2 (en) * | 2018-08-01 | 2021-07-27 | Paypal, Inc. | System and method for generating a customized user interface comprising movable modules by prioritizing personas of a user |
USD875112S1 (en) * | 2018-11-14 | 2020-02-11 | Facebook, Inc. | Display panel of a programmed computer system with a graphical user interface |
US11683565B2 (en) | 2019-03-24 | 2023-06-20 | Apple Inc. | User interfaces for interacting with channels that provide content that plays in a media browsing application |
US11962836B2 (en) | 2019-03-24 | 2024-04-16 | Apple Inc. | User interfaces for a media browsing application |
WO2020198221A1 (en) | 2019-03-24 | 2020-10-01 | Apple Inc. | User interfaces for viewing and accessing content on an electronic device |
US11057682B2 (en) | 2019-03-24 | 2021-07-06 | Apple Inc. | User interfaces including selectable representations of content items |
US11269812B2 (en) * | 2019-05-10 | 2022-03-08 | International Business Machines Corporation | Derived relationship for collaboration documents |
WO2020243645A1 (en) | 2019-05-31 | 2020-12-03 | Apple Inc. | User interfaces for a podcast browsing and playback application |
US11863837B2 (en) | 2019-05-31 | 2024-01-02 | Apple Inc. | Notification of augmented reality content on an electronic device |
US11477143B2 (en) | 2019-09-27 | 2022-10-18 | Snap Inc. | Trending content view count |
US11343209B2 (en) | 2019-09-27 | 2022-05-24 | Snap Inc. | Presenting reactions from friends |
US11288310B2 (en) * | 2019-09-27 | 2022-03-29 | Snap Inc. | Presenting content items based on previous reactions |
US11425062B2 (en) | 2019-09-27 | 2022-08-23 | Snap Inc. | Recommended content viewed by friends |
US11962547B2 (en) | 2019-09-27 | 2024-04-16 | Snap Inc. | Content item module arrangements |
USD937863S1 (en) | 2019-10-25 | 2021-12-07 | Facebook, Inc. | Display screen or portion thereof with a graphical user interface |
US11095584B2 (en) | 2019-10-25 | 2021-08-17 | Facebook, Inc. | Generating content to be shared between users |
US20210173552A1 (en) | 2019-12-09 | 2021-06-10 | SmartNews, Inc. | Slider for content selection in user interface |
USD938463S1 (en) | 2019-12-10 | 2021-12-14 | Facebook, Inc. | Display screen or portion thereof with a graphical user interface |
USD962250S1 (en) | 2019-12-10 | 2022-08-30 | Meta Platforms, Inc. | Display screen or portion thereof with a graphical user interface |
USD945440S1 (en) * | 2019-12-10 | 2022-03-08 | Facebook, Inc. | Display screen with a graphical user interface |
USD938462S1 (en) * | 2019-12-10 | 2021-12-14 | Facebook, Inc. | Display screen or portion thereof with a graphical user interface |
US11843838B2 (en) | 2020-03-24 | 2023-12-12 | Apple Inc. | User interfaces for accessing episodes of a content series |
USD959483S1 (en) * | 2020-04-01 | 2022-08-02 | Mitsubishi Electric Building Techno-Service Co., Ltd. | Display screen with graphical user interface |
US20210312009A1 (en) * | 2020-04-02 | 2021-10-07 | Xchange Mall, Inc. | Content aggregation and data streaming through unified application functionalities |
WO2021206764A1 (en) * | 2020-04-06 | 2021-10-14 | Google Llc | Dynamic multi-axis graphical user interface |
US11899895B2 (en) | 2020-06-21 | 2024-02-13 | Apple Inc. | User interfaces for setting up an electronic device |
CN114265540A (en) * | 2020-09-15 | 2022-04-01 | 华为技术有限公司 | Sliding control method of electronic equipment and electronic equipment |
US11720229B2 (en) | 2020-12-07 | 2023-08-08 | Apple Inc. | User interfaces for browsing and presenting content |
US11934640B2 (en) | 2021-01-29 | 2024-03-19 | Apple Inc. | User interfaces for record labels |
USD985017S1 (en) * | 2021-03-05 | 2023-05-02 | Mobiline, Inc. | Smartphone display with personalized audio invitation graphical user interface |
US11782980B1 (en) * | 2021-03-26 | 2023-10-10 | Meta Platforms, Inc. | Video navigation normalized by relevance |
Citations (17)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US5796945A (en) * | 1995-06-07 | 1998-08-18 | Tarabella; Robert M. | Idle time multimedia viewer method and apparatus for collecting and displaying information according to user defined indicia |
US20050033657A1 (en) * | 2003-07-25 | 2005-02-10 | Keepmedia, Inc., A Delaware Corporation | Personalized content management and presentation systems |
US20050210399A1 (en) * | 2004-03-18 | 2005-09-22 | Microsoft Corporation | Method and system for improved viewing and navigation of content |
US20060248442A1 (en) * | 2005-04-29 | 2006-11-02 | Rosenstein Justin M | Web page authoring tool for structured documents |
US20070038643A1 (en) * | 2005-08-09 | 2007-02-15 | Epstein Samuel S | Methods and apparatuses to assemble, extract and deploy content from electronic documents |
US20080065982A1 (en) * | 2006-09-11 | 2008-03-13 | International Business Machines Corporation | User Driven Computerized Selection, Categorization, and Layout of Live Content Components |
US7401289B2 (en) * | 2000-12-06 | 2008-07-15 | American Express Travel Related Services Company, Inc. | Layout generator system and method |
US20080178073A1 (en) * | 2007-01-19 | 2008-07-24 | Yan Gao | Visual editor for electronic mail |
US20080209339A1 (en) * | 2007-02-28 | 2008-08-28 | Aol Llc | Personalization techniques using image clouds |
US20080263446A1 (en) * | 2007-04-20 | 2008-10-23 | Utbk, Inc. | Methods and Systems to Connect People to Services via Virtual Reality |
US20090271283A1 (en) * | 2008-02-13 | 2009-10-29 | Catholic Content, Llc | Network Media Distribution |
US20100131455A1 (en) * | 2008-11-19 | 2010-05-27 | Logan James D | Cross-website management information system |
US20100161558A1 (en) * | 2005-08-16 | 2010-06-24 | Swiss Reinsurance Company | Computer-based data processing system and method of processing data objects |
US20140250390A1 (en) * | 2011-06-03 | 2014-09-04 | Firestorm Lab Limited | Method of configuring icons in a web browser interface, and associated device and computer program product |
US20140282166A1 (en) * | 2013-03-15 | 2014-09-18 | Aol Inc. | Systems and methods for aggregating information and providing access to multiple web services through an interactive user interface |
US9396167B2 (en) * | 2011-07-21 | 2016-07-19 | Flipboard, Inc. | Template-based page layout for hosted social magazines |
US20160246869A1 (en) * | 2015-02-24 | 2016-08-25 | Salesforce.Com, Inc. | Interest groups based on network feed items |
Family Cites Families (63)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20020046052A1 (en) * | 2000-08-18 | 2002-04-18 | Sean Brown | Page content item billing |
US20020144289A1 (en) * | 2001-03-30 | 2002-10-03 | Yuichi Taguchi | Global multi media service method and apparatus |
EP1367505A1 (en) * | 2002-05-30 | 2003-12-03 | Thomson Licensing S.A. | Method and device for creating semantic browsing options |
US8015259B2 (en) * | 2002-09-10 | 2011-09-06 | Alan Earl Swahn | Multi-window internet search with webpage preload |
US8166422B2 (en) * | 2003-11-21 | 2012-04-24 | Kyocera Corporation | System and method for arranging and playing a media presentation |
US7487443B2 (en) * | 2004-04-30 | 2009-02-03 | International Business Machines Corporation | Portal page view layout based on weights |
US8041701B2 (en) * | 2004-05-04 | 2011-10-18 | DG FastChannel, Inc | Enhanced graphical interfaces for displaying visual data |
US7865511B2 (en) * | 2004-06-25 | 2011-01-04 | Apple Inc. | News feed browser |
US8732610B2 (en) * | 2004-11-10 | 2014-05-20 | Bt Web Solutions, Llc | Method and apparatus for enhanced browsing, using icons to indicate status of content and/or content retrieval |
US7496567B1 (en) | 2004-10-01 | 2009-02-24 | Terril John Steichen | System and method for document categorization |
US20080052742A1 (en) * | 2005-04-26 | 2008-02-28 | Slide, Inc. | Method and apparatus for presenting media content |
US7451135B2 (en) | 2005-06-13 | 2008-11-11 | Inform Technologies, Llc | System and method for retrieving and displaying information relating to electronic documents available from an informational network |
US20070078857A1 (en) * | 2005-09-30 | 2007-04-05 | Nokia Corporation | Method and a device for browsing information feeds |
US7590691B2 (en) * | 2005-10-07 | 2009-09-15 | Google Inc. | Indirect subscriptions to top N lists of content feeds |
TW200723049A (en) * | 2005-12-07 | 2007-06-16 | Era Digital Media Co | Single page website organization method |
US7788579B2 (en) | 2006-03-06 | 2010-08-31 | Ricoh Co., Ltd. | Automated document layout design |
US7747749B1 (en) * | 2006-05-05 | 2010-06-29 | Google Inc. | Systems and methods of efficiently preloading documents to client devices |
US20080083003A1 (en) * | 2006-09-29 | 2008-04-03 | Bryan Biniak | System for providing promotional content as part of secondary content associated with a primary broadcast |
US20080140523A1 (en) * | 2006-12-06 | 2008-06-12 | Sherpa Techologies, Llc | Association of media interaction with complementary data |
US8881052B2 (en) * | 2007-03-21 | 2014-11-04 | Yahoo! Inc. | Methods and systems for managing widgets through a widget dock user interface |
US8145631B2 (en) * | 2007-04-13 | 2012-03-27 | Adobe Systems Incorporated | Client management of download sequence of orchestrated content |
US8010527B2 (en) * | 2007-06-29 | 2011-08-30 | Fuji Xerox Co., Ltd. | System and method for recommending information resources to user based on history of user's online activity |
US8887085B1 (en) * | 2008-03-20 | 2014-11-11 | Amazon Technologies, Inc. | Dynamic content navigation |
US8656429B2 (en) * | 2008-04-09 | 2014-02-18 | Toshiba America Electronic Components, Inc. | System and method for displaying and navigating a graphical two-dimensional array of a plurality of available channels |
JP2010117950A (en) | 2008-11-13 | 2010-05-27 | Canon Inc | Layout editing apparatus and layout editing method |
US9152292B2 (en) | 2009-02-05 | 2015-10-06 | Hewlett-Packard Development Company, L.P. | Image collage authoring |
US9083932B2 (en) * | 2009-03-25 | 2015-07-14 | Eloy Technology, Llc | Method and system for providing information from a program guide |
JP5388683B2 (en) | 2009-05-12 | 2014-01-15 | キヤノン株式会社 | Image arrangement apparatus, image arrangement method, program, and storage medium |
US8799253B2 (en) * | 2009-06-26 | 2014-08-05 | Microsoft Corporation | Presenting an assembled sequence of preview videos |
US9904436B2 (en) * | 2009-08-11 | 2018-02-27 | Pearl.com LLC | Method and apparatus for creating a personalized question feed platform |
CN102045436A (en) * | 2009-10-22 | 2011-05-04 | 国基电子(上海)有限公司 | Mobile communication terminal and operating method thereof |
KR101585692B1 (en) * | 2009-11-17 | 2016-01-14 | 엘지전자 주식회사 | Method for displaying contents information |
US8290926B2 (en) * | 2010-01-21 | 2012-10-16 | Microsoft Corporation | Scalable topical aggregation of data feeds |
WO2011099808A2 (en) * | 2010-02-12 | 2011-08-18 | Samsung Electronics Co., Ltd. | Method and apparatus for providing a user interface |
KR20110093729A (en) * | 2010-02-12 | 2011-08-18 | 삼성전자주식회사 | Method and apparatus of providing widget |
US20110276924A1 (en) * | 2010-05-10 | 2011-11-10 | Samsung Electronics Co. Ltd. | Personal information management context links |
EP2579138A4 (en) * | 2010-05-28 | 2014-08-06 | Lg Electronics Inc | Content control method and content player using the same |
US8555155B2 (en) * | 2010-06-04 | 2013-10-08 | Apple Inc. | Reader mode presentation of web content |
US8332392B2 (en) * | 2010-06-30 | 2012-12-11 | Hewlett-Packard Development Company, L.P. | Selection of items from a feed of information |
KR101709470B1 (en) * | 2010-09-02 | 2017-02-23 | 엘지전자 주식회사 | Image display apparatus and method for operating the same |
GB201015720D0 (en) * | 2010-09-20 | 2010-10-27 | Gammons Richard | Findability of data elements |
CN104363506B (en) * | 2011-02-16 | 2018-12-28 | Lg电子株式会社 | Television set |
US8510379B2 (en) * | 2011-02-23 | 2013-08-13 | Rockmelt, Inc. | Display of content interaction data in a browser |
AU2011202182B1 (en) * | 2011-05-11 | 2011-10-13 | Frequency Ip Holdings, Llc | Creation and presentation of selective digital content feeds |
US8732569B2 (en) * | 2011-05-04 | 2014-05-20 | Google Inc. | Predicting user navigation events |
US20120311501A1 (en) * | 2011-06-01 | 2012-12-06 | International Business Machines Corporation | Displaying graphical object relationships in a workspace |
US20120324507A1 (en) * | 2011-06-15 | 2012-12-20 | Michael Ryan Weber | Interactive Ticker |
US9600499B2 (en) * | 2011-06-23 | 2017-03-21 | Cyber Ai Entertainment Inc. | System for collecting interest graph by relevance search incorporating image recognition system |
US8510380B2 (en) * | 2012-01-09 | 2013-08-13 | Facebook, Inc. | Creating and sharing interest lists in a social networking system |
US9519645B2 (en) * | 2012-03-27 | 2016-12-13 | Silicon Valley Bank | System and method for searching multimedia |
US8892638B2 (en) * | 2012-05-10 | 2014-11-18 | Microsoft Corporation | Predicting and retrieving data for preloading on client device |
US9984126B2 (en) * | 2012-07-23 | 2018-05-29 | Salesforce.Com, Inc. | Identifying relevant feed items to display in a feed of an enterprise social networking system |
CN103678298B (en) * | 2012-08-30 | 2016-04-13 | 腾讯科技(深圳)有限公司 | A kind of information displaying method and equipment |
US9049547B2 (en) * | 2012-08-31 | 2015-06-02 | Blackberry Limited | Displaying place-related content on a mobile device |
US9633400B2 (en) * | 2013-01-04 | 2017-04-25 | Samsung Electronics Co., Ltd. | Display apparatus and method of providing a user interface |
TWI493437B (en) * | 2013-06-19 | 2015-07-21 | 義隆電子股份有限公司 | Method of opening window control bar by identification of edge swipe gesture and touch system using the method |
US20150127170A1 (en) * | 2013-11-04 | 2015-05-07 | Honeywell International Inc. | Remote contractor system with site specific energy audit capability |
US20150154205A1 (en) * | 2013-12-03 | 2015-06-04 | Snippit Media, Inc. | System, Method and Computer-Accessible Medium for Clipping and Sharing Media |
US9971844B2 (en) * | 2014-01-30 | 2018-05-15 | Apple Inc. | Adaptive image loading |
US10104437B2 (en) * | 2014-08-29 | 2018-10-16 | Google Llc | Methods, systems, and media for providing media guidance |
US9524278B2 (en) * | 2014-12-04 | 2016-12-20 | Cynny Spa | Systems and methods to present content |
US10033776B2 (en) * | 2014-12-22 | 2018-07-24 | Facebook, Inc. | Methods and systems for accessing relevant content |
US9996622B2 (en) * | 2015-02-06 | 2018-06-12 | Microsoft Technology Licensing, Llc | Browser new tab page generation for enterprise environments |
-
2015
- 2015-09-30 US US14/872,045 patent/US20160357364A1/en not_active Abandoned
- 2015-09-30 US US14/872,066 patent/US20160357366A1/en not_active Abandoned
- 2015-09-30 US US14/872,057 patent/US10474320B2/en active Active
-
2023
- 2023-09-26 US US18/475,095 patent/US20240094872A1/en active Pending
Patent Citations (20)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US5796945A (en) * | 1995-06-07 | 1998-08-18 | Tarabella; Robert M. | Idle time multimedia viewer method and apparatus for collecting and displaying information according to user defined indicia |
US7401289B2 (en) * | 2000-12-06 | 2008-07-15 | American Express Travel Related Services Company, Inc. | Layout generator system and method |
US20050033657A1 (en) * | 2003-07-25 | 2005-02-10 | Keepmedia, Inc., A Delaware Corporation | Personalized content management and presentation systems |
US20050210399A1 (en) * | 2004-03-18 | 2005-09-22 | Microsoft Corporation | Method and system for improved viewing and navigation of content |
US20060248442A1 (en) * | 2005-04-29 | 2006-11-02 | Rosenstein Justin M | Web page authoring tool for structured documents |
US20070038643A1 (en) * | 2005-08-09 | 2007-02-15 | Epstein Samuel S | Methods and apparatuses to assemble, extract and deploy content from electronic documents |
US20100161558A1 (en) * | 2005-08-16 | 2010-06-24 | Swiss Reinsurance Company | Computer-based data processing system and method of processing data objects |
US20080065982A1 (en) * | 2006-09-11 | 2008-03-13 | International Business Machines Corporation | User Driven Computerized Selection, Categorization, and Layout of Live Content Components |
US20080178073A1 (en) * | 2007-01-19 | 2008-07-24 | Yan Gao | Visual editor for electronic mail |
US20080209339A1 (en) * | 2007-02-28 | 2008-08-28 | Aol Llc | Personalization techniques using image clouds |
US20080209340A1 (en) * | 2007-02-28 | 2008-08-28 | Aol Llc | Peer-to-peer access of personalized profiles using content intermediary |
US20080209343A1 (en) * | 2007-02-28 | 2008-08-28 | Aol Llc | Content recommendation using third party profiles |
US20080209350A1 (en) * | 2007-02-28 | 2008-08-28 | Aol Llc | Active and passive personalization techniques |
US20080263446A1 (en) * | 2007-04-20 | 2008-10-23 | Utbk, Inc. | Methods and Systems to Connect People to Services via Virtual Reality |
US20090271283A1 (en) * | 2008-02-13 | 2009-10-29 | Catholic Content, Llc | Network Media Distribution |
US20100131455A1 (en) * | 2008-11-19 | 2010-05-27 | Logan James D | Cross-website management information system |
US20140250390A1 (en) * | 2011-06-03 | 2014-09-04 | Firestorm Lab Limited | Method of configuring icons in a web browser interface, and associated device and computer program product |
US9396167B2 (en) * | 2011-07-21 | 2016-07-19 | Flipboard, Inc. | Template-based page layout for hosted social magazines |
US20140282166A1 (en) * | 2013-03-15 | 2014-09-18 | Aol Inc. | Systems and methods for aggregating information and providing access to multiple web services through an interactive user interface |
US20160246869A1 (en) * | 2015-02-24 | 2016-08-25 | Salesforce.Com, Inc. | Interest groups based on network feed items |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10346019B2 (en) * | 2016-01-09 | 2019-07-09 | Apple Inc. | Graphical user interface for providing video in a document reader application |
US11899703B2 (en) * | 2016-06-12 | 2024-02-13 | Apple Inc. | Arrangements of documents in a document feed |
US20220019631A1 (en) * | 2020-07-16 | 2022-01-20 | Fox Sports Productions, Llc | System and method for animated website |
Also Published As
Publication number | Publication date |
---|---|
US20240094872A1 (en) | 2024-03-21 |
US20160357365A1 (en) | 2016-12-08 |
US10474320B2 (en) | 2019-11-12 |
US20160357366A1 (en) | 2016-12-08 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US20240094872A1 (en) | Navigating through documents in a document viewing application | |
US11625153B2 (en) | Media browsing user interface with intelligently selected representative media items | |
US10007402B2 (en) | System and method for displaying content | |
JP5908130B2 (en) | Application for generating journals | |
US9552015B2 (en) | Device, method, and graphical user interface for navigating through an electronic document | |
KR101031974B1 (en) | Scrollable and re-sizeable formula bar | |
JP5752708B2 (en) | Electronic text processing and display | |
CN105144071A (en) | Device, method, and graphical user interface for managing concurrently open software applications | |
KR20140105733A (en) | Quick analysis tool for spreadsheet application programs | |
US9075884B2 (en) | Collecting web pages/links from communications and documents for later reading | |
KR20170026272A (en) | Apparatus and method for editing contents | |
US20140325400A1 (en) | Multi-panel view interface for a browser operating on a computing device | |
US10283082B1 (en) | Differential opacity position indicator | |
AU2018202847B2 (en) | Electronic text manipulation and display | |
JP7462856B2 (en) | A user interface for managing visual content in media |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
AS | Assignment |
Owner name: APPLE INC., CALIFORNIA Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNORS:ZOON, PEPIJN T.;CAPELA, JAY C.;CARTER, DANIEL L.;AND OTHERS;SIGNING DATES FROM 20160303 TO 20160426;REEL/FRAME:038688/0056 |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: ADVISORY ACTION MAILED |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: NON FINAL ACTION MAILED |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: RESPONSE TO NON-FINAL OFFICE ACTION ENTERED AND FORWARDED TO EXAMINER |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: FINAL REJECTION MAILED |
|
STCB | Information on status: application discontinuation |
Free format text: ABANDONED -- FAILURE TO RESPOND TO AN OFFICE ACTION |