Bringing Touch To InDesign - New Touch Workspace

My role was to design a touch workspace within InDesign that enabled users to experiment and create layouts by using intuitive touch gestures to draw shapes, add text and image placeholders and still work cohesively with the traditional InDesign UI and feature set.
Product Design | Experience Design | Interaction Design | User Interface | Prototyping | Individual Contributor
The inevitable future present of touch screen devices
With the big hardware companies setting there bets on Touch Screens as the Future standard, Its important for Adobe to enable its softwares with the interaction paradigms of this inevitable future hardware standard. I was asked to define and design the touch strategy for Adobe InDesign that can be executed in 4-5 months, right before Adobe MAX for the big reveal.
Design Approach
Re-Invent the Wheel? NOT !
Keeping in mind the aggressive time lines aligned with the business objectives., it was a no-brainer for me to leverage the existing work done by the Adobe Illustrator team with the Touch workspace that was shipped in the past Product release.
To my benefit the groundwork was done in developing a framework for a lightweight workspace that was fine tuned for a specific task, which in their case was Logo creation.

Adobe Comp was released recently and was appreciated by the users a lot. A simple gesture based application for creating quick layouts. The added benefit of sending this high fidelity layout to an adobe desktop product for further editing using the cloud services created an end to end workflow for the users which was , as some would say the real magic of Creative Cloud.

If one would further analyze, users were using the Send to InDesign capability more than any other app. So it was natural that we take inspiration from this nifty little App and provide the same end to end experience of taking a layout idea to a production ready work within InDesign itself.

With this in mind and time as one of the defining factor the only real option was to jump into the process of creating the first draft of the feature set and some initial mocks to get an early validation on the direction.

The Challenge – 20 years of InDesign

One of the most challenging aspect during this process was to know where to stop. Creating a simple workspace on the endless power of this Best in Class, industry standard Page Layouting application, one can easily get carried away. Finding the balance between the Simple and Functional was an interesting problem to solve.

With some initial interviews with our Pre-Release members and InDesign loyalist , we were able to nail down the basic feature set that would be expected from a Simple Layouting application.

Some things I still wasn't sure of was the capability of using Styles. Paragraph, Character, Object styles are an integral part of InDesign users workflow. So should be allow users to use styles.
To Grid or Not to Grid… Guide me Master… Another area that required more in depth study and research.

So based on some brain storming, instinct and little peek into usage data, I was able to create a first draft that we could go and get validated with our customers.

Validation – Simplicity is the Key

We validated the first set of designs with the some of the early adopters of Windows based touch devices. These were part of the same group of users who have helped with the Adobe Illustrators Touch Workspace development efforts.

Read the complete validation report here

Key Takeaways

  • The gesture drawing tool awed those who hadn't seen it before, and for those already using it in Comp, they already love it.
  • Users liked combining the Character and Paragraph Panel. It made sense to everyone.
  • Why have style panels, when there is a CC Library panel, which already holds the saved styles.
  • Where is the Layer Panel??
Design and Development
Kicking it off…
To fit in the aggressive development timelines, I worked with the management to create a functional MVP and defined User Stories which aligned well with the Sprint milestones.
An early draft of user stories with key functionalities based on priority.
Most important part of the product development was the Touch gestures. Core Engg. Team was working on building a library for gestures that could be used by other products too. So for them it was very important that the library supports all the gestures. This from the experience standpoint meant that we needed consistent gestures across applications and incorporatiing that within the reusable library was the way to go forward.
Shape Recognition of all gestures across adobe design applications.
A quick analysis across the design and web products and we are good to go.
Touch gestures on a windows surface device VS iOS devices…. Very different. It was upto me to fine tune the gesture recognization thresholds so that it works smoothly of windows devices and feels the same as that on an iPad. (Consistency across Adobe products is always a priority.)

After this I started creating the high fidelity mocks and specs. Most of the visual guidelines was already set by the AI Touch workspace, but there was a lot of scope for improvement.

The simple application experience felt a little clunky and heavy with the existing drover visual guidelines heavy on bevels and shadows.

So I proposed a flatter and clear interface that felt modern just like the modern interaction workflows we wanted to support. Something to note is that this was well before Spectrum was in its infancy :P But surely it was inspired by early spectrum visual guidelines.

First Time User Experience
For a workflow that is heavily dependent on Multiple Touch gestures, it was very important that the app had a good first time launch experience highlighting the capabilities and a handy help section with all the touch gesture.

Having static gesture illustration was not going to cut it, as the gestures were a bit complex and difficult to recall.

With the development time tied into the priorities of meeting the deadlines with the functional product, I took on the responsibility of developing an interactive First Launch Experience.

Initial Design - Similar to Adobe Illustrator

Proposed Experience

Obvious choice for me was to create the experience in HTML5 and host it in a CEF container in the application. The challenge there was to create the animation for the touch gestures for which I figured out an approach of using SVG based animations that were rendered dynamically. Which meant that the solution was device resolution independent, light weight and reusable.

Below are the some of the animations I coded using Raphael.js

Click on the gesture to play the animation

Shipped It !!

The team was able to deliver the Fully Functional Workspace as per the defined MVP well in time for the MAX demo.

In terms of Usage numbers the expectations were already set. Only 6% of the ID users have touch enabled windows device, which makes the usage window really small. But the 90 days usage number are more compared to AI.

We also got a sweet review by an InDesign Secrets magazine which was pretty rad.

Read the review on InDesign Secrets