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 10
Bits and Pieces
Version: 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
ngers 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 Tap
To open an item, you simply tap on it. The tap state
stays the same as it is today.
4
3
2 Long Press
The 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 Resize
Touch an item with two ngers 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 nger,
and then adds another nger 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.