reading life - collections - books_v2

20

Click here to load reader

Upload: shanak-rahman

Post on 30-Apr-2017

212 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Reading Life - Collections - Books_v2

_experience the commitmentTM

Reading Life - Collections - BooksTablet Wireframes

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

Page 2: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

20

19

18

17

16

15

14

13

12

11

10

9

8

7

6

5

4

3

Table of ContentsChange Log

Reading Life - Full Home Experience

Books Collection

Books Collection - Interactions

Books Collection - Drag&Drop

Books Collection - Selected State Options

Books Collection - Sort

Books Collection - Filter

Books Collection - Options - Import Content

Books Collection - Options - Download All, How to add, Kobo Help

Books Collection - Options - Kobo Settings

Books Collection - Want to Read

Books Collection - Already Read

Books Collection - Selective Sync - Downloading book from Cloud

Books Collection - Selective Sync - Remove Book

Books Collection - Selective Sync - Remove Cloud & Sideloaded book

Pinned book in custom collection

Book Types & Selected State Options

Page 3: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

Change LogPAGE /SECTION

VERSION 1.0-1.1

First draft of Library Wires1.0

Added selective sync, remove book, download from cloudAlso synced all secondary options with the reader team. 1.1

New magazine experienceDrag and drop functionality inside collectionsLibrary item secondary options menuEmpty states of libraries added

1.2

Trimmed to just the books experience. Separated magazines into another set of wires. 1.3

Moved Want to Read shelf out to the rootNew Filter optionsKobo Settings Included hereAll remove book cases are documented

1.4

Page 4: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 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 Books & Want to Read CollectionThis document goes into detail about out the information architecture of the Books and Want to Read collections which houses all of the Kobo user's books.

Books, Magazines, Want to Read and Articles are Smart Collections that all behave slightly different than regular collections - they depend on external services to populate the collections (ie. if user buys book on Kobo, it appears there).

2 Magazine CollectionHouses all users Kobo subscriptions. Details outlined in following document: "Reading Life - Collections - Magazines.pdf"

3 Pocket CollectionDetails outlined in following document: "Reading Life - Collections - Pocket.pdf"

Books

123 items

Magazine

12 Items

Pocket12 Item

s

Social12 Item

s1 2 3

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

ent12 Item

s

Sample

12 Items

Want to R

ead12 Item

s

Page 5: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection

House

92 Items

Noitification Bar

Library

1

4 1 All Books listed hereAll of users books will be listed here. This includes previews as well.

4 Tools AreaSync, sort, filter and options are housed here.

Sync - On tap: launches syncing with the Kobo service. A notification will show in Android Notification Centre informing that the sync is happening.

Sort - On tap: Details outlined on page: Book Collection - Sort

Show - On tap: Details outlined on page: Book Collection - Filter

Options - On Tap: Details outlined on pages: Book Collection - Options

22 Already Read

A smart sub-collection that houses all books that are marked as finished in your library, or books that the user has listed as finished

I've Read It

10 Items

$8.99

3

3 Cover ImageFollows the same rules as custom collections. This is the last touched or updated item in the collection.

Books

Page 6: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Interactions

$8.99

Books

Noitification Bar

Hom

e

I've Read It

10 Items

4

6 Tap on sub collectionOpens sub collection

2

31

1 Tap on Parent Tapestry Tapping either bar take you to the parent

2 Tapping on book you ownOpens the reading experience

3 Longpress on book you ownEither activates drag & drop or selected state options. Each experience is highlighted on subsequent pages.

Drag&Drop experience detailed on page: Books Collection - Drag&Drop

Selected state options experience detailed on page: Books Collection - Selected State Options.

5 SwipeSwiping will scroll the Libraryif applicable.

4 Longpress on empty space OR tapping on Options iconBoth launches the same dialog with following secondary actions: Import Content and Download All, Kobo Settings

Import content experience detailed on page: Books Collection - Import Content

6

5

7 7 Tap on Cover ImageLaunches overview or book as necessary.

4

Page 7: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Drag&Drop

$8.99

Bookss

Noitification Bar

Hom

e

14

