You are on page 1of 21

_experience the commitment

TM
Reading Life - Collections - Pinned Items
Tablet Wireframes
Version: 1.0
Published: July 15, 2013
Created By: Shanak Rahman (srahman@kobo.com)
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 2 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3 Change Log
Reading Life - Full Home Experience
Introduction to Pinned Items
Pinned Items - URLs from Browser
Pinned Items - URLs from Third Party Apps & Generic Pins
Pinned Items - Books & Magazines
Pinned Items - Music, Videos, Images
Drag & Drop - Pinned Items
Drag & Drop - Apps
Drag & Drop - Collections
Apps Bars - Rules for Dragging/Dropping
Apps Bars - Rules for Dropping Apps
Drag&Merge + Drag&Drop
Deleting Items
Resizing - Intoduction
Resizing - Case 1
Resizing - Case 2
Resizing - Case 3
Resizing Rules
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 3 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
Change Log
PAGE /SECTION
VERSION 1.0-1.1
Separated Pinned Items into a separate document. 1.0
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 4 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Reading Life - Full Home Experience
Noitication Bar
Tap here
to create a
collection
1 Custom Collection - Pinned Items
Pinned items live inside of collections. They are the
items which collections are designed to hold.
Smart collections, like Books, Magazines and
Pocket, pin items automatically based on a service
(Kobo, or Pocket). In custom collections, however,
users are the ones pinning and collecting items.
This document contains all requirements for pinned
items, including the various types of pinned items
and all interactions associated with them.
B
o
o
k
s
1
2
ite
m
s
M
a
g
a
z
i
n
e
9
Ite
m
s
P
o
c
k
e
t
9
Ite
m
s
S
o
c
i
a
l
8
Ite
m
s
1
Message from Kobo
Get 50%off your
next great read
EXPIRES APRIL 13, 2013
NewIssue!
Apr 2013
Related to your read
Inferno
You finished
The Hobbit
Rate it
15% read
Discover
Jane Austen
Related to your read
Pride and Prejudice
Go beyond the
book for:
Pride and
Prejudice
Lebron James scores 27,
records double double as
Miami Heat roll past
Milwakee Bucks
espn.com
45% read
5 5 5
About 2
hours to go
Book title goes here and
spans two lines
spot72 just liked your Pulse
post
About 9
hours to go
5 5 5
2 hrs to go
Search here for your next great
read!
Kobo Store
Related to your read
Inferno
E
n
t
e
r
t
a
i
n
m
e
n
t
9
Ite
m
s
S
a
m
p
l
e
8
Ite
m
s
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 5 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Introduction to Pinned Items
Noitication Bar
1 This is a custom collection
Collections are a grouping mechanism that users
can utilize to save and organize various media
types, including apps, books, videos, websites and
more. Users can create as many collections as
they wish and organize them as they please.
Requirements for custom collections themselves
items are found in the following document:
Titan - Custom Collections.pdf
Tap here to
create a
collection
2
R
e
n
o
v
a
t
i
o
n
s
9
2

