[SPEC] Improve usability issues on touch/mobile devices

Glide Data Grid Touch Specification

Goal: Every major interaction in Glide Data Grid should be touch friendly. This may be provided simply by expanding the data grid to work with touch the same it works with a mouse, or by adding alternative interaction mechanisms.

Scroll

Scrolling should work via the standard browser swipe scrolling mechanism. There are some differences with how this should work with mouse.

Special considerations

• Touch move events should not be translated into mouse motion events as these are already overloaded for scrolling.
  • This even applies when no scrolling is possible as it sets up an incorrect expectation.
• Cell selection must happen on TouchUp and not TouchDown. If it happens on the down event cells will be selected as you scroll. Further TouchUp must not select a cell if scrolling has occurred, even if the TouchDown and TouchUp happen on the same cell (as they should).

Resizing columns

Resizing columns can be implemented as a direct interaction, however this would interfere somewhat with standard scroll behavior. Instead when a column header is selected via a touch event, a drag thumb should appear over the right hand gutter. This drag handle can then be moved to resize the column.

Unselect current selection

This is only not possible when rowMarkers are not enabled. When rowMarkers are enabled click the top left header cell twice will clear the selection. While this is only a partial solution, it is a majority solution and the cell is visible 100% of the time. We should document this solution better.

Future considerations: Haptic touch interaction for de-selection, this would need to use the browser api’s for sending the haptic feedback. Further we would need to consider if there are other times when this style of de-select should be used.

Multi-column/cell selection

As selection no longer happens on touch down but instead on touch up we can be a little clever here.

Multi-select flow:

• User taps on header A
• User scrolls right and then triggers TouchDown on header G
• If ~500ms elapse and no TouchUp, cancel, or scroll event is received. All columns between A and G become selected.
• If < 500ms elapse header G is set as the sole selected header.

The same flow is used for groups and cell range selection.

Unable to trigger search

Document the need to add a search button.

Rearrange columns/rows

Drag interactions on mobile are unlikely to be pleasant. Initially I thought long press then drag might work, but this is unlikely to be intuitive. More thought is required.

Unable to trigger menus

What a header is activated via a touch event, it should always act as if the header is hovered. This makes the menu click area visible to the user. The click region should also be enlarged.

Unable to trigger Cell/Header/Group context menus

Long press is the obvious solution here, with the caveat that it shouldn’t do this if it activates the multi select.

Original Report

I did some testing today on the usability of the glide data grid on touch/mobile devices (with Chrome). Overall it works pretty well, but there are some issues I have found:

1. Touch events during scrolling change the cell selection.
2. Resizing columns does not work.
3. No way to unselect a cell on mobile (since ESC hotkey is not possible). Possible touch interaction: Long-press on selected cell unselects it.
4. Multi-column selection is not possible.
5. Unable to trigger the search (since CTRL + F hotkey is not possible)
6. Reranging columns does not work.
7. Reordering Rows does not work;

I think 1 has the most impact on improving the usability on touch devices in case cell selection triggers something within an application. 2-7 are probably more nice to have features regarding touch usability.

[jassmith]

I’ve updated the issue description with a spec

[jassmith]

I’ve fixed all of these except for resizing/dragging. I am going to close this for now. We can revisit those later.