This responsive long form web page is a beautiful anomaly in web mechanics. This site, intended to inform viewers about the overwhelming global gender disparity in politics, education, health, and economy features a truly unique mode of interactivity.
As you can see here, users are presented with a column of information to the left, and a nuanced infographic to the right. The sizes of the colored circles indicate the magnitude of the gender disparity in the country they represent. But what truly makes this site an anomaly is how the dots smoothly morph and augment as users scroll through newer and newer information.
Â
As the user scrolls through this single long form web page, the circles to the right rescale and reorganize to coordinate with the information on the left. So now that the user has scrolled down to view data about the overall national rankings of the gender gap, the circles have fluidly aligned themselves into an easy to read line graph. What’s more, the site’s mechanic is so nuanced, that as users scroll through the rankings each country is highlighted on the graph.
Here we can see another way that this site’s mechanic is used to animate the data it presents. Now that users have scrolled past the rankings, and moved on to looking at the averages of various geopolitical regions, the same line graph receives an ever-fluid median line. As users scroll through the data, the median moves left and right, to demonstrate the average gender disparity score of the region in question. This is an example of how the site’s responsive mechanism can continually, and fluidly, re-present visual data in the way most pertinent to the information at hand.
At the end of the experience, users scroll down to a customizable infographic. Here they can manipulate the data and information they want to examine, and the little circles will smoothly re-augment themselves accordingly. This page, and the site as a whole, is a great example of how creative web mechanics can completely re-imagine the way information is presented. Rather than letting their data sit on a page, too dense and tedious to understand, they’ve decided to bring the information to life. By adding a bit of dynamism to an otherwise stuffy and likely boring rundown of geopolitical data, this site has brought it to life. In doing so, they’ve drawn users into an informational experience so they might understand and register the information more potently.
Two-NÂ is a top website design in the Non-Profit industry.
