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!
When a PodCast is playing, you can always adjust volume or stop the show by using the volume button of you phone. It will place the player controls over any screen that is currently showing, even the startup screen:
