Visual tips on Kedro-Viz

[merelcht]

Description

Add visual tips/tutorial on Viz to highlight new features and explain how to use them.

Further ideas

• Expand such tips to framework:
  • In viz add more elaborate tips that also explain the functionality on the Framework side, e.g. when clicking on a dataset it could talk through how to use dataset or any new releases
  • On a pip install kedro add info about new features

[rashidakanchwala]

One idea is to link Kedro-viz to kedro docs in an intuitive way.

[comym]

Hi @tynandebold

I've just exported the final assets to the Design OUT board. Could you please have a look and comment or approve as usual?
Many thanks.

CCing @Mackay031

Components - Notification nudge and panel
Components - Flash card and marker

Journeys - Notification nudge and panel
Journeys - Flash card and marker

[tynandebold]

@comym looks great. I left one comment in Figma for the Flash cards flow.

I have one larger question: what about the light theme? I think we'll need some guidance there before we can call this ticket closed.

[comym]

Hi @tynandebold thanks for the comments.
I've just published examples of the same for the light theme and also included the right CTAs on the cards.

Please have a look on Figma, thanks

[tynandebold]

Looks great! Thank you for this

[yetudada]

Features to prioritise:

• Dataset preview
• Plotly/matplotlib integration
• Experiment tracking

Content also needs to have either a link to the documentation or in the block, show users how to enable it.

[tynandebold]

Features to prioritise:

• Dataset preview
• Plotly/matplotlib integration
• Experiment tracking

Content also needs to have either a link to the documentation or in the block, show users how to enable it.

I've started to implement this and think I've found a wrinkle: what do we do if the user doesn't have these features enabled and/or they're hidden when the page is loaded?

For example, there's no guarantee that the user has Dataset preview or Plotly/matplotlib integration setup in their Kedro project. If they don't, they won't show up in Viz, so how do we show them something that isn't there?

Further, if they do have either of those features enabled, they both exist within the Metadata panel. This design work didn't take into account what to do when we want to show something that requires user input, because that's what would need to happen here. The user would need to open the Metadata panel in order to see what we want to show them.

cc @stephkaiser

[stephkaiser]

Hey team, I agree with @tynandebold that a few things might have been missed and need to be considered for this ticket. This was designed before I joined the team so I might be missing some context, and not sure if the following has already been discussed or not.

If the intended purpose of visual tips is to highlight new features in Viz to users, this means that we need to consider what we define as a "new" feature to users - we need to consider the user's first time onboarding onto Viz, and then subsequent user visits to Viz after that. If it's their first time, everything is new, so would that mean we show all tips at once? We need to think about that initial user experience and I'd suggest we design a proper guided onboarding journey for new Viz users. After that, showing each tip will depend on a few things like Tynan mentioned above - which version the user is currently working in, and whether or not they have these features enabled. And when we do show a tip, we need to consider how we want to explain a new framework feature using Viz and how to educate users on how to use/enable it.

For example, there's no guarantee that the user has Dataset preview or Plotly/matplotlib integration setup in their Kedro project. If they don't, they won't show up in Viz, so how do we show them something that isn't there?

-- It currently looks like visual tips is designed to appear only when a user doesn't have a particular feature enabled (please correct me if i'm wrong). We can use the tips to highlight an un-enabled/unused feature to users and try to get them to use it and learn more with docs. However, since it's not there in Viz, we wouldn't be able to highlight anything in the UI - I'd suggest we tweak our tips design a bit to take this into account.

-- When a user does have a feature enabled, tips won't be needed unless we make new changes to an existing feature that we'd like to highlight to users, or the user hasn't used this enabled feature yet and we want to push them to try it. I guess these changes are tied to Kedro releases and we can show this info in the release update info panel, and potentially in tip cards as well.

Further, if they do have either of those features enabled, they both exist within the Metadata panel. This design work didn't take into account what to do when we want to show something that requires user input, because that's what would need to happen here. The user would need to open the Metadata panel in order to see what we want to show them.

-- We can do several things here - we can design it in a way where when the user navigates to this tip, the metadata panel can open automatically without the users input, or, we design a different visual tip where we show an animated video of an example metadata panel opening with the Plotly/matplotlib graphs etc. Another option is we could show the tip when the user opens the metadata panel themselves however, this is less-discoverable and a bit surprising when it suddenly pops-up and interrupts the user's current task. This last option isn't ideal and would cause a lot of users to dismiss the tip quickly.

We'll also need to consider the "don't show me again" button, this implies that Viz will be able to remember if a user has visited Viz before and which feature tips they have dismissed for future visits. Same applies if we design an onboarding journey, it would be very frustrating to users if they are presented with the onboarding tips every time they launch Viz.

