Once in a life time you get the chance to hire a Luminary

Industry #Luminary & #Silverlight #MVP is looking for his next role, the race is on, if u'd like to have a rock star @ your company see @WynApse author of Silverlight Cream. see http://geekswithblogs.net/TehGrumpyCoder/archive/2010/09/01/day-1-of-being-unemployed.aspx

Hiring an MVP like David Campbell is just an almost unbelievable oppertunity for a company to gain enourmous creditbiltiy as wellas a huge strategic asset. Having heard that David (not me, but Mr. Campbell) I almost chocked. I would give my eye teeth to hire some one of his calibur and there is such low chance of ever being able to hire some one like him. In any case it will be interesting to see what company gets him first :)

some more about David Campbell:

http://www.silverlightcream.com/

http://wsinsiders.com/the-silverlight-mvp/

http://geekswithblogs.net/TehGrumpyCoder/archive/2010/09/01/day-1-of-being-unemployed.aspx

http://www.wynapse.com/

http://twitter.com/WynApse/

Getting the Root Visual in Phone7

ok, so this should have been easy for me but for some reason it took a half hour to figure it out so I figure it must be something that some one else might struggle just in case. That being the case if you are in some nested set of user controls and need to get a reference to the top level of your phone 7 UI here is the code:

PhoneApplicationFrame Temp = Application.Current.RootVisual as PhoneApplicationFrame;
MainPage TheUI = Temp.Content as MainPage;

now main page is the loaded PhoneApplicationPage is this could change pending your code and further 'TheUI' is something I made up but all things the same the reference to TheUI would then allow you to call any instances of the root visual. and the best part is this is admittedly a bit hacky... :)

Interact and Seattle Silverlight Videos Online

in the 5 minutes of free time I have each month I finally managed to get some videos that were takening with a flip cam at some of the local user group meetings posted on vimeo:


Summer Series Touch and Beyond: The Psychology of Future Interactions
http://www.vimeo.com/14095704

Summer Series - Windows Phone 7 Development Going Deeper (Session 2)
http://www.vimeo.com/14101547

10 Ways to Attack a Design Problem And Come Out Winning
http://www.vimeo.com/14105139

Accessibility Makes the Experience More Usable by More People - IxDA Interact
http://www.vimeo.com/14125563

Modern UX Creation from the Eyes of a Developer
http://www.vimeo.com/14370107

The Difference Between Silverlight and Silverlight Based Phone 7 Apps

The past week I was asked a couple times about the difference between Silverlight and Silverlight for phone 7. Really? Other then a few minor technical differences in the most current version of Silverlight vs a bit more limited version in phone 7. The cool thing is that Silverlight for phone 7 really is Silverlight so the same code base can be used on just about anything. But back to the details. Phone 7 is just a 'specific' more limited version so most stuff you can normally do work fine. There are no new skills, not really anything new save maybe a few api's specific to the phone. The biggest diffence is really just the basic pages and user control names. In phone 7 you really have a set size and 2 orientations. That being the case the phone 7 silverlight team has built these controls to deal with the 2 orientations of the screen and the specific size for phone 7. With that start making phone 7 apps its easy and fun just like any other Silverlight app. ok well you will need to download the special wizbang version of visual studio for phone 7 from http://www.Silverlight.net/ just click on 'Get Started' and go from there.

Updates to Silverlight Code Browser

A couple of bits of news. I did a number of updates to the HackingSilverlightCodeBrowser here:

http://www.hackingsilverlight.net/HackingSilverlightCodeBrowser.html

including things like MEF and IsolatedStorage. As to the community edition of the book, I'm still trying to get some contributors to finish. I've been slammed with 60 hour weeks so chapter 2 and 4 and appendix a still need edits. maybe a weeks worth of work pending time which tends to be limited in my life. :)

Isolated Storage Made Easy

In its most simple form Isolated Storage allows you to save name value pairs and retrieve them at some other time the next time your app runs. Granted we could get into XML and text files etc but I'm going to stick with just name value pairs. Lets take a look at this line:

private void PresistKeyValue(string _Key, string _Value)
{
StreamWriter MyWriter = new StreamWriter(new IsolatedStorageFileStream(_Key, FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication()));
MyWriter.Write(_Value);
MyWriter.Close();
}

Nice and simple. using this block we can use a line like this:

PresistKeyValue("foobarkey", "blah blah blah");

this like saves a key falue of 'foobarkey' with the 'blah blah blah' as the 'value'

Now then to get the data you need a block like this:
private string ReturnKey(string _Key)
{
string Output = String.Empty;

StreamReader sr = new StreamReader(new IsolatedStorageFileStream(_Key, FileMode.Open, IsolatedStorageFile.GetUserStoreForApplication()));

string ALine = String.Empty;
while ((ALine = sr.ReadLine()) != null)
{
Output += ALine;
}

return Output;
}

Yes a little simple but you should be able to lift both of these functions directly and use the code as such like this to regtrieve values:

