I recently wrote about the different ‘share icons’ that are being used on various mobile platform but one that really stands out (and not in a good way) is the Windows Phone icon.  The Windows Phone icon looks like this

A gift or present image.  Now I guess it could mean ‘share’ or ‘give something to someone’ and in our case would mean ‘giving them a link to some content’ but using a ‘gift’ as a share icon didn’t make sense to me but because I believe in using what is provided in the platform, I went with the standard icon, until now.

With Windows 8 developer preview recently being available for download, I of course installed it and played with it. I did notice they did have the functionality to share things but they did not use the standard share icon (the gift) as in Windows Phone.  Considering Windows Phone uses the Metro Design Language and Windows 8 also uses the Metro Design Language, I found it strange that a new icon was used.

This icon is the Open Share Icon by Shareaholic or at least looks very similar to it.

So what is a developer to do again?  Well, since I did not like the ‘gift’ share icon I decided to start using this icon in our Windows Phone apps instead of the ‘gift’ icon.  Yes, this does go against my previous advice of being consistent on the platform but rules are meant to be broken!  I’m pretty confident that changing the ‘share icon’ on Windows Phone will not cause any confusion with users but I’ll have to wait and see.  I’m also assuming since Windows 8 uses Metro and Windows Phone uses Metro, I think they will align everything properly in terms of the Metro Design Language (let’s hope they also bring the OSes together since Win8 will support ARM!)

Now if you want to use this icon you can download it at the Open Share Icon website.  If you want to include it in your Windows Phone app, here is a share icon you can use in the Application Bar. If you read my article on ‘Theme Aware Icons’ you can also use this piece of XAML within a page which essentially renders a Path

<Path Data="M23.8306,18.3706C21.1596,18.3706,18.9946,20.5296,18.9946,23.1906C18.9946,25.8526,21.1596,28.0126,23.8306,28.0126C26.5006,28.0126,
28.6666,25.8526,28.6666,23.1906C28.6666,20.5296,26.5006,18.3706,23.8306,18.3706 M34.0216,23.5926L34.0276,23.5936C33.0816,23.5936,32.3126,
24.2496,32.0976,25.0006C32.0856,25.0556,32.0736,25.1096,32.0606,25.1626C32.0566,25.1776,32.0546,25.1916,32.0526,25.2066L32.0506,
25.1986C31.1486,28.8886,27.8106,31.6266,23.8306,31.6266C22.1136,31.6266,20.5166,31.1176,19.1826,30.2406C18.8596,30.0216,18.4696,29.8926,
18.0486,29.8926C16.9356,29.8926,16.0346,30.7916,16.0346,31.9026C16.0346,32.5976,16.3896,33.2126,16.9306,33.5726L16.9296,33.5726C18.9066,
34.8826,21.2786,35.6446,23.8306,35.6446C29.1686,35.6446,33.7236,32.3066,35.5116,27.6106L40.7556,27.6106L40.7556,23.5926z M23.8306,
14.7536C25.5816,14.7536,27.2096,15.2846,28.5596,16.1936L28.5606,16.1916C28.8806,16.4046,29.2646,16.5286,29.6786,16.5286C30.7906,16.5286,
31.6926,15.6286,31.6926,14.5196C31.6926,13.7886,31.2996,13.1486,30.7156,12.7976C28.7406,11.4956,26.3746,10.7366,23.8306,10.7366C18.4916,
10.7366,13.9376,14.0756,12.1486,18.7706L6.9056,18.7706L6.9056,22.7896L13.6686,22.7896C14.5856,22.7736,15.3316,22.1426,15.5566,21.4136C15.5736,
21.3356,15.5916,21.2576,15.6096,21.1806C15.6106,21.1796,15.6106,21.1786,15.6106,21.1776C16.5166,17.4906,19.8526,14.7536,23.8306,14.7536" 
Fill="{StaticResource PhoneForegroundBrush}" Height="24.908" Stretch="Fill" Width="33.85" UseLayoutRounding="False">
    <Path.Clip>
        <RectangleGeometry RadiusY="0" RadiusX="0" Rect="0,-1,48,48">
            <RectangleGeometry.Transform>
                <MatrixTransform Matrix="1,0,0,1,-6.90560007095337,-10.7365999221802"/>
            RectangleGeometry.Transform>
        RectangleGeometry>
    Path.Clip>
Path>

So what do you think, is it a good idea to deviate from the standard platform share icon?  Share your thoughts via comments here or via twitter @MarkArteaga!

I have been working on a couple of mobile projects on different platforms that deal with sharing content with social networks.  Unfortunately every platform has a different icon and there are two standard ones that are used on the web.  Here is a list of all the icons I feel are standard out there both on the web and on mobile platforms