Remove Item 5

1 Drag&Drop in BooksUsers can drag and drop in any collection inside the library (magazines included)

Dragging and dropping books in the library essentially allows user to perform actions on a duplicate of said file.

Only exception: If user wishes to place the book in a different location within the list (reorder), the "original" copy will move the new location. The "original" copy should essentially replace the target shadow in this interaction

4 ReorderUser is able to reorder items the same way they reorder items in regular collections.

6 Add to CollectionLaunches Add to Collections dialog.

Note: When a user adds a book to custom collection, to the Kobo service it makes a custom shelf with that book in it. Ie. If the user has a Cooking collection, with pinned websites, videos and 2 Kobo books, the Kobo service should create a custom shelf with those two Kobo books inside of it.

Thus if that user uses a Kobo Android app, they should see a Cooking shelf.

2

2 On Drag optionsWhen dragging regular pinned items in collections, a remove option drops down - in the library we will have Add to Shelf and Pin to Tapestry instead as quick options. 3

I've Read It

10 Items

3 HomeUser can drag&hold a copy of the item and move it to another collection.

5 Remove BookLaunches remove book experience. Detailed on page: "Books Collection - Selective Sync - Remove Book"

Add to Collection 6

Page 8: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Selected State Options

House

92 Items

Noitification Bar

Books

1 Selected stateTo get a book into selected state and hence activate the secondary menu:

• Long press on an item• Release and drop to the collection

2 Secondary Library OptionsDepending on the type of item selected, it will have a different set of secondary options.

Secondary options by item type are listed in this deck on page: Book Types & Secondary Menus

4 Tap behaviour for secondary options

See Book Details: launch overview in slide outRate Book: Launch Rate & Review slide outRemove Book: Experience shown on page: "Library - Selective Sync - Remove Book"Mark as Finished: Launch reader's Close Book experience (in line) Add to collection: Launch pin dialogBuy this Book: Launch Quick BuyGet the Preview: Move to Books view and show the book downloading.

3 Multi SelectOnce one book is selected, the user can select multiple items, after which the secondary options will change accordingly.

This will allow users to collections with multiple books easily.

Remove Books Mark Books as Finished Add to Collection4 Selected

5

5 Multi-Select menu

This shoes how the menu options change as you select multiple items.

I've Read It

10 Items

$8.99

Books

2

1

See Book Details Rate Book Remove Book Mark as Finished Add to Collection1 Selected

43

Page 9: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Sort

House

92 Items

Noitification Bar

Books

Already R

ead10 Item

s

1 User taps on SortFollowing dialog shows. Default to Last Read

Sort By

Title

Last Read

Author

... Custom SortIf the user manually reorders their collection, all sort options are deselected.

If the user would like, they can then go into sort and resort the list into one of the three options, at which time their custom sort order will be lost.

There should be a smooth animation when books are moving to their new sort order.

1

$8.99

Books

Page 10: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Filter

House

92 Items

Noitification Bar

Books

I've Read It

10 Items

1 User taps on FilterFollowing dialog shows. Default to All

3 Show OptionsOnly one option can be selected at a time.

All: Shows all books available to the userOn Device: Shows all downloaded or side loaded booksCurrently Reading: Shows all downloaded books with an active bookmark

1

3

3 Filter has an On and Off state. If all books are showing, the filter is in an OFF state. If any other of the options are showing, the filter is in an ON state to visually indicate to the user that there is content being filtered out.

$8.99

BooksShow

All

On Device

Currently Reading

3

Page 11: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Options - Import Content

Choose an Action

Import Content

Download All

Kobo Settings

How to add to this Collection

Kobo Help

1

1 Longpress on empty space OR tapping on Options iconActivates a modal dialog in the middle of the screen withs secondary options.

Searching Memory Card

Stop Search

Import Content

Kobo will now search your memory card for items that you can import into your library. You can select some or all of these items in the next step

Cancel Start

Select Items to Import

Import Selected

Found 1 new item.

Book Title Book Title Book TitleAuthor Name Author Name

Remove Files

Kobo is about to import your items into the Library. Do you want to remove the original files from the memory card?

