In Defense of the Floppy Disk

IN DEFENSE

OF THE

FLOPPY DISK

LIS PARDI

@LISPARDI

Lis icon designed by Jay Bellew

HI. I’M LIS.

Save designed by Cris Dobbins from The Noun Project

I DEFEND THE FLOPPY DISK...

Download designed by Michael Zenaty from The Noun Project

…AGAINST THIS ICON, WHICH INSTRUCTS YOU

TO PUT YOUR FILE IN HALF A BOX.

Students designed by Piotrek Chuchla from The Noun Project

PEOPLE THINK STUDENTS DON’T KNOW THE

FLOPPY DISK, BUT COLLEGE STUDENTS SAID:

“SERIOUSLY, I’M ONLY 20 BUT YOUNG PEOPLE

AREN’T THAT BLIND TO OLD TECH.”

I ASKED LOTS OF THEM. *NOT ACTUAL GENDER RATIO

Students designed by Piotrek Chuchla from The Noun Project

1. What is this a picture of?

2. What does this represent on a computer or phone?

LAST YEAR I SURVEYED 131 18-24 YEAR OLDS

ABOUT THE FLOPPY DISK AND 10 OTHER ICONS.

I LEARNED THAT 96% KNOW THIS IS A FLOPPY

DISK.

Save designed by Cris Dobbins from The Noun Project

AND 83% KNOW THIS MEANS SAVE. OF THOSE

WHO DIDN’T SAY “SAVE,” THEY KNEW THIS

REPRESENTED SOME SORT OF STORAGE OR

MEMORY.

Save designed by Cris Dobbins from The Noun Project

Save designed by Cris Dobbins from The Noun Project

BUT NO ONE BELIEVED THAT THE SAVE ICON IS

STILL WORKING. SO I SURVEYED MORE PEOPLE.

YOUNGER PEOPLE.

526 14-17 YEAR OLDS, TO BE EXACT.

I win!

Hooray!

Students designed by Piotrek Chuchla from The Noun Project

Reddit alien

IT’S HARD TO FIND TEENAGERS, SO I TURNED

TO REDDIT. IT’S KNOWN FOR ITS

PROFESSIONALISM. THE TEENAGERS TAUGHT

ME ABOUT ICONS AND THEMSELVES.

If you’d like to know the results of this

study when it’s completed, please enter

your email address below (optional)

anus@anus.anus

TEEN FACT #1: THEY’RE OBVIOUS WHEN

THEY’RE MESSING WITH YOU.

CONSIDER

THE AUDIENCE

WHEN WORKING WITH WORDS

DON’T

INSULT

YOUR USERS

WHEN WORKING WITH ICONS

DON’T

INSULT

YOUR USERS

WHEN WORKING WITH WORDS

CONTEXT

MATTERS

Donkey designed by m. turan ercan from the thenounproject.com

Kettle designed by Jennifer Cozzette from the thenounproject.com

CONTEXT HELPS DECIPHER IDIOMS, LIKE “ASS

OVER TEA KETTLE.”

*NOT TO SCALE

WHEN WORKING WITH ICONS

CONTEXT

MATTERS

Magnifying glass by The Noun Project

CONTEXT HELPS DECIPHER ICONS WHEN THEY

HAVE TWO MEANINGS.

Magnifying

Glass 95%

Other 5%

WHAT IS THIS?

Search

71%

Zoom

24%

Other 2%

Search/Zoom 3%

WHAT DOES IT REPRESENT?

Pencil designed by Blake Thompson, from The Noun Project

CONTEXT ALSO HELPS WHEN AN ICON HAS

MANY USES, LIKE THIS ONE.

1. What is this a picture of?

2. What does this represent on a computer or phone?

idk

TEEN FACT #2: ELEVEN PEOPLE COULD NOT

IDENTIFY THIS OBJECT. WHAT IS HAPPENING IN

OUR SCHOOLS?

Pencil

97%

No guess 2%

Pen 1%

WHAT IS THIS?

Write

24%

Draw 13%

No guess 17%

Edit/Write 7%

