I have an application, where you draw cards and put them e.g. side by side on a free area on a screen.
I have interactions with the drawn cards, and they work well on a computer:
- just move them around (dragging)
- let them disappear (double click)
- turn them to the left (click + shift key) - one click turns the card by 22.5 degrees left
- turn them to the right (click - alt key) - one click turns the card by 22.5 degrees right
The problem comes with mobile devices. I use an iPad for experiments, and I can do
- the dragging
- I can tap and I can tap and hold
I cannot
- double click (the browser reacts by magnifying the page)
- any click plus a key (there are no keys)
- anything with two fingers (because the browser does with it, what browsers do
e.g. change to the next tab, close a tab or similar things)
So right now for the disappearance of the cards I drag them to the lower edge of the screen, and when they are lower than a certain threshold, then they disappear.
But how can I initiate the rotation?
The “natural way” (of using two fingers to rotate) the browser does not allow.
The only idea that comes to my mind is a context menu: Tapping and holding a card brings up a small menu offering “left turn”, “right turn”, “delete”. You slide with the finger across and choose one of the three options.
If you have another idea, please tell me. I am grateful for any hints.