Photoshop in METRO style 2: Filters

Recreating a Metro Style version of one of the most elaborate dialog boxes in Photoshop seemed like an interesting challenge. The comments on the post Photoshop in METRO style got met re-reading the existing documentation for METRO Style Apps…

The comments on the previous post got met re-reading the existing documentation for METRO Style Apps. It appears the content of is quite different when you follow the HTML5/CSS/JS path from when you follow the C++/C#/VB/XAML path. Both are far from complete and one has more complete details on specific subjects than the other. For example, the part where controls are redesigned is much more complete in the XAML section, but the general UI guidelines is more complete in the HTML5 section…

Following new insights on how to design a UI for Photoshop in METRO style I set out on creating a few new screens. Naturally time constraints don’t help in investigating this interesting Style Exercise further. I would have liked to present more screens than these two, but decided to publish this result anyway to keep a conversation going.

The Filters Gallery is one of the most elaborate dialog boxes in Photoshop. It allows you to access all filters possible and determine specific settings for filters and judge the results in the dialog itself. Recreating a Metro Style version of this dialog seemed like an interesting challenge.

The idea was to try out On-Canvas controls. These are controls that are not tucked away in an app bar at the bottom of the screen or a controls area at the top of the screen. My issue with them is that they obscure the image that you are trying to edit. I think this doesn’t help in the image editing process. I decided on a Semantic Zoom as Reidar suggested in his comments. I also wanted to show the effect of a filter on the actual image on the screen.

The Filters Gallery screen show all filters in a specific group:

Click to show a full screen image…

It has no use showing these filter effects on the actual image beneath them, because some would only show the blue sky. No effect would be visible in most cases. I opted for a small version of the current image with the filter applied in a GridView, with the title of the filter below. The title of the group is at the top of the screen. Swiping left or right or using the arrows left and right allow you to show the other groups of filters.

The Filter Detail screens will show the filter applied to the image:

Click to show a full screen image…

Swiping would show the next filter in the group applied to the image. I’ve inversed the Overlay, this way the filter is applied to the visible part of the image and you can judge the effect of the filter correctly.

Three sliders (common to most filters in the Photoshop Filter Gallery) are show over the filtered image. They are minimalistic as they don’t show any value, but the effect of changing them should be visible immediately. An issue here is contrast: what if the image is white or black behind the Slider controls? The Check icon that is frequently used in Windows Phone and Windows 8 Metro Style apps is below the image to Apply the filter to the current image. To remove it, usually a similar Trashcan icon is used. But it is unclear as to where that icon would show up in this design.

I see how so-called On-Canvas controls can help in the design of Metro Style UI’s. In this case the image below the controls is important and should ideally be visible all the time. I like the way the filter effect is visible on the image right away and changing the setting would should the effect on the image at once. This comes closer to Direct Manipulation…


6 gedachten over “Photoshop in METRO style 2: Filters”

  1. Hi

    I have also been re-reading the documentation for metro-style Windows applications. Microsoft updates the documentation all the time, and it is getting pretty good now I think.

    Based on your ideas about filters, I made quite a few more sketches.


    Persistent state: When the user taps on the Photoshop tile on the Start Screen to launch the program, the program is just the way the user left it. All the files that were open, is still open etc. Open and close files etc. is done from the top app bar. This app bar does not change based on context, but always displays the tabs. The app bar here is identical to the one in Internet Explorer metro-style. The (+) icon brings up a full screen for new, open etc.

    The bottom app bar contains all the main commands. Only three of these are shown here, but there will be many.

    2) The user selects the App Filters bar, and the following dialog appears on the screen.

    The arrow at the top left is a back button, so the user can get out of the Filters dialog. This is the correct position for a back button, acc. the documentation. The back button allows the user to exit the Filters dialog without selecting a filter. Filters dialogue also saves the state, so it shows the filters last viewed by the user (here a group for “Pinned” filters).

    The user can easily and quickly slide through the available filters. In order to visualize to the user that there are more filters to the right (without having to use an arrow = chrome), half of the next filter is shown. This affords sliding.

    3) The user slides through the available filters.

    4) User has not found a suitable filter and therefore invokes semantic zoom by pinching. The definition of semantics zoom in the documentation: “Two or more fingers are placed on a structured collection of UI elements and are moved farther apart or closer together. Used to drill down into different views of a collection of structured content to access different or more detailed information about categories and items in the collection.“

    The Filter dialog now shows the filter categories:

    5) The user taps on Recent and is shown those filters.

    6) The user presses and holds his finger one the filter, invoking information/help about the filter (here “Artistic: Plastic Wrap. Tap to apply og select to adjust.”).

    According to the documentation: “Use tooltips to help users learn about the UI. Tooltips are popups that appear on screen when users press and hold a control, and that dismiss when users life their finger. The contents of the tooltip can be text or an image but is not interactive. Use tooltips to reveal more information about control before asking the user to perform an action. The equivalent interaction in a non-touch environment is a mouse hover.”

    7) The user selects the “Plastic Wrap” filter. Selection of an UI object in Windows 8 metro-style is done by sliding it in the opposite direction (here: up or down). In the documentation this is called cross-sliding, e.g. when one finger is placed on an object and dragged at a right angle to the panning direction. This type of user interaction is the recommended, and is also the way the user can select tiles on the Start Screen. The equivalent mouse interaction is right-click and keyboard is spacebar down. Note the boarder and check mark in the top right corner. This is the exact same behavior as the Start Screen tiles, and the default behavior you get using the Visual Studio grid template.

    The app bar is activates, showing settings for the filter. From the documentation: “Do show the app bar programmatically to display contextual commands. If you have commands that can only be performed when content is selected, show your bar programmatically when users select content. Set the bar to persistent mode so that the bar remains visible while users act on their content.”

    8) After adjusting the filter, the user taps directly on the filter, and thereby exiting the filter dialog.

  2. 9) This user interaction model can be used for a range for user tasks. For example to adjust contrast, colour balance etc.

    10) We can also use semantic zoom in the adjustments dialog:

    11) Selecting elements in a picture/image can be quite difficult and imprecise with touch. It is necessary to have good dialogs to help the user. The same interaction model can be used for selection tools: In this screenshot the user has pressed and hold on the colour range UI element to show the tooltip.

    12) The user selects the colour range UI element by cross-sliding. The context sensitive app bar appears automatically. The user selects yellow, and the colour range UI element updates. If the user taps directly on the colour range UI element, this exits the selection dialog and returns the user “home”. The sunrise is then selected and the user can continue using the tools of the application and apply changes to the sunrise, for example to make colour corrections or enhance contrast only to the sunrise.

  3. Thanks Reidar, for your elaborate answer and sketches.

    Your sketch on starting the Application closely resembles the first image in the first post, only I use filenames on the thumbnails. I also have a few buttons in the app bar there, but they are about new and opening documents.

    I have no arguments on the place of the back button and showing a part of the next filter for the affordance of sliding. I also think your interaction model on selecting a filter and using commands in the AppBar is spot on and the better way to do this. The actual commands and controls needs to be considered carefully, I think.

    Selection in Photoshop is one of the key interactions in Photoshop. There are actually dozens of ways to do this. Your suggestion using shapes seem over simplified to me. I doubt that it will have enough value for users.

    Selecting and Editing are two areas that need further investigating. If I can find the time I’ll create some screens for that. Editing without Cursors and Selecting without mouse and ‘Marching Ants’ will be a real challange…

Reacties zijn gesloten.