A web-based dashboard has been developed to visualize the impact that various growth, energy and emission, and transportation policies have on urban livability in Vancouver, Victoria, and Price George. This dashboard can be used to inform long range urban planning.
Work on the dashboard began with several prototype sketches created in Balsamiq, which allowed for quick iterations of the design. These designs are shown in the following image.
Once the prototypes were approved by the researchers, work began to implement the design as a web app.
A previous version of the dashboard used the Bootstrap framework for user interface (UI) elements and to provide a responsive layout. Esri Inc. released the Calcite Design System in 2021, close to the time of development. Hence, the decision was made to replace the user interface components with Calcite, while maintaining the responsive behaviour and tabbed interface from Bootstrap. The dropdown elements were replaced with Calcite’s select component. Cards from Calcite were used for each scenario in the comparison view and tooltips were added to most elements to provide help when hovering the mouse over the interface components. Using the Calcite library helped to achieve a consistent and clean look across the scenario explorer and comparison tabs.
Screenshots of the previously developed dashboard compared with the current version
User testing was performed once the dashboard was feature complete. Further changes were made to the original design of the app as a result of this review process.
The comparison view was designed as a three row by four column grid, with the rows representing cities and the columns representing the scenarios. Due to the amount of text, images, and charts on each card, they couldn’t be resized smaller for mobile devices without reducing legibility or the amount of information present. Thus, when the browser window was resized, the cards would overflow to the next row, making it difficult to scan across to compare each city, as shown in the image below.
The decision was made to remove this overflow behaviour and make the three by four grid scrollable if the screen size was too small to display all the cards. When the browser window is small enough to display a single card across the entire width, the cards overflow into a single column of cards. This makes the app more usable when viewing it on a smartphone, since the scenarios can be explored by scrolling through a single column of cards.
An interesting graph used in the dashboard is the violin chart, which show the distance of buildings to open space, commercial, public space, bike lanes and transit. In the original design, a scatter chart was used with semi-transparent circles that represented each building. When more of the transparent circles overlapped, the colour in the chart would be more intense, indicating that there were a greater number of buildings at that distance. However, this method of visualizing the data made it difficult to comprehend the distribution of points because one needed to distinguish between variations in intensity. With a violin graph, a greater number of buildings at a distance is represented by a wider shape, which more clearly shows the distribution of values.
The scatter chart compared with the violin chart
Several comments from the review were related to difficulty comparing scenarios because of inconsistencies with how the data were presented in the charts and map.
The colours used on the map to symbolize the buildings were updated to better match the corresponding hues on the accompanying charts.
The building selection was originally cleared when the theme was changed. This selection is now maintained to compare the metrics for selected buildings across different themes.
The charts that have land use labels along the x-axis were updated to always show land use categories that have a zero value instead of removing them. The order of the land use categories is also consistent with the order of the legend and is the same across all the charts. These changes made data comparisons easier as the land use categories no longer shift or disappear when the scenario is changed.
In the original design, both horizontal and vertical bar charts were used depending on the chosen theme, while the final design is more consistent and only has vertical bar charts.
A few of the review comments expressed uncertainty about the dashboard’s functionality because of the placement of elements or a lack of documentation and visual feedback.
The Reset Camera and Clear Selection buttons were moved to the top right of the map because they are actions that are performed on the map and can be more easily seen when manipulating the view.
When the user selects the 3D view button, the camera is now tilted down to show the buildings from an oblique view. This was updated because the previous version only enabled the ability to tilt the camera when the button was clicked and did not provide the user with any change to the map indicating the camera rotation could be manipulated.
The ability to select buildings was not easily discoverable since it requires the use of the ALT key. Thus, a popup was added to appear when the dashboard is opened explaining how to select groups of buildings.