In Defense of the Floppy Disk
77
IN DEFENSE OF THE FLOPPY DISK LIS PARDI @LISPARDI
description
Despite data showing that college students understand the floppy disk icon, designers still insist that it doesn't make sense to people who've never seen one. This presentation details the results of a larger survey with teenagers which shows the save icon still works, as do other common icons. Delivered at Confab HigherEd 2014 and UXPA Boston 2015
Transcript of 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)
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?
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
