Design Blog on Squirro widget browser
List is probably the simplest UI component known, though often undermined. It is that sneaky UI component which quietly guides you all the way without dropping a hint that you are being guided. What does a list say though? By the virtue of its nature, a list needs some entities to be listed. A list asks for those entities to be listed in a certain sequence. A list demands a beginning and an end. All essential ingredients to tell a story. If used wisely, it can be a very strong asset to help onboard your users smoothly.
In the new Squirro widget browser, list has had a powerful role to play. A bit about the widget browser though. It is a part of the ongoing redesign of the dashboard editor, a Squirro tool which allows you to build insightful dashboards by adding widgets from the Squirro widget library and configure them to visualise desired data. The new widget browser is a massive improvement to the dashboard building experience. What was a simple dropdown, is now a widget browser window which is easy to use and drastically cuts short the time and clicks required to build dashboards. The best part, it requires no training and promises smooth transition to the new pattern of building the dashboard. Check out the details below.
- Easy to find: Widgets browser now has built-in search functionality.
- Easy to locate: All widgets are listed in a tile view with representative icons.
- Easy to glance: A quick scroll allows you to glance over the entire widget library.
- Easy to understand: Widgets come with description.
- Easy to build: Widgets can be dragged and dropped to the desired position on the dashboard.
- Time Saving: Multiple widgets can be added in one go, allowing you to put together a decent dashboard within seconds.
- Logical Listing: All widgets are listed under functional categories like items, navigation, filters, etc.
Coming back to the lists, let us look at the two recent examples of logical lists in the new Squirro user interface.
Widgets are now listed under functional categories, and the sequence of those categories choreographs the entire experience of building the dashboard.
- Items: When you land on a new dashboard, you want a solid validation to all the work put in so far to set up the project. Therefore, you initiate by adding widgets like results list, cards, etc. to confirm that your data is there. (Newspapers are disliked when they sometimes publish a full first page ad because their validation as a product for displaying news is missing.)
- Navigation: Once you see the items flow and have some visibility over your data, you want to bring in some application-ness in your dashboard. That is why ’Navigation’ is the next category to fulfill your navigation related needs with widgets like tabs, breadcrumbs, etc.
- Filter: Data is there. Navigation is in play. Now you need some capability to filter the dashboard. Here comes searchbar and filters for facets, smart filters, favourites, etc.
- Over Time: Bring in widgets like timeline, line chart etc. to visualise historical data over time.
- Comparison: Further enhance the dashboard with visualisations like pie chart, line chart, heat map etc. to get insights around your desired parameters.
- Geographic: Add a new dimension to your dashboard by visualising the geo information on map widgets.
- Special: Cash in on Squirros USPs packed beautifully as widgets. The cream of the lot includes select features like recommendations generation, auto discovery, trend detection, and significant terms.
- Others: Achieve completeness with interesting miscellaneous offerings like rich text editor, calendar, metric, iFrame, etc.
- Custom: Find all your custom made widget solutions under this final category.
It is satisfying to find an opportunity to guide the user, however small it might be. The Project Browser is relatively a simple case. It consists of a simple list of all available projects and a few bits before and after. In the default mode, the end user sees the Squirro symbol and the active project name in the top navigation bar. Clicking on the project name slides in the Project Browser panel to allow users to switch project.
- The navigation journey starts with a big Squirro logo to confirm that the user is in the right application.
- The logo is followed by our standard ‘Add’ button. This eliminates the need to scroll to the bottom of the project list to create a new project.
- The button is followed by the list of all available projects where the active project is highlighted. So you know where you are.
- Have some feedback for us after the project setup exercise? Click on the feedback option at the bottom of the list to get in touch.
- Finally, click on the logout option to exit the application.
When launching a new UI, you might be armed with your checklist of essentials such as onboarding and story-telling. You might also be anticipating the end-user expectations of and reactions to your newly launched interface. But oft-times, you can’t afford the luxury of an on-boarding component to roll the drums and announce the arrival of your new feature or interface. In such situations, what better way to usher your users in than by letting your simple UI components tell the story. In both the examples above, you see how logic infused lists can aid users to comprehend the UI. All in all, it’s the same dish served gradually in small portions and in a sensible order. Might I say, sometimes, the best on-boarding is no on-boarding at all.