- Good UX exemples
- Design Principles
- User Experience Patterns, Best Practices
- Navigation
- Breadcrumbs
- Language selection
- Search engine
- Search box
- Search Results
- Forms
- Fields
- Buttons
- Login forms
- Mobile forms
- Data tables
- eCommerce related patterns
- Paiement check out
- Coupons
- Notifications system
- Email notification
- Empty states
- Skeleton state
- Error management and recovery
- 404 error pages
- Colour use
- Design systems
- Atomic design
- Everything is a component
- Pattern library
Good UX exemples
ReallyGoodUX
Screenshots and examples of great UX from real mobile and web products. Discover the best UX examples-including onboarding tours and walkthroughs, new feature and rebrand announcements, UX copywriting, signup flows and more. Brought to you by Appcues.
www.reallygoodux.io
Design Principles
Kids' Computer Essentials: Graphic Design - USCI
Help encourage your kids' love of technology and creativity with U.S. Career Institutes computer essential guide for graphic design.
www.uscareerinstitute.edu
User Experience Patterns, Best Practices
Home | Laws of UX
Laws of UX is a collection of best practices that designers can consider when building user interfaces.
lawsofux.com

10 Usability Heuristics for User Interface Design
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. When users know the current system status, they learn the outcome of their prior interactions and determine next steps. Predictable interactions create trust in the product as well as the brand.
www.nngroup.com
Navigation
Design Patterns: Better Navigation UX With Navigation Queries - Smashing Magazine
Quick summary ↬ In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in "Smart Interface Design Patterns", a 7h-video course with 100s of hand-picked examples, curated by Vitaly. When designing interfaces, we often focus on the usual suspects.
www.smashingmagazine.com
Breadcrumbs
Design Patterns: Designing Perfect Breadcrumbs UX - Smashing Magazine
Quick summary ↬ In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in "Smart Interface Design Patterns", a 7h-video course with 100s of hand-picked examples, curated by Vitaly. Nobody gets particularly excited about breadcrumbs navigation.
www.smashingmagazine.com
Language selection
Designing A Perfect Language Selector UX - Smashing Magazine
How difficult can it be to design a bulletproof language selector? It's not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Let's dive in!
www.smashingmagazine.com
Search engine
Best Practices for Search | UX Booth
Search is like a conversation between the user and app or website: the user expresses their information need as a query, and the app or website expresses its response as a set of results. Users expect smooth experiences when searching and they typically make quick judgments about an app's value based on the quality of one or two sets of search results.
www.uxbooth.com

UX for search 101️
Besides the interaction patterns, we can also rely on design patterns to help us build a good search experience for users. Those design patterns are already used by many players like Google, Amazon, and many others, that we already know that works and we can apply in our product gradually.
uxdesign.cc
Search interface: 20 things to consider
What questions to ask users? What to consider while prototyping? And what are the best practices in search interface design? Depending on the project, search may be one of the most complex features. Users see just a box, but designers and developers see an intricate system and a lot of work behind the box.
uxplanet.org
Mobile search UX: Best practices for in app search design | Algolia Blog
Great mobile search is table stakes. This year, before COVID struck Europe and the Americas, 66% of internet users used a mobile phone or tablet to buy. [ Datareportal] Users are deeply resourceful, and rightfully finicky too. With so many brand and product options available, they expect in-app search that's fast, responsive, and easy to use.
www.algolia.com
https://qubstudio.com/blog/best-ux-practices-for-search-interface/
qubstudio.com
Search box
2009
Search Results Design: Best Practices and Design Patterns - Smashing Magazine
If you've been assigned to design or provide the architecture for a large e-commerce project or other information-heavy website whose success depends on content findability, it is vital that the design and layout of the search functionality for that website is considered carefully.
www.smashingmagazine.com
Search Results
Best Practices for Search Results
Search is like a conversation between the user and system: the user expresses the request for information as a query, and the system responses with a set of results. The results page is a crucial piece of the search experience because it responds to users' information needs.
uxplanet.org
Forms
Form Abandonment: 10 Ways to Track & Eliminate It Today
Whether you're looking to optimise your checkout, lead capture, or onboarding forms the 10 strategies below will help drive a high percentage of people through your forms. Before we jump into these 10 tips it's important to understand how your visitors' expectations and experience impact their likelihood of completing your form.
www.ventureharbour.com
Fields
Buttons
Frustrating Design Patterns: Disabled Buttons - Smashing Magazine
Quick summary ↬ How can we make disabled buttons more inclusive? When do they work well, and when do they fail on us? And finally, when do we actually need them, and how can we avoid them? Let's find out. Part of our ongoing series on design patterns.
www.smashingmagazine.com
Login forms
uxplanet.org
uxplanet.org
Mobile forms
Mobile Form Design: 15 Best Practices and Examples
Forms are an important component of any product - the main tool allowing a person to achieve set goals. They are essential to sign up, buy something, leave a service request, subscribe to an email newsletter, etc.
lvivity.com
Looking for Mobile Form Design Best Practices? Here's THE Definitive Guide!
Forms are one of-maybe the-most used ways of interacting the web. That's true for both the pages you visit from a computer and those you get to while using your mobile devices. But mobile forms have special requirements. Designed the wrong way, mobile forms can get between your users and their goals.
www.formotus.com

