Is This a Button? A Question Your Users Should Never Ask.

Is This a Button?
A Question Your
Users Should
Never Ask.
Andrew Malek http://malektips.com/ @malekontheweb

@malekontheweb
button [buht-n] noun: (in a
graphical user interface) a
small, button-shaped or
clearly defined area that
the user can click on or
touch to choose an option.

@malekontheweb
Save
Delete
Subscribe!!!

@malekontheweb
Ghost Button Advantages
• Often attributed to iOS7’s introduction, so
people are starting to recognize these more
often
– https://uxplanet.org/ghost-buttons-in-ux-design-
4cf3717334f8?gi=a0173e1bc0e9
• Display minimalism, can be a secondary button
that doesn’t draw as much attention as primary
CTA
– https://www.smashingmagazine.com/2018/01/ghost-
button-design/

@malekontheweb
Ghost Button Disadvantages
• When placed on a busy background, button can
fade into the page and not be noticeable
• Multiple tests show solid buttons outperform
ghost buttons by 7%, 20%, or cause users to
spend 20% more time trying to perform a
particular function
– “Ghost Buttons – Why You Should Be Afraid”
– Bartholomew Fish
– https://blog.prototypr.io/introduction-what-are-ghost-
buttons-a87af5c8cee8?gi=3ad94b1dd64f

@malekontheweb
Floating Action
Buttons

@malekontheweb
Floating Action Buttons
• According to Google: “A floating action button (FAB)
performs the primary, or most common, action on
a screen. It appears in front of all screen content,
typically as a circular shape with an icon in its
center.”
• Actually looks like a button – sticks out from
content
• Often appear on screen edges, near where user’s
thumbs are located
• Separates primary action from other buttons

@malekontheweb
FAB Disadvantages
• Can appear over content, distracting from user
experience
– Teo Yu Siang
– https://medium.com/tech-in-asia/material-design-why-
the-floating-action-button-is-bad-ux-design-acd5b32c5ef
• Many screens have multiple actions that can be
deemed “primary” – which is most important?
– Cassandra Naji
– https://www.justinmind.com/blog/3-alternatives-to-the-
floating-action-button/

@malekontheweb
Borderless
Buttons

@malekontheweb
Apple’s Thoughts on Button Borders
• “Consider adding a border or a background
only when necessary. By default, a system
button has no border or background. In some
content areas, however, a border or background
is necessary to denote interactivity. In the Phone
app, bordered number keys reinforce the
traditional model of making a call, and the
background of the Call button provides an eye-
catching target that’s easy to hit.”

@malekontheweb
Borderless Buttons and iOS Opinion
• Duncan Champney, software development
manager:
“Personally, I think Apple made a mistake by getting
rid of the borders on buttons. We've been trained
for 30+ years now to expect rounded rectangles of
some sort around buttons… However, resistance is
futile. If you want to play in Apple's sandbox, you
follow their lead.”
– https://forums.macrumors.com/threads/ios-7-button-
with-border-apple-uses-it.1647744/

@malekontheweb
Make These Stand Out
• Ensure all “buttons” share the same color that is
not used elsewhere in the app (similar to how
hyperlinks should all be same shade of blue)
• Be careful using icons as buttons - and static
icons – in the same app or website, as people
will try to press static icons and get frustrated
• Place “buttons” in standard places in the app –
top bar, bottom navigation, etc.

@malekontheweb
Covering Topics…
• Fitts's Law
• Button Contrast
• Destructive Actions
• Icon Buttons
• Doherty Threshold and Response Time

@malekontheweb
Fitts’s Law
• Named for psychologist Paul Morris Fitts Jr.
• “the time required to rapidly move to a target
area is a function of the ratio between the
distance to the target and the width of the
target”
– https://en.wikipedia.org/wiki/Fitts%27s_law

@malekontheweb
Fitts’s Law in UI Terms
• The goal is to “…reduce the distance from one
point to the next and make the target object
large enough to enable prompt detection and
selection of interactive elements without
sacrificing accuracy”
– https://www.interaction-
design.org/literature/article/fitts-s-law-the-
importance-of-size-and-distance-in-ui-design

@malekontheweb
Let’s Start with Size Minimums…
• Touch targets should be larger on phones,
tablets, or other touchscreens due to
imprecision of finger versus mouse pointer
• Buttons placed too close together will cause
users to accidentally press incorrect button

@malekontheweb
Apple: https://developer.apple.com/design/tips/