Platform	Icon	Description
Web		Share Icon Project which seems to be the one most everyone uses.  I’m sure most are already familiar with this icon and is pretty standard.
Web		Share icon which was created by Shareaholic which is called the Open Share Icon.  I was not very familiar with this icon until I noticed it on Windows 8.
iPhone		On the iOS platform (iPhone and iPad) seems developers have gravitated towards the Share Icon Project icon.
Android		On Android, seems there is a mix of icons used and uses both the Share Icon Project icon and it’s own icon with a ‘circle with two arrows pointing up’.
Windows Phone		On Windows Phone, well they don’t use any of the ‘standard’ icons and went their own way also.  This never really made sense to me as to why they did this but it is what it is.

So what is a developer to do?

Well here is my advice, use whatever is standard on the platform, that is what most users will be familiar with and comfortable using.  I think you want to keep users comfortable with your application and not deviate from the norm on the platform.  You want to keep that user experience consistent and make your application feel as though it’s a part of the platform and not something that has just been shoved into the platform from a port.

What do you think?  Agree? Disagree? Let me know! Feel free to contact me here or via twitter @MarkArteaga!

In a previous post I talked about how sometimes when selecting text when cutting and pasting on Windows Phone, the text might not be visible because the brushes where changed potentially leading to unreadable text.

Another issue I have encountered is when dealing with images.  Sometimes your design calls for adding metro style icons to your page instead of using the Application Bar which is fine, but as developers, we have to be aware that Windows Phone provides both Light and Dark backgrounds when a user customizes their Theme.  This can lead to some undesirable experiences for the user.

The Wrong Way
The first way most will go about and do it is by using an image on a button.  For example, lets say you have a button with an email icon on it as follows.

All looks good, but what happens when the user switches to the Light Background?  Using the Device Tab in Expression Blend, we can easily switch the background color and see that the icon is no longer visible.

Switching to Light results in the following

You’ll notice the button border is still visible, but our icon is not anymore.

How to fix?
The easiest way I find to fix this is by using paths.  With Expression Blend you can either create your own paths or import Adobe Illustrator or Photoshop files into your page.  If you like you can create the paths manually, but that can be a little of tedious process so the importing feature comes in handy!

So if we select the ‘email icon’ available, we will get the following path in XAML which essential translates to the email icon

<Path Data="F1M372.2549,480.7969L372.2549,470.1369L380.8289,476.8239C381.0519,476.9959,
381.3179,477.0819,381.5829,477.0819C381.8469,477.0819,382.1109,476.9959,382.3329,
476.8259L391.2659,469.9019L391.2659,480.7969z M390.6919,467.2499L381.5849,474.3089L372.5359,
467.2499z M392.4859,464.8029L371.0289,464.8029C370.3559,464.8029,369.8089,465.3499,
369.8089,466.0259L369.8089,482.0199C369.8089,482.6949,370.3559,483.2439,371.0289,
483.2439L392.4859,483.2439C393.1629,483.2439,393.7119,482.6949,393.7119,
482.0199L393.7119,466.0259C393.7119,465.3499,393.1629,464.8029,392.4859,464.8029" 
Fill="Black" Height="18.441" Stretch="Fill" Width="23.903" HorizontalAlignment="Right" 
Grid.Row="1" UseLayoutRounding="False" VerticalAlignment="Top"/>

So now to make the path visible in either theme, you will have to set the Fill Property of the path to PhoneForegroundBrush.

Add this path as the ‘Content’ of your button instead of the image, and when switching themes, the path will visible in either Light or Dark background color as follows

Why Bother?
For me there are two reasons to bother.  First one being user experience.  If your images disappear because of user settings, it’s not the best experience and doesn’t make for a professional looking app.  The second reason, your app may fail certification if this happens.  The Windows Phone Marketplace ingestion team does look at theme awareness making sure apps adhere to themes on the device.  We did fail one app once because of images disappearing (this is why I’m sharing this tip ) so make sure you test in both Light and Dark backgrounds.

Hopefully this tip helps you, moral of the story is test your application in both the Light and Dark backgrounds to bring that right user experience and hopefully not get stung by this on marketplace cert testing.

With the recent update for Windows Phone 7 (aka NoDo) finally starting to make it everywhere figured it was a good time to share something I’ve noticed with some apps dealing with the new feature of Copy & Paste.  Since most of you reading this are probably developers, you should also be aware there is also a Windows Phone 7 developer tools update to accompany NoDo. As a developer you should be aware of this new update and make sure your apps have the proper support. 

So what’s the issue?  Usually things will work right out of the box and no re-compile/re-design will be required.  But sometimes they won’t.  I have seen some applications out there that do not work so hence the reason for this post. 