Yes No

Importing Content

2

3

4 4 3

3

2 Secondary Options MenuThis is a modal dialogue that pops up in the middle of the screen, with various secondary options.

The entire Import Content experience is borrowed from the reading app. We are not recreating this experience on our end.

3 Borrowed dialogs from Reading AppThese dialogs are borrowed from the reading app.

4 Import Content ExperienceThis entire experience in the app is a full screen experience. We wish to bring this into the slide out that houses book overviews, the rate/review experience and more.

Page 12: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Options - Download All, How to add, Kobo Help

Choose an Action

Import Content

Download All

Kobo Settings

How to add to this Collection

Kobo Help

1

1 Longpress on empty space OR tapping on Options iconActivates a modal dialog in the middle of the screen withs secondary options.

2 Download AllTapping here puts all books in the cloud in a download state.

2

3 How to add to this CollectionOpens books empty state flyout, outlined in wires:Custom Collections - Empty States - Help Flouts

3

4

4 Kobo HelpLaunches Intelliresponse in the browser.

Page 13: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Options - Kobo Settings

Choose an Action

Import Content

Download All

Kobo Settings

How to add to this Collection

Kobo Help

1

1 Longpress on empty space OR tapping on Options iconActivates a modal dialog in the middle of the screen withs secondary options.

2

2 Kobo SettingsTapping on Kobo settings will bring the app settings inside of the Reader flyout (not a pop up, like in the app).

There are certain settings that we wish to suppress and not show on the tablet. The wire above shows which settings we want to keep on our side.

Kobo Settings

Manage Device Library

Notifications

Quick Buy Settings

Manage Device Library Notifications Quick Buy

Reading Notifications

Newly Earned Awards

Other Reading Life Events

Show Notifications While Reading

Notification Bar

Book Recommendations

Hide the Status Bar

Kobo Notifications

Get the latest from Kobo, including exclusive eReader promotions, right on your home screen.

Enable Quick Buy

Remember My Password

Book title goes here spans one line...

10.38 MB

Book title goes here spans one line...

10.38 MB

Book title goes here spans one line...

10.38 MB

Book title goes here spans one line...

10.38 MB

Book title goes here spans one line...

10.38 MB

Total: 311.73 MB Cancel Remove

3

3 Settings FlyoutsAs the user drills into each section, a subsequent flyout gets activated, which houses a section of settings.

Page 14: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Want to Read

$8.99

Noitification Bar

Books

12 Tapping on non purchased book

Opens spotlight view with that book

1 Want to Read BooksAll the books that a user selects as "Want to Read" ends up in this shelf. Once a user purchases one of these books, it is removed from this shelf.

3 Long Press on non purchased bookOpens Non-purchased book secondary options - detailed on page titled "Library - Book Types"

4 User taps on SortFollowing dialog shows. Default to Date Added. Date Added: most recent items at the top of list. 2

3

$8.99 $8.99

$8.99

$8.99 $8.99 $8.99

Want to Read

Sort By

Title

Last Read

Author

4 5

5 User taps on optionsSlightly different menu gets presented from the Want to Read shelf. Import Content isn't present because you cannot import books into

Choose an Action

Download All

Kobo Settings

How to add to this Collection

Kobo Help

Page 15: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Already Read

House

92 Items

Noitification Bar

Books

1

3

1 Already Read It BooksAll the books that a user selects as "Read It" ends up in this shelf. In addition, any book that a user marks as finished will also show up here.

It would be interesting if we were able to pull books that the user has previously rated before.

3 No "Sub-shelves"Shelves only exist on the Library level.

2 User taps on SortFollowing dialog shows. Default to Date Added. Date Added: most recent items at the top of list.

$8.99 $8.99

$8.99

$8.99 $8.99

2

Already Read

Sort By

Title

Last Read

Author

Page 16: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Selective Sync - Downloading book from Cloud

3 Book in libraryIf the download completes, it is now in the library.

3

1 User taps on cloud state bookIt changes to the downloading state. This includes a download progress bar.

1

2

2 User taps on downloading state bookThis pauses the download - puts it in a paused state.

