first time usage - mozilla...2012/08/06 · document detailing ui specifications for first time...

First time usage OWD projectV8.0

Author: Ayman MaatDate: 07.08.2012

01

Name Version Date Notes

Version control

Rafael Rebolleda 1.0 21.06.12 initial document produced

Marco Cimatti 2.0 28.06.12

Ayman Maat 3.0 06.07.12 flow revised and rearticulated

Ayman Maat 4.0 10.07.12 flow revised

Ayman Maat 5.0 10.07.12 updates to screens

Ayman Maat 6.0 17.07.12 refer to release note

Ayman Maat 7.0 01.08.12 updates to wireframes and flows

Ayman Maat 8.0 07.08.12 refer to release note

Purpose of documentDocument detailing UI specifications for first time usage experience section of the OWD project

- FTE flow revised based on feedback from Ernesto (TEF ID). OWD Accounts situation still TBD.- FTE flow revised based on feedback from Larissa (MOZ), added Do Not Track, Terms & Conditions.

02

Table of ContentsFirst Time Usage Flow

First Time Usage Wireframes

Splash screen

Language selection

Select network

Network Search

Network password

Set date and time

Date picker

Time picker

Country picker

Import contacts

About firefox phone

Performance monitoring

Do Not track

Welcome

5

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

03

Release noteWireframe pack lives in:

TF Dropbox : OWD_UX_Working/THE NEW WORLD/02_Sprints/9_FTUX/00 wireframes

Mozilla Dropbox : OWD_Moz_share/Mozilla/Sys First Run Experience

Jira : Open Web Device / OWD-1947

Mozilla's wiki : https://wiki.mozilla.org/Gaia/Design/FirstRun

new flows- none

updated flowsFirst Time Usage Wireframes- About firefox phone added

deleted flows- none

new wireframes- About firefox phone- Date picker- Time picker- Country picker

updated wireframesPerformance monitoring- header updated

Do Not track- header updated

Account set up Wireframes- introduction statements to all wireframes updated to clarifiy Telefonica security requirements

- heading text ‘First time user experience ’ replaced with ‘Account set up’. Correction of in typo in wireframe.

Import contacts- annotation updated

deleted wireframes- none

04

First Time UsageFlow

05

Select a network

nextback

WLAN_69connecting...

WLAN_78F.Open

WLAN_SAMBASecure - 80.1x

WLAN_69Secure - WPA2

WLAN_69Open


refesh

OEMPowered by

Firefox

1. Splash screen 3. Select network

next

Español

Português

Deutsch

Français

Flag of country

Flag of country

Flag of country

Flag of country

EnglishFlag of country

Select Language

2. Language selection

If wifi is not selectedallow user to select wifi in phones settings area

Only present isWiFi is detected

SystemCheck for sim

?

SystemCheck for Wifi

?

Logistics notevivo confirmation on zero rate

Vivo inclusion on ‘Hello’ page TBD

Enter SIM PINif SIM found and PIN required

For specification of SIM screens refer to:http://people.mozilla.com/~lco/Settings_B2G/Release_1_Specs/R1_Security_and_Privacy_v2.pdf

HTML5_FirstTimeExperience_20120807_R2S1_V8.0.pdfAugust 07, 2012

HTML5 UX Concepts First Time Experience



First Time Experience : first time usage

0006

Network passwordOptional step if no wifi selected

Set date and timeOptional step

If no SIM found or WIFI selected

4. Import contacts

Prerequisite- Only invite to import contacts from sim if sim card has been detected between steps 1 and 2 AND sim card contains contacts- Only invite to import from facebook if sim card has been detected or the device has been connected to a wifi network- If no sim has been detected and the device has not been connected to a wifi network do not show this interface

If no contacts are importedWhen the user opens the contacts list invite them to import contacts

Only present if SIM and wifi are not present so that user can manually set date and time

5. About Firefox

Date and time

nextback

18th August 2012

1:17 PM

Germany GMT +01:00, (CET)

Set date

Set time

Set Country

Select a network

nextback


WLAN_78F.Open



WLAN_69Open


refesh

keypadrefer to keypad specifications

cancel join

Show password

Enter password for WLAN_78F

skipback

SIM card

Facebook135 contacts imported

Import contacts from

Twitter

User flowGet SIM contacts

User flowGet Facebook contacts

User flowGet Twitter contacts

nextback

Firefox

