RUI Y3 cosmetic updates

[LibbyUX]

Design Start: RUI Y3 Cosmetic Update

Design work begins today. Attempting a review submission by Friday EOB.

Current Implementation

• 1280x832 is our minimum breakpoint and features are super cramped in the current implementation app. I will iterate & improve:

  Entry Point 1920x1080

  

App 1280x832

App 1920x1080

[LibbyUX]

Ready for dev: RUI cosmetic redesign

Please contact me if you have any questions!

Updates

Design system components have been added everywhere for this cosmetic redesign!

Entry point

• The entry point is now a full screen modal.
• Search autocomplete is needed for organs and consortia.

  Application

• More menus added
• Flyouts added for AS and landmarks opacity and tissue block rotation sliders
• The position reporting has been moved from inside the 3D scene to the position column in the Tissue Block Settings panel

  Review and download modal

• This modal reports the user's registration in a tabular format. We use our scrollbar that appears on hover if needed.
• A snackbar appears after the user has downloaded their registration.

Resources

• Figma: RUI Y3 Cosmetic Redesign

  Open issues that are related to this design/build:

• 768

• 800

• 801

• 743

• 748

• 761

[LibbyUX]

@edlu77 & @axdanbol - I started to review the RUI preview today. I noticed that I missed specifying a "we log usage" snackbar, so I added one here in Figma.

The preview is looking amazing! I'll review more of the RUI shortly!

[LibbyUX]

Meeting notes from RUI build check in:

@edlu77 - Thanks for meeting with me today! This build is looking so good! We discussed:

AS & Landmark flyout behavior

Interaction:

• Click the opacity button to open the flyout.
• The flyout opens centered to the right of the AS or Landmark.
• The AS or Landmark shows a selected state while the flyout is open (if possible).
• The flyout is closed when clicking anywhere outside of the flyout.

Rotation input/slider flyout behavior

• Added: Rotation input flyout prototype
  • Interaction: Click the X input to open the flyout and click outside anywhere to close the flyout

More info needed: Rotation slider keyboard modifier

Looping in @andreasbueckle and @bherr2 about our Figma comment thread on this feature. I recall I started this thread because Andi asked if this would be possible, so, we discussed adding a shift button keyboard modifier for the rotation sliders to make it easier for users to be precise in the rotation for their tissue blocks.

Currently, the slider moves in increments of 1 degree, but the ask was to use the keyboard modifier for 1 degree. Edward and I both need to understand precisely how this request is supposed to function. @andreasbueckle and/or @bherr2, can you please follow up with more details about the expected behavior of this interaction?

[andreasbueckle]

@LibbyUX We could try increases of 0.5 degrees when the user presses the shift key while using the slider. Maybe we can have a test build with different speeds? Happy to sit with @edlu77 and test different increments.

[andreasbueckle]

PS: @LibbyUX Tinkercad has a good implementation of modified rotation:

It allows two speeds: 1 degree and 22.5 degrees. In the RUI, we would have 1 degree and 0.5 degrees. Happy to demo to @LibbyUX or @edlu77