RECOMMENDED

All Tips

Make Tooltips Responsive
Make Tooltips Responsive

Make Tooltips Responsive

mobile
ux
tooltip
accessibility

The classic tooltip is activated once the user hovers over the element...

On desktop, this works perfectly!

However mobile devices don't support the hover effect

To deal with this, add a clickable help icon next to your button. When the mobile user taps on the icon, show the complementary tooltip text.

←Previous Tip

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 effect
how
cta
ux
ui

Next Tip →

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!

chart
ux
ui

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract