Visualizing Fitts’s Law as Applied to Optimal Web Content Width

“Fitts” is an interactive web application that relies on the user’s interactions for dynamic information output. Using HTML, CSS, the jQuery UI library, and JavaScript, the web app calculates the optimal ranges of widths for content layout based on a variation of Fitts Law: a decades old model for Human-Computer Interaction.

I completed the initial pre-visualizations of data provided by a study done at Berkeley that specifically studied Fitts’s Law as applied to web interactions. It used the Shannon theorem, a slight variation to the original Fitts model.

I used Alexa.com to data-mine the top 100 visited websites for content layout widths. The average was 1047 pixels wide. According to the Shannon algorithm used by the web app, the 1047 falls within the recommended first index of difficulty (ID), meaning that it is within the optimal range of content width in relation to browser size. The algorithm used was ID (index of difficulty) is equal to the log(base 2) of ((Object width/Browser-object width) + 1). The result was judged on the optimal index of difficulty, starting at 1.0 (ideal ID). The background changes in brightness based on the ID; 1-2 is optimal, 2-3 is secondary, and 3 or more is suboptimal.

I believe that Fitts’s Law could be used as a guiding principle for interaction design; precision is compromised yet expected because the incremental differences between indexes of difficulty is quite small.