I
t
e
m
s
H
o
m
e
1
2 Pinned Items
Users can add various types of pinned items to
custom containers. They can manipulate these
pinned items in various ways as well (move to
organize, resize, delete, etc).
This document contains all requirements for pinned
items, including the various types of pinned items
and all interactions associated with them.
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 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - URLs from Browser
Case 1: Facebook
OpenGraph tags available
Facebook OG Title meta tag,
spanning as many lines as needed
domainURL.com
Case 3: Take screenshot
Case 2: Social tags unavailable.
Scrape page for thumbnail
Website title metatag, spanning as
many lines as needed
domainURL.com
domainURL.com
1
1 Pull the best image possible
If Facebook OG doesn't work, look for a
twitter image tag instead.
2 Pull the best image possible
If social metatags aren't available, scrape
the page for the best possible
representative image instead.
2
3 Use browser screenshot if all else fails.
If all else fails, lets resort to taking a
screenshot of the webpage. We will take
out the title due to space constraints.
3
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 7 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - URLs from Third Party Apps & Generic Pins
Case 1: Facebook OpenGraph tags
available
Facebook OG Title meta tag,
spanning as many lines as needed
domainURL.com
Case 2: Social tags unavailable. Scrape
page for thumbnail
Website title metatag, spanning as
many lines as needed
domainURL.com
Case 3: No images
available.
At its least, lets try to
pull the website title tag
At its least, lets try to
pull the website title tag
domainURL.com
If there is a description tag available, lets
display that here If there is a description
tag available, lets display that here If
there is a description tag available, lets
display that here If there is a description
tag available, lets display that here
General Pin & Ofine
pins
http://mumbojumbourlmumbo
ursl/mumbojumbourlmumbo
ursl/mumbojumbourlmumbo
ursl/mumbojumbourlmumbo
/mumbojumbourlmumbo.com
1
1 Pull the best image possible
If Facebook OG doesn't work, look for a
twitter image tag instead.
2 Pull the best image possible
If social metatags aren't available, scrape
the page for the best possible
representative image instead.
2
3 Use favricon, title, and description
We cannot take screenshots in any app
other than the browser. Thus, lets try to pull
the favricon, title and description metatags
and use them to populate the pinned item.
Resizing: As the user resizes this item, we
show more/less text accordingly.
3
Third Party App shares URL: Facebook OpenGraph tags available
4 If all else fails, or if user is ofine...
Pin whatever is shared through the shared
intent. If its a combination of text and urls,
open the URL through the browser. Also
design is to see if we want to use a generic
pin icon like Arc.
Resizing: As the user resizes this item, we
show more/less text accordingly.
Generic pinned item
The shared text or URL gets
pinned here The shared text
or URL gets pinned here The
shared text or URL gets
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
5 Generic pins for non-URLs
If you have a third party app that has the
share intent, and they are sharing
something other than a URL (text, for ex),
use this generic pin template.
Resizing: As the user resizes this item, we
show more/less text accordingly.
4
5
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 8 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - Books & Magazines
Book in Library Non-purchased book
$8.99
Preview of a book
Purchased Magazine -
Stack
Purchased Magazine -
Issue
Non-purchased
magazine issue
$8.99
Non-purchased
magazine subscription
$8.99/month Apr 2013 14 issues
"Shared text goes here, shared text goes
here Shared text goes here, shared text
goes here Shared text goes here, shared
text goes here Shared text goes here,
shared text goes here"
Chapter Name Chapter Name
Pinning text from Kobo
1 Pinned text from Kobo
We want to show a small screenshot of the
book itself. Users should be able to resize
the pinned item to show/hide more text.
1
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 9 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - Music, Videos, Images
Images
Music - Albums
Artist Name
Album Name
Artist Name - Album Name
can span several lines.
Song Name Song Name
Music - Songs
Title of the video can span a total
of two lines
youtube.com
Video - from Youtube
Title of the video can span a total
of two lines
Supplementary title if available
Video - from
somewhere else
1 Songs cannot be resized
Most pinned items can be resized. Songs
however are locked into the default size.
1
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 10 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag & Drop - Pinned Items
R
e
n
o
v
a
t
i
o
n
s
1 User presses on item and holds
User can now move the item. Yellow labelling
represent possible destinations.
Destinations:
1 Parent collections
Drag and drop: Places item into the parent.
View remains on current collection
Drag and hold: View animates into the targeted
collection & user still has control over the item
to place where they please.
Noitication Bar
H
o
u
s
e
9
2

I
t
e
m
s
1
1
Tap here to
create a
collection
C
u
s
t
o
m

S
u
b

c
o
l
l
e
c
t
i
o
n
2
4

