Stay Geeky, Stay Nerdy or Stay Connected - You Decide#

What a title and you are probably thinking “what the hell is this about”!  First a little background. 

There is the Dos Equis brand of beer and the main “star” of the beer commercial is known as “The Most Interesting Man in the World”.  Cracks me up whenever I see these commercials. 

Now, if you follow my blog regularly or follow me on Twitter, you know that I write about mobile happenings primarily on Windows Mobile and lately focusing on Windows Phone 7.  Recently, I read a forum post from Brandon Watson, Director of Developer Experience for WP7, and he ended off his post with

“Stay Nerdy My Friends.”

I’ll be doing quite a few presentations & training this year on Windows Phone 7 and instead of just having a standard “Q & A” slide that just says “Q & A” I decided to use a derivative that says

“Stay Geeky My Friends”

In an email thread with Brandon, he prefers “nerdy”.  The people I have asked are split 50/50 on “geeky” vs “nerdy”. Speaking to Anthony Bartolo (aka @WirelessLife) he said since we are in the business of keeping people connected why not use

“Stay Connected My Friends”

Here is what it would look like in a power point slide

image imageimage

So we’ll let you decide! Brandon, Anthony and I want to know what you like.  We are running a poll to decide on “Stay Nerdy My Friends”, “Stay Geeky My Friends” or “Stay Connected My Friends”.  We’ll be running it for a few days so be sure to cast your vote!


Tuesday, July 27, 2010 3:10:16 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Windows Phone 7 Design Resources#

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.


Tuesday, July 20, 2010 1:11:05 AM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

More Windows Phone 7 Metro Style 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.


Friday, July 16, 2010 3:22:08 AM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Windows Phone 7 Marketplace Certification#

If you are developing applications for Windows Phone 7 you might want to check out the Windows Phone 7 Application Certification Requirements document that is available and read through it. 

image

Here are a few items that I think may be potential gotchas when getting your app certified for Marketplace

  • 4.1.1 List of Package Requirements
    The maximum size of the XAP package file is 500 MB.
  • 5.1.1 Multiple Devices Support
    The application must run on any Windows Phone 7 device, regardless of model, screen size, keyboard hardware, and manufacturer.
  • 5.1.2 Application Termination
    The application must handle exceptions raised by the .NET Framework and not terminate unexpectedly. During the certification process, the application is monitored for unexpected termination. An application that terminates unexpectedly fails certification.

    When handling exceptions, an application must provide a user-friendly error message. You may present a message that is relevant to the context of the application or use a Microsoft provided error message. The application must continue to run and remain responsive to user input after the exception is handled.

    An application that displays generic or unhelpful error messages will fail certification.
  • 5.1.3 Application Does not Hang
    The application must not become unresponsive to user input because of an operation within the application. For time consuming activities such as downloading data over network connections, the application must display a visual progress indicator. When there is a visual progress indicator, you must implement a UI element that provides the user with an option to cancel the time consuming activity.
  • 5.2.1 Launch Time
    • The application must render the first screen within 5 seconds after launch.To meet this requirement, Microsoft recommends that the application provides a splash screen image in a file called SplashScreenImage.jpg in the root of the XAP package.
    • Within 20 seconds after launch, the application must be responsive to user input.
  • 5.2.3 Use of Back Button
    • Pressing the Back button from the first screen of an application must exit the application.
    • Pressing the Back button must return the application to the previous page. If the current page displays a context menu or a dialog, the pressing of the Back button must close the menu or dialog and cancel the backward navigation to the previous page.
  • 6.2 Push Notifications Application
    • 6.2.1 Configurable Functionality
      In the UI or settings menu, the application must provide the user with the ability to independently disable toast or tile notifications.
    • 6.2.2 Initial Push Notifications Functionality
      On first use of HttpNotificationChannel.BindtoShellToast or HttpNotificationChannel.BindToShellTile methods, the application must ask the user for explicit permission to receive Push Notification Service.
  • 6.3 Applications Running under a Locked Screen
    • 6.3.1 Configurable Functionality
      In the UI or settings menu, an application must provide the user with the ability to prevent the application from running under a locked screen.
    • 6.3.2 Launch Configuration of Running under a Locked Screen
      On first use of ApplicationIdleDetectionMode, an application must ask the user for explicit permission to run under a locked screen.

