User Experience
Web Interface Guidelines & Brian Lovin's design critiques are great. Refactoring UI, Practical UI & Apple Human Interface Guidelines are good reads.
Love command palettes. This is nice overview of well designed search palettes. And CMD+K is nice library for making them.
ui.land has nice design tips.
Great onboarding is essential. Loved Arc Browser onboarding.
Notes
- Like how Stripe does the hamburger menu on mobile.
- Underappreciated competitive advantage: letting people do x without creating an account.
- Love how both Apple & Linear present features in neat boxes on a grid.
- My firmest design opinion is that every piece of software should have a cute animal mascot that helps you out as you go through onboarding and stuff. No exceptions.
- There are lots of things that engineers can learn from the design community but these two are particularly important: 1. Being able to visually compare variations of your work side by side is really useful. 2. Creating duplicates of your current work should be fast and easy.
- Rare destructive action where you need to be sure of user intention.
- Don't use 16px icons on web, they're hard to tap. If you want to use 16px, wrap it in a 24px container, this will increase the tappable area, whilst maintaining the size of the icon.
- Can right click on Vercel home icon to see brand assets
- New user onboarding and activation is one of the most critical things for teams to test. Unfortunately it’s also one of the hardest, since people don’t go though the NUX flow more than once as a matter of course. So most teams stay blissfully unaware of what new users experience.
- One of the coolest onboarding tricks I've seen recently - do different tasks for a product onboarding to add days to your free trial.
- Every app should have a cmd+k command palette interface to search actions
- Right click logo to get press kit
- “Modal” is when user input goes into an alternate mode. It is not an overlay window. Better language for an overlay window: “Dialog box” or “Pop-up window.”
- Stripe's DX: 1. Docs have lots of examples. 2. Helpful error messages. 3. Testing mode. 4. Local dev experience with the CLI is so good. 5. Great-looking pre-built components.
- Decrease CTAs to only meaningful interactions.
- Love the dot on top to show which part of website you are.
- Focus on: Layout. Hierarchy. Feature discoverability. Seeding content. In the shortest time possible, do whatever you can to: 1. Get users to the Aha Moment (i.e., "Oh that's what this app is for". 2. Activated (e.g., reach minimum friend count).
- Successful product starts with a great onboarding.
- If you have a real, engaged customer base, you'll never go wrong by focusing on things that smooth out their workflows. Speed and stability are usually high on that list. Make it easier to centralize on the tool as well.
- Listen to users when you’re identifying problems. Do not listen to them when identifying solutions.
- "Back" button should show you where you go after pressing it. Good practice to put the name of a previous screen on it.
Links
- Ask HN: What's the best book on modern UI/UX? (2018)
- UX: Checkout redesign (2019)
- Where to put buttons on forms (2019)
- User Onboarding
- Annoying Technology
- Cleaning up form UI
- Principles of User Interface Design
- Spatial Software (2020)
- The Decline of Usability (Lobsters) (HN)
- Hamburger Menus and Hidden Navigation Hurt UX Metrics (2016) (Tweet)
- Learn UX Writing - Curated list of best resources for learning the principles of writing great copy for product interfaces.
- Cognitive Biases & Principles That Affect Your UX (2020) (HN)
- Stop setting the language of your website based on my location (2020) (Lobsters) (HN)
- Dark Patterns: Past, Present, and Future: The evolution of tricky user interfaces (2020)
- UI Components & UX Patterns Examples
- Nice examples of UX improvements for website
- Design and Anatomy of a Push Notification 2020
- Waveguide - Customer Experience Examples and UX Design Examples.
- Menus, Metaphors and Materials: Milestones of User Interface Design (2020)
- Writing UX copy for buttons and links (2020)
- Laws of UX - Help anyone understand web design principles for the sites we use everyday. (HN) (Reddit)
- The UX of LEGO Interface Panels (2020)
- How to conduct UX user interviews (2020)
- UX design: Tools, methods and frameworks for generalists (2020) (HN)
- Read Me: Web - To keep attention focused, readability is key. (HN)
- Why Do We Interface? - Micro-book with incomplete observations on human-computer interfaces.
- The How (and Why) of User Flows
- Learn UXD - Learn user-first design.
- Stop Asking Me to “Sign Up” (2014) (HN)
- Guide to UX Research
- Tips on using toggle switches
- Design better data tables (2017)
- Usability Testing in 4 Simplified Steps
- The UX copywriter
- UXArchive - Library of mobile user flows.
- Linear's Superb User Experience (2020)
- How we built an app update flow our users love (2020)
- How we made our SaaS homepage cookie-free (2020) (HN)
- Best UX resources for 2021
- Reducing Cognitive Overload for a Better User Experience (2016)
- Free UX crash course
- Kickass UX - Learn UX/UI design.
- User Experience Database - Biggest free curated product design resources & tools.
- Interaction Design in a Nutshell - Dense, clearly defined, and small guide to interaction design.
- List of worst UX (2020)
- UX Christmas
- Dark Patterns Hall of Shame (HN)
- Types of Dark Pattern
- Why Jira Sucks (HN)
- Grumpy Website - Blog about design fails / gripes / anitpatterns.
- Built for Mars - UX matters. On a mission to help the world build better user experiences by demystifying UX.
- Pocket UX List - Small, but formidable, list of UX-related resources for people interested in learning more about various UX concepts.
- User power, not power users: htop and its design philosophy (2020) (HN)
- Page Flows - User flow design inspiration.
- A comprehensive list of UX design methods & deliverables (2021)
- UI & UX Design Resources
- Designing with Data: Improving the User Experience with User Flows (2021)
- Losing faith in UX (2021) (HN)
- Collection of Human Interface and Software Design Guides (2020)
- Apselon - UX/UI design service for a flat monthly fee.
- Tips for writing great microcopy
- “User engagement” is code for “addiction” (2021) (HN)
- How We Deliver Great Customer Experience Without a Support Team (2021)
- Fuckin' user interface design, I swear (2021) (HN)
- Guide to UX Research Methods
- SleekUI - UI Design Software Comparison. (HN)
- What publicly traded companies focus on great user experience and design? (2021)
- The Market for User Research Platforms (2021)
- UX Design Challenges
- uiwtf - Experimental laboratory for user interfaces.
- Guide user actions
- Ask HN: What are some good resources for a programmer to learn UI/UX design? (2021)
- Nice way to share feedback on a site
- Should one interface be designed for both novice and expert users? (2021)
- Tips to help your landing page convert (2021)
- Tips for improving UI
- Every UI/UX resources in one place
- On Building a Fluid User Interface by IG (2021)
- Can't Unsee (Lobsters)
- 50 tips to improve user interface (HN)
- UI Dev Newsletter - Hand-curated list of articles, tutorials, opinions, and tools related to User Interface development.
- Ask HN: Which tools/services have your favorite UI/UX? (2021)
- Rethinking the computer ‘desktop’ as a concept (2021) (HN) (Lobsters)
- Command Palette Interfaces
- 3 conversion killers in onboarding (2021)
- What I learnt roasting 200 landing pages (2021) (HN)
- User Inyerface - Worst-practice UI experiment. (HN)
- Reddit’s disrespectful design (2021) (HN)
- Tips for Better Signup / Login UX (2021) (HN)
- Some onboarding overviews/commentary
- Swipe Convert - Increase conversions, signups and revenue.
- Design Patterns
- Some Resources For Learning About HCI (2021)
- Reflect Onboarding
- The Rise Of User-Hostile Software (2021) (HN)
- How I Experience Web Today (HN)
- Software should convey a sense of calm (HN)
- Developer experience is user experience (2021) (HN)
- Why are there no "standard texts" on designing software interfaces? (2021)
- UX Mapping Methods: Study Guide
- When users never use the features they asked for (2021) (HN)
- How to build a compelling consumer app in 2021
- Post-Linear design (2021)
- Always take user's perspective/experience
- Pagination or infinite scrolling?
- First Principles of Interaction Design (2014)
- Why We Crave Software With Style Over "Branding" (2021) (Tweet)
- Apple Human Interface Guidelines: The Apple Desktop Interface (1987) (Tweet)
- Modern trend towards data-driven decision making (2021)
- Software with the most interesting self-serve onboarding flow (2021)
- The Golden Ratio and User-Interface Design (2021)
- Your users will do what you make easy (HN)
- Fewer options can create more optionality (2021)
- The shape of software (2021)
- UI & UX Design Tips by Jim Raptis
- Great How it Works Pages
- Letting users tick a ‘none’ checkbox (2021) (HN)
- 5 Prioritization Methods in UX Roadmapping (2021)
- Interfaces: Advanced Easing (HN)
- Command palettes: how typing commands became the norm again (HN)
- 9 changes took our signup rates from 5% to 16% on the homepage (2021)
- The power of defaults (2021)
- Ask HN: Why is today's Internet experience so user hostile? (2022)
- Ask HN: Why is software quality always decreasing? (2022)
- Click and Swap, our alternative to Drag and Drop (2022)
- Building like it's 1984: A comprehensive guide to creating intuitive context menus (2022)
- Settings are not a design failure (2022) (HN)
- Software Paper Cuts (2022)
- Adobe tricks users into a 12 month contract (2022) (HN)
- Ask HN: Software you hate but can't replace? (2022)
- Designing for a dev tool UX
- Why do we round corners? (2022) (HN)
- An unsolicited streaming app spec (2022) (HN)
- Annoying sub-menus and how to fix them
- Wordle is pretty damn smart in many subtle ways (2022) (HN)
- Making an interface feel "friendlier" Tips
- Mobile table design tips
- Principles of UI Design
- Every Screen in Your App Should Be a Scrolling View (2022) (Tweet)
- Mobile menu patterns
- Paper at 10 (2022)
- Checking in on Fast (2021) (Tweet)
- Design of This Website (2021) (HN)
- Creating a Zoom UI (2021)
- Designing dark mode without the headaches (2022)
- Types of Deceptive Design (HN)
- Computing Concepts for Designers - Computing concepts for designers. (YouTube)
- Fluid effects on iOS
- Designing a Command Palette
- Toast – Exploration of a notification component
- Tabs – Vercel's tab component with animated highlight on hover
- Examples of great Dev UX
- The Ultimate Guide To Push Notifications For Developers (2022)
- Apple UX Guide - Tips and best practices for building great experiences and writing sustainable code using Apple's UX Frameworks.
- Apple Human Interface Guidelines (Tweet)
- Optimizing For Feelings (2022) (HN)
- Want to be great at UX research? Take a cue from cultural anthropology (2022)
- The Most Satisfying Checkbox (HN)
- We need a flow chart editor that doesn't give you carpal tunnel (2022) (HN)
- UX Tip: Classify your Interactions into Obvious/Easy/Possible (2022) (Lobsters)
- UI/UX Learning Resources
- Curated list for UI/UX Designers
- 50+ practical UI/UX design tips
- The History of User Interfaces (HN)
- Comfy Software (2022) (Lobsters)
- Ask HN: How did you increase your UX skills? (2022)
- Instagram gets worse with dark patterns lifted from TikTok (2022) (HN)
- Ridd - YouTube
- Awesome Command Palette
- Designing undo/redo well
- Martians unveiled: infusing a new site with extraterrestrial tech and soul—Martian Chronicles (2022)
- UI & UX Micro-Tips: Best of 2022 (Tweet)
- Infinite Scrolling: When to Use It, When to Avoid It (2022) (HN)
- UX Checklists For Interface Designers (2022)
- End-user Programming (2019)
- Infinite Canvas - Tools that work the way we think. (HN)
- The self-taught UI/UX designer roadmap (2021) (HN)
- Beginner’s Guide to Finding User Needs
- Write better error messages (2022) (HN)
- SaaS Shots - Hand-picked design patterns from real SaaS products.
- Classic HCI demos
- Resolving the Great Undo-Redo Quandary (HN)
- Why everything looks the same (2022) (HN)
- Tray background color to indicate what action a user is taking (In Safari)
- Command K Bars (2022)
- Craft — Thoughts on elevating product quality (2022)
- Button styles
- Putting content in containers makes the structure of the layout easier to understand
- Rico: Mobile App Dataset for Building Data-Driven Design Applications (Code)
- Dashboard Design Patterns
- 10 Interface Ideas for Chat Applications
- You don't need live chat on your website (2022) (HN)
- Ask HN: Are things getting more convenient but less satisfying? (2022)
- How to create a more effective homepage (2022)
- I am Definitely Manipulated, Even When I am Aware of it. It s Ridiculous! -- Dark Patterns from the End-User Perspective (2021)
- Is Dark Mode Good for Your Eyes? (2020) (HN)
- Can use live data on OpenGraph images
- Practical UI - UI design book. (Tweet)
- Building Better UI Designs With Layout Grids (2017)
- Explore Wikipedia's New Look (HN)
- Ask HN: Why are toggle switches replacing checkboxes? Isn't on/off less obvious? (2023)
- When you hear "software made with care," what products come to mind? (2023)
- Web Interface Guidelines (Tweet)
- Usability Heuristics for User Interface Design
- UI Goodies - Directory of Design Resources & Tools.
- Stop Using Hamburger Menus (2023) (HN)
- User Driven UI (2023)
- Adjacent Possible
- Visual-Design Principles and UX Design Best Practices (2023)
- Design good practices
- Onboarding Antipatterns (HN)
- Teardowns.ai - Explore AI-Driven UI Patterns.
- CallToInspiration - Digital Purple Hat for UX Designers & Developers.
- Behind The Curtains Of Wikipedia Redesign (2023)
- Ask HN: What topics are good for a UI/UX Primer? (2023)
- Invisible Details of Interaction Design (2023)
- Toggles suck (2023)
- The UX Cookbook
- Reasons to replace advanced search with filters (HN)