hackforla / hackforla/311-data

UXD - Design System Updates: Popups

Open
#1,967 1 comment 0 reactions 0 assignees View on GitHub
Complexity: Small Feature: Style Guide role: UI/UX Design size: 2pt
Dominant language
JavaScript
Stars
73
Forks
74
PR merge metrics
No merged PRs in 30d

Description

### Overview

We need to audit and evaluate the Pop-up in our design system to quickly communicate meaning and additional information enhancing user experience and interface while maintaining a uniform and cohesive design aesthetic that can be easily expanded and replicated in the future.

#### additional information
The term Popups refers to:
- modals for communicating additional info to users: Pop-ups, dialogue boxes, popovers, tooltips, banners, etc.

### Action Items
- [ ] utilize a new figma page (e.g. `Design System Review: Popups`) to perform the following tasks:
- [ ] audit / verify Popups in hand-off page
- [ ] create a general and informal guide with examples of when to use what, and how
- [ ] identify/confirm the appropriate Popup library and create a loose guideline for Popup expansion moving forward as need for future Popup arise
- [ ] research and recommend if current Popups are sufficient or should be updated

---

### Designer Resources

- [Popups, dialogs, tooltips, and popovers— UX Patterns #2, article by Design Bootcamp](https://medium.com/design-bootcamp/popups-dialogs-tooltips-and-popovers-ux-patterns-2-939da7a1ddcd)
- [Popup UI: Best Practices, Design Inspiration, and Implementation (Without Annoying Your Users), article by Eleken Saas UI/UX Design Agency](https://www.eleken.co/blog-posts/popup-ui)
- [Atomic Design Methodology: Atoms, molecules, organisms, templates, and pages, by Brad Frost](https://atomicdesign.bradfrost.com/chapter-2/)
- [Popups: 10 Problematic Trends and Alternatives, by NN Group](https://www.nngroup.com/articles/popups/)
- [Tooltip Guidelines, by NN Group](https://www.nngroup.com/articles/tooltip-guidelines/)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.