Page 17: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Selective Sync - Remove Book

See Book Details

Rate Book

Remove Book

Mark as Finished

Pin to Tapestry

Add to Shelf

See Book Details

Rate Book

Remove Book

Mark as Finished

Pin to Tapestry

Add to Shelf

3

11 Remove Book Experience

If a user taps Remove Book, we prompt the user with two options. Removing from device removes the book from the device, but keeps it in the user's library. We should delete any pinned instances of the book from any tapestry as well.

Delete book from Library deletes the book entirely from the users library (and the device of course)

2 Book state changes to cloud stateThe book is now in the cloud state. Tapping on the cloud state will start the download of the book into the library.

2

3 Book removedBook is removed from the Library. Any instance of it is also deleted.

Remove Item...

From LIbraryCancel From Device

Remove from Device lets you re-download items from the Kobo Cloud later.

Remove from Kobo Library clears your items from the Kobo Cloud and from all of your devices. 

Remove Item...

From LIbraryCancel From Device

Remove from Device lets you re-download items from the Kobo Cloud later.

Remove from Kobo Library clears your items from the Kobo Cloud and from all of your devices. 

Page 18: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Books Collection - Selective Sync - Remove Cloud & Sideloaded book

See Book Details

Rate Book

Remove Book

Mark as Finished

Add to Collection

See Book Details

Rate Book

Remove Book

Mark as Finished

Add to collection

2

11 Remove Book - Book in Cloud

A book from the cloud can only be removed from the users Library.

2 Book removedBook is removed from the collection. Any instance of it is also deleted.

Remove from Library?

This clears your item from the Kobo Cloud and from all your devices.

RemoveCancel

Remove from Device?

Removing this item also erases your annotations.

RemoveCancel

2

Sideloaded Book

Page 19: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned book in custom collection

1 Custom CollectionThis document shows what happens to a book after it is pinned to a custom collection

2 Pinned BookThe book itself behaves as if its inside of the Books Collection. The progress bar is maintained and updated. Press and hold will activate the same secondary drag menu, and secondary menus. Resizing is enabled as well.

Noitification Bar

Tap here to create a

collection

Hom

e

1

2... Removing the Book

Remove options from here will NOT activate the remove experience from the Kobo service, rather it will simply remove the pinned copy in this collection.

IE. For a user to remove a book from the device or the library, they must do it from the Books collection.

... Collections - Kobo Shelf relationshipIf a Kobo book is housed in a collection or sub-collection, it creates a shelf in the Kobo Service with the same collection name, and vice versa.

A consequence of this rule is: Naming for ALL kobo collections must unique on a Global level, not a local level, as it is now. IE there may only be one collection named "Cooking" on the entire device (collection or sub-collection levels).

Renovations

Page 20: Reading Life - Collections - Books_v2

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 22Reading Life - Collections - BooksVersion: 1.0 | Published: August 02, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Book Types & Selected State Options

Purchased book - In progress

Purchased book - Not Opened Finished Book

Finished Book - secondary options

See Book Details

Rate & Review

Remove Item

Add to collection

Book Previews - secondary options

Buy this Book

See Book Details

Rate & Review

Remove Item

Add to collection

Book in the Cloud Non-purchased book

$8.99

Non-purchased book - secondary options

Add to collection

Buy this Book

Get the Preview

See Book Details

Remove Book

.. Tap behaviour for secondary options

See Book Details: launch overview in slide outRate Book: Launch Rate & Review slide outRemove Book: Experience shown on page: "Library - Selective Sync - Remove Book"Mark as Finished: Launch reader's Close Book experience (in line) Add to collection: Launch pin dialogBuy this Book: Launch Quick BuyGet the Preview: Move to Books view and show the book downloading.

Preview of Kobo book in Library

$8.99

Purchased book - secondary options

See Book Details

Rate & Review

Remove Item

Mark as Closed

Add to collection

Purchased book - secondary options

See Book Details

Rate & Review

Remove Item

Mark as Closed

Add to collection

Book in the Cloud - secondary options

See Book Details

Rate & Review

Remove Item

Add to collection