{"id":140,"date":"2014-11-20T11:25:45","date_gmt":"2014-11-20T18:25:45","guid":{"rendered":"http:\/\/xiaan.com\/blog\/?p=140"},"modified":"2024-02-09T15:11:07","modified_gmt":"2024-02-09T22:11:07","slug":"driving-usability-with-empirical-data","status":"publish","type":"post","link":"https:\/\/xiaan.com\/blog\/2014\/11\/driving-usability-with-empirical-data\/","title":{"rendered":"Driving Usability With Empirical Data"},"content":{"rendered":"\n

Too often, I work with folks that dismiss many years of interface design and information architecture experience as “your opinion” and are eager to offer their own in place of good design practices. To avoid such “he said, she said” arguments (oh, and do the right thing for the user), I\u2019m always happier when I\u2019ve got some empirical data to guide my efforts when (re)designing my user interfaces.<\/p>\n\n\n\n

First and foremost, data doesn’t lie. It’s often easier to champion a user interface change when there are charts, graphs, and statistics to back you up. Analyze the data and present it to stakeholders in a simple, straightforward way to support your decisions. To that end, prepare to be surprised. Sometimes the choice you thought was obvious isn’t the right one once you analyze the data.<\/p>\n\n\n\n

The Requirement<\/h2>\n\n\n\n
\n

As an advanced user, in order to find the best result from a set, I wish to filter the result set by metric A, a continuous variable between 0 and 1 inclusive, shown to the user as a percent value.<\/p>\n<\/blockquote>\n\n\n\n

The Previous Implementation<\/h2>\n\n\n\n

A slider control was shown to users that allowed them to choose a value between 0% and 100% in 5% increments. Simple enough, but as I talked to users and examined the Google Analytics for the site, I found that very few users were using this filter. Why?<\/p>\n\n\n\n

Analyzing the Data<\/h2>\n\n\n\n

Metric A is a great discriminator for our data set, so why weren’t users taking advantage of this filter? I grabbed a data set of 500,000 values from our production database and started my analysis. First, some summary statistics generated with R:<\/p>\n\n\n\n

    Min.  1st Qu.   Median     Mean  3rd Qu.     Max. \n0.000000 0.000000 0.006135 0.072020 0.098200 1.000000  \n<\/pre>\n\n\n\n
A basic histogram:<\/p>\n\n\n\n
R<\/span><\/span><\/path><\/path><\/svg><\/span>
png<\/span>(<\/span>'metricA_hist.png'<\/span>, <\/span>width<\/span>=<\/span>600<\/span>, <\/span>height<\/span>=<\/span>400<\/span>, <\/span>units<\/span>=<\/span>'px'<\/span>)<\/span><\/span>\nhist<\/span>(d, <\/span>breaks<\/span>=<\/span>seq<\/span>(<\/span>0<\/span>,<\/span>1<\/span>,<\/span>by<\/span>=<\/span>0.02<\/span>), <\/span>freq<\/span>=<\/span>TRUE<\/span>, <\/span>main<\/span>=<\/span>'Metric A Distribution'<\/span>, <\/span>xaxt<\/span>=<\/span>'n'<\/span>, <\/span>xlab<\/span>=<\/span>'Value (%)'<\/span>)<\/span><\/span>\naxis<\/span>(<\/span>1<\/span>, <\/span>at<\/span>=<\/span>seq<\/span>(<\/span>0<\/span>,<\/span>1<\/span>,<\/span>by<\/span>=<\/span>0.2<\/span>), <\/span>labels<\/span>=<\/span>seq<\/span>(<\/span>0<\/span>,<\/span>100<\/span>,<\/span>by<\/span>=<\/span>20<\/span>))<\/span><\/span>\ndev.off<\/span>()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"Metric<\/figure>\n\n\n\n
And a density plot:<\/p>\n\n\n\n
R<\/span><\/span><\/path><\/path><\/svg><\/span>
png<\/span>(<\/span>'metricA_density.png'<\/span>, <\/span>width<\/span>=<\/span>600<\/span>, <\/span>height<\/span>=<\/span>400<\/span>, <\/span>units<\/span>=<\/span>'px'<\/span>)<\/span><\/span>\nden <\/span>&<\/span>amp;amp;amp;lt; <\/span>-<\/span> <\/span>density<\/span>(d)<\/span><\/span>\nplot<\/span>(den, <\/span>main<\/span>=<\/span>'Metric A Density'<\/span>, <\/span>xaxt<\/span>=<\/span>'n'<\/span>, <\/span>xlab<\/span>=<\/span>'Value (%)'<\/span>)<\/span><\/span>\npolygon<\/span>(den, <\/span>col<\/span>=<\/span>'skyblue'<\/span>)<\/span><\/span>\naxis<\/span>(<\/span>1<\/span>, <\/span>at<\/span>=<\/span>seq<\/span>(<\/span>0<\/span>,<\/span>1<\/span>,<\/span>by<\/span>=<\/span>0.2<\/span>), <\/span>labels<\/span>=<\/span>seq<\/span>(<\/span>0<\/span>,<\/span>100<\/span>,<\/span>by<\/span>=<\/span>20<\/span>))<\/span><\/span>\ndev.off<\/span>()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"Metric<\/figure>\n\n\n\n
Some observations:<\/p>\n\n\n\n