{"id":12778,"date":"2008-06-05T16:42:42","date_gmt":"2008-06-05T16:42:42","guid":{"rendered":"http:\/\/blogs.adobe.com\/jnackdev\/2008\/06\/future-photoshop-ui-changes.html"},"modified":"2008-06-05T16:42:42","modified_gmt":"2008-06-05T16:42:42","slug":"future_photoshop_ui_changes","status":"publish","type":"post","link":"https:\/\/jnack.com\/blog\/2008\/06\/05\/future_photoshop_ui_changes\/","title":{"rendered":"Future Photoshop UI changes"},"content":{"rendered":"<p style=\"margin-bottom: 0\">So, what&#8217;s Adobe up to interface-wise in the next versions of Creative Suite applications? <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">We&#8217;ve been working hard to make the interfaces of the various apps more consistent.&nbsp; Because the Adobe <a href=\"http:\/\/labs.adobe.com\/technologies\/fireworkscs4\/\">Fireworks<\/a> and <a href=\"http:\/\/labs.adobe.com\/technologies\/dreamweavercs4\/\">Dreamweaver<\/a> betas are available on Adobe Labs, you can now see some of the interface changes that will appear in the next version of Photoshop as well.&nbsp; I&#8217;d like to address some of the concerns and questions I hear bubbling up.&nbsp; In particular, I hope to put Mac users&#8217; minds at ease about a few things. <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">First, I want to lay my Mac <em>bona fides<\/em> on the table.&nbsp; I&#8217;ve been using the platform since Sept. 1984, and I really sweat the little details and conventions.&nbsp; (That&#8217;s one reason I&#8217;ve <a href=\"http:\/\/blogs.adobe.com\/jnack\/2008\/02\/random_greatnes.html\">raved<\/a> about NetNewsWire, Panic&#8217;s Transmit, and other great Mac apps.)&nbsp; I use Safari instead of Firefox in part because FF&#8217;s use of Windows-style buttons &amp; form elements feels alien on my system.&nbsp; So yeah, I care deeply about this stuff. <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">As the CS3 product cycle was wrapping up, Adobe&#8217;s user interface designers started showing their ideas for subsequent releases.&nbsp; Lots of things (tabbed documents, improved panel management, more usable workspaces, etc.) seemed like slam dunks.&nbsp; On the other hand, the designs all featured a prominent &quot;<a href=\"http:\/\/blogs.adobe.com\/jnack\/files\/images\/PS_app_frame.jpg\">application frame<\/a>&quot;&#8211;a window containing both UI elements &amp; documents&#8211;on both Mac and Windows. <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">I think my initial reaction can be boiled down to three letters: &quot;<strong>WTF<\/strong>?&quot;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&quot;Are you telling me,&quot; I asked, &quot;that we&#8217;re going to put a huge, battleship-gray box into the background on the Mac, as it is on Windows?&nbsp; <em>Why would we do that?<\/em>&quot;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">The designers pointed out that the app frame has a number of advantages:<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<ul style=\"margin-top: 0;margin-bottom: 0\">\n<li>It facilitates N-up (2-up, 3-up, etc.) document layouts that adapt as you adjust the interface.&nbsp; Think &quot;live window tiling&quot;&#8211;great for comparing, compositing, etc. <\/li>\n<li>It makes it easier to move the entire application and its contents, including from one monitor to another.<\/li>\n<li>It prevents documents from  getting obscured by panels (palettes).<\/li>\n<li>It blocks out the contents of the desktop, minimizing visual clutter.&nbsp; (A number of Mac users have requested this option for many years.&nbsp; I&#8217;ve known quite a few people who open a small blank document, hit F to put it into full-screen mode, and then put it into the background to hide the desktop.&nbsp; Willingness to live with that kind of hack demonstrates some genuine desire for a real fix.) <\/li>\n<\/ul>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">On the Mac (unlike on Windows, where an app frame has always been present), <u>using the app frame is optional<\/u>.&nbsp; It&#8217;s a one-click enable\/disable via Window-&gt;Application Frame.&nbsp; On either platform you can also <a href=\"http:\/\/blogs.adobe.com\/jnack\/files\/images\/PS_app_frame_floating.jpg\">float documents above the app frame<\/a>, mixing them with docked windows if you&#8217;d like.&nbsp; Whether on Mac or Windows, you can resize application windows by dragging any side, not just the lower-right corner.<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">I&#8217;ve recorded a quick demo that shows the app frame enabled &amp; disabled; documents in &amp; out of tabs; and some of the N-up layout options available with or without the app frame enabled: <\/p>\n<p><object width=\"425\" height=\"350\"><embed src=\"http:\/\/www.youtube.com\/v\/p-twq85H0CU\" type=\"application\/x-shockwave-flash\" width=\"425\" height=\"350\"><\/embed><\/object><\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">After I&#8217;d used the app frame for a little while&#8211;well, what do you know?&nbsp; I like it, and not because they pay me to say so.&nbsp; It&#8217;s easy to flip the frame on and off, but I find that I like the way it reduces distractions.&nbsp; Your mileage may vary, and that&#8217;s why we made using it an option.<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">The app frame has brought to light the questions of what is &amp; is not considered &quot;Mac-like.&quot;&nbsp; This inspired me to do a little investigation into the state of Mac software.<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">It&#8217;s interesting to note that showpiece Mac apps like <a href=\"http:\/\/www.literatureandlatte.com\/scrivener.html\">Scrivener<\/a> and <a href=\"http:\/\/www.newsgator.com\/Individuals\/NetNewsWire\/default.aspx\">NetNewsWire<\/a> feature the ability to run in full-screen mode, blocking out the desktop and other distractions.&nbsp; Panic&#8217;s <a href=\"http:\/\/www.panic.com\/coda\/\">Coda<\/a> Web development tool is among those combining interface and content into a single window. <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">What about  Apple&#8217;s own applications, as they would be presumably be the definition of Mac-like, right?&nbsp; I noticed a couple of things:<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<ul style=\"margin-top: 0;margin-bottom: 0\">\n<li>The pro video apps (Final Cut Pro, Motion, Color, DVD Studio Pro) configure their windows\/panels to take over one&#8217;s screen completely. <\/li>\n<li>Aperture and iPhoto put all the UI into a window &amp; optionally take over the screen in a dedicated full-screen mode.<\/li>\n<li>The iLife and iWork apps (Keynote, Pages, iWeb) all feature a UI approach that marries together content &amp; interface in a single window.&nbsp; (For reference, here&#8217;s a little <a href=\"http:\/\/flickr.com\/photos\/26449905%40N02\/sets\/72157605411199955\/show\/\">gallery<\/a> of all these apps.)<\/li>\n<\/ul>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">And so, I&#8217;d argue,  putting UI + content into a single, manageable window (as the CS4 app frame does) isn&#8217;t &quot;un-Mac-like&quot; at all.&nbsp; Despite my initial freak-out (the one being <a href=\"http:\/\/www.adobe.com\/cfusion\/webforums\/forum\/messageview.cfm?forumid=72&amp;catid=672&amp;threadid=1366157&amp;enterthread=y#4972408\">echoed<\/a> by others when seeing an application frame in Fireworks), you could argue that the application frame makes Adobe tools <em>more<\/em> Mac-like&#8211;if &quot;Mac-like&quot; means &quot;Apple application-like.&quot; <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">I&#8217;ve also heard comments about the new Adobe apps&#8217; custom interface elements and their ability to resize windows by dragging them from any side, not just from the lower-right corner (as required in most Mac apps).&nbsp; On Daring Fireball John Gruber <a href=\"http:\/\/daringfireball.net\/linked\/2008\/may#thu-29-fireworks\">characterized<\/a> this capability as &quot;just like in Windows.&quot;&nbsp; Digging a bit more, I fired up Final Cut Pro 6.0 and made some discoveries:<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<ul style=\"margin-top: 0;margin-bottom: 0\">\n<li>You can drag-resize panels and document windows <u>from any side<\/u>, not just from the lower-right corner.<\/li>\n<li>The close\/minimize\/zoom buttons are <a href=\"http:\/\/www.jnack.com\/adobe\/photoshop\/ui\/FCP_buttons.gif\">extremely small<\/a>; they always appear monochrome (instead of respecting the OS appearance preference of Blue vs. Graphite); and they don&#8217;t show a dot in the close box of files with unsaved changes.<\/li>\n<li>The UI is full of unique elements that don&#8217;t appear elsewhere in the OS&#8211;e.g., <a href=\"http:\/\/www.jnack.com\/adobe\/photoshop\/ui\/FCP_scrollbars.gif\">custom scrollbars<\/a> sitting next to OS-standard ones. <\/li>\n<\/ul>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">I then took a look at Motion.&nbsp; Again scrollbars are <a href=\"http:\/\/www.jnack.com\/adobe\/photoshop\/ui\/Motion_scrollbar.gif\">custom<\/a> (though different from Final Cut&#8217;s), remaining monochrome regardless of OS appearance preference.&nbsp; Application windows can be resized individually and together from any side, though with more apparent limitations than in FCP.&nbsp; Things are similar in DVD Studio Pro, where you can resize what amounts to an app frame from any side. <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">Instead of &quot;just like in Windows,&quot; &quot;just like in Apple&#8217;s own apps&quot; might be a better way to put it.&nbsp; In any case, whether the convention exists elsewhere is beside the point.&nbsp; The point is, <em>Is it useful?<\/em> <\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">As I <a href=\"http:\/\/blogs.adobe.com\/jnack\/2008\/06\/some_thoughts_about_platform_consistency.html\">wrote earlier<\/a>, I believe Adobe teams need to work hard to make their products feel like polished, native citizens on each OS.&nbsp; Deviation from the norm <em>for its own sake<\/em> is unhelpful.&nbsp; Having said that, OS conventions should support innovation, not stifle it.&nbsp; If we can improve functionality (e.g. enabling more flexible document resizing) without imposing any burden (extra UI chrome, etc.), why shouldn&#8217;t we?<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">&nbsp;<\/p>\n<p style=\"margin-top: 0;margin-bottom: 0\">Our job is about <u><em>functionality, not ideology<\/em><\/u>.&nbsp; Whatever works best, wins.&nbsp; Obviously the Apple development teams feel free to depart from strict adherence to the baseline OS when they feel that doing so would benefit their customers.&nbsp; I&#8217;d argue that Adobe teams should have similar latitude. <\/p>\n<p><span style=\"margin-top: 0;margin-bottom: 0\">Now, at the end of the day, will we ship with the application frame visible by default on the Mac?&nbsp; I don&#8217;t know; maybe not.&nbsp; We want people to feel <i>invited<\/i>&#8211;not <i>forced<\/i>&#8211;to use the new functionality.&nbsp; No matter how much I write here&#8211;and thanks for reading this far&#8211;some Mac users are going to have the &quot;WTF&quot; reaction to the application frame.&nbsp; Hopefully they, and you, will keep an open mind until you&#8217;ve gotten to try it out.&nbsp; I think you&#8217;ll find&#8211;as I did&#8211;that there&#8217;s a lot to like.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, what&#8217;s Adobe up to interface-wise in the next versions of Creative Suite applications? &nbsp; We&#8217;ve been working hard to make the interfaces of the various apps more consistent.&nbsp; Because the Adobe Fireworks and Dreamweaver betas are available on Adobe Labs, you can now see some of the interface changes that will appear in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[26],"tags":[],"_links":{"self":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/12778"}],"collection":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/comments?post=12778"}],"version-history":[{"count":0,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/12778\/revisions"}],"wp:attachment":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/media?parent=12778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/categories?post=12778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/tags?post=12778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}