Reading Life - Collections - Pinned Items

_experience the commitmentTM

Reading Life - Collections - Pinned ItemsTablet Wireframes

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

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 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])

21

20

19

18

17

16

15

14

13

12

11

10

9

8

7

6

5

4

3Change Log

Reading Life - Full Home Experience

Introduction to Pinned Items

Pinned Items - URLs from Browser

Pinned Items - URLs from Third Party Apps & Generic Pins

Pinned Items - Books & Magazines

Pinned Items - Music, Videos, Images

Drag & Drop - Pinned Items

Drag & Drop - Apps

Drag & Drop - Collections

Apps Bars - Rules for Dragging/Dropping

Apps Bars - Rules for Dropping Apps

Drag&Merge + Drag&Drop

Deleting Items

Resizing - Intoduction

Resizing - Case 1

Resizing - Case 2

Resizing - Case 3

Resizing Rules




Change LogPAGE /SECTION

VERSION 1.0-1.1

Separated Pinned Items into a separate document. 1.0




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Reading Life - Full Home Experience

Noitification Bar

Tap here to create a collection

1 Custom Collection - Pinned ItemsPinned items live inside of collections. They are the items which collections are designed to hold.

Smart collections, like Books, Magazines and Pocket, pin items automatically based on a service (Kobo, or Pocket). In custom collections, however, users are the ones pinning and collecting items.

This document contains all requirements for pinned items, including the various types of pinned items and all interactions associated with them.

Books

12 items

Magazine

9 Items

Pocket9 Item

s

Social8 Item

s

1

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 TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Introduction to Pinned Items

Noitification Bar 1 This is a custom collectionCollections are a grouping mechanism that users can utilize to save and organize various media types, including apps, books, videos, websites and more. Users can create as many collections as they wish and organize them as they please.

Requirements for custom collections themselves items are found in the following document: Titan - Custom Collections.pdf

Tap here to create a

collection2

Renovations

92 Items

Hom

e

1

2 Pinned ItemsUsers can add various types of pinned items to custom containers. They can manipulate these pinned items in various ways as well (move to organize, resize, delete, etc).

This document contains all requirements for pinned items, including the various types of pinned items and all interactions associated with them.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned Items - URLs from Browser

Case 1: Facebook OpenGraph tags available

Facebook OG Title meta tag, spanning as many lines as needed

domainURL.com

Case 3: Take screenshotCase 2: Social tags unavailable. Scrape page for thumbnail

Website title metatag, spanning as many lines as needed

domainURL.com

domainURL.com

1

1 Pull the best image possibleIf Facebook OG doesn't work, look for a twitter image tag instead.

2 Pull the best image possibleIf social metatags aren't available, scrape the page for the best possible representative image instead.

2

3 Use browser screenshot if all else fails. If all else fails, lets resort to taking a screenshot of the webpage. We will take out the title due to space constraints.

3




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned Items - URLs from Third Party Apps & Generic Pins

Case 1: Facebook OpenGraph tags available

Facebook OG Title meta tag, spanning as many lines as needed

domainURL.com

Case 2: Social tags unavailable. Scrape page for thumbnail

Website title metatag, spanning as many lines as needed

domainURL.com

Case 3: No images available.

At its least, lets try to pull the website title tag At its least, lets try to pull the website title tag

domainURL.com

If there is a description tag available, lets display that here If there is a description tag available, lets display that here If there is a description tag available, lets display that here If there is a description tag available, lets display that here

General Pin & Offline pins

http://mumbojumbourlmumbo ursl/mumbojumbourlmumbo ursl/mumbojumbourlmumbo ursl/mumbojumbourlmumbo

/mumbojumbourlmumbo.com

1

1 Pull the best image possibleIf Facebook OG doesn't work, look for a twitter image tag instead.

2 Pull the best image possibleIf social metatags aren't available, scrape the page for the best possible representative image instead.

2

3 Use favricon, title, and description We cannot take screenshots in any app other than the browser. Thus, lets try to pull the favricon, title and description metatags and use them to populate the pinned item.

Resizing: As the user resizes this item, we show more/less text accordingly.

3

Third Party App shares URL: Facebook OpenGraph tags available