Data tables
Let's design data tables
Data is the key irrespective of any industry and if the visualization is not proper then it isn't useful data. Enterprise interfaces are mostly filled with the form and data table than other elements. Dashboard plays a key role in decision making for the user but even in dashboard data table has a role.
uxdesign.cc
UX Data Table Design Patterns & Best Practices
Tables tend to have a somewhat (undeserved) bad reputation in the world of digital interfaces. They are often perceived as cold and overwhelming. Yet in so many cases they are the most efficient way to organize complex information in a digestible manner.
pencilandpaper.io

medium.com
medium.com
Examples of hierarchy in data tables and their usability
Thanks for contributing an answer to User Experience Stack Exchange! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.
ux.stackexchange.com
eCommerce related patterns
Paiement check out
UI/UX Design - Payment process interface optimization
From the old payment process, solve existing problems, think of new processes and interfaces and import the preliminary design system into the new interface In the past, I have been exposed to the design of education platforms, tourism platforms, and IoT platforms. Although there are payment-related processes, in the past, they used third-party payment platforms directly, and they did not need to consider the logistics process.
harrychuang23.medium.com
Coupons
The biggest UX mistake in e-commerce: discount code input on the checkout page
It has been over 6 months now that I am working on GO2CINEMA - a cinema ticket booking engine for the UK. My venture into the startup world exposed me to a large number of startup founders.
gajus.medium.com
4 Tips for Perfecting Promo Code UX on eCommerce Websites
Whether it's the holiday season or not, it's imperative that your promotions and coupon codes work effectively for the user. Promotions and discounts go a long way in encouraging users to buy and makes it crucial to mitigate any confusion or friction. But, having confusing exceptions and bad promo code UX can sometimes do more harm than good.
contentsquare.com
How to design better coupons?
Coupons are an excellent marketing technique for attracting new sales and customers while promoting special items or offers. Making your coupons for yourself might help you save money and customize your offerings. Design eye-catching coupons that customers can redeem in-store or online. Coupons allow you to take advantage of a wide range of discounts and deals.
uxplanet.org
Notifications system
Notifications are anti UX. They are a distraction. So how to design your notification so that it becomes purposeful and useful?
Building a meaningful notification system for digital platforms
We all have experienced that annoying feeling when we get too many notifications, asking us to take actions regarding aspects that are not particularly important at that moment. Timely notifications are integral to the overall proposition of a platform, but they are fast becoming intrusive in nature.
uxdesign.cc
A Comprehensive Guide to Notification Design
Peripheral messages in digital products, collectively known as notifications, should never harm the user experience. Instead, they must contribute to an experience that helps people accomplish a goal. Addressing notification design early in the product design process will produce better results. Imagine a group of architects designing a three-story house, laboring over the blueprints for months.
www.toptal.com
How To Design Notifications For Better UX
Notifications evoke mixed reactions from users. Many a times they find it useful. Many a times they are annoyed by it. But notifications serve a purpose. They are powerful tools to inform users of app crashes, introduce them to new features & updates, and inform them about new messages and mails from friends.
uxplanet.org
Notification Design Strategies | UX Booth
If your inbox is anything like mine, it's littered with unwanted notifications from companies begging for attention. Gmail has done a great job of making it easy to separate important messages from automated notifications; however some organizations refuse to make it easy to control the emails we receive.
www.uxbooth.com

