ux-patterns
UX Patterns Digital Garden 🪴
Aka: fonts 🖌️, themes 🖼️ and designs 🎨 I have known and loved ❤️
Thoughts on UX patterns plus collections of such patterns and related examples. Plus plenty of font and design stuff.
| Themes | Typography | Fonts | Archive | Report Inspirations |
Curated collections live in named root folders (e.g. report-inspirations/). Use scripts/import_arena.py <channel-slug> to import from Are.na.
Patterns
1. Images for everything
Humans like and respond to images, and especially faces (babies as young as few days pay more attention to images containing of human faces than other kinds of image)
- Use (gr)avatars
- For any object you have, try to have an image …
- favicon
2. Dashboards
Dashboards are good. Every app should have a dashboard.
3. User centric structure (and urls)
http://site.com/{user-name}/...
Examples:
- github
4. Search everywhere
Get rid of browse or list and replace with search
5. Everything has a title and a ‘slug’
Everything has:
- id (+name/slug) … use it for the URL
- label/title … use it in the interface
6. Allow users to message using @{username}
This arose from Twitter (prior art?) and is now being universally adopted (at least in more techhy circles? e.g. github, trello, …)
Combined with auto-complete it’s a fast and easy way to reference and message a user.
Discussion
Modals
-
- only one at a time
-
- do not need to interfere with main page
# Other Resources
- http://uxporn.uxpin.com/ - lots of screenshots
- http://ui-patterns.com/explore - library of patterns plus lots of illustrative screenshots
Examples
Text-Oriented
Mozilla Knowledge Base (2012)
medium.com (2013)
