podman-desktop
podman-desktop copied to clipboard
containers
UX: Updated dashboard design: Feature Discovery & learning
UX Description
As part of the bigger dashboard design Epic we will update sections on the dashboard one by one. In this task we will look at the section to that helps user discover new parts of our app and learn about existing features and extensions.
We currently Learning Center on the dashboard. It only covers guides and content from the communtiy.
We want to extend that with:
- Help users discover other parts of the app. e.g. Check out the Kubernetes section.
- Show extensions can are able to be installed.
- When the user has enabled experimental features, ask them for feedback on GH discusions
Request type
Application mockups/designs
Primary Contact
@Firewall
Deadline for request
We would like to kick off the development of this in 1.20
@Firewall and I discussed yesterday what features we'd like to surface on the dashboard first, based on user behaviour and where we would like to guide them to and came up with the following list:
- continuation of onboarding process (will probably be a part of the Getting Started section)
- start a container - make sure that this process is seamless and easy, so anyone can succeed; potentially guie them to more info on pods, etc after
- guide users to Kubernetes area (allow them to start a cluster, etc) in some way
- surface Extensions
- focus on people coming from Docker - how to get the necessary attention to the Docker notifications and help them resolve issues
Some dashboard examples: https://miro.com/app/board/uXjVI_eW7Ck=/?share_link_id=838488462571
I am working on wireframes here: https://miro.com/app/board/uXjVI_eW7Ck=/?moveToWidget=3458764626020399033&cot=14
Here's my first iteration that's more hi-fi. Couple things to note:
- images need to be updated. I'll probably work with @cdrage, if he's okay with it, to create some new fun illustrations
- I added a partially shown card there to illustrate an opportunity to improve the carousel design. That could work on this section, if there's more than 4, but also on others. We've seen that in the Learning Centre the vast majority of users only interacts with the 2 cards that are always there.
- here's some other options for carousel improvements: in miro
The next step here is to specify actions each button takes.
More on carousel deign best practices: https://youtu.be/QoWY4WLv-74?si=EXFbC_zpUERHpRyu
Here's an example from youtube how they handle multiple cards - see the arrow on the right:
Same here:
@Firewall please review: https://github.com/podman-desktop/podman-desktop/issues/12239#issuecomment-2847003306
@MariaLeonova Awesome iteration! I am a big fan of the partial card that shows that there are more cards to explore.
Is it me or do the icons and text on buttons looks weirdly aligned?
I know I gave you the text for the button for Explore Kuberenetes should say Manage Kubernetes instead of manage k8s Cluster.
The next step here is to specify actions each button takes.
Start a container => Containers page. The empty screen will help users create their first container Manage Kubernetes => Kubernetes page. The empty screen will help users create or connect to a k8s cluster Open Catalog => Opens the catalog where they can install an extension Configure Compatibility => Take you to the "Settings > Docker Compatiblilty" page where can configure the settings mentioned
Thank you, @Firewall , for reviewing! I'll make the changes.
Is it me or do the icons and text on buttons looks weirdly aligned?
Yes, I'll check what's up with that.
Here's a design proposal with one card semi-hidden; a pattern we can re-use in other cards UIs:
I'm assuming cards would have a fixed width in this scenario? (vs today where they expand to fill 2/3/4 columns based on the width).
All the other cards end a few pixels before the edge and have an internal border, so to me this looks more like we messed up the layout (or the window is too narrow) vs showing there's more content to the right. I think we could do the same by fading out the cards toward both sides, which would also make the buttons easier to see. Rough idea:
@deboer-tim love this! I would propose we do the same to the learning centre cards, too!
Hey @MariaLeonova, as I responded to you in Slack last week:
Perfect now!
Just the title of the Learning center and Explore features is different.
Also agreed on that we should have the learning centre cards use the effect
Do we have video tutorials for these?
Not yet. We can create them where nessacary.
@Firewall here's the penpot file link. I'll prep the images and upload them to out google drive, too.
After discussing this with others, it was suggested to add a dismiss button to each of the items. There might be some users that would never want to take a specific action. Maybe just a dismiss button to each item?
@Firewall should it be a Dismiss button (maybe instead of 'Watch tutorial') or an [x] in the top right corner?
@MariaLeonova regarding the Explore features section, I think it looks perfect!
For completion I would apply what you discussed here https://github.com/podman-desktop/podman-desktop/issues/12239#issuecomment-2866351335 and also make the items from the "Learning center" have the same width and use the "half card / fade" that will make it clear what the final implementation should look like. Also the < and > should be the same.
@Firewall I updated the cards designs with an idea that in default mode one card on the right will be partially hidden behind a gradient with an option to click the arrow to see more. Once the user clicks it, there will also be a left arrow on the other side to do the opposite action. I'll be happy to work with the developer who'll be implementing the design to define the exact interaction here.
There's a button to Watch Tutorial - those can be added as needed, once we have the materials there.
I also updated the cards in the Learning Center to match this UI and aligned the button to the left. Hopefully, this way the other cards will get more exposure and engagement.
Here's a link to Figma for comments: https://www.figma.com/design/WrlxYld7vXcLFxboNZZWF6/Dashboard-Learning-Cards?node-id=13-292&t=DaNzZMqApw7bNIVU-1
Implementation ticket: https://github.com/podman-desktop/podman-desktop/issues/13105