kobometroapp win8controls signin v3

8/12/2019 KoboMetroApp Win8Controls SignIn V3

1/14

FILE NAMEShanak RahmanKoboMetroApp_Beta.grafe

CREATORWed Jan 18 2012MODIFICATION DATE

Kobo Metro App - Win8 Controls & Sign In

DESCRIPTION Windows 8 Controls/Splash Page/Sign In

VERSION HISTORYVersion Date Notes

1 November 15, 2011

Updated application start architecture Search experience App bar sta tes dened Book cover states dened Sign in pages - Error copy, error states (in-line & general), external

links

Table of Contents

1.0 Architecture of Application Start

2.0 Kobo Metro Not Signed In

2.1 Kobo Metro Tiles - Signed In

3.0 Application Start Experience - Authenticated

3.1 Application Loading Experience Unauthenticated

3.2 Sign In Screen + Error Messaging

3.3 Sign In screen - Interaction + External Links

4.0 Global Charms

4.1 Search Experience

4.2 Search Behaviour

2 January 9, 2011

Updated architecture to reect authentication only access into the app Updated to include Beta-only requirements Updated application start ow Pin To Start icon only appears when a book is selected Updated Create an Account ow (breaks to web)

4.3 App Bar States

4.4 Book Cover States

3 January 18, 2011 Copy approved by Kobo copywriters All copy changes are called out in this document (look for red boxes)


2/14

Kobo Metro App1.0 Architecture of Application Start

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

User Launches appthrough App Tile

Is user signed in?

Resume saved

state

Does the applicationhave a saved state? Homepage

Sign in JumpPage

Launch defaultbrowser

Sign In Page

Create Account

Sign In

Yes

No

User signs out

January 9 - Application Start Architecture

Introduction1. The Beta application will only allow users to sign in with existing accounts - users that need to create a new account

will be forwarded to the create account page on our website (through a default browswer)2. Signing out of the application will take the user back to the sign in page


3/14

Kobo Metro App2.0 Kobo Metro Tiles - Not Signed In

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

Tile Name

!"#$%"&$'()*$

!"#$+,-).$'()*$

Notes:1. The non-signed in state will not rotate into different tiles. It will be a

stagnant tile which highlights our brand2. This is our default tile

Notes:1. The smaller tile does not rotate into different tiles. It will be a

stagnant tile which highlights our brand

Template Wireframe Kobo Creative Notes

Introduction1. Application tiles have two states - signed in and not signed in2. When the user is not signed in, the tiles do NOT rotate between templates3. The smaller tile does not rotate, in either state4. Tiles do rotate between templates - however each tile template has rules on whether or not they can be shown (for ex.

a tile that shows 5 book covers requires the user to have 5 books in their library at a minimum5. Each time a specic tile template is shown, it should rotate between different books (if possible)6. We have made assumptions on what is possible to implement and are looking forward to working with the devs to nd

solutions to limitations found while working on this7. Peek tiles are templates that are essentially two tiles in one (ie. a full image is the rst tile, and then it rotates to a

second tile that explains that image

Template listings: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notications.tiletemplatetype.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspx


4/14

Kobo Metro App2.1 Kobo Metro Tiles - Signed In

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

!"#$%"&$'()*$

!"#$+,-).$'()*$

!"#$%"&$'()*$/0&!$12

!"#$%"&$3$$4'()*$56

!"#$%"&$3$$4'()*$78##$92"8056

Notes:1. The smaller tile does not rotate into different tiles. It will be a

stagnant tile which highlights our brand

Notes:1. The brand-only tile is one of the templates that rotates through

Notes:1. Image 1 = a book in the user's library2. Text Field 1 = the book title - truncated so that it ts on one line3. Author = There isn't a template with a text eld 2, however if we can gure

out a way to get the author in, we denitely want to. It's optional though4. Logo: We've seen this implemented on other application tiles - we would

want to implement this as well.

Notes:1. This is a peek tile, it will rotate between states back to back2. Image1 = Book cover of a book that is opened in the user's library (we should rotate between books

in a specic order - the order should be recently opened3. Text Field 1 = Book title4. Text Field 2 = Percentage read through that book5. Rotate Rules: Rotate through opened book by the following order: date last opened6. Inclusion rule: User must have at least 1 book opened in their library

Notes:1. This is a peek tile, it will rotate between states back to back2. Images - Top 5 books in the book's library appear as a collage in that

order (ordered determined by date last opened/date last added tolibrary

3. Text Fields - refer to the titles of the corresponding books4. Rotate Rules: Rotate the rst 5 books, then the next then the next as it

is ordered according to the rules: date last opened/date last added.5. Inclusion Rule: User must have at least 5 books in their library

Notes:1. Rotate Rules: This tile should select b

random from the users library2. Inclusion Rule: User must have at lea

their library for this tile to work. Doehave to be opened

Rotation Rules:1. Rotate between tiles 2,3,4,52. Tiles 3,4,5 should all alternate betw

covers as per the rules stated3. Tile template should only show if th

rule is met

2

1

3

4

5

Tile Name Template Wireframe Kobo Creative Notes


5/14

Kobo Metro App3.0 Application Start Experience - Authenticated

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

Loading your books...

+:#);< +9.$$0 +:#);< ;9.$$0 > ?"2< #8)&"0*

@8($:)*$

Introduction:1. Splash screen - This is the screen that is used with the "closing door" transition2. A windows 8 spinner will appear with a brief message giving the user feedback that the application is

loading.3. Once the rst 5 lists are loaded, show the homescreen. As the user scrolls on the homescreen itself,

load the other lists on demand.4. The current interaction with books loading into the homescreen is messy - Rather have the books

loaded prior to dropping them into the homepage5. If the Kobo app is suspended, no splash screen is needed - just drop the user into the saved state.


6/14

Kobo Metro App3.1 Application Loading Experience Unauthenticated

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

Sign In

Create an Account

Welcome to Kobo

Click sign in if you have a Kobo account Click Create an Account if you're new to Kobo.

Use your Kobo account

Sign In

Email Address

Password

Forgot your password?

By continuing you conrm that you agree to theTerms of Use .

Create a Kobo Account

Account creation is coming soon! Thisapplication is still in Beta.

Click below to create an account onKobo.com, then re-open the app to sign in.

Create Account

+:#);< +9.$$0 +"*0 "0 A-(: +9.$$0

+"*0 '0 +9.$$0 7.$)2$ /998-02 +9.$$0

Notes1. The beta build will not include account creation2. If the user clicks on the button, forward them to: https://secure.kobobooks.com/PortalSignIn?

redirectUrl=http%3A%2F%2Fwww.kobobooks.com%2F&LoginType=03. Nice to have: Launching the sign in page with the create account radio button activated would be

awesome

Copy EditsJan 18, 2012

Copy EditsJan 18, 2012
https://secure.kobobooks.com/PortalSignIn?redirectUrl=http%3A%2F%2Fwww.kobobooks.com%2F&LoginType=0https://secure.kobobooks.com/PortalSignIn?redirectUrl=http%3A%2F%2Fwww.kobobooks.com%2F&LoginType=0


7/14

Kobo Metro App3.2 Sign In Screen + Error Messaging

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

Password

Sign In to Kobo

Sign In

Email Address

Password


By continuing you conrm that youagree to the Terms of Use .

+"*0 "0 :)*$ > '0 B"0$ C..8.;

This is an inline error

This is an inline error

Sign In to Kobo

Sign In

Email Address

Password


By continuing you conrm that youagree to the Terms of Use .

+"*0 "0 :)*$ > D$0$."9 C..8.

This is a General Error This isa General Error Tsis is aGeneral Error This is aGeneral Error

Error

Type ofError Copy

In-Line Please enter a valid email address.

Field

Email

Error

Email not valid

In-Line Please enter your passwordPassword Password left empty

In-Line Email address is requiredEmail Email left empty

GeneralWe don't recognize the e-mail addresentered. Please check that you entereand try again.

N/A Email/password comboincorrect

C..8. +2)2$; > 78:E

Notes:

1. Two types of errors on the sign in screen: In-line and generic. Some in-line errorsshould be activated through client-side checking, others being server-side.

2. For example, entering a valid email address should be checked on the client. Assoon as the user leaves the eld with an invalid email address, it should activate thein-line error.

3. When landing on this page, the default focus should be on the email address eld. If

the user is on a tablet only, the virtual keyboard should be activated by default.4. Sample interaction of in-eld labels are found in this jquery plugin: http:// fuelyourcoding.com/scripts/ineld/

Email Address

Password

srah

Password

[email protected]

Three shades present in these elds: In eld label - focused: Light Grey In eld label - not focused: Dark Grey User entry: Black

In this case, Email address is in thefocused state, and Password is in the notfocused state

As soon as the user starts typing, the in-eld label disappears, and replaced withblack text

When the user tabs to the next eld, thepassword in eld title dims to a light grey - thiswill give the user feedback that the eld is in editmode.

'02$.)92"80 8F "0>F"$#& #)G$#; )0& 2$12 $02.E

Note: Actual placement of all error messages arespecied in Neil's mocks
http://fuelyourcoding.com/scripts/infield/http://fuelyourcoding.com/scripts/infield/http://fuelyourcoding.com/scripts/infield/


8/14

Kobo Metro App3.3 Sign In screen - Interaction + External Links

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

Sign In to Kobo

Sign In

Email Address

Password


By continuing you conrm that you

agree to the Terms of Use .

Notes:

1. The webstore version of terms-of-use assumes that the sign in page is also from thewebstore - we have a native sign in screen, therefor the back button would not workon that page

2. Activating the website's terms of use page is a quick workaround.

Activate DefaultInternet Browser

Activate DefaultInternet Browser

Notes:

1. The webstore enabled Forgot-your-password is somewhat broken at the moment. Inthe mean time we should let the user go through the process through the website


9/14

K b M A


10/14

Kobo Metro App4.1 Search Experience

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

+$).9< H8G8

+$).9< 7


11/14

Kobo Metro App4.2 Search Behaviour

Wed Jan 18 2012

Creator

Modied

Shanak Rahman

T;$. "; "0 )0 82 ;$#$92; H8G8 F.8( +$).9

kobometroapp win8controls signin v3

Documents