Over the past few years, Kibana grew both as a product and a codebase. We have added more apps and more solutions. Inadvertently, this led to a situation where multiple teams were building the same thing in a different way. As a side effect, user experience around the same action was inconsistent across different applications and solutions.
The most prominent example of this was a no data experience. When our users first start Kibana (and possibly Elasticsearch), with no data in them, what should they see?
Different teams had different ways of answering this question. Let us take a quick pass through Kibana without data prior to version 8.3. The Dashboard app offers creation of the first dashboard, without warning the user that there are indices or data views missing.
Unfortunately, creating a dashboard is not possible without at least one data view. This becomes obvious after clicking “Create new dashboard”.
Discover handles this scenario in a similar fashion, but a bit differently. If we were to go to Discover now, we would be presented with this screen:
Observability solution, on the other hand, presented users with this screen:
It became obvious that as Kibana continues to grow, we will be facing more and more similar scenarios. Soon after, we decided to form a dedicated team with its primary focus on user experience. The idea was that this team would build reusable blocks of UI that would be shared across Kibana apps and solutions (hence the name - shared-ux), thus creating a consistent user experience.
As the team was formed, the first thing we tackled was the already mentioned no data experience. We needed to build an experience that would clearly explain to the user what was missing, guide them to add data, and finally, we needed to make it easy to adopt this new experience across apps.
There were two states we needed to distinguish between: no data at all, ie. “no indices in Elasticsearch” and “there are indices in Elasticsearch, but no data views”. Taking another look at the current state of affairs, we have noticed that some of the apps have already built something heading towards what we needed. The “create data view” flyout in Discover was a good UI for the scenario of no data views. The call to add integrations in the Observability solution was a good candidate for no data experience. So, combining the two and making the more generic, we have built a reusable component that distinguishes between the two states:
- No data views state
- No data
This experience has been adopted starting with the version 8.3.0 in Dashboard, Discover, Visualize and Lens.
The path to a consistent user experience is a long one and these are just the first steps. Next items on our roadmap include improving the dark theme for Kibana, adding global advanced settings, building an image embeddable and a lot more. Stay tuned!