The first issue you might get is Copy & Paste in a panorama or a pivot.  If your user has updated to the new OS that has Copy & Paste and you used a text box in a Panorama or Pivot control, the user is not going to have the best experience.  Basically the issue will be as the user is trying to select more text, the pivot or panorama will try to switch items so the text box and pano or pivot will be competing for manipulation events. This could lead to a frustrated user.  Using a TextBox in a pano or pivot control does go against the design guidelines but you are not stopped from doing it.  To overcome this you will have to re-compile your application with the new tools and re-submit an update to marketplace.  Small thing to do but your customers will be happy

The second issue I found is around themes, accent colours and brushes.  Basically, with theme and accent colour the user has the option to change these to personalize their phone.  For theme the user has the option of Black or White background and for accent colour the user has 10 options. 

As the user changes the theme, foreground text, selected text highlight, selected text foreground colours will change.  These all correspond to brushes in the TextBox

1. • Foreground – The standard foreground colour for the text
   • SelectionBackground – the background colour when some text is selected
   • SelectionForeground – the foreground colour for the text when the text is selected

If you already have an app in marketplace and for some reason decided not to use the default brushes then be aware that the user may have an issue seeing the text selected.  I’ve seen a couple of instances of apps that when I select some text in the text box, the SelectionBackground is White and the SelectionForeground is also white.  This is a result of hardcoding the brushes in your application. 

If you are creating an application and don’t change any of the brushes your application will do the following when high lighting text

And if you change your brushes but don’t set them properly, you may get the following result

So how do you avoid this? Well if you are changing the default brushes just be aware of what you are changing it to.  When working on the UI of a Windows Phone application, I usually get that work done in Expression Blend.  If you are not familiar with it would probably be a good idea to get familiar with it as it could reduce your development time, Visual Studio is not the greatest tool to get a Windows Phone user interface done

So, in Blend, for the text box when selected, you will get some properties where you can change the brushes.

The image above shows the brushes for a textbox that has custom colors.  Notice the SelectionBackground and SelectionForeground are both the same colour, this causes the text not to be visible when text is selected.  This is easily overcome, and all you have to do is click on the ‘Advance Options’ square and then click ‘Reset’

Now, you can either ‘Reset’ or make sure the colours are not the same.

And that’s it!  Not very exciting and small things, but it’s the small things that users remember and complain about! Something to definitely think about to deliver that great user experience to your customers on Windows Phone!

I recently blogged about my views on Windows Phone 7 Design and the Metro Design Language.

If you are building applications for Windows Phone 7, you may want to take a look at the design resources available on MSDN which will give both the developer and designer a good overview of the Metro design language.

One thing to note is you do not have to follow the design guidelines as they are only that, guidelines.  There are no Windows Phone 7 Marketplace certification rules that state that the design guidelines must be followed.  What is recommended is that the guidelines are followed so a consistent user experience is delivered to the customer and allows your app feels a part of the Windows Phone 7 platform.  The last point really depends on what type of application you are building, the guidelines may not fit if you are building an XNA game.

Here is a list of design resources available for Windows Phone 7 available on MSDN

UI Design and Interaction Guide for Windows Phone 7
Windows Phone introduces a touch user interface (UI) based on a design
system codenamed Metro. This guide provides detailed information about UI elements and controls, UI system behaviors, and the interaction model for the touch interface. Designers and developers should read this guide to learn the dos and don’ts of UI implementations for their Windows Phone applications.

Windows Phone Design System - Codename Metro
A visual explanation of the inspiration behind the Windows Phone design system codenamed Metro, the seven areas of Windows Phone differentiation, and the Red Threads that are the principles Microsoft used to guide the experiences built into Windows Phone.

Design Templates for Windows Phone 7
A collection of 28 layered Photoshop template files that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. These design templates showcase many controls that are a part of the Windows Phone Developer Tools Beta. They also include examples of controls that are a part of Windows Phone, but are not available as a part of the Windows Phone Developer Tools. These additional templates are included to help designers and developers maintain a consistent look and feel across applications for system controls that developers wish to mimic. Templates in the download: Application Bar & Application Menu, Buttons, Check Box, Context Menu, Date Picker, Dialog Boxes, Edit Control, Hardware, Icons, Keyboard & Input, List Picker, List View, Panorama, Panorama Backgrounds, Picker Box, Pivot, Progress Indicators, Quick Jump Grid, Radio Button, Reminders, Slider, Start & App List, Start Tiles, Status Bar, Theme, Time Picker, Toast Notifications, Toggle Switch

The one that may be of most interest (and newest) is the Design Templates for Windows Phone 7 which are 28 Photoshop templates to create your Windows Phone 7 user interfaces using a graphics tool instead of Visual Studio 2010. If you are looking for more design resources on Windows Phone 7 check out David Crow’s post here.

If you are looking for the Windows Phone 7 Application Bar Icons, these are now installed with the Windows Phone 7 SDK and you’ll find it under %ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Icons.