Reading Life - Collections - Custom Collections

_experience the commitment
TM
Reading Life - Collections - Custom
Collections
Tablet Wireframes
Version: 1.0
Published: July 16, 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 16
Reading Life - Collections - Custom Collections
Version: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman (srahman@kobo.com)
16
15
14
13
12
11
10
9
8
7
6
5
4
3 Change Log
Reading Life - Full Home Experience
Collections
Collections - Interactions
Collections - Sizes
Collection
Collection - Space Underneath Title
Collection - End of Collection
Collection - Interactions
Sub collections
Sub collections - Interactions
Sub collection
Sub collection - Interactions
Creating a collection
Page 3 of 16
Change Log
PAGE /SECTION
VERSION 1.0-1.1
First draft of Collections 2.0 Wires 1.0
Small Changes 1.1
Added: first draft of OOB deck 1.2
Added: Drag & Drop, Creating Collections, Deleting Items, Container Sizes 1.3
Removed OOB into separate file 1.3.1
- Added interaction details for app bars
- Added permutations for Drag&Merge and interaction timing
- Added permutations for Drag &Drop and interaction timing
- Added interaction timing details
1.4
- Updated rules for drag/drop for app bars
- Added specs for Resizing images
- Added specs for all possible pinned items
1.5
- Added empty state of a collection
- Added rules for dropping apps into an app bar
- Added summary of min and max sizes of all pinned items while resizing
1.6
Page 4 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Reading Life - Full Home Experience
Noitication Bar
Tap here
to create a
collection
1 Custom Collection
Users are able to create custom collections where
they can collect various media items in a beautiful
visual interface. Examples of custom collections:
Favourite Recipes, Guitar Lessons, etc.
Custom collections are different than smart
collections (books, magazines, pocket) in that they
are not dependent on an external service to
populate its content. Users are responsible for
populating custom collections with their own
content.
This document contains requirements for custom
collections.
Requirements for the various types of pinned items
that are found in custom collections can be found
here: Reading Life - Collections - Pinned Items.pdf
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
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
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
Page 5 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collections
Noitication Bar
Tap here
to create a
collection
B
o
o
k
s
1
2

i
t
e
m
s
M
a
g
a
z
i
n
e
8

I
t
e
m
s
P
o
c
k
e
t
8

I
t
e
m
s
S
o
c
i
a
l
9

I
t
e
m
s
E
n
t
e
r
t
a
i
n
m
e
n
t
8

I
t
e
m
s
S
a
m
p
l
e
8

I
t
e
m
s
1 Smart-Collections
The collections Books, Magazines, and Pocket, are
smart collections (connected to a service to which
dictates how it is populated). Books and magazines
cannot be deleted and Pocket cannot be deleted,
however they are moveable.
2 Collection Cover items
This will show the last item the user viewed within
this collection, OR it will show the newest item
added to the collection.
3 Custom Collections
Social, Entertainment and Sample are proposed
default custom collections that will be loaded on
the device. They are custom collections, and follow
all the rules outlined in this document.
4 Create Collection CTA
Users can tap this area to easily create a new
custom collection.
1
3
4
2
Page 6 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collections - Interactions
Noitication Bar
Tap here
to create a
collection
B
o
o
k
s
1
2

i
t
e
m
s
M
a
g
a
z
i
n
e
8

I
t
e
m
s
P
o
c
k
e
t
8

I
t
e
m
s
S
o
c
i
a
l
9

I
t
e
m
s
E
n
t
e
r
t
a
i
n
m
e
n
t
8

I
t
e
m
s
S
a
m
p
l
e
8