Email notification
8 Rules of Great Email Notifications
Email notifications are powerful drivers of user engagement with SaaS apps. But not all of these messages are created equal. The best alerts convey key information and make interaction feel almost effortless, while poorly designed notifications are counterproductive and result in decreased engagement or even customer churn. I've received some really effective notifications.
www.sparkpost.com

Follow These 5 Best Practices for Email Notifications
Email is one of the quickest and most important methods of communication. People can access email instantly with notifications on computers and mobile devices. CreativeMinds has several plugins that enable email notifications. This can be essential for the business, so here are five tips to make the best out of it.
www.cminds.com
Empty states
aka null state
Onboarding UX Patterns | Empty States | UserOnboard | User Onboarding
"Empty states" or "blank states" are in-app containers (spaces on pages, templates, or dashboards) that would usually be overflowing with content and activity... but aren't, because it's the user's very first time in the app. Empty states are a major onboarding opportunity. They're blank canvases that you can use to educate, nudge, or show off a little personality.
www.useronboard.com
Skeleton state
Skeleton Loader Example - How to Build a Skeleton Screen with CSS for Better UX
Content loaders, skeleton screens, ghost elements, and content placeholders. These are the names given to the effect we'll be exploring today. Many companies, such as Linkedin, Facebook, Youtube and Slack, use this effect in their apps and websites, as you may have noticed. As much as we developers want our
www.freecodecamp.org
Engaging users with progressive loading in skeleton screen
While building a product, we try to ensure its great performance from a design and technical perspective. But no matter how hard we try to optimize the system to minimize the delay and provide users with a well-designed product, there will always be a point where the user has to wait.
medium.com
Error management and recovery
404 error pages
Colour use
[TUXT #4] La (véritable !) psychologie des couleurs.
Disclaimer : l'influence des couleurs sur nos perceptions, notre cognition ou nos comportements est b ien plus complexe qu'une simple relation de causalité : couleur = effet. Mon objectif, au travers de cet article, est de vous apporter des pistes de réflexion et des exemples concrets d'application.
medium.com
Design systems
Atomic design
Created by Brad Frost first method to integrate the component approach, has been since then overshadowed by a more widespread approach "everything is a component"
Atomic Design Pattern: How to structure your React application
As we build out scalable applications in React, we often face challenges in maintaining the growing complexity of component structures. What I want you to take away from this post is to understand why implementing an archetypal design pattern - Atomic Design, is crucial for the readability, scalability and flexibility of your application code.
medium.com
Everything is a component
Everything is a Component
Directory structure is the new semicolon. Since Prettier solved the "semicolon or not" debate, we now like to endlessly debate the structure of our JavaScript applications. Is it scalable? Is it semantic? Does it matter? There are many flavours of application architecture, each derived from personal preference as much as efficiency or practicality.
medium.com
Pattern library
Design patterns
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Dwell into the patterns below to learn a common language of web design. Design patterns provide a common language between designers.
ui-patterns.com
User Onboarding | Onboarding UX Patterns | UserOnboard | User Onboarding
Why reinvent the wheel when you already have options that can work? Software designers love patterns, and with good reason: Patterns let you find inspiration from how others are approaching the same design problems you're currently facing. User Onboarding is a topic *brimming* with its own patterns, ranging from the abstract to the concrete, from psychological to pixel-perfect.
www.useronboard.com