Icons Behaving Badly

@malekontheweb
Andrew Malek
http://malektips.com/
@malekontheweb

@malekontheweb
What do we mean by “Icons Behaving Badly”?

@malekontheweb
Quick Definition of Computer Icon
“…an icon is a pictogram or ideogram displayed on
a computer screen in order to help the user
navigate a computer system or mobile device. The
icon itself is a quickly comprehensible symbol of
a software tool, function, or a data file, accessible
on the system and is more like a traffic sign
than a detailed illustration of the actual entity it
represents.”
- Wikipedia

@malekontheweb
Susan Kare’s Original Mac Icons - http://kare.com/apple-icons/

@malekontheweb
Example of Windows 3.1 Icons © Microsoft

@malekontheweb
iPhone OS 1 Icons © Apple

@malekontheweb
Cave Paintings - https://commons.wikimedia.org/wiki/File:Rhinos_Chauvet_Cave.jpg

@malekontheweb
Hieroglyphics -
https://commons.wikimedia.org/wiki/File:Hieroglyphs_from_the_tomb_of_Seti_I.jpg

@malekontheweb
What Makes a Good Icon?
When possible, recognizable before activation
Photorealism not required
Culturally sensitive and aware
Consistent look with other icons
Explained when needed
Consistency in location and activatability
Tested

@malekontheweb
Recognizable Before Activation
User has general idea of icon function
“Five Second Rule”
Avoids fear of unknown
Very few are close to 100% recognizable…
Recognition may depend on context
Recognition can be symbolic
Once recognized, keep functionality static

@malekontheweb
“Five Second Rule”
“if it takes you more than 5 seconds to think of an
appropriate icon for something, it is unlikely that an
icon can effectively communicate that meaning.”
- Aurora Haley
Nielsen Norman Group
https://www.nngroup.com/articles/icon-usability/

@malekontheweb
Do These Pass the Test?
+





@malekontheweb
Hamburger Menu
2015 study: Ages 18-44, 80.6% understand
Ages 45-64, 52.4% understand
http://www.catalystnyc.com/2015/02/navigating-
mobile-hamburger-menu-anyone-get/
“The MENU button was clicked by 20% more
unique visitors than the HAMBURGER button.”
https://sitesforprofit.com/menu-eats-hamburger

@malekontheweb
Hamburger Menu (continued)
240,000 users, 6 weeks
4 variations of the hamburger menu all brought
more conversions (menu in different color, text-
only, hamburger menu + text, etc.)
https://conversionxl.com/blog/testing-
hamburger-icon-revenue/

@malekontheweb
Please consider labeled hamburger menus

@malekontheweb
Photoshop toolbars over years (from Adobe)

@malekontheweb
Icons Can be Symbolic
Icon does not have to look exactly like its
function, but can be a symbol that lets user
figure out intended function…

@malekontheweb
Floppy Means Save, Still???
Test given in 2013 by Lis Pardi, Experience
Designer
131 people in the 18-25 year range
96% recognized a floppy disk
80% said it represented save, with even others
with answers such as storage, memory, files
- http://boxesandarrows.com/icon-survey-results/

@malekontheweb
Floppy Disk are Obsolete, but…
“Dial” someone on telephone…
“Page” an employee…
Making a “mixtape”…

@malekontheweb
Keep Functionality Static
Never use an icon for two different functions
 : add an item to shopping cart, or view
shopping cart
 : close a dialog, or delete an item
 : compose, or edit
 : reply, or undo, or go back

@malekontheweb
“Realistic” Icons
Skeuomorphism – Looking like the real world
(icons courtesy Dellipack and Dellipack2, Smashing Magazine)

@malekontheweb
Windows 8 © Microsoft Corporation

@malekontheweb
Android 5 (Material Design) - Google

@malekontheweb
Photorealism Not Required
In flat design, icons do not have to be
photorealistic, but provide just enough visual
detail for someone to ascertain its function
Simple geometric shapes – shading not required,
but can be 3 dimensional if needed