Draw/Edit 2%Edit

22%

Note 2%

Pencil 2%

Draw/Write 2%

New 2%

Type 2%

Other 5%

WHAT DOES IT REPRESENT?

Voicemail by The Noun Project

CONTEXT HELPS WHEN YOU HAVE NO IDEA

WHAT SOMETHING REPRESENTS.

Tape/Reco

rding 53%

No

guess

32%

Voicemail 5%

Glasses 1%

Phone 2%

Spaghetti

(and similar) 2%

Other 2%

WHAT IS THIS?

Voicemail

49%

No

guess

30%

Recording/Voicem

ail 1%

Recording 12%

Video 2%

Message 1%

Other 5%

WHAT DOES IT REPRESENT?

1. What is this a picture of?

2. What does this represent on a computer or phone?

[censored]

TEEN FACT #3:

THEY’RE INNOCENT. SOME THINK THIS ICON

LOOKS LIKE BODY PARTS, WHICH MEANS

THEY’VE CLEARLY NEVER SEEN SAID PARTS.

OLD IS

NOTHING NEW

WHEN WORKING WITH WORDS

USE

METAPHORS

Telegraph designed by Luke Anthony Firth from The Noun Project

“DIPLOMATIC CABLES” AREN’T ACTUALLY SENT

OVER A TELEGRAPH ANYMORE.

Telephone from The Noun Project

PHONES DON’T HANG, BUT WE STILL END A

CALL BY HANGING UP.

Increase designed by Rediffusion from the thenounproject.com

WE GET STOCK INFORMATION ON A MACHINE

THAT, IF IT MAKES ANY NOISE, BUZZES. BUT WE

CALL IT A STOCK TICKER.

Paper designed by Tom Schott from the thenounproject.com

CC SOMEONE ON AN EMAIL AND YOU’RE

RECALLING THE GOOD OLD DAYS OF CARBON

PAPER.

NOTHING ABOUT YOUR SUBARU REQUIRES YOU

TO PULL, BUT YOU “PULL OVER” A CAR.

WHEN WORKING WITH ICONS

USE

METAPHORS

MOST HIGH SCHOOL STUDENTS DON’T SEE

MUCH MAIL, BUT THEY UNDERSTAND THE ICON.

Envelope

95%

Email 2%

Other 3%

WHAT IS THIS?

Email

61%Mail 12%

Mail/Message 2%

Email/Message

10%

Message 9%

Send 3%

Other 3%

WHAT DOES IT REPRESENT?

THIS IS A PAY PHONE RECEIVER, WHICH NO ONE

HAS SEEN IN DECADES. (EXACT DATE MAY NOT

BE ACCURATE.)

Phone

99%

Call 1%

WHAT IS THIS?

Call/Dialer

95%

Other 5%

WHAT DOES IT REPRESENT?

Folder designed by Sergio Calcara, from The Noun Project

TEENAGERS DON’T DO A LOT WITH MANILA

FOLDERS, AND YET THEY UNDERSTAND THE

ICON.

Folder

88%

Other 3%

File 9%

WHAT IS THIS?

Folder

76%

Directory 2%

File 10%

File/Folder 2%

Save 2%

Open 2%

Other 6%

WHAT DOES IT REPRESENT?

Contact designed by Johan H. W. Basberg, from The Noun Project

AND EVEN THOUGH THEY DON’T KNOW WHAT A

ROLODEX IS, THEY KNOW WHAT THIS MEANS.

ID

Card

39%

Rolodex

8%No guess 10%

Address Book 7%

Contact Card 18%

Photo ID 6%

Contact 4%

Business Card 2%

Newspaper 2%

Profile 1%

Other 3%

WHAT IS THIS?

Contacts

63%

Profile 13%

Information 1%

No Guess 18%

Address Book 2%

Other 3%

WHAT DOES IT REPRESENT?

1. What is this a picture of?

2. What does this represent on a computer or phone?

ID? I’m 14

No [censored] clue since I don’t have one yet.

TEEN FACT #4:

