In a previous blog post, I laid the groundwork for a browser extension that supports distraction-free browsing. It tackles an important problem faced by knowledge workers: How to avoid getting distracted by websites that are essential to one’s work?
As a continuation of the idea, I have now built a Figma prototype for the Chrome Extension. The below video describes how the envisioned Chrome Extension would work.
This simple Chrome Extension is called Pinhole, and it allows users to focus just like a simple pinhole camera focusses light rays. Note that it is only a conceptual prototype, although I admit that the implementation should not be too difficult.
Design decisions and remarks about the prototype
- I have not designed the settings panel as I felt that it would be trivial to implement.
- I tested the prototype informally with a few users, and found that Pinhole could fast become irritating if it keeps popping up every time a new webpage is opened. Pinhole can be configured to avoid this, of course, but it loses its potency. We need a way to keep the user on track without interrupting them — perhaps the tasks and the timer could be displayed in a less conspicuous manner, say, as a transparent overlay?
- One user commented that breaks should also be scheduled into sessions. While I like the idea of boxing a duration around one’s breaks, tasks do not make sense for breaks. Perhaps Pinhole’s timer can also be used for breaks.
- I used WebVector, a Terminal utility, to create images of webpages (Wikipedia and YouTube) that are imported into Figma. I had to do some Photoshop magic as WebVector sometimes messes up the header positions.
- The PNG files from WebVector are of a high-enough-resolution, but Figma Web does not seem to be capable of displaying them. I therefore switched to Figma Desktop (on macOS), and had better results.
What next? I am tempted to build the Extension myself in the next weeks when motivation hits me. But until that, I am interested in learning what you think about Pinhole!
- Figma prototype: https://www.figma.com/file/BtR7SRRpBRVLOJ5j2qWecV/Pinhole-Chrome-Extension?node-id=1%3A2
- Previous blog post about Pinhole: https://medium.com/@iamkrishsubramanian/tackling-distractions-in-a-ux-case-study-66259c5944c9
- Walkthrough of the Figma prototype: https://youtu.be/Z7GfzUkoLEs
- WebVector, a Terminal utility for converting webpages into SVGs/PNGs: https://sourceforge.net/projects/cssbox/files/WebVector/3.5/