New App Prototype: Prompts
See the Pen Prompts Prototype by Dave Rupert (@davatron5000) on CodePen.
This week I built a prototype for a brand new drawing app idea. I’m calling it “Prompts”, it already leaked on CodePen (sorry!) but I wanted to give you, Dear Reader, a behind the scenes look at the progress so far.
For a couple years now, I’ve wanted an Inktober-inspired app that would present a random drawing prompt and would work on any touchscreen device with finger or stylus input. I’d love to make drawing (even digital, which goes against the spirit of Inktober) a daily practice in my life. After reading about this years’ Inktober before it actually started (I usually think of this on October 10th), I was inspired to finally go for it. On Thursday evening, I began development by breaking the app into its core features:
- A drawing surface
- A prompt mechanism
- A little bit of UI
Simple enough. Let’s do each piece.
A drawing surface
I’ve done enough canvas work to know I didn’t want to do this from scratch so I searched though npm and came a cross Signature Pad from Szymon Nowak. As evident by the project name, this is a little utility for capturing signatures on official documents. What’s novel about this particular solution is that it samples points (like an SVG) at a regular interval and then creates Bézier curves between them. The result is an ink-like feel where faster strokes have thinner, stretchier lines. It’s not the most sophisticated drawing app, but it fits nicely with the ethos.
It was kind of a pain in the ass to get <canvas> to be responsive because it behaves more like PNG once painted. Thankfully, because Signature Pad keeps an array of x,y points on hand, when resizing so I can wipe out the entire canvas and restore the data on resize. 🙌
Testing on real touchscreen devices I experienced some performance issues where the pixels were trailing behind your finger and stylus a bit. I did a mini-dive on low-latency canvas performance I was pleased to find out about a new feature in Chrome 75 for low-latency canvas rendering using desynchronized. Latency in drawing applications is specifically mentioned in the first paragraph:
Stylus-based drawing applications built for the web have long suffered from latency issues because a web page has to synchronize graphics updates with the DOM. In any drawing application, latencies longer than 50 milliseconds can interfere with a user’s hand-eye coordination, making applications difficult to use.
Fifty milliseconds is a tough threshold to hit. Watching Brad Colbow’s drawing app reviews on YouTube I’m keenly aware of the importance of this latency issue. Most of his device and app reviews make or break it based on that. Here’s an older 2012 video from Microsoft about the impact of 100ms, 50ms, 10ms, and even 1ms of touch input latency.
I started diving into the source of Signature Pad to see if I could maybe make a contribution to add this new progressively enhanced feature. However, the core of Signature Pad is written in Typescript so that sort of shut down that exploration. Not because I don’t necessarily want to work with Typescript, but mostly because it would pull me out of CodePen and force me to build out some intensive local environment with a Typescript build pipeline and then some deployment strategy to test on actual devices just to validate my idea.
Stalling progress here is actually the opposite of what I want to do when prototyping. Knowing that I can potentially fix it later is good enough for right now. It’s important not to get bogged down here, because I want to get to First Playable.
A prompt mechanism
The prompt mechanism was pretty simple, just an array of words. I “borrowed” the actual 2019 Inktober rules but that’s only temporary as I test things out.
Simple enough. On larger landscape devices (tablet/desktop), I actually used CSS Grid and the golden ratio to do the layout. That’s lolzy but actually fit better than all the fixed values I tried.
In the future I could probably make some service that gets a Word of the Day or a random word… I’ll sit and think on that for a bit, I don’t need to know now.
A little bit of UI
The UI is pretty simple enough. I decided I wanted a couple of core actions as features:
- Undo
- Erase
- Left-handed mode
The first two are self-explanatory on a drawing app, but the third one was something I felt was an important bit of accessibility to have the UI be “flippable”. This is currently just flipping direction: rtl in the CSS. That’s maybe not the best choice, but again, getting to First Playable is what I’m after here.
Next steps
It’s important I don’t get ahead of myself, but I think there’s a few next immediate steps:
- Move this to my own domain and make it a proper PWA
- Create icons and whatnot for homescreen launching
After those somewhat simple fixes I have a few ideas but I’d like those features to be informed by actual user testing:
- Add a sharing function so I can go viral on social media?
- Save a drawing history and add authentication in something like Firebase?
- Do I need an instructional modal on first launch?
- Do I need to improve the latency still?
- Should I put this on an app store with ads?
The latency issue may be a lot less critical than I originally thought it was. I realized once I fixed up some of my CSS issues the drawing performance got a lot better. What I thought was latency was really a weird max-width issue. Which goes to show, I was right to not “over-solve” the latency issue when I first encountered it. It may not be an issue at all.
What I really need to do next is get some real world feedback. If you’re able to head over to the super-secret debug URL, try it out on your devices, and let me know how it works for you! Is it neat? Would you pay money for it? Would your cousin play money for it? I’d love to hear your thoughts. Thanks.