Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.

Confidential and Secure Handling Required

Page 6 of 10Bits and PiecesVersion: 1.0 | Published: November 04, 2013 | Created By: Shanak Rahman (srahman@kobo.com)

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned Item States - Interactions

This article has no images, yet the title spans two lines.

This is the description text, and it can span several lines. This is the description text, and it can span several lines. This is the description text, and it This is the description text, and it can span several lines. This is the description text, and it can

MSNBC / 7 min

This article has no images, yet the title spans two lines.

This is the description text, and it can span several lines. This is the description text, and it can span several lines. This is the description text, and it This is the description text, and it can span several lines. This is the description text, and it can

MSNBC / 7 min

This article has no images, yet the title spans two lines.

This is the description text, and it can span several lines. This is the description text, and it can span several lines. This is the description text, and it This is the description text, and it can span several lines. This is the description text, and it can

MSNBC / 7 min

Sitting State Hit State Move State - Item becomes transparent, a bit bigger, and a target shadow is introduced.

This article has no images, yet the title spans two lines.

This is the description text, and it can span several lines. This is the description text, and it can span several lines. This is the description text, and it This is the description text, and it can span several lines. This is the description text, and it can

MSNBC / 7 min

Resize State - same as move state. When user puts two fingers on an item, it slightly becomes larger, and a target shadow is introduced

This article has no images, yet the title spans two lines.

This is the description text, and it can span several lines. This is the description text, and it can span several lines. This is the description text, and it This is the description text, and it can span several lines. This is the description text, and it can

MSNBC / 7 min

Selected State

1 2

1 TapTo open an item, you simply tap on it. The tap state stays the same as it is today.

4

3

2 Long PressThe long press gesture will enlarge the image, induce an partial opacity, and materialize the target shadow beneath it. The user can now move the item to a different location.

The only change from the existing interaction is that once the user drops the item, it goes back into the Sitting State, not the Selected State.

3 Pinch to ResizeTouch an item with two fingers puts it in resize mode - Resize mode looks and acts a lot like the moving state. However, if you increase the distance between the two hit states, it'll make the item larger, and vice versa.

If a user long presses on an item with one finger, and then adds another finger to make a pinching gesture they will be able to resize the image on the spot.

4 Tap and drag down - Pull Down gesture"Pulling" the image down a certain amount of distance and then letting go will put the item in a selected mode.

After the item is in selected mode, a contextual menu will appear which holds all secondary options for that item.

This design supports multi-select, if the user pulls down OR taps any other items while in this mode, it will put those items in selected mode as well.