+ All Categories
Home > Documents > Reading Life - Collections - Custom Collections

Reading Life - Collections - Custom Collections

Date post: 01-May-2017
Category:
Upload: shanak-rahman
View: 227 times
Download: 0 times
Share this document with a friend
15
_experience the commitment TM Reading Life - Collections - Custom Collections Tablet Wireframes Version: 1.0 Published: July 16, 2013 Created By: Shanak Rahman ([email protected])
Transcript
Page 1: Reading Life - Collections - Custom Collections

_experience the commitmentTM

Reading Life - Collections - Custom CollectionsTablet Wireframes

Version: 1.0Published: July 16, 2013 Created By: Shanak Rahman ([email protected])

Page 2: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

16

15

14

13

12

11

10

9

8

7

6

5

4

3Change 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: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

Change LogPAGE /SECTION

VERSION 1.0-1.1

First draft of Collections 2.0 Wires1.0

Small Changes1.1

Added: first draft of OOB deck1.2

Added: Drag & Drop, Creating Collections, Deleting Items, Container Sizes1.3

Removed OOB into separate file1.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: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Reading Life - Full Home Experience

Noitification Bar

Tap here to create a collection

1 Custom CollectionUsers 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

Books

12 items

Magazine

9 Items

Pocket9 Item

s

Social8 Item

s1

Message from Kobo

Get 50% off your next great read

EXPIRES APRIL 13, 2013

New Issue!Apr 2013

Related to your readInferno

You finishedThe Hobbit

Rate it

15% read

DiscoverJane Austen

Related to your readPride 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 readInferno

Entertainm

ent9 Item

s

Sample

8 Items

Page 5: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collections

Noitification Bar

Tap here to create a collection

Books

12 items

Magazine

8 Items

Pocket8 Item

s

Social9 Item

s

Entertainm

ent8 Item

s

Sample

8 Items

1 Smart-CollectionsThe 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 itemsThis will show the last item the user viewed within this collection, OR it will show the newest item added to the collection.

3 Custom CollectionsSocial, 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 CTAUsers can tap this area to easily create a new custom collection.

1

3

4

2

Page 6: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collections - Interactions

Noitification Bar

Tap here to create a collection

Books

12 items

Magazine

8 Items

Pocket8 Item

s

Social9 Item

s

Entertainm

ent8 Item

s

Sample

8 Items

7

1 Tap ContainerOpens the collection

6

1

2

4 Long Press on TitleCustom collections have editable titles. Smart collections do not. Long pressing will launch the rename title popup.

3 Long Press on ContainerAllows 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 ItemDirectly opens the item itself

5 Tap on create collection CTALaunches 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 RightThis 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 HomeTapping home from here will bring the user to the Home Dash.

8

5

5 Long press on empty spaceLaunches secondary options pop up. Options include: Create Collection

Page 7: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collections - Sizes

Noitification Bar

Tap here to create a collection

Books

12 items

Magazine

8 Items

Pocket8 Item

s

Social9 Item

s

Entertainm

ent8 Item

s

Sample

8 Items

1 Collection SizesCollections 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 itemsMedium: 11-20 itemsLarge: 21+ items

2 Cover Image SizesThe width of the cover images will be dictated by the container size. Subsequent aspect ratio should be followed.

3 Collection Title sizeNeed 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: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collection

Noitification Bar

1 collection Titlecollection title animates from the container bar and moves into the empty space.

6 Large Pinned ItemWhen an item is larger than a specified size, it gets centered on the horizontal line.

4 Pinned Item - Top rowSmthan the horizontal rule - bottom aligned to the centre of the collection.

Tap here to create a

collection

3

4

5 Pinned Item - Bottom rowPinned item smaller than the horizontal rule - top aligned to the centre of the collection.

7 App BarA 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 LineAll 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. Specific 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 PromptThere is always a dedicated column to prompt the user to create a collection.

8

Hom

e

1

Renovations

2

2 Space underneath titleDue 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 ButtonAt 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: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collection - Space Underneath Title

Noitification Bar

Tap here to create a

collection

Hom

e

Sample title that runs a total of 3 lines

2

2 Space underneath titleDue 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 first 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 first 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 fill its place if available.

5. Two columns of the app bar can fit underneath the title, and the apps themselves will flow around the dedicated title area. Titan and Apollo setups are shown below, both in landscape views.

1

1 Space dedicated to the titleTitles 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: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Collection - Interactions

Noitification Bar

Tap here to create a

collection

Hom

e

Renovations2 Long press on collection Title

Opens collection naming dialog

3 Tap ItemOpens item in app

5 SwipeSwiping will scroll the collection if applicable.

1 Tap on Parent collection OR collection containerTapping either bar take you to the parent

4 Tap HomeCloses the current collection and goes to the collections view (first level)

6 Tap OR long press to create sub collectionLong 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: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Sub collections

Noitification Bar

2 Sub collectionSub 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

Custom

Sub collection24 item

s

Custom

Sub collection24 item

s

2

1

3 Sub-collection - Last Accessed ItemLast accessed item will show here.

3

1 Create collection CTAThis 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.

Hom

e

Renovations

Page 12: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Sub collections - Interactions

Noitification Bar

Tap here to create a

collection

Custom

Sub collection24 item

s

Custom

Sub collection24 item

sHom

e

Renovations

1 Tap on Sub collectionTapping will open the the specific collection.

2 Long Press on TitleOpens rename collection dialog. Default collections will not be editable.

4 Long Press on ContainerAllows 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 ItemOpens item inside app

1

4

2

3

Page 13: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Sub collection

Noitification Bar 1 Parent collection TitleShows parent collection title. # of items are not shown.

Breadcrumbing goes infinitely deep. If the user is 10 collections deep, the bread crumbing should represent that. The initial view, however, should only show the first parent. All other parents are accessible by swiping right.

3 Pinning & collection RulesAll 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 TitleThe title of the collection the user is currently viewing is shown in this place always.

Renovations

1

Renovations

Page 14: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Sub collection - Interactions

Noitification Bar

Renovations

1

2

2 Tap HomeCloses the current collection and goes to the collections view (first level)

1 Tap on Parent collection OR collection containerTapping either bar take you to the parent

3

3 SwipeSwiping will scroll the collection if applicable.

Renovations

Page 15: Reading Life - Collections - Custom Collections

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 16Reading Life - Collections - Custom CollectionsVersion: 1.0 | Published: July 16, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Creating a collection

Noitification Bar

Tap here to create a

collection

Hom

e

Renovations

2 Tap on Create collection CTAWe 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 unchangedOnly exception: the term "Untitled" is not defaulted as the suggested entry. The field 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 dialogLong press on a collection will activate a dialog with the following options:1. Create collection2. Edit Color Palette 3. Rename collection


Recommended