Touch strategy
Tooltips
Context
Device independence in Fusion is essential for the Unified Fusion Industry Cloud. It utilizes flexible Weave(Autodesk design system) components to deliver a consistent experience across devices and browsers, resulting in touch-friendly and user-friendly interactions on phones that feel like native apps.
My role
Lead Visual Experience Designer
Tools
Figma
Year
2024 - Present
Vision:
Weave for browser
Universal Availability
The objective is to ensure that Fusion is accessible on all devices, including desktops, mobile tablets, and phones, to cater to a diverse user base.
Responsive Component Design
All Weave components (both universal and extended) must be designed to adjust their layout dynamically based on the device type and screen size, ensuring an optimal user experience across different platforms.
Task at hand
What is the touch strategy for invoking Tooltips on touch devices that don't have a mouse cursor?
Guideline documentation for Weave official website
Design process:
User research & Analysis
Define interaction guidelines
Create wireframes and prototypes
Documentation & support dev implementation
Internal audit & observations
The first step in carving out the strategy was to conduct internal research to understand the current state of Fusion and what exists today
The variety of tooltips was challenging due to their disorganization.
categorizing them was essential to understand their purpose.
Platform considerations played a pivotal role in developing a comprehensive strategy that addresses challenges and user needs across all products
My research explored less intrusive touch experience proposals, and I categorized stakeholder feedback from least to most preferred
Reflecting on Key Questions
What is the gesture to invoke a tooltip ?
As one of the key questions, I first looked into what gestures we currently have and if there is a need to introduce any new gestures. Gestures needed to co exist.
Do we need to have a 100% parity between desktop and mobile devices ?
There was a pressing need to have a adaptive approach to best cater to the different types of tooltips in Fusion desktop.
As the info icon was not the ideal solution for
touch devices, I had to think of an elimination strategy where generic icons can miss having a tooltip.
Is there a need for elimination strategy ?
Touch Interaction
Tooltip Strategy
Behaviour on mobile devices
Long press(Press and hold) to display the tooltip.
Tooltip will remain visible while holding; after lifting your finger, the tooltip will timeout.
The tooltip can be dismissed by tapping outside of it or on any non-interactive element within the tooltip.
Long press to Invoke a tooltip
Dismiss a tooltip
Timing
Press and hold for 500 ms to display the tooltip, which will remain visible while holding; after lifting your finger, the tooltip will timeout between 1500 ms (1.5 seconds) and 10,000 ms (10 seconds) depending on its size, with shorter timeouts for smaller tooltips and longer timeouts for larger tooltips.
Positioning
On mobile devices, position tooltips above UI elements by default to prevent finger obstruction.
You may also change the position of the tooltip to the bottom, left, or right for UI elements near screen edges or corners to prevent the tooltips from getting cut off.
Syntesizing feedback to
achieve the goal
Optimizing Strategy for Enhanced Integration Across Autodesk Products
When a single gesture triggers multiple actions, establishing clear management protocols is essential
Can a bottom sheet serve as a universally applicable solution?
Investigating the Limitations of Using an Info Icon as a Comprehensive Tooltip Solution for Touch-Friendly Devices.
Impact
The team was thrilled to have successfully resolved the challenges and delivered the solution to Team Weave as I was informed that this was one of the most complex components to be worked on. The implementation is now in production and will soon be featured on Weave's official site.
