Yes, I know that Photoshop is a software program that is so complex that is unlikely it will ever be refurbished into Metro style. But as a Style Exercise for using the design language it is an obvious choice. The goal of the exercise is to find the limitations of the Metro style, if any. Trying to recreate the Photoshop UI in Metro style seems like a foolproof test to find these limitations. Here are the result:
You can click these thumbnails to view the 1366 x 768 px PNG files. I exported them from Expression Design, a vector drawing tool from Microsoft that allows you to export XAML (or PNG) easily. A side effect of this is that not all icons are pixel perfect: they are generated from vector illustrations.
Now, Photoshop is mouse and keyboard driven software. It uses a Toolbox, Palettes, a Command bar and Menu’s heavily. It is questionable if Photoshop would be usable on a slate or a tablet. In fact, I have tried to use it on my tablet pc once and it is not really workable in tablet mode. You miss all the keyboard short-cuts and modifier keys while doing mouse operations on the pixels. It simply doesn’t work. For Photoshop to work on a slate or a tablet is has to be redesigned from the ground up.Is Full screen editing of Photo’s using a touch interface valuable at all? Is it doable?
Metro is the style, or design language, introduced with Windows Phone 7 and is growing in momentum, because it is used as the UI style for the Phone, Xbox and the upcoming version of Windows called Windows 8. If you don’t know anything about the Metro style, Dennis Vroegop has a blog post that sums up the characteristics of the Metro design language. Metro will be hard to ignore in the coming years as these systems grow in importance. My concerns with Metro are firstly that is it a Style and styles are known to become outdated in about three years. Since Windows 8 will not see the light of day for about a year or so, this style will have to be interesting for at least five years from now. Will it live up to that? That is very hard to predict, let alone to test. My other concern is that Metro will not be versatile or flexible enough to accommodate all necessary UI design demands. Will it be possible to build any user interface you can come up with in this Metro style? Now this one can be tested today. That is what this Style Exercise is all about.
General aspects of Metro is that it is an interface for touch screens, like the ones in tablets and slates. Contrary to web pages in browsers, you navigate mainly in a horizontal direction by swiping the screen from the right to the left. It uses lots of single colored icons in circles. In Windows Phone these icons are located in Tiles, squares that represent and app, or in an application bar at the bottom of the screen. Areas are flat, so no gradients, no bevels and no borders. Is transparency allowed in Metro? I’ve seen apps that use it, the Weather app in the Windows 8 Preview for example. I will use it here too.
It may be good to realize that the left side of the screen is reserved for the OS. You can access the “BackStack” of applications by swiping from the left into the screen. As far as I know an app cannot have its own BackStack. Previously started apps will appear from the left and fill the screen. Also, the right side of the screen is reserved by the OS. Swiping in from the right into the screen initializes the “Charms” the allow applications to take part in system wide Searching and Sharing, access the Start Screen from the software and reach Devices and Settings. It is organized around your thumbs when they are over the screen vertically centered at the sides of your tablet.
Inspiration for these designs were the Window Phone 7.5 interface and the several apps that came with the Windows 8 Developers Preview. Especially Internet Explorer 10 in Metro style seems to be thought through really well. Some other apps inspired the solutions in this design while others only convinced me that their solution was not mine. Stacking icons in an app bar vertically is one of them.
In executing this exercise I obviously came across many questions. That was the point of it all: to see how far you can go. One of the no brainers was the choice of fonts. Segoe UI is the default font for Windows application from the Vista version on. It is a light an open font and I think it is beautiful. It has seen various incarnations, like a special version for Windows Phone, but for Windows 8 the standard Segoe UI seems to be used. It comes in the styles Light, SemiLight and SemiBold. I’ve used it for the Splash screen, replacing the Bold Adobe Gothic Std B. It is also the font of the titles of panels in the top bar in the screens. Finally I used it as a title in the picture with the Layer palette together with a DropShadow (that is certainly not Metro style), just to show a design for the Blending Options in the Layers palette.
The Splash Screen
When you start a Windows 8 application, it will show a full screen animated splash screen. It is one of the characteristics of a Windows 8 Metro Style application. It has no other function than to identify the application and to give the application enough time to show the basic UI. Apart from the typography in Segoe I’ve added the Adobe logo in a Tile. Tiles are one of the typical screen elements in the Metro style. When the application is loaded the UI replaces this start screen. I is only visible for a second or so, but still it represents an important part of the Metro style experience. I actually used a gradient here even though it is not Metro style.
The File Menu Screen
An obvious place to start is the file menu. Since the left and right side cannot be used, information is placed at the top and the bottom of the screen. The menu is moved to the application bar, which seems the right spot for these option. The application bar can be contextual and it should be in this design, because I also use if for the Toolbox icons. Just how you change your context from Menu to Toolbox is an unsolved issue so far. Icons can have a popup above the app bar. In Windows 8 Developers’ preview it is not possible to see whether an icon has a popup like that. I’ve added a small triangle above the icons for that. I reserve the possibility to swipe the app bar to the left or right, but in this screen the left and right buttons are disabled. The icon for New is a plus sign in Metro, other than in Photoshop were it is a document icon. I double the icon at the bottom right with the one next to the open files in the top navigation bar, but I could also leave that one out. The Save file popup needs a lot more options to be more like the current one.
One question is how to navigate to other menus options or other menus for that sake. Since Metro originated from Windows Phone 7, I image that the Pivot control could also be used in Windows 8. But it is not available in Visual Studio 11 Express for Windows Developer Preview. Anyway, I use that control to access other menu options. Tapping the Document, Import, Export or Print header would animate the item in the top bar to the left and show any necessary UI for that option in the blue bar at the top of the screen.
The Toolbox and Palettes Screen
Of course the Toolbox of Photoshop must be taken care of. Photoshop has a relative large toolbox, with many options in fly-out menus on several of the toolbox buttons. My solution is to put these icons in the app bar. You can swipe from the bottom of the screen up to access the toolbox. I’ve seen screens that stack rows of icons in the app bar, but that would take a large amount of screen real estate, and I think is not acceptable for software that should show the image that is manipulated and not the UI (Content not Chrome is one of the Metro Principles). This makes the toolbox horizontal, but looping round, so left is navigating back, right is navigating forward through the groups in the Photoshop toolbox. One axiom for tools is to keep them close at hand. I realize that this setup will not make them accessible with one tap. With some experience swiping the toolbox icons to the left or right make make accessing specific tools good enough. Fly-outs are dealt with by showing a popup with those options, with the current selection highlighted. An indication for an expanding panel is above the icon for the tool.
Normally Photoshop has Tool Palettes at the right hand side of the screen. Since this side is off limits, I have placed it at the top using the same Pivot style shown earlier. You can swipe from right to left to show more palettes and their necessary UI. One issue I run into is that the palettes use lots of very small icons. In a touch environment icons smaller than 30 pixels are unworkable. In Windows Phone 7 the smallest icons are 24 pixels, but always separated from other UI elements, so there is room to select them without accidently activating other icons. I think the small tiles in the Swatches palette may have this problem and the sliders in the Navigation and Color palettes may be too small to handle comfortably. UI for touch needs a lot of space.
The Layers Screen
I’ve run in serious issues with Layers Palette. Intrinsically layers are stacked vertically, but there is really no way to do that in Metro: the right side of the screen cannot be used. Your only option really is to place it at the top like the other tool palettes. The Layers palette is very important in Photoshop and it has many features and corresponding UI elements that need a place on the screen. One solution is to separate the options for all layers from the options for a specific layer as I’ve done in this screen. The first area under the Layers header shows the Layer Effect, Lock, Opacity and Fill options that are at the top of the layers palette in Photoshop now. Also the icons to link layers, a effects, masks, adjustments and to group layers are placed in this area. It should function about the same as it does in Photoshop now. Other icons that affect a specific layers, like the eye, lock and trashcan icons, are grouped with a layer thumbnail. These are “stacked” horizontally with an option to add a new layer after the last (second) thumbnail. In a horizontal layers palette, the question is which layer is above the other. It would be intuitive to show them vertically stacked. Currently in Photoshop effects are show below the layer with an option to hide all effect or a specific effect. In this design the effects are shown to the right of the thumbnail.
Issues I didn’t solve
Closing a Tab in Internet Explorer 10 is done using a X icon. Deleting an item in Windows Phone 7.5 is usually done using a context menu that shows up when you tap-and-hold an item. This is why I needed a trashcan icon even though Delete icons are not available in Metro.
Panorama or Pivot navigation is not included in Win8 Metro style. Navigating a screen without these controls will become very hard very quickly. I think Metro apps will need this type of navigation in the app bar and in the top bar. When you use the app bar and the top bar for different things contextually, it is not at all clear how you change the context from menu to toolbox or from Open documents to Palettes. Navigating around Metro apps is not solved adequately using the existing apps, nor this style exercise.
None of these screens show Dialog boxes. At this moment it is a mystery to me how that kind of functionality should be implemented in Metro style. SnapView is the option to divide the screen in two thirds for your app and one third for another app. But SnapViews are for other apps, not for dialogs in your own app. You can’t use them like a palette. Dialogs are a given in current Window applications, but there is no real solution for presenting these options in a Metro style app.
If you have any comments, please let me know!
Njoy!
Very interesting. Thank you. You got me thinking…
1) You assume that the image is the “content”. I would have thought that the commands are the content of an application like Photoshop. Very simplified, we can think of Photoshop as an application that allows the user to change settings on an image, like the control panel changes settings in Windows. The control panel is not hidden away in the app bar to the Start Screen. The commands are displayed full screen, because the commands are the content in an control panel app. An image is the “content” when you view it in a photo album or use the image in a document, etc.
You mentioned the weather app. It is the video in the background that actually shows the weather where you are. The commands in the weather app is really in the center of the screen, organized by the grid layout. For example, you change day by swiping left etc.. A kind of direct manipulation for executing commands. Less frequently used commands should be hidden away in the app bar. The charm for settings is used to change between F and C in the weather app.
2) You try to copy all the commands of Photoshop for the desktop to Photoshop metro-style. Do they need to do exactly the same ting, in the same way? Think less of what functions the application should have, and rather more on the user experience. More direct manipulation. Maybe some things can be done with multiple touch? Or by using zoom to change to a different view? For example the color palette is suitable for semantic zooming. Use your fingers to zoom inn between red and yellow, and then the view updates to show finer gradients of those colors.
3) I think I would adjust the content to the grid even in an application like Photoshop. What about, for example, to display the same image many times in the grid, where each copy displays different effects? Or what about drag-and-drop the image over different areas in order to apply different effects?
4) Your screenshots look overloaded. Why do everything on One “screen”?
Why not group the functions into logical categories? Maybe swiping left could change group (set of commands). Swipe left again and you see another group of commands. Then think again about what is the “content” in an application like Photoshop. I think that the commands, organized by the gridview, with the image in the background (like in the weather app), should change when you swipe left. Swiping left changes group of commands.
The app bar should only be used for less frequent commands.
Hello Reidar, thanks for your reply. That was good thinking 🙂
When you say controls in Photoshop are the content I have to disagree. Adjusting settings on an image still makes the image the content in this application. Because Photoshop is an image editor the image to edit is the hero.
Similarly in the Wheater app the information in the middle of the screen is the content of the app. The video on the background is just an oversized illustration and is content too. The content is output and you cannot interact with it, other than scrolling the content by swiping left or right. Controls are as expected in the AppBar and -unexpected- in the system settings.
I’ve been wondering about the usefullness of a chromeless Photoshop. Is it useful to have the image fill the entire screen and only have a cursor indicating the selected tool? Where does the continuous feedback go? Are tools close enough at hand? How about showing a second view of the image at a different zoomfactor, as I often do?
No, the controls don’t have to be exact the same as in Desktop Photoshop. I fact I think they shouldn’t be. I still need to place a list of layers somewhere and the left and right of the screen are off limits. I would think pinching is used to shrink or enlarge the content, but not for executing commands. Your suggestion to use Semantic Zoom for the Color Palette is interesting. Basic colors still have to be placed somewhere in the application. I think I wouldn’t mind having this functionality in the center of the screen as you suggest.
I love the idea of direct manipulation for executing commands by swiping left or right, dragging and dropping. I imagine showing the effect of filters by dragging the filter from the left or the right over the image. I guess there are still slilders to be adjusted or values to be entered somehow. Putting less frequently used commands in the App Bar seems counter intuitive. This is the place where you expect commands to be, not only the rarelly used ones.
On the other hand I’m interested in what you suggest: putting tools in semi-transparent GridView over the image, like the Weather app. There must be a way to see the image without any overlapping tools, though. I think I’ll spend some time soon the see how that works out. I’ll keep you posted…
I’m sorry, but this looks like absolute crap.
Hi Antoni, thanks for the reply. The more I think about Photoshop metro-style, the more difficult I realize this is.
Putting only less frequently used commands in a hidden app bar is a Microsoft design recommendation. According to Microsoft’s design guidelines critical or essential commands to complete a task should not be placed on the app bar. “If the user feels that they’re opening the bar frequently just to accomplish their task, then you should consider direct manipulation, semantic zoom, or on-canvas commands”, according to Microsoft’s metro guidelines. I do agree with those guidelines.
You wrote: “Is it useful to have the image fill the entire screen and only have a cursor indicating the selected tool?” I think having the image fill the screen is a good idea, alternatively having it aligned with the grid. But remember that you don’t have a cursor when you are using touch. This is one of the reasons why I would recommend putting groups of commands on the grid. By doing so, you don’t need a cursor.
You wrote: “I would think pinching is used to shrink or enlarge the content, but not for executing commands.“. I would say optical zooming and image rotation etc. are commands. For this type of commands it is easy to find good solutions for direct manipulation (e.g., pinching), and then you don’t need command buttons for these functions. The challenge lies in finding solutions for direct manipulation for other categories of commands. Otherwise, you will have too many command buttons.
Here are some ideas…
Commands (can slide across the screen):
http://flic.kr/p/aBxSeu
Commands, also showing app bars:
http://flic.kr/p/aBxSky
If no direct interacting with the image is necessary, for example selecting a template etc.:
http://flic.kr/p/aBxShs
For advanced programs like Photoshop , a good combination seams to be a merge between Metru UI and Ribbon .
I think you might be over critical, not all metro apps have to be metro style, and as a full size app it dues not mean the photo would be full size you could still have window like boxes. The tool bar would be nice with edge detect so you could just focus on the project, also tablets are the best for Photoshop and digital painting since you can almost always use a digitizer pen to draw, which gives you pixel perfect drawing better then a mouse, its also more fluid then a mouse, with digitizer you also get erasing and right click right in your pen.