MetLife’s Pattern Library Spec Sheets...Contents 1. Foundational Patterns Buttons Links Text...

MetLife’s Pattern LibrarySpec Sheets

Issue 1: February 2017

Contents1. Foundational Patterns

Buttons

Links

Text Fields

Forms

Drop Down

Validation & Messaging

Radio Buttons

Check Marks

MetLife Pattern Spec SheetsIssue 1: February 2017

2. Examples

Lead Form

Login

Get a Quote

Find a Service Provider

Comparison Table


1. Foundational PatternsButtons

Links

Text Fields

Forms

Drop Down


Radio Buttons

Check Marks


Buttons

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

Buttons Overview

Foundational Patterns

Primary Button Secondary Button

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE

On Load

Light Background

On Load

Rollover/Press

Rollover/Press

On Focus

On Focus

MetLife Pattern Spec Sheets Issue 1: August 2017

Primary Button Secondary ButtonDark Background

FIND OUT MORE

On Load

Rollover/Press

On Focus

Character limit (not to exceed 80% button size)

* Text is in All Caps

FIND OUT MORE

FIND OUT MORE

20px

40px

Background: #007ABCText Color: #ffffff Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background:#0061a0Text Color: #ffffff Font: Noto Sans 14pxText Style: Bold, Underline *(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Background: #007ABCText Color: #ffffff Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

12px

12px



Primary Button

Notes

Light Background

FIND OUT MORE

FIND OUT MORE

On Load

Rollover/Press

On Focus

FIND OUT MORE

FIND OUT MORE

20px

10px

10px40px

Background:#a4ce4eText Color: #333333 Font: Noto Sans14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background:#B7DD58Text Color: #333333 Font: Noto Sans14pxText Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Background:#a4ce4eText Color: #333333 Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px


Primary Button



Notes

Dark Background

FIND OUT MORE

FIND OUT MORE

On Load

Rollover/Press

On Focus

20px

40px10px

10px

Border Color: 2px, #007ABCText Color: #007ABCFont: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background: #007ABCText Color: #ffffff Font: Noto Sans 14pxText Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Border Color: 2px, #007ABCText Color: #007ABC Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

FIND OUT MORE

FIND OUT MORE

FIND OUT MORE


Secondary Button


Notes


Light Background

FIND OUT MORE

On Load

Rollover/Press

On Focus

20px

40px10px

10px

Border Color: 2px, #FFFFFFText Color: #FFFFFF Font: Noto Sans 14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5px

Background:#FFFFFFText Color: #007ABC Font: Noto Sans 14pxText Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development)Corner Radius: 2pxLetter Spacing: .5px

Border Color: 2px, #FFFFFFText Color: #FFFFFF Font: Noto Sans14pxText Style: BoldCorner Radius: 2pxLetter Spacing: .5pxShadow: #333333, Blur 4px, Spread 1px

FIND OUT MORE

FIND OUT MORE


Secondary Button


Notes


Dark Background

FIND OUT MORE

A minimum button and maximum button size (with padding constraints). At maximum size, content can overflow onto 2 lines.

Rule for copy that exceeds maximum width—gets pulled out of button and CTA becomes shorter

Get more information about this insurance policy

VIEW

20px

Desktop

GET MORE INFORMATIONGO

Min size Max size


Button Sizes



Links

On Load

Rollover/Press

On Focus

View More

View More

View More

View More

Text Color: #007ABC Font: Noto Sans 14pxText Style: Bold, Underline, Titlecase

Text Color: #0061A0 Font: Noto Sans 14pxText Style: Bold, Titlecase

Text Color: #007ABCFont: Noto Sans14pxText Style: Bold, Underline, Titlecase Shadow: #333333, Blur 4px, Spread 1px

*Representation of underlinethickness not accurate, will bethinner in development

Primary Text Link

Foundational PatternsMetLife Pattern Spec SheetsIssue 1: February 2017

Notes

Light Background

On Load

Rollover/Press

On Focus

View More

View More

View More

View More

Text Color: #FFFFFF Font: Noto Sans 14pxText Style: Bold, Underline, Titlecase

Text Color: #FFFFFF Font: Noto Sans 14pxText Style: Bold, Titlecase

Text Color: #FFFFFFFont: Noto Sans 14pxText Style: Bold, Underline, Titlecase Shadow: #333333, Blur 4px, Spread 1px

*Representation of underlinethickness not accurate, will bethinner in development

Primary Text Link


Notes

Dark Background


Text Fields

First NameFirst NameFirst NameFirst NameFirst NameFirst NameFirst Name First Name

John

First NameFirst NameFirst NameFirst NameFirst Name First Name