I
t
e
m
s
7
1 Tap Container
Opens the collection
6
1
2
4 Long Press on Title
Custom collections have editable titles. Smart
collections do not. Long pressing will launch the
rename title popup.
3 Long Press on Container
Allows user to move a collection to a different
location. collections on this level are left aligned.
(cannot be placed randomly in the empty space)
2 Tap Cover Item
Directly opens the item itself
5 Tap on create collection CTA
Launches name collection pop up. User can hit
cancel from there to cancel the creation of a
collection, or if they properly name it, it creates a
new custom collection.
4
3
7 Swipe Right
This area is a free scrolling area if there are
enough custom collections to warrant that.
If the user is as far left as possible, then swiping to
the right will snap in the Home Dash screen. There
should be some elasticity - If the user slowly
swipes over 25% of the page to the right, the snap
to the Home Dash screen should occur. If below
25%, the home view should snap back into the
collections view.
8 Tapping Home
Tapping home from here will bring the user to the
Home Dash.
8
5
5 Long press on empty space
Launches secondary options pop up. Options
include: Create Collection
Page 7 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collections - Sizes
Noitication Bar
Tap here
to create a
collection
B
o
o
k
s
1
2

i
t
e
m
s
M
a
g
a
z
i
n
e
8

I
t
e
m
s
P
o
c
k
e
t
8

I
t
e
m
s
S
o
c
i
a
l
9

I
t
e
m
s
E
n
t
e
r
t
a
i
n
m
e
n
t
8

I
t
e
m
s
S
a
m
p
l
e
8