string SomeValue = ReturnKey("foobarkey");

nice and simple.

Dependency Properties Made Easy

ok so I found that for some reason I thought I did a post on this before and I couldn't find it. So I thought I would make a new post as simple as possible. Here is a simple dp:


public readonly DependencyProperty ResistanceProperty = DependencyProperty.Register("Resistance", typeof(double), typeof(AnimatingPanelBase), null);
public double Resistance
{
get
{
return (double)GetValue(ResistanceProperty);
}
set
{
SetValue(ResistanceProperty, value);
}
}

Nice and simple right? why bother you ask, well the biggest issue is that if you want to animate properties of a custom control of some kind using data binding and what that change to filter into the UI of some control. Otherwise I try to avoid DP's as much as possible. So if you need todo some mucking around in your control after the DP value has changed then do this:

public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(Dial), new PropertyMetadata(new PropertyChangedCallback(OnMinimumChanged)));

public double Minimum
{
get
{
return (double)GetValue(MinimumProperty);
}
set
{
SetValue(MinimumProperty, value);
}
}
private static void OnMinimumChanged(DependencyObject DpObj, DependencyPropertyChangedEventArgs e)
{
// some code :
}

You'll note that this has a changed handler but otherwise is like the first version. and that is pretty much it. :)

Microsoft Silverlight 4 Data and Services Cookbook

Alas I find my self doing another book review... its not clear to me that I should continue to do that but on this particular book it heads in the right direction. As noted in an earlier post I find the idea of a cook book to be of particular interest and useful in my work with Silverlight. This book has gotten closer then any other to date in building the ideal Silverlight book. Albeit the book does make an attempt to teach Silverlight to some degree but it tends to be more of a reference book, the down side is that there is more in the book about teaching and less about more esoteric topics not connected to data. Certainly though for the professional Silverlight developer this is a great addition to your library.


http://www.packtpub.com/microsoft-silverlight-4-data-and-services-cookbook/book/mid/130510v8s5cu?utm_source=hackingsilverlight.blogspot.com&utm_medium=affiliate&utm_content=blog&utm_campaign=mdb_003316

Silverlight Connections - Vegas Nov 1-4

got asked to speak at SilverlightConnections in Vegas in Nov. :) topics include: 'Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment' and 'Multi Dos and Don’t touches –Multi Touch Development from the trenches' and 'Going from Silverlight to Phone 7 Silverlight Application Development'

http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151


Title: Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment
Type: Regular session
Category: Expression Blend
Level: 300 -- Advanced

Abstract: Breaking Down Walls is about the wall between designers and developers in the typical design shop. Getting everyone to cross over, communicate and build better UX is where we are going and where many of the best Interactive Design firms are already. When designers and developers learn to communicate, and work together they really start to be able to make the best use of the tools they have from Adobe to Expression to Visual Studio, all these tools can be used in an open collaborative environment like never before. Learn to make magic here or at least learn how it has been done at Wirestone and other agencies that have done it successfully.

Title: Multi Dos and Don’t touches –Multi Touch Development from the trenches
Type: Regular session
Category: Architecture, Patterns and Practices
Level: 300 -- Advanced

Abstract: David talks about his experience in the retail space with real world multi-touch applications from touch kiosks to Surface and Silverlight. David will talk about the customer experience and how user centered design and multi-touch work in the retail world with ‘live’ customers as well as the perspective of designers, developers, IA and others regarding multi-touch. From stories about developers touching too much and about good ideas gone amuck David gets it all out on the table.

Title: Going from Silverlight to Phone 7 Silverlight Application Development
Type: Regular session
Category: Windows Phone 7
Level: 200 -- Intermediate

Abstract: This session is about making the leap to Silverlight for Windows Phone 7 and using your Silverlight Skills to build cool Silverlight applications for Windows Phone 7. We'll talk about the basics, game development and even business(ish) apps for Phone 7.

MEF (Microsoft Extensibility Framework) made simple (ish)

Microsoft Extensibility Framework or MEF is one of the great features in Silverlight, designed around making Silverlight applications more extensible generally and provides a much more complete story for the separation of concerns. MEF then begs the question 'Why we care?' and 'What can MEF really do?' and we will address that here.

Let us talk about a real world example for a moment.

Say you are a vertical selling corporation of some kind, meaning that you sell to companies that do similar things. For example you might be selling to retail stores and your application will show their products. One of the problems is that your application will need to integrate with their CMS (Content Management System) to get product data. In Silverlight 3 your customers might need to provide a WCF Service to talk too. That WCF service they then provide has to have a certain API Signature or worse still they might need your code and need to recompile or YOU have to recompile for each customer or some other hack to make the application work.

Using MEF your customer still will need to get the data somewhere but it makes it easier on them to do this without mucking with your code. To make it work a customer can drop a 'XAP' that provides the content and your application doesn't care about WCF API signatures or other requirements that make it difficult to wire it into the existing system. Your customers can now easily extend, change or filter what and how their data gets to the application you built for their vertical.

