Raphael Thys
  • About
Contact me
Digital Transformation and Digital Products at the age of AI
LinkedInInstagramFacebookXSpotify
Futurist · Keynote Speaker · AI Coach
Futurist · Keynote Speaker · AI Coach
/
Resources
/USER EXPERIENCE CLASS
USER EXPERIENCE CLASS
/
Hands on UX

Hands on UX

  • 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

ReallyGoodUX

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

Home | Laws of UX
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

10 Usability Heuristics for User Interface Design

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

Design Patterns: Better Navigation UX With Navigation Queries - Smashing Magazine

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

Design Patterns: Designing Perfect Breadcrumbs UX - Smashing Magazine

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

Designing A Perfect Language Selector UX - Smashing Magazine

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

Best Practices for Search | UX Booth
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

UX for search 101️
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

Search interface: 20 things to consider
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

Mobile search UX: Best practices for in app search design | Algolia Blog
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 Design: Best Practices and Design Patterns - Smashing Magazine

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

Best Practices for Search Results
Exercices - 01 | Le bloc-notes, UX & Design d'expérience utilisateur

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

Form Abandonment: 10 Ways to Track & Eliminate It Today

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

Frustrating Design Patterns: Disabled Buttons - Smashing Magazine

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

Mobile Form Design: 15 Best Practices and Examples
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

Looking for Mobile Form Design Best Practices? Here's THE Definitive Guide!

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

Let's design data tables
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

UX Data Table Design Patterns & Best Practices
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

Examples of hierarchy in data tables and their usability

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

UI/UX Design - Payment process interface optimization

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

The biggest UX mistake in e-commerce: discount code input on the checkout page
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

4 Tips for Perfecting Promo Code UX on eCommerce Websites
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

How to design better coupons?

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

Building a meaningful notification system for digital platforms
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

A Comprehensive Guide to Notification Design
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

How To Design Notifications For Better UX
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

Notification Design Strategies | UX Booth

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

8 Rules of Great Email Notifications
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

Follow These 5 Best Practices for Email Notifications

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

Onboarding UX Patterns | Empty States | UserOnboard | User Onboarding

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

Skeleton Loader Example - How to Build a Skeleton Screen with CSS for Better UX
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

Engaging users with progressive loading in skeleton screen

Error management and recovery

404 error pages

image

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

[TUXT #4] La (véritable !) psychologie des couleurs.

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

Atomic Design Pattern: How to structure your React application

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

Everything is a Component

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

Design patterns
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

User Onboarding | Onboarding UX Patterns | UserOnboard | User Onboarding