Menus have readability issues very often
A quick hack to make them look and function better is to add an icon next to every action. In that way, you help users visually identify actions without having to read the whole copy.
Also, it's a good practice to highlight the active tab, if it's applicable to the menu's use case.
In many cases, you have to align uneven in size elements.
Even if you set the spacing between the elements to be the same, the visual result seems off.
The best way to fix this visual issue is by setting the same width for all the elements.
*Hint:* Pick the width of the biggest element and apply it to all the other items.
Always try to de-emphasize dangerous actions like deletion.
You have to prioritize the default action instead of the dangerous/irreversible one.
Also, use more than one trait to make the element look like a secondary action (color, size, type, placement, etc).
A good header needs to put attention on the title and then lead the reader to the description, which must be readable.
A few quick hacks to achieve this hierarchy include:
1. Stronger font-weight for the title
2. A consistent type scale system. The most common is x1.25, which means that if the title is 40px, the subtitle must be 40/1.25 = 32px.
3. Lower contrast for the subtitle
4. Proper line-height for the description text.
5. Left alignment, since it boosts readability
Aligning uneven items can become weird
Even if the spacing between them is the same, the visual result seems off sometimes.
A super-quick fix is to set the same width for all the elements. Pick the width of the biggest element and apply it to all the other items.
Many platforms (like Twitter) allow PNG avatars that can cause UI inconsistencies
To avoid this problem add a subtle border and background color to the avatar that is the same as the app's background.
Another visual hack to ensure consistency for transparent avatars is by adding a subtle border around them, the same color as the background.
The border looks like it's part of the background and distinguishes it from the cover section.
Round images usually look weird when they're included in a card with a small border-radius.
Use the simple rule of thumb:
𝙊𝙪𝙩𝙚𝙧 𝙍𝙖𝙙𝙞𝙪𝙨 = 2 * 𝙄𝙣𝙣𝙚𝙧 𝙍𝙖𝙙𝙞𝙪𝙨
* The precise formula is more complicated since you need to take into account the spacing between the two borders, so let's it simple!
Colors are a core element for any user interface.
One of the most common mistakes in UI design is the over usage of the brand color.
Avoid it by highlighting only the most important elements of your interface with your primary color.
For the rest of the elements, combine tints & shades of your main color.
Always make sure that your selected items are easily identified at a glance.
Changing the background color is a simple and accessible way to achieve it!
It makes the user experience better since the user can easily figure out which elements are already selected.
Links are important and you need to treat their appearance nicely.
Many times a traditional button works better than a single link.
Especially if the link is not on a header, footer, or the body of an article.
Always make the copy actionable and hint at the action they initiate.
Your design, and mostly your buttons, need to be consistent thought the user interface.
Keep this in mind especially for the header (hero) section.
Don't confuse your visitors with different buttons in styles and copy.
For almost all cases, you only need **a single primary CTA** for your top screen.
Always highlight your best pricing plan and make it pop out.
In that way, you help users identify the most used plan and you promote your top offer. It's a win-win situation.
To highlight the plan, use more than one design ways, eg. color, size, elevation (aka shadow)!
Long lines can bore users and create readability problems.
Fix it by limiting the line's width between 500px and 700px.
Instead of pixels, you can restrict the character number per line as well.
In CSS, it's easy to set this up by using the "ch" unit:
`10ch is x10 times the width of the character 0`
In many cases, cards fail to indicate that they're clickable.
Designers omit CTA buttons and only count on the user's experience or/and, hover effects.
**In design, it's always a good practice to never leave things on user imagination.**
Instead use an actionable button to prompt clickability and describe the action.
The two "secret" weapons to enhance your input fields are the placeholder text & its type.⠀
1. Leverage the placeholder text to guide users instead of just repeating the label. ⠀
2. Limit the wrong input source (eg add country code) by using predefined values for common inputs.⠀
Make it as simple as possible for users to enter their information.⠀
Choosing the right UI element plays a huge part in upgrading UX.⠀
For example, use a number picker for integer numeric values instead of a generic text field.
In eCommerce carts, most users will buy 1, or 2 items maximum. The -/+ buttons make their input process quicker.
Visual hierarchy is important in design because it boosts the user experience and leads the user attention
Your No.1 priority is to make your primary action (aka CTA) prominent.
In this case, the button that initiates the booking process is the main CTA.
Then you need to make text readable & distinguish element types. eg. Tags must not look like the primary button.
Play with text attributes (weight, size, line height) to hack visual attention & hierarchy.
Line charts might look trendier but they don't apply to every case.
When the x-axis has limited options, a bar chart is the most appropriate graph type.
Plus, the line chart might introduce false intermediate values.
For the specific example, let's say that you only had data for the total monthly orders (not individual days)
The line chart makes the data look daily, which is incorrect!
The left cards use the same padding around the card. Yet the visual result seems off.
A quick fix is to make the padding larger when the element on the edge is not round - like icons and text.
The rule of thumb is to use **double the padding** on the edge which is not round.
Visually distinguish elements by applying unique shapes, colors, copies, and/or icons.
In that way, you ensure that visual hierarchy works perfectly and you avoid accessibility issues.
To boost the strength of the visual effect use multiple attributes (color + icon) and not a single one (only color).
The latter helps you avoid accessibility issues as well. Color blind people won't notice the color changes.
Icons can often confuse users or get misinterpreted by different people due to their experience level or even due to their culture.
Fix this accessibility issue is by adding a subtle text label near the icon which will describe its usage.
Keep this information in mind especially for mobile interfaces which don't support hover effects.
Keyboard shortcuts boost productivity and save time for power users.
Yet it's sometimes difficult to remember them.
Take advantage of Fitts's law* and place your shortcut keys next to the action button.
In that way, the user doesn't need to remember the action.
*The time to acquire a target is a function of the distance to and size of the target.
Hack visual hierarchy with these simple hacks:
• Reduce the opacity of secondary info
• Use bold font-weight to emphasize
• Scale your title's size by a fixed ratio (eg x1.25)
• Arrange elements to the left side (for LTR users)
• Group together relevant elements
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 uses dividers for everything
- B uses a divider between sections
- C uses only whitespace
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 differentiating the sections. C makes the UI look cleaner.