In many ways this is like making the model of your application (speaking in the MVVM since) 'open source' and not only pulls the model out of the rest of the application into just about anything else and lets that model be manipulated by the client without rebuilding the application in any way.

Getting Started With MEF?

MEF is pretty straight forward to get started using since it is part of the Silverlight framework in these name spaces and you need to make sure you reference them at the project level.

System.ComponentModel.Composition
System.ComponentModel.Composition.Initialization

Now that we have the bits available, using MEF is as easy as Importing, Exporting and maybe a little code. The main idea is to be able to code or property decorations to allow MEF to find elements either being exported or imported and tie them together. We can look at this process as being able to export the data, import the data and composing the data in an abstract way that allows the elements of this process to be abstracted from our application to a degree that it can be done externally to the application post compile. "Gah!," you say? Let's take a look at the next section and learn more about this process?

MEF'd Properties in and out of our Application

Here we will work out the basics of using MEF in our application. We can start simple by creating some properties and decorate them so that we can build out our application and have them magically set by MEF. Ok maybe it is not magic so let's focus on the properties that will be set first and see how it is done. Take a look at the following code sample:

[Import("SomeValue")]
public string SomeValue;

You can see here we have 2 lines of code. The second line is our traditional string property of some object like a string. The declaration line before it is what exposes our property to MEF and allows MEF to set it. You'll note that we use a magic string here. I know this is generally not well thought of by your standard architecture astronaut but you need to have a key value in the form of a magic string to have MEF do the data mapping unless you want to define your own import attributes which we will talk about later on. Next we can take a look at the code that sets this value.

CompositionInitializer.SatisfyImports(this);

You can see here that we are doing this programmatically and we get our data from the MEF catalog. By doing this in the constructor we allow MEF to go get our data where it is coming from and loading it and we can then use it as needed in our view. This MEF process is much like dependency injection might be used in a MVVM View. Really making this work then requires that we also have this object we are talking about in our constructor. To make this week we still need to have a simple class that exports that data in such a way as we can have some data. The following code does that.

[Export("SomeValue")]
public string SomeValue = "foobar";

Notice the export declaration in this sample. When this current assembly is running we get this data element automatically added to the catalog. Going back to the sample that included the catalog you can see that we created an instance and added the current application running as our package. Once we have added a package to our catalog we can then create a container that using the container we can then ask MEF to match the elements together to do our 'binding' So how then do we make this a two way street or deal with larger collections?

Making our Properties a 2 way Street

A popular construct in Silverlight and in the XAML world altogether is the ObservableCollection. ObservableCollections allow us to do lots of things but let us focus on the fact that it is a bindable collection of data that we want to be populated by MEF. Now take a look at the following lines that show a declaration and a collection property of come class.

[Export("SomeStuffs")]
public string Stuff1 = "blah1, blah";

[Export("SomeStuffs")]
public string Stuff2 = "blah2, blah";

[ImportMany("SomeStuffs", AllowRecomposition = true)]
public ObservableCollection SomeStuffs { get; set; }

As you can see this looks mostly like the first property we looked at earlier but here we are creating an observablecollection. The ImportMany declaration above it he collection allows the multiple element collection to come through and by also setting 'AllowRecomposition' the property can then be set over and over again by MEF. From this standpoint point we are ready to really build something separate from our application.

Exporting a Class in a Separate Xap

To create a Xap we can use a standard Silverlight project that we add to our solution. Since we are going to load the xap we can get rid of the classes (x and y). Create a class called z and make it look like this code:

public class SomeClass
{
[Export("SomeValue")]
public string SomeValue = "foobar3";
}

In this class you can see we create a class with 4 properties and use export to the same key name. This creates the effect of the values being exported to the MEF catalog as a collection that will get associated with the collection we created in the last section. For this to work we need to make sure that our Xap is referenced in our first app.

Downloading Xap Dynamically

Now that we have our collection and a new xap with a class that exports values we want we can look at importing the Xap and using MEF to wire that up to the data we need. Take a look at the following code:

[Import("SomeValue", AllowRecomposition=true)]
public string SomeValue;

DeploymentCatalog catalog = new DeploymentCatalog("MEFModel.xap");

// in constructor:
CompositionInitializer.SatisfyImports(this);

catalog.DownloadCompleted += new EventHandler(catalog_DownloadCompleted);
catalog.DownloadAsync();


void catalog_DownloadCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
// some code...
}

This code can be added to the constructor of our application just after the call to AddPackage. You can see that we pass a Relative URI to our other Xap and that we add it to the package when it loads. This can also be an event handler to to the load. In this case we get the content added to the package and it gets wired up based on the name key values that we have set by the ImportMany and Export declarations. Now the cool thing is that we don't need to keep this in the constructor. We can call this same 'DownloadPackageAsync' from any event handler or other block of code that we need. We could use this to load content dynamically pending on certain conditions such as localization.