Firefox is designed by Mozilla, a global community working together to keep the Web open, public, and accessible to all.

About Your Rights

Licensing Information




07

Firefox Privacy Choices

Give Us Feedback

Help Mozilla improve its products by automatically sending performance data. Daily feedback will only be sent when the phone is connected to a Wi-Fi network.

Learn more

Share Performance Data

nextback

"Mozilla values your privacy" message. No more than two lines

6. Performance monitoring 7. Do not track

Do not Track

When you turn on the Do Not Track feature, your device tells every website and app (as well as advertisers and other content providers) that you don't want your behavior tracked

Learn more

Tell websites and apps:

I don't have a preference

Do not track my actions

I allow tracking

nextback



Welcome to your phone!

let's go!

You're ready to enjoy your new phone (obviously some better branded copy will go here)

You can alter the Language, Date / time, Wifi connection and import more contacts in the settings area

8. Cool phone tips8. welcome

Design approachthis will be a simple screen succinctly detailing four cool tips for using the phone:- notifications- extended dock- cost tray- multi tasking






08

First Time UsageWireframes

09

OEMPowered by

Firefox



First time user experience Splash screen

Transitional hello screen as phone is switching on

10

next

Español

Português

Deutsch

Français

Flag of country

Flag of country

Flag of country

Flag of country

EnglishFlag of country

Select Language



First time user experience Language selection

Wireframe illustrating the step where the user selects the language that the phone will operate in

annotation

01 Language list

Top and preselected item in list the language for the country that the phone is sold in

upon tap

Language selected

02 Next button

upon tap

Takes the user to the next step in the set up sequence

01

02

11

Select a network

nextback


WLAN_78F.Open



WLAN_69Open


refeshWireframe detailing the select wifi screen. Only present if network is detected

annotation01 back button

upon tap

take user back to language selection screen. refer to wireframe: ‘Language selection’

02 next button

upon tap

- If no SIM has been activated

- user us taken to wireframe ‘Set time / date’

- if a SIM has been activated and the SIM has contacts

- user is taken to wireframe ‘Import contacts’

- if a SIM has been activated and the SIM has no contacts

- user is taken to wireframe ‘Set up your account’

03 indication that network is secure

04 indication of signal strength

05 network module

- highlight network modules that contain networks that are locked

upon tap

- Wireframe ‘network password’ is opened

- upon submission of password and closing of wireframe ‘network password’ the selected network module moves to the top of the network list.

06 refresh list CTA

upon tap

refreshes the list of available networks. refer to wireframe ‘network search’

07 graphical feedback of network status

only displayed if attempt to connect is made. options are:

- displayed whilst phone is connecting and authenticating the password

- failure to connect

- failure to join

- connected

08 text feedback of network status

- ‘connecting...’ : displayed whilst phone connects with network

- ‘authenticating’ : displayed whilst the password is being authenticated

- ’failure to connect to network’ : displayed when the phone is unable to connect to the network

- ‘failure to join network’ : displayed authentication of password fails

- ’connected’ : displayed when phone has successfully connected with network



First time user experience Select network

01 02

0304

06

05

07

08

!

!

12

Select a network

nextback

refresh

Scanning...



First time user experience Network Search

Wireframe detailing the screen when the phone is scanning for available wifi networks.

annotation

01 Scanning

- During scanning ensure that

- the ‘scanning...’ text is animated whilst scanning is taking place to feed back to the user, in slow situations, that the system is doing something and has not crashed.

- the ‘Back’, ‘Next’ and ‘Refresh’ buttons are inactive or hidden

- if networks are found

- take user to wireframe ‘Select network’

- If no networks are located

- write ‘No networks found’ where ‘Scanning’ is currently written - make the ‘Back’, ‘Next’ and ‘Refresh’ buttons active again or if hidden present them again.

01

13

Select a network

nextback


WLAN_78F.Open



WLAN_69Open


refesh

keypadrefer to keypad specifications

cancel join

Show password

Enter password for WLAN_78F



04

First time user experience Network password

Wireframe detailing the network password dialogue

annotation

01 Cancel CTA

upon tap

discards all input and returns the user to wireframe: ‘Select network’

02 Join CTA

remains inactive until the user has entered text into the password textfield

upon tap

- submits the content of the password textfield for validation

- user taken to wireframe ‘select network’ with the selected network promoted to the to of the list

03 Password textfield