i
t
e
m
s
6
3 2
4
5
2 In between pinned items
User should be able place the item between
other objects. Neighbouring pinned items will
move accordingly.
3 Another pinned item - Create collection
If you drag and drop onto another item, a
collection is created. Timing is similar to
collections 1.0. The new collection will be
placed to the end of the collection list.
The naming dialog instantly appears and once
user the user names the collection, it is created
at the end of the collection list. The view scrolls
over and shows the newly created collection if
necessary.
5 Sub-collection
Drag and drop: Places item into the collection.
View remains the same.
Drag and hold: View animates into the targeted
collection.
6 Shortcut to create collection
Dragging an item here should prompt the
create collection ow. User can easily create a
collection by dragging and dropping into this
area. The newly created collection will start
with just that one item inside of it.
4 An App - Create collection
Creates a collection that is placed at the end of
the collection list on the right hand side.
Create collection ow should be followed.
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 11 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag & Drop - Apps
1 User presses on app and holds
User can be either coming from the apps drawer,
or they could be moving an already pinned app.
Destinations:
Noitication Bar
H
o
u
s
e
9
2

I
t
e
m
s
Tap here to
create a
collection
C
u
s
t
o
m

S
u
b

c
o
l
l
e
c
t
i
o
n
2
4

i
t
e
m
s
2
3
2 In between pinned items or open space
This will create a new app row in that location.
Items will move aside accordingly.
3 App Bar
App bars hold 6 apps. If there is room in the
app bar, place the app inside the app bar. If
there is no room in the app bar, create another
app bar just to the right with the one app in it.
2
1
1 Drag and Drop for apps inherit most of the
same rules
The exceptions are outlined on this page.
R
e
n
o
v
a
t
i
o
n
s
1
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 12 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag & Drop - Collections
R
e
n
o
v
a
t
i
o
n
s
1 User presses on collection and holds
User can now move the pinned collection
Destinations:
Noitication Bar
H
o
u
s
e
9
2

I
t
e
m
s
Tap here to
create a
collection
C
u
s
t
o
m

S
u
b

c
o
l
l
e
c
t
i
o
n
2
4

i
t
e
m
s
2
3
2 Pinned Items area
Users aren't allowed to pin collections in this
area. If the user attempts to do so, move the
collection to the left most position.
3 Sub-collection
Drag and drop: Places item into the collection.
View remains the same.
Drag and hold: View animates into the targeted
collection.
1
1 Parent collections
Drag and drop: Places item into the parent.
View remains on current collection
Drag and hold: View animates into the targeted
collection & user still has control over the item
to place where they please.
P
h
o
t
o
s
1
0

i
t
e
m
s
1
3
4
4 Before/after sub-collection
User can reorder the sub-collections to how
they please.
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 13 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Apps Bars - Rules for Dragging/Dropping
Noitication Bar
... Single apps & App Bars
If a user is dragging a single app over an app bar,
they can ONLY place it inside of the app bar
(cannot create a collection by merging the two)
R
e
n
o
v
a
t
i
o
n
s
... Pinned items and App Bars
Dragging any pinned item (not an app) over an app
bar will allow the user to merge and create a
collection. The opposite is true as well.
... App Bars and App Bars
Dragging App Bar 1 onto App Bar 2 will allow the
user to drop the apps in App Bar 1 into App Bar 2
(the two app bars become merged).
The dropped apps will keep the same order and
simply be placed at the end of the list.
The merge animation includes the following:
The app bar enlarge if necessary.
The shadows of the dragged apps will form to
show where the apps would go if the user
were to release.
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 14 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Apps Bars - Rules for Dropping Apps
1 App placement ordering
The numbers represent the position names.
2 All app bar arrangements
Following 5 app bars show all the arrangements for
app bars. For two apps, the only possible
arrangement is for the two apps to go into positions
2 and 3. Dropping an app to the top or bottom of
the centered app(s) will determine which position it
will go into.
For three apps, the positions are 2,3,4, and so on.
The shadows should represent that.
2
3
4
1
5
1 2
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 15 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag&Merge + Drag&Drop
Pinned Item
App
Create collection
Drag
App Bar App Bar
Merge Target
Drop app in to App
Bar
Create collection
Result
Pinned Item
App Bar
Create collection Pinned Item
App
Create collection
Pinned Item App Bar
App Bar
Merge app bars
Pinned Item
Breadcrumb
Pinned Item
moved into target
breadcrumb
Pinned Item
Pinned Item
moved into target
collection
collection Pinned Item
Breadcrumb App
App bar moved
into target
breadcrumb
collection App
App moved into
target collection
Breadcrumb App Bar
App bar moved
into target
breadcrumb
Drop Target
App Bar
Drag
collection
App bar moved
into target
collection
Result
Time
1 2
3
4
1 User drags item over merge target
2 User drops item, before merge cue - Item returns
to original location
3 Merge cue activates after ###ms. Merge target
animates to a visual cue for collection creation
4 User drops item, creates sub collection with target
item. collection scrolls to the location of the newly
created collection.
Time
1 2 4
5
6
3
1 User drags item over drop target
2 User drops item, before drop cue - Item returns to
original location
3 Drop cue activates after ###ms. Drop target
animates to a visual cue for collection creation
4 User drops item, moves item into the new target
location, in the rst available location.
5 View animates to the target location after ###ms
(ex. if the target is a sub collection, that collection
is expanded into view, and user can place the item
where they like)
6 User can drop the item to wherever they please.
Drag & Merge Options
Drag & Drop Options
Drag & Drop Interaction Timeline
Drag & Merge Interaction Timeline
Note: We should be inheriting rules from
Android to differentiate a drag&merge from
moving aside pinned items. Once we detect
that a user wishes to merge, we should
follow the timeline stated on this page.
The reason for the slight delay in after a
drag and merge is detected is to improve
usability: With the ability to merge large and
small items alike, the possibility of
mistakingly merging two items together is
high - hence the time buffer.
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 16 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Deleting Items
1 User presses on item and holds
User can now move the item. Yellow labelling
represent possible destinations.
Noitication Bar
H
o
u
s
e
9
2

