Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and...

13
Telefonica Digital. May 2012. Confidential. Please do not share Settings - title? TEF Recommendations.. 1

Transcript of Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and...

Page 1: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

Telefonica Digital. May 2012. Confidential. Please do not share

Settings - title?TEF Recommendations..

1

Page 2: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

movistar 3G 9:42

10:35 am

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

FacebookRebecca Watson Nice pictures... f

9:40 amPathRebecca Jenkins posted a picture P

PathRebecca Jenkins posted a picture P

Notifications

WiFiGO TO

SETTINGS DATA BLUETOOTH POWERWiFiGO TO

SETTINGSDATA BLUETOOTH POWER

OFF

OFF

ON

ON

Network

Device Settings

movistar 3G 9:42

Settings

Airplane Mode

Wifi Network: WLAN_87

Power Save Mode

Bluetooth: Max’s Computer

Sounds

GPS

Carrier: movistar

Advanced Data Settings

Data

Access to General SettingsSettings

Settings AccessAccessed both from the Quick Settings area above the Notification Center, and from an Settings App icon in the grid.

Settings app access in Quick Settings

movistar 3G 9:42

Settings

Settings in application grid

General Settings view

MOZ to spec settings app

TEFcustomization

edit

BOTHBOTH

10:00 amWhat’s AppRebecca Watson Nice pictures...

10:00 amWhat’s AppRebecca Watson Nice pictures...

10:00 amWhat’s AppRebecca Watson Nice pictures...

Page 3: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

movistar 3G 9:42

10:35 am

Gloria Lin Missed Call

10:20 am

Gloria Lin Missed Call

Gloria Lin Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones How was the date last...

Hector Ibarra Re: lunch time

9:45 amGloria Lin Re: lunch time

FacebookRebecca Watson Nice pictures... f

9:40 amPathRebecca Jenkins posted a picture P

PathRebecca Jenkins posted a picture P

Notifications

WiFiOFF OFF OFF ON GO TO

SETTINGSDATA BLUETOOTH POWER

Power Save ON GPS, Data, WiFi, Bluetooth are disabled

Mode Change BehaviorSettings

Power Save ModePower save mode turns multiple settings off simultaneously to extend the life of the battery:Data OFFWiFi OFFBluetooth OFFGPS OFF

When a user turns mode ON1. All the above settings automatically move to the OFF position and are greyed out.2. A passive notification appears with setting implications in the Status Bar. 3. When passive notification disappears, the network connectivity, data icon, wifi icon, bluetooth icon all disappear and Battery line visual is altered.

When a user turns mode OFFAll above settings except Bluetooth and Data move to the ON position.

1

2

1

2

edit

10:00 amWhat’s AppRebecca Watson Nice pictures...

10:00 amWhat’s AppRebecca Watson Nice pictures...

10:00 amWhat’s AppRebecca Watson Nice pictures...

Settings

movistar 3G 9:42

OFF

OFF

OFF

ON

Network

Device Settings

Airplane Mode ON

Calls, GPS, Data, WiFi, Bluetooth are disabled

Airplane Mode

Wifi Network: OFF

Power Save Mode

Bluetooth: OFF

Sounds

GPS

Carrier: OFF

Advanced Data Settings

Data

Airplane ModeAirplane Mode turns off the following settings simultaneously:Data OFFWiFi OFFBluetooth OFFGPS OFFCarrier Connection OFF

When a user turns mode ON 1. All the above settings automatically move to the OFF position and are greyed out, except WiFi and Bluetooth.2. A passive notification appears with setting implications in the Status Bar. 3. When passive notification disappears, the network connectivity, data icon, wifi icon, bluetooth icon all disappear and Battery line visual is altered.

When a user turns mode OFF All above settings except Bluetooth and Data move to the ON position. The greyed out settings are viewed normally.

MOZ to spec settings app view

Page 4: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 20124

QuickSettings

WiFi On/Off

ChooseNetworkfrom List

On

system searchingfor available& recognizednetworks

foundrecognizednetwork &connected

recognizednetwork not found

cancel

secure networkselected

correct & connected

enter password

cancel

open networkselected

& connected

incorrect passive notification

Flow for Wifi Connectionfrom pop-up windowWiFi Setting