@malekontheweb
Photorealism Not Required (2)
Some arguments for:
Removes visual clutter
Allows for more generic icons that can be
learned and used across apps
Fine details might be lost on tiny icons,
especially on mobile devices

@malekontheweb
Flat Design Icon Examples
 for a camera (image edit, view photo, photo
capture)
 for a credit card (billing, payment)
 for a bell (reminder, appointment)
 for a person (contact, personal details)

@malekontheweb
Flat / Material Design in Vogue
Ideas may change later …
Break mold,
… or offer icons now becoming familiar

@malekontheweb
Culturally Sensitive and Aware
-
b



@malekontheweb
Flags – for languages?

@malekontheweb
BioWare Social Network - http://social.bioware.com

@malekontheweb
Flags: Bad Idea for Language Switch
One language – many countries
One country – many languages
Country can change flags
“Nationalistic connotations”
- http://wplang.org/never-use-flags-language-
selection/
- https://www.w3.org/International/questions/qa-
link-lang#flags

@malekontheweb
Facebook language selection

@malekontheweb
Google language selection

@malekontheweb
Other Ideas
James Offer, experience designer, wrote a blog:
“Flags are Not Languages”
http://www.flagsarenotlanguages.com/

@malekontheweb
Where to Find Icons
Hard to find one perfect icon set
Often use variety of free and commercial sets
Flaticon - https://www.flaticon.com/
Font Awesome - http://fontawesome.io/
Iconmonstr - https://iconmonstr.com/
Icons8 - https://icons8.com/

@malekontheweb
Creating Icon Sets
Fontello - http://fontello.com/ - Create icon fonts
FontForge - https://fontforge.github.io/ - Open
source editor – Linux, Mac, Windows
FortAwesome - https://fortawesome.com/ -
Commercial - icons hosted via a CDN
IcoMoon - https://icomoon.io/app – SVG and
other formats, commercial options available

@malekontheweb
Consistent Look with Other Icons
 Avoid confusion – try to avoid combining:
 One color flat
 Multicolor flat
 Photorealistic
 With and without shading / perspective
 3D and top-down views
 Outline and solid
 All circular and all square, etc.
 Rotated and non-rotated
 Line stroke widths

@malekontheweb
Assorted E-Mail Icons

@malekontheweb
More Information…
Article “How to Combine Icons from Different
Sets in Your UI”, written by Andrew Burmistrov of
Icons8
“Consistency. Consistency. Consistency.”
https://icons8.com/articles/how-to-combine-
icons-from-different-sets-in-your-ui/

@malekontheweb
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/

@malekontheweb
https://material.io/guidelines/style/icons.html

@malekontheweb
Explained When Needed
If a standard system icon is not applicable
If chosen icon fails “five second rule”
If audience includes those less tech savvy
Especially on mobile, where tooltips do not apply

@malekontheweb
Labels – screenshots © Spotify, DailyMotion, StubHub, TuneIn

@malekontheweb
“The Importance of Labels”
Regarding Outlook 1998
Jensen Harris, Microsoft
“one change caused a total turnaround…”
https://blogs.msdn.microsoft.com/jensenh/2005/
11/01/the-importance-of-labels/

@malekontheweb
“Making Your Icons User-Friendly”
“Labels dramatically increase the usability of icons.”
Hannah Alvarez
August 4, 2015
https://www.usertesting.com/blog/2015/08/04/u
ser-friendly-ui-icons/

@malekontheweb
Icons and Labels
“In the battle of clarity between icons and labels,
labels always win.”
Joshua Porter, product designer
http://bokardo.com/archives/labels-always-win/
"A word is worth a thousand pictures.“
Bruce Tognazzini
http://www.asktog.com/columns/038MacUITrends.
html

