Analytics Design Refresh
In this post I want to give you a quick look at the refreshed user interface for Rowing in Motion Analytics and give you a short peek behind the scenes on why we did it and what we improved. If you’re curious, please try out the preview of the design refresh here: Analytics Design Preview.
Designing for Screen Size
Rowing in Motion Analytics is designed to be used on three different form factors: smartphones, tablets and desktops. Simultaneously designing for these different form factors is not easy, but we’re using a technique called “responsive design” that changes the layout of Analytics depending on the screen size of the browser window. This allows us to optimally use the available screen space to display relevant information in one place, while having the same content available on small screens using navigation (i.e. scrolling or nested pages).
The design refresh were making available as a preview today uses the latest techniques in this area and considerably improves our ability to adapt Analytics to different screen sizes. I want to highlight three changes in particular.
Stroke Metric Table
One area where we could improve Analytics is the display of the typical stroke metrics table.
The menu is now unfold by default, which makes it more “discoverable” to users that are not yet accustomed to the “unfoldable menu” pattern. When collapsed, it will also not hide completely on tablets and larger but icons will remain visible, allowing a quick navigation. To preserve screen space on smartphones, the menu will hide completely when collapsed.
We use lists in a couple of places, e.g. devices, subscription history and a few others. Lists are now more compact and do also consistently indicate whether items are selectable (green) or not (gray).
We also gave the “Compare Analyses” screen a slight redesign, which should make it easier to use by keeping information on the selected analyses not in the “Search and select” compartment on the left where it is only displayed until you start searching for another analyses.
Another aspect that we improved is the feedback given by the user interface when an operation needs to happen in the background, e.g. on the login form. Buttons that perform such operations do now display a spinner while the operation is running to indicate that Analytics is doing something on your behalf.
In other cases, e.g. when saving something in the background, Analytics will notify you once the operation is completed with a message in the top right corner.
Evolution of the design
I though it would be fun to show a short history of the Analytics user interface along with the principal components and frameworks we used (for the technically inclined).
The new design represents the third revision of the Analytics user interface and is based on the most recent versions of the Bootstrap and the angular.js framework. We preserved some aspects of the previous design that we found worked really well, such as the toolbar and the collapsible components on the screen, but removed almost all of the bold colors and focused on making it look cleaner and more consistent.
I hope you agree with me that Analytics has become better and better with each iteration. If you haven’t done so yet, I’d invite you to check it out here and leave me your feedback on the Rowing in Motion Forum Discussion .