| Comments

One of the biggest discussions I started getting into when Windows Phone development was announced to the world was sparked with this single question I posed to our internal Windows Phone developer teams:

What is the use case for when you would want to use a Pano versus Pivot application layout?

I asked this in the context of an application for Yelp that I was writing.  Information was similar but not identical.  It was only similar in the sense that the data was all about user reviews and venues.  In my eyes I saw this like the fact that games are similar in that they are games, but their individual information (the play) is different.

I guess I was expecting a definitive or clear view on when to use either given my use case I presented.  I laughed as I collected numerous various viewpoints from all areas of the dev platform folks.  It was clear there was no clarity for me.  I actually have saved the most concise definition the discussion generated and had been wanting to blog about it for a while.

Today, Jaime released a bunch of videos from a ‘design days’ event that was held in Redmond for Windows Phone developers.  They are all great, but there was one that caught my eye: Windows Phone Design Days – Pivot and Pano.  In this video a few UX researchers walk through some of the key tenets of each control.  Here’s some of my mental notes:

Pivot

  • Application view manager
  • Filter same data on different views (the “inbox” is a great example of this)
  • Optimized for current screen size
  • Filter of data doesn’t have to be same view (agenda/day)
  • Related content is ok to pivot on as long as related content is truly related
  • Focused

Panorama

  • Horizontal broad canvas, not confined to current screen size
  • A ‘top layer’ view into underlying experiences/tasks
  • Exploratory in nature
  • Don’t use if you need an application bar
  • Don’t have a pano that takes the user to a pivot control constantly
  • Leverage things inherently interesting (use ‘about me’ type information)
  • Never place a pano *in* a pivot

There was some good information in this video (like don’t use pivot/pano for wizard-based UI) and one of the better descriptions/examples of answering my root question.  The other videos are great and I encourage you to take a look at them.

I’d encourage you to take a look at all of these videos to get a good sense on some of the user experience research done for Windows Phone developers and how you can learn to target a great experience in your app/game.

| Comments

The user experience team for Silverlight is looking to get some feedback on some of their latest designs for Silverlight application templates and perhaps more.  Instead of getting this feedback only internally, I thought it would be good to help them get external feedback as well from people using our platforms.

You don’t have to go anywhere and don’t have to leave the comfort of your own home.  They’d like about 30-45 minutes of your time online to talk and take a look at things.  You’ll be an early previewer of these designs and can help shape how developers and designers leverage them in their applications.

NOTE: Since you’d be previewing early work that hasn’t been disclosed, you may be required to agree to a non-disclosure agreement.

As a thanks for providing your feedback, you’ll be able to receive some software – contact the organizer below for details on that as I don’t have them right now.  Here are the requirements to participate:

  • You are NOT a software developer/programmer
  • You do not have any software development background
  • You are not a designer (visual, graphic, interaction etc)
  • You do a lot of web browsing, read content online and watch media content online
  • You don’t work for Microsoft :-)

I know this sounds weird posting this here – as I’m basically asking for non-geeks :-).  But I believe this exercise would help you as a developer/designer get your customers understanding how design impacts applications.  Please encourage your consumer friends and customers to participate.  If you are interested in participating in the study, please contact Vidya at [email protected] with the following details: Name, occupation, number of hours web browsing you do per week, and top 3 common sites you visit.  This is first come, first serve participation.

Thanks for helping the Silverlight team make our products and framework better!


This work is licensed under a Creative Commons Attribution By license.

| Comments

One of the features that a lot of developers seem to enjoy is the out-of-browser feature in Silverlight.  This is the feature that allows you to take your Silverlight application and run it like a desktop application (without some of the trust levels right now).  If you aren’t familiar with the feature, take a moment and familiarize yourself with it…here’s some info:

Now that you have some basis of understanding, allow me to share a thought I’ve had.  I’m seeing a few people wanting to force the out-of-browser (OOB) experience.  That is to say, they want their application to be only run in OOB mode. 

NOTE: If you feel you want this, you should understand the limitations in OOB mode.  Namely the HTML bridge features and certain network implications might affect your applications depending on your needs.