THEY’RE SENSITIVE AND ANGSTY.

Save designed by Cris Dobbins from The Noun Project

OUR EMBATTLED HERO.

Floppy

Disk 91%

Hard drive 2%

Flash/SD/

Memory card 2%

No guess 3%

Other 2%

WHAT IS THIS?

Save

91%

No guess 3%

Memory 1%

Storage 2%

Other 3%

WHAT DOES IT REPRESENT?

Save designed by Cris Dobbins from The Noun Project

DID YOU CATCH THAT? HIGH SCHOOLERS (WHO

MAY NOT HAVE EVER SEEN THIS IN REAL LIFE)

KNOW WHAT IT MEANS ON A SCREEN. THIS

ICON WORKS.

1. What is this a picture of?

2. What does this represent on a computer or phone?

Floppy dicks (pun intended)

TEEN FACT #5:

THEY’RE NOT VERY SMART.

WHEN WORKING WITH ICONS

DIGITAL AND

PHYSICAL ARE

CONFUSING

TEENAGERS DON’T THINK OF DIGITAL ACTIONS

AS DIFFERENT THAN REAL-WORLD ACTIONS.

Trash 98%

Other 2%

WHAT IS THIS?

Delete

39%

Delete/Recycle 4%Trash

40%

Delete/Trash 7%

Recycle Bin 8%

Other 2%

WHAT DOES IT REPRESENT?

1. What is this a picture of?

2. What does this represent on a computer or phone?

TEEN FACT #6:

THEY’RE A LITTLE FUNNY.

my hopes and dreams

WHAT IF

THERE ISN’T A

PHYSICAL

EQUIVALENT?

WHEN WORKING WITH WORDS

DO THE BEST

YOU CAN

WE KNOW THE FACEBOOK WALL ISN’T LOAD

BEARING, BUT WE UNDERSTAND WHAT WE’LL

SEE ON THIS WALL.

Browser designed by Max Miner from the thenounproject.com

WHEN WORKING WITH ICONS

DO THE BEST

YOU CAN

SO LOOK TO SEE IF THERE’S ANYTHING

SLIGHTLY RELATED THAT COULD BE A GOOD

ICON. WE DON’T USE GEARS ANYMORE, BUT

THE ICON IS UNDERSTOOD.

Gear 95%

Settings 3%

Other 2%

WHAT IS THIS?

WHAT DOES IT REPRESENT?

Settings

98%

Other 2%

Link designed by David Waschbüsch, from The Noun Project

OTHER ICONS HAVE STRETCHED A METAPHOR

WITH LESS SUCCESS. THIS ICON HAS BEEN

AROUND SINCE THE 90S, BUT HAS LOW

RECOGNITION.

Chain

77%

Paperclip 9%

Link 6%

No guess 6%

Other 2%

WHAT IS THIS?

Link

54%Connection 6%

Attachment 11%

Link account or

device 1%

Attachment/Link 2%

Link/Share 2%

Share 3%

No guess 15%

Other 6%

WHAT DOES IT REPRESENT?

WE’RE STILL FIGURING OUT SOME

THINGS. LIKE THIS ICON, WHICH WAS

FIRST DESIGNED IN 1981 BY NORM

COX. 1981!

“…we used to tell

potential users that the

image was an ‘air vent’ to

keep the window cool”

-- Norm Cox

GREAT A/B TESTS BY JAMES FOSTER AND

USABILITY TEST BY TEAMS AT VANGUARD (AND

MANY OTHERS) SHOW THAT THIS ICON DOES

BEST WHEN IT’S NEXT TO THE WORD “MENU.”

MENU

Students designed by Piotrek Chuchla from The Noun Project

IF YOU’RE UNSURE IF AN ICON WORKS FOR

YOUR AUDIENCE, ASK THEM. THEY HAVE ALL

THE ANSWERS.

REMEMBER:

Don’t insult

your users

Context matters Use metaphors

Digital is

confusing

Do the best you can Don’t kill my friend

Save designed by Cris Dobbins from The Noun Project

@LISPARDI

LISPARDI.COM