notifications - mozillalong message notiﬁcation if the text message exceeds three lines, it should...

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

Notifications

1

HTML5 UX Concepts Notifications [email protected] May 30, 2012

Types and LocationsNotifications

Full ScreenVery important notification, it interrupts all activity.

AlertInterrupts and requires an action before proceeding.

PassiveAppear and go awayautomatically.

Status BarIcon or status expressed on status bar. Reserved for system related items.

Lock Screen Reserved for app related notifications, they are present until phone is unlocked.This document outlines what should be the

default settings for each type of notification.

00:00

Notification CenterAll app related notifications live in the notification center.

BadgesNumerical update onicons in carousel.Only for app relatednotifications.

see Utility Traydocument for details.

see Status Bar document.

see Lock Screen document.

see Paradigm Home document for details

see Comms App document for details

2


Full ScreenNotifications

Full ScreenVery important notification, it interrupts all activity.

Application Notifications

Incoming Call (not including Voip app calls.)caller name or number, operator if recognizable action: decline / answer

Note: Applications must be able to handleentering and exiting from an incoming call interruption. This means that when a user finishes the call or decides to not answer, they are automatically returned to the app and state they were at when interrupted.

see Comms App document for details

3


BadgesNotifications

BadgesNumerical update onicons in carousel.Only for app relatednotifications.


Social Network app message/event

Email Incoming message

App View New information (eg. Bank app…)

Missed Call

Missed Call from Voip app (ie. Skype)

SMS Message

Calendar Event

see Paradigm Home document for details

4


Lock Screen Notifications

Lock Screen Reserved for app related notifications, they are present until phone is unlocked.Some are full screen or partial screen depending on app type.

00:00

Application NotificationsViewed as Partial Screen

Missed Callcaller name or number, time

SMS Messagesender, time, message content (preview)

Calendar Eventtitle, time, location

Social Network app messagesender & message preview, time

Email Incoming messagesender & message preview, time

App View New information (eg. Bank app…)sender, info preview

Call from Voip app (ie. Skype)caller name or number

Alarmalarm time (ringing & vibrating)action: snooze / dismiss

Timertimer alarm (ringing & vibrating)action: ok

Incoming Call (not including Voip app calls.)caller name or number, operator if recognizable action: decline / answer

Application NotificationsViewed as Full Screen

see Lock Screen document for details

5


AlertNotifications

System Notifications

Security Warningmessage (eg. are you sure you want to open…) action: continue / quit

Bluetooth Device Availabilitylist of wifi networks available to joinaction: select network, enter password / ignore

WiFi Network Availabilitylist of wifi networks available to joinaction: select network, enter password / ignore

Password Requestrequestaction: empty box with keyboard, ok / cancel

Low Batteryremaining battery time leftaction: ok / power save (if power save inactive)

Low Creditremaining credit leftaction: ok / buy more(if top-up function on credit module is active)

Data Conflictimplicationsaction: override / cancel

App Permission Request (eg. push notifications)App name, implicationsaction: don't allow / ok

Could be others here, list is in-progress.


Call while filming with cameracaller name or numberaction: decline / answer

Call from Voip app (ie. Skype)caller name or numberaction: decline / answer

Alarmalarm time (ringing & vibrating)action: snooze / dismiss

Timertimer alarm (ringing & vibrating)action: ok

Calendar Eventtitle, time, locationaction: ok / view

SMS Messagesender, time, message content (preview)action: ok / reply, ok / view (for longer message)

AlertInterrupts and requires an action before proceeding.

6

BOTH


Simple AlertAlert Notifications

Text Length

Short Message NotificationsIf the text message does not exceed three lines, the entire message should be viewablein the notification window.

Long Message NotificationIf the text message exceeds three lines, it should be cut and the reply button should be a View button leading to viewing the full message in the respective application.

1

21

2

Jim J How was the movie last night? Call me.

ReplyClose

Mark Z I was wondering if you couldlend me your lawn mowerfor the weekend, I can ...

ViewClose

7

BOTH


Simple AlertAlert Notifications

Low Battery Battery with 20% remaining.

Meeting with John Today at 11:30Starbucks

Power SaveOK ViewOK

8

BOTH


Alert Window AnimationAlert Notifications


ReplyClose


ReplyClose

Open AnimationThe alert notification opens from the center.

1

Close AnimationThe alert notification closes back into the center.

2

14

BOTH


PassiveNotifications

PassiveAppear and go awayautomatically.

System Notifications

Data Network connection Failureapplication requires connection but could not connect

Bluetooth Pairing Failurephone has attempted to connect/pair but connection has failed

Volume and Mute StatusWhen the volume buttons are pressed aPassive Notification appears to provide feedback on volume level.

Could be others here, list is in-progress.


Social Network app messagesender & message preview, time

Email Incoming messagesender & message preview, time

App View New information (eg. Bank app…)sender, info preview

15

BOTH


PassivePassive Notifications

Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c...

Social Network MessageMessage Icon, sender name, Message preview

EmailEmail Icon, sender name, Message Subject, Message preview

16

BOTH

movistar 3G 9:42Connection Failure Cannot connect to netwrok, content is historical.!

System NotificationMessage

What’s App Rebecca WatsonNice pictures, I need to visit you there sometime.


What’s App Rebecca WatsonNice pictures, I need to visit you there sometime.


Core & Trusted ApplicationApplication Icon, Sender, and Message Preview

Un-trusted ApplicationApplication Icon, Application name, rest is determined by application given available space.

17

BOTH


1 2 1

2



For App Notifications:Tapping the Notification

Tapping on the notification when it appears sends a user to the full message or event view in the appropriate application.

If it is a system notification, such as a a connection failure, this gesture is disabled.


11

18

BOTH


Passive Window AnimationsPassive Notifications

Reveal AnimationThe passive notification slides down from the top and temporarily covers the status bar when a new notification comes in. It stays fixed for a second or so.

1Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c...



Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c... Close Animation

After a second or so, the notification slides up.

1

22

19

BOTH



Volume and Mute Control FeedbackPassive Notifications

20

hold - to mute


hold + to unmute Details

Volume FeedbackWhen the hardware volume buttons are pressed, and the user is not on the lock screen, a passive notification appears instantly indicating the volume level the user is adjusting to.It also provides an indication how to mute the phone via hardware volume (if no physical silence switch is present).

1

1 2

Unmute FeedbackWhen the user mutes the phone, this passive notification appears instantly giving visual feedback and an indication of how to unmute the phone.

2

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

Thanks

21

notifications - mozillalong message notiﬁcation if the text message exceeds three lines, it should...

Documents