This is all wonderful but there is one problem with using a separate Xap that has the MEF bits in it. This means that both Xaps have MEF and now ours Xaps are twice blotted from MEF using more memory then needed. Fortunately there is way around this is to set the additional Xaps to use include this in the build. In Visual Studio in the other projects find the Library reference to the MEF and right click and select properties. On the reference property pain there is a property called 'Copy Local' and we need to set this to false. This way only one copy of the MEF bits will be in the overall application saving Xap size by not blotting all the Xaps with the same bits.

Book Review: Silverlight 4 Business Application Development

I normally don't do book reviews here but this book is kind of cool and what I'm looking for. Silverlight 4 Business Application Development, here is a book that is kind of not so much on the UX side but what stands out about this book is the fact that it is more pictures and code then text especially when compared to a regular book. For me in particular this is awesome as Im more into pictures and code samples. Much like a recipe book this kind of thing is right up my ally so I can focus on making the applications User eXperience cool. That being the case I would recommend it. On the downside the book is from a publisher I haven’t not heard up and the technical editors are more well known in the authors but once getting past that its a good resource to have. You can download a sample chapter here:

http://www.HackingSilverlight.net/Downloads/9843_SampleChapter.pdf

and purchase the book on their site:

Silverlight 4 Business Application Development


some of the samples will also show up the the HackingSilverlight Code Browser:

http://www.hackingsilverlight.net/HackingSilverlightBrowser.html

HackingSilverlight Code Browser

So sometime ago I had been working on a sample browser for all the different samples I had used for hackingsilverlight and for blog posts. After awhile with all the jumping around between projects, and my failing memory I found I needed a quick easy way to remember all the code clips I used often. For me I needed something like a rola-deck for code so after taking my toys and leaving the sandbox as it were regarding the book HackingSilverlight between projects for the 5 minutes here or there I've been working on a tool that I'm using in place of the older sample browser. And so the HackingSilverlight Code Browser was born. Its still a work in progress and really its all about me and my workflow but on the off chance it might help some one here it is:

http://www.hackingsilverlight.net/HackingSilverlightCodeBrowser.html

of course if you go to just hackingsilveright.net there is a click here to install button that will install the oob version but from this link you can also just right click and select install. Remember this tool is not designed to teach anything or example things to anyone, its purpose is to quick recall code that I know how to use already and make it easier to remember. So remember this isn't silverlight 101 , its more like silverlight 400 :) In any case when you first load the app there is a number of key elements. First on the left is a tag cloud where the tags related to blocks of code that have been 'tagged'. in the center is everything matching the search result and then in the far right is the search box. there is no search button as it updates dynamically as you type. I did put a reset and help link below this but really just start typing.

in the bottom corner you'll notice a version number, a contributor link and a add to library link so if I run across a bit of code that I think is important I can send email to my self to remind me. Also back on the left at the top is a cover shot that links back to the site and if you are running an outdated version you will get a warning along the left side.

If you happen to select one of the results from the middle you get a code box viewer that does some simple formating of the code and lets you select the contents. also all the tags associated with that block are shown and they are clickable. Clicking tags will close the code viewer and do a search on that tag. There are two arrow buttons if you get board and want to scroll through blocks quickly plus there are the help and contributor dialogs.

The help dialog is much like this post just giving a basic discriptions of functionality and then the contributor dialog is is a list of everyone that has helped, inspired or contributed in some way.

And thats pretty much it. oh and one more thing. only constructive feedback is of any use or more importantly if you have cool snippets to add... please feel free to contact me about it. And the code base I'll use to replace the existing HSL codeplex project...

Launching a URL from an OOB Silverlight Application

So I'm working on this code browser mostly to help me with my fading memory. In the app I want to be able to launch a url. So I do my normal thing and put a line of code that looks like this:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(ThisURI), "_blank");

I was agast when I realized that this didn't work, for that matter it didn't even blow... grr... but with a bit of research I found that the hyper link button worked so a ended up making a little class like this:

public class MyHyperLink : HyperlinkButton
{
public MyHyperLink(string navigateUri)
{
base.NavigateUri = new Uri(navigateUri);
TargetName = "_blank";
base.OnClick();
}
}

even better the code to make this works looks like this:

MyHyperLink button = new MyHyperLink("some url here...");

Hacking Windows 7 Phone

So here is the Hack of the Week. For those who have had their heads in the closet and haven't heard Microsoft is coming out with this Windows Phone 7 - the mythical vapor ware for a number of years now has been made public. Like many Silverlight geeks especially we are estatic as this phone now public will run Silverlight as the primary way to develop applications for it. On the downside if you installed the developer kit, the VM for the phone lacks pretty much... um... everything... no sensors, (how can we do anything cool without sensors), no apps , not settings no nowthing except the Internet explorer and apps we write as long as they don't need sensor access. At least give us some proxies or fake data etc. But for now we are on our own.

