Z Intern Image Editor Research

placeholder for UX research for webcompat.com image editor feature (items in reverse chronological order)

Canvas resources (072617)

• https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag
  • detecting mouse click and drag
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
  • https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• http://html5doctor.com/an-introduction-to-the-canvas-2d-api/
• https://ihatetomatoes.net/guide-to-html5-canvas-javascript-libraries/
• http://www.html5canvastutorials.com/
• https://joshondesign.com/p/books/canvasdeepdive/chapter01.html#simple_drawing

Rough PRD (072617)

• will change based on requirements and tech limits questions (TBD) but attempts high level capture of features and user flow https://docs.google.com/document/d/11KZICiXwfU8znYtkDzK3y7MFYyEznWKKQXzknLwrb1k/edit?usp=sharing

Notes about existing image editors (desktop apps)

target applications to review: Preview (mac os), Photoshop, Inkscape, Gimp, Paint (win)

• if most bug reports are coming from Win, maybe Paint should get extra focus

1 Preview and Kami (pdf editor) screens and notes: https://docs.google.com/document/d/1bQwmFTjLTbaclN3NLRI_yNreZ3aG8RVK9-pTfP6WrMo/edit?usp=sharing

2 Inkscape screens and notes: https://docs.google.com/document/d/13Yz2Q_04qR7b2BxY8YtETCbJ5vyAC9GUky6s141qXFc/edit?usp=sharing

3 Photoshop screens and notes: https://docs.google.com/document/d/1hdimEW96zS1mQTnRgj3ov_ZGvoxvKnS-KcnGYigIFH8/edit?usp=sharing

Notes about existing image editors (browser extensions)

thinking: look at extensions for ff, ie, chrome: if all 3 support image editor extensions then maybe the image editor is not really necessary

072417: only looked at FF add-ons for image editors b/c skimmed the first 25 prod bugs for webcompat and in that group the main browser was FF on Win10 (2nd, was FF on Android)

1 https://addons.mozilla.org/en-US/firefox/addon/screenshot-capture-annotate/

• awesome screenshot addon
• free; you can take a screencapture
• you can draw a colored rect (yellow no fill)
• they have highlight and blur but no fill

• take screenshot

• annotate (highlight, blur, arrow, text)

• missing fill capability

• blur is not super blurry

• probably the easiest editing process

2 xpaint image editor painter

• super clunky but does highlight and redact (filled rect)
• you have to get screenshot, upload it to their server, make edits, then download to your local folder and upload it to webcompat.com

3 gimp online image editor

• this actually does the highlight and redact
• but it's a fairly complex set of steps (much like photoshop); you draw and then have to choose menu options to either set stroke or fill color
• also it has the long process (file upload/edit/download/upload) as in xpaint where you need to grab screenshot, upload to their server, edit the file/save, download to local machine and upload then to webcompat.com

4 lunapic

• also feels clunky
• need to capture screenshot
  • upload
  • edit
  • save
  • download
  • upload webcompat
• also just regular features of drawing and filling colors feels very clunky

5 https://addons.mozilla.org/en-US/firefox/tag/photo%20editor

• polarr plugin
• giving error in cur ff (but this seems the most popular photo editor for addons)

(low priority) do mobile browsers support image editor extensions