Communication user interface systems and methods
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.
1. A method comprising:
display, on a client device, a graphical user interface comprising a composition interface to allow a user to compose electronic communications, the composition interface comprising a plurality of menu elements, the plurality of menu elements comprising at least two of: a selectable camera element, a contact element, a location element, or an image element;
generating a user-generated content item in response to receiving user input via the composition interface of the graphical user interface, wherein the user input comprises at least one of: input indicating user-generated text, input indicating a user-selected location, or input indicating a user-selected contact;
based on detecting a first user interaction with the selectable camera element within the composition interface, switching from the composition interface to a camera viewfinder interface, wherein the camera viewfinder interface comprises:
a live scene from a camera on the client device; and
an overlay portion overlaid the live scene and comprising the user-generated content item; and
based on detecting a second user interaction with a capture element within the camera viewfinder interface, generating an electronic communication comprising a digital image of the live scene and the user-generated content item.
2. The method of claim 1 , further comprising sending the electronic communication comprising the digital image and the user-generated content item to one or more client devices associated with one or more additional users.
3. The method of claim 2 , wherein: the electronic communication is a social media post; and
sending the electronic communication comprising the digital image and the user-generated content item comprises posting the social media post within a social networking system.
4. The method of claim 2 , wherein capturing the digital image, generating the electronic communication with the digital image and the user-generated content item, and sending the electronic communication is performed in response to the second user interaction with the capture element within the camera viewfinder interface.
5. The method of claim 1 , wherein generating the user-generated content item in response to receiving the user input comprises receiving one of: input indicating user-generated text, input indicating a user-selected location, or input indicating a user-selected contact.
6. The method of claim 1 , wherein the composition interface further comprises a menu area comprising the selectable camera element and at least one of a contact element, a location element, or an image element.
7. The method of claim 6 , further comprising:
detecting, within the menu area of the composition interface, a user selection of the image element; and
providing, in response to the user selection of the image element, a navigable tray area within the composition interface, wherein the navigable tray area comprises a plurality of digital images through which the user can navigate within the navigable tray area.
8. The method of claim 7 , further comprising:
detecting a swipe gesture within the navigable tray area; and
scrolling the plurality of digital images in response to the swipe gesture within the navigable tray area.
9. The method of claim 8 , further comprising:
detecting a tap gesture with respect to a digital image of the plurality of digital images; and
in response to the tap gesture, adding the digital image to the electronic communication within the composition interface.
10. 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:
display, on the mobile device, a graphical user interface comprising a composition interface to allow a user to compose electronic communications, the composition interface comprising a plurality of menu elements, the plurality of menu elements comprising at least two of: a selectable camera element, a contact element, a location element, or an image element;
generate a user-generated content item to in response to receiving user input via the composition interface of the graphical user interface, wherein the user input comprises at least one of: input indicating user-generated text, input indicating a user-selected location, or input indicating a user-selected contact;
based on detecting a first user interaction with the selectable camera element within the composition interface, switch from the composition interface to a camera viewfinder interface, wherein the camera viewfinder interface comprises:
a live scene from a camera on the mobile device; and
an overlay portion overlaid the live scene and comprising the user-generated content item; and
based on detecting a second user interaction with a capture element within the camera viewfinder interface, generate an electronic communication comprising a digital image of the live scene and the user-generated content item.
11. The mobile device of claim 10 , further comprising instructions that, when executed by the at least one processor, cause the mobile device to send the electronic communication comprising the digital image and the user-generated content item to one or more client devices associated with one or more additional users.
12. The mobile device of claim 11 , further comprising instructions that, when executed by the at least one processor, cause the mobile device to capture the digital image of the live scene, wherein capturing the digital image, generating the electronic communication with the digital image and the user-generated content item, and sending the electronic communication is performed in response to the second user interaction with the capture element within the camera viewfinder interface.
13. The mobile device of claim 10 , wherein generating the user-generated content item in response to receiving the user input comprises receiving one of: input indicating user-generated text, input indicating a user-selected location, or input indicating a user-selected contact.
14. The mobile device of claim 10 , wherein the composition interface further comprises a menu area comprising the selectable camera element and at least one of a contact element, a location element, or an image element.
15. The mobile device of claim 14 , further comprising instructions that, when executed by the at least one processor, cause the mobile device to:
detect, within the menu area of the composition interface, a user selection of the image element; and
provide, in response to the user selection of the image element, a navigable tray area within the composition interface, wherein the navigable tray area comprises a plurality of digital images through which the user can navigate within the navigable tray area.
16. A non-transitory computer readable storage medium storing instructions that, when executed by at least one processor, cause a mobile device to:
display, on the mobile device, a graphical user interface comprising a composition interface to allow a user to compose electronic communications, the composition interface comprising a plurality of menu elements, the plurality of menu elements comprising at least two of: a selectable camera element, a contact element, a location element, or an image element;
generate a user-generated content item to in response to receiving user input via the composition interface of the graphical user interface, wherein the user input comprises at least one of: input indicating user-generated text, input indicating a user-selected location, or input indicating a user-selected contact;
based on detecting a first user interaction with the selectable camera element within the composition interface, switch from the composition interface to a camera viewfinder interface, wherein the camera viewfinder interface comprises:
a live scene from a camera on the mobile device; and
an overlay portion overlaid the live scene and comprising the user-generated content item; and
based on detecting a second user interaction with a capture element within the camera viewfinder interface, generate an electronic communication comprising a digital image of the live scene and the user-generated content item.
17. The non-transitory computer readable storage medium of claim 16 , further comprising instructions that, when executed by the at least one processor, cause the computer device to send the electronic communication comprising the digital image and the user-generated content item to one or more client devices associated with one or more additional users.
18. The non-transitory computer readable storage medium of claim 17 , further comprising instructions that, when executed by the at least one processor, cause the computer device to capture the digital image of the live scene, wherein capturing the digital image, generating the electronic communication with the digital image and the user-generated content item, and sending the electronic communication is performed in response to the second user interaction with the capture element within the camera viewfinder interface.
19. The non-transitory computer readable storage medium of claim 16 , wherein the composition interface further comprises a menu area comprising the selectable camera element and at least one of a contact element, a location element, or an image element.
20. The non-transitory computer readable storage medium of claim 19 , further comprising instructions that, when executed by the at least one processor, cause the computer device to:
detect, within the menu area of the composition interface, a user selection of the image element; and
provide, in response to the user selection of the image element, a navigable tray area within the composition interface, wherein the navigable tray area comprises a plurality of digital images through which the user can navigate within the navigable tray area.