I
t
e
m
s
1 Collection Sizes
Collections vary in width based on the number of
items inside of it. Height on the other hand is
picked at random when the collection is created.
There are three width sizes, the rules are as
follows:
Small: 1-10 items
Medium: 11-20 items
Large: 21+ items
2 Cover Image Sizes
The width of the cover images will be dictated by
the container size. Subsequent aspect ratio should
be followed.
3 Collection Title size
Need feedback from devs on what makes sense
here. A balance needs to be created between
having a long title and having a tall cover image,
1
2
3
Can magazines, books, pocket be moveable or delete able?
Page 8 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collection
Noitication Bar
1 collection Title
collection title animates from the container bar and
moves into the empty space.
6 Large Pinned Item
When an item is larger than a specied size, it gets
centered on the horizontal line.
4 Pinned Item - Top row
Smthan the horizontal rule - bottom aligned to the
centre of the collection.
Tap here to
create a
collection
3
4
5 Pinned Item - Bottom row
Pinned item smaller than the horizontal rule - top
aligned to the centre of the collection.
7 App Bar
A user can long press from the apps drawer and
create an app row to place apps in. Apps are
special pinned items that can only be placed in
their respective app rows. Users can create
multiple app rows, and they can be placed
anywhere inside the collection.
The apps inside the app row are always centered
to the horizontal line
7
5
6 3 Horizontal Line
All pinned items will be be attached either to the
top or bottom of a horizontal line. Items will be
pinned always the furthest left in the following
order: top, bottom, top, bottom, etc. Specic default
pin sizes can be found in the design spec. Larger
pinned items can break this rule, and be centered
on the horizontal line itself.
8 Create collection Prompt
There is always a dedicated column to prompt the
user to create a collection.
8
H
o
m
e
1
Renovations
2
2 Space underneath title
Due to the existence of the collection title, there is
a small amount of space underneath it which
deviates from the interface rules found throughout
the rest of the collection. These deviations are
documented the page: Collection - Space
Underneath Title.
9 Close Button
At the end of each collection, there is a close
button, just before a thin bar which is the end of the
collection container. If the collection is small
enough, it will show always, if not the user must
scroll to see it.
9
Page 9 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collection - Space Underneath Title
Noitication Bar
Tap here to
create a
collection
H
o
m
e
Sample title that
runs a total of 3
lines
2
2 Space underneath title
Due to the existence of the collection title, there is
a small amount of space underneath it which
deviates from the interface rules found throughout
the rest of the collection. These rules are primarily
for the landscape view.
1. Items in this location straddle the horizontal line
and can have a maximum height (specced out in
mocks), with no restriction on the width.
2. If the width of the rst item is less than title width
(specced out in mocks) it is aligned to the right side
of the title.
3. If the width of the rst item is more than title
width (specced out in mocks) it is aligned to the left
side of the title, and subsequent items are pushed
out as far as they need to be.
4. If a user resizes the item past the height
restriction, the target shadow moves to the right
where it can accommodate the larger size - a
smaller item will ll its place if available.
5. Two columns of the app bar can t underneath
the title, and the apps themselves will ow around
the dedicated title area. Titan and Apollo setups are
shown below, both in landscape views.
1
1 Space dedicated to the title
Titles can be at most 42 characters long. As such,
there is a set amount of space that is allocated for
the title, in which it can span at maximum 3 lines.
This blue box depicts that allocated space. Even if
the title runs one line, that space is still allocated
for the title, in the case the user decides to rename
it.
Title Area
Titan
Landscape
Apollo
Landscape
Title Area
Page 10 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Collection - Interactions
Noitication Bar
Tap here to
create a
collection
H
o
m
e
Renovations
2 Long press on collection Title
Opens collection naming dialog
3 Tap Item
Opens item in app
5 Swipe
Swiping will scroll the collection if applicable.
1 Tap on Parent collection OR collection
container
Tapping either bar take you to the parent
4 Tap Home
Closes the current collection and goes to the
collections view (rst level)
6 Tap OR long press to create sub collection
Long pressing here, or on free space elsewhere
will activate a secondary menu with options: Create
collection, Change Colour Palette
3
1
4
6
5
2
Page 11 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Sub collections
Noitication Bar
2 Sub collection
Sub collections will always be placed at the end of
the collection itself. They do not vary in height, but
they do vary in width, adhering to the width rules
mentioned previously.
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
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
1
3 Sub-collection - Last Accessed Item
Last accessed item will show here.
3
1 Create collection CTA
This call to action always lives on the left side of all
existing sub-collections. Newly created collections
will be placed to the right of the CTA.
H
o
m
e
Renovations
Page 12 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Sub collections - Interactions
Noitication Bar
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
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
H
o
m
e
Renovations
1 Tap on Sub collection
Tapping will open the the specic collection.
2 Long Press on Title
Opens rename collection dialog. Default collections
will not be editable.
4 Long Press on Container
Allows user to move a collection to a different
location. collections on this level can only be to the
left of one another (cannot be placed randomly in
the empty space)
3 Tap Cover Item
Opens item inside app
1
4
2
3
Page 13 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Sub collection
Noitication Bar
1 Parent collection Title
Shows parent collection title. # of items are not
shown.
Breadcrumbing goes innitely deep. If the user is
10 collections deep, the bread crumbing should
represent that. The initial view, however, should
only show the rst parent. All other parents are
accessible by swiping right.
3 Pinning & collection Rules
All collection rules are inherited to sub collections
as well.
Users can create sub collections however many
levels deep they wish.
2
3
2 Sub collection Title
The title of the collection the user is currently
viewing is shown in this place always.
R
e
n
o
v
a
t
i
o
n
s
1
Renovations
Page 14 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Sub collection - Interactions
Noitication Bar
R
e
n
o
v
a
t
i
o
n
s
1
2
2 Tap Home
Closes the current collection and goes to the
collections view (rst level)
1 Tap on Parent collection OR collection
container
Tapping either bar take you to the parent
3
3 Swipe
Swiping will scroll the collection if applicable.
Renovations
Page 15 of 16
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Creating a collection
Noitication Bar
Tap here to
create a
collection
H
o
m
e
Renovations
2 Tap on Create collection CTA
We will user test whether we make the interaction
here long press OR tap to create collection.
Enter collection Title
Cancel OK
3 Creating collection rules largely unchanged
Only exception: the term "Untitled" is not defaulted
as the suggested entry. The eld is focused
(keyboard activated), however it is left blank. If the
user doesn't enter a name, then we resort back to
the "Untitled" naming convention.
3
2
1
1 Long press to activate contextual dialog
Long press on a collection will activate a dialog
with the following options:
1. Create collection
2. Edit Color Palette
3. Rename collection

Reading Life - Collections - Custom Collections

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Reading Life - Collections - Custom Collections

Uploaded by

Copyright:

Available Formats

_experience the commitment

You might also like