Communication user interface systems and methods

• US 9,246,961 B2
• Filed: 11/27/2013
• Issued: 01/26/2016
• Est. Priority Date: 11/27/2013
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Walkin, Brandon Marshall, Matas, Michael James
• Primary Examiner(s): Nabi, Reza
• Application Number:
  US14/092,736
• Publication Number:
  US 20150149930A1
• Time in Patent Office: 790 Days
• Field of Search: 715/753
• US Class Current: 1/1
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/0486 Drag-and-drop
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 3/04886 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
• CPC Class Codes: G06F 40/106 Display of layout of documents; Previewing
• CPC Class Codes: G06F 40/166 Editing, e.g. inserting or deleting
• CPC Class Codes: G06Q 10/00 Administration; Management
• CPC Class Codes: G06Q 10/107 Computer-aided management of electronic mailing [e-mailing]
• CPC Class Codes: H04L 51/42 Mailbox-related aspects, e.g. synchronisation of mailboxes
• CPC Class Codes: H04L 65/403 Arrangements for multi-party communication, e.g. for conferences data switching systems for conference H04L12/18; arrangements for connecting several subscribers to a common circuit, i.e. affording conference facilities H04M3/56; television conferencing systems H04N7/15
• CPC Class Codes: H04L 67/12 specially adapted for proprietary or special-purpose networking environments, e.g. medical networks, sensor networks, networks in vehicles or remote metering networks

Abstract

The principles described herein provide methods and systems of providing a user interface to allow a user to compose and send an electronic communication quickly and conveniently. For example, a user interface includes split-pane interface having a navigable tray area and a composition area. The navigable tray area may include categories of trays, each tray including a navigable listing of content items that may form part of the electronic communication. The navigable tray area allows the user to navigate from one tray to the next to access different types of content items to be used in composing the electronic communication. When composing an electronic communication, a user can select an item in a tray, and the item is previewed in the composition area and can become part of the electronic communication.

Claims

1. A method comprising:

presenting a graphical user interface comprising a composition area for composing an electronic communication, and a tray area comprising a graphical element associated with a content item;

detecting, using at least one processor, a user interaction with the graphical element associated with the content item;

in response to the user interaction, presenting a preview of the content item in the composition area,

wherein the graphical user interface further comprises a plurality of modes, each mode being associated with a particular type of content item,

wherein at least one of the plurality of modes is a text mode, a contacts mode, a places mode, or a camera mode;

detecting a second user interaction; and

in response to detecting the second user interaction, navigating from a first mode of the plurality of modes to a second mode of the plurality of modes,

wherein the graphical user interface further comprises a menu area, wherein the menu area includes a plurality of menu items corresponding to the plurality of modes.

2. The method of claim 1, wherein at least one of the associated content items is a message, a contact, an image, a captured photograph, or a location.

3. The method of claim 1, wherein detecting the second user interaction comprises detecting a swipe gesture with respect to the tray area.

4. The method of claim 1, wherein the menu area is positioned below the composition area.

5. The method of claim 4, wherein detecting the second user interaction comprises detecting a tap gesture on a menu item from the plurality of menu items included in the menu area.

6. The method of claim 1, wherein detecting the user interaction with the graphical element comprises detecting a dragging gesture on the graphical element moving from the tray area toward the composition area.

7. The method of claim 6, further comprising presenting a cutout of the graphical element upon detecting the dragging gesture, wherein the cutout has the same appearance as the graphical element and follows the dragging gesture of the user.

8. The method of claim 7, further comprising:

recognizing when the cutout is at least partially within the composition area; and

in response to recognizing the cutout is at least partially within the composition area, presenting the preview of the content item associated with the graphical element in the composition area.

9. The method of claim 1, further comprising sending an electronic communication containing the content item.

10. The method of claim 1, further comprising:

detecting a send interaction; and

sending, in response to detecting the send interaction, an electronic communication containing the content item.

11. The method of claim 1, wherein the user interaction comprises the user performing a tap gesture on the graphical element associated with the content item.

12. The method of claim 1, further comprising:

detecting a third interaction; and

in response to detecting the third interaction, removing the preview of the content item from the composition area.

13. A mobile device, comprising:

at least one processor;

at least one non-transitory computer readable storage medium storing instructions thereon that, when executed by the at least one processor, cause the mobile device to;

present a graphical user interface comprising a composition area for composing an electronic communication, and a tray area comprising a graphical element associated with a content item;

detect a user interaction with the graphical element associated with the content item; and

in response to the user interaction, present a preview of the content item in the composition area,

wherein the graphical user interface further comprises a plurality of modes, each mode being associated with a particular type of content item,

wherein at least one of the plurality of modes is a text mode, a contacts mode, a places mode, or a camera mode;

detect a second user interaction; and

in response to detecting the second user interaction, navigate from a first mode of the plurality of modes to a second mode of the plurality of modes,

wherein the graphical user interface further comprises a menu area, wherein the menu area includes a plurality of menu items corresponding to the plurality of modes.

14. The mobile device of claim 13, further comprising instructions that, when executed by the at least one processor, cause the mobile device to:

detect a send command interaction from the user; and

send, in response to detecting the send command, an electronic communication containing the content item.

15. The mobile device of claim 13, wherein the user interaction comprises the user performing a dragging gesture on the graphical element from the tray area to the composition area.

16. The mobile device of claim 13, wherein the user interaction comprises the user performing a tap gesture on the graphical element associated with the content item.

17. A system including a processor and a graphical user interface, the graphical user interface comprising:

a user interface configured to facilitate the composing of an electronic communication, the graphical user interface comprising a composition area and a tray area, wherein the composition area displays a content item in response to a user interaction with a graphical element within the tray area and associated with the content item, the user interface further comprising;

a menu area that includes a plurality of menu items corresponding to a plurality of modes, wherein at least one of the plurality of modes is a text mode, a contacts mode, a places mode, or a camera mode ;

a first mode of the plurality of modes associated with a first type of content item available to be included in the electronic communication;

a second mode of the plurality of modes associated with a second type of content item available to be included in the electronic communication;

wherein the user interface navigates from the first mode of the plurality of modes to the second mode of the plurality of modes in response to a second user interaction.

18. The graphical user interface of claim 17, further comprising a first graphical element associated with the first type of content item located in the tray area when the user interface is in the first mode.

19. The graphical user interface of claim 18, further comprising a second graphical element associated with the second type of content item located in the tray area when the user interface is in the second mode.

20. The graphical user interface of claim 19, further comprising a display of the first content item within the composition area when the first graphical element is selected.