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.

0 thoughts on “Exploring the new Photoshop interface

  1. Workflow “evaluation”? I’ll bet this was a quick meeting in the hall with the Lightroom interface folks.
    [Ken replies, “Here’s what a ‘quick meeting in the hall with the Lightroom interface folks’ looks like.” –J.]
    Sorry, the UI tweaks strike me as rather late to a market where multiple monitors are becoming common. Now that large displays are cheap and common you suddenly worry about the space taken up by the control palette?
    I don’t care a whit about the space required to keep all my palettes open with my dual monitor workspace, but an application that allowed me to toggle between workspace layouts configured for my portrait and my landscape displays would be very useful.
    Lightroom suffers from single window UI myopathy (much to the annoyance of users with multiple displays) and I hope that backward-looking vision doesn’t infect the Photoshop development team.

  2. This certainly wasn’t a quick meeting in the hall — I know how long Adobe has been working on this interface, and a tremendous amount of research, effort, and engineering work went into this.
    But I’ll share my own personal feelings on the new user interface. I’m very disappointed with it. This is what we’ve been waiting for? For all the time spent on this, I was really hoping that Adobe would be able to redefine what a user interface is. There’s no innovation here. Sure, Adobe did billions of “studies” and millions of “usability tests” — but that doesn’t mean anything. You can’t go to a user and ask what they want when they are already biased because they are using the older interface? So what we really end up getting is a single version upgrade to the current Adobe user interface. Don’t get me wrong — it’s nice, and it works. But this isn’t redefiniing how we use graphics applications today. This “new” user interface is simply a nice clean tablecloth tossed over the old shaky table. It looks nicer, and it’s cleaner — but the table is still unstable.
    I still need to mouse around my screen. I still need to open and close palettes. And the palettes do resize themselves which can be unnerving at times. Finding the right palettes (jeez, each app has what, like 30-40 of ’em?) is still an issue as well.
    These “old” interfaces worked well on smaller monitors. But thanks to Apple, we all have larger widescreen displays now.
    Maybe I expect too much, I don’t know. but I was really hoping that Adobe would be leading the way in this regard. And knowing the way that Adobe works, since this new UI will be worked into all new versions of the upcoming apps, we won’t see a new user interface for 10 years now. Adobe had its chance to change everything here and now — instead, we’re limited using the best creative toolset in the world with an interface that still doesn’t serve its community.
    [What, specifically, would you do, Mordy? And why do you think that CS3 is the end, not the beginning, of our plans in this department? –J.]

  3. I am curious when it will ship- March or really as hinted at earlier today April/May?
    [We can’t get into that. All that’s been said publicly is that we expect the next versions of the Creative Suite to ship in Spring 2007. –J.]

  4. It would be very nice to be able to dock the palettes on top of the screen, too.
    and, if i’m in default viewmode, and on mac os x the dock is hidden, a little space remains (like 5px) at the bottom of the screen, that is not covered by the dark backgroud. as seen on http://www.jnack.com/vids/NewUI.html. everything is covered in the third and fourth viewmode, which is much better.

  5. How come this palette docking feature doesn’t work on my second monitor? I work on a laptop and when I’m at my desk i plug in a 24″ LCD, but I don’t get that feature on my extended desktop… this is kind of frustrating
    [It was just a matter of time vs. resources. We have a ton of things we want to do in the new UI, but we couldn’t fit everything into one cycle (esp. across 5 products). –J.]

  6. Your 2004 research team evaluated the workspace habits of hundreds of Photoshop users. How do you know what the users want if you base it on their current habits? That’s the interesting research – determine what your users want not what they do now…
    [I’m not sure I understand your comment. Are you saying that it would be better to do an application redesign without first gathering data about what people are currently doing? Would we be better off changing everything without paying attention to ingrained patterns of behavior? Somehow I doubt that very strongly. (Also btw, this study began in 2004; that doesn’t mean it ended then.) –J.]

  7. I had hoped the Adobe/MM combo would mean the end of those dreadful “Panel Sets”, but not only had Adobe adopted this gadgetry-over-workspace, you actually refer to palettes as panels in your video as if it’s an improvement. I guess you believed your focus group of the many photoshop pros.
    [Yes, and the response has been overwhelmingly positive. You’re free to disagree, obviously, and use the palettes just as you always have. I believe we’ll even ship with a default workspace that puts them into floating mode with one click. –J.]
    Gadgety UI guys like to focus on palettes rather than the actual work an app does, or I’d fear that MMs dreadful Pen Tool would be copied next.

  8. When I downloaded the Photoshop CS3 Beta I was hoping for a real interface overhaul. I must say I really like the way the palettes/panels work now. I didn’t think I would use them differently than before but I do!
    Anyway, that’s just one thing. Another thing are all these modal dialogs. C’mon – a modal color picker? Sure, there is a palette, but it can’t replace the dialog. The Layer fx dialog – unnecessarily modal. Instead of reducing this, you add more modal dialogs (Refine Edges). And why can’t I work with Layer fx the same way I work with Smart Filters? Put on the same effect several times, change the order in which the effects are applied etc.?
    [I hear you, and we definitely have room to improve beyond CS3. Reducing modality is a big effort & a major priority. –J.]

  9. When i use my own color scheme in Windows XP, Photoshop CS3 beta does not recognise my colors, just initializes itself in the default very light grey menu and palette colors. It seems to be that CS3 user interface independent from Windows color shceme. Even so when i click on a menu, the menu appears in my colors.
    I am using Windows Classic style scheme with dark buttons and menus, like in Adobe Bridge default dark grey settings.
    In previous Photoshop versions, there is no problem with custom colors.
    I think, that some special work ( i.e. color correction) is inadequate to do on bright user interface. Otherwise working on bright interface is fatiguing (especially for eyes).
    I hope, that Adobe will solve this problem until final release.

  10. I like many of the new IU features, like the auto resizing pallets and the auto reveal of pallets when hidden by Tab. I’m less enthusiatic about some of the other changes.
    I frequently work with 2 monitors, and I’m disappointed that AFAIK none of the new features help me here, and in fact appear to make it harder for me.
    When I am working on one monitor I like most of the changes, but I miss the Pallet Well. I find the addition of a second row of collapsed icons intrusive. I did make a workspace using John’s work around, but it still feels like a Kludge. However, this is so simple, that I don’t see why it wouldn’t be relatively simple to give the option of a Pallet Well.
    Finally, I just have to say that all this talk about making changes based on focus groups reminds me of New Coke. Remember that fiasco? When they asked people whether they liked the New Coke they neglected to tell them that they would no longer be able to get their old Coke! The uproar (and loss of sales) was so tremendous that old Coke was returned as “Classic Coke” within months. I don’t think this is anything like a mistake of that magnitude, but it does seem to have at least a bit of “throwing the baby out with the bath water”. By all means make the changes that improve the user experience, but don’t take away features that work perfectly well.
    [I hear you, Ric. The unfortunate (and non-obvious) thing is that when you move from one UI system to another, you can’t just move things over wholesale. That is, something like the palette well would have had to be re-implemented in the new system (at the cost of something else, naturally). We opted not to make building a new version of it a priority for CS3, and I know that’ll be something of a drag for the people who liked the well. We’ll certainly work on building something even better for the future, however. –J.]

  11. Unlike the icons, I actually like the redesign of the UI. There are a few minor issues but for the most part, I am happy with the redesign.
    I’ve addressed those issues with examples here on my site: CS3 Review
    In regard to complaints earlier about the use of dual screen monitors, I’d trade in those screens and get a 23 or 30″ monitor! With Leopard’s ‘spaces’ feature coming, I see no problem (for reference, I have a 17″ macBookPro, plugged into a 23″ LCD with a separate NTSC monitor for editing video).
    I love the ‘quick mtg’ refernce shot above John, that’s awesome πŸ™‚
    I’m not sure if I can take Ken & Mike’s assertion that this was a total new model…it seems like a MM re-design/evolution/marriage with CS2, not a wholly new model.
    for specific notes/comments on the UI, check the link above.
    [Thanks for the feedback, Scot. I’ll pass it along to Mike & Ken. As for the space where the palette well used to be, yes, it would indeed be good if one could dock palettes up there. It’s a big item on the to-do list, but we just couldn’t squeeze it into the schedule this time. –J.]

  12. Scot Hampton,
    Re: your CS3 Review…here’s a few tips:
    1) you can un-snap the options bar from the top and it won’t run all the way across the screen. It also allows the tools and palettes to move up about a half inch on both sides
    2) You can turn on any of the status items in the Info Palette if you need that info in Full Screen Mode
    3) Each of the screen modes supports their own unique background color. ctrl or right click on the (grey of black) area around the image to choose a custom color.
    4) if you want one button per palette, you need to drag each of the palettes into their own palette group. For example, drag the Swatches palette out and hover it in the space between the style button and the layers button (as illustrated in your screen shot) until a blue line appears. Drop the palette there to create a new palette group.
    [Thanks for the details, Jeff. –J.]

  13. I like the new UI approach quite well — and I especially look forward to having the same UI in all my main Adobe apps. But I am disturbed by the fact that, at least in this beta, PS uses its own (and way too-light! arrgh!) color scheme in the UI, instead of picking up the settings I have decree in Win XP’s display settings — like almost every other normal app in the universe. Photoshop and InDesign and Illustrator aren’t “cool designer apps” like Lightroom, where a radical UI look may (perhaps!) be excusable — they’re my bread-and-butter apps, and I want to decide what my grease and crumbs should look like. So I dearly hope this will change for the release version.

  14. I do have to ask, what is with moving the Close/Minimize/Expand to the left side of the palettes on the mac?
    [I believe it was done for the sake of cross-platform consistency. –J.]

  15. Even though you didn’t go full out with a similar interface like Lightroom, why aren’t you allowing users to change the background color in the full screen mode, and also allow the application to start in a full screen mode?
    [You can change the background color by right-clicking/Ctrl-clicking the background. You can actually do this in CS2 and earlier by selecting the paint bucket tool, then shift-clicking the background. Now in CS3 you can click Space-F to cycle through background colors. As for starting in full-screen mode, the modes are now sticky, so if you left a document in one mode, the next document will open in that mode, too. –J.]
    Seems to me that adding those two preferences would be a cheap way to get a more Lightroom feel (and also a more consistent feel, as the white borders around the document (OS X) and then the light grey fullscreen background really clashes with the dark grey dock color.

  16. Thank you for the tips!
    Changing the background worked, but I could not get the fullscreen mode to be “permanent”. I tried opening a document and use Shift-F to get to fullscreen. Then pressing Ctrl-Q to quit and then dragging the document to the CS3 icon again. However, the application still launched in the standard screen mode!
    Also, I can see two bugs with the docked palettes: If you leave the dock visible, the palette on the bottom-right will draw outside of the grey background. If you hide the dock, the grey background will draw all the way to the bottom of the screen (-4 pixels) and not appear rounded until you change the screen mode.
    (Perhaps this is the wrong place to call attention to this, though.)
    Thanks again!

  17. If it didn’t say Photoshop in the title bar I would swear I was looking at Corel PHOTO-PAINT. PHOTO-PAINT has had much of this docker stuff since Version 8 (1998). Hope they didn’t spend to much time “designing” and more validating the experience with Photoshop users.
    [The design evolved substantially in response to hands-on testing by many customers. Generally people seem pretty happy with it. –J.]

  18. >[The design evolved substantially in response to hands-on testing by many customers. Generally people seem pretty happy with it. –J.]>
    Which ones? Not many ADOBE long-time Professional Users (particularly Mac Users) it would seem?!
    This is another very clear example of the Macromedia-ites digging their claws into Adobe’s programs in an attempt to hold onto their jobs.
    You are letting these people wreck your programs and your company and I am feeling more and more strongly that I may decide NOT to buy any part of the CS3 Suite Upgrade.
    That would be the first time, since Photoshop 2.1, that I will not have bought ALL of what are now the component parts of the Creative Suite the moment that they were announced.
    [I realize you don’t like the UI, Ann, as you’ve mentioned a number of times. I hope that it grows on you, especially as we fine tune things (i.e. remove bugs that are present in the beta). –J.]

  19. After working extensively, in CS3 for the last few weeks, I keep accidentally closing the palette window because the “x” in the upper right, is too close to the contextual menu. I would vote to remove it. There is already an “x” next to the name of the palette that does the same thing. Why the redundancy? This is bad GUI design.

  20. >I realize you don’t like the UI, Ann, as you’ve mentioned a number of times. I hope that it grows on you, especially as we fine tune things (i.e. remove bugs that are present in the beta). –J.]>
    I am afraid that there is no chance that your new GUI will “grow on me”.
    [You know you can make all the palettes/panels float as they always did, right? –J.]
    I am bitterly disappointed with the way that you have wrecked what was previously superb software β€” and I almost certainly will NOT buy CS3 until I have to buy a MacPro.
    Hopefully, by that time, we will be talking about CS4 and Adobe will have come to their senses and purged itself from this disastrous infection of Macromedia-itis.
    [Let’s not try to hang everything on folks who used to work at Macromedia. The Adobe UI team found plenty to admire in the Studio products’ UIs, as they did in the UIs of various other apps throughtout the industry. That was long before any deal between the companies was a glimmer in the eyes of anyone besides the executives.
    So, adding things like the docks on the side it’s something foisted onto Adobe or Adobe users. Rather, it’s something that tested (and works) well, and that Adobe was going to do anyway. –J.]

  21. Yes, I do know that you can make all the palettes/panels float as they always did, and you have stated that you intend to restore the bottom-of-screen anchoring which will certainly help.
    But the removal of the Well (and no-one has managed to explain why they did something as idiotic as removing that!); and the really stupid placement of the new “Close Palette” button (instead of keeping the Mac traffic-light buttons); have dumped ugliness and clumsiness on a GUI which was previously both elegant and efficient.

  22. does CS3 have the ability to select a third party color space other than the standard 4 spaces available(sRGB, adobe RGB, prophoto RGB, colormatch) during the RAW conversion process?
    i’m interested in using other color spaces (e.g., joseph holmes) but can’t do it without using other RAW converters.
    when will adobe put this feature in ACR?
    [Tom H. replies, “Camera Raw attempts to simplify the color management experience by only offering a limited selection of color spaces that are the most commonly used in photographic workflows. We’ve heard feedback from a group of photographers that would like to ‘hand off’ the files directly from Camera Raw in a color space specific to their workflow. This is a very reasonable future feature request.” That said, we don’t have other details we can provide at the moment. –J.]

  23. Why doesn’t Photoshop CS3 obey the Windows color scheme, as beautifully as Indesign CS3 does?
    [I can ask our UI folks. This is the first time I can recall anyone asking, and I don’t know what specifically you’d like to see changed. –J.]
    Is there a hope to get rid of the white/light grey interface on Photoshop CS3?
    It’s very strange that you still don’t have a unified look for the CS3 components.
    [Having come as far as we did in this cycle, lining up Photoshop, Illustrator, InDesign, and even the newly acquired Flash, that’s a little hard to hear. If you want to find flaws, you’ll always be able to do so. –J.]
    Thanks!

  24. Thanks a lot J.
    I think you all did a great job with the CS3 product line and I really appreciate the complexity Photoshop reached with the CS3 Extended version.
    I am sorry if my comments sounded a little mean, I can assure you I didn’t want that to happen – maybe is because I’m not a native english speaker.
    [Not your fault; I was just being touchy. Sorry about that. –J.]
    Please see the link below for a side-by-side comparison of Photoshop CS3 and Indesign CS3 and you will see how it looks like on Windows XP, with a darker color scheme.
    http://tinyurl.com/ywjv9w
    (ImageShack Link)
    http://img119.imageshack.us/img119/528/photoshopindesignor7.gif
    [Interesting; I hadn’t realized that it was possible to create such different appearances in these apps. Clearly we have more work ahead in modernizing & unifying our palette systems. Thanks for pointing this out. –J.]
    Thanks for your response!
    K

  25. Hallo
    I have a question, I have “Multiple sclerosis” and I would like to change to change the Photoshop-CS3 Interface GUI skin-theme to a darker color!! That would be better for my eyes to work with Photoshop on it, how I can change it? My Windows Desktop Theme is a dark “Visual Style”, but Photoshop CS3 don’t use the configurated Windows Skin? Why does it not work, like all other applications on this world? πŸ™
    I have payed 200$ for the upgrade and now I can’t work with Photoshop because my bad illness? πŸ™
    Did exist any solution? Thank you in advance for any answer! πŸ˜‰
    Lejla
    [I’m afraid I don’t know of a solution. Photoshop has never supported the ability to make the palette/panel/dialog background color darker, though it’s a good request and something we want to do. –J.]

  26. I definitely agree with Felhaborodott on the light menu and palette colors issue. It burns my eyes and it’s inadequate for color correction.. (will have to reinstall CS2, unless I can find a registry tweak, is there one?)
    It’s also very disappointing that photoshop did not make a serious interface revamp. The new changes only hinder the work-flow more. It is surprising, in the past 15 years photoshop did not learn much from the intuitive, productive work-flow of applications like Maya, Softimage, shake..
    Apart from the above-mentioned though, the app has some fantastic tools. It just always feels like a three legged dog. A love-hate relationship.

  27. I have to agree with Felhaborodott as well. I really like the interface changes Aside from the fact you can’t change the UI color scheme. The brightness is killer on the eyes and isn’t that good for color correcting. John you could change the palette/panel/dialog background color in the previous version by changing your windows color scheme and it grabs the same colors. Hope they patch something in before CS4 comes out. I really like CS3 but I can’t stand the white interface so back to CS2. Alot of poeple that I work with don’t use CS3 for that reason too.

  28. This post is a little late but appropriate.
    Care to explain why Illustrator is the ONLY app with a Dark/Light slider in the Interface Preferences (on Mac)?
    [We simply didn’t have time to implement the preference in all the apps. It seems simple enough to do, until you start to look at the number of controls (popups, etc.) that would also need to change appearance when the background gets dark. That’s not to say that it’s rocket science or that it won’t happen, just that it takes a good deal more work than one might imagine. –J.]
    I find this really annoying that I cannot have a consistent, dark grey workspace when switching between CS3 apps.

  29. “Q: When I switch the document mode it changes for all open documents – is there a way to override this?
    A: No”
    This is extremely annoying. I am an artist and typically paint in one document, while having several other supporting documents open. I only want my main doc full screen so that I can drag and drop from the other ones. when they are all in full screen mode this is much harder. I am considering giving up on CS3 especially since it crashes every time I use my favorite brush.
    So far CS3 is definitely not worth the price up the upgrade. I bought it about a year ago (when it first came out) but I still use cs2 95% of the time.

Leave a Reply

Your email address will not be published. Required fields are marked *