2019-04-30 - 2pm ET - Meeting 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.

https://github.com/samvera/hyrax   

https://docs.google.com/spreadsheets/d/1_S7ZbwJZY2WYHuY5OBCoBR0MIVrFa1tkrfj6-zIDoKw/edit?usp=sharing

Hyrax Roadmap

• Goal: Come up with a plan to make the system more usable and useful for end-users.

• Went through all issues (500+) to determine which are UI/UX related.

• Also working with #repo-managers group.

• Trying to organize and present needed work to community.

• Some issues were cleaned up and closed out.

• Github labels are used inconsistently.

• More consistent labeling and definitions are needed. Some application is not very useful.

  • Grouping by part/function and level of readiness.

  • Some issues need research / study / design, some can be resolved by developers.

• Project board exists in Github, will be updated.

• There are some bugs noted.

• Some tickets are very clear, some are really vague.

• Should we possibly revisit the UI/UX Github advisors group?

• After Sarah has things organized, she'll look for feedback on what to do with regard to prioritization.

• If you have additional issues, please add them as soon as possible, and reach out to Sarah with questions!

10min

LDCX UI/UX highlights

Adam Arling

Brief overview of some UI/UX-related conversations at 2019's LDCX unconference at Stanford Libraries in March 2019. 

• Fair amount of interest in UI related matters. 

• Customization needs/wants... local branding for project managers.

• Independent UI components/libraries...what would this look like?

  • Stick with Bootstrap, another UI framework, custom?  How tightly bound?

• Blacklight UI

• React/Vue trending? There seemed to be a pretty even split between the two.

• Adam is looking to LUX for a starter model in order to implement UI component model at Northwestern.

https://library.stanford.edu/projects/ldcx/2019-conference/agenda

https://drive.google.com/drive/folders/1T0kgNlNKk_9P36cavYc_bo6ROBsix15R

10min

Princeton's LUX design system

Shaun Ellis

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.

https://github.com/pulibrary/lux

• 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.

• VueDS uses a model similar to https://github.com/styleguidist

  • Similar look and feel to Bootstrap, which helps with onboarding.

Shaun's slides for the presentation can be found here:

https://urldefense.proofpoint.com/v2/url?u=https-3A__docs.google.com_presentation_d_1OfqwsVctKNTieDbF4U1VbfYyfquQLT35YpDq5Qa0vS4_edit-3Fusp-3Dsharing&d=DwMGaQ&c=yHlS04HhBraes5BQ9ueu5zKhE7rtNXt_d012z2PA6ws&r=Ea4h8hpZersthv0zXU3u95TF_PqXZyGRyBiuj4XXsOE&m=2chCtiQreb9GCCYjtyFLhxfblGmORPG8-5m47S7qc8Q&s=vXoY_VLosKd2akzTsvgQfIgSFoLSAbXaMgv2GykU1Bo&e=

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?

5min

Wrap up

...