4 If all else fails, or if user is offline...Pin whatever is shared through the shared intent. If its a combination of text and urls, open the URL through the browser. Also design is to see if we want to use a generic pin icon like Arc.


Generic pinned item

The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets

The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here

5 Generic pins for non-URLsIf you have a third party app that has the share intent, and they are sharing something other than a URL (text, for ex), use this generic pin template.


4

5




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned Items - Books & Magazines

Book in Library Non-purchased book

$8.99

Preview of a book Purchased Magazine - Stack

Purchased Magazine - Issue

Non-purchased magazine issue

$8.99

Non-purchased magazine subscription

$8.99/monthApr 201314 issues

"Shared text goes here, shared text goes here Shared text goes here, shared text goes here Shared text goes here, shared text goes here Shared text goes here, shared text goes here…"

Chapter Name Chapter Name

Pinning text from Kobo

1 Pinned text from KoboWe want to show a small screenshot of the book itself. Users should be able to resize the pinned item to show/hide more text.

1




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Pinned Items - Music, Videos, Images

Images

Music - Albums

Artist NameAlbum Name

Artist Name - Album Name can span several lines.

Song Name Song Name

Music - Songs

Title of the video can span a total of two lines…

youtube.com

Video - from Youtube

Title of the video can span a total of two lines…

Supplementary title if available

Video - from somewhere else

1 Songs cannot be resizedMost pinned items can be resized. Songs however are locked into the default size.

1




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Drag & Drop - Pinned Items

Renovations

1 User presses on item and holds User can now move the item. Yellow labelling represent possible destinations.

Destinations:

1 Parent collectionsDrag and drop: Places item into the parent. View remains on current collection

Drag and hold: View animates into the targeted collection & user still has control over the item to place where they please.

Noitification Bar

House

92 Items

1

1


collection

Custom

Sub collection24 item

s

6

32

4

5

2 In between pinned itemsUser should be able place the item between other objects. Neighbouring pinned items will move accordingly.

3 Another pinned item - Create collectionIf you drag and drop onto another item, a collection is created. Timing is similar to collections 1.0. The new collection will be placed to the end of the collection list.

The naming dialog instantly appears and once user the user names the collection, it is created at the end of the collection list. The view scrolls over and shows the newly created collection if necessary.

5 Sub-collectionDrag and drop: Places item into the collection. View remains the same.

Drag and hold: View animates into the targeted collection.

6 Shortcut to create collectionDragging an item here should prompt the create collection flow. User can easily create a collection by dragging and dropping into this area. The newly created collection will start with just that one item inside of it.

4 An App - Create collectionCreates a collection that is placed at the end of the collection list on the right hand side.

Create collection flow should be followed.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Drag & Drop - Apps

1 User presses on app and holds User can be either coming from the apps drawer, or they could be moving an already pinned app.

Destinations:

Noitification Bar

House

92 Items


collection

Custom


s

2

3

2 In between pinned items or open spaceThis will create a new app row in that location. Items will move aside accordingly.

3 App BarApp bars hold 6 apps. If there is room in the app bar, place the app inside the app bar. If there is no room in the app bar, create another app bar just to the right with the one app in it.

2

1

1 Drag and Drop for apps inherit most of the same rulesThe exceptions are outlined on this page.

Renovations

1




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Drag & Drop - Collections

Renovations

1 User presses on collection and holds User can now move the pinned collection

Destinations:

Noitification Bar

House

92 Items


collection

Custom


s

23

2 Pinned Items areaUsers aren't allowed to pin collections in this area. If the user attempts to do so, move the collection to the left most position.

3 Sub-collectionDrag and drop: Places item into the collection. View remains the same.

Drag and hold: View animates into the targeted collection.

1

1 Parent collectionsDrag and drop: Places item into the parent. View remains on current collection

Drag and hold: View animates into the targeted collection & user still has control over the item to place where they please.

Photos10 item

s

1

3

4

4 Before/after sub-collectionUser can reorder the sub-collections to how they please.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Apps Bars - Rules for Dragging/Dropping

Noitification Bar... Single apps & App Bars

If a user is dragging a single app over an app bar, they can ONLY place it inside of the app bar (cannot create a collection by merging the two)

Renovations

... Pinned items and App BarsDragging any pinned item (not an app) over an app bar will allow the user to merge and create a collection. The opposite is true as well.

