Is it a good idea to use tooltips on mobile in enterprise app design?

Deep dive

Tooltips on mobile are not just smaller versions of desktop ones—they require a unique approach. Let’s explore what makes mobile tooltips effective and how to design them for real user needs.

Do tooltips work on mobile?

Yes, mobile tooltips can work effectively when thoughtfully implemented. They offer quick, on-the-go guidance without interrupting tasks, helping enterprise app users feel more confident, especially when learning new features. A strategically integrated mobile tooltip can indeed improve accessibility by providing helpful info without overwhelming the user, streamlining the experience without extra screens or tutorials.

What is the difference between tooltips on mobile and desktop?

Triggering mechanism

• Mobile tooltips are activated through direct touch interactions like taps or long presses, as mobile devices lack a cursor.

• Desktop tooltips appear when hovering the cursor over an element, providing instantaneous feedback without additional clicks.

Screen size and touch targets

• Mobile tooltips are designed for touch screens, requiring larger touch areas, which can influence their placement.

• Desktop tooltips benefit from precise cursor control and larger screens, allowing for smaller touch targets.

Positioning and layout

• Mobile tooltips should be placed where they do not obscure key interface elements, mostly above or below the target element depending on screen space and orientation.

• Desktop tooltips have more flexibility in placement, as the larger screen space allows them to appear without obstructing main content areas.

How to ensure a tooltip improves mobile UX rather than complicates it?

Map tooltips to touch interactions

Design tooltips for mobile to appear with touch interactions like long presses or double taps, ensuring they activate only when the user intends. This prevents them from appearing unexpectedly, which could disrupt the user’s flow and lead to frustration. 

This is how Google Calendar tooltips are triggered by long press:

Adapt mobile tooltip design to different screens

Adapt tooltips to different screen sizes and orientations, keeping them visible and functional without blocking key elements.

Show help with subtle cues

Use small icons, light animations or other hints to signal tooltips are available, keeping the design clean and uncluttered.

Mailchimp uses underlining to signal there is more information:

Make touch interactions precise

Ensure touch targets are large and spaced out enough to avoid accidental taps on other elements.

Consider accidental taps on elements in Microsoft Word mobile due to insufficiently spaced touch targets:

Introduce tooltips in time

Timing mobile tooltips is crucial given the limited screen space and potential distractions. Introduce them at the right moment, such as during onboarding or when explaining new features, to enhance understanding without causing disruption. Always ensure they can be easily dismissed to maintain user control.

Ensure your tooltips on mobile are accessible

Design tooltips to be fully accessible with screen readers and other assistive technologies. Include clear text alternatives and enable logical navigation to ensure all users, regardless of ability, can interact with and benefit from a tooltip on mobile.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• Is the information critical enough to justify a tooltip, or can it be integrated directly into the UI?

• Will the tooltip provide value without disrupting the mobile experience?

• Is the tooltip content optimized for small screens to prevent unnecessary clutter?

• Can users easily access and dismiss the tooltip on a mobile device?

• Is the tooltip’s information accessible and understandable to users with assistive technologies?

💡 Methodologies 

These methodologies will make your job easier and more effective. 

• Heuristic Evaluation: Use usability principles to evaluate mobile UI and identify areas where users might require extra help, such as through tooltips.

• User Story Mapping: This technique involves outlining the user's journey through your product to identify where additional guidance is necessary. By mapping out user interactions, you can pinpoint moments where tooltips could improve understanding and streamline the experience. 

🛠️ Useful tools 

These tools will make your job easier and more effective.

• UserTesting: Get feedback on tooltip use and explore better alternatives for various software applications.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• 5 unique ways to use tooltips for mobile apps by Appcues

• Designing Better Tooltips For Mobile User Interfaces by Eric Olive

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

• 5 unique ways to use tooltips for mobile apps (video) by Appcues

• 6 Steps for Consistently Good Tooltips on Mobile Apps by Hilal Çökeli