Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
BadgesNotifications
BadgesNumerical update onicons in carousel.Only for app relatednotifications.
Application Notifications
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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.
Application Notifications
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Simple AlertAlert Notifications
Low Battery Battery with 20% remaining.
Meeting with John Today at 11:30Starbucks
Power SaveOK ViewOK
8
BOTH
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Alert Window AnimationAlert Notifications
Jim J How was the movie last night? Call me.
ReplyClose
Jim J How was the movie last night? Call me.
ReplyClose
Open AnimationThe alert notification opens from the center.
1
Close AnimationThe alert notification closes back into the center.
2
14
BOTH
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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.
Application Notifications
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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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.
HTML5 UX Concepts Notifications [email protected] May 30, 2012
What’s App Rebecca WatsonNice pictures, I need to visit you there sometime.
PassivePassive Notifications
Core & Trusted ApplicationApplication Icon, Sender, and Message Preview
Un-trusted ApplicationApplication Icon, Application name, rest is determined by application given available space.
17
BOTH
Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c...
1 2 1
2
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c...
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.
PassivePassive Notifications
11
18
BOTH
HTML5 UX Concepts Notifications [email protected] May 30, 2012
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...
Jim 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
HTML5 UX Concepts Notifications [email protected] May 30, 2012
Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c...
Volume and Mute Control FeedbackPassive Notifications
20
hold - to mute
Jim Jones Fwd: Sales Opportunity in MadridHi Mike, I was passing by and wanted to know if we c...
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