Scroll bar with time details

While a newsfeed is scrolled, an icon is displayed that includes the post time of a news story. The icon moves in a vertical direction as the newsfeed is scrolled and displays a post time of a news story when at least a predefined amount of the icon is displayed over the news story. Depending on when a news story was posted, the time icon may include the date the news story was posted. The icon may show a time and/or may include a clock showing time in analog or digital format. The newsfeed may be scrolled in response to a gesture by a user with a touch-sensitive display and the time icon may cease to be displayed once the user breaks contact with the touch-sensitive display.

BACKGROUND

1. Field of Art

The disclosure generally relates generally to electronic devices with touch-sensitive surfaces, and more particularly, to electronic devices with touch-sensitive surfaces that display user interfaces.

2. Description of the Related Art

The user interface is integral to a user's overall experience with a portable device since the user interface is the gateway through which a user interacts with the device. Existing user interfaces are often complex and frustrating to use. For example, many user interfaces of mobile devices have complicated key sequences and menu hierarchies that must be memorized by the user. Accordingly, there is a need for more transparent and intuitive user interfaces for mobile devices that are easy to use, configure, and/or adapt.

DETAILED DESCRIPTION

Overview

Embodiments of the systems, methods and computer readable storage mediums disclosed herein provide an intuitive graphical user interface for use with application on a computing device. By way of example, in one embodiment the application is a social networking application, e.g., PATH, FACEBOOK, TWITTER, or GOOGLE+. Also by way of example, in one embodiment the computing device is a mobile device, e.g., a smartphone or tablet. Such graphical user interface efficiently uses screen space and reduces the cognitive burden on a user and produces a more efficient human-machine interface.

In one embodiment, while a newsfeed in a social media application is scrolled, an icon with time information is displayed along with the newsfeed. The icon may show a time and/or may include a clock showing time in analog or digital format. The time shown corresponds to the post time of a news story in the newsfeed. The time icon moves in a vertical direction as the newsfeed is scrolled and displays a post time of a news story when at least a predefined portion of the time icon is displayed over the news story. Depending on when a news story was posted, the time icon may include the date the news story was posted. The time icon may include an image of an analog clock that includes a clock face and clock hands. When the time icon displays a new time, the image of the clock maybe animated to show the clock hands moving to positions corresponding to the new time. The newsfeed may be scrolled in response to a gesture by a user with a touch sensitive display. In one example embodiment, the time icon may be displayed as long as the user maintains continuous contact with a touch sensitive display of the mobile computing device. In some embodiments, the news feed includes news stories from a social networking system. The news stories displayed in the feed do not include the times the stories were posted. This way, time icon provides helpful information while preserving valuable screen space.

When the newsfeed is scrolled, the time icon moves a distance in a vertical direction proportional to the amount that the newsfeed is scrolled. As a result, the location that the time icon is displayed at indicates the amount of the newsfeed that has been scrolled.

Computing Machine Architecture

Referring now toFIG. 1, illustrated is a block diagram of an exemplary multifunction device100with a display and a touch-sensitive display in accordance with some embodiments. Specifically,FIG. 1shows a diagrammatic representation of a machine in the example form of a multifunction device100within which instructions (e.g., software or program code executable by one or more processing units) for causing the machine to perform any one or more of the methodologies discussed herein may be executed. In some embodiments, the device100is a portable communications device such as a mobile telephone or tablet that also contains other functions, such as a music player functions. In some embodiments, the device100is a laptop computer, a desktop computer, a tablet computer, a multimedia player device, a navigation device, an educational device, a gaming system, or a control device (e.g., a home or industrial controller).

The device100typically includes one or more processing units102, one or more network or other communications interfaces116, memory130, RF circuitry104, and one or more communication buses106for interconnecting these components. The one or more processing units102may include a central processing unit, a graphics processing unit (GPU), a digital signal processor (DSP), one or more application specific integrated circuits (ASICs), or any combination of these. The communication buses106may include circuitry (sometimes called a chipset) that interconnects and controls communications between system components. The device100includes an input/output (I/O) interface108comprising a touch sensitive screen110. The I/O interface108also may include a keyboard and/or mouse (or other pointing device)112and a touchpad114. In some embodiments, the touchpad114is a touch-sensitive area of the device100that, unlike the touch sensitive screen110, does not display visual output. The touchpad114may be a touch-sensitive surface that is separate from touch sensitive screen110or an extension of the touch-sensitive surface formed by the touch screen110.