... App Bars and App BarsDragging App Bar 1 onto App Bar 2 will allow the user to drop the apps in App Bar 1 into App Bar 2 (the two app bars become merged).

The dropped apps will keep the same order and simply be placed at the end of the list.

The merge animation includes the following:• The app bar enlarge if necessary. • The shadows of the dragged apps will form to

show where the apps would go if the user were to release.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Apps Bars - Rules for Dropping Apps

1 App placement orderingThe numbers represent the position names.

2 All app bar arrangementsFollowing 5 app bars show all the arrangements for app bars. For two apps, the only possible arrangement is for the two apps to go into positions 2 and 3. Dropping an app to the top or bottom of the centered app(s) will determine which position it will go into.

For three apps, the positions are 2,3,4, and so on. The shadows should represent that.

2

3

4

1

5

1 2




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Drag&Merge + Drag&Drop

Pinned Item

App

Create collection

Drag

App Bar App Bar

Merge Target

Drop app in to App Bar

Create collection

Result

Pinned Item

App Bar

Create collectionPinned Item

App

Create collection

Pinned ItemApp Bar

App Bar

Merge app bars

Pinned Item

BreadcrumbPinned Item

moved into target breadcrumb

Pinned Item

Pinned Item moved into target

collectioncollectionPinned Item

BreadcrumbAppApp bar moved

into target breadcrumb

collectionApp App moved into target collection

BreadcrumbApp BarApp bar moved

into target breadcrumb

Drop Target

App Bar

Drag

collectionApp bar moved

into target collection

Result

Time

1 23

4

1 User drags item over merge target

2 User drops item, before merge cue - Item returns to original location

3 Merge cue activates after ###ms. Merge target animates to a visual cue for collection creation

4 User drops item, creates sub collection with target item. collection scrolls to the location of the newly created collection.

Time

1 2 45

63

1 User drags item over drop target

2 User drops item, before drop cue - Item returns to original location

3 Drop cue activates after ###ms. Drop target animates to a visual cue for collection creation

4 User drops item, moves item into the new target location, in the first available location.

5 View animates to the target location after ###ms (ex. if the target is a sub collection, that collection is expanded into view, and user can place the item where they like)

6 User can drop the item to wherever they please.

Drag & Merge Options

Drag & Drop Options

Drag & Drop Interaction Timeline

Drag & Merge Interaction TimelineNote: We should be inheriting rules from

Android to differentiate a drag&merge from moving aside pinned items. Once we detect

that a user wishes to merge, we should follow the timeline stated on this page.

The reason for the slight delay in after a drag and merge is detected is to improve

usability: With the ability to merge large and small items alike, the possibility of

mistakingly merging two items together is high - hence the time buffer.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Deleting Items

1 User presses on item and holds User can now move the item. Yellow labelling represent possible destinations.

Noitification Bar

House

92 Items

1


collection

Custom


s

1 Delete BarWhen a user is dragging and dropping any moveable item, the remove bar comes down from the top. Drag and drop here will delete the item (Inherit collections 1.0 rules for deleting. Ex. deleting collections will prompt a dialog).

This bar will be a light overlay that shows only if an item is currently being moved.

Renovations

1

Remove




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Resizing - Intoduction

House

92 Items

1

3

3 User drops item, same location. Resize mode activatedThe item is still transparent. Resize handles show around the item

1 User long presses on an image.

2The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets

The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here

Resizing handles - Item that needs to

maintain aspect ratio

Resizing handles - Item that does not need to maintain

aspect ratio

4

5

2 Item becomes larger and transparentUser drops the image without moving it to a new location

4 Pinned items with images have handles on the cornersItems that respect the aspect ratio while resizing (items with images) will have handles on the corners. The user can still grab onto any edge.

5 Pinned items with w/o images have handles on the sidesItems that do not respect the aspect ratio while resizing (items w/o images and widgets) will have handles on the sides. These are items that can strictly resize horizontally or vertically.

Activating resize mode




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Resizing - Case 1

House

92 Items

2

36

1

4

7

4 Target shadow shows where the item will be placedIf the user were to drop the item, the shadow represents where the actual item would go. As such, items should move accordingly as the shadow grows/shrinks.

1 User long presses, activates resize mode.