These are the things that jump out at me that could potentially have your application fail certification.  Have you started preparing for certification?  Anything else jump out?  Comment below or ping me via twitter.com/MarkArteaga.


Friday, July 16, 2010 2:51:31 AM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Will Windows Phone 7 Succeed#

I just finished reading an article titled Windows Phone 7: Don’t Bother with this Disaster.  Interestingly enough, the author has done a huge about-face from his previous article Why I Like Windows Phone 7 (so far).  This whole blog post is basically to try and address his comments (and other BS I’ve been hearing/reading) and why I think Windows Phone 7 will succeed and will get market share (remember current market share is 0% so it has to go up some what :)

Kill Windows Phone 7
The author starts the article with saying

“Windows Phone 7 is a waste of time and money. It's a platform that no carrier, device maker, developer, or user should bother with. Microsoft should kill it before it ships and admit that it's out of the mobile game for good. It is supposed to ship around Christmas 2010, but anyone who gets one will prefer a lump of coal. I really mean that.”

Device makers are on board because now Windows Phone is using the desktop model to sell the OS, and we all know how successful that is!  Now, all device makers (OEMs) have to worry about is the hardware and innovate on the design. 

Microsoft has a set of specs that they must adhere to if they want to use the OS.  In reality, this makes the OEM focus on what they do best, create hardware.  In the past, with previous Windows Phone versions, they had entire teams to customize the Windows Mobile OS which means the cost to release hardware with Windows Phone was huge! 

You have hardware partners like Dell, Garmin-Asus, HTC Corp., LG, Samsung, Sony Ericsson and Toshiba coming on board.  Carriers such as AT&T, Deutsche Telekom AG, Orange, SFR, Sprint, Telecom Italia, Telefónica, Telstra, T-Mobile USA, Verizon Wireless and Vodafone are also on board.  Read below to see if developers are on board the platform.

Windows Phone 7 User Experience

“Seeing the UI in action across several tasks, not just in a highly controlled presentation, shows how awkward and unsophisticated it is…”

The phone has not even shipped and till recently only a very small set of internal Microsoft employees had the phones.  I saw the phone and played with it back in February and at first, was not impressed with the performance but attributed that to being an extremely early build.  At MIX2010 I saw the phone again and played with it and noticed improvements and the same thing at TechEd 2010.  My most recent encounter with the phone was at a Windows Phone 7 Workshop I did with Microsoft Canada and the improvements were outstanding, and it still wasn’t full production software.  I didn’t find it awkward at all, and neither did other attendees.

The new user experience for Windows Phone 7 is just that new! The whole point of the Windows Phone 7 design is less is more.  Considering the author first liked the UI when he first saw it and now considers it ‘clunky’ is strange considering it’s essentially the same from March 2010.

The author also talks about panorama mode and pivot mode and users not getting the ‘cut off text’ which signifies ‘more is available’.  If all you do is use an iPhone, no you might not get it until you use a Windows Phone 7.  I have actually implemented some panorama concepts to demo to potential customers interested in the Windows Phone 7.  Here is something running in the emulator (I’ve blurred out some parts that would identify the customer) but it’s obviously a weather app using the panorama model.  Notice the ‘hanging’/’Cut off text’ on the left'.

image

They didn’t ‘get it’ when I showed the concept in Power Point but when they saw it running, the just ‘got it’.  Before I showed the customer, I actually showed my wife (who hates all this technology and would rather use pen and paper) and just told her ‘try to use this app’.  She saw ‘cut off’ text and instinctually dragged her finger across the screen to see ‘what else there was’ (I do have a touch screen monitor so it makes it a bit more realistic in terms of swiping). Her reaction, “wow that’s actually pretty cool!”. (Wish I could get her to react like that more often with my work!)

So I think people will like the new user experience and pretty sure Microsoft did not just ‘come up with the design’ without going through extensive user tests.

The Unfortunate KIN
With KIN, well that was a bomb from the start and I never did get it. This is probably your best source for finding out what happened and from reading the numerous comments seems Microsoft had to release something because of ‘contractual obligations’.  I never understood the KIN and glad it’s gone but the same will not happen to Windows Phone 7.

