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
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.
- 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??
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.
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
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
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.