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...
over 2 years ago • 1 min read
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...
almost 3 years ago • 1 min read
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...
almost 3 years ago • 1 min read
Pro tip: Make sure your text content is approximately 50-75 characters per line on desktop, and 30-50 characters on mobile for optimal readability. The ideal text length for a line of copy on desktop is approximately 50-75 characters per line. This optimises readability and allows your users to easily scan the content of a paragraph without getting overwhelmed. This is backed by research from the Baymard Institute, The Elements of Typographic Style Applied to the Web, as well as the book...
about 3 years ago • 1 min read
Pro tip: Target users directly within your product and recruit them for user research. Recruiting users can often be one of the most time-consuming aspects of user research. Because of that, automating and optimizing the user recruitment process means you can do more research in a shorter time window. One of the most effective ways to recruit users is to use in-app survey tools like Hotjar or Appzi. Read the full article on Designary
about 3 years ago • 1 min read
Pro tip: Define a spacing system to take the guesswork out of designing layouts. What is a spacing system/scale? A spacing system or scale is, simply put, a set of spacing values you use across your design as part of a design system. As we’ve seen before in the box model, by spacing, we refer to the margin between design objects or the padding within them. In this tip Learn how to set up and use a spacing scale, find pro tips on making it effective, and dive into advanced topics like spacing...
about 3 years ago • 1 min read
Pro tip: Use a variety of UI & UX design techniques to add sections to your content and improve visual hierarchy. Visual hierarchy is one of the most important, yet trickiest aspects of a product. It lets your users know where to focus and in what order to read through your content and take action. On mobile, visual hierarchy is challenging because you have limited real estate to play with. On the contrary, on desktop, visual hierarchy is tricky because you have a lot of real estate to work...
about 3 years ago • 1 min read
Pro tip: Copy a Figjam connector into a Figma file to create flexible user flows that adjust automatically. Figma is a very powerful and flexible tool when it comes to design, but it can be quite tricky to map out user flows in a scalable way. There are a number of plugins that can help display flows within a design file (Overflow, ArrowAuto, FlowKit), but depending on plugins means that some things don’t work as expected, and updating the flows can often become a tedious process. Figjam to...
over 3 years ago • 1 min read
Pro tip: Break down long text & image content into logical chunks to improve usability. What is chunking Chunking is breaking down text or media content into smaller bits to help users read, process and understand it better. 💡 The most common real-life example of chunking is the typical phone number format (e.g. +1 234 567 8910 in the US). Phone numbers are chunked into separate parts so that people are able to memorize them better, or scan them in a phone book. When to use it You can apply...
over 3 years ago • 1 min read