No Compelling Third Party Examples for Windows Phone 7
Author states that there are no compelling third party examples and the UI reminds him of DOS and ‘green screen days on VAX’.  I just don’t see the correlation.  If the author thinks these showcase apps from MIX10 remind him of the ‘green screen days on VAX’ something is wrong.  Just take a look at the AP Mobile for Windows Phone 7, graphic.ly comic books, FourSquare for Windows Phone 7 or the games that you can play and build on Windows Phone 7.  Doesn’t look like DOS or VAX to me.

As for only now starting to develop third party apps for the Windows Phone 7 the author should really get his facts straight.  Yes Windows Phone 7 Beta tools were released July 12 2010.  But CTP tools have been available since March 2010 and since then Windows Phone 7 developer tools have been downloaded over 200,000 times.  Considering there is not even hardware available to third party developers, this is pretty impressive.  You even got high school kids getting into the action!  Plus imagine all the companies that are keeping things secret.

Inexcusably old technology limits Windows Phone 7
Some things make sense but most is just non-sense.  I’ll dissect each.

Web Browser 
Yes it should have HTML5 support.   But let’s face it HTML5 is still in development, hardly any (if any) websites are leveraging HTML5 and IE9 is in ‘Platform Preview’.  From my experience with previous IE Mobile browsers on Windows Mobile, the IE Mobile browser on Windows Phone 7 is ready for prime time. 

Multitasking
Here we are talking about running background processes.  See my post on Windows Phone 7 and multitasking and Doug Boling’s blog on the topic.  With the new Windows Phone 7 Beta tools, things have changed and bring it more in line with today’s definition of ‘multitasking’.

‘Inter-Application Communication’
I like to call this Inter-Process Communication or IPC and basically means third party apps can’t ‘talk’ to each other. This does require running background processes so obviously this is not available. 

Is it really required?  On previous versions of Windows Phone I have seen lots of garbage code that I would get hired to fix.  On previous versions a developer does have the option of running background processes but guess what, as you run a process in the background, that is running code which means the CPU is processing instructions which means the battery is being drained.  In the end the user is pissed off because the phone doesn’t last the entire day!  The device will always get blamed first and not the app when in reality it’s the app that’s killing the device.

Let’s face it, how many developers out there are conscious of the amount of memory they are consuming or the amount of CPU instructions they are processing.  A lot of developers are coming from the desktop world or web apps world where they don’t have to worry about that and if there is a problem just throw some more RAM in the machine or add another processor.  On mobile, any mobile platform, memory is at a premium, you can’t add more memory or another CPU and large amounts of CPU usage (ie multitasking/background processes) diminishes battery life and destroys the user’s experience with the phone.  Usually because of one app.  I don’t see to many people walking around with the phone plugged into a power outlet using an extremely long extension cord!  So for me, blocking this functionality to third party developers is a good thing and will help Windows Phone 7 succeed.

Copy & Paste
I’m undecided here, I haven’t used copy & paste on my iPhone because I haven’t required it but maybe I’m just not a ‘power user’.  Microsoft hasn’t said much about this except that the phone will have it in the future (and yes there will be a future) and there are other things available to replace copy & paste.  I believe the way the iPhone does Cut & Paste is patented (not 100% sure) but I’m sure Microsoft wants to design something unique here, possibly something like the green ‘Spot’ on the KIN (which I didn’t like).

image

Come From Behind
Microsoft is now entering the consumer ‘smartphone wars’.  Apple, Google, Nokia, RIM are already there. Microsoft was present but did not have a fighting chance with pre-Windows Phone 7 devices.

One thing to remember, Windows Mobile 6 does have market share although it has lost a huge chunk of that.  When you look at things like mobile point of sales devices or ruggedized devices (think oil field workers), what Mobile OS you think it’s running? It’s either running Windows Embedded or Windows Mobile 5 or 6.  Rarely do I see embedded Linux or whatever else there is out there. 

image

In fact, while at the Apple store in Toronto, I noticed a sales rep with a mobile point of sale device the B-PAD from Fujitsu. Can you guess what mobile OS that runs?  You guessed it, Windows Embedded CE 5.0.  Albeit Windows Embedded CE is not a consumer OS but it’s ironic that Apple is using a Microsoft mobile OS to power their sales reps on the sales floor (don’t know if they still use it). 

