+ All Categories
Home > Documents > Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do...

Natalie Calvert, Designer - Design and Development Videos€¦ · available updates for the app. Do...

Date post: 26-May-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
42
#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
Transcript
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

#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

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

[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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
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

Recommended