Sample Agile Story and Wireframes
Basic Video Editor
Description:
Example Agile Wiki story. This one is about designing a simple video editor (assume it is a desktop app). Users must learn this with no documentation except tooltips and guidance, rely on accepted Web/device interaction motifs.Note: In Agile terms this is really an epic not a story. As such this epic would be decomposed into component stories of similar form for development.
Story:
Users require a simple and easily-learned video editor. There are three central requirements:- Video capture from a webcam, camcorder or digital camera
- Very simple editing
- Sharing with friends and family
The central editing feature is a popup editor, using the 'horizontal film' model. This could be user-selectable as a vertical filmstrip.
Library: There is no library in this most simple of products. Users can open multiple videos from their hard drive or camera for the editing session.
User-Software Dialog
Starting Point:
The application opens as below. User can do four things, with variations: Capture video or audio, Save project file (or Publish edited program), Share edited video, Close the program.
Beneath the video play pane are some conventional playback controls as noted. I excluded a Stop action due to its similar utility with Pause.
User Actions - What the Menus Contain:
For simplicity all menus are shown open at once.
User roves mouse over top menus, clicks to select a menu item.
Capture combines two conventional menus, File and Import. New Project is least used, so is at bottom with names of recent projects. If no project is open, all other menu items are gray and inactive. User can select a video source and obtain a resulting dialog (not shown). Imported clips become last in the sequence, but can be moved via drag/drop in the popup editor.
Save reveals Save, Save As... and Publish. Save As... brings up a platform directory/filename dialog to save the project under a new name. Publish exports the finished video.
Share provides a list of Web centers on which user can post her finished project. Those open appropriate dialogs.
Close closes the program, after checking for/prompting a Save.
User Action - Editing Activities:
User moves mouse over video pane.Software Response:
Filmstrip appears, remains until mouse leaves video pane. Gray rectangles represent video clips that have been imported (would be thumbnails of clip contents). User can drag clips to left or right for sequencing. Clips dragged to menu bar or outside video pane are deleted from sequence. On mouseover, gray arrows left and right of filmstrip slide the sequence left and right in the window. User can adjust transition between each clip by accessing the edit points marked by green dots.
Editing Transitions:
Note this menu cascade is entirely mouseover: there is one click to select at the second level, which is the task object. Illustration below.
Transition Editing Interplay:
| USER ACTION | SOFTWARE REPLY |
|---|---|
| User mouses over a green Edit button between two clips. | Menu opens: Fades, Edits, Wipes. |
| User mouses over Fades, Edits, or Wipes. | Option list of selected types appears to right. |
| User mouses over an edit type. | A window showing an indication of the edit's behavior appears. |
| User clicks on the edit type. | All dialog menus close, the action is saved. |
| User clicks on the DEMO button beside the edit item. | Video plays in background from prior to the edit to just after. DEMO button changes to STOP. Demo play repeats until user clicks STOP button. |
| While behavior window is open, user can drag red handles closer or farther apart, thus controlling the speed and in/out points of the edit. | Behavior window adjusts following user movement. |
Acceptance Criteria
Short clear statement of what makes each scenario or task flow work for the user. If these are met the feature meets its design goals. For example:General: All detailed actions function as described.
Open: Editor opens with empty video pane, showing guidance to use the Capture menu to bring in videos for editing.
Capture: User is able to import video into editor from any available source type. Menu items grayed or not according to what actions are possible.
Transport Controls: Tooltips over the Play/Pause/Skip buttons guide user actions.
Sequencing: Tooltips over the filmstrip elements guide to possible user actions.
etc.