Prefer to visually separate menu sections with whitespace. Whitespace makes the UI look cleaner and request less cognitive effort from the user. In the example below: A is too complex and distracts the user, but both B & C can be used on real-life user interfaces. B puts more attention on differen…
Never allow the user to delete something without validation. People misclick all the time, and losing information forever hurts and creates a bad memory related to your product! Make sure your UI supports (inline or popup) deletion validation. Even the undo functionality is useful in these scenarios, …
With a simple UX copy adjustment, you can avoid misunderstandings and upgrade your product experience. This is a real-life example from the voice messaging app Yac . I literally spend 30' wondering if the app will auto-post my voice message in the channel or allow me to hear and edit it first. In t…
The biggest struggle with a landing page is to communicate clearly your value. People care the most about making their job quicker, saving money, or/and making more money. A simple way to hack this is by adding calculators that show concrete numbers about the value you provide. Tip: Use an analytics s…
Highlight important actions with the red color (aka <strong> danger</strong> zones). The red color signifies <strong> danger</strong> and warms users to pay attention to their next action. It's a good practice to use it for downgrades, user deletion, project archives, etc.
Real catchy mockups can make a huge difference on your landing page. Give people a hint about your product and make them curious to try it out. Hint: Include an interactive feature picker to let them interact with all the features you offer.
Back up your offer with compelling numbers to make people trust you. It's needless to say that all these numbers must be real! The Round Number Bias tell us that people prefer rounded numbers over numbers that aren't. However, "ugly" non-rounded numbers are better to build trust sin…
A smart use case for labels is on color pickers with predefined values. Depending on the app's context you can even omit labels. Consider keeping them for color-blind people who struggle to identify colors though.
Complement your link copy with a visual representation of the selected value. In this example, the labels show you how capitalization will look. It's not always possible to do this hack, so go all into it when the opportunity presents itself.
