#19 - How to use Dropdowns
I am going to change the format of the theory articles in the newsletter, mostly to make them lighter and faster to read, keeping them between 250 and 500 words, so they can be read in a couple of minutes. When I have a certain number of publications, I will ask to see what about 😁
What is a drop-down menu?
What is a dropdown? A dropdown is an interactive element with which we can organize information inside a small drawer and take out the data we want. And an important data, always one data at a time, if we take out several data from the same component is no longer a dropdown, is a listbox.
Drop-down menu types
Also comment that there are two types of dropdown: boxes and menus. The boxes are used in form elements and attributes, having to select one of them being permanent or temporary, or menus, carrying out an action (an action itself or navigate).
Thanks to this small box we will be able to have our "desktop" more organized, resorting to it when we need it and not having everything above. These dropdowns can be of four types:
- Command (dropdown-menu): when we want to activate something based on the option.
- Navigation (dropdown-menu): when we want to go somewhere.
- Form (dropdown-box): when we want to choose an option.
- Attribute (dropdown-box): when we want to select an attribute
As you can see, when it is a menu, we choose one and carry it out, but if what we want is to navigate or change the attribute, we will use the box format.
How to use drop-down menus?
And finally, a few notes on how to use them:
- The dropdown options should not change, if they must change use a feedback message or similar to let the user know that within this block the information has changed.
- Do not hide information, if an option is not available, maintain consistency and transparency and mark these options in gray.
- Do not abuse the options, if there are too many, find another way to display them as mega menus. Here Fitt's law is the law.
- Avoid using them if the information is mundane like the year; the user will have a lower interaction cost if he writes it down before looking it up in the list.
- Don't hide the dropdown title when it is unfolded.
- Don't use them for first levels of navigation, why hide them?
- Enable keyboard navigation (when we type “Sp" to search for Spain) for power users.
Articles & Ideas
Similarity Principle in Visual Design
Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups. Aurora Harley
Three Myths About Calculating the ROI of UX
Many teams overthink return-on-investment calculations for UX work. Treat these calculations as a way to estimate the strategic value of design. Kate Moran
Designing a Material Theme: Typography
Tailoring your typography with Material Design and Figma. Liam Spradlin
The Design Principles Workshop
The 5-step process to work out your guiding principles. Sebastian Mueller
Design annotations that will make your developers happy
Using annotations to convey behaviors, error cases, and design changes. Grace Noh
Inspirational Images Should Link to All Depicted Products (9% of Sites Don’t)
Indeed, our research shows that bespoke imagery is one of the biggest factors in positively influencing the user’s initial perception of the site, with 88% of our benchmark sites using inspirational imagery across the site. Kathryn Totz
AND states vs OR states
A case study of UX confusion. Something I see frequently in early career UX prototyping is a lack of understanding of existing design patterns, and what they communicate to the user. And specifically of the cognitive psychology which sits behind them. H Locke
Downloadable Lottie files that work like magic on your Webflow site. Choose icon, change hex color, select ease-y or linear, download json. Easy as pie
The Dots | The future of work
The professional network for people who don't wear suits to work. Land your dream job. Upskill at events. Get advice & find collaborators.
The #1 Fully Automated Web Accessibility Solution for ADA & WCAG Compliance
Just practical stunning icons for everyone. Save your penny and time creating from scratch, use these diverse Icon set to complete your awesome design
Start your project with a powerful list. Potluck lets you coordinate your team, link tasks, and manage work in the simplest possible way.
ProtoPie Free for Students & Teachers
ProtoPie helps students, schools, and teachers. Our tool is free for all students, teachers, and schools. We believe in investing in the future.
So.... you’ve made your site, you’ve made your app, now it’s time to make all of the favicons and app icons in 50 different sizes.
All remote jobs links have been removed, as the positions were fulfilled.