@malekontheweb
Icon and Label Tips
Ensure icon and label can both be pressed
Keep text shown at all times, especially on
mobile
More tips:
https://www.smashingmagazine.com/2016/10/ic
ons-as-part-of-a-great-user-experience/

@malekontheweb
Consistency in Location & Activatability
Icons cannot be too small
to see …
to touch …
nor can they be jammed too close together…
nor can they be in confusing locations

@malekontheweb
Recommended Icon Size
Average adult finger is 11mm wide
https://uxplanet.org/tips-for-using-icons-in-your-
app-541a6728e7d4
Some say 16-20mm wide, based on MIT study
http://uxmovement.com/mobile/finger-friendly-
design-ideal-mobile-touch-target-sizes/

@malekontheweb
Recommended Icon Size (2)
UWP apps: actual target size minimum 7 mm square
https://docs.microsoft.com/en-
us/windows/uwp/input-and-devices/guidelines-for-
targeting
Material Design: physical size 9mm square (48x48dp)
https://material.io/guidelines/layout/metrics-
keylines.html
iOS: 44pt x 44pt (~ 7 mm square)
https://developer.apple.com/ios/human-interface-
guidelines/visual-design/adaptivity-and-layout/

@malekontheweb
Recommended Icon Size (3)
UWP: 2 mm padding, plus 2 mm padding
between targets, for total size minimum 11 x 11
mm
Material Design: 8dp space between icons, total
target size 7-10 mm
iOS: “Ensure adequate margins and spacing
around content”

@malekontheweb
Consistent Location
As shown earlier, “Bottom navigation”,
popularized in Material Design
https://material.io/guidelines/components/botto
m-navigation.html

@malekontheweb
Icon and Label / Button Positioning
Keep labels very close to icons
Icons typically appear to the left or above labels,
unless icon is purely decorative (LTR)
140 user study showed slower response times if icons
were to the right of a label
https://www.viget.com/articles/testing-accordion-
menu-designs-iconography
Same with buttons containing icons (on left)
https://ux.stackexchange.com/questions/56023/

@malekontheweb
Testing Icons
As with the rest of UI, icon testing is important
As with all tests, try to test a portion of your
actual users
If impossible (time & money), do hallway testing,
but note there will be biases
Assure testers there are no wrong answers
Can do in person with paper, online form, or
remotely

@malekontheweb
A/B Testing
Describe function, show 2+ icons, ask which one
is “best”.
Example: Download File
1.
2.
3.

@malekontheweb
Multiple Choice Testing
Show an icon, 3-4 options, ask which matches?

1. Change password
2. Security settings
3. Lock account from changes

@malekontheweb
Open-Ended Testing
Show an icon, ask user to write down a very brief
meaning on a card
At end, sort and tally results
Example:

@malekontheweb
Find the Icon Testing
Describe function, show wireframe / screenshot
Example: Browse for new music
(Screenshot from Spotify, labels cropped)

@malekontheweb
Example of Testing Result
Goal: View birthdays
Idea:
What people thought:
“factory”,
“smokestack”, “fire”
Decided Upon (with
label):

@malekontheweb
Example of Testing Result
Goal: Emoji of a face -
dizzy
Idea:
What people think:
“dead”, “astonished”
“Frustrated or
triumphant? You are
probably sending the
wrong signals by using
these 12 commonly
misunderstood emojis”
 http://dailymail.co.uk/sciencetech/
article-3549376/

@malekontheweb
Keep Icons From “Behaving Badly”
Keep them away from bright light
Don’t get them wet

@malekontheweb
Keep Icons From “Behaving Badly”
As possible, use icons already familiar to users
Don’t rely on photorealism
Be respectful of other cultures
Keep a consistent look throughout app/site
Label icons
Be consistent in location and usability
Test, test, test!

Icons Behaving Badly

More Related Content

Similar to Icons Behaving Badly

More from Andrew Malek

Recently uploaded

Icons Behaving Badly