As more and more data is generated in the world through things like apps and sensors, actually making sense of the data so it is useful becomes even more important. From a digital humanities perspective, questions like individual interpretation of data and alternative histories of visualization are considered.
Broad goal: Explore how historical visualizations can be recreated today using modern technology. From the recreation, learn about the original and about modern methods and techniques of visualization.
Specific goal: Recreate a visualization from Elizabeth Peabody, a 19th century educator, which aimed to be a method for charting and learning history.
My role: Lead designer, developer for initial prototype
Live site: http://shapeofhistory.net/
We considered distinctions between humanists, who have varying degrees of familiarity with technology, and anyone who might stumble across the project site online. We ultimately decided to design for the latter, as anyone who might come across the site should have an intriguing, positive experience. However, this wouldn’t necessarily be *anyone* as it would likely be through a link on a technology or digital humanities site, so we assumed some degree of familiarity with interesting digital things.
Initial design and prototype
In early 2016, I worked with another graduate student to quickly design and develop an initial version of the website as a proof-of-concept prototype. Our implemented design was restricted by our knowledge of web development - as neither of us were experts.
Design of version 2.0
Working with two undergraduate students under the direction of a professor, I created mockups of both low and hi fidelity to guide the development. I also created the visual assets for the site, including images for the “How it Works” section explaining the method. Through the process, we wrestled with a lot of design decisions. Three critical decisions affecting the site as a whole were the structure, navigation, and overall visual design. Many more decision decisions were made regarding the “modernization” of the historical method, particularly in regards to detailed interactions. Some of the ones I had the most fun working with are described below in detail.
Design Challenge: Structure, Navigation
In our initial prototype, we were more concerned about the detailed interactions with the chart rather than the overall navigation of the site. The focus is the method, so this makes sense. At this point, the navigation was a standard tabular structure with links to different pages in a navigation bar at the top.
Then, we moved onto a parallax method, because we wanted to emphasize the idea of telling a story through time - and it was trendy and modern which would emphasize the transition from the past to the present.
Finally, especially with the addition of the two undergraduate students and their expert programming skills, we worked towards a navigation method in the setup of the grid itself. To explain this idea, I first created a paper prototype and made a gif to show the movement around the page. Next, I made a slightly higher fidelity mockup using images from Sketch and Axure for the animation. The final result actually allows for three times of navigation interaction: clicking on the side navigation bars - which represent the boundaries of the square in the grid, panning across the entire site, and clicking on the navigation status icon in the top left corner to reveal a popup with descriptive titles of each section.