UI Design Tips by Jim Raptis
Learn how to design better user interfaces and make your users happier with these simple UI tips. All the tips are tested in real-life products!!!
Design Better Menus
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.
uivisual effectmenu
Align Uneven Elements
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.
uialignment
De-emphasize Dangerous Actions
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).
uiuxvisual effectdangerous actions
The Perfect Header
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
hierarchyuiuxvisual effectheaderHow to Align Uneven Items
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.
alignmentuivisual effect
Fallback for Transparent Avatars 1
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.
avatarvisual effectui
Fallback for Transparent Avatars 2
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.
avatarvisual effectui
Consistent Border-Radius
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!
carduivisual effect
How to Apply the Brand Color
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.
coloruivisual effecthierarchy
Distinguish Selected Items
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.
uxuivisual effecthierarchy
Use Better Link Button
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.
buttonctauxui
Use Consistent Buttons
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.
buttonctauxuiconversions
Highlight The Best Offer
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)!
hierarchyuxuiconversionspricing
Avoid Fullwidth Paragraphs
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`
textreadabilityuxui
Make Cards Look Clickable
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.
ctabuttoncarduiux
Make Inputs Self-Explanatory
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.ā
formsinputuiux
Pick The Correct Element
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.
conversionsformsinputctauxui
How To Enhance Hierarchy
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.
visual effecthowctauxui
Choose Chart Types Carefully
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!
chartuxui
Padding On Rounded Cards
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.
visual effectuicard
Visually Distinguish Elements
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.
visual effectuiuxbutton
Support Icons With Labels
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.
iconaccessibilityuxuimobile
Display Useful Shortcuts
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.
ux-lawsctauxon-boardingui
Hack Visual Hierarchy
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
howvisual effecthierarchyuxui
Visually Separate 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.
visual effecthierarchyuiuxwhitespace