I
t
e
m
s
1
Tap here to
create a
collection
C
u
s
t
o
m

S
u
b

c
o
l
l
e
c
t
i
o
n
2
4

i
t
e
m
s
1 Delete Bar
When a user is dragging and dropping any
moveable item, the remove bar comes down from
the top. Drag and drop here will delete the item
(Inherit collections 1.0 rules for deleting. Ex.
deleting collections will prompt a dialog).
This bar will be a light overlay that shows only if an
item is currently being moved.
R
e
n
o
v
a
t
i
o
n
s
1
Remove
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 17 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Intoduction
H
o
u
s
e
9
2

I
t
e
m
s
1
3
3 User drops item, same location. Resize mode activated
The item is still transparent. Resize handles show around
the item
1 User long presses on an image.
2
The shared text or URL gets
pinned here The shared text
or URL gets pinned here The
shared text or URL gets
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
The shared text or URL gets pinned here
Resizing handles -
Item that needs to
maintain aspect ratio
Resizing handles -
Item that does not
need to maintain
aspect ratio
4
5
2 Item becomes larger and transparent
User drops the image without moving it to a new
location
4 Pinned items with images have handles on the corners
Items that respect the aspect ratio while resizing (items with
images) will have handles on the corners. The user can still
grab onto any edge.
5 Pinned items with w/o images have handles on the
sides
Items that do not respect the aspect ratio while resizing
(items w/o images and widgets) will have handles on the
sides. These are items that can strictly resize horizontally or
vertically.
Activating resize
mode
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 18 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Case 1
H
o
u
s
e
9
2

