big ass buttons
Post on 28-Jun-2015
188 Views
Preview:
DESCRIPTION
TRANSCRIPT
BIG ASS BUTTONS
BIG ASS BUTTONS
@brandmitchell
Brandon Mitchell
Brandon MitchellOrlandoan Born and raised
Brandon MitchellOrlandoan Born and raised
Graduated UF in 2003 (go gators!)
Brandon MitchellOrlandoan Born and raised
Graduated UF in 2003 (go gators!)
Started at 352 in 2006
Brandon MitchellOrlandoan Born and raised
Graduated UF in 2003 (go gators!)
Started at 352 in 2006
@brandmitchell on twitter
Brandon MitchellOrlandoan Born and raised
Graduated UF in 2003 (go gators!)
Started at 352 in 2006
@brandmitchell on twitterand everywhere else
Bigger is Better
Tvs
Tvs
iphones
iphones
Big ass fans
…maybe not
Bigger is BetterSometimes
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
T is the time to reach target.D is the distance to the target.W is the width of the target.
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
T is the time to reach target.D is the distance to the target.W is the width of the target.
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
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
Fitts’s law
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
52x14
55x55
55x55
44x44
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
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 { padding: 8px; } .newsreel li.unit a { margin-top: 18px; margin-left: 4px; } .newsreel li.unit:hover a { color: #c74b15; }
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; }
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; }
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; }
3.7x
Example
Example
Example
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: 5px; } li.nav-item span { display: block; } a { display: block; float: left; padding: 0 1em; line-height: 2em; }
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; }
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
Example
Example
takeaways
takeawaysTry to keep interactive elements over 44x44px.
takeawaysTry to keep interactive elements over 44x44px.
Padding is your friend.
takeawaysTry to keep interactive elements over 44x44px.
Padding is your friend.
Space out buttons and links to prevent mis-clicks.
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.
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.
Test, test, test!
Thanks
top related