To sum up, we need to think about the different user journeys at various stages of a Viz users' 'maturity':

• User launches Viz for first time onboarding main features
• User gets prompted to try an un-enabled/unused feature after their first visit
• User gets notified of changes to existing features in future releases

[tynandebold]

Thanks so much for the great write up. Some comments:

If the intended purpose of visual tips is to highlight new features in Viz to users, this means that we need to consider what we define as a "new" feature to users

This is one of the main sticking points. For me, these visual tip flash cards should be used for both new features and for when we want to highlight things that a user might not know about that wouldn't be considered new.

-- It currently looks like visual tips is designed to appear only when a user doesn't have a particular feature enabled (please correct me if i'm wrong).

I don't think this is the case. If I remember correctly, this scenario of a user not having a feature enabled wasn't thought about, meaning the visual tips would somehow appear regardless of if the feature is enabled or not.

I like your suggestions of what else we could do to show hidden features or ones that aren't enabled yet and how we need to think about the different user journeys are various stages.

My question now would be what can we implement at this time with minimal changes to the design what would still add value?

[NeroOkwa]

Thank you both for this.

Here are my comments:

Yes we need a holistic user onboarding journey for new users experiencing Kedro-viz for the first time. In the meantime we need to use these visual tips as an MVP that can later be integrated in the final onboarding journey.

This is one of the main sticking points. For me, these visual tip flash cards should be used for both new features and for when we want to highlight things that a user might not know about that wouldn't be considered new.

I agree with this.

I believe we have 2 options:

Option 1

@stephkaiser I like your comment on considering the 3 different stages of a user during their onboarding journey.

We currently can determine which version of Kedro-Viz a user is using and hence which feature it supports, but we would still need to know if the feature (Dataset preview, Plotly/Matplotlib, Experiment tracking) is setup.

We can do this for Plotly/Matplotlib and Experiment tracking by checking for the dataset in the data catalog, but may not be able to do this for dataset preview.

We would also need to keep track of the visual tips a user has already seen to determine which ones to show them.

Option 2

We can use the spaceflight tutorial (Visualisation with Kedro-Viz) as the default user journey.
So setup Kedro-Viz --> Preview Datasets --> Plotly/Matplotlib --> Experiment tracking.

We can ask users if they have setup the 3 features - with an expected Yes/No response. If the user indicates No, we provide a link to the feature setup page in the docs.

We can also ask users if they have seen the visual tip for each of the 3 features - with an expected Yes/No response. If the user indicates No, we show them that particular visual tip not seen. Also, by doing the Data Catalog check, this can be reduced to asking 1 question about the dataset preview.

Other Considerations

Regarding the features existing in the Metadata panel, and hence requiring user input, It is imperative the user sees/knows that the metadata panel is there and shows those features.

We can do several things here - we can design it in a way where when the user navigates to this tip, the metadata panel can open automatically without the users input, or, we design a different visual tip where we show an animated video of an example metadata panel opening with the Plotly/Matplotlib graphs etc.

Is it possible to show the metadata panel always open, but in a very transparent form? and then the user has the option to show it completely (non-transparent), or minimise it?

If they choose to show the metadata panel completely, it would then show a static image or animated video of the plotly/matplotlib graphs and the dataset preview, as you've suggested.

@tynandebold responding to your question on how we can implement it with minimal design changes whilst adding value, I am leaning towards Option 2.

This is because we can quickly implement it without the need for several checks to determine where the user is in the onboarding journey, and if they’ve setup the feature. It is not a scalable solution, but would give us a sense of user's behaviour towards these features along the onboarding journey.

[stephkaiser]

Thanks Nero!

I agree with your comment that designing the onboarding should be a separate item to be revisited in the future, and we should focus on an MVP for now using the visual tips (with minimal UI adjustments), that can later be integrated in the final onboarding journey.

I'm not sure if I fully understand option 2, it would be great to have a chat on this tomorrow, although this option sounds like it needs additional UI work. I propose the following - we currently have designs ready for journeys 2 and 3 below, and we can start with highlighting those 3 features @NeroOkwa mentioned (Preview Datasets, Plotly/Matplotlib, Experiment tracking). I need to define the user journeys and edge cases, and technical feasibility with @tynandebold, then I think we are good to go. What do you guys think?

1. User launches Viz for first time onboarding main features
2. User gets prompted to try an un-enabled/unused/new feature after their first visit
3. User gets notified of changes to existing features in future releases

[NeroOkwa]

@stephkaiser let's do it.

[tynandebold]

Sounds good to me!