First NameFirst NameFirst NameFirst NameFirst NameFirst NameFirst Name First Name

John


First NameForm Field On Load

Form Field Selected State

10px

10px

20px

Field Border Color: #AAA9AAField Label Text: Noto Sans13px #666666 Corner Radius: 2px

Field Border Color: #007ABCField Label Text: Noto Sans 12px Bold #333333 Hint Text: Noto Sans 13px, #666666Corner Radius: 2px

Field Border Color: #AAA9AAField Label Text: Noto Sans 12px #333333 Text: Noto Sans 13px #3333333Corner Radius: 2px

Text Field


Hint text: When user types, the field turns into a blank and auto ‘jumps’ to next entry when format is completed.

Notes

Simple Field

Social Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security Number Social Security Number

123-45-6789

Social Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security Number Social Security

Number XXX-XX-XXXX

Social Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security Number

Form Field On Load


Social Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security Number

123-45-6789

Social Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security Number

Social Security

Number XXX-XX-XXXX

Social Security

Number 123- ___-XXXX

Social Security Number

10px

10px

20px

Field Border Color: #AAA9AAField Label Text: Noto Sans 13px #666666 Corner Radius: 2px

Field Border Color: #007ABCField Label Text: Noto Sans 12px Bold #333333 Hint Text: Arial 13px, #666666Corner Radius: 2px


Text Field



Notes

With Hint Text



•••••••••


123-45-6789


123-45-6789

Social Security NumberSocial Security NumberSocial Security NumberSocial Security NumberSocial Security Number Social Security Number

XXX-XX-XXXX


Social Security NumberField Border Color: #AAA9AAField Label Text: Noto Sans13px #666666 Corner Radius: 2px

Field Border Color: #007ABCField Label Text: Noto Sans 12px Bold #333333 Text: Noto Sans 13px #333333Hint Text: Noto Sans 12px, #666666Corner Radius: 2px


10px

20px

Form Field On Load


View/Hide Selected & Unselected

10px

Show/Hide Icon

Vertically centered

Text Field



Notes

With View Icon


### - ## - ####


•••-••-••••


123-45-6789


- ## - ####


123-45-678#

Social Security NumberOn Load

On Click/Press

Active State

On Release

On Release

Error

Single Line

Social Security Number Span Two Lines Lorem Ipsum




















Social Security Number Span Two Lines Lorem IpsumSocial Security Number Span Two Lines Lorem Ipsum






Social Security Number Span Two Lines Lorem IpsumSocial Security Number Span Two Lines Lorem Ipsum

123

Social Security Number must contain 9 characters

*The Floating Label text will be againstthe light red background, there shouldnot be white behind it. This will lookappropriate in development.

Text Field Option


Notes


Forms

BUTTON

Zip Code

Form Field On Load

BUTTON

Username

Password

BUTTON

20px

30px

30px

Zip CodeField Border Color: #AAA9AA Field Label Text: Noto Sans13px #666666 Corner Radius: 2px

Background:#007ABCText Color: #ffffffFont: Noto Sans14pxText Style: BoldCorner Radius: 2px

Form


Simple forms with variations of multiple fields

Notes

Basic Form


Drop Down

Drop Down On Load

Drop Down Rollout

Drop Down On Click (Selected)

I want to...

I want to...

View Online Activity View

Payment History View

Automatic Payment

10px 10px

10px

10px

10px

10px

Field Border Color: #007ABCField Label: Noto Sans 13px #333333 Bold Text: Noto Sans 13px #333333Hover Background: #007ABC Hover Text: 13px #FFFFFF, Bold

I want to...

View Online Activity

View Payment History

View Automatic Payment

Field Border Color: #AAA9AA Heading Text Color: #333333 Field Label Font: Noto Sans13px

Field Border Color: #AAA9AAField Label Font: Noto Sans 13px #3333333

Drop Down


Single Line

I want to...

View Automatic Payment

NotesAfter user clicks to make a selection from within the list of options shown, apply selected state as shown below. It is at this point when the floating field style is applied.

Drop Down On Load

Drop Down Rollout

Drop Down On Click (Selected)

Field Border Color: #AAA9AA Heading Text Color: #333333 Field Label Font: Noto Sans 13px

Field Border Color: #AAA9AAField Label Font: Noto Sans 13px #3333333

Drop down


Dropdowns maximumof 3 lines of text.

Notes

Double/Multiple Lines

Accounts/Policies

Life Insurance - Whole Life Select Policy #3866750

Auto Insurance - NJ MotorcyclePolicy #899812XYZ

10px 10px

10px

10px

10px

10px

Accounts/Policies

