Capture
The Capture pattern describes how to take a photo or video, and attach it to a record. This pattern is commonly performed with a phone, but does occur with a tablet. Video also is represented by photo in this pattern. The following are steps used in this pattern (in no particular order):
- Selection: Select a photo (or video) from a Camera Roll, or take a new photo (or video) with a Camera.
- Camera: Manipulate the Camera to take the desired photo.
- Edit: Manipulate the Photo to the desired appearance.
- Tag: Associate attributes (i.e. quality, tags, comments ...) to the selected photo(s).
- Attach: Attach the selected photo or video to the appropriate record.
Appearance
Appearance characteristics for this pattern.
Capturing Photo
This is the most important step.
- Camera Trigger: The camera icon triggers the opening of the camera app or selecting the option of take or choose a photo.
- Photo Data: The photo provides a lot of details that can be used by the application. Example data points include auto-focus, auto-exposure, time stamp, resolution and Geo-tagging information.
- Processing: Applications of image processing technologies can be used to perform facial recognition, pull amount and dates from receipts, and identify close up objects from distant landscapes.
Attaching Photo
There are only a few common methods to attach a photo.
- Camera Application: Photos or videos can be captured with the camera app, and then added to local/device storage, app/cloud storage or attached to a record in an application.
- Photo Storage: Common storage locations include:
- Local/Device Storage: An example of this is when the user adds a photo or video to the iOS Photos or Android Photos. Alternatively an application may access the photos from local storage. Also the user may select a photo(s) to be shared via local storage thru an email.
- App/Cloud Storage: An example of this is an application like DropBox or Evernote, that allows a user to store cloud-based photos, which can be attached from any application.
- Receiving Application: Photos can be added to a record in an application either from the existing application or another application.
Displaying Photo
Displaying or listing photos maybe done in a few common methods.
- Single Thumbnail: Useful to indicate that a photo is attached to a record. The image is a thumbnail of the photo.
- Grid View: Display a set of thumbnail photos in a table based grid, similar to Android Photos app.
- List View: Displays a thumbnail photos on the left side of the list, with details about the photo displayed to the right.
- Swim Lane: Displays a thumbnail photos in a swim lane, that the user may swipe thru to view, similar to iOS Photos app.
Viewing Photo
Photos can be are fairly simple and consist of a few common elements.
- Local Storage: Open either the photo in the device storage, for example iOS Photos app.
- Page or Viewer: The photo maybe displayed in a full page viewer or on the page the user is viewing.
- Popup: The photo maybe placed in a popup, which is more common on tablet.
Behavior
Common behaviors for this pattern.
Capturing Photo
- Launch: Camera opens in preview mode displaying what the camera is pointing at.
- Camera Options:
- Capture: Tap an icon, aperture closure, clicking sound occurs, photo might be displayed briefly or move to Gallery thumbnail.
- Flash: User has the ability turn flash on/off from the camera.
- Exposure: User may have the ability set the level of exposure.
- Photo Size: User may have the ability set the size of photo or video.
- Zoom: User has the ability to zoom in or out of the image. Either via pinch/spread gesture or slider.
- Focus: User may have the ability to focus the camera.
- Capture Mode: User has the ability to switch between photo and video mode.
- Cameras: User has the ability to switch between cameras on the device (i.e. back vs. front).
- Cancel: Use may have the ability tap "Cancel" button or icon to close the Camera.
- Use: Some applications provide the ability to 'use' the selected photo or take another one.
- Comment: User may have the ability to add a note after capturing the photo.
- Location: User may have the ability to define location of the photo or video.
- Edit: User may have the ability to edit the photo.
- Photos: User has the ability to view the Photos app, usually the last picture is shown as a Gallery thumbnail.
Attaching Photo
- Saving: Photos and videos that are captured are saved to the Photos app.
- Access: Photos app can be accessed directly from the Camera or from an App.
- Tags: Photos can be tagged with labels, geographic information or other attributes.
Displaying Photo
- Swipe/flick: Allows the user to scroll thru photos in a list, swim lane and grid.
- Tap: Allows the user to open the photo.
- Tap and Hold: Allows the user to provide contextual actions regarding the photo.
Viewing Photo
- Edit: User may have the ability edit the photo (i.e. Crop, Rotate, Enhance, Filter, Remove Red-Eye and Save). Additional edit capabilities maybe available depending on the app.
- Share: User has the ability to share the photo (i.e. Email, Message, Apps, etc...).
- Actions: User has the ability to perform actions on the photo (i.e. Delete, Select, Copy, Print, Slideshow, Set Wallpaper, etc...).
Usage
Usage guidelines for this pattern.
- Capture is a good solution for attaching photos of items, receipts, products, etc... to a record or message.
- Often the choice of selecting a photo (or video) from the Camera Roll or taking a photo (or video) from the Camera if offered to the user.
- Camera preview and photo viewing will take up the entire display.
- The Camera or Video icon is usually used to begin the capture process.
Related
- Used On: Phone, Tablet
- Also Called: Camera, Camera Roll, Gallery, Photos, Video
- Related Components: Button, Image, Text
- Related Patterns: Attachment, Comment, Profile, Share, Voice Input
- Resources: JET FixItFast Demo