Smashing Newsletter: Issue #275

Editorial

Many of us have been in the industry for a while now, and we’ve heard about human psychology, and compelling microcopy and scarcity and social proof. So it’s not uncommon to land on a page that does a fantastic job at pushing just the right buttons to drive sales and sign-ups. But just as landing pages are often very good at conversion, the products that these landing pages promote often perform very poorly at retention.

At the heart of it usually lie performance and accessibility issues, difficult onboarding, a flawed pricing model, or just the lack of a clear value proposition. We roll up our sleeves and tackle these issues with user interviews, design iterations and A/B tests — often successfully, sometimes not so much. We talk about the right features and the right placement of these features. However, one consideration that’s often missed in this process is the right timing to prompt a particular action.

User Frustrations in 2020 — Common user frustrations, as discovered in our user interviews this year — mostly related to user input. Plain text view.

Asking for an email on an eCommerce site is a good example. We could easily generate leads with a slightly annoying newsletter pop-up for first-time visitors. We would surely gather some sign-ups, and we might even decide to show the pop-up for people coming from search engines as well.

But what kind of email addresses would we get there? How many of them will probably be barely used, abandoned, and filled with irrelevant notifications and marketing campaigns? As business owners we don’t want just email addresses — we want good email addresses, the ones that customers check frequently, and that they open regularly; with a mailing list that has high opening rates and low bounce rates.

Right Timing For Input — In the end, it’s all about finding the right time and the right way to ask the right questions, without too much hassle. Plain text view.

To achieve that, perhaps we need to give customers a chance to build trust and interest first, e.g. by looking at a few product pages, or tutorials, or a few videos on the site. We need to ask for an email only when we know that we are likely to get a good one in response. So rather than asking where is the right place to show a newsletter pop-up, wouldn’t it be more useful to ask when is the right time to ask for an email?

When will your visitors know just enough to respond positively to whatever action you encourage them to take? Perhaps next to the price on a product page, so customers could “qualify” for free shipping or a little discount? Perhaps when the email matters most — just when they are about to pay, or when they’ve just paid?

Perhaps the right question isn’t where but when. Be it password, location permissions, push notifications, the data needed to get started, or moving users into the funnel. Timing matters.

Happy experimenting!
Vitaly (@smashingmag)

Enhancing User Experience With CSS Animations
Getting React Server-Side Rendering Right
Tips And Tricks For Debugging JavaScript
New Front-End & UX Workshops
A Little Game To Improve Your Pen Tool Skills
Free CSS And SVG Background Patterns
New On Smashing Job Board
Our Current Most Popular Articles

1. Enhancing User Experience With CSS Animations

Animations have become a popular way to improve the user experience in the last years. But how do we make sure that our CSS animations and transitions will be meaningful to users and not just decorative eye candy? Stéphanie Walter gave a talk about enhancing UX with CSS animations at the virtual Shift Remote conference back in August. In case you missed it, she summarized everything you need to know in a blog post accompanying the talk.

Starting with a reminder of CSS syntax to build transitions and animations, Stéphanie explores why certain animations work better than others. She shares tips for finding the correct timing and duration to make UI animations feel right and explains why and how animations do contribute to improving the user experience. And since great powers bring along great responsibility, she also takes a closer look at how you can make sure your animations don’t trigger motion sickness. A great reference guide. (cm)

2. Getting React Server-Side Rendering Right

When Josh Comeau pushed updates to his website, he noticed a strange issue. Everything looked perfect in development, but in production, the bottom of his blog was all messed up, with content in places where it wasn’t intended to be. Josh discovered that his React component was rendering in the wrong spot. The reason: a fundamental misunderstanding about how React works in a server-side rendering context.

To clear the misunderstanding up for good, Josh summarized everything you need to know about it in his blog post “The Perils of Rehydration”. An eye-opening explanation of how server-side rendering works, why the original logic can be problematic, and how a different approach can accomplish the same goal. (cm)

3. Tips And Tricks For Debugging JavaScript

Bugs happen, and when they happen, it’s good to know how to tackle them in a smart way. If you need to debug JavaScript code, Sean Higgings wrote a handy article to help you find the right debugging approach and master the challenge while adhering to best practices.

Sometimes you might want to log events to the console when debugging JavaScript events. For those occasions, Matthias Kupperschmidt shares a nifty trick that prevents sending and tracking browser events multiple times — perfect for when you want to see how many submit events a form sends out, for example. (cm)

4. New Front-End & UX Workshops

We’ve been running online workshops since April this year, and it’s always an incredible experience with wonderful attendees from all over the world coming together to learn something together. That’s Smashing Workshops: live 2.5h-sessions with practical examples, video recordings and a friendly Q&A.

Smashing Online Events — Live and interactive: 2.5h-sessions, spanning across days or weeks.

We’ve just announced our new front-end & UX workshops on front-end in 2021, forms, SVG animation, CSS and HTML email. There are still some early-birds left, with a lil' friendly discount, so take a look and perhaps join us as well. (vf)

5. A Little Game To Improve Your Pen Tool Skills

How well do you master the Pen tool? If it causes you headaches when working with Photoshop, Illustrator, XD, or other tools, the Bézier Game helps you take your skills to the next level, in a quick and fun way.

After completing the quite self-explanatory tutorial stage, the challenge begins: In the first level, an unassuming (but quite tricky) little car shape is waiting for you to redraw it using the least amount of nodes possible. Each node and each curve that snaps into place reveals a little piece of the rainbow-colored path and brings you a step closer towards becoming a Pen tool master. Don’t despair if you can’t make it on the first try. As with everything, practice makes perfect. (cm)

6. Free CSS And SVG Background Patterns

CSS and SVG make it easy to create background patterns that are beautiful and performant. If you need a bit of background inspiration or are looking for a quick copy-paste solution to add the code for a background pattern to your project, we came across two handy resources recently.

Jim Raptis’ CSS Background Patterns features copy-paste CSS code for free geometric backgrounds. To tailor the patterns to your liking, you can select back and front colors, opacity, and spacing. Decent Patterns by Chris McGrane works similarly but with SVG. The 80 patterns in the collection are made up of single unicode characters. A quick and easy way to shape the personality of a project. (cm)

November 17, 2020 Smashing Newsletter: Issue #275

Previous Issues