Honestly I am not sure I entirely see the value in that (forcing it), so if you have one, please enlighten me (maybe gaming I suppose).  After all, IsolatedStorage is shared between OOB and in-browser Silverlight applications from the same source.  But I digress. 

The Problem

One thing that I’ve seen is folks asking for a method on how they can force the OOB mode in their app.  One of the security features of OOB is that the Install action must be user initiated.  This means it must be from the end-user action…not automated.  So you can’t just send a URL to someone and have it suddenly install the application OOB.  So how would you go about this?

A Solution

Easy, I think.  Here’s the pattern that I think might work.  I’ll note that this is just my opinion of a solution…not the defacto in all situations.  By all means please consider your own scenario needs before blindly adopting.  That being said, I think it might be helpful to explore.  This solution involves leveraging the OOB APIs available to the developer and creating some different views in your application.

Step 1: Create some views

What you’ll need here really is two views (for lack of a better term at this point – if you want to call them controls, that is fine too) in addition to your main application.  I’ve called one Installer and the other Installed.  The purpose of Installer is that this will be the view shown when a user does not have the application installed OOB.  The purpose of Installed is that it will be the view shown when a user does have the OOB application installed *and* is attempting to view the application in-browser.  The third “view,” your application, is what will be rendered when the user views the OOB application.  Put Installer and Installed wherever you’d like in your app.  I created a folder called Views and stuck them there. 

For Installer, you’ll want to put some UI in here for the Installer “badge.”  I highly recommend putting some time into this using Expression Blend to make it all look great and perhaps add any visual states you may want.  Remember, this is your user’s first impression.  This is still a Silverlight application, so go nuts with styling and using controls.  But you don’t need to make these the same size as your application.  For my example, my OOB application is 800x600, but my Installer app is only 300x162.  This Installer control/view will contain your actual install logic.  So somewhere here you need to have a button or something that the user can initiate as an action that you can call the Install method.  A button is easiest and easy to style.  In the Click event all you have to do (in simplest form, of course you’d want to add some error handling) is add the API call to install:

   1: Application.Current.Install();

For Installed, you’ll do the same thing, except make the UI/UX for the experience of letting someone know they already have it installed.  This could be something as simple as a text message, or complete instructions, etc., whatever.  You decide.

When you are done with this step you should have two XAML UserControls: Installer.xaml and Installed.xaml both for their specific purpose.

Step 2: Wire up the application startup logic

What I’ve chosen to do is take control of the App_Startup logic to determine the state.  I felt it would be better here based on the scenario I’m trying to accomplish rather than to load a default UserControl and have to do some funky app logic to swap out the RootVisual.  What I’ve chosen to do is to check the state of the trigger to run and follow some logic:

  • If the app is installed and the user is running in-browser: Show Installed
  • If the app is not installed and the user running in-browser: Show Installer
  • Else: Show App

The logic finds the correct state in a simple if…elseif…else statement and decides which RootVisual to show.  Here’s the complete code:

   1: private void Application_Startup(object sender, StartupEventArgs e)
   2: {
   3:     if ((App.Current.InstallState == InstallState.Installed) && (!App.Current.IsRunningOutOfBrowser))
   4:     {
   5:         this.RootVisual = new Installed();
   6:     }
   7:     else if (!App.Current.IsRunningOutOfBrowser)
   8:     {
   9:         this.RootVisual = new Installer();
  10:     }
  11:     else
  12:     {
  13:         this.RootVisual = new MainPage();
  14:     }
  15: }

Simple, isn’t it?  You can see that the “app” that gets run is the correct starting point given the state.

Step 3: Configure your OOB settings

Visual Studio 2008 adds a dialog feature for you to easily generate the OOB settings.  You can read more about that here and see some screenshots: Silverlight Out-of-browser Settings Dialog.  Once you’ve done this, when you compile your application it enables it for OOB install capabilities.

Step 4: Deploy