Accounts/Policies

Life Insurance - Whole Life Select Policy #3866750

Auto Insurance - NJ MotorcyclePolicy #899812XYZ

Field Border Color: #007ABCField Label: Noto Sans 13px #333333 Bold Text: Noto Sans 13pt #333333Hover Background: #007ABC Hover Text: 13px #FFFFFF, Bold

Accounts/Policies

Auto Insurance - NJ Motor...

NotesWhen the dropdown is being used in a scenario where user is asked a more complex question, the question should appear above the dropdown field and used together with a simpler label within the dropdown.

10px 10px

10px

10px

10px

10px

Payment Method

Check

Credit Card

Direct Deposite

How do you want to be paid? 10px

Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet.


Clicking Link

Clicking Linkon Click/Press State

Clicking Linkon Error State

Mobile PhoneMobile PhoneMobile PhoneMobile PhoneMobile Phone Mobile Phone

### - ### - ####

Mobile PhoneMobile PhoneMobile PhoneMobile PhoneMobile Phone Mobile PhoneMobile PhoneMobile PhoneMobile PhoneMobile Phone Mobile Phone

123

(optional)

(optional)


On Load

What’s this?

Mobile Phone number must contain 10 characters

What’s this?

Mobile Phone number must contain 10 characters

What’s this?

Mobile Phone (optional)

What’s this?

All messages from Field Text Link show below Error message.

Text Field Validation


Text Tooltip for Text Fields

Mobile Phone

123

(optional)


What’s this?

Form Field On Load

Error Invoked

Field Stroke: 1pxField Border Color: #AAA9AA Field Label Text: Noto Sans 13px #666666

Field Specific Text Link: Noto Sans 12px, Underline, #007ABCMessaging Background: #F2F2F2 Messaging Text: Noto Sans13px #333333



What’s this?



What’s this?5px

10px10px

5px

10px




On click, text field label moves to the top of field and specification for text change—see notes above

Notes

Text Tooltip & Show/Hide Link


### - ## - ####


•••-••-••••


123-45-6789


- ## - ####


123-45-678#

Social Security NumberOn Load

On Click/Press

Active State

On Release

On Release

Error

123


What’s this?

What’s this?

What’s this?

What’s this?

What’s this?

What’s this?


Show/Hide icon is the only icon that sits within field.

All Field specific text links, ie. ‘What’s this?’, ‘Info’, ‘Calciulate’, etc. sit below field.

All messages from Field Text Link show below Error message.



Combination of Text Tooltip & Show/Hide Link

Text Field Validation Examples

Foundational PatternsMetLife Pattern Spec SheetsIssue 1: January 2017MetLife Pattern Spec SheetsIssue 1: January 2017

Please enter your SSN.

Please enter your SSN.


XXX-XX-XXXX

Confirm Social Security NumberConfirm Social Security NumberConfirm Social Security NumberConfirm Social Security NumberConfirm Social Security Number Confirm Social Security Number

XXX-XX-XXXX

Please enter your first name.

Please enter your last name.

Please enter your date of birth.


Last NameLast NameLast NameLast NameLast Name Last Name

Date of BirthDate of BirthDate of BirthDate of BirthDate of Birth Date of Birth

MM-DD-YYYY

Email Address

Confirm Email

Mobile Phone (Optional)

What’s this?

Form with Multiple ErrorsText Tooltip Text Tool tip and Show/Hide

When link is clicked, message expands and pushes fields below.

Extra space added after combinatiin of Error message and Text Field Link message so user is not confused as to which field the information belongs.

Date of Birth

Date of Birth

Email Address

Email Address


123-45-678#


What’s this?



What’s this?

Date of Birth

When Text Field Link is clicked, message expands and pushes fields below.


What’s this?

Date of Birth

Date of Birth

Email Address

Email Address



What’s this?

Extra space added after combinatiin of Error message and Text Field Link message so user is not confused as to which field the information belongs.

Please make a selection

I Am Interested In

Form Field Error

Please make a selection

5px

I Am Interested In

I Am Interested In

Error Invoked

Field Stroke: 1pxField Border Color: #AAA9AA Field Label Font: Noto Sans 13px #666666

Field Label Text: Noto Sans, 13px, Bold, #333333 Alert Field Border Color: #DB1818Alert Field Background: #FDE8E8Field Stroke: 1pxAlert Text: Noto Sans 13px #DB1818

Dropdown Validation


Dropdown Error Messaging


Radio Buttons

Button Field On Load

Button Field Selected

Time Frame

Time Frame

Time Frame

60 Days

60 Days10px

10px

60 Days

90 Days

90 Days

90 Days

