Visual design

Foundations Visual Design

The research question is all about where accidents happen in switzerland. Therefore it was obvious that we needed a map to visualize the locations of accidents. The user intuitively knows what the red dots on the map mean. Additional meta data was not added to the map, to keep it as simple as possible and because it would not help the user to answer the research question. Instead we provided the possibility to filter the data, this will change the data das is display, but not how it is displayed.

Data-Ink Ratio

Both visualization have a very high Data-Ink Ratio, because they were kept very minimalistic. For the map, only the following relevant parts were included:

• Borders of switzerland: The user doesn't need more context to see that this visualization only covers the country switzerland.
• Borders of the cantons: The user can quickly determine in which canton the accident happened. It helps to quickly guess where the accident occurred, without the need of cities as a reference.
• Lakes: The user can quickly determine where the accident happened, it also helps for navigating, in combination with the borders of the cantons.
• Accidents: Each accident is drawn with a red dot. When multiple accidents happened in the same region, it creates some sort of a heat map. This quickly shows where the most accidents happen.

Human perception

When the user lands on the visualization page, the focus of the eyes will directly divert to the map. This was achieved by scaling the map to the full width of the page content and because all other elements (slider, checkboxes, bar-chart) are well known by the user, because he knows them from other tools.

Tasks in Data Visualization

• Visualize: There are two visualizations for the data. One map and one bar chart, the user always see's both and can not choose between more types of visualizations.
• Filter: The data to be displayed can be filtered by the time it has occurred (slider), by the involved actors (checkboxes) and the street type (by clicking on the bar chart).
• Navigate: The user can navigate inside the map, to get a closer look at the spot he is interested in.

Interaction concept

For the interactions, we haved implemented very common methods.

• The map can be controlled by drag&drop and the mouse wheel to zoom on a computer, and pinch to zoom on a mobile device with a touchscreen. We have chosen this interaction, because all maps on the internet are controlled in this way, therefore it is very intuitive for the user and does not need a description how he has to control the map.
• For the bar chart, we have added a small description, telling the user to click on a street type to filter only for these types. Not every bar chart is clickable, therefore this guidance is important for the user.