DESIGNING BETTER TOOLTIPS FOR MOBILE USER INTERFACES

             DESIGNING BETTER TOOLTIPS FOR MOBILE USER INTERFACES

Ideally, mobile designs would be seamless with no need for technical documentation, online help, or tooltips. In reality, even the best designs can benefit from supplemental information. A tooltip provides this supplemental information when users tap an icon, image, hyperlink, or other elements in a mobile user interface (UI).

How To Design Effective Tooltips:

The key to designing tooltips that fit seamlessly into the overall design is to plan for them early in the design process. Web Designing Company in India suggests that specifically, designing useful tooltips requires:

·         Proper timing

Timing refers to when during the design process to consider tooltips. By referring to the widely use design sprint, developed by Jake Knapp, we can identify the right stages in the design process to make decisions about design elements like tooltips. Knapp’s sprint process consists of mapping out the problem, sketching solutions, choosing one solution, building a prototype, and then testing that prototype. Pay attention to tooltips and related design techniques during the sketching and early prototyping stages.

·         Proper Implementation

The increasing complexity of mobile apps and limited space on mobile devices pose a significant challenge to designing effective tooltips.

Designers can meet this challenge by focusing on:

·         Context
Check, check, and re-check the context for every tooltip. What might appear obvious to you as the designer could easily confuse a first-time user. The principle of attending to context applies to all aspects of UX and UI design. It’s especially important for tooltips because their necessary brevity will leave users confused if the context is not clear. Avoiding troublesome tooltips requires thought and planning.

·         Placement
Tooltips should be prominent and easy to find but should not obstruct important information on the screen.

·         Clarity And Brevity

Edit each tooltip for clarity and brevity. As many editors tell their writers: “Cut, cut, and cut some more.” It’s okay to write longer tooltip text in early iterations as long as you remember to keep editing and condensing for clarity.

Where To Use Tooltips:

Context is also a critical consideration when deciding where to use tooltips. Because tooltips work best when they amplify a well-designed UI, they are particularly effective for:

·         Contextual Help,

Contextual help appears when users are in a specific part of the UI.  In short, contextually specific tooltips appear at the precise moment users need additional information.

·         Brief instructions,

Instructional tooltips should also appear when users need more information. The difference is that certain aspects of a mobile app might require an explanation at each step to ensure that users can complete the task at hand. 

·         New features.

Tooltips are an effective way to draw the user’s attention to new features, “To promote and publicize its new GIFs, Twitter displayed a full-screen message to users before gently directing them on how to incorporate GIFs into their tweets using a traditional tooltip.”

Other Things To Keep In Mind When Designing Tooltips

• Use rich colors to make your tooltip pop and contrast nicely against light backgrounds.
• Watch out for redundancy. If a feature is already explained by the copy, a tooltip may be unnecessary and end up frustrating users.
• Be mindful of where you place your tooltips—covering up important parts of the page can feel more invasive than helpful.
• Don’t build tooltips in isolation. Consider your other messages, and orchestrate a consistent in-app messaging strategy that provides value. Measure performance, and refine your messages as necessary.
• Remember that accessibility matters. If you adhere to inclusive tooltip design principles, assistive technology like screen-reading software will find and read every element. Refer to the Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA) guidelines to ensure that all tooltips are accessible for your users.

Conclusion:

Tooltips amplify a mobile UI by providing supplemental information precisely when users need it. Leverage the power of tooltips by considering them when sketching designs and building early prototypes. Many software applications and products rely on multi-stage tooltips to teach users how to navigate and use the app. Although this can work as an onboarding technique, tooltips are best suited for their original function: to provide users with brief, helpful messages to ensure users get the most value from an app.