![Page 1: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/1.jpg)
#WWDC17
© 2017 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Natalie Calvert, Designer
•Writing Great Alerts • Session 813
Design
![Page 2: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/2.jpg)
When should alerts be used?
![Page 3: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/3.jpg)
[email protected] Parker
EDIT
Apple IDSettings
9:41 AM 100%
Emily’s iPhoneThis iPhone 7
Emily’s Apple Watch
Name, Phone Numbers, Email
Password & Security
VisaPayment & Shipping
iCloud
Family Sharing James
iTunes & App Store
EDIT
Try AgainCancel
Your Apple ID or password is incorrect.Verification Failed
[email protected] Parker
EDIT
Apple IDSettings
9:41 AM 100%
Emily’s iPhoneThis iPhone 7
Emily’s Apple Watch
Name, Phone Numbers, Email
Password & Security
VisaPayment & Shipping
iCloud
Family Sharing James
iTunes & App Store
EDIT
Try AgainCancel
Your Apple ID or password is incorrect.Verification Failed
![Page 4: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/4.jpg)
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.
![Page 5: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/5.jpg)
9:41 AM 100%9:41 AM 100%
![Page 6: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/6.jpg)
Alerts are disruptive by design
![Page 7: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/7.jpg)
Alerts are disruptive by design
![Page 8: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/8.jpg)
Alerts are disruptive by design
![Page 9: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/9.jpg)
Alerts are lightweight by design
![Page 10: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/10.jpg)
Yes, in every app
Do you want “App Name” to remember this choice?
Yes, and show a banner in every app
Yes
Yes, and show a banner
No
![Page 11: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/11.jpg)
Dismiss
Error Domain=Parse Code=431 “The requested operation couldn’t be
completed.” [Parse error 431] UserInfo=0x345624ag0 {code=431,
error=This user type is not supported by this application.}
Log In Error
![Page 12: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/12.jpg)
OK
Please do not enter the following special characters
in the password field: - _ . ~ & % + () {} [] “ | <> ?
![Page 13: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/13.jpg)
Alert Dos and Donts
Correct errors
Request access to user data
Notify users about critical updates
![Page 14: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/14.jpg)
Alert Dos and Donts
Correct errors
Request access to user data
Notify users about critical updates
Don’t use nonessential or lengthy content
Don’t offer complicated choices
Don’t duplicate the tasks of other UI elements
![Page 15: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/15.jpg)
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.
![Page 16: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/16.jpg)
Title
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.
![Page 17: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/17.jpg)
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.Message
![Page 18: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/18.jpg)
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.
Actions
![Page 19: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/19.jpg)
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.Message
Actions
Title
![Page 20: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/20.jpg)
9:41 AM 100%
Don’t Allow Allow
Allow “Calendar” to access your location while you use
the app?Your location is used to estimate travel times to events and improve location
searches.Why?
How?
What?
![Page 21: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/21.jpg)
Common Problems Too much/vague information
No
You may need to download the latest available updates for the app. Do you want to visit the “App Name” website
for more information and troubleshooting tips?
“App Name” cannot open this file.
Yes
![Page 22: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/22.jpg)
Common Problems Too much/vague information
No
You may need to download the latest available updates for the app. Do you want to visit the “App Name” website
for more information and troubleshooting tips?
“App Name” cannot open “File Name”.
Yes
![Page 23: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/23.jpg)
Common Problems Too much/vague information
No
An update to the latest version of the app may be required.
“App Name” cannot open “File Name”.
Yes
![Page 24: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/24.jpg)
Common Problems Too much/vague information
Check for Updates
An update to the latest version of the app may be required.
“App Name” cannot open “File Name”.
Learn More
Cancel
![Page 25: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/25.jpg)
Before and After
No
You may need to download the latest available updates for the app. Do you want to visit the “App Name” website
for more information and troubleshooting tips?
“App Name” cannot open this file.
Yes
Check for Updates
An update to the latest version of the app may be required.
“App Name” cannot open “File Name”.
Learn More
Cancel
![Page 26: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/26.jpg)
Before and After
No
You may need to download the latest available updates for the app. Do you want to visit the “App Name” website
for more information and troubleshooting tips?
“App Name” cannot open this file.
Yes
Check for Updates
An update to the latest version of the app may be required.
“App Name” cannot open “File Name”.
Learn More
Cancel
![Page 27: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/27.jpg)
Common Problems Too little/confusing information
![Page 28: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/28.jpg)
Common Problems Too little/confusing information
![Page 29: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/29.jpg)
Common Problems Too little/confusing information
![Page 30: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/30.jpg)
Common Problems Too little/confusing information
![Page 31: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/31.jpg)
Before and After
![Page 32: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/32.jpg)
Before and After
![Page 33: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/33.jpg)
Style and Quality
![Page 34: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/34.jpg)
Style and Quality
Avoid platitudes, jargon, or fillers
![Page 35: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/35.jpg)
Style and Quality
Avoid platitudes, jargon, or fillers
Use correct formatting, spelling, and punctuation
![Page 36: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/36.jpg)
Style and Quality
Avoid platitudes, jargon, or fillers
Use correct formatting, spelling, and punctuation
Consider your audience
![Page 37: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/37.jpg)
Summary
![Page 38: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/38.jpg)
Summary
Keep it simple and helpful
![Page 39: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/39.jpg)
Summary
Keep it simple and helpful
Practice: revise your alerts to incorporate these guidelines
![Page 40: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/40.jpg)
Summary
Keep it simple and helpful
Practice: revise your alerts to incorporate these guidelines
Read the HIG
![Page 41: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/41.jpg)
![Page 42: Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do you want to visit the “App Name” website for more information and troubleshooting](https://reader034.vdocument.in/reader034/viewer/2022042305/5ed0c8e112139c4ae153a7fb/html5/thumbnails/42.jpg)