@malekontheweb
Mobile Guidelines
• Android: targets at least 48dp x 48dp (~ 0.3 inches
or 7-10 mm square)
– https://support.google.com/accessibility/android/answer/
7101858?hl=en
• iOS: targets a minimum of 44pt x 44pt
– https://developer.apple.com/design/human-interface-
guidelines/ios/visual-design/adaptivity-and-layout/
• Windows: 40x40 pixels with 5 pixels in between
– https://docs.microsoft.com/en-
us/windows/desktop/uxguide/inter-touch

@malekontheweb
Buttons Can Be Too Big
• “If buttons get too big, users start having
problems perceiving them as clickable buttons—
and sometimes even discerning them as
discrete elements.”
– “Common Misconceptions About Touch”
– Steven Hoober
– https://www.uxmatters.com/mt/archives/2013/03/co
mmon-misconceptions-about-touch.php

@malekontheweb
https://developer.apple.com/design/human-
interface-guidelines/ios/visual-design/adaptivity-
and-layout/

@malekontheweb
Suggestions
• Heed device minimum guidelines
• Whitespace between buttons
• Avoid multi-line ghost or borderless buttons (UI
element may not look like a button anymore)
• Don’t extend all the way to screen edges
• In complicated forms, consider wider main CTA
button than secondary buttons – for emphasis
• Test, test, test!

@malekontheweb
Button Position and Distance Matters
• Location consistency throughout app – don’t move
standard buttons around
• Place buttons near related visual elements –
submit button right below last form input, etc.
• Consider screen edges - easier to access, i.e.
bottom bar navigation seen more often
– “Fitts's Law: The UX Hack that Will Strengthen Your
Design”
– Clifford Chi
– https://blog.hubspot.com/marketing/fitts-law

@malekontheweb
Button Contrast

@malekontheweb
Why Contrasting Colors?
• Device may be used in bright light
• Device may be used in area with inconsistent /
poor lighting
• Just as people scan text, they scan images and
shapes; elements that don’t stick out may not be
processed at first glance (or ever!)
• Accessibility for those with vision impairments

@malekontheweb
Test
Test
Test
Test

@malekontheweb
Contrast Against Background
• Complicated backgrounds can prevent buttons
from being noticed
– Roman Rudnik
– https://uxplanet.org/how-to-create-an-effective-call-to-
action-button-a-comprehensive-guide-
57ecfe78d81b?gi=1fbc1eb7b57e
• If using gradient backgrounds, test [color] contrast
against brightest and darkest color in gradient
– Cathy O’ Connor
– https://www.smashingmagazine.com/2014/10/color-
contrast-tips-and-tools-for-accessibility/

@malekontheweb
Accessibility
• Millions of people have some sort of vision
disability that affects ability to differentiate lightly-
contrasting text
• “Colour (color) blindness (colour vision deficiency,
or CVD) affects approximately 1 in 12 men (8%) and
1 in 200 women in the world.”
– http://www.colourblindawareness.org/colour-blindness/
• In some cases, highly contrasting colors can still be
noticeable to some degree by those with color
blindness

@malekontheweb
WCAG 2.0
• W3C working group has published Web Content
Accessibility Guidelines regarding contrast
• Success criteria for “accessible” text depends on
factors including text size and contrast ratio
between foreground text and background
– AA: 4.5:1 contrast ratio minimum (approx. 20/40)
– AAA: 7:1 contrast ratio minimum (approx. 20/80)
– https://www.w3.org/TR/UNDERSTANDING-
WCAG20/visual-audio-contrast-contrast.html

@malekontheweb
WCAG 2.0 Compliancy Tools
• Color Safe
– http://colorsafe.co/
• WebAIM Color Contrast Checker
– https://webaim.org/resources/contrastchecker/
• iOS: Color Contrast (Philip Strain)
• Android: Accessibility Scanner

@malekontheweb
Destructive
Actions

@malekontheweb
Destructive Actions – Removing:
• A file on disk or in the cloud
• All system or device settings
• All open tabs in a web browser
• One’s user account, or subscription, for a
system or service
• The currently-edited document before saving it

@malekontheweb
People Don’t Read… They Skim
• “More realistically, users will read about 20% of
the text on the average page.”
– Jakob Nielsen
– https://www.nngroup.com/articles/how-little-do-
users-read/
• “We don’t read pages. We scan them.”
– Steve Krug
– http://www.sensible.com/chapter.html and book
“Don’t Make Me Think”

