201 private links
Give users a way to quickly and safely exit a service, website or application.
An example of safety content page that describes how the user can be safe online: Ways to stay safe online.
An example on domestic abuse report but notice they use the Escape key.
Let's call it the EtP pattern.
(via the blog post https://beeps.website/blog/2024-10-09-why-govuk-exit-this-page-doesnt-use-escape/)
An example of linktree
Instead, it could be better to use:
- community pattern: everyone else is doing it. Everyone sees it they know exactly how and why it is there.
- readability pattern: created for the sake of making more readable code. The only true goal is writing code that anyone can reason quickly about.
- performance pattern: squeeze the code for maximum performance, and it can degrade readability.
- guardrail pattern: it exists to avoid known foot guns such as magic number
Often people see "best practices" as community, readability, or guardrail patterns. It is also time as professional that we use a richer vocabulary.
A list of patterns for better UX with AI. For example, the user has the choice to use a gender neutral AI, an explanation of the algorithms and opt-in or opt-out the use of AI.
It has 60 patterns at the moment.
A typical pattern describes the problem, the chosen solution, the rationale behind that solution, related patterns that the designer should be aware of, and other relevant details, such as the results of usability testing.– Jared Spool
I totally agree with it: I find composition a killer feature as it keeps the API of the component open.
Another background css pattern generator
Another one: https://patternizer.com/4rvv
Useful for flat design
A list of UI patterns
In a dedicated area on the page, additionally to the primary navigation on the top, users are presented with a drop-down. They can specify what exactly they’d like to do on the website, or what they are looking for. Once one option is selected, another drop-down appears, allowing them to specify their intent even further.
This experience mimics the drill-down navigation with multiple levels. Yet the difference is that users are making small decisions, one after another, without being confronted with the entire navigation at every step of the way.
The user fills itself the needs
In fact, nobody wakes up in the morning hoping to finally compare products by features in a comparison table matrix. As customers, we actually want to find out what a better option is, yet we need to do quite a bit of work to get there.
A-Z Index Pattern: by listing all keywords on a single page mostly because users can use in-browser search to look something up quickly without having to go and explore multiple pages.
Tap-Ahead autocomplete pattern:
Rather than focusing on a list of keywords, the autocomplete actually provides an overview of items that the users might be looking for.
Tap-ahead minimizes the amount of effort needed for typing, but also drives customers to relevant results and gives them the confidence that they are actually on the right track.
If you are designing an interface for expert users, perhaps slightly more advanced ways to use search might be reasonable. Stackoverflow allows its users to specify a filter right in the search box, without having to rely on filters, tags, or any other modes of navigation.
Infinite Scroll checklist
*If in doubt, always prefer pagination.
- With infinite scroll, always integrate a footer reveal.
- Consider separating “old” and “new” items visually.
- Provide an option to continue browsing later.
- Consider using “load more” + infinite scroll together.
- Consider using pagination + infinite scroll together.
- Change the URL as new items are loaded in and expose it to users.
- Allow users to jump to any page with a pagination drop-down.
- Consider using scrollbar range intervals.
- Consider allowing users to pin or bookmark items/areas of interest.
- Make sure accessibility and performance are major considerations in the implementation.
A collection of UI patterns from different libraries. It shows their similarities!
Wow I definitely need to read this on my free time !
command | meaning |
---|---|
${parameter:-defaultValue} | Get default shell variables value |
${parameter:=defaultValue} | Set default shell variables value |
${parameter:?"Error Message"} | Display an error message if parameter is not set |
${#var} | Find the length of the string |
${var%pattern} | Remove from shortest rear (end) pattern |
${var%%pattern} | Remove from longest rear (end) pattern |
${var:num1:num2} | Substring |
${var#pattern} | Remove from shortest front pattern |
${var##pattern} | Remove from longest front pattern |
${var/pattern/string} | Find and replace (only replace first occurrence) |
${var//pattern/string} | Find and replace all occurrences |
${!prefix*} | Expands to the names of variables whose names begin with prefix. |
${var,} | Convert first character to lowercase. |
${var,pattern} | Convert only if the pattern match |
${var,,} | Convert all characters to lowercase. |
${var,,pattern} | Convert only if the pattern match |
${var^} | Convert first character to uppercase. |
${var^pattern} | Convert only if pattern match |
${var^^} | Convert all character to uppercase.} |
${var^^pattern} | Convert only if pattern match |