That’s really it.  Of course the harder part is your own application :-), but that’s for you to figure out, not me.  In the end you could then embed your application somewhere within a web page.  It will show your Installer if the user doesn’t have it, or remind them it’s already installed if they do.  Here’s a working example based on this pattern (Silverlight 3 required to run this application):

This is just a stub example app, no working functionality in the main application.  The purpose is just to show this pattern.  As you can see, when the application runs, it runs at the desired 800x600 application width that I want for my actual application, game, whatever.  All this while I minimize the impact visually to show the messages of the Installer and the Installed controls.

Summary

This is just a sample pattern that you may want to implement if the need (or desire) is there to force your applications to be run OOB.  Again, OOB in general should be understood before blindly going in and assuming 100% of what you have will run in this mode.  But if it will and this is something you want, you may consider using this pattern to make a smaller visual impact on the installer and providing the end user with a better user experience to get it installed.  Or at least it was an experiment for me.

Hope this helps!

| Comments

I’ve been promising this for a while and I’ve ranted about creating good installation experiences for Silverlight applications before as well here and here.  Well, our team rallied and created some new guidance and sample code to provide for you to implement the best possible experience.  The guidance whitepaper can be found on the Silverlight Community Site in the whitepapers section and includes:

  • Documentation for defining a good user experience
  • Sample code for media applications
  • Sample code for non-media applications
  • Sample code for implementing various states: not installed, upgrade needed, browser restart detection

The sample code is easy to understand and was templated so that you could change things to your brand/application.  The media sample can be dropped into your Expression Encoder templates easily and does a lot of the magic for you without having to thing (i.e., getting sizes of media, snapshot of media for image, etc.).

Hopefully this will help you understand the process more and provide you with the information (and code) you need to complete the best possible experience in your site.  You’ve spent the time developing your application, make sure you spend the time delivering the best install experience for those who may not have Silverlight yet.

Download the whitepaper and code today.

Hope this helps!

| Comments

The other day I was given a peek at a company who implemented a full-frame Silverlight application that when I saw it it was one of those “wow” moments.  A lot of the public-facing Silverlight examples are very different from one another and sometimes you see some that are full Silverlight applications that really give you a glimpse of how people are thinking about using the platform and how creative you can get.  Colaab is one such example that I saw at PDC last year (check it out if you haven’t).

Another example is a recent one called SnapFlow.  SnapFlow itself is a tool to really make creating workflows simpler to the end user.  The way they have designed their product makes it easy to understand how to create a decision-driven workflow that can be exposed to your users (customers, employees, etc.).  Essentially they separate the workflow into Stages, Actions and Data – all integrated into a user interface that if you are an Office user, you would have no problem understanding.  The best part is…the entire user interface is Silverlight.  Take a look at the screen below:

All of that design surface is Silverlight with full drag around behavior, connecting stages together in a visual, intuitive manner.  The application is very responsive and incorporates a lot of features.  I highly recommend you view the simple walk through video below for a view into all of the features…everything you see is Silverlight:

What is cool in one of the features is that once you, the creator of the workflow, are complete, you can then deploy that workflow into your web site or other portal (the demonstration shows using Sharepoint for example).  So you could develop a workflow for gathering some data from your web site, and embed the generated Silverlight application on your site with absolutely no coding required on your part.  Your employees will be able to act upon that workflow given the permissions assigned to them which then triggers the next part of the workflow (duh, it’s a workflow!) based on the action chosen.

It’s a convenient use of workflow, both simple and complex.  I am really impressed with the use of Silvelright and how responsive and fluid the user experience is.  I have walked through the application a few times and send my beta feedback on some things that I’ve seen from a general usability standpoint and the company was responsive.

The team at SnapFlow also put up a blog, where one of their first posts is: Why Silverlight?  It is an interesting read from a customer standpoint demonstrating some of the pros/cons in their decision and use.

SnapFlow is in beta right now and you really can’t appreciate it just looking at a screen shot.  Sign up for the beta and try it out yourself to see how they’ve used Silverlight to implement these types of usability features.  It uses a lot: controls, user interaction (drag/drop), popup modals, data input/validation, connecting objects, etc. – it’s a great example.  Sign up for the beta to play around with it.