2 User starts dragging from bottom right cornerAs soon as the resizing starts, the resizing outline and handles disappear. The target shadow of the item however should now be visible underneath the image.

3 User drags continually resizes. The transparent image should follow the users touch.

5

5 Adjacent image moves along with the shadowAs the shadow grows, the image is pushed aside to the right accordingly,

6 User enlarges item past the 594px thresholdAfter the user makes the item large enough to be placed in the middle, the shadow moves to the middle, all images are moved aside as a result.

7 Bottom image moved aside as a result of the larger resized item. As the image crosses the threshold, the target shadow updates to show that the item will now be placed in the middle, and any items in the way will move aside to the right accordingly.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Resizing - Case 2

2

1

3

5

4

7

4 Target shadow shows where the item will be placedIf the user were to drop the item, the shadow represents where the actual item would go. Because all items are stacked to the left, the shadow actually grows to the right (pushing any items aside).

1 User long presses, activates resize mode.

2 User starts dragging from bottom left cornerAs soon as the resizing starts, the resizing outline and handles disappear. The target shadow of the item however should now be visible underneath the image.

3 User drags continually resizes. The transparent image should follow the users touch. Notice that although the user is dragging the corner over other items, the shadow still dictates where the item will be placed. Thus no items are moved just yet.

5 User enlarges item past the 594px thresholdAfter the user makes the item large enough to be placed in the middle, the shadow moves to the middle, all images are moved aside as a result.

7 Bottom image moved aside as a result of the larger resized item. As the image crosses the threshold, the target shadow updates to show that the item will now be placed in the middle, and any items in the way will move aside to the right accordingly.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Resizing - Case 3

3

1

2

4

5

3 Images to the right move in, fill emptied space. As the target shadow gets smaller, neighbouring items fill any emptied space.

1 User starts dragging from bottom right cornerAs soon as the resizing starts, the resizing outline and handles disappear. The target shadow of the item however should now be visible underneath the image.

2 User drags continually resizes down. The transparent image should follow the users touch. Notice that although the user is dragging the corner over other items, the shadow still dictates where the item will be placed. Thus no items are moved just yet.

4 User shrinks item past the 594px thresholdAfter the user makes the item small enough to be placed on either side, the shadow moves to the top, all images are moved aside as a result.

If the user is resizing from the bottom-up then the resulting smaller image gets placed at the top. If the user resizes from top-bottom then the opposite occurs.

5 Neighbouring items fill emptied space.




PAGE TITLE:

USER STORY:

HIERARCHY:

WIREFRAME

Resizing Rules

Song

Widgets

Video

Pinned Text

Website w/ Image

Kobo Book

Website - No Image

Album

Pinned Item

Images

Kobo Magazine

Text from Kobo

Other

Video image increases by height/width, metadata by width

only

300 px width

Default Size

Other

Aspect Ratio

Aspect Ratio

Horizontally/vertically

Limited by screen height

Spec is maximum default size. If content does not fill max default size, card is shorter in height

(enough to show full content)

Album image

Album image, artist, song name

Book cover, progress bar



Specified by widget

Aspect Ratio

Defined in spec

Website title, description, URL

Limited by screen heightDefined in spec

Defined in spec

Image & Text

No resizing

Text only (small icon)

Text icon, text

Image & Text

Defined in spec

300 px width

300 px widthImage onlyBook cover increases by

height/width, progress by width only

Max Size


Default Size

Specified by widget

Max reached when all available information is shown

Specified by widget

Image only

2 lines for title, one line for URL

N/A

Image

Video image, 2 lines for title, one for

source

Book cover increases by height/width, progress by width

only

Aspect Ratio



300 px width Aspect Ratio

300 px width



Type

N/A

Defined in specImage only

Defined in spec

Composition

Only image resizes, text area increases in width only

Image only


Default Size

300 px width

Defined in spec

Aspect Ratio

Limited by screen height Aspect Ratio

Aspect Ratio

Resize Notes


Min Size Resize Type

Book cover, progress bar

Aspect Ratio


Text icon, text


Specified by widget

Default Size

Date post:	30-Apr-2017
Category:	Documents
Upload:	shanak-rahman
View:	221 times
Download:	1 times

Reading Life - Collections - Pinned Items

Documents