Will Windows Phone 7 come from behind, I don’t know.  But with $1B to boost mobile efforts, support to make Windows Phone 7 a success coming all the way from the top, developer excitement, large development shops coming on board to develop for the platform (BTW that’s the part I hate :) and amazing tools like Visual Studio, Expression Blend and Silverlight I think they have a fighting chance.

It’s the new ‘smartphone wars’ and there will be a winner, will it be Microsoft similar to what they did with the browser wars?  Maybe.  Will Microsoft get market share similar to the desktop world?  Probably not but they will most likely get a big chunk.  With the cloud, desktop, TV/XBox, and mobile Microsoft has a pretty compelling offer.  All I know is this is most likely Microsoft’s last chance at being a contender in the mobile space and they are throwing everything they have at it.

What are your thoughts? Is the original article right? Is he completely off base?  Have feedback on what I have to say?  I really want to know so either comment below, contact me via my blog or twitter.com/MarkArteaga.


Friday, July 16, 2010 1:22:38 AM (Eastern Daylight Time, UTC-04:00) #    Comments [8]  |  Trackback

 

Custom Fonts In Windows Phone 7 With Expression Blend#

In my previous post I went through how to use custom fonts in a Windows Phone 7 application using Visual Studio.  In this part I’ll go through how to use Expression Blend for Windows Phone to leverage custom fonts.

Expression Blend is primarily used for designing your applications and offers a more intuitive interface to help design your Windows Phone 7 applications.  I don’t use it to code and fall back to Visual Studio when code needs to be written. Unlike Visual Studio, it also renders any custom fonts you are using in the visual designer so you get a better representation of what your application will look like.

In Expression Blend, you can change the FontFamily property using the properties tab as follows

image

Here I changed ‘page name’ TextBlock and you will notice it will render in the visual designer nicely

image

But when deployed to the emulator the font will fallback to the Segoe WP default font

image

As you can see, the TextBlock that we added in the previous post is using the custom font but the ‘page name’ falls back to the regular font.

In the following steps, I’ll outline how to fix this building off the project from the previous post but instead we’ll use Expression Blend.

Using Expression Blend & Custom Fonts

IN the following steps, I’ll go through making the custom font a resource so it can be leveraged in other controls within the Windows Phone 7 application.  Making the font as a resource allows you to easily reference the font on other controls.  So instead of copying FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch" everywhere, you simply point it to your static resource. 

  1. First thing we want to do is open up your project using Expression Blend for Windows Phone
  2. Open MainPage.xaml in design view
  3. Within Expression Blend (two ways)
    1. in the menu click on View –> Active Document View –> Design
    2. Click on the view icon in the designer
      image
  4. Click on the TextBlock that was added in the previous tutorial (Text property should be “Sample Text Font”)
  5. In the Properties Tab expand up the Text section to see the selected font
    image
  6. Beside the FontFamily combo box you will notice a ‘white box’, click on this to view the Advanced Options
  7. Click on Convert to New Resource
    image
  8. This will bring up a dialog called Create FontFamily Resource as follows
    image
    Here you have the option of
    1. Creating a local Resource (only useable by MainPage.xaml)
    2. Creating an application resource in app.xaml (useable throughout your entire application)
    3. Creating a Resource Dictionary (creates a separate resource file)
  9. Change the name to BuxtonSketchFont
  10. Select the Application radio button.  Your dialog should look like this
    image
  11. Click OK
  12. You will notice the FontFamily combo box is now highlighted green which means the property is using a resource.  If you open up App.xaml in XAML view, you will also notice the following added
  13. <Application.Resources>
        <FontFamily x:Key="BuxtonSketchFont">.\Fonts\BuxtonSketch.ttf#Buxton Sketch</FontFamily>
    </Application.Resources>
    
  14. Click on the Page Title TextBlock
  15. Open the advance options in the FontFamily combo box
  16. In the popup menu select Local Resource –> BuxtonSketchFont

    image
  17. You will notice the ComboBox highlight to green to signify it’s using a resource
  18. Run the application in the emulator (you can do this from Expression Blend by pressing F5).  If done correctly, your emulator should now render the following (Notice Page Name now uses the BuxtonSketch font) 
    image

