All posts in UX, UI & Web Design

Enhancing User Experience With CSS Animations

Enhancing User Experience With CSS Animations

With CSS and JS progress, implementing animations on websites has never been easier. But how do we make sure that our CSS animations and transitions will be meaningful to our users? That they will not be just some annoying “in-your-face” eye candy? That they will not trigger motion sickness and cause accessibility issues to some?
You will find here a transcript with CSS codepen and video examples and LOT of resources to dig further in specific topics. I also published the PDF version of the slides at the end of the article.

Continue reading

Designing Adaptive Components, Beyond Responsive Breakpoints

Designing Adaptive Components, Beyond Responsive Breakpoints

Last week, I was invited to “Ask the Expert”, an online meetup where experts share their knowledge around different topics related to building the web. In this article you will find a short transcript, the slides, a video of the talk and some demos and resources for the talk. I show how I design systems of components that go beyond responsive adaptation to different screen/viewport size and can also be used in different layout and container contexts. I also try to make sure that my components work beyond the perfect “happy path perfect situation”: what happens with super long text, missing images/content for example? And how about adapting components to user needs across specific points in their journey and build truly adaptive systems?

Continue reading

A Cheatsheet for User Interview and Follow Ups Questions

A Cheatsheet for User Interview and Follow Ups Questions

When I prepare user interviews (or usability tests), I end up coming back to the same resources again. I decided to put them all in one single place. If you follow this blog, you know it’s also kind of my “public bookmarks of resources” and “memos”. So here we go: I put together a “cheat sheet that helps write interview and follow ups questions for user research and usability test protocols” Those are fragments of questions to should help you get started writing your own questions. I organized them in different categories depending on what type of question I want to ask. I hope it will help you in some ways. You can also download them directly as .PDF if you need to print them or want to use those offline.

Continue reading

The Pragmatic Designer: Local and Self Hosted Design Tools

The Pragmatic Designer: Local and Self Hosted Design Tools

There’s some environments where a designer’s toolbox can be quite limited. In this article, I list the cloud/online tools related to user research, design and designer/developer relationship I like to use (when I can). I give some local/self-hosted/free alternatives for: user flows, card sorting, surverys and polls, interactive prototyping, feedback sessions on mockups and documentation, collaboration with developers and handoffs, design system documentation and user data analytics. I also give some tips and tricks on how to “hack” the tools you usually have in those companies (like the Microsoft Office ones) to still be able to do your job as a designer. Welcome to the Pragmatic Designer Guide. Also known as: “how to still do efficient user research, UI design and collaborate when you can’t use Figma, Invision and all the fancy new cloud design tools because you are working for banks, insurance and other institutions”.

Continue reading

Color accessibility: tools and resources to help you design inclusive products

Color accessibility: tools and resources to help you design inclusive products

I wrote a quick tweet about teaching the basics of accessibility and colors to design students that go quite some attention. It brought up some interesting discussions. So I thought I would share with you all the resources, tips and tools I regularly use to build and check the color accessibility of my products in one place. Enjoy.

Continue reading

An Introduction to User Journey Map + PDF Templates

An Introduction to User Journey Map + PDF Templates

I’ve spent last Saturday mentoring and coaching some startups at a WIDE (women in digital empowerment) event. The whole day was about helping them build a more user centered product and come up with a paper prototype of some of the features so that they can test it later. In this context, I gave them a small introduction to User Journey Maps, a tool that helps designers get a visual representation of the whole experience users have with a product or a service. This article is a transcript of this introduction. I will guide you step by step on how to build a user journey map for your product or service. At the end of the article you will find the slides but also two templates to help your build user journey maps for your own projects.

Continue reading

What minimum font-size for a high-density data web app do you suggest?

What minimum font-size for a high-density data web app do you suggest?

I get quite a few emails with very specific questions about UX and UI design. Most of the time, the question is so specific that it’s hard to reply in just a few lines without understanding the context and users of the project. I can nevertheless give some generic advice in some cases. I decided to share the replies to those questions so that it will help more people. So here we go, I’ve no idea if this is going to become a “thing” on this blog and needs a specific section. For now, let’s try to keep it short and simple.
This first article is about font size and the minimum font-size for high-density data web app and my advice to help you pick the right size.

Continue reading

Solving Design Problems: Finding UX Tools, Methods & Activities

Solving Design Problems: Finding UX Tools, Methods & Activities

Involving users, audience, stakeholders, partners, internal teams and developers from the start will help us build better products and services. There’s a lot of methods available to UX designers to help us accomplish this. This unfortunately means that it’s also pretty easy to get lost and feel overwhelmed with the quantity of information available. In this article I am going to share with you my list of seven ressources I use in my daily job to find the right UX method and tool.

Continue reading

🎁 Free UX Starter Kit and a User Research Starter Crash Course

🎁 Free UX Starter Kit and a User Research Starter Crash Course

I facilitated a workshop on: “User eXperience – starter crash course for Startups”. The audience was a nice mix between students and entrepreneurs with a project/ website. The goal was to help them discover how to build a product with a user centric approach and why startup people should focus on users needs and talk to their potential users as soon as possible.
In this article, you will find the slides of the workshop. At the end of the articles, you can download a small “UX Starter Kit for Startups” kit I created. It contains templates to build a product concept, a user journey map, a user flow kit, some mobile, tablet and desktop templates for paper prototyping and a guerilla usability testing checklist.

Continue reading

52 UX Cards to Discover Cognitive Biases

52 UX Cards to Discover Cognitive Biases

Cognitive biases are psychological thought mechanisms and tendencies that cause the human brain to draw incorrect conclusions. For better or worse, you can use them in many different ways to influence user behavior in your products and services. These biases will also impact collaboration between team members and during meetings or might influencer your user research. Whether you are creating the user experience of an interfaces or purchasing something online, it’s interesting to be aware of these biases. Laurence Vagner and I created a deck of deck of 52 cognitive bias UX cards to help people discover and understand different cognitive biases. 

Continue reading