Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Category: UX Design

Quality articles on usability, information architecture, interaction design and other user experience (UX) related topics – for digital (Web, mobile, applications, software) and physical products. Through these articles, experts and professionals share with you their valuable ideas, practical tips, useful guidelines, recommended best practices and great case studies. Curated by Chui Chui Tan. Subscribe to the RSS-Feed.

Popular tags in this category:

The Nine Principles Of Design Implementation

Recently, I was leading a training session for one of our clients on best practices for implementing designs using HTML and CSS. Part of our time included a discussion of processes such as style-guide-driven development, approaches such as OOCSS and SMACSS, and modular design. Near the end of the last day, someone asked, “But how will we know if we’ve done it right?

The Nine Principles Of Design Implementation

At first, I was confused. I had just spent hours telling them everything they need to “do it right.” But after thinking about it, I realized the question was rooted in a deeper need to guide and evaluate what is often a set of subjective choices — choices that are sometimes made by a lot of different people at different times.

Read more...

Friendly, Frictionless Work: Best Practices For Enterprise Messaging UX, From Slack

Creating good user experiences for apps inside messaging platforms poses a relatively new design challenge. When moving from desktop web to mobile interfaces, developers have had to rethink interaction design to work around a constrained screen size, a new set of input gestures and unreliable network connections.

Friendly, Frictionless Work: Best Practices For Enterprise Messaging UX, From Slack

Like our tiny touchscreens, messaging platforms also shake up the types of input that apps can accept, change designers’ canvas size, and demand a different set of assumptions about how users communicate.

Read more...

The Surprising Relationship Between Gamification And Modern Persuasion

If you're like me, then being persuaded requires a scientific approach and concrete examples. And that's exactly what this article does. It explains how gamification can work by showing the relationship between gamification, UX design and BJ Fogg's modern persuasion phenomenon, "mass interpersonal persuasion." And it has a lot of practical gamification examples that you can apply to your own products for more engaging experiences.

The Surprising Relationship Between Gamification And Modern Persuasion

Today, virtually all companies (except for special ones like Basecamp) have to grow non-stop. Why? Well, that's simply how the capitalist engine works. Investors pour money into startups, banks loan money to entrepreneurs, employees accept stock options instead of cash, all in the hope of the company growing much bigger.

Read more...

The Missing Advice I Needed When Starting My Career

Do you ever wish you had a time machine? I certainly do, but not for the usual reasons. I want a time machine so I can go back and have a frank conversation with my younger self. I’ll let you in on a bit of a secret: My younger self was an idiot!

Look for inspiration beyond the web. Look to art, architecture and print design.

I have been working on the web for over 22 years now, and I feel like I wasted so many of those years. If only I could go back and share a few hard truths with myself at the start of my career. Unfortunately, I cannot, but I can share that advice with you.

Read more...

Designing The Perfect Slider

When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel, or perhaps off-canvas navigation, with the overlay sliding in from the side. However, this article is not about those kinds of sliders. Instead, we’ll look into the fine details of designing better slider controls for selecting a value or a range of values. Think of price range sliders, 360-degree-view sliders, timeline sliders, health insurance quote calculators, or build-your-own-mobile-plan features.

A playful animation of a slider, changing the appearance of a house.

In all of these use cases, a slider is helpful because it allows users to explore a wide range of options quickly. For precise input, a slider can never beat a regular input field, but we can use a slider to nudge our customers to explore available options and, hence, aid them in making an informed decision.

After a close look at perfect accordions and date and time pickers, let’s turn our attention to sliders, with do’s and don’ts and things to keep in mind when designing one. But first, we need to figure out when a slider makes sense in the first place. (Please note: that article is quite large, and contains many animations and videos.)

Read more...

Designing The Perfect Date And Time Picker

What could be so difficult about designing a decent date picker? Basically, we just need an input field and an icon that represents a calendar clearly enough, and once the user clicks on that icon, we pop up a little overlay with the days lined up in rows. Right?

Designing The Perfect Date And Time Picker

Well, not every date picker fits every interface, just like not every interface actually needs a date picker. But when a date picker is required, quite often it's just a bit too tedious and annoying to specify that one date, and too often it produces irrelevant results or even a zero-results page, although just a few minor refinements would make it much easier to use.

Read more...

Designing The Perfect Accordion

Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea.

Designing The Perfect Accordion (With A Checklist)

Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests.

Read more...

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages

Websites with long or infinite scrolling are becoming more and more common lately, and it’s no mere trend or coincidence. The technique of long scrolling allows users to traverse chunks of content without any interruption or additional interaction — information simply appear as the user scrolls down the page.

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages

Infinite scrolling is a variety of long scrolling that allows users to scroll through a massive chunk of content with no finish line in sight (it’s the endless scrolling you see on Facebook, Twitter and Tumblr feeds).

Read more...

Better Form Design: One Thing Per Page (Case Study)

In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation.

Better Form Design: One Thing Per Page

Each step (delivery address, delivery options and credit-card details) had an accordion panel. Each panel was submitted via AJAX. Upon successful submission, the panel collapsed and the next one opened, with a sliding transition.

Read more...

Filling Up Your Tank, Or How To Justify User Research Sample Size And Data

Jen is presenting her research report to a client, who runs an e-commerce website. She conducted interviews with 12 potential users. Her goal was to understand the conditions under which users choose to shop online versus in store.

Filling Up Your Tank, Or How To Justify User Research Sample Size And Data

The client asks Jen why they should trust her research when she has spoken to only 12 people. Jen explains her process to the client. She shares how she determined the sample size and collected and analyzed her data through the lens of data saturation. The client feels comfortable with the explanation. She asks Jen to continue the presentation.

Read more...

How To Improve Your Billing Form’s UX In One Day

The checkout page is the last page a user visits before finally decide to complete a purchase on your website. It’s where window shoppers turn into paying customers. If you want to leave a good impression, you should provide optimal usability of the billing form and improve it wherever it is possible to.

Improve Your Billing Form’s UX In One Day

In less than one day, you can add some simple and useful features to your project to make your billing form user-friendly and easy to fill in. A demo with all the functions covered below is available. You can find its code in the GitHub repository.

Read more...

How To Spark A UX Revolution

Editor's Note: Making big changes doesn't necessarily require big efforts — it's just a matter of moving in the right direction. We can't wait for Paul's new book on User Experience Revolution (free worldwide shipping starting from April 18!), and in this article, Paul shares just some of the little tricks and techniques to bring around a big UX revolution into your company — with a series of small, effective steps.

It feels like everywhere I turn somebody is saying that user experience is the next frontier in business, that we have moved beyond the age of features to creating outstanding experiences.

How To Spark A UX Revolution

But for many of us who work on in-house teams, the reality feels a million miles away from this. Getting management to understand the importance of user experience seems so tough. Even colleagues don't seem to see the benefit. For those of us in-house, how are we going to get to this golden age of user experience design that people keep promising us?

Read more...

↑ Back to top