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 characteristics for this pattern.
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.
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 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.
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.
Common behaviors for this pattern.
- 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.
- 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.
- 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.
- 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 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.
- 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