There you have it, using custom fonts in Windows Phone 7 applications.  Of course you don’t have to use custom fonts and can just use the default Segoe WP font.  But you never know when a customer might say ‘hmmm…don’t like that font, what else you got?”

Questions, ping me via this blog or via twitter @MarkArteaga or just add a comment!


Tuesday, July 13, 2010 5:21:33 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Custom Fonts in Windows Phone 7 Application#

While working on a Windows Phone 7 project, I got a customer request to use a custom font instead of just the Segoe WP font that is included with Windows Phone 7.

I have done this before on Windows Mobile so I’ll re-cap how to do it pre Windows Phone 7.

  1. Get the True Type Font (TTF) you want on your Windows Mobile device
  2. Copy the TTF File to the Windows directory
  3. Reset the device

We have automated this process through a custom a setup DLL (which is native code) with an installer and alleviates the pain for the customer to do this manual process.  But still somewhat of a pain to automate this process.

Using Silverlight for Windows Phone 7, this process is simplified and considering as a third party developer you don’t have access to the file system or the ability to write native code this is a good thing.

Here is a quick tutorial on getting this working with Visual Studio Express for Windows Phone 7.  In this tutorial I’ll be using the standard Windows Phone 7 project that comes with Visual Studio.

Adding Custom Font With Visual Studio

The first thing you need to do is create a Fonts folder in your project as follows

  1. Within the Solution Explorer right click on your project
  2. Click Add –> New Folder

    image

  3. Name the folder to Fonts
  4. Add your custom font here.  (For the purpose of this blog post I will be using the BuxtonSketch.ttf)
  5. Right click on the font and click on Properties and change the Build Action to Content
  6. Your Solution Explorer should look something like the following
    image

Now that we have the font in our project we need to use the font with the application.

  1. Within Visual Studio, open MainPage.xaml and view the page in XAML mode
  2. Find the ContentGrid within the XAML
  3. Add a Textblock to the ContentGrid
  4. Set the Size property to 48
  5. Set the Text property to Sample Text Font.  Your XAML should look something like this
    <Grid x:Name="ContentGrid" Grid.Row="1">
    

    <TextBlock FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0"
    Name="textBlock1"
    Text="Sample Text Font" VerticalAlignment="Top" />

    </
    Grid>
  6. Now we need to set the font.  Add the FontFamily attribute to your Textblock
  7. Set the value to .\Fonts\[YOUR_TTF_FILE].ttf#[FONT_NAME] .  If BuxtonSketch.ttf is being used then it should be as follows .\Fonts\BuxtonSketch.ttf#Buxton Sketch.  Your XAML should now look similar to the following
    <Grid x:Name="ContentGrid" Grid.Row="1">
    

    <TextBlock FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch"
    FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0" Name="textBlock1"
    Text="Sample Text Font" VerticalAlignment="Top" />

    </
    Grid>
  8. Run the application in the emulator and you should get something as follows. image

You should be able to embed any True Type Font within your Windows Phone 7 application.  In the next post I’ll follow up on how to use custom fonts with Expression Blend.


Tuesday, July 13, 2010 3:39:12 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Microsoft MVP Award for 2010#

After taking a few days off for Canada Day I completely forgot that my MVP Award Cycle was in July.  Well it was good to check my email and get the notification that I have been awarded again for Device Application Development for contributions to the Windows Phone developer community. See this post on details for the MVP award program

This makes it year six as an MVP.  With all the changes to Windows Phone and Silverlight for Windows Phone I think this will be an exciting year! 

I still think I’m the only Windows Phone developer MVP in Canada, if I’m not let me know!


Monday, July 05, 2010 4:44:33 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

Windows Phone 7 Design and Metro#

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.


Friday, July 02, 2010 10:01:07 PM (Eastern Daylight Time, UTC-04:00) #    Comments [0]  |  Trackback

 

All content © 2010, Mark Arteaga
Related Sites
Archives
Sitemap
Disclaimer

Powered by: newtelligence dasBlog 1.9.7174.0

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Send mail to the author(s) E-mail

Theme design by Jelle Druyts