Page 5: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

List Window & Connection Process WindowWiFi ON/OFF

5

System searching for available networks

List of available networksordered by connection strengths.

Device connecting to network

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

Available Networks

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

Available Networks

Cancel

pazienza

WLAN_SD40

Network 01

WLAN_BD90

Jim’s living room

Available Networks

Cancel

pazienza

WLAN_SD40

Network 01

WLAN_BD90

Jim’s living room

Page 6: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

Password EntryWiFi ON/OFF

6

Network Password EntryKeyboard slides in from below

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 join

Jim’s living roomPassword

Show Password

JoinCancel

Page 7: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

List BehaviorWiFi ON/OFF

7

Short list - 1 item

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

Available Networks

Cancel

Network 01

Long list - anything more makes list scrollable to reach it.

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

Available Networks

Cancel

pazienza

Network 01

WLAN_BD90

WLAN_rd56

red

net 3

network blue

bedroom

network jane

Page 8: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

No

When Data Off and user enters App that requires data.

Flow for App AccessData Setting

8

When Data On and user enters App with no coverage.

Passive notification about data off and offline content.

In AppHomescreen

User refreshesor selects action that needs refreshing

Alertnotification to turn data on.

YesAppconnects &refreshes content

In App In App

In AppHomescreen

Passive notification about data connection failure and offline content.

system tries to connect but data is off.

User launchesApp

system tries to connect but finds no connectionavailable.

User launchesApp

User refreshesor selects action that needs refreshing

Page 9: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

refresh list

9

Flow to Pair Devicesfrom pop-up windowBluetooth Setting

QuickSettings

Bluetooth On/Off

On

system makes device discoverable and searches for other bluetooth enabled devices

Alert notification

Pair with this device? Code to verify on-screen.Cancel/OK

deviceselectedto pair

If successful

Cancel

other devicemust accept pairing

OK

Passive notification ofno pairing

Device List with Bluetoothactive

Cancel

If NOT successful

Page 10: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 201210

Flow to Unpair Devicesfrom Settings MenuBluetooth Setting

Device List with Bluetoothactive

Alert notification

Unpair with this device?

Cancel/OK

deviceselectedto unpair

Device List with unpaired devicemarked as such.

Cancel

OK

BluetoothSettingGeneral

Settings

Page 11: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

Devices

Cancel

Bert’s iPhonepaired

GL-2345pair with this device

Jane’s MacBookpair with this device

silvi0108pair with this device

Galaxy 2spaired

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

List Window & Connection Process WindowBluetooth ON/OFF

11

System searching for available devices

List of available devicesUser selects one Connection processing

Devices

Devices

Cancel

Bert’s iPhonepaired

GL-2345pair with this device

Jane’s MacBookpair with this device

silvi0108pair with this device

Galaxy 2spaired

Page 12: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

HTML5 UX Concepts Settings & Notification Center Settings and Notification Center [email protected], May 10, 2012

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

List Window & Connection Process WindowBluetooth ON/OFF

12

Pairing Request

Cancel

GL-2345

Pairing Request Make sure that PIN 3711 matches the PIN that GL-2345displays.

OK

WiFiGO TO

SETTINGSDATA BLUETOOTH POWER

movistar 3G 9:42

10:35 am

edit

Gloria Lin

Missed Call

10:20 am

Gloria Lin

Missed Call

Gloria Lin

Missed Call

9:20 am

8:20 am

8:00 am

10:00 am

9:58 am

Jim Jones

How was the date last...

Hector Ibarra

Re: lunch time

9:45 amGloria Lin

Re: lunch time

9:40 am

Notifications

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

What’s AppRebecca Watson Nice pictures...

GL-2345 Paring Request Failed

Devices

Cancel

Bert’s iPhonepaired

GL-2345pair with this device

Jane’s MacBookpair with this device

silvi0108pair with this device

Galaxy 2spaired

Passive Notificationof Failed Pairing

Page 13: Settings - title?€¦ · HTML5 UX Concepts Settings & Notification Center Settings and Notification Center 20120510.pdf marcoc@tid.es, May 10, 2012 Password Entry WiFi ON/OFF 6

Telefonica Digital. May 2012. Confidential. Please do not share13