Overview

Google Ink is an API that enables drawing capability within an app. Integrating Ink with Science Journal would take the form of two primary new features: first, the ability to take free-form drawing notes, and second, the ability to annotate photos and graphs with drawing overlays.

​

The drawing features are important additions to the Science Journal toolkit since they can be used on any device and further Science Journal's goal of becoming a digital science notebook. Drawing notes are similar to text notes or photo notes in that the user specifies a new piece of data to insert into an experiment's observation list.

​

Our future directions would include integrating machine learning capabilities to recognize drawings and aid in the creation of hand-drawn graphs and charts.

​

Goals

Creation

Enable users to create free-form drawing notes using a new note type in the toolbar

Annotation

Enable users to annotate their photos and graphs with drawing overlays

Share & Exploration

Allow users to export their sketches to be viewed outside of Science Journal

Elements Explorations

The drawing note interface is similar to Ink integrations in other products, such as Google Keep. The bulk of the interface consists of a canvas for drawing, and the canvas is accompanied by a collection of buttons for adjusting various parameters.

These buttons include options for adjusting properties, such as pen size, type, and color, as well as additional tools for selecting and erasing elements and determining the background type (blank, dot grid, line grid, etc.). 

​

​

The interface also includes an 'undo' and a 'redo' button next to each other, which are greyed out by default and only become selectable once relevant actions have been taken on the canvas.

​

​

Finally, the interface contains a primary action button in the bottom bar for posting the drawing to the experiment's observation feed.

Keep In Mind

Our drawing notes are completed using either a finger or a stylus on the device. The primary scenario would be the user creating a drawing piece with a single finger over a limited size mobile screen. The design need to consider the usability and reachability issues carefully. Plus, since we were not proposing a professional, fancy feature for creating masterpiece illustrations. The design should keep the simplicity and efficiency in mind.

Design Explorations & Testing

Toolbar Format

Toolbar Freeform vs. Contextual Icon

Freeform Toolbar

This option is using more of a “palette” feeling with the tools at the bottom as tappable graphics rather than like “buttons” and “icons”

Note that the color and the stroke size are pulled out and to the left side of the palette

Pros

Similar to many drawing apps currently in the market, graphics help the user understand what type of stroke the tool makes.

Also it takes up less vertical space overall

Cons

Other options are hidden away, users may not understand why first tool is graphical and 2nd are icons (felt this was more clear for second set of actions -- ie photo insert, shapes, etc)

Contextual Options Emerge

Based on the feedback from the first review, we have included an option that is more similar to the action area, using button-like actions. 

Note that there would be an addition of a secondary toolbar -- users should still be able to select between drawing options but also have quick access to the eraser and insert options

Pros

Similar feel to the other tools since the action area is visually similar. Users may just default to using the pen tool and not need pen/pencil/marker/etc to be primary actions.

Cons

Secondary toolbar takes up a lot of vertical space, users tend to have a harder time understanding what the icons mean (vs the graphics). 

Variation Picker Logic

Global vs. Individual

Global Variation Picker

This option has a secondary bar that appears for things like color picker and stroke width selection

​

Pros

The color and stroke width selection are applied to all drawing tools once they've been adjusted, this would be efficient when doing some speed annotations.

Cons

The concern here is that this takes up a lot of screen space, on landscape the toolbar is also quite small to make room for the app bar.

Individual Picker

This option keeps the toolbar at the bottom, the stroke width and color picker will animate the options in, and when the user begins to draw, the previous toolbar will appear

Pros

This allows for users to have different colors on different items (ie highlighter could be yellow, while pen is black).

Also the stroke width picker shows multiple example options rather than a slider (could be implemented with either option).

Cons

This option would require more taps to access the primary actions. Also requires more animation.

Synthesis

Syncs & Discussions & Critiques

We've been explored rounds of designs to identify what would this feature look like on Science Journal and how could we make it work better. Each design tweak happens, we synced up the the Eng team, Ink team and Material team, to gather more feedbacks and observe more possibilities.

We synthesized through our design review findings and pushed the design into phase 3 with mid-fidelity prototypes. The review and critique session helped us iterate our designs and create high-fidelity prototypes.

Ink tech research & UX feed back trackers. *Intended blur on confidential materials.

Wires

Phase 1 Flow: Basic Drawing Actions

Phase 2 Flow: Further Drawing Options

Phase 3 Flow: Annotating Images

Polishment

*Intended simplify on screens with confidential materials.