Reading Life - Collections - Custom Collections

  • View
    219

  • Download
    0

Embed Size (px)

Text of Reading Life - Collections - Custom Collections

  • _experience the commitmentTM

    Reading Life - Collections - Custom CollectionsTablet Wireframes

    Version: 1.0Published: 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 16Reading Life - Collections - Custom CollectionsVersion: 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

    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

  • 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 (srahman@kobo.com)

    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

  • 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 (srahman@kobo.com)

    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

  • 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 (srahman@kobo.com)

    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

  • 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 (srahman@kobo.com)

    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

  • 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 (srahman@kobo.com)

    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?

  • 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 (srahman@kobo.com)

    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 th