Kubeflow UI Design Language

[StefanoFioravanzo]

/kind feature

The “Kubeflow UI” is a collection of separate web applications implemented by different teams and with different technologies. These web applications don’t use the same design language and, as a result, provide an inconsistent user experience. Fonts, colors, buttons, placement, and sizes, are not consistent and are used without following a standard.

We have taken a close look at the current state of all the web applications that make up the "Kubeflow UI" and propose a few modifications to make the UX feel consistent.

We aim to create a consistent and nice-looking UI without overhauling the UX and the design language. When possible, we want to use the same components and better use them across the applications. In the document linked below, we mainly propose changing fonts, colors, and sizes for a consistent look and feel that remains as close as possible to its current form. We are not changing functionality or usability in any way.

This is an essential step in establishing a solid baseline to enhance the Kubeflow UI in the future and provide consistent and greed upon documented for future UI development, conduct UX research, and improve the capabilities of the Kubeflow applications.

You can find all the considerations and proposed actions in this document: https://docs.google.com/document/d/14Pdal910NaI_d9KYFinsRqe7Y3UMY5fgRMaQN0rpUjk/edit?usp=sharing

Looking forward to your feedback!

@kubeflow/wg-notebooks-leads @zijianjoy @james-jwu @andreyvelich @yuzisun

[kimwnasptd]

That's pretty exciting @StefanoFioravanzo!

The proposal looks well detailed. We should be able to pickup some low hanging fruit for the web apps in kubeflow/kubeflow cc @elenzio9 @orfeas-k

[jnemargut]

Great proposal here @StefanoFioravanzo! I've expanded upon this effort by putting together a structured audit of some of the UI inconsistencies within Kubeflow. (This is not a cohesive list of everything). The next logical step is to add some recommendations into this table.

Kubeflow UI Inconsistencies Audit.pdf

cc @ederign

[StefanoFioravanzo]

@jnemargut Thank you so much for sharing this. It's great to see this discussion become active again after so much time. Your audit makes a lot of sense and is in many ways a great evolution over what we did one year ago.

Now, how do you suggest we turn this into a set of actionable recommendations and next steps?

To me, it seems like the outcome of this audit is twofold:

1. Agree on how to resolve each conflict you highlighted. For this we need:

   • Your expert opinion as a designer
   • An ack by the @kubeflow/kubeflow-steering-committee that this approach is in line with their vision. We will need cross-WG discussions and approval for this to move forward
   • Individual WG leads to approve design changes where their components are affected

2. Start from the design consolidated after resolving all the inconsistencies and work on a design language to be adopted by every project in the community. Again, this can only work if it becomes a Kubeflow-wide directive supported by the @kubeflow/kubeflow-steering-committee

[ederign]

@StefanoFioravanzo I went with @jnemargut, and he provided suggestions for each conflict: Kubeflow UI Inconsistencies Audit - Google Docs.pdf

As soon as we have the ACK from the steering committee and the WG leads, please let me know so I can create the issues on the respective repos. Some of them are easy fixes, so I can fix them directly.

[StefanoFioravanzo]

@jnemargut @ederign I may be missing something, it's not clear to me how you are suggestion conflict resolution in the doc, could you elaborate?

Also, may I suggest moving this PFD into an editable/reviewable format? It seems like a Google Sheet may do the job. You can share this in read mode to kubeflow-discuss and keep it editable to just a select few.

[ederign]

@StefanoFioravanzo I've shared the work in progress doc with kubeflow-discuss. Here is the link.

Jon's suggestions are marked with 'X' on column "Suggested Approach". As example, to fix the inconsistency between 1a and 1b. Do you suggest another format?

About Google Docs vs Google Sheet, I'm happy to move to there if you think it's more suitable. The only drawback would be that would be harder to visually compare the differences with the screenshots.

@cfullam1 will help us on the second round of this work!

[StefanoFioravanzo]

@ederign ok I hadn't noticed that column. Maybe we can add a small section before that table that describes the general approach (that is, how we are selecting the way forward for each inconsistency, and what we do to resolve it).

Google Docs is more than fine.

My suggestion is to sort by priority and add actual next steps and ownership in the "Suggest Approach" column. Also, it seems like this is always a binary option between two UIs. Is this really the case?

[ederign]

OK, Stefano! I'll do that.

I also agree with you about not being a 'binary option'. I would create a third option!

[andreyvelich]

Let's continue this discussion under community repo. /transfer community