Archives For UX

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

appbar.share.rest

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. Continue Reading…

The Share Icon

October 27, 2011 — 1 Comment

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_ShareIconProject 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 Share1 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.image_thumb107
iPhone Share_ShareIconProject On the iOS platform (iPhone and iPad) seems developers have gravitated towards the Share Icon Project icon.
Android AndroidShare_ShareIconProject 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 appbar.share.rest_thumb[2] 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.

image

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.

image

Switching to Light results in the following

image

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!

image

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

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

image

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

image

image

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 Smile) 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 Smile

imageThe 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

        • 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

image

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

image

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 Smile

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

image

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’

image

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 7image
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.

A few months back, the Windows Phone developer team released a set of standard icons for use in your application.  Essentially these icons can be used in the Application Bar.

This was in March 2010 but since then the Windows Phone 7 Developer Tools Beta has been released and with that the icons are now included as a drop down option in Expression Blend which makes the creating your UI a little easier.

image

At MIX2010, during the Windows Phone UI and Design Language session the following slide was shown which had a few extra icons.

image

I needed the ‘car’ icon but wanted it in vector form so I could resize nicely.  So I converted these images to Illustrator format to be more easily used. 

Seeing David Crow’s post on Open Source Icons I figured might as well release the ones I have.  One warning, I’m no expert at making these things and did use a tool to get it in vector format.

In any case, you can download the icons here.

During MIX10 I saw a session called Windows Phone UI and Design Language by Albert Shum, Michael Smuga and Chad Roberts who are part of the design team for Windows Phone 7.  The design language is called “Metro” and here is the philosophy behind it

METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.

Being a long time developer for Windows Phone and Windows Mobile I found this session a welcoming change to the existing platform and should allow Microsoft to better compete in the mobile market space.

If you want to get a good idea on what the whole design philosophy of Windows Phone 7 I recommend you check out the MIX10 session.

