19 / Desktop UI
Adobe Acrobat X.
Eight U.S. design patents
The problem
Acrobat had grown by adding. Each release brought new menus, toolbars and dialogs, and the people who opened a PDF to fill in a form, leave a comment or combine two files had to search through all of it. Most of them wanted one thing done and had no reason to learn the rest of the application.
The team had to decide where tools, panes and menus lived, and the answer had to hold for a long list of features that did not yet exist. Product management wanted room to add them. Engineering needed a structure it could build once and reuse. Repainting the old layout would have solved neither.
A good result would let a first-time user find the next step on their own, and still give a power user the tools they already knew.
The approach
I started by watching how people used Acrobat, then sketched a framework, then proved the interactions in prototypes before anyone wrote production code.
- 01
Researching how people use Acrobat
I began with user research into what people actually did in Acrobat and where they got stuck. The pattern was a short list of everyday tasks buried among a very long list of rare ones. That gave the team a rule for the new interface: common tasks within reach, rare ones one level down.
The research pattern boiled down to one layout rule. A few everyday jobs stay close to the user, and the long tail of rare ones moves down a level. - 02
Sketching the framework
I sketched on paper first. A toolbar and task area across the top, a document space in the middle, and a tools pane at the side. A second drawing showed a reading mode where everything but the page stepped back. A grid compared Acrobat with Reader on the desktop, in browsers and embedded, so one structure could cover all of them.
Early conceptual sketches for the new UI framework. - 03
Grouping tools in the side pane
The tools pane became the home for everything that did not need to be on screen all the time. I grouped tools into named sections and kept only one open at a time, with the rest collapsed to a single line. Content Editing, Pages, Forms and Action Wizard could each grow without making the pane any longer.
Tools pane. - 04
Redesigning the Create menu
Creating a PDF could start from a file, a screen capture, a scanner, a web page or the clipboard. Instead of separate commands scattered across menus, I put them in one Create menu on the main toolbar with keyboard shortcuts shown where they exist. Combining files, making a form and building a portfolio sit below a divider.
Create menu. - 05
Stepping back in reading view
For people who only wanted to read, I designed a view with the toolbars gone. A small floating control bar at the bottom holds save, print, page navigation and zoom. The idea was that the interface should match what the person is doing, and a reader should see the document first.
Reading view with a floating control bar. - 06
Prototypes and screencasts
I built the new interactions as prototypes so product management could try them and engineering could see how they behaved. Where a prototype was too slow to explain a flow, I recorded a screencast. Documentation went alongside, so the intent behind each pane and menu was written down.
Action Wizard in the Tools pane.
The solution
The new Acrobat opened on the document. A main toolbar held the common actions and a Create menu. At the right, three tabs named Tools, Fill & Sign and Comment switched the side pane between jobs. Under Comment sat annotations, drawing markups, review options and a comments list, so a reviewer could mark a page and see every note in one column.
The framework did the work. Tools, panes and menus each had a defined place and a defined behavior, so a new feature had somewhere to go before it was designed. The same structure covered Acrobat and Reader, and it adapted to context. When a person was reading, the interface got out of the way.
What I delivered
- User research into how people work in Acrobat
- Concept sketches for the UI framework
- Interactive prototypes and screencasts
- Tools pane, Create menu and review and annotation designs
- Documentation for product management and engineering
- Eight U.S. design patents, with co-inventors
See it working
Value added
For people using it
People could find the next step from the screen in front of them. Everyday actions sat on the toolbar, specialist tools sat in named sections, and reading a document no longer meant looking at controls that had nothing to do with reading.
For the business
A defined framework gave Acrobat a structure that could take new features without another rebuild. The interface itself became protectable work, recorded in design patents that name Adobe Systems as the assignee.
For the team
Prototypes, screencasts and documentation gave product management and engineering the same picture. Questions about how a pane should behave could be answered by opening the prototype instead of arguing about a static screen.
The result
The work led to design patents. I am named on eight U.S. design patents, including US D682,853 S and US D688,689 S, with Daniel Walsh and Liang-Cheng Lin as co-inventors.
Results
- 8U.S. design patents, with Daniel Walsh and Liang-Cheng Lin as co-inventors
Patents US D682,853 S, US D688,689 S, US D678,898 S, US D731,516 S, US D731,517 S, US D731,518 S, US D731,519 S, US D732,061 S. All eight patents on Justia ↗
What I took from it
A framework only works if the people building it can see the rules, so I would write the documentation alongside the first prototype instead of at the end. The sketch that compared Acrobat with Reader surfaces was also the most useful single page of the project, and I would start there next time.
Background
Adobe announced the Acrobat X family in October 2010. Macworld reported that Acrobat X Pro launched on November 15, 2010. It had a customizable Quick Tools toolbar and an Action Wizard for automating tasks with several steps. Design patent D682,853 was filed on November 1, 2010. It names Daniel Walsh, Liang-Cheng Lin and Philip Brian Dils as inventors and Adobe Systems as the assignee.