Some people counldn't live with that and they hacked the vms. So one such example is Dan Ciprian from Italy and here is his two posts. I can attest to say that this seems to work as I have seen in live work, not that I my self would do such a thing and I can neither confirm nor deny that I did any such thing but Here are links to his posts on topic.

http://sviluppomobile.blogspot.com/2010/03/wmp7-emulator-unlock.html

http://sviluppomobile.blogspot.com/2010/03/wp7-emulator-unlocked-how-to.html

I was also aghast to see that one one greated a copy of the hacked VM and posted it here:

http://www.1800pocketpc.com/2010/03/20/how-to-unlock-the-windows-phone-7-emulator-download-the-unlocked-bin-file.html

which will get you a running version of the emulator unlocked in you follow these directions...

Talking about Immersive Retail Prototype at MIX 10

Here is a quick video that Pixel8 (Craig Shoemaker) did showing the TouchTag Prototype Hardware and Arduino controller and sensor I have been working on.

http://community.infragistics.com/ux/media/p/225460.aspx

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Video From PDC 2009

Found this video this morning with me and Victor Gaudioso talking about UX and Silverlight.

http://www.youtube.com/watch?v=hUqd3vJwRg4

Immersive UX Changing the Face of Retail

Changing the Face of Retail is an article I’ve been thinking about most of the past couple weeks. I think my goal with the article is to one talk about how technology built into the retail environment can be used to build better experience’s for customers and 2 to talk about how this kind of evolutionary extension of the retail environment is better for customers AND retailers.

I walked into the Microsoft Retail Store or at least one of them, (see one at Mission Vejo or Scottsdale) and its really impressive how the store is built with this wide open and inviting layout, if you didn’t pay close attention one might think it’s more about interior design then about selling computers and software. One of the most striking features is the video wall that wraps around the entire store. But once I walked around looking at everything, what strikes me the most about this store is actually in the far corner or the software section where this small ‘podium’ with a touch screen built in sits. Granted up front I have a strong emotional tie to this ‘kiosk’ but I can’t really talk about it, with that said I wanted to talk about the idea that this ‘kiosk’ represents from a retail standpoint regarding targeted customer experience and UX in general.

So I played with this ‘kiosk’ and what I found interesting besides the ‘metro’ design aesthetic was that as I browsed software titles on this ‘Software’ Kiosk I realized that each time I entered a new ‘category’ of software the video wall nearby changed with the top 5 titles in that category. And then what I really think (in the case of the MS store) what is the most impactful is that they manufacture most of the titles in this kiosk on the spot when I ask for them. Theoretically the store could have a limitless list of titles, no inventory and just manufacture anything I want on the spot. How is that for brick and mortar?

My point in this story is how technology integrated into our environment can be such a huge game changer. When me, a person interested in software, in a retail space has this elegant multi-touch podium with a grand view of all the software in the universe that can lead me easily through all the titles, finding what I need and manufacturing it on the spot is the norm then other business’s in the same line of work or even Amazon.com will really need to bring up the game or fall behind. This is the kind of technology that really changes the face of retail.

So I work for Wirestone an Interactive Design Agency (so I have a vested interest in the technology). We do work like this touch kiosk in the retail space and specialize in ‘Targeted Customer Experience’s.’ So how would I help a retail store build a ‘game’ changing user experience like this (minus the replicator in back)? How can we make a ‘Retail’ experience that much more emotionally engaging, interesting, fun etc? Can we make something cooler that what we saw in the ms store? I really wanted to have something as engaging so I went and spoke with our R and D team in Seattle and we came up with a vision of a retail space like the following user story that we thought we could implement in our UX lab in Seattle.

Let’s say we have John Doe that is interested in Camera’s. He goes into our theoretical retail space looking to buy a camera. He sees one that looks interesting? As he stands in front of it for a few seconds and the price tag visually transforms. The price is adorned and highlighted and across the bottom some text slides in that says ‘touch here to compare’. John touches the digital price tag and the wall behind the product comes alive as that camera slides in to center in front of John with some of the key features listed below. John then takes a few steps down the aisle and realizes that the product detail on the wall follows him; he then touches another tag of a similar camera and that one slides in next to the first on the wall and John can see the key differences highlighted. John quickly is enthralled with this ‘experience’ and the short is he spends lots of money…

