Overwhelming Navigation Combined With Summary
Their application had a “summary bar”, which both displayed content and was used for navigation. It wasn’t clear that it could be clicked on, and it wasn’t clear that it was meant to indicate a workflow, rather than distinct pages.
- Interaction design
Before I came on
They had already received strong user feedback that the blue green “summary” bar was hard to use. It wasn’t obvious that you could click it — there’s nothing “clickable” about it! Worse, it didn’t indicate that there was a workflow (you had to create a “Site” before creating a “System”).
To show it was a workflow, I turned the bar into arrows. Then I played with various bar and pie charts to visually show the percentage of energy generated from solar. (It’s faster to interpret a ratio in a simple graph, than with text labels.)
Then I tried merging the summary bar with the top navigation bar, since having two layers of navigation is often confusing.
Once their engineers implemented it, it significantly improved the readability of the page. It also made it much easier to focus on the purpose of the page, instead of the huge summary bar at the top of the screen.
Optimally, navigation and a summary should be separate, but they had wanted to keep them together. A front-end engineer and I worked together to prototype a further simplification, with summary on the left (reduced to just name and address!) and navigation on the right.