Catch up on any / all things UX and/or UI related in the Samvera Community spring 2019.
Discussion items
Time
Item
Who
Notes
Introductions
10-15min
Sarah Imholt updates on Hyrax UI issue grooming project
Sarah Imholt
Sarah will give an overview of a Hyrax Github initiative she's spearheading, which aims to refine and add further context to a pool of existing UI-related Hyrax issues and bugs.
Shaun will give an overview on Princeton's LUX design system, its background, why it was created and what purpose it serves. He'll also share a case study of how it'll be implemented in a new Rails application.
Development practices changing - putting designers and developers on the same sprints is challenging. Design can be a prerequisite for modeling, development, etc.
Shaun went through original LUX design system proposal.
Problems: inconsistencies between websites - different code/markup, developers reinventing the wheel.
Bootstrap upgrades became difficult.
Unclear how to develop accessibility and software development principles.
Hard for front-end developers to come in at the last minute - a number of unfamiliar backend systems to keep updated and interface with.
One example of proposed consistency - a single alert item to be dropped in where needed, as opposed to varying styles.
Easier to create/test for accessibility conformance.
More flexible/minimal markup style (horizontal vs vertical facets).
Shared vocabulary was a goal - carousel, etc.
Not exactly Atomic Design - uses principles, but somewhat different terminology.
Language agnostic - Rails, static, etc.
Didn't want to take away functionality from Blacklight, which was designed to be used without needing JS.
Includes principles like properly nesting heading styles.
Don't really have templates yet, but there is room for this. Feedback form could be an example.
Version number is very important.
Showed example in Codepen.
Using in production in a few spots (dss.princeton.edu, and backend order system - Figgy).
Next steps: integrate Justin's work in BlacklightVue branch.
With LUX, you can drop in single components, it's not all-or-nothing.
System is 260 KB for CSS and JS. Smaller than Bootstrap. When upgrading, just bump up version number in package.json; easier than Bootstrap, easy to do across multiple applications.
Starting a request/approval management app for HR tasks based on Lux.
Two initial concerns: performance and knowledge of JS.
Using LUX plus Bootstrap is higher payload as they transition over to LUX alone.
Talking to Princeton UX department - they are interested in developing a design system.
Some departments have more CSS-level code in design system. LUX is coupled more tightly.
Similar look and feel to Bootstrap, which helps with onboarding.
5min
Samvera Connect 2019 ideas?
Adam Arling / Nik Dragovic
With an eye towards the fall 2019, are there any UX-related activities the group is engaged with which would be worth mentioning, or aiming for at Samvera Connect 2019?