I
t
e
m
s
2
3
6
1
4
7
4 Target shadow shows where the item will be
placed
If the user were to drop the item, the shadow
represents where the actual item would go. As
such, items should move accordingly as the
shadow grows/shrinks.
1 User long presses, activates resize mode.
2 User starts dragging from bottom right corner
As soon as the resizing starts, the resizing outline
and handles disappear. The target shadow of the
item however should now be visible underneath the
image.
3 User drags continually resizes.
The transparent image should follow the users
touch.
5
5 Adjacent image moves along with the shadow
As the shadow grows, the image is pushed aside
to the right accordingly,
6 User enlarges item past the 594px threshold
After the user makes the item large enough to be
placed in the middle, the shadow moves to the
middle, all images are moved aside as a result.
7 Bottom image moved aside as a result of the
larger resized item.
As the image crosses the threshold, the target
shadow updates to show that the item will now be
placed in the middle, and any items in the way will
move aside to the right accordingly.
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 19 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Case 2
2
1
3
5
4
7
4 Target shadow shows where the item will be
placed
If the user were to drop the item, the shadow
represents where the actual item would go.
Because all items are stacked to the left, the
shadow actually grows to the right (pushing any
items aside).
1 User long presses, activates resize mode.
2 User starts dragging from bottom left corner
As soon as the resizing starts, the resizing outline
and handles disappear. The target shadow of the
item however should now be visible underneath the
image.
3 User drags continually resizes.
The transparent image should follow the users
touch. Notice that although the user is dragging the
corner over other items, the shadow still dictates
where the item will be placed. Thus no items are
moved just yet.
5 User enlarges item past the 594px threshold
After the user makes the item large enough to be
placed in the middle, the shadow moves to the
middle, all images are moved aside as a result.
7 Bottom image moved aside as a result of the
larger resized item.
As the image crosses the threshold, the target
shadow updates to show that the item will now be
placed in the middle, and any items in the way will
move aside to the right accordingly.
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 20 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Case 3
3
1
2
4
5
3 Images to the right move in, ll emptied space.
As the target shadow gets smaller, neighbouring
items ll any emptied space.
1 User starts dragging from bottom right corner
As soon as the resizing starts, the resizing outline
and handles disappear. The target shadow of the
item however should now be visible underneath the
image.
2 User drags continually resizes down.
The transparent image should follow the users
touch. Notice that although the user is dragging the
corner over other items, the shadow still dictates
where the item will be placed. Thus no items are
moved just yet.
4 User shrinks item past the 594px threshold
After the user makes the item small enough to be
placed on either side, the shadow moves to the
top, all images are moved aside as a result.
If the user is resizing from the bottom-up then the
resulting smaller image gets placed at the top. If
the user resizes from top-bottom then the opposite
occurs.
5 Neighbouring items ll emptied space.
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 21 of 21
Reading Life - Collections - Pinned Items
Version: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing Rules
Song
Widgets
Video
Pinned Text
Website w/
Image
Kobo Book
Website - No
Image
Album
Pinned Item
Images
Kobo
Magazine
Text from
Kobo
Other
Video image increases by
height/width, metadata by width
only
300 px width
Default Size
Other
Aspect Ratio
Aspect Ratio
Horizontally/
vertically
Limited by screen height
Spec is maximum default size. If content does
not ll max default size, card is shorter in height
(enough to show full content)
Album image
Album image, artist,
song name
Book cover,
progress bar
Spec is maximum default size. If content does
not ll max default size, card is shorter in height
(enough to show full content)
Specied by widget
Aspect Ratio
Dened in spec
Website title,
description, URL
Limited by screen height Dened in spec
Dened in spec
Image & Text
No resizing
Text only
(small icon)
Text icon, text
Image & Text
Dened in spec
300 px width
300 px width Image only
Book cover increases by
height/width, progress by width
only
Max Size
Text only
(small icon)
Default Size
Specied by widget
Max reached when all
available information is shown
Specied by widget
Image only
2 lines for title, one
line for URL
N/A
Image
Video image, 2 lines
for title, one for
source
Book cover increases by
height/width, progress by width
only
Aspect Ratio
Max reached when all
available information is shown
Limited by screen height
300 px width Aspect Ratio
300 px width
Spec is maximum default size. If content does
not ll max default size, card is shorter in height
(enough to show full content)
Type
N/A
Dened in spec Image only
Dened in spec
Composition
Only image resizes, text area
increases in width only
Image only
Max reached when all
available information is shown
Default Size
300 px width
Dened in spec
Aspect Ratio
Limited by screen height Aspect Ratio
Aspect Ratio
Resize Notes
Text only
(small icon)
Min Size Resize Type
Book cover,
progress bar
Aspect Ratio
Limited by screen height
Text icon, text
Limited by screen height
Specied by
widget
Default Size