====== User Interface Interest Group ====== This is a new interest group that will collaborate to standardize the Evergreen user interface and establish a design system, including a component pattern library and a written style guide. === Mailing List === https://groups.google.com/a/evergreen-ils.org/g/ui-group is a dedicated mailing list for the new UI group. Note that new members must be approved by a Google Group owner; this is a spam prevention measure. We usually approve requests within a few minutes. === Meetings === The group will meet on the 4th Thursday of the month at 2pm Eastern. == Next Meeting == **April 25, 2024:** 90-minute meeting at the Evergreen Conference [[https://docs.google.com/document/d/1UdbzVmBpwqtPKtL4-jzY1kW6LZxVDKVetgRxFMKj1Co/edit?usp=sharing|Agenda]] | [[https://us06web.zoom.us/j/88016754067?pwd=tF4YxjBDUjf8b1uwDSu2Zv6udFDXES.1|Zoom link]] == Past Meetings == * **March 28, 2024:** [[https://docs.google.com/document/d/1_-evMqKPfog9u7MDvam3snBj82tECxjgZHoE9Sat4_0/edit?usp=sharing|Agenda: recent UI changes, upcoming features in 3.13, style guide needs]] * February 2024: no meeting * ** January 25, 2024**: [[https://docs.google.com/document/d/1riutXKb4fhJpiS8V1ijrMEiURm9e9ooCJk8PF16cuQM/edit?usp=sharing|Agenda and Notes]] | [[https://www.youtube.com/watch?v=KGEPKgG6vs8|Video]] * **November 30, 2023** -- 3.12 UI updates, further style guide discussion - [[https://docs.google.com/document/d/136tPuVL4oJsjqfeshntFxXkRacMsBIHrLf7FTISEsaU/edit?usp=sharing|Agenda and Notes]] | [[https://www.youtube.com/watch?v=PPg09RORksc|Video]] * **October 26, 2023** - Editorial style guide work, continued - [[https://docs.google.com/document/d/1HesD5Z-cbmk4GliHVmxtWQqZK1ko0azorLPELDbXXS4/edit?usp=sharing|Agenda and Notes]] | [[https://www.youtube.com/watch?v=nH69_l2VioA|Video]] * **September 28, 2023** - Editorial style guide outline - [[https://docs.google.com/document/d/1E4kQFcsmRekjeTEh0joKknmO9q1FcL-d6ZZ7qFseMzY/edit?usp=sharing|Agenda and Notes]] | [[https://youtu.be/wju7RD_V-08?feature=shared|Video]] * **August 24, 2023** - How to find HTML & CSS files - [[https://docs.google.com/document/d/1VF2LDQT0K2NVLT2H8zI2dCCaNTemFQ4si708kHgdk_0/edit?usp=sharing|Agenda and Notes]] | [[https://docs.google.com/presentation/d/1Ck2pQe9Wn8hk4Rqq5dn_ERb6UkXjdxEDVbWHlxwEdeM/edit?usp=sharing|Slides]] | [[https://youtu.be/YSIouyUHpGU?feature=shared|Video]] * **July 27, 2023** - [[https://docs.google.com/document/d/1S9_HvBvV2jQu883vvHVRC9t-jIGO5TPvRwfhy5cmy6Q/edit?usp=sharing|Agenda and notes]] | [[https://youtu.be/AEAZFIfBWzM|Video]] * **June 6, 2023** - [[https://docs.google.com/document/d/1bMbuj2-fm-cGByD-4rBlr_nqV7Ge8ccWZ6OWVQthQ4Y/edit?usp=sharing|Agenda and notes]] * **April 27, 2023** - Introductory session at the Evergreen Conference. [[https://docs.google.com/presentation/d/1mS-8UE-rD346JxK4RSnLsBpSYcwErxIFql2UVeH8Rtg/edit?usp=sharing|Slides]] | [[https://youtu.be/nIAtFx6PRj4?t=1840|Lightning talk recap, beginning at 30:40]] (no video of the full meeting) === Projects === The group will start with several small projects to standardize some elements of the Evergreen interface. The [[community:ui_ig:roadmap|Design System Roadmap]] shows how these fit into the long-term plan. * [[https://docs.google.com/document/d/1xIQrRmkmvYyc5r-wJA5MDbJhLp_GNRnbraLM1SOREGw/edit?usp=sharing|Modals (and their buttons)]] * [[ui_ig:style_guide:buttons|Buttons]] * [[dev:eg-grid:styling|Table column widths]] * [[ui_ig:style_guide:input_types|Form input types and autocomplete]] * [[ui_ig:style_guide:empty_states|Empty states]] ("no results found" and the like) * [[https://docs.google.com/document/d/1SFghQ7EIzJEKP4syJAftRVXA7GCOhsTbyDs_lT9iQzc/edit?usp=sharing|Settings groups]] The long-term goal will be to create a comprehensive design system for Evergreen, including guidelines for governance of UI decisions. === Launchpad Tags === This group organizes its work using the following [[dev:lp_tags|official tags in Launchpad]]: * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=accessibility|accessibility]]: accessibility concerns & assistive tech (including screen readers, WCAG compliance, alt tags, etc.) * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=terminology|terminology]]: wording issues; may be combined with ux-styleguide but is more specific * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=usability|usability]]: user interfaces, user experience, and general usability * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-buttons|ux-buttons]]: User experience for buttons (wording, color, hover/focus states, etc.) * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-empty-states|ux-empty-states]]: User experience for default states ("nothing added yet", "no results found") * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-error-messages|ux-error-messages]]: On-screen error messages (not console logs) * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-forms|ux-forms]]: Usability issues with forms (may be further subdivided) * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-form-hints|ux-form-hints]]: Form field formatting hints, instructions, and placeholders * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-form-validation|ux-form-validation]]: Form validation issues * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-keyboard|ux-keyboard]]: Keyboard navigation, focus, and tab order * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-links|ux-links]]: Link issues * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-menus|ux-menus]]: Issues with the wording, placement, or contents of navigation menus * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-preferences|ux-preferences]]: UI-related user preferences * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-styleguide|ux-styleguide]]: Editorial style guide issues * [[https://bugs.launchpad.net/evergreen/+bugs?field.tag=webstaffcolumns|webstaffcolumns]]: Grid columns that can't be sorted or filtered, or show the wrong data, or are missing entirely New tags may be canonized using the ux- prefix.