Embed Size (px)
Citation preview
Telefonica Digital. May. 2012. Confidential. Please do not share
Notifications & Utility Trayv1 fall-back option
1
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Types and LocationsNotifications
Full ScreenVery important notification, it interrupts all activity.Only for incoming call.
AlertInterrupts and requires an action before proceeding.
BadgesNumerical update onicons in carousel.Only for app relatednotifications.
see Comms App document for details
2
Notification Center in the Utility TrayAll app related notifications live in the notification center.
PassiveAppear and go awayautomatically.
Lock ScreenNotifications Reserved for app related notifications, they are present until phone is unlocked.
00:00
see Homescreen document for details
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Core or Trusted ApplicationsAlert Notifications
1
2
3
Jim J How was the movie last
night? Call me.
ReplyClose
1 2
3
4
Details
IconIIcon signifying the application from which the Notification belongs to.
TitleIf a message, the title represents the name of the sender.
BodyIf a message, the body gives a preview of the content of the message. If an email, the body gives the subject of the email.
ActionActions can be comprised of one or two buttons.If two buttons, the positive action or what leads to viewing the message or acting on it is on the right.The negative action that dismisses the notification without taking action is on the left.
3
4
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Social NetworkJulie Ryan: OMG, we lost
game seven!!!
ReplyClose
Untrusted ApplicationsAlert Notifications
4
1 2
3
5
1
2
Details
IconIIcon signifying the application from which the Notification belongs to.
TitleFor an untrusted application, the title must contain the name of the application.
BodyIf a message, the body gives the name of the sender, and a preview of the message.
Otherwise it contains simple content,
ActionActions can be comprised of one or two buttons.If two buttons, the positive action or what leads to viewing the message or acting on it is on the right.The negative action that dismisses the notification without taking action is on the left.
3
5
ChessIt is time for your next move.
ViewClose
4
4
HTML5 UX Concepts Notifications [email protected] May 30, 2012
System NotificationsAlert Notifications
5
Low Battery Battery with 20% remaining.
Power SaveOK
1 2
3
4
Data Connection Failure
Turn Off Airplane Mode or
use Wi-Fi to access data.
OKSettings
1
2
Details
IconIIcon signifying the part of the system the Notification is referring to.
TitleFor an untrusted application, the title must contain the name of the application.
BodyIf a message, the body gives the name of the sender, and what was sent. Otherwise it contains simple content,
ActionActions can be comprised of one or two buttons.If two buttons, the positive action or what leads to viewing the message or acting on it is on the right.The negative action that dismisses the notification without taking action is on the left.
3
4
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Notification LengthAlert Notifications
6
Text Length
Short Message NotificationsIf the text message does not exceed three lines, the entire message should be viewablein the notification window, and the action can be to reply directly.
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.
Mark Z I was wondering if you could
lend me your lawn mower
for the weekend, I can ...
ViewClose
Jim J How was the movie last
night? Call me.
ReplyClose
1
2
1 2
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Volume and Mute Control FeedbackAlert Notifications
7
Details
Volume FeedbackWhen the hardware volume buttons are pressed, and the user is not on the lock screen, a 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
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
VolumeHold - to mute1 2
Speaker MutedHold + to unmute
HTML5 UX Concepts Notifications [email protected] May 30, 2012
No Notification CenterUtility Tray
8
Top-Up Calls SMS left online
23´ !45 6 13 2h 34mʜWiFi
GO TOSETTINGSDATA BLUETOOTH POWER
movistar 3G 9:42
Gloria Lin Missed Call
9:20 am
9:40 amSocial NetworkRebecca Watson Nice pictures...
8:20 amSocial NetworkRebecca Watson Nice pictures...
02:30Monday 12 March
Top-Up Calls SMS left online
23´ !45 6 13 2h 34mʜWiFi
GO TOSETTINGSDATA BLUETOOTH POWER
movistar 3G 9:42
Gloria Lin Missed Call
9:20 am
9:40 amSocial NetworkRebecca Watson Nice pictures...
8:20 amSocial NetworkRebecca Watson Nice pictures...
02:30Monday 12 March
02:30Monday 12 March
movistar 3G 9:42 Details
Utility Tray sans NotificationsThe Utility Tray will not have Notifications, it will be composed of the quick settings and the credit module.
1
Telefonica Digital. May. 2012. Confidential. Please do not share
Thanks
9
