Microsoft

Inking
Productivity
Interaction

Introduction

By designing seamlessly for touch, type, and pen, whiteboard provides a freeform canvas for teams to collaborate visually.

Challenge I - objects

How might we allow users to interact with the canvas and the objects on the canvas?

Style idea: Bright gradient synthetic mesh on the upper section

Final Presentation

PowerPoint

Cold email template

Word

Personal budget

Excel

A New Language for Photography

Critiquing and discussing photography, particularly for novices, can be difficult.

Medium

Neighbourhoods for Your Next Trip to Tokyo

Ben Richards

Crystal Morales

cmorales@contoso.com

+1 206-660-6221

Challenge II - devices

Can we use one model to support different hardware devices?

Cross-platform Whiteboard needs one flexible model supporting touch, stylus, mouse, and keyboard — enabling intuitive collaboration across all devices.

Business goal

Prioritize an ink-first experience for seamless content creation.

Ink
Inking is the most important feature in Whiteboard
Scroll canvas
Scroll canvas to make more room for new content.
Zoom canvas
Quickly switch between big picture and small details.
Move object
Move objects to organize content or make more room.
Resize objects
Resize objects to organize content or ink on it.
Activate objects
Activate objects to invoke more features.

I curated a prioritized list of essential use cases to facilitate seamless collaboration on the Whiteboard platform. I systematically cataloged various user engagement methods, exploring diverse hardware options for interaction.

Touch and stylus

Align touch and stylus interactions model with the use cases.

users

devices

prototypes

This model enables direct interaction with elements via touch to seamlessly scroll or zoom the canvas. Use a single tap to select objects, allowing for easy movement and resizing.

In this model, use touch exclusively on the canvas for scrolling and zooming, and on objects only for moving and resizing.

This mode allows for effortless scrolling and zooming of the canvas through direct interaction. Holding on objects selects them, enabling seamless movement and resizing.

Mouse and keyboard

Mouse and keyboard interaction model for familiarity and consistency.

users

devices

prototypes

This model operates like a map application: drag on empty space to scroll the canvas, use the scroll wheel to zoom, drag objects to move them, and hold the 'Shift' key for lasso selection.

This model mirrors a design application: drag on empty space to lasso select, drag objects to move them, scroll the canvas with the scroll wheel, and zoom by holding the 'Ctrl' or 'Command' key.

Result

Touch/stylus enabled seamless collaboration; the map-like mouse/keyboard model proved successful in usability tests.

Microsoft

Ink

Scroll canvas

Zoom canvas

Move object

Resize objects

Activate objects