Interface responsiveness: motion, tooltips, menus and tap targets

What it is

Common rules for how the DUOSHAO interface moves and responds to the mouse, keyboard and finger: smooth panels and windows, its own tooltips for buttons, spreadsheet menus without delay, and large buttons for touch. The rules apply to the whole web app; nothing needs to be turned on separately.

How to use it

1. The side panel opens and closes in one smooth movement. While it narrows, the names and items in it shrink with it and are cut with an ellipsis. The full name is in the tooltip.
2. Spreadsheet windows (confirmations, number format, import, access, print, keyboard shortcuts and others) fade in and leave just as smoothly: after Escape, a click on the dimmed background, or the close button.
3. On a phone, a spreadsheet window is a bottom sheet. Pull it by the bar at the top: the sheet follows your finger, and the dimming lightens. If you release it after dragging more than a quarter of its height, or flick it sharply down, it closes. Otherwise it returns to its place.
4. Tooltips. Hold the cursor over an icon button: after half a second a label appears. Move the cursor away, and it disappears at once. When you move between buttons with the Tab key, the tooltip appears at once and is not dismissed by a mouse resting next to it; it changes only when you point at another button. On a phone and tablet, a long press shows the tooltip, and the button does not act that time. Escape, scrolling or any press removes the tooltip.
5. The spreadsheet menu (right-click) and the menus on the spreadsheet panel open and close instantly. A submenu opens at once when you point at it. Only one submenu is open at a time: pointing at a neighbouring item closes it. Choosing an item closes the menu at once.
6. On a phone and tablet, the spreadsheet menu opens with a long press (half a second) on a cell. It has Column width and Row height, which is easier than dragging narrow borders with a finger.
7. Selection lists in windows and settings open in the app’s style and follow the light or dark theme. Number fields have no arrows: the number is typed on the keyboard. A screen reader on the zoom and font lists in a spreadsheet announces the current value and the name of the list. A checkbox is activated together with its label, and on a phone the tap area around it is large.
8. The profile menu at the top shows you and your space in one block: your name, and below it the space, role and plan. If there are two or more spaces, point at this block or click it: a Spaces list opens at the side. Choose the one you need, and the page reloads. With one space there is no list.
9. If you want less motion, go to Settings → Appearance → Animations and tick No animations. The system setting for reduced motion works the same way.

Limits

• The tooltip appears after 500 ms; the spreadsheet cell card appears after 700 ms. Both disappear at once.
• The full text of a name (of a spreadsheet, a chat or a menu item) is shown in a tooltip only when the name is cut with an ellipsis.
• The sheet that follows your finger applies only on a phone (screens up to 767 px). On a computer the window stays a window.
• The long press for the spreadsheet menu works only with a finger. With a mouse, the menu opens with the right button.
• Search inside a selection list appears when there are more than 20 options (for example, columns when sorting).

If something goes wrong

What you see on the screen	Why	What to do
The tooltip did not appear	The cursor left before half a second, or the name is already fully visible	Hold the cursor still; on a phone, long-press
After a long press the button did not act	The long press showed the tooltip instead of pressing the button	Tap the button again, briefly
The sheet returned to its place	You pulled less than a quarter of the height, and slowly	Pull further, or flick sharply
Access to this space is closed in the Spaces list	You were removed from the space, or access is closed	Choose another space; if the error persists, contact the owner of the space
Failed to switch	A network or server failure	Try choosing again later
There are no animations at all	No animations is on, or the system reduced-motion setting is on	Clear the checkbox in Appearance → Animations