With this in mind I started out to build a prototype. One of the Integrators on our team besides having great design and UX skills, happens to write custom serial drivers for fun… I talked with him about it and he pointed me in the right direction including sensors, controller boards and drivers and sample app etc. (See Ryan’s post here: http://www.futile.com/2010/02/wpf-sonar-application-using-arduino-and-ping-sensor/ ) That aside I wanted to be able to talk about this kind of technology at MIX around integrating technology into the retail environment so I had to get busy. What I ended up with was a custom Silverlight control built out to include custom events and interfaces so it could be consumed by a WPF windows object controlled by a custom ‘windows’ manager in WPF for having lots of these little usb powered touch screens all wired together. Plus adding some more ‘custom’ code, some serial port programming over USB, a few config issues, sensors and a simple design later I had my working app for MIX.

Now dragging this around mix was kind of shock to see how interested people were and how extremely geeky it was to have all the cables and the sensors and the like mucking about but it turned out to be a great conversation starter. The next step in developing this kind of technology was around the Business Intelligence aspect of this. In our typical retail touch kiosk work it is always interesting to see how things are used. We normally do lots of user studies with the target demographic getting everyone from IA to devs and creative involved with working with the data collected around making the UX not just work but better. In the case of our touch tag prototype a lot of things came to mind. I ended up talking to a friend at Preemptive Solutions (Gabriel Torok) that did this cool BI tool for Silverlight and we met at MIX to talk about how integrated BI analytics would enhance our work around the touch tag prototype.

Many times knowing how users interact with a system and with the environment helps a business better enhance what and how users experiences a retail space to better help the custom solve the issue that they might not even know they have. With the touch tag system we are looking at retail heat maps, working with touch and interaction data as it related to products and POS data. Questions like what products to people pick up? Vs what do the buy? Vs what do the put back vs. what area of the store is most interesting? What areas of the store are ignored? How can I make better use of my retail space?

Being able to engage customers faster with more interesting experiences that get them engaged with the product they are most interested in and in how that product is the best for them through touch, through visuals and all the senses helps the customer connect with the product emotionally faster. In user studies we have found that this kind of holistic approach to the retail environment really ups the game not only for the end users or customer and the retailer but also for everyone else that has to compete. This is how you change the face of retail.

Next on my list of to-dos is making the average retail employee a super star with augmented reality. You might even think I’m kidding but I’m not. I meet with another friend a few days ago that runs a small but high end UX shop in Canada and that is our next project. I’d love to hear what everyone else is doing to make targeted customer experiences that much better.

Oh and here are a couple of pictures of the UI and hardware for the prototype:

http://www.facebook.com/photo.php?pid=4246729&l=bfecdad661&id=721326429

http://www.facebook.com/photo.php?pid=4246858&l=8936a70219&id=721326429

I published this post initially on the Interact Seattle Site at:

http://www.interactseattle.org/?p=538


some related links include:

post from MIX w/ video showing prototype hardware:
http://community.infragistics.com/ux/media/p/225460.aspx?CommentPosted=true#commentmessage

and this one talking about touch in general and mention the touch tag prototypes:

http://hackingsilverlight.blogspot.com/2010/03/me-on-windows-7-touch-and-i-mention.html

and the Silverlight TV ep3 I did on multitouch:

http://hackingsilverlight.blogspot.com/2010/01/silverlight-tv-episode-3-multi-touch.html

the touch tag demo at MIX on Channel9:

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Developing Functional Specifications based on the UML Model

A few days ago I found this white paper I did around 2004 way before I started really blogging:

The Process Overview

Use-case to Specifications is a processing using UML use-cases to identify user requirements and model systems to be able to properly define functionality. This document is intended to serve as an execution based walk-through of this process.

As background: ‘The Unified Modeling Language (UML) is a language for specifying, visualizing, constructing, and documenting the artifacts of software systems, as well as for modeling business and other non-software systems. The UML represents a collection of best engineering practices that have proven successful in the modeling of large and complex systems.’ ~OMG Unified Modeling Language Specification

Use-case – Basic’s

In this process we are focusing on the use of use-cases to identify requirements. The goals of building a use-case is to first identify the actor. This is the person or entity performing the actions described in the use-case. In some cases, the actor is simply a component of the system and not necessarily a user or consumer of it. Second is to identify the goal or what we are looking for the end result to be. Third, and last, is the process in which the actor will take steps to reach the end result or goal. This process interaction is typically described in story form and contains a complete end-to-end walk-through of the actions taken by the actor to reach the goal in the proposed system. To this end, it helps to think of a use-case as a stand-alone story that isn’t dependent on any outside parts to be considered complete. Use-cases serve as a primary tool to help us work out system interaction issues, such as the way it’s accessed, how a part of it might be used or perceived, or how a particular aspect is intended to operates. Basic use-cases will include the following elements, all of which are derived from the overall story-line created:

Name
Actor
Triggers
Story
Steps
End conditions
Failed conditions
Success conditions
Alternate scenarios.

Use-case’s

To develop a use-case we first need to start with an actor. There are several ways to determine an appropriate actor. One way is to ask a couple of basic, but key, questions: 1. Is this actor a component of the system, like a class or object set, or is it another type of entity, such as an administrative or end user. 2. Is the actor a consumer of the proposed system or does it live and/or work within the system. Second, we need to come up with the goal. What is the end result we are expecting from the interaction process? The next step is to develop a story that describes how this actor interacts with the proposed system in order to reach the end result or goal. The following example uses ‘Microsoft’s ACME Project’ or MSAP as the proposed system and an end user “Joseph” who has specific privileges within the system. The goal in this case is to register for an existing course.

Example:

“Joseph, a gold level user and technology buff, has just learned that a new course is being offered for his favorite technology: C#. He immediately rushes onto the MSAP and signs in using his Passport credentials. Joseph then selects the MSAP Center link from the left-hand navigation menu. Once there he is able to quickly search for content relating to C#. Joseph locates the course in the search results that were returned to him and clicks the “Register” link. Joseph is able to get more information on the course while reading through the summary page. He decides that this class is definitely worth while and proceeds through the registration process. Once registration is complete he receives an email confirming his successful registration. Joseph marks the course date and time in his calendar and quickly gets back to his day-to-day tasks.”

Summary:

The story in this example use-case is fairly refined. When we carefully look at this story it identifies a number of qualities about the actor as well as the process used to reach the end goal. From this story we can derive requirements and even data elements needed to ensure that the functionality described matches what was proposed to be built.

First we see that we have given our actor a name. This allows us to reference the actor more easily throughout the use case. From this story we can see that each relevant step our actor goes through has been described. Additionally we can derive actions that “trigger” other actions and can see the basis for some assumptions that were made. As the story’s end draws near we take note of end conditions and finally, after the basic story is completed, we can assess whether or not there are alternate scenarios and even failed conditions that need to be documented.

Derivative Requirements

Once we have worked out the use case we can derive requirements from this. Let’s start with data elements… In the case of the above use-case we can identify the fact that we will need a user that has the following attributes:

User name
User level
Skill set(s)
Course(s) registered for
Course(s) history (assuming we want to keep track of what happens)
Language (if this is used internationally i.e. is he viewing this in English or does this apply to any local? )
Passport account
PUID
Partner
e-mail address

So we now know that the system will need at least the ability to define the above elements and logically we can think of this as an object.

As to the system, we know that we will need to have gold users be able to login via passport then search and finally register for events. From this we know that MSAP will need to use passport at some level, as well as have built in search functionality and registration functionality. In identifying these elements we also then know that we need to track these data elements as well in the system. So that means we need course information or a ‘course’ object that has search functionality and we need to be able to tie that into registration. An instance of registration would also then be associated to a user and to a course or event.

From this point we are able to identify the basic groups of functionality as well as document data elements from just one use case. These become our derived requirements based on developed use cases.

Building Specifications

From these derived requirements we can also do flow diagrams and sequence diagrams for each use case and this feeds our design process by making it easier to come up with object models and sequences etc.

To focus on specifications, we need to take from the original business requirements and data from our use cases and any requirements list to build functional specifications. Typically organizations have a template of sorts. Microsoft is no different with excellent templates that allow the collected data to be plugged in quickly and effectively. Use cases can be prioritized by this derivative process which in turn prioritizes the feature requirements. In our above use case, from the users stand point, the ability is needed to search and find classes and be able to register. If a user can’t do this then there would not be much point in the example software.

Regardless of templates or other things a functional spec should include all the critical use-case stories or summaries, a feature list, prioritization of features, any external requirements or limitations, assumptions, critical data, issues/risks and a summary of the document.

No Silverlight and Preloader Experience(ish) - in 10 seconds...

here is the basic's...:

<body background="Img/ScreenShot.png" >
<object id="SilverlightControlObj" name="SilverlightControlObjNm"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%"
height="100%">
<param name="source" value="ClientBin/SUGWTK.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<br /> <br />
<center>...</center>
</object>

if that didn't make since... so for reference take a look at my site http://www.hackingsilverlight.net/ and view source. If you don't know how to view source on a web page... you probably should stop before you hurt your self...

lets start with the background image in the case of the same above... this is basically a screen shot of what a user could see if they have silverlight. then where you see the center tags that is where you put your 'non' silverlight stuff. If you refer back to my site source code you can get complicated and add an entire downlevel experience for non silverlight users. If you have an ecom site then you really need todo this. if on the other hand your site is called hacking silverlight like mine then you can be a bit more less friendly for silverlight.

In any case one other thing you can do is add a preloader animation.

here is a link to the preloader on my site:

http://www.HackingSilverlight.net/Inc/Preloader.xaml

and to use one you add something like this to the object tag used to create your silverlight application:

<param name="SplashScreenSource" value="Inc/Preloader.xaml" />

In any case doing a preloader and custom install experience is the best way to help the non silverlight visitor and help making the loading your site that much cooler for the Silverlight users of your site.

Me on Windows 7 Touch (and I mention Silverlight Hack)

At the MPV Summit 2010 I was asked to talk a little bit about Windows 7 touch and so I talk abit about this touch tag Kiosk technology and our experience at Wirestone working with Windows 7 Touch, WPF and Silverlight. Anyway its pretty cool:

http://www.vimeo.com/10357419

Searchability and Indexability in Silverlight Sites

I got a question from a friend last week that I thought would be a great question to post the answer to about Searchability and Indexability with Silverlight apps. Here is the question,

"I have created a site and I followed the approach something like this : I have created 5 projects for five pages and added the five xap in the main SilverlightProject. and then I have write the code something like this for each menu buttons : HtmlPage.Window.Navigate(new Uri("/Default.aspx",urikind.relative) ;
My question is : Does this help me solving providing the unique url's for search engine optimization ? "

my respone: linking in the xap does not expose those pges to search engines as such but does lay the ground for exposing those pages to the robots/search engines. to expose them to the search engine for indexing the best method is to use the install experience to expose the different elements as links in the html. remember as of late the search engines see nothing inside the xap. specifically they only see the html and a custom install experience provides not only a better user experience to users with out silverlight but that also is what the search engines will see.

MIX 2010 - in 10 seconds...

um...

windows phone 7

Silverlight 4

better ux

lots of parties (MIXer was awesome)

OData (ado v35.5?)

number of problems with conference direction, still coolest of the public ms conferences

did I mention the iphone killer windows phone 7 (aka, Zune Phone, windows mobile 7) and amazingly enough it might actually be some real competition for iphone, ux is awesome (after 4+ freaking years it had better fraking be freaking awesome)

You can get all the videos here http://live.visitmix.com/Videos

AND Wirestone sponsored it, stole a sign with our Wirestone logo and more parties and friends.

The worst part of MIX was not getting to see everyone I was hoping to. there may have been talk of other things such as azure but they are really that critical and I didn't pay attention...

Did I say windows phone 7 and all its apps are Silverlight and XNA? freaking awesome

Dirty Dirty Silverlight Hack... - Silverlight 4 Hack: Use Native/Desktop CLR Without COM Registration

Here is a hack of the month. Jeremiah is probably my favoriate Silverlight Prodagy and he has done it again with this wonderful hack, 'Use Native/Desktop CLR Without COM Registration' I like the first line, "WARNING: Information and code here can easily be abused. Please do not use it as a crutch in application planning, but more for utter despair or experimentation. Thus I wrote this blog post from that perspective."

Certainly Jeremiah's code can be abused but what is really interesting to me is how this is one more way to push the limits of what Silverlight can do. 'Hacking' doesn't have to be evil but can be just that pushing the limits and making things better. With that commentary here is the first paragraph and sample code from his article and for the rest you will have to go read his post:

Silverlight 4 + OOB + Elevated Trust gives us the ability to use COM. That would be extremely useful (vs. really useful), except we cannot use just any COM class. It has to support IDispatch (COM automation). It also has to have a ProgID associated to it. That leaves you still with quite a few built-in COM objects to work with, as Justin document's quite well here. What about running our own native or .NET code? One would have to register a COM object first, which requires administrator rights. That’s no fun for an end user! Optimally, it would be nice to be able to add your desktop CLR objects as resources to your XAP, and from Silverlight code, be able to instantiate and use your Desktop .NET classes. This is a hack to do just that.

Huh? What does the hack do?
Let me explain it in code.

/* Create our Desktop .NET helper */
dynamic fullDotNetProxy = fullDotNetProxy = ComAutomationFactory.CreateObject("ClrProxy");

/* Have our .NET helper load up our .NET assembly we extracted from our SL app resources */
dynamic assembly = fullDotNetProxy.GetAssembly(m_assembliesPath + "\\Inject.Test.dll");

/* Get our .NET Type */
dynamic testClassType = fullDotNetProxy.GetDotNetType(assembly, " Inject.Test.TestClass");

/* Create an object instance of our .NET type */
m_testClass = fullDotNetProxy.CreateInstance(testClassType);

/* Run our RunMe method on our .NET object */
m_testClass.RunMe();


Read the rest at:

http://jmorrill.hjtcentral.com/Home/tabid/428/EntryId/442/Silverlight-4-Hack-Use-Native-Desktop-CLR-Without-COM-Registration.aspx

Programatically Setting Margin On Elements...

Foo.Margin = new Thickness(0, 50, 24, 6);

really thats it...

as defined by:

[Named UIElement].Margin = new Thickness( [double] , [double], [double], [double]);

or go the extra mile and use intellisense...

Does Your Agile/UX (User eXperience) Shop have a CMM Rating?

I posted this article on Interact:

"CMM? what is that? is the typical response I get when asking about CMM. For starters CMM = Capability Maturity Model For Software Engineering project methodologies. Basically it’s a way to rate how good a software shop is with regard to its process. Now in the UX/Agile space talk of applying Software Engineering metrics such as the Capability Maturity Model For Software Engineering from Carnegie Mellon University might be a bit more than most will deal with however being exposed to both worlds I think it is worthwhile to talk about what UX/Agile can learn..."

Read more at http://www.interactseattle.org/?p=476