October 03, 2016
Back in April, the City of Chicago partnered with one of the Smart Chicago Collaborative anchor programs, the Civic User Testing Group (CUTGroup), to host a UX testing feedback session attended by more than 20 Chicago residents for OpenGrid. The purpose of these tests was not only to engage all of Chicago in the civic app development process, but provide valuable information to OpenGrid developers seeking to enhance the apps’ usability and performance. The newest version contains improvements to OpenGrid to make it easier to use. The latest release contains friendlier language, an improved user interface to highlight more important features while deemphasizing more technical options, and reducing the number of mouse clicks to see data. Below are some of the highlights of this release.
During the CUTGroup testing, we saw that there were some opportunities to make the language more accessible. Users commented that the language throughout the application seemed to be targeted more towards developers and people with tech backgrounds. For example, in the Advanced Search panel, language such as “Geo-spatial filters” and “Queries” seemed to cause some hesitation to users. Therefore, we simplified the language to make it more user friendly. “Advanced Search” was changed to “Find Data,” “Datasets and Standard Filters” was changed to “Select Data,” and “Submit” and “Reset” were changed to “Get Data” and “Clear Search” respectively.
Previously, users would have to scroll to the bottom of the advanced search panel to run or clear a search. Now these buttons are static at the bottom of the page for easier accessibility.
When multiple datasets are added to a search, the dots for each dataset are now assigned a different color by default. Now that the user doesn’t have to manually assign a new color, we have cleaned up the advanced search panel to retract the color and opacity under “Color Options.”
To maximize the amount of data viewable to the user upon executing a search, the advanced search panel now retracts upon performing a search.
When applying filters for a dataset, users were only limited to applying an “AND” operator, now users can select “OR.”
Users no longer have to retract the Find Data Panel in order to apply a layer or create a measurement on the grid. The layers and measurement icons have been moved to the boot left of the map for easier access.
As seen in the screenshots above, we have changed the grid view access bar to a bold and black color, whereas previously it was gray and overlooked by users.
When performing a search, all of the data is limited to a default geographical area shown on the map (i.e. map extent). The map extent is now setup to return results of the area that is currently visible on the grid. For example, if a user pans or zooms in to the Loop or Humboldt Park area and runs a quick search on crimes or fires, the results will return within the area that the user extended on the map.
Note: The default map extent does not apply when searching for points of interest like Starbucks, McDonalds, etc.
The new base map is now lighter and has a better contrast quality, allowing users to see the data displayed on the grid more clearly.
The map legend displays all of the datasets that were included in the users search. It appears at the bottom right of the grid when an advanced or quick search is executed.
To continue our efforts in improving the user experience, the team is working towards making the map more responsive as users move around the city. As the user drags the map, the query will refresh to the new map extent. The team is also working towards upgrading Leaflet to v1.0 (previously v0.7) as well as all dependent plugins. Lastly, we will also be improving the Quick Search feature to allow users to perform multiple quick searches as well as perform a quick search along with an advanced search (now called, “Find Data”).
If you’re interested in collaborating with the city, you can take a look at the past meeting notes on the project’s Wiki. While the source code is online, the project’s documentation gives a concise overview for developers. Likewise, look at the instructions for contributors to help us run a useful, collaborative project.