big ass buttons

BIG ASS BUTTONS

BIG ASS BUTTONS

@brandmitchell

BIG ASS BUTTONS

@[email protected]

mailto:[email protected]

Brandon Mitchell

Brandon MitchellOrlandoan Born and raised


Graduated UF in 2003 (go gators!)



Started at 352 in 2006




@brandmitchell on twitter




@brandmitchell on twitterand everywhere else

Bigger is Better

iphones

Big ass fans

…maybe not

Bigger is BetterSometimes

FItts’s Law

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

FItts’s Law

T is the time to reach target.D is the distance to the target.W is the width of the target.

Fitts’s Law

Fitts’s law

Ux standards

Ux standardsboth google and apple have already been

dealing with fitts’s law for 7 years on mobile

Ux standardsboth 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

Ux standardsgoogle

Ux standardsapple

55x55

44x44

55x55

44x44

84x16

Steering Law

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.

Expected behavior

Expected behaviorwhat the user expects to happen should match what actually happens on screen

Example

Example

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

Example


.newsreel li.unit a { padding: 26px 8px 8px 12px; } .newsreel li.unit a:hover { color: #c74b15; }

Example


.newsreel li.unit a { padding: 26px 8px 8px 12px; } .newsreel li.unit a:hover { color: #c74b15; }

3.7x

Example

Example

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

Example


…li.nav-item { margin-left: 45px; } li.nav-item span { display: inline-block; }

Example


…li.nav-item { margin-left: 45px; } li.nav-item span { display: inline-block; }

20x

Example

takeaways

takeawaysTry 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.




What’s good for mobile is good for desktop.

Test, test, test!

Thanks

big ass buttons

Design