Smashing Newsletter #284: UX Edition

With landing pages, disabled password pasting, loading spinners and push notifications.Issue #284 • Tue, Jan. 19, 2021 • [View in the browser]( [Smashing Newsletter]( Dear Friend, User experience is everywhere. Every decision everybody on the team ever makes has a consequence on how customers will perceive the product. While we often talk about interfaces and user flows and onboarding and personal and wireframes in the context of UX, usually it’s much broader than that. Every interaction has to be designed, every error message and web font reflow count; every marketing message and wording on calls to action will leave a customer happy or annoyed. So in this issue of our newsletter, we focus on all things UX: from better landing pages and disabled password pasting to loading spinners and push notifications. Let’s get them right. And if you are interested in more stuff around UX, we have Adam Silver’s [Web Form Design Masterclass]( online workshop coming up later today — and we’d be happy to welcome you. So, off we go — designing better user experiences everywhere! — Vitaly ([@smashingmag]( --------------------------------------------------------------- Table of Contents 1. [Designing Better Landing Pages](#a1) 2. [Getting Push Notifications Right](#a2) 3. [Alternatives To Spinners On The Web](#a3) 4. [Improving Security With Password Pasting](#a4) 5. [Custom Enter Key Action Labels](#a5) 6. [New On Smashing Job Board](#a6) 7. [Our Current Most Popular Articles](#a7) --------------------------------------------------------------- #1. Designing Better Landing Pages Persuading someone to take an action isn’t always about convincing them with arguments. Sometimes it’s enough to describe clearly what pain points a product addresses, make the pricing transparent and explain what audience the product is addressing well (perhaps backed up with some social proof). [Designing Better Landing Pages]( In a Twitter thread on [Landing Page Hot Tips]( Rob Hope, a passionate UX designer from Cape Town, South Africa, lists 100 useful tips to keep in mind when designing a landing page (or any other interface really). Each tip has a visual and a little cheatsheet — along with a few quick pointers of things to do and things to avoid. All tips are also collected in a lovely eBook as well. If you need a bit more landing page inspiration, Rob also runs [OnePageLove Landing Pages]( a growing repository of well-designed landing pages, as well as [Land-Book]( and [Landingfolio](. (vf) --------------------------------------------------------------- #2. Getting Push Notifications Right Many users genuinely dislike push notifications because many websites abuse them for the mere purpose of increasing engagement. But instead of forgoing them completely, Stéphanie Walter suggests a different approach — after all, if done right, notifications have good use cases that can improve the user experience. [The Ultimate Guide To Push Notifications]( In her [guide to push notifications]( Stéphanie shares valuable advice on how to stop ruining push notifications and get the trust of users back. The two pillars that a good notification is built upon: Give your users a chance to understand what they gain from notifications and ask for permission in context, not on page load. This could be an e-commerce site that asks customers if they want to receive notifications about parcel status and delivery after completing a purchase or an airline notifying users when their flight is delayed, for example. A must-read. (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #3. Alternatives To Spinners On The Web Animated spinners are a frequent sight, but the question about the real value they offer to users gives a lot of room for discussions. Simon Hearne even goes so far as to call spinners “lingering legacies of the 1990’s web”. But what better alternatives are there? [Alternatives to Spinners on the Web]( To help you assess if a spinner is the way to go for your project, Simon dedicated an [article]( to spinners, the psychology behind waiting, and alternatives you might want to consider. Simon’s conclusion in a nutshell: Replace ambiguous spinners with better progress indication and add dynamic explanatory text. If you do need a spinner, make sure it uses CSS and SVG (rather than GIF) that are branded to your site and relevant to the task at hand. A small detail that can make a real difference. (cm) --------------------------------------------------------------- #4. Improving Security With Password Pasting When it comes to passwords there’s a critical question: Should users be allowed to paste them or not? Often deemed to be insecure, pasted passwords even make your site more secure, not less, [as UK’s National Cyber Security Centre points out](. [Let Them Paste Passwords]( The main reason for this is because pasting passwords makes it much easier to have different, more complex passwords and work with password managers to keep track of them. The risk of brute force attacks using copy and paste is also very small as there are more efficient ways for attackers to guess a password, as the National Cyber Security Centre points out. If you want to dive in deeper into why disabling password pasting might do more harm than good, Troy Hunt also wrote an [article]( on the topic some years ago which is still gold today. If you are looking for more practical advice on designining a better password input UX, [Safe and Sound – How to Approach Password UX]( highlights a few interesting points and examples, incl. the show/hide pattern, simple security rules and passphrases. (cm) --------------------------------------------------------------- #5. Upcoming Front-End & UX Workshops CSS is awesome, and we can get better at it by learning together. So as it happens, we have some friendly [online front-end & UX workshops]( dedicated to CSS, form design, SVG animation, design systems, HTML email and front-end in 2021. [Smashing Online Workshops]( Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a [truly smashing experience]( with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to [join us and recommend to others]( — just sayin’! ;-) --------------------------------------------------------------- #6. Custom Enter Key Action Labels It might be a tiny detail, but it’s definitely one that sparks delight when typing on a virtual keyboard: an [enter key that gives the user more context]( depending on the task they are about to complete. The enterkeyhint attribute makes it possible. [enterkeyhint]( Be it a checkmark as a cue for the operation “done”, a paperplane representing “send”, or the term “next” to jump to the next page in a form, allows you to specify action labels or icons to present for the enter key. Nice! (cm) --------------------------------------------------------------- #7. New On Smashing Job Board - [Senior Software Engineer]( at PHV (Amsterdam) - [Senior Designer]( at ThinkShout (Portland, Oregon) - [Design Lead]( at Venture Harbour (UK, Anywhere) --------------------------------------------------------------- #8. Our Current Most Popular Articles - [Web Design Trends 2021: The Report]( - [Front-End Performance Checklist 2021]( - [Integrating A Dialogflow Agent Into A React Application]( --------------------------------------------------------------- That’s All, Folks! Wow, you’ve made it this far! We hope you’ve found at least some useful, practical tidbits that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve! Thank you so much for reading and for your support in helping us all learn and get better, together. Meow, and see you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](