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

Reading Life - Collections - Magazines_v2

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

_experience the commitmentTM

Reading Life - Collections - MagazinesTablet Wireframes

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

Page 2: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

15

14

13

12

11

10

9

8

7

6

5

4

3

Table of ContentsChange Log

Magazines Collection

Magazines Collection - Interactions

Magazines Collection - Drag&Drop

Magazine Collection - Selected State Options

Magazines Collection - Subscription

Magazines Collection - Subscription - Interactions

Magazine Collection - Selective Sync - Downloading book from Cloud

Magazine Collection - Secondary Options - Sync, Download All, Kobo Settings

Magazine Collection - Selective Sync - Remove Issue

Magazine Collection - Selective Sync - Remove Cloud Issue

Pinned issue in custom collection

Magazine States & Selected State Options

Page 3: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

Change LogPAGE /SECTION

VERSION 1.0-1.1

First draft of Magazine Wires1.0

New sort optionsAll remove cases are documentedCollection secondary options are documented

1.1

Page 4: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazines Collection

Hom

e

Wired

12 issues

PC M

ag12 issues

Slam24 issues

Noitification Bar

Apr 2013

Mar 2013

Jan 2013

1 Magazines Recent Reads areaThis area shows one magazine per subscription in the users library. If the user has 4 subscriptions, four of their most recently opened issue will be at the front. If there are no recently read issues, it will show the most recently available issue, and it can be in either a downloaded or cloud state.

The purpose of this area is to be a convenient launcher for recent items.

2 Collections as subscriptionsWhen the user subscribes to a magazine, it creates a collection which is comprised of its corresponding issues. The collections house all owned issues.

3 Collection cover imageMost recent touched item OR most recently downloaded issue (whichever is most recent). This means that the cover could be different than the one in the Recent Reads area.

1

3

24

4 New Issue IndicatorIf a new issue is available, that has not been opened yet, there will be a new issue indicator to communicate that, with a number count.

The indicator will remain till the issue(s) are actually opened by the user.

5

4 Tools areaSync 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.

Options - On Tap: Details outlined on page: Magazine Collection - Secondary Options

Magazines

2

Page 5: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazines Collection - Interactions

Hom

e

Wired

12 issues

PC M

ag12 issues

Slam24 issues

Noitification Bar

Apr 2013

Mar 2013

Jan 2013

Magazines

1 Tapping on issueOpens reading experience.

2 Longpress on issueAllows user to drag & drop or activate the secondary menu options on that issue. Detailed in this document.

3 Longpress on empty space OR tap OptionsDetails outlined on page: Magazine Collection - Secondary Option

4 Tap on collectionOpen the the magazine collection.

5 Long press on a collectionUsers can long press and reorder magazine collections. Users cannot drag and drop shelves into other shelves. All magazine collections must live on this level.

1

2

3

4 5

3

Page 6: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazines Collection - Drag&Drop

Hom

e

Wired

12 issues

PC M

ag12 issues

Slam24 issues

Noitification Bar

Apr 2013

Mar 2013

Jan 2013

Magazines

Apr 2013

1

1 Drag&Drop in issuesDragging and dropping magazines in the library essentially allows user to perform actions on a duplicate of said file.

Only exception: If user wishes to place the issue 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

Remove Issue 5

3

Add to Collection 6

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

6 Add to CollectionLaunches Add to Collections dialog.

Note: When a user adds an issue to the custom collection Cooking, to the Kobo service it makes a custom shelf with that issue in it.

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

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

5 Remove issueLaunches remove issue experience. Detailed on page: "Magazine Collection - Selective Sync - Remove issue".

If the user proceeds to remove the issue from the device, the next most relevant issue will appear in its place inside the Recent Reads area.

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.

Page 7: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazine Collection - Selected State Options

House

92 Items

Noitification Bar

Library

1 Selected stateTo get a issue 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: Magazine States & Selected State Options

4 Tap behaviour for secondary options

See Subscription Details: launch overview in slide outRemove Issue: Experience shown on page: "Library - Selective Sync - Remove issue"Add to collection: Launch pin dialog

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