The touch sensitive screen110provides an input interface and an output interface between the device100and a user. The touch sensitive screen110displays visual output to the user. The visual output may include graphics, text, icons, video, and any combination thereof. The touch sensitive screen110has a touch-sensitive surface, sensor or set of sensors that accepts input from the user based on haptic and/or tactile contact. The touch sensitive screen110detects contact (and any movement or breaking of the contact) on the touch sensitive screen110and converts the detected contact into interaction with user-interface objects (e.g., one or more soft keys, icons, web pages or images) that are displayed on the touch sensitive screen110. In an exemplary embodiment, a point of contact between touch sensitive screen110and the user corresponds to a finger of the user or a stylus used by the user.

The touch sensitive screen110may use LCD (liquid crystal display) technology, LPD (light emitting polymer display) technology, or LED (light emitting diode) technology, although other display technologies may be used in other embodiments. The touch sensitive screen110may detect contact and any movement or breaking thereof using any of a plurality of touch sensing technologies now known or later developed, including but not limited to capacitive, resistive, infrared, and surface acoustic wave technologies, as well as other proximity sensor arrays or other elements for determining one or more points of contact with the touch sensitive screen110.

Memory130includes high-speed random access memory, such as DRAM, SRAM, DDR RAM or other random access solid state memory devices; and may include non-volatile memory, such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid state storage devices. Memory130may optionally include one or more storage devices remotely located from the CPU(s)102. Memory130includes a non-transitory machine-readable medium on which is stored instructions (e.g., software) embodying any one or more of the methodologies or functions described herein. The instructions (e.g., software or program code) may also reside, completely or at least partially, within the memory130or within the processing units102(e.g., within a processor's cache memory) during execution thereof by the device100, the memory130and the processing unit102also constituting machine-readable media.

In some embodiments, memory130or the computer readable storage medium of memory130store the following programs, modules and data structures, or a subset thereof including operating system132, communication module134, graphics module136, text input module138, GPS module140, and a social networking application150.

The operating system132(e.g., APPLE iOS, GOOGLE ANDROID, Unix, RED HAT Linux, MICROSOFT WINDOWS, or an embedded operation system) includes various software components and/or drivers for controlling and managing general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware and software components.

The communication module134facilitates communication with other devices via the one or more communication network interfaces116(wired or wireless) and one or more communication networks, such as the Internet, other wide area networks, local area networks, metropolitan area networks, cellular networks, and so on.

The graphics module136includes various known software components for rendering and displaying graphics on the touch sensitive screen110or other display. As used herein, the term “graphics” includes any object that can be displayed to a user, including without limitation text, web pages, icons (such as user-interface objects including soft keys), digital images, videos, animations, and the like.

The text input module138provides soft keyboards or on-screen keyboards for entering text in various contexts.

GPS module140determines the location of the device and provides this information for use in various modules or applications (e.g., the modules that provide location-based services such as map/navigation interfaces).

The social networking application150includes a time icon module152and a feed module156. The social networking application150communicates with a social networking system in order to send and receive social content. A social networking system comprises one or more computing devices storing a social network. In one embodiment, the social network comprises a plurality of users interconnected by some predefined commonality or commonalities (e.g., social, business, interests, geography, educational, etc.). The social networkings system provides the users of the social network with the ability to communicate and interact with each other, often in connection with the predefined commonality.

Social networking systems allow users to explicitly associate themselves and establish connections with other users of the social networking system. When two users become connected, they are said to be “friends,” “contacts,” “connections,” or “associates” within the context of the social networking system. Generally, being connected in a social networking system allows connected users access to more information about each other than would otherwise be available to unconnected users. Likewise, becoming connected within a social networking system may allow a user greater access to communicate with another user through a communicative interface (internal and external to the social networking system). Being connected may allow a user to access, to view, comment on, download or endorse another user's uploaded content items. The content items may include anything a user can add, upload, post, or send to the social networking system. Content may include textual data (e.g., comment message), location information, photos, videos, music, or other user-generated content.

The time icon module152performs the operations discussed with respect toFIG. 2. The time icon module152generates a time icon that displays times of news stories and moves a distance in proportion to the amount of a newsfeed scrolled.

The feed module156receives a feed from a social networking system and displays the feed in the social networking application150. The feed includes one or more new stories that describe activities of the users of the social networking system and/or include content posted by users of the social networking system.

Time Icon

Turning toFIG. 2, it illustrates a flow chart of a process200for displaying a time icon while scrolling through a newsfeed, in accordance with one embodiment. In one example embodiment, the timepiece icon is a time icon that shows an analog and/or digital clock face. The process200is performed at a multifunction device (e.g., multifunction device100) having one or more processors and non-transitory memory (e.g., as described with the multifunction device100inFIG. 1). The non-transitory memory, e.g.,130, stores one or more programs to be executed by the one or more processing units102. The one or more programs include instructions for process200.

In this process200, a newsfeed containing one or more stories is displayed202on touch sensitive screen. In some embodiments, the newsfeed is displayed on a non touch sensitive screen. In some embodiments, the newsfeed is received from a social networking system remotely located from the device. In some embodiments, the news stories include content posted by users of the social networking system and/or describe activities of users of the social networking system. In some embodiments, the news stories do not include or display the times the stories were posted. For example, a news story describing indicating a user's geographic location does not include the time the user posted the news story.

A contact (e.g., stylus or finger) is detected204with the touch sensitive screen. Movement of the contact on the touch-sensitive screen is detected206. The movement is detected while the contact is maintained with the touch sensitive screen. Stated in another way, the movement is detected while the user maintains continuous contact with the touch sensitive screen. In some embodiments, movement of the contact in a substantially vertical direction is detected. For example, a user may perform an upward or downward swipe on the touch sensitive screen.

In response to detecting the movement of the contact, the newsfeed is scrolled208. In some embodiments, the newsfeed is scrolled in the same direction as the movement of the contact. For example, if the contact moves in a downward direction, the newsfeed is scrolled in a downward direction. As the newsfeed is scrolled, stories that were not visible before the scrolling come into view on the touch-sensitive display.

In some embodiments, the newsfeed is scrolled response to a user initiated action. In one example, the newsfeed may be scrolled in response to a user performing a gesture on a touchpad. In another example, the newsfeed may be scrolled in response to a user selection of a button on the device or an input device. In another example, the newsfeed may be scrolled in response to a user selection of an option displayed on the screen using an input device (e.g., a mouse).

In some embodiments, the time icon is displayed210in response to detecting movement of the contact. In some embodiments, the time icon is displayed when the contact is detected with the touch sensitive screen. The time icon may be displayed along a side of the screen. For example, as shown inFIG. 3A, the time icon302may be displayed on the right side of the screen. The time icon302includes a time and/or date. The time and/or date displayed by the time icon302depends on where the time icon is displayed and what the time icon is displayed over. In some embodiments, when the time icon302is not displayed over a news story, the time icon302includes a current time and/or current date. The time icon302continues to be displayed as long contact is maintained with the touch sensitive screen.

Referring back toFIG. 2, the time icon302moves212in a substantially vertical direction while the newsfeed is scrolled. More specifically, the time icon302moves in a substantially vertical direction in response to movement of the contact in a substantially vertical direction. In some embodiments, the time icon302moves in accordance with the movement of the contact. In some embodiments, the time icon302moves in an opposite direction than the direction of the contact. For example, if the contact moves in an upward direction, the time icon moves in a downward direction. In some embodiments, the distance the time icon moves is proportional to the amount of the news feed that has been scrolled. For example, if 20% of the newsfeed has been scrolled, the time icon moves 20% down a side of the screen. In this way, the distance the time icon moves indicates to a user how much of a newsfeed they have scrolled. In some embodiments, the position of the time icon302along a side of the touch sensitive-screen indicates the amount that the newsfeed has been scrolled. Thus, the vertical position of the time icon302indicates the amount that the newsfeed has been scrolled. For example, when the time icon302is displayed at the halfway point of a side of the screen, half of the newsfeed has been scrolled and half of the newsfeed remains to be scrolled. When the last news story of the newsfeed is displayed, a request may be sent to the social networking system for additional news stories. After the additional news stories are received, the time icon302may be repositioned along the side of the screen to indicate the amount of the newsfeed that has been scrolled.

As the newsfeed is scrolled, the time icon302moves in a substantially vertical direction and is displayed over portions of the news stories in the newsfeed. The time icon302is displayed214over a portion of a first news story. When a predefined portion of the time icon is displayed over a respective news story, the time icon displays the time and/or date the respective news story was posted. In some embodiments, when at least half of the time icon302is displayed over a story, the clock displays the time and/or date of the story. For example, as shown inFIG. 3B, the time icon302displays the time (i.e., 10:15 am) that story310was posted. This way, as a user is scrolling the news feed, the user will be able to view the times respective news stories were posted. In some embodiments, when the time icon302is displayed over a story that was posted during the current day, the time icon302displays the time the story was posted but does not display the date the story was posted. In some embodiments, when the time icon302is displayed over a story that was posted a previous day, the time icon302may indicate that the story was posted yesterday. In some embodiments, when the time icon302is displayed over a story that was posted more than a day ago but within the current week, the time icon302may include a name of a day of the week. In some embodiments, when the time icon302is displayed over a story that was posted more than a week ago, the time icon302may include a date the story was posted. The time icon302displays a time and/or date for one news story at a time.

In some embodiments, the time icon302is displayed as long as the user maintains continuous contact with the touch sensitive display. For example, if the contact is a finger contact, once the user breaks contact with the screen, the time icon302ceases to be displayed. In some embodiments, the time icon302is display as long as the user maintains selection of a button on the device or an input device (e.g., touchpad or mouse button).

As described herein, the disclosed configurations advantageously provides a way to display times of news stories that uses a minimal amount of screen space, reduces the cognitive burden on a user, and produces a more efficient human-machine interface.

FIGS. 3A-3Dillustrate an example of scrolling a newsfeed while displaying a time icon.FIG. 3Aillustrates a screenshot of a user interface300in according to some embodiments. The user interface300displays a newsfeed303from a social networking system. The newsfeed303includes a cover photo304and news stories from a social networking system. A news story305includes a profile picture of the posting user, a story icon306, content, and a number308indicating the amount of users who have viewed the story. The story icon306corresponds to the type of content in the story. More specifically, one of a plurality of story icons is displayed with a news story depending on the activity described in the content of the news story. In the example ofFIG. 3A, the story icon306corresponds to stories indicating the geographic location of one or more users. A different story icon may be displayed to indicate that a story relates to two users becoming connected, to a user listening to music, to a user being at a location such as a restaurant or airport. The content of a news story describes activities of users of the social networking system. In some embodiments, the content provided by a user of the social networking system. For example, a user may provide a status update, photo or video.

InFIG. 3A, the user interface300includes a time icon302that is displayed over a portion of the cover photo304. The time icon302includes a current time and an image of a clock that includes a clock face and clock hands. The time icon302displays a current time when at least half of the time icon302is display over the cover photo. The clock hands are in positions corresponding to the current time. In some embodiments, the time icon302is displayed at the top of a side of the screen to indicate that the interface300currently displays the beginning of the newsfeed303. As discussed above, the vertical position of the time icon302indicates the amount of the newsfeed that has been scrolled and the amount of the newsfeed that has yet to be scrolled.

FIG. 3Bshows the user interface300after a user performs a gesture on the touch sensitive screen to scroll the newsfeed303. As shown inFIG. 3B, in response to the gesture, news stories (e.g.,310) that were not previously visible are now displayed on the screen. While the newsfeed303is scrolled, the time icon302moves in a vertical direction. In the example ofFIG. 3B, the time icon302moved in a downward direction along the right edge of the screen. In some embodiments, when more than half of the time icon302is displayed over a news story, the time icon302displays the post time of the news story. In some embodiments, when more than half the time icon302is displayed over a news story that was posted within the current day, the time icon302displays a time but not a date. This way, a user is not provided with unnecessary information. The distance the time icon302is moved from the upper portion the interface is proportional to the amount of the newsfeed that is scrolled. For example, if the 20% of the newsfeed is scrolled, the time icon302is moved to a position that corresponds to 20% of the vertical length of the portion of the screen that displays the newsfeed.

FIG. 3Cshows the user interface300after the screen shown inFIG. 3Bis further scrolled. In some embodiments, when more than half of the time icon302is displayed over a news story that was posted the previous day, the time icon302includes the time the news story was posted and includes an identifier for the previous day (i.e., “yesterday”).

FIG. 3Dshows the user interface300after the screen shown inFIG. 3Cis further scrolled. In some embodiments, when more than half of the time icon302is displayed over a news story that was posted more than a week ago from the current date, the time icon302includes the date the news story was posted. For example, as shown inFIG. 3D, the clock302icon includes the date (i.e., March 15) story320was posted.

Additional Configuration Considerations