Improving UX through bigger click and touch targets.

1. BIG ASS
BUTTONS

2. BIG ASS
BUTTONS
@brandmitchell

3. BIG ASS
BUTTONS
pxleyes@gmail.com @brandmitchell

4. Brandon Mitchell

5. Brandon Mitchell
Orlandoan Born and raised

6. Brandon Mitchell
Orlandoan Born and raised
Graduated UF in 2003 (go gators!)

7. Brandon Mitchell
Orlandoan Born and raised
Graduated UF in 2003 (go gators!)
Started at 352 in 2006

8. Brandon Mitchell
Orlandoan Born and raised
Graduated UF in 2003 (go gators!)
Started at 352 in 2006
@brandmitchell on twitter

9. Brandon Mitchell
Orlandoan Born and raised
Graduated UF in 2003 (go gators!)
Started at 352 in 2006
@brandmitchell on twitter
and everywhere else

12. Bigger is Better

13. Tvs

14. Tvs

15. iphones

16. iphones

17. Big ass fans

18. …maybe not

21. Bigger is Better

22. Bigger is Better
Sometimes

23. FItts’s Law

24. FItts’s Law
Fitts's Law is basically an empirical
model explaining speed-accuracy
tradeoff characteristics of human
muscle movement with some analogy to
Shannon’s channel capacity theorem.*
*Mehmet Göktürk, associate professor at the Department of Computer Engineering, Gebze
Institute of Technology in Turkey

25. FItts’s Law
T is the time to reach target.
D is the distance to the target.
W is the width of the target.

26. FItts’s Law
T is the time to reach target.
D is the distance to the target.
W is the width of the target.

27. FItts’s Law
T is the time to reach target.
D is the distance to the target.
W is the width of the target.

28. FItts’s Law
T is the time to reach target.
D is the distance to the target.
W is the width of the target.

29. FItts’s Law
T is the time to reach target.
D is the distance to the target.
W is the width of the target.

30. FItts’s Law
T is the time to reach target.
D is the distance to the target.
W is the width of the target.

31. Fitts’s Law

32. Fitts’s law

33. Fitts’s law

34. Fitts’s law

35. Fitts’s law

36. Ux standards

37. Ux standards
both google and apple have already been
dealing with fitts’s law for 7 years on mobile

38. Ux standards
both google and apple have already been
dealing with fitts’s law for 7 years on mobile
different designs, styles, and principles but
similar approach to interactive element sizing

39. Ux standards
google

40. Ux standards
apple

43. 52x14

47. 55x55

48. 55x55
44x44

49. 55x55
44x44

50. 55x55
84x16
44x44

51. Steering Law

52. Steering Law
…The steering law is a predictive model of human
movement, concerning the speed and total time with which
a user may steer a pointing device (such as a mouse or
stylus) through a 2D tunnel presented on a screen (i.e. with
a bird's eye view of the tunnel), where the user must travel
from one end of the path to the other as quickly as possible,
while staying within the confines of the path. One potential
practical application of this law is in modeling a user's
performance in navigating a hierarchical cascading menu.

53. Expected behavior

54. Expected behavior
what the user expects to happen should
match what actually happens on screen

55. Example

56. Example

57. Example

58. Example
.newsreel li.unit {
padding: 8px;
}
.newsreel li.unit a {
margin-top: 18px;
margin-left: 4px;
}
.newsreel li.unit:hover a {
color: #c74b15;
}

59. Example
.newsreel li.unit {
padding: 8px;
}
.newsreel li.unit a {
margin-top: 18px;
margin-left: 4px;
}
.newsreel li.unit:hover a {
color: #c74b15;
}

60. Example
.newsreel li.unit {
padding: 8px;
}
.newsreel li.unit a {
margin-top: 18px;
margin-left: 4px;
}
.newsreel li.unit:hover a {
color: #c74b15;
}
.newsreel li.unit a {
padding: 26px 8px 8px 12px;
}
.newsreel li.unit a:hover {
color: #c74b15;
}

61. Example
.newsreel li.unit {
padding: 8px;
}
.newsreel li.unit a {
margin-top: 18px;
margin-left: 4px;
}
.newsreel li.unit:hover a {
color: #c74b15;
}
.newsreel li.unit a {
padding: 26px 8px 8px 12px;
}
.newsreel li.unit a:hover {
color: #c74b15;
}

62. Example
.newsreel li.unit {
padding: 8px;
}
.newsreel li.unit a {
margin-top: 18px;
margin-left: 4px;
}
.newsreel li.unit:hover a {
color: #c74b15;
}
3.7x
.newsreel li.unit a {
padding: 26px 8px 8px 12px;
}
.newsreel li.unit a:hover {
color: #c74b15;
}

63. Example

64. Example

65. Example

66. Example

67. Example
…li.nav-item {
margin-left: 5px;
}
li.nav-item span {
display: block;
}
a {
display: block;
float: left;
padding: 0 1em;
line-height: 2em;
}

68. Example
…li.nav-item {
margin-left: 5px;
}
li.nav-item span {
display: block;
}
a {
display: block;
float: left;
padding: 0 1em;
line-height: 2em;
}

69. Example
…li.nav-item {
margin-left: 5px;
}
li.nav-item span {
display: block;
}
a {
display: block;
float: left;
padding: 0 1em;
line-height: 2em;
}
…li.nav-item {
margin-left: 45px;
}
li.nav-item span {
display: inline-block;
}

70. Example
…li.nav-item {
margin-left: 5px;
}
li.nav-item span {
display: block;
}
a {
display: block;
float: left;
padding: 0 1em;
line-height: 2em;
}
…li.nav-item {
margin-left: 45px;
}
li.nav-item span {
display: inline-block;
}
20x

71. Example

72. Example

73. takeaways

74. takeaways
Try to keep interactive elements over 44x44px.

75. takeaways
Try to keep interactive elements over 44x44px.
Padding is your friend.

76. takeaways
Try to keep interactive elements over 44x44px.
Padding is your friend.
Space out buttons and links to prevent mis-clicks.

77. takeaways
Try to keep interactive elements over 44x44px.
Padding is your friend.
Space out buttons and links to prevent mis-clicks.
What’s good for mobile is good for desktop.

78. takeaways
Try to keep interactive elements over 44x44px.
Padding is your friend.
Space out buttons and links to prevent mis-clicks.
What’s good for mobile is good for desktop.
Test, test, test!

79. Thanks