December 18, 2006

Exploring the new Photoshop interface

The newly refined user interface in the Photoshop CS3 beta represents a bit of a departure from the past several versions of the application. I’ve created a quick, 45-second video overview, and you can see it in much more detail elsewhere (e.g. Deke McClelland’s video, which was viewed some 28,000 times in its first day on YouTube). To provide some more detail on the new UI and insight into the thinking behind it, I asked Ken Moore (Sr. Interaction Designer, Creative Suite) and Mike Talvensaari (Product Manager, Creative Suite User Experience), to provide a guest entry. Their Q&A follows in the extended entry. –J.

Q: Why was the interface changed?
A: In 2004 our user research team began an extensive evaluation of the workspace habits of hundreds of Photoshop users. The main themes that arose from that research were that many Photoshop users were frustrated and overwhelmed when managing all their floating palettes. Floating palettes would often overlap each other as well as overlapping the document and application chrome such as scrollbars, creating a less-than-ideal experience. Another common complaint is that palettes take up too much space that would otherwise be used for editing and viewing the document(s). Based on feedback from multiple surveys and prototype explorations [update: here's a sample of what was gathered], we have developed a new model for docking palettes which solves these issues while still allowing users to float their palettes as they always have, if that’s what they prefer (though we think the vast majority will happily adopt the new docking model).
Q: What are the main features of the new interface?
A: Here are a few:

  1. Docking Workspaces.  Palettes can now be docked along the edge of the workspace for convenient palette management and very efficient use of screen real estate. One benefit is that if you switch monitor resolution or resize your application frame (Windows) the palettes remain docked to the edge — no need to drag them to new locations.  Additionally, palettes in docks will never overlap each other.
  2. Collapsing Palette Docks to Icons.  When you click the gray header bar at the top of a palette dock, the palettes switch to icon representation. Clicking an icon pops up the associated palette. This will help save valuable screen real estate. You can create multiple columns of palette docks and expand or collapse each dock independently.
  3. Enhanced Tab Key Functionality.  As in former versions of Photoshop, pressing Tab will hide all of your palettes.  Now in PS CS3 once your palettes are hidden this way you can move the mouse to either edge of the workspace to temporarily reveal the palettes docked at that side of the workspace.  This allows for convenient access to your palettes even as you work with a document in Full Screen mode.
  4. Single Column Toolbar.  By default the toolbar will display as a single column of tools which will also save space. If you prefer the 2-column layout you will be able to toggle the layout with a single click in the gray header bar at the top of the toolbar dock.
  5. Maximized Document Mode.  In this new mode the document automatically fills the space between the side docks.  This ensures that palettes will never overlap the document or its scrollbars, which can be a problem in the world of floating palettes.

Q: Is there a way to make the flyout palettes of an iconic dock close automatically when I click away (like the Palette Well in CS2)?
A: Yes, you can toggle the "Auto-Collapse Icon Panels" preference to change this behavior.  This checkbox is found in the Preferences dialog, also in the context menu you get when context-clicking on a palette’s tab or header.
Q: Is there a way to show the Palette Well that exists at the right side of the Options Bar in CS2?
A: No, the PS Palette Well has been removed in CS3. While this will affect users who are fond of the palette well, most of its key benefits are present in iconic docks: the palettes are hidden until accessed by a single click and take up very little screen real estate. Also, by toggling the "Auto-Collapse Icon Palettes" preference the iconic palettes will behave much like the Palette Well of CS2. For users who are unhappy with the iconic panes because they intrude into the document area, these users can simulate a palette well by simply floating a minimized group of palettes above the Options Bar as shown in this screenshot.
This simulation has a couple drawbacks in that the shown palettes must be manually re-minimized by the user to get them out of the way, and the width of the floating group may vary as the user switches from tab to tab, but aside from those objections, this workaround may be desirable for those who are extremely used to CS2′s Palette Well.
Q: When I switch the document mode it changes for all open documents – is there a way to override this?
A: No, the document mode in CS3 is now global to all documents. This model is more common among design applications and is very handy when multiple images are opened and the user prefers to edit in a particular mode – they don’t need to switch screen modes for each image separately.  In some cases, such as Smart Object editing, it is important to be able to see the original image AND the element being edited – for these scenarios you will likely want to use Standard Document Mode and arrange the floating windows in a way that best suits the task.
Q: I notice document windows no longer float above the application frame on Windows.  Is it still possible to drag a document out of the application frame, to a second monitor for example?
Yes, in CS3 the user can still drag documents out of the application frame but it behaves a little differently: While dragging a document window, as long as the mouse remains inside the application frame the document will behave as a child window and be clipped by the edge of the application frame, but as soon as the mouse exits the app frame the document will pop out of the frame and no longer be clipped by the application frame. This behavior, while slightly different, shouldn’t hamper any existing workflows.  The design change was required to ensure that palettes docked to the application frame would not be overlapped by floating document windows.
Q: Is there a keyboard shortcut for toggling docks into iconic state?
A: There are no dock-related keyboard shortcuts being added for the CS3 release.  However, keyboard shortcuts used for accessing individual palettes will still open and close the palette even if the palette is in icon mode.

Posted by John Nack at 11:05 PM on December 18, 2006
Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)