Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

TimeItemWhoNotes
Introductions
10-15minSarah Imholt updates on Hyrax UI issue grooming projectSarah 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!
10minLDCX UI/UX highlightsAdam 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

10minPrinceton's LUX design systemShaun 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=

5minSamvera Connect 2019 ideas?Adam Arling / Nik DragovicWith 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?
5minWrap up...

...