Conceptualized for a course on information visualization, this project calculates the optimal width for content based on the width of its containing web browser using an algorithm modeled after Fitts’s Law.

Fitts’s Law is a decades old principle used in Human-Computer Interaction to predict the optimal distance to the target based on its width. Although originally a concept applied to analog devices, research at Berkeley adapted the model’s algorithm into a web-based experiment, exploring how the principle applies to digital interfaces.

function idx(val) {
  return Math.floor( Math.log((val / (width - mainW)) + 1) / Math.LN2 * 1000) / 1000;

The algorithm is based on an adjusted model, which uses the effective target width. It is also the model used in the Berkeley study.

Fitts interaction states