@malekontheweb
People Ignore Dialog Boxes & Alerts
• Thanks to poorly-written and long dialog boxes
and alerts, people tend to ignore many of them.
• Through previous behavior, people often just
press the right-most button to get rid of the
alert…
• Or on desktop/laptop devices, people will press
ENTER to get rid of the #$@! box..
• Jakob Nielsen: “people read only about 10% of
the text that they supposedly "agreed" to.”

@malekontheweb
What Can We Do?
Bad Button Text Better…
OK Delete Backup
Cancel Cancel
Subscription
Yes Remove Draft
No Close All Tabs

@malekontheweb
More on Button Microcopy
• Tone of the text (friendly, alerting) is important
• “Never mind affords a more casual approach to
this microcopy, and might be more suitable for
brands that are notoriously laid-back, like Slack.”
• “…doesn’t work for every company … Oops! Look
like we just lost your $10,000 transaction.”
– Microcopy for destructive actions
– Jakub Paniączyk
– https://www.invisionapp.com/inside-design/microcopy-
destructive-actions

@malekontheweb
Destructive Button Position
• Destructive buttons should be on left or right based
on device interface guidelines and whether the
button is expected to be pressed more often.
• Do not put the button in the middle of 3+ buttons
unless you do not expect it to be pressed often –
serial position effect states people notice /
remember the first and last items of a series
– Laws of UX
– https://lawsofux.com/serial-position-effect

@malekontheweb
https://ux.stackexchange.com/questions/49991/

@malekontheweb
Color Caveats
• Not all cultures treat “red” as danger and “green”
as safe.
• Red or green buttons may not stick out for
those with certain types of color-blindness

@malekontheweb
Why Icon Buttons?
• Smaller buttons – take up less room and can fit
more on the display
• Aesthetic Appeal
• Don’t need to translate icons to other countries
… correct?
• “A picture is worth 1,000 words” … correct?

@malekontheweb
Myth #13: Icons enhance usability
• UX Myths article
– https://uxmyths.com/post/715009009/myth-icons-
enhance-usability
• Discusses how without previous experience with
an image, how are users to know what it means?
• ‘Nothing says “manage” like “manage”. In other
words, in the battle of clarity between icons and
labels, labels always win.’

@malekontheweb
Icon vs. Labels Case Study
• “35 users interact with 190 icons on a series of
Android apps”…
• Icons with labels – users predicted action 88% of
time (note – not 100%!)
• Icons without labels – 60% of time
• Icons unique to app without labels – 34% of time
– https://www.usertesting.com/blog/user-friendly-ui-
icons/
– August 4, 2015

@malekontheweb
Doherty Threshold
and Response
Time

@malekontheweb
The Doherty Threshold
• “When a computer and its users interact at a
pace that ensures that neither has to wait on
the other, productivity soars … and its quality
tends to improve. Few online computer systems
are this well balanced; few executives are aware
that such a balance is economically and
technically feasible.”
– “The Economic Value of Rapid Response Time “
– https://jlelliotton.blogspot.com/p/the-economic-
value-of-rapid-response.html

@malekontheweb
Perceived Performance
• Some tasks after pressing a button will take time
– Credit card verification
– File upload
– User credentials validation
• If people press a button and nothing quickly
happens, they may grow confused.
• Instantaneous response is beneficial, but <1sec
wait is crucial for seamless navigation (NNG)

@malekontheweb
Perceived Performance (2)
• Show user that the system has responded to the
request
• Makes the system “seem” faster even if there is
a delay
• Might prevent user from abandoning app or
website
• Often by showing spinner, or progress bar or
other image

@malekontheweb
Animated Button Options
• Angular 2+ Promise Buttons
– https://github.com/johannesjo/angular2-promise-
buttons
• Ladda – “Buttons with built-in loading indicators”
(even works with IE11)
– https://github.com/hakimel/Ladda
• React Native Spinner Button
– https://github.com/simformsolutions/react-native-
spinner-button

@malekontheweb
In Summary
• The age of buttons all looking like physical
buttons may be over…
• Still need to consider techniques to increase
usability, including:
– Fitts's Law
– Button Contrast
– Destructive Actions
– Icon Buttons
– Doherty Threshold and Response Time

Is This a Button? A Question Your Users Should Never Ask.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Is This a Button? A Question Your Users Should Never Ask.

Ähnlich wie Is This a Button? A Question Your Users Should Never Ask. (20)

Mehr von Andrew Malek

Mehr von Andrew Malek (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Is This a Button? A Question Your Users Should Never Ask.