building blocks: the gaia guide to notifications things ... · cancel compose email send lorem...

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

Entry Sheets

The Gaia Guide to

Things That

Pop-Up

Notifications

Dialogues & Menus

SystemOverlays

Josh Carpenterv1, June 20 2012

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

PATTERN

Entry Sheets

Weekly team meeting

Boardroom TN

Cancel Add Event Done

All Day

From:

Repeat: Alert:

Attendees:

Notes:

None None

Monday, Apr 19 2012

From:

Monday, Apr 18 2012

Create calendar event

Cancel

Search

Add Contact

Adam AdamsCompany name

Blake Adams

Miguel AdamsCompany name

Daryl Adams

A

Miguel AdamsCompany name

Amy Meyers

Jack Winstons

Browse for contact

To:

Subject:

Cancel Compose Email Send

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation labore.

Testing the quick entry

Compose email

To:

Subject:Sam Foster

Sara MendesCompany name

Tim Saxon

Salud JuradoCompany name

Sarah Foster

Sara MendesCompany name

Cancel Compose Email Send

Sa

To:

Subject:

Cancel Compose Email Send

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation labore.

Sam Foster

Testing the quick entry

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

Dialogues & Menus

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

PromptsDialogues & Menus

Clear Private Data?

ClearCancel

Browsing settings, including passwords and cookies, will be deleted.

!

DeleteCancel

Are you sure you want to delete this thread?

Cancel

Available networks

Starbucks Free WiFi

Office Park

Mozilla Mobile

Mozilla Guest

MyHomeNetwork

Neighbourhood Cafe

Huddle LoginhUser name or email:

Password:

Forgot your password?Sign up

mistered@yahoo.com

• • • • • • • •

https://my.huddle.net/

LoginCancel

OKDon’t Allow

[AppName] would like to access your contacts

Brief explanation Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

You can change this permission at any time from Settings.

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

Value Selectors

Dialogues & Menus

Select Time

SelectCancel

6 38

7 39

8 40 AM

9 41 PM

10 42

Select Date

SelectCancel

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 1 2 3 4 5

SUN MON TUE WED THU FRI SAT

April 2012

Repeat

Cancel

Every year

Every month

Every week

Every day

None

Reminder

Cancel

15 minutes before

10 minutes before

5 minutes before

None

2 hours before

1 hour before

30 minutes before

45 minutes before

3 hours before

Ringtones

SelectCancel

Sosuyou

Chiming bells

Suction cups

Guitar strum

Kettle drum

Xylophone

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

Action Menus

Dialogues & Menus

Share

Email

Send Message

Set as Wallpaper

Assign to Contact

Delete

Cancel

Cancel

Mozilla Firefox 3

Mozilla Firefox 3

Cancel

Message

Email

Share

Cancel Add Event Done

Title:

Location:

Date: All Day

From: To:

10:00 AM 11:00 AM

Repeat: Alert:

Attendees:

None None

Notes:

Monday, April 23

Cancel Add Event Done

Title:

Location:

Date: All Day

From: To:

10:00 AM 11:00 AM

Repeat: Alert:

Attendees:

None None

Notes:

Monday, April 23

Cancel

Every Month

Every Week

Every Day

None

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

Object Menus

Same UI as Action Menus (for v1).

May get fancier in v2.

Dialogues & Menus

Delete

Delete

Cancel

Cancel

Send Message

Email

Set as Wallpaper

Assign to Contact

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Edit Refresh

Inbox (2) New

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Edit Refresh

Inbox (2) New

Cancel

Mark as Read

Flag

Move

Delete

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

BannerDialogues & Menus

5 messages deleted Undo

2 emails moved Undo

The alarm is set for 7 hours and 14 minutes from now.

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Edit Refresh

Inbox (2) New

2 emails deleted Undo

7:30 AMAlarmSun,Tue,Wed,Thu,Fri,Sat

12:30 PMLunch timeWeekdays

4:13 PM Mary’s birthday call

9:45 AMTeam meetingMon

Clock

7:30 AMTuesday, June 5

The alarm is set for 7 hours and 14 minutes from now.

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

Notifications

Meeting today with JohnToday at 11:30 AM, Starbucks

Calendar app: passive notification

John ValdésWhat time are we meeting?

SMS app: passive notification

Gaia UX Patterns & Building Blocks May 28 2012

Gaia UX Patterns & Building Blocks:

BU

ILDIN

GB

LOCK

System Overlays

Helena SchmidtMOBILE | Movistar | 415 290 1078

01:31Dialer app: full screen active call interface(System Overlay)

12:30PM

Snooze Close

AlarmWeekly Team Meeting

Clock app: full screen alarm interface(System Overlay)

Helena Schmidt 5:25

Dialer app: status bar active call indicator(System overlay)

Volume indicator(System overlay)

Power off, system charging indicator(System overlay)