Ideas for image annotation in Web Forms

We’ve been working on user flows for annotation! Technically, drawing, signatures, and annotation share a lot of commonalities, so we’re exploring library options that set us up for long-term success. While the backend might be similar, we know the UX for these features varies, so we’re starting with the most complex one - annotation.

We’ve gathered incredible feedback over the years, and we’re using those insights to build this into Web Forms first. Our plan is to eventually bring these learnings to Collect.

:green_circle: What’s In Scope

  • Seamless drawing: High performance across all devices
  • Precision control: Adjustable line weights and stroke colours for better legibility
  • Mobile optimization: A full-screen mobile view to eliminate frustrating panning issues (similar to the Maps experience)
  • Detailed work: Integrated zoom for precise markups
  • Full resolution: No resolution loss even if annotating on a small screen

:orange_circle: Out of scope for now (explorations below)

  • Adding shapes: shapes, lines, arrows, circles, and text are important and something we want to do next
  • Improved navigation: Adding a topbar to indicate you’re done (similar to something we want to add for maps). Right now you have to collapse the expanded full screen view.

We want to hear from you
If annotation is part of your workflow, does this initial set of features cover your must-haves? Let us know how this fits (or doesn't fit) your specific use case.

P.S. I know this is a big one for you @ahblake :wrapped_gift: :hugs:!

This is great!

As is the appearance of a crop icon in the mockup, useful if the image can't be properly framed when captured, or the previously captured image isn't well framed.

Our annotation use is split across captured / previously captured photos and pre-existing reference images (usually drawings). Image resolution has previously been limited by device screen resolution, and detailed annotation has been difficult without ability to zoom.

A simpler way to load & reset defaults as well as an appearance to prevent replacing the default would assist in form design & use.

Looking forward to this!