This will allow users to create collections with multiple issues easily.

Remove Items Add to Collection4 Selected

5

5 Multi-Select menu

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

Magazines

2

1

See Subscription Details Remove Issue Add to Collection1 Selected

43

Wired

12 issues

PC M

ag12 issues

Slam24 issues

Apr 2013

Mar 2013

Jan 2013

Page 8: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazines Collection - Subscription

Magazines

Noitification Bar

May 2013

1

1 All issues listed hereAll user's issues for this subscription listed here.

3 SortOn Tap: Following dialog shows. Default to Date

April 2013

March 2013 Jan 2013

Feb 2013 Dec 2012

Nov 2012

Oct 2012

2 3 5

... 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.

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

5 OptionsOptions - On Tap: Details outlined on page: Magazine Collection - Secondary Option

PC Mag

Apr 2013

4 Last ReadSorted by most recently opened OR date added.

Sort By

Last Read

Date4

Page 9: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazines Collection - Subscription - Interactions

Magazines

Noitification Bar

May 2013

April 2013

March 2013 Jan 2013

Feb 2013 Dec 2012

Nov 2012

Oct 2012

Apr 2013

PC Mag

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

2 Tapping on issue you ownOpens the reading experience

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

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

Selected state options experience detailed on page: Magazine 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

Secondary options detailed on page: Magazine Collection - Secondary Options

4

2

31

5

4

Page 10: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazine Collection - Selective Sync - Downloading book from Cloud

3 Progressive DownloadAfter the download reaches a certain threshold, the user can have access to read the magazine while the rest of it downloads in the background.

To communicate it to the user, the greyed out background is removed, and tapping anywhere will open the magazine.

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

2 User taps on downloading state issueThis pauses the download - puts it back in its download state

May 2013 May 2013 May 2013May 2013

1

2

May 2013

3

Page 11: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazine Collection - Secondary Options - Sync, Download All, Kobo Settings

Choose an Action

Download All

Kobo Settings

How to add to this Collection

Kobo Help

1

1

2

4 Kobo HelpLaunches Intelliresponse in the browser.

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

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

3 Kobo SettingsFull settings experience located here:Reading Life - Collections - Books.pdf

2

2

Page 12: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazine Collection - Selective Sync - Remove Issue

See Subscription Details

Remove Issue

Add to Collections

See Subscription Details

Remove Issue

Add to Collections

3

11 Remove issue Experience

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

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

2 Issue state changes to cloud stateThe issue is now in the cloud state. Tapping on the cloud state will start the download of the issue onto the device..

2

3 Issue removedIssue 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 13: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazine Collection - Selective Sync - Remove Cloud Issue

See Subscription Details

Remove Issue

Add to Collections

11 Remove Issue - Issue in Cloud

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

2 Issue removedIssue 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

2

Page 14: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned issue in custom collection

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

2 Pinned issueThe issue itself behaves as if its inside of the Magazines 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 issue

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 issue from the device or the library, they must do it from the Magazines collection.

... Collections - Kobo Shelf relationshipIf a Kobo issue 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 15: Reading Life - Collections - Magazines_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 15Reading Life - Collections - MagazinesVersion: 1.0 | Published: August 01, 2013 | Created By: Shanak Rahman ([email protected])

PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Magazine States & Selected State Options

Purchased issue - secondary options

See Magazine Details

Remove Issue

Add to collection

.. Tap behaviour for secondary options

See Subscription Details: launch subscription overview in slide outRemove Issue: Experience shown on page: "Magazine - Selective Sync - Remove issue"Add to collection: Launch pin dialog

May 2013

Purchased Magazine - In progress

May 2013

Purchased Magazine - Not Opened

May 2013

Purchased Magazine - Not Downloaded

Purchased Magazine - Finished

May 2013

Purchased issue - secondary options

See Magazine Details

Remove Issue

Add to collection

Purchased issue - secondary options

See Magazine Details

Remove Issue

Add to collection

Purchased issue - secondary options

See Magazine Details

Remove Issue

Add to collection


Recommended