Pro tip: Automatically validate one-time passcodes
Pro tip: Automatically validate one-time passcodes
When expecting users to paste one-time passcodes, automatically validate them.
One-time passcodes (OTP) are one of the most commonly used patterns for two factor authentication (2FA) in modern products and applications.
However, they can sometimes add unnecessary friction: A one-time passcode flow may add anything from two to three additional taps before your user can sign in to your product.
That’s why it’s often a good idea to automatically validate them once the user has filled in all required digits/letters.
| Read the full tip on Designary |
⚡️ Weekly resource: Design System Typography Breakdown
Tim Lee analyzed a bunch of design systems and identified the way different teams structure their typography scales and patterns. It's a really insightful watch and comes with a Figma file that includes all the learnings.
Watch the full breakdown on YouTube
🧠 Thoughts
I wrote a piece on career obstacles and rejection. If you are currently struggling to get the right role in the right company, have lost a client or can't seem to get your side-hustle going, just remember: Every minute you spend contemplating why something happened or not can be leveraged to do something else that's 10x more rewarding.
📗 Good reads
In his recent article, Jakob Nielsen talks about AI as a new UI paradigm. To summarize it:
- With this new paradigm, the user tells the computer what outcome they want
- However, current generative AI tools have deep-rooted usability problems
- Users that don't know how to write the right commands get poor results
It's a very interesting read, as it prepares us for how the notion of an AI user experience may change in the future, either to allow for easier prompting, or to utilize a hybrid approach between a graphical user interface and a prompt-based interface.
Exciting times ahead.
Stay tuned for the next one 👋,
Filippos
Designary
Real-time validation is a commonly used practice for form UX: it can create a dynamic, instant-feedback experience that provides clarity to users. However, it doesn’t always work as planned, and may cause even more frustration than expected if it’s not done at the right time. In this tip, we are looking at some of the most common problems with real-time validation and how to avoid them: Read the full tip on Designary 💡 Highlight of the week: Framer AI We couldn't leave out Framer AI from this...
Sticky buttons and navigation elements at the bottom of a mobile interface are nothing new. Tab bars and buttons are some of the most widely used UI elements on mobile apps and mobile web apps. However, mobile web poses a challenge. Tapping at the bottom of the screen often results in bringing up the browser toolbar, both in Safari and Google Chrome. In this tip, we are looking at some of the most effective ways to avoid this confusing behavior: Read the full tip on Designary 💡 Highlight of...
Pro tip: Add keywords to your design system component description to make them easily searchable. Searchability in design systems is key. Designers may spend hours building and maintaining design system components, only for them not to be used due to a lack of poor documentation, poor searchability, and discoverability. This simple but powerful tip, shared by Yamilah Atallah (Product Designer at Instagram, ex-Twitter), will improve how you document, search and find design system components in...