feeds back the text the user has input

04 show password checkbox

- when checked text input is displayed in password textfield

- when unchecked password textfield displays an input character as text for two seconds then converts the text to a circle

05 name of selected network

01 02

03

05

14

Date and time

nextback

18th August 2012

1:17 PM


Set date

Set time

Set Country



First time user experience Set date and time

wireframe detailing interface date, time and time zone selection interface

annotation

01 CTA to set date

upon tap

- opens date picker. refer to wireframe ‘Date picker’

02 CTA to set time

upon tap

- opens time picker. refer to wireframe ‘Time picker’

03 CTA to set country

upon tap

- opens country picker. refer to wireframe ‘Country picker’

04 back button

upon tap

- returns the user to screen that this screen was launched from

05 next button

upon tap

- any alterations to date, time, and country are committed

- user is taken to wireframe :‘Impirt contacts’

05 map of country that is defined under Set Country CTA

01

06

02

03

0504

15

Date and time

nextback

18th August 2012

1:17 PM


Set date

Set time

Set Country

Set date

August 2012

SelectCancel

MON SUNSATFRITHUWEDTUE54321

6 121110987

13 1917161514

20 262524232221

27 31302928

18



First time user experience Date picker

Wireframe detailing the interface through with the end user selects the date

annotation

01 CTA to change to previous a month

upon tap

calendar view moved to the previous month

02 CTA to change to next a month

upon tap

calendar view moved to the next month

03 selected day

04 cancel button

upon tap

- closes Set Date interface and returns the user to wireframe ‘Set date and time’

- any alterations to the date made in the Set Date interface are discarded

05 select button

- closes Set Date interface and returns the user to wireframe ‘Set date and time’

- any alterations to the date made in the Set Date interface are committed

06 unselected day

upon tap

- Day selected

- previously selected day is deselected

01 02

0306

04 05

16

Date and time

nextback

18th August 2012

1:17 PM


Set date

Set time

Set Country

Set time

SelectCancel

PM588

0010

: AM599



First time user experience Time picker

Wireframe detailing the interface through with the end user selects the time

annotation

01 affordance for scrolling through the list in descending order

upon tap

- user steps through the list one item at a time.

upon press and hold

- user scrolls through the list

when end of list is reached

- list acts as a continuous carousel and continues scrolling from the end of the list

02 affordance for scrolling through the list in ascending order

upon tap

- user steps through the list one item at a time.

upon press and hold

- user scrolls through the list


- list acts as a continuous carousel and continues scrolling from the beginning of the list

02 content of list

upon swipe up or down

- user scrolls through the list the speed of which is in relation to the force of the swipe

upon drag up or down

- user scrolls through the list the speed of which is in relation to the force of the drag


- list acts as a continuous carousel and continues scrolling from the beginning or end of the list depending on direction of swipe

04 cancel button

upon tap

- closes Set Time interface and returns the user to wireframe ‘Set date and time’

- any alterations to the time made in the Set Time interface are discarded

05 select button

- closes Set Time interface and returns the user to wireframe ‘Set date and time’

- any alterations to the time made in the Set Time interface are committed

01

03

02

04 05

17

Date and time

nextback

18th August 2012

1:17 PM


Set date

Set time

Set Country

Select a country

Flag of country

Flag of country

Flag of country

Flag of country

Flag of country

Flag of country

Flag of country

Flag of country


Ghana GMT +00:00, (GMT)

Greece GMT +02:00, (EET)

Grenada GMT −04:00, (AST)

Guatemala GMT −06:00, (CST)

Guinea GMT +00:00, (GMT)

Guinea-Bissau GMT +00:00, (GMT)

Guyana GMT −04:00, (AST)

SelectCancel



First time user experience Country picker

Wireframe detailing the interface through with the end user selects the a country

annotation

01 Module indicating country that is currently selected

02 Module indicating country that is not currently selected

upon tap

- country selected

03 Cancel button

upon tap

close dialogue and return to wireframe : ‘Set date and time’ in the same state the page was in when ‘Country picker’ was launched

04 Select button

upon tap

- dialogue closed and user is return to wireframe : ‘Set date and time’ with selected country populating the set country field and map of selected country displayed in background

05 county flag

06 county name

Visual Design requirement

- longest string in English should be ‘Democratic Republic of the Congo’ 32 characters including white space.

- check maximum string lengths in other target languages