Heading Text Color: #333333 Heading Font: Noto Sans 14px Heading Text Style: BoldField Border Color: #AAA9AA Font: Noto Sans 14pt

Heading Text Color: #333333 Heading Font: Noto Sans 14px Heading Text Style: Bold Circle Color: #007ABC Field Border Color: #007ABC Font: Noto Sans 14pt

5px

Radio Button


*Text is center-alignedto radio button

Notes

Basic


Check Marks

Checkbox On Load

Checkbox Selected

Lorem ipsum dolar sien amit vivamus diem dolar



Text Color: #333333Form Border Color: #AAA9AA Font: Noto Sans 14px

Text Color: #333333Check Mark Color: #007ABC Form Border Color: #007ABC Font: Noto Sans 14px

5px

Checked Fields


*Text is center-alignedto radio button

Notes

Basic


2. ExamplesLead Form

Login

Get a Quote

Find a Service Provider

Comparison Table

By clicking Submit, you agree that we* may contact you at the number you've provided, possibly using automated technology or a prerecorded voice, to talk about our products and services. If you don't want to give this permission, you can still get a quote or make a purchase by calling us directly at 1-800-638-5433

*A MetLife company or third party acting on MetLife's behalf.

Contact MetLifeAll fields are required

Call 1-800-METLIFE

All Other Contact Options

SUBMIT

First name

Last name

City

Address

State

Zip code

Phone number

In reference to...

Contact Form

ExamplesMetLife Pattern Spec SheetsIssue 1: February 2017

Log in for Individuals

Forgot Username or Password?

LOGIN

Username

Password

CREATE A NEW ACCOUNT

Login


Examples

With Drop Down

I want to get a quote

GET MY QUOTE

GET MY QUOTE

I want to get a quote I want to get a quote

GET MY QUOTE

Your Health

What’s this?

Insurance Type Term Life Insurance Term Life Insurance

Term Length

Tobacco/Nicotine Use

Florida Florida

01-01-1980 01-01-1980

Female Female

$100,000

Calculate

Coverage Amount

Calculate

Quote Tool


Examples

Steps Options

SUBMIT

Don’t know your plan?

Find a Dentist

Zip Code

Select Your Network

Clicking on the default link will behave like Drop downs.

Find a Provider


Examples

With Drop Down

Find a Dentist

Zip CodeDentist

Vision Provider

*Sample monthly rates are based on a 30 year old female except where noted. Rates are current as of June 2015 and are notguaranteed. Coverage and rates may be subject to understanding.

Contact Rep

LEARN MORE

$10,000+Coverage Amounts

YesMedical Exam Required

YesBuild Cash Value

NoAvailable Online

LifetimeCoverage Lasts

for $100,000 of coverage(best class)

$99.90/mo.*

Whole

Contact Rep

LEARN MORE



Some ProductsBuild Cash Value

NoAvailable Online

To age 95Coverage Lasts


$45.30/mo.*

Universal

Apply Online

LEARN MORE

$2,500 - $50,000Coverage Amounts

NoMedical Exam Required

NoBuild Cash Value

YesAvailable Online


for $10,000 of coverage(45 year old female)

$35.50/mo.*

Guaranteed Acceptance Whole

Apply Online

LEARN MORE



NoBuild Cash Value

YesAvailable Online

10-30 yearsCoverage Lasts

for $250,000 of coverage(10 year term, best class)

$16.00/mo.*

LevelTerm

Apply Online

LEARN MORE

$5,000 - $100,000Coverage Amounts

NoMedical Exam Required

NominallyBuild Cash Value

YesAvailable Online

To age 90Coverage Lasts

for $10,000 of coverage(30 year old female)

$4.75/mo.*

Simplified Issue Term

Comparison Table


Examples

Desktop

Contact Rep

LEARN MORE



YesBuild Cash Value

NoAvailable Online



$99.90/mo.*

Whole

Contact Rep Contact Rep

LEARN MORE LEARN MORE

$50,000+ $50,000+Coverage Amounts Coverage Amounts

Yes YesMedical Exam Required Medical Exam Required

Some Products Some ProductsBuild Cash Value Build Cash Value

No NoAvailable Online Available Online

To age 95 To age 95Coverage Lasts Coverage Lasts



$45.30/mo.* $45.30/mo.*

Universal Universal

Comparison Table


Examples

Tablet Mobile

Thank you.

MetLife’s Pattern Library Spec Sheets...Contents 1. Foundational Patterns Buttons Links Text...

Documents

Transcript of MetLife’s Pattern Library Spec Sheets...Contents 1. Foundational Patterns Buttons Links Text...