#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

Products

Lottieflow‍

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.

‍accessiBe‍

The #1 Fully Automated Web Accessibility Solution for ADA & WCAG Compliance

‍iconhub‍

Just practical stunning icons for everyone. Save your penny and time creating from scratch, use these diverse Icon set to complete your awesome design

‍Potluck‍

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.

Iconpie (retired)

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.

Remote Jobs 

All remote jobs links have been removed, as the positions were fulfilled.