Skip to content

Update knowledge and skill wizard info and doc upload pages#644

Merged
vishnoianil merged 8 commits intoinstructlab:mainfrom
jeff-phillips-18:wizard-ux-updates
Mar 14, 2025
Merged

Update knowledge and skill wizard info and doc upload pages#644
vishnoianil merged 8 commits intoinstructlab:mainfrom
jeff-phillips-18:wizard-ux-updates

Conversation

@jeff-phillips-18
Copy link
Collaborator

@jeff-phillips-18 jeff-phillips-18 commented Mar 6, 2025

Towards Update design for Create Knowledge Contribution wizard
Fixes Add an upload/conversion complete notification when uploading/converting knowledge docs
Fixes Bold font in contribution wizard hurts readability

Description

Updates the details pages for the Knowledge and Skill contribution wizards per the UX mocks
Updates the Upload documents page to allow the user to select files from a git repository or to upload from their local device.

Screen shots

image

image

image

image

image

image

image

image

image

image

/cc @Misjohns

@Misjohns
Copy link
Collaborator

Misjohns commented Mar 6, 2025

Across wizards

Check size, color and consistency of icons

  • Use fa-question-circle (outlined) for all help icons. Knowledge and skill forms don't match.
  • Reduce size of help icon, looks large.
  • Replace color of help icon and pencil icons with subtle text color as default

Check spacing between sections

  • I believe Knowledge information should have more space between it and the Contributor information section.

Capitalization
Use sentence case across all UI elements, including navigation items, page titles, buttons, and so on.

  • Directory path

Consistent steps
Change step names the the following:

  • Create seed data
  • Attribution details
  • Review submission
  • Make sure wizard step name matches step title in content space.

Contributor information

When user clicks to edit contributor, we need to display the Edit contributor information modal.
image

Knowledge information

Document outline and Domain were redundant fields from the initial implementation. We decided to change the labels of these fields to Submission summary and Directory path to better align with our SME persona.

  • Remove Document outline field, this should map to the input user enters the the Submission summary.
  • Remove Domain field, this should map to the item the user selects in the Directory path dropdown menu.
  • The helper text with the remaining character counts looks odd when the user hasn't started on the field.
  • Replace the initial helper text "Must be less than 60 characters" with "X/60 characters" when user starts the type.

Upload documents

  • Remove "Uploaded files *" above drag and drop box.
  • Remove Submit files button. I thought we concluded we did NOT need the Submit files button.
  • Make text "Non-markdown files..." text NOT bold.

Resource documents

  • Let's remove the expand caret iconnext to the parent step. According to the PF guideline here, it is optional. It bothers me the text has to truncate.

Attribution details

  • Change Attribution information to Attribution details
  • Change attribution fields to:
    -- Title
    -- Link to work
    -- Revision
    -- License of the work
    -- Author(s)

Review submission

Having the Next button disabled on review step looks weird. Can we have it replace the Next button instead? This would match the PF guidelines here.

@Misjohns
Copy link
Collaborator

Misjohns commented Mar 6, 2025

@Mdenisco @kaedward I entered my comments above. Please take a look and add any additional comments. Thank you.

Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
…vigates

Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
Signed-off-by: Jeffrey Phillips <jephilli@redhat.com>
@jeff-phillips-18
Copy link
Collaborator Author

jeff-phillips-18 commented Mar 11, 2025

@Misjohns I have made the suggested updates (updated images above) with the exception of the removal of the Submit files button. I would like to work that as a follow up.

@kaedward
Copy link

@Misjohns, I'm late getting to this - is there still time for me to make some content suggestions?

@Misjohns
Copy link
Collaborator

@jeff-phillips-18 @kaedward Should we capture microcopy changes in a separate issue? Jeff, what would be easier for you?

@jeff-phillips-18
Copy link
Collaborator Author

@Misjohns @kaedward Please feel free to comment here. Thank you!

Copy link
Member

@vishnoianil vishnoianil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work @jeff-phillips-18 . Loved this PR. Thanks @Misjohns @beaumorley @Mdenisco for the excellent UX work.

@vishnoianil
Copy link
Member

@Misjohns @kaedward I tested this PR and discussed with @jeff-phillips-18 about the minor issues that i encountered, but those are not blocking issues for merging this PR. Once it's merged, it will be available on qa.ui.instructlab.ai and you can explore the new changes live. If you have any further suggestion, can you please open another issue so we can push those changes in follow-up PRs?.

@vishnoianil vishnoianil merged commit e08c812 into instructlab:main Mar 14, 2025
5 checks passed
@jeff-phillips-18 jeff-phillips-18 deleted the wizard-ux-updates branch March 17, 2025 10:33
vishnoianil added a commit to vishnoianil/ui that referenced this pull request Mar 20, 2025
…dates

Update knowledge and skill wizard info and doc upload pages
@vishnoianil
Copy link
Member

Fixes #560

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add an upload/conversion complete notification when uploading/converting knowledge docs Bold font in contribution wizard hurts readability

4 participants