When you make a screenshot of Expression Blend 4 and paste it in Photoshop CS6 beta, it is hard to see where the Photoshop UI stops and Expression Blend UI starts.
Check this out:
Using the Zune Software it is easy to listen to PodCasts on the Windows Phone. If you commute or have to wait regularly, you miss a lot when you don’t plug in your earplugs or connect your Windows Phone to your Car Stereo. There are many PodCasts and there is a lot to learn.
For European Listeners there are some hickups: the Zune is officially not available in Europe, so PodCasts exclusively for Zune are restricted for use outside the USA. You can experience that by using the Zune links that are on the official homepages of the PodCasts. I’ve had a likewise experience when I subscribe from within the PodCast player in Windows Phone, showing a “cannot play this PodCast” message instead of playing it.
To avoid this problem enter the RSS feed URL of a PodCast in the Subscribe dialog that appears when you click the Add a PodCast button at the bottom left of the Zune PodCast screen. When the PodCast episodes list has loaded, drag interesting episodes to you Windows Phone.
When you hit the Series Settings button on the right of the screen next to the episodes list, you can determine how podcasts are downloaded and synched to your phone:
The Windows Phone standard PodCast player is actually very nice and complete, but if you want more or other features you can search the MarketPlace for other PodCast Players. Screenshots below illustrate the path to playing a episode from .NET Rocks!:
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:
It is hard, if not impossible to find the URLs back for the feeds once you are subscribed. Feeds I’m listening to are:
Dot NET Rocks!: http://www.pwop.com/feed.aspx?show=dotnetrocks
The Tablet Show: http://www.pwop.com/feed.aspx?show=thetabletshow
Deep Fried Bytes: http://feeds.feedburner.com/deepfriedbytes
DotNed PotCasts: http://www.dotned.nl/podcasts/podcasts.xml
Yet Another Podcast: http://feeds.feedburner.com/JesseLibertyYapcast
Windows Phone Dev PodCast: http://feeds.feedburner.com/WindowsPhoneDevPodcast Windows Weekly: http://leoville.tv/podcasts/ww.xml
When using Touch in WPF it is possible to scroll lists. It’s just that the Window is moving to give Feedback when you are reaching the end of the list. This is not always what you want. To make your application ignore this behavior you can mark the ManipulationBoundaryFeedback event handled:
.. your application is here…
private void ManipulationBoundaryFeedbackHandler
(object sender, ManipulationBoundaryFeedbackEventArgs e)
e.Handled = true;
The event is bubbling only, so if you place the event handler on your LayoutRoot it should work for all lists.
Actually there is also a System settings in the Panning Tab in the Pen and Touch settings dialog. This is a setting the end users can choose.
Silverlight 5 is released and contains the Typography features that already existed in WPF. Designers can use these features to make beautiful typographic designs.
Thanks to the qualities of the OpenType font format, several typographic features are now available to every web designer. Combining TrueType and Postscript outlines in one format, smaller file sizes, more typographic control and allowing far more characters in a single font file have resulted in a much more versatile use of fonts. The Typography object is available to you inside a TextBlock or TextBox tag. Attributes of this object lead to various typographic results.
Inside a TextBlock or TextBox, a Run element is used that can only contain unformatted text. Properties of the Typography object are applied through this Run element. To group some of the Run elements together, use a <Span>. Both Run and Span have no inherent rendering.
One concept associated with typography is Kerning . Kerning is embedded in the selected font file and Silverlight has no influence on it other than being able to use it or not. You can set the Typography.Kerning attribute to False. The default setting is True.
Superscript and Subscript are Variants of normal characters in a font, placed on respectively a higher or lower baseline than the rest of the text. Other Variants are Normal, Titling, Inferior, Ordinal and Ruby. Note that a Superscript and a Subscript Variant needs to be present in the font file you use.
Nobody should use a smaller font size of normal Capitals when you really need SmallCaps. Spacing of SmallCaps is different and weight and proportion of the letters are adapted to their size and use. Also, for titling purposes capitals with elegant, slender stems are possible, if they are accounted for in the specified font. Setting the property Typography.CapitalSpacing=”True” is a good idea for titles or text that are in capitals, for the spacing between capitals and lowercase letters differs from the spacing between all capitals.
Ligatures are Alternates for two characters that would collide when spaced normally. In the lowercase combination of f and i for example, the point of character i interferes with the end of the stroke of the f regularly. So in the ligature ﬁ this issue is solved. The same is true for ﬀ, ﬂ, ﬃ, ﬄ and many other character combinations. In OpenType fonts standard ligatures are enabled by default in Silverlight 5. If for some reason standard ligatures should be disabled, use the property Typography.StandardLigatures=”False”. Other reasons for ligatures are esthetic, resulting in discretionary or historic ligatures, using Typography. DiscretionaryLigatures and Typograpy.HistoricalLigatures. Ligatures must be present in the font file for you to make them visible with the Typography object.
Swashes are decorative elements of characters associated with calligraphy. Extended serifs and strokes on existing characters may be part of your OpenFont file. To enable a Swash on a character set Typography.StandardSwashes=”1”. When a standards Swash doesn’t result in an agreeable result setting Typography.ContextualSwashes=”1 for that character is also an option.
OpenType has so many positions for characters available, that Stylistic Alternative characters are at your disposal. To enable an alternative character, set the Typograhy.StylisticAlternates property. Random use of alternatives is possible when you specify Typography.ContextualAlternates=”True”, a great way to help a script font in suggesting true handwriting. A font may also contain AnnotationAlternates. These are Glyphs in circles, squares, parentheses, diamonds or rounded boxes used for annotation of images of illustrations. In code-behind this index can be set with Typography.AnnotationAlternates.
Some characters in a font may be designed to be used together, because they look better next to each other or work together somehow. These characters are combined in a stylistic set and a maximum of 20 of these sets may be set in code-behind.
Numerical features of OpenType include Typography.Fraction=”Slashed” or Typography.Fraction=”Stacked”, old style numerals with Typography.NumeralStyle=”OldStyle” inside a Run tag and Tabular or Proportional alignment with Typography.NumeralAlignment=”Tabular” and even, where available, a slashed zero using Typography.SlashedZero=”True”.
Here’s the XAML I used for the image at the beginning:
<StackPanel Background="White" Margin="0,0,0,0"> <TextBlock FontFamily="Adobe Caslon Pro" FontWeight="Normal" TextAlignment="Center" FontSize="200" Typography.StandardLigatures="True"> <Run FontStyle="Italic" Typography.StylisticAlternates="1">fi</Run> <Run Foreground="Red" FontStyle="Italic" Typography.StylisticAlternates="1">fl</Run> <Run FontStyle="Italic" Typography.StylisticAlternates="1">ff</Run> </TextBlock> <TextBlock FontFamily="Adobe Caslon Pro" FontWeight="Normal" Margin="0,-150,0,0" TextAlignment="Center" FontSize="200" Typography.StandardLigatures="True"> <Run FontWeight="Normal" Typography.StylisticAlternates="1">fi</Run> <Run FontWeight="Normal" Typography.StylisticAlternates="1">fl</Run> <Run FontWeight="Normal" Typography.StylisticAlternates="1">ff</Run> </TextBlock> <TextBlock FontFamily="Adobe Caslon Pro" FontSize="24" Margin="0,-125,0,0" TextAlignment="Center"> <Run Text="Superscript: M"/><Run Foreground="Red" Text="2" Typography.Variants="Superscript"/> <Run Text="Subscript: H"/><Run Foreground="Red" Text="2" Typography.Variants="Subscript"/><Run Text="O"/> <Run FontStyle="Italic" Text="Fraction: 8"/><Run Foreground="Red" FontStyle="Italic" Text="1/2" Typography.Fraction="Slashed"/><LineBreak/> <Run Text="CAPITALS" Typography.Kerning="True"/> <Run Text="SmallCaps" Foreground="Red" Typography.Capitals="SmallCaps"/> <Run Text="AllSmallCaps" Typography.Capitals="AllSmallCaps"/><LineBreak/> </TextBlock> </StackPanel>
Also check out Silverlight 5 OpenType Support from Pete Brown at 10REM.NET.
The comments on the previous post got met re-reading the existing documentation for METRO Style Apps. It appears the content of http://msdn.microsoft.com/en-us/windows/apps 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:
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:
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…
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!