Some of the key takeaways for me during this session are

  • Inspired by the transportation/metro system (or subway) where signs are easy and quick to read. 
  • The design is simple and clean and makes use of iconography, typography and strong colours
  • Use bold strong colours to represent hierarchy in your content
  • Use motion and animation to bring content to life (but don’t over do it 🙂
  • Also inspired by Microsoft assets such as XBox and Zune

Metro is the design language and is derived from a set of principles which are (min 7:20)

  • Clean, Light, Open, Fast
  • Celebrate Typography
  • Alive in Motion
  • Content, Not Chrome
  • Authentically Digital

Essentially this session describes the Metro design language and how to incorporate these design aspects into your mobile application.  This doesn’t mean that you have to follow these design principles but it will help in making your applications feel a part of Windows Phone platform and minimizes the learning curve to the user for using your app.

Below is my interpretation on parts of the Metro design language and it’s principles. 

Key Areas

Metro is grounded on two key areas

  1. The Individual and how do they do things they need to get done
  2. Organization and how do you find ‘stuff’

The Start experience is centered around this.  It’s centered around the individual and organizing the data and applications.  The left one is ‘Glance & Go’ and the right side is ‘Get me There’.  There is your app!

Picture1 Picture2

The ‘Panoramic Experience’ breaks out of the frame of the phone.  Most apps are constrained to bounds of the screen but the ‘Panoramic Experience’ allows you to create a more immersive experience and present your data in a unique way.  The ‘Panoramic Experience’ allows the user to scroll from horizontally to view different sections and then the sections you can scroll vertically. 

image

Clean, Light, Open, Fast (min 7:38)

ArrowDark

Feels Fast and Responsive

ArrowDark

Focus on Primary Tasks

ArrowDark

Do a Lot with Very Little

ArrowDark

Fierce Reduction of Unnecessary Elements

ArrowDark 

Delightful use of whitespace

ArrowDark 

Full bleed canvas

Essentially here you want to make your application experience simple and intuitive.  Put on the screen only what the user needs and reduce unnecessary elements from your design.  This may take multiple iterations when designing your app.  Considering  you are on a smaller screen and not on the desktop this is something to keep top of mind when designing your application, get down to the core essence of want needs to be displayed.  Remember show the core content and if your user wants more you can always add more if they request it.

Celebrate Typography (min 8:42)

ArrowDark

Type is beautiful, not just legible

ArrowDark

Clear, straightforward information design

ArrowDark

Uncompromising Sensitivity to weight, balance and scale

Use typography to make your application come to life and be the center of attention.  When you want your user to focus on something, use a stronger weight or scale to attract the user to that part of the screen.  Windows Phone comes with a font called Segoe WP and comes in different styles

  1. Segoe WP Black
  2. Segoe WP Bold
  3. Segoe WP Light
  4. Segoe WP Regular
  5. Segoe WP Semibold

Now this doesn’t mean you can’t use a different font you are free to do this but try to keep some consistency to make the experience for the user a pleasant one.

Alive in Motion (min 9:40)

ArrowDark

Feels responsive and alive

ArrowDark

Creates a system

ArrowDark

Gives context to improve usability

ArrowDark

Transition between UIs is as important as the design of the UI

ArrowDark 

Adds dimension & depth

Motion and animation tends to be used a lot in mobile UIs. The Alive in Motion principle revolves around using motion and context to allow user to understand where they are, where they are coming from and where they are going.  Don’t just use motion for the sake of using motion.  Use motion to tease and engage the user as to what is next.  Motion and animation is not just to make your app fun and delightful but a way to entice the user to explore and to navigate your application.  The experience of your application is about flow and how you move and navigate within your application.

Content, Not Chrome (min 11:05)

ArrowDark

Delight through content instead of decoration

ArrowDark

Reduce visuals that are not content

ArrowDark

Content is the UI

ArrowDark

Direct interaction with the content

Allow the user to view the things that they want.  For example, if it’s a picture just view the picture when the user navigates to it.  Strip away the frames, text (ie filename) or anything else not relevant to the content being displayed.  The key here is to focus on the content that the user wants to view, use motion to help the user navigate your application, use whitespace to not overburden the user and use type to attract the user to the content or the data they want to see.

Authentically Digital (min 12:15)

ArrowDark

Design for the Form Factor

ArrowDark

Don’t Try to be What it’s NOT

ArrowDark

Be Direct

Authentically Digital brings all the above four principles into one.  The mobile phone is not a PC, Metro is a digital language and not about applying chrome or making it prettier.  The Metro language is essentially the ‘brand’ for Windows Phone 7.  Take advantage of the brand, take advantage of the design language but still try to make your application unique not just from a technology standpoint but from a design and usability standpoint. 

Conclusion

Metro is a foundation to build your mobile applications upon but don’t be limited by the design language, extend the language and build a fantastic rich experience.  Bill Buxton said, “It is not about getting design right it’s about getting the right design”.  The right design will not come from your first design but will take multiple iterations.  If you are not a designer, leverage the Metro design language when building your Windows Phone 7 applications to be part of the Windows Phone experience.  If you have a design team or are a designer; get inspired by things around you, envision and experiment with mobile designs and ultimately create fantastic applications to delight and please your customers so they continue to use your apps!

So there it is, my summary for the Designing Windows Phone 7 session at MIX.  But remember, this is my interpretation so I recommend you check out the session to get familiar with the Metro design language.  If you are new to designing user experiences I recommend Bill Buxton’s book on “Sketching User Experiences” as it goes through the process of design and thinking design.  Even if you are not a designer, it’s still a good read as it allows you to understand the design process.

Internally at RedBit we have a set of in house libraries that we have developed to help improve the user experience for projects we deliver to customers.  But sometimes using third party controls makes sense especially when you have a schedule to keep. 

Check out the controls offered by Bee Mobile as they can help in making your .NET based Windows Mobile software look a little nicer.  Check out the progress bars they have:

image

Although we have ProgressBar controls with glass effects internally one control we don’t have is an iWheel type control so I decided to give it a try

image

I’m not a big fan of making Windows Mobile look like an iPhone but the iWheel control is functional and makes things like selecting a date a lot more convenient for the user as opposed to using the standard dateTimePicker

image

The RedBit team will definitely be using the iWheel on a few projects we are working on and definitely worth the  39.95 € (About $60 Canadian).

I’ve had the privilege of using a HTC Touch Pro device (courtesy of Bell Mobility) running Windows Mobile for the past few weeks.  You are probably thinking, “great another review of the Touch Pro and HTC’s TouchFLO user interface” but I have not been using the TouchFLO user interface. 

The Touch Pro from Bell Mobility is yet to be released, but instead of using the TouchFLO home screen I have been using the ‘Bell Experience’ home screen. Bell has decided to create their own home screen for Windows Mobile providing what Bell calls the ‘Bell experience’.

The Bell experience completely customizes the Windows Mobile home screen and attempts to make things a lot easier to access, improve the user experience from the standard Windows Mobile home screen and delivers content right to your Windows Mobile device.  It also uses ‘gestures’ to slide content, scroll lists etc.

How does Bell display the content? They created what are called Bubbles, and with these Bubbles, Bell can display content selected by the user. It’s a way to quickly access content important to you.  Bell has developed this new user interface to try and promote Bell’s Mobile Entertainment offerings services that they offer for example LiveTV for Windows Mobile.  But they also have things like Headline News, Entertainment News, Business News and Music.  Here are some screen shots of it:

Headline News Bubble clip_image002 clip_image004 clip_image006 clip_image008 clip_image010 clip_image012 clip_image014

The user interface also allows you to slide from bubble to bubble using gestures (sliding your finger across the screen) giving it a nice user interface effect.  

image

If you are not interested in the default Bubbles you have the option to select which Bubbles to display on your home screen:

image image

I also mentioned how things are more easily accessible.  What do I mean by that, well say for example you want to watch LiveTV such as HBO, CTV Newsnet or BNN (Business News Network).  By clicking on the Media Buttons you will get a screen with the option to watch live TV, internet radio, music or video on demand right from your Windows Mobile device.

image

What else makes the device a little easier to use?  Ever try to raise the volume on a Windows Mobile device?  Usually you would be presented with this

image

But with Bell’s user interface you get this with the option to quickly put it in vibrate or silent mode.

image

How about accessing your applications?  There are two ways, you can click the Menu button and you are presented with your running applications, plus groups of other applications such as Games, Photos, Email etc

clip_image002[4]clip_image004[4]

The second way is by clicking the favourite applications icon which presents you with this screen (which can be customized)

image

What else makes this device a bit easier to use?  Usually with setting up your device on Windows Mobile you are presented with the standard settings screen that comes with Windows Mobile.  (With Windows Mobile 6.1 this has been improved somewhat with a Windows Mobile Welcome Center)

image

The Bell experience user interface simplifies this by giving you a settings screen followed by some items in a list to modify your device settings:

clip_image002[6]clip_image004[6]clip_image006[4]clip_image008[4]

 

In summary I think Bell has done a pretty great job in improving the user experience on Windows Mobile.  It shows how flexible Windows Mobile is as a platform and allows developers, OEMs and wireless providers such as Bell Mobility to provide a unique user experience to users.  It also allows Bell Mobility to up sell their services such as Live TV.

I’ve been showing the device at my Windows Mobile TechDays Canada Sessions (so far Toronto and Montreal) and will be bringing it to the rest of the cities.  This device has not yet been released so if you want to see it let me know.

There has been a lot of talk about how the Windows Mobile user interface is just not up to par with mobile devices such as the iPhone.  As developers we cannot change the Windows Mobile user interface but we do have the opportunity to differentiate our applications from the competition or to just add a little “eye candy” to improve our applications user experience. 


So how do we get this done on Windows Mobile?


Well not being a graphics expert I decided to search the web. First thing I did is figure out how to implement a ‘glass effect’ using Paint.Net and found this post on how to make ‘glass buttons’.  Now that I had the knowledge on how to create a glass button using a graphics program I could try and implement in code.


Before I did that I searched for any existing code on the desktop.  I found an article on Code Project which uses GDI+ on the desktop to create a glass button and works great.  Using the knowledge form Alex Feinman’s article on Using GDI+ on Windows Mobile I was able to port the desktop code to Windows Mobile.


The glass button sample accompanying this post just draws on the main form and uses a panel for the bounds of the ‘button’ and checkboxes to set different states for the button.


In the interest of time, I did not implement a full glass button control and I’ll leave it up to you to implement a control possibly using the gradient button for Windows Mobile available on MSDN as a starting point.  Now that you have the knowledge (and code) on how to paint a ‘glass effect’ on Windows Mobile this should be straight forward.


The code results in the following:



Glass Button with Enabled State
GlassButton1 


Glass Button With Hovered State (or Focused)
GlassButton2 



Glass Button with MouseDown State
GlassButton3 


Although this will add some eye candy to your Windows Mobile application, there are a few caveats:



  1. The glass button sample code doesn’t really create a button control but just draws and blits to the screen
  2. GDI+ is only support on Windows Mobile 5+ with touch screens which means this code will not work on SmartPhone (or non-touch screens 🙂 )
  3. GDI+ on Windows Mobile is too slow IMO but caching the bitmaps should help.

So there you have it, glass effect on Windows Mobile.  I’ll be following up with some more posts on some techniques I’ve used in the past to give Windows Mobile applications a nice UI instead of the standard ‘grey controls’.