07 countries time in relation to GMT

08 countries time zone

general interactionupon scrolling : when the boundaries of the list are reached

when the user drags vertically the list behaves elastically with the user being able to move the content but it snapping back to its original position when the user releases. Refer to the contact list of the iPhone for behavioural reference

01

02

04

06

07 08

03

05

18

skipback

SIM card

Facebook135 contacts imported

Import contacts from

Twitter



First time user experience Import contacts

Wireframe detailing the interface through which contacts will be imported.- Only invite to import contacts from sim if sim card has been detected AND sim card contains contacts- Only invite to import from facebook if sim card has been detected or the device has been connected to a wifi network- If no sim has been detected and the device has not been connected to a wifi network do not show this interface- If no contacts are imported when the user opens the contacts list invite them to import contacts

annotation

01 Back button

upon tap

- user is returned to screen they were viewing before this one

02 Skip button

- if user has not imported any contacts this buttons label is ‘skip’

- if user has imported contacts this buttons label is ‘done’

upon tap

take user to wireframe ‘performance monitoring’

03 entry point to import contacts from a source when contacts have been imported from that source

feedback

- number of contacts imported

- indication that source has been used

upon tap

- user starts import contacts flow. refer to import contacts wireframe document

04 entry point to import contacts from a source when no contacts have been imported from that source yet (irrespective of whether or not the user has already tapped through to the source)

upon tap

- user starts import contacts flow. refer to import contacts wireframe document

05 import from SIM

upon tap

TBD - handled by Casey

03

05

04

01 02

19

nextback

Firefox

Firefox is designed by Mozilla, a global community working together to keep the Web open, public, and accessible to all.

About Your Rights

Licensing Information



First time user experience About firefox phone

Wireframe detailing the about Firefox page

annotation

01 Your rights link

upon tap

- opens the About:Rights internal page

02 Licensing information link

upon tap

- opens the About:License internal page

03 back button

upon tap

takes the user back to the previous page

04 next button

upon tap

takes the user to wireframe ‘Performance monitoring’

01

02

03 04

20




Give Us Feedback

Help Mozilla improve its products by automatically sending performance data. Daily feedback will only be sent when the phone is connected to a Wi-Fi network.

Learn more

Share Performance Data

nextback


First time user experience Performance monitoring

Wireframe detailing Mozilla’s performance monitoring request

annotation

01 acceptance check box

upon tap

checkbox gains a tick indicating that the user wishes to share performance data with mozilla

02 back button

upon tap

takes the user back to the previous page

03 next button

upon tap

takes the user to wireframe ‘Do not track’

02 03

01

21



Do not Track

When you turn on the Do Not Track feature, your device tells every website and app (as well as advertisers and other content providers) that you don't want your behavior tracked

Learn more

Tell websites and apps:

I don't have a preference

Do not track my actions

I allow tracking

nextback



First time user experience Do Not track

Wireframe detailing Mozilla’s Do not Track requestDNT is a social mechanism, which means sites have to opt in to supporting it in their code. There is a growing number of companies that recognize it, including Twitter. A header is sent in any communication that the user has with these sites, stating whatever DNT preference the user has.

If the site doesn't support DNT, the header has no effect.

For more information, consult : http://www.mozilla.org/en-US/dnt/

annotation

01 Do not track my actions button

upon tap

the header tells the site that 3rd party sites aren't allowed to collect any information about the user and cannot follow him as he browses or uses apps (because the apps on our phone are all technically web-enabled).

02 I allow tacking button

upon tap

the header tells the site that 3rd party sites can collect info about the user, if they choose to.

03 i don't have a preference button

By default this is selected for the user.

upon tap

the header tells the site that 3rd party sites get to decide whether to collect info about the user or not.

04 back button

upon tap

returns user to previous screen

05 next button

upon tap

- commits users selection in annotation 01, 02 or 03- takes the user to wireframe: ‘Welcome’

04 05

02

03

01

22



First time user experience Welcome

Wireframe detailing welcome screen that is presented once the user has completed the setup sequence

annotation

01 what

upon tap

why

Welcome to your phone!

let's go!

You're ready to enjoy your new phone (obviously some better branded copy will go here)

You can alter the Language, Date / time, Wifi connection and import more contacts in the settings area

23

Thank you

Ayman [email protected]

24

first time usage - mozilla...2012/08/06 · document detailing ui specifications for first time...

Documents