Example of a kinesthetic "quasimode" on mobile web app?

Question

I would like to specify a function to zoom into an image displayed on a handset UI for industrial use. This is in an environment where users are often in situations where fine motor control is difficult. The nature of the application also means we must avoid mode errors as much as possible and single-handed operation is desired.

The interaction I would like is a kinesthetic "quasimode" (as per Jef Raskin 'The humane interface' 7, p. 55):

• The operator would tap and hold on the thumbnail of the image, which would then immediately increase to, say, double size until the hold is released, reverting back to thumbnail size again.

• The user does not need to pan, move or otherwise manipulate the image beyond making it larger. The fact that the finger would obscure part of the image during the qasimode is I don't think much of a problem.

Does anyone have any examples of a similar tap/hold quasimode (preferably with hints at how to implement it) in a mobile web context? The handset uses Android Chrome.

Answer 1

You could solve this with mousedown/mouseup events, and their touch equivalents, touchstart/touchend.

image.addEventListener('touchstart', () => {
  image.classList.add('zoomed')
  document.addEventListener('touchend', () => image.classList.remove('zoomed'), { once: true })
})

Here, we're adding an event listener to the image for touchstart events. When the event is fired, the class zoomed is added to the image, which gives it a style with transform: scale(2).

We then add another listener to the document itself, to listen for the touchend event - and remove the zoomed class. Importantly, this is added with the once: true option, so when it receives the touchend event, it removes itself from document.

The reason we add the second listener to the document (rather than the image), is that if the cursor is dragged outside of the image while touched/down, the touchend event won't be fired on the image.

Adding draggable="false" to the img element will prevent the image being dragged around with the cursor.

Example parts:

<img class="zoomable-image" src="http://my-image-url" width="128" draggable="false">

.zoomable-image {
  transform: scale(1);
}

.zoomable-image.zoomed {
  transform: scale(2)
}

document.querySelectorAll('.zoomable-image').forEach(image => {
  image.addEventListener('mousedown', () => {
    image.classList.add('zoomed')
    document.addEventListener('mouseup', () => image.classList.remove('zoomed'), { once: true })
  })

  image.addEventListener('touchstart', () => {
    image.classList.add('zoomed')
    document.addEventListener('touchend', () => image.classList.remove('zoomed'), { once: true })
  })
})