1. The document discusses various interactions and animations for reviewing and adjusting photos on a mobile device, including swiping to cycle through effects, zooming and panning cropped images, and viewing the history of applied effects through a segmented timeline. 2. Key interactions covered include rotating photos with two fingers, pinching to zoom a cropped image, dragging corners to adjust a crop frame, and sliding a timeline to view previous editing steps and filter previews. 3. Animations and transitions are proposed for loading effect previews, bouncing images when panned beyond their bounds, and highlighting segments in the editing history timeline as adjustments are applied.

1. nokia windows phone 7
Creative Suite (Image Editor)
A selection of wireframes

2. Preview level filter nav: Swipe to cycle vertically through effects
title size?
BACK TO ‘76 DREAMY DREAMY
compare compare
compare compare
Effect title positioned top left. Flick left / right to cycle through the effects The image is presented in low res until Effect title fades in on screen for about
Fades in on screen for about 2 seconds Image slides from left or right the effect has been fully processed. 3 seconds then fades out again
then fades out again
Indeterminate progress indicator runs
at the top of the screen until the
processing has finished
Animation Animation
1. Explore left / right swipe Low res to Full res transition
Eg: Image eases in (is this necessary?)

3. Slide to adjust - Compare
Effects/Adjustment Pivot Slide to adjust Slide to compare
EDIT
before after
Adjustments Eff
crop
rotate
contrast
sharpness
colour
exposure
colour boost
- +
compare
Tap to select adjustment Slider Compare
If possible effects should ideally have Tap Compare and slide left/right to
no more then 1 slider with which to view before and after adjustment
manipulate on image
Indeterminate progress indicator Tap Tick to apply adjustment
We could have this appear at the top
of the screen.

4. Adjustment - Rotate + Auto Crop
90°
Overlaid icon is a hint for two finger interaction. Using two fingers user can rotate the picture in any direction.
- Fades in (1 second) The image does not zoom or pan.
- Still for (3 seconds) A 6x6 grid appears on press. White lines at 25% opacity.
- Fades out (1 second) or on Press
When user takes their fingers away the cropping frame zooms the
picture to the maximum possible size / edges of the rotated image.
The grid lines fade away.

5. Crop (page 1)
Zoom in/out Moving the frame
centered in height
Black 50% Transparency
22px
Preview
Image is displayed slightly reduced in size 2 finger pinch / expand gesture will Grab and move any of the 4 corners
showing the crop frame and handles zoom in/out of the image. in any direction to manipulate the frame
(maintains aspect ratio)
There is a 22px space between the left Frame has no fixed aspect ratio
and right edge of the photo. In landscape You cannot zoom out beyond the
mode its 22px top and bottom. Image is photos edge. Image bounces back
centered horizontally in black. to fill the frame.
Animation
22px Explore the Bounce effect 1
The image bounces back to fill its frame at the
22px
22px
first point its zoomed outbeyond its size.
22px On release of fingers from screen the image
bounces.

6. Crop (page 2)
2 finger photo shift 1 finger frame shift
Use 2 fingers to move the whole photo in One finger touch inside the frame moves
When both crop frame has been adjusted Deselect preview will take the user back any direction. This action makes sense if the
to the previosu screen. it around.
vertically and horizontally the preview user has zoomed in.
button becomes active
You cannot move the frame beyond the
The edge of photo cannot pan inside of the edge of the screen
Press preview to view the image cropped crop frame
and expanded.
Animation
Explore Scale preview crop effect
Animation
Explore Bounce effect 3
The image bouces back the
edge if its shifted off screen
Animation
Explore Bounce effect 4
The frame bounces back if
its shifted off screen

7. Effects/Adjustments History (p1)
Building....
BACK TO ‘76 BUILDING HISTORY BUILDING HISTORY BUILDING HISTORY
Press to view effects history Image zooms out to a reduced size. At the point at which 7 of 9 segments have ...and the loading continues.
been loaded the timeline slides to the left...
History mode requires the software to We think each segment may load as quick
build each preview state the user has been as .5 of a second
through. As each preview is processed a
segment appears
The width of these are dynamic and based
on the number of effects and adjustments
made to the image. (this example has 9)

8. Effects/Adjustments History (p2)
As you slide the title for the effect/adjustment
appears for 2 seconds ... ...then fades to the main ‘history’ title
BACK TO ‘76 ROTATE HISTORY DREAMY
At the moment all the segments have loaded As the you touch and pull along the ...the segment timeline will slide
the segment timeline will slide to the right timeline the image updates to reflect each to the right revealing the rest. This will also
step in the edit. work in the other direction.
The image in view and the step currently
highlighted is represented by a solid segment If you touch and slide to the segment just Press Apply (tick) will
before the cropped half segment then lift - delete the unselected steps
your finger... - exit the user from the history mode
- scale the image up

9. Slide to adjust - History markers
Everytime the slider is moved a visual mark is generated
- + - +
- +
Start previous position previous position