Issue #19

Sent the September 15th

"Styles come and go. Good design is a language, not a style." – Massimo Vignelli
Header image its not relevant🌱 Thanks to Nicholas Lokasasmita for this issue artwork

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 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.

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.

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 changesGrace 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
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 

Chili Piper - Product Designer
Chili Piper helps sales teams automatically schedule appointments with leads. Instantly turn inbound leads into qualified meetings.

Getresponse - Lead Brand Designer
Think of email as your intelligent secret weapon. Try now! Smart tools and solutions to grow your business. Scalable pricing. 99% Email Deliverability. A/B Testing. Email Analytics.

Zenloop - Product Designer
Automate your customer retention. Grow revenues instantly. · With zenloop you can… · Customer feedback can grow your business · Expand customer centricity.

📬  Get the newsletter ♡

📕 Check the last issues

Go back