Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

In Defense of the Floppy Disk

3,576 views

Published on

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, UXPA Boston 2015, Mad+UX 2015 and Big Design Dallas 2015

Published in: Design

In Defense of the Floppy Disk

  1. 1. IN DEFENSE OF THE FLOPPY DISK LIS PARDI @LISPARDI
  2. 2. Lis icon designed by Jay Bellew HI. I’M LIS.
  3. 3. Save designed by Cris Dobbins from The Noun Project I DEFEND THE FLOPPY DISK...
  4. 4. Download designed by Michael Zenaty from The Noun Project …AGAINST THIS ICON, WHICH INSTRUCTS YOU TO PUT YOUR FILE IN HALF A BOX.
  5. 5. 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.”
  6. 6. I ASKED LOTS OF THEM. *NOT ACTUAL GENDER RATIO Students designed by Piotrek Chuchla from The Noun Project
  7. 7. 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.
  8. 8. I LEARNED THAT 96% KNOW THIS IS A FLOPPY DISK. Save designed by Cris Dobbins from The Noun Project
  9. 9. 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
  10. 10. 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!
  11. 11. Students designed by Piotrek Chuchla from The Noun Project
  12. 12. 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.
  13. 13. 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.
  14. 14. CONSIDER THE AUDIENCE
  15. 15. WHEN WORKING WITH WORDS DON’T INSULT YOUR USERS
  16. 16. WHEN WORKING WITH ICONS DON’T INSULT YOUR USERS
  17. 17. WHEN WORKING WITH WORDS CONTEXT MATTERS
  18. 18. 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
  19. 19. WHEN WORKING WITH ICONS CONTEXT MATTERS
  20. 20. Magnifying glass by The Noun Project CONTEXT HELPS DECIPHER ICONS WHEN THEY HAVE TWO MEANINGS.
  21. 21. Magnifying Glass 95% Other 5% WHAT IS THIS?
  22. 22. Search 71% Zoom 24% Other 2% Search/Zoom 3% WHAT DOES IT REPRESENT?
  23. 23. Pencil designed by Blake Thompson, from The Noun Project CONTEXT ALSO HELPS WHEN AN ICON HAS MANY USES, LIKE THIS ONE.
  24. 24. 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?
  25. 25. Pencil 97% No guess 2% Pen 1% WHAT IS THIS?
  26. 26. 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?
  27. 27. Voicemail by The Noun Project CONTEXT HELPS WHEN YOU HAVE NO IDEA WHAT SOMETHING REPRESENTS.
  28. 28. Tape/Reco rding 53% No guess 32% Voicemail 5% Glasses 1% Phone 2% Spaghetti (and similar) 2% Other 2% WHAT IS THIS?
  29. 29. Voicemail 49% No guess 30% Recording/Voicem ail 1% Recording 12% Video 2% Message 1% Other 5% WHAT DOES IT REPRESENT?
  30. 30. 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.
  31. 31. OLD IS NOTHING NEW
  32. 32. WHEN WORKING WITH WORDS USE METAPHORS
  33. 33. Telegraph designed by Luke Anthony Firth from The Noun Project “DIPLOMATIC CABLES” AREN’T ACTUALLY SENT OVER A TELEGRAPH ANYMORE.
  34. 34. Telephone from The Noun Project PHONES DON’T HANG, BUT WE STILL END A CALL BY HANGING UP.
  35. 35. 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.
  36. 36. 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.
  37. 37. NOTHING ABOUT YOUR SUBARU REQUIRES YOU TO PULL, BUT YOU “PULL OVER” A CAR.
  38. 38. WHEN WORKING WITH ICONS USE METAPHORS
  39. 39. MOST HIGH SCHOOL STUDENTS DON’T SEE MUCH MAIL, BUT THEY UNDERSTAND THE ICON.
  40. 40. Envelope 95% Email 2% Other 3% WHAT IS THIS?
  41. 41. Email 61% Mail 12% Mail/Message 2% Email/Message 10% Message 9% Send 3% Other 3% WHAT DOES IT REPRESENT?
  42. 42. THIS IS A PAY PHONE RECEIVER, WHICH NO ONE HAS SEEN IN DECADES. (EXACT DATE MAY NOT BE ACCURATE.)
  43. 43. Phone 99% Call 1% WHAT IS THIS?
  44. 44. Call/Dialer 95% Other 5% WHAT DOES IT REPRESENT?
  45. 45. Folder designed by Sergio Calcara, from The Noun Project TEENAGERS DON’T DO A LOT WITH MANILA FOLDERS, AND YET THEY UNDERSTAND THE ICON.
  46. 46. Folder 88% Other 3% File 9% WHAT IS THIS?
  47. 47. Folder 76% Directory 2% File 10% File/Folder 2% Save 2% Open 2% Other 6% WHAT DOES IT REPRESENT?
  48. 48. 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.
  49. 49. 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?
  50. 50. Contacts 63% Profile 13% Information 1% No Guess 18% Address Book 2% Other 3% WHAT DOES IT REPRESENT?
  51. 51. 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.
  52. 52. Save designed by Cris Dobbins from The Noun Project OUR EMBATTLED HERO.
  53. 53. Floppy Disk 91% Hard drive 2% Flash/SD/ Memory card 2% No guess 3% Other 2% WHAT IS THIS?
  54. 54. Save 91% No guess 3% Memory 1% Storage 2% Other 3% WHAT DOES IT REPRESENT?
  55. 55. 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.
  56. 56. 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.
  57. 57. WHEN WORKING WITH ICONS DIGITAL AND PHYSICAL ARE CONFUSING
  58. 58. TEENAGERS DON’T THINK OF DIGITAL ACTIONS AS DIFFERENT THAN REAL-WORLD ACTIONS.
  59. 59. Trash 98% Other 2% WHAT IS THIS?
  60. 60. Delete 39% Delete/Recycle 4%Trash 40% Delete/Trash 7% Recycle Bin 8% Other 2% WHAT DOES IT REPRESENT?
  61. 61. 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
  62. 62. WHAT IF THERE ISN’T A PHYSICAL EQUIVALENT?
  63. 63. WHEN WORKING WITH WORDS DO THE BEST YOU CAN
  64. 64. 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
  65. 65. WHEN WORKING WITH ICONS DO THE BEST YOU CAN
  66. 66. 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.
  67. 67. Gear 95% Settings 3% Other 2% WHAT IS THIS?
  68. 68. WHAT DOES IT REPRESENT? Settings 98% Other 2%
  69. 69. 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.
  70. 70. Chain 77% Paperclip 9% Link 6% No guess 6% Other 2% WHAT IS THIS?
  71. 71. 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?
  72. 72. WE’RE STILL FIGURING OUT SOME THINGS. LIKE THIS ICON, WHICH WAS FIRST DESIGNED IN 1981 BY NORM COX. 1981!
  73. 73. “…we used to tell potential users that the image was an ‘air vent’ to keep the window cool” -- Norm Cox
  74. 74. 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
  75. 75. 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.
  76. 76. REMEMBER: Don’t insult your users Context matters Use metaphors Digital is confusing Do the best you can Don’t kill my friend
  77. 77. Save designed by Cris Dobbins from The Noun Project @LISPARDI LISPARDI.COM

×