User Experience is not just Usability

 

All to often I hear people using the term UX very loosely. In most cases, I hear people refer to User Experience while referencing the concept of Usability. And Yes, Usability is definately part of the umbrella to User Experience but they are not synonomous with each other. User Experience references the entire interaction, its percieved, learned, use of a product/software/application. I like to think that user experience is about interaction, visual design, delivery, usability, utility, and communication.

That also can go the other way, lots of great designers fail at creating usable design and in the same sense also fail at good user experience. Just today, what actually sparked this topic of which i am writing, I ran into a design for a company that had the concepts of great design: clean, nice style, trendy, but all of these things didn’t make up for the pure fact the design complicated usability. It did not seperate the elements out on the page to make it easy to navigate and use the application. Design groups need to start paying attention to User Experience, the bar is being raised by the design community to become User Aware… Think User Experience!

Silverlight 2 – Navigate to a URL

A close friend is learning Silverlight 2 and asked me a pretty mundane question but the problem with those kinds of questions is to designers some namespaces are not right there, and easy to use (not intuitive). The question was how do I make the page go to a url in silverlight. The answer to that is the following:

System.Windows.Browser.HtmlPage.Window.Navigate(…);

The Navigate method is not very easy to get to for those not familiar with all the namespaces, furthermore navigate is overloaded which means you can call it in three different flavors, they are:

1. System.Windows.Browser.HtmlPage.Window.Navigate( Uri ) which takes a uri and makes it go to a specific url inside the browser windows. An example would be:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(“http://smanticsolutions.wordpress.com”));

2. System.Windows.Browser.HtmlPage.Window.Navigate( Uri, target) which takes a uri and a string for target… like “_blank”. An example would be:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(“http://smanticsolutions.wordpress.com”), “_blank”);

3. System.Windows.Browser.HtmlPage.Window.Navigate(uri, target, targetFeatures) which takes a uri, a string for target and finally a string for target features. Target features is like the url in javascript urls for controlling the toolbar, window size and other things. An example would be:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(“http://smanticsolutions.wordpress.com”), “_blank”, “toolbar=0″);

Hope that helps. Check out the other methods inside HtmlPage and Window in intellisence, there are all kinds of hidden gems there.

 

Introduction to the .XAP file

Before I jump into showing off a demo of another Image gallery, I thought I would first do some basic explanation of silverlight parts. The focus of this particular blog is aound the .XAP file. The .XAP file is the new compressed container inside the ClientBin after a project has been built in visual studio 2008. Its interesting to note, that the .xap file is like many other compressed container file types used by Microsoft lately in that it is actually nothing more than a .zip file in disguise. If you ever want to see whats inside the .xap file simply convert it to .zip and you will have access to its contents. Whats interesting is that most likely you will find several dll’s you have referenced in your project, for example, System.Windows.Controls  and also System.XML.LINQ dll’s. This is why even some of the simplest xaml files or silverlight applications have a .xap file that is roughly 120-140kb in size. These dll’s are in there because they provide additional features to silverlight without requireing more in the silverlight runtime. This is all part of that keep the silverlight plug-in (runtime) size down to a minimum. Additionally you will see your application and other user control assemblies all packed up in this zip container.

If you have images or media elements such as sound clips based that you consider application necessities, those too can be embedded into the .xap file. Since the .xap file itself is not streamable then all items inside the .xap file will be fully accessible from the client side which means they will be ready to go as they are needed. This is very important note for those button rollover sound effects that were so popular in flash a few years ago, its funny I dont see any demo’s showing off sound effects for interfaces anymore, just note if you dont embed them into the .xap then they will stream over which would most likely not be the effect you were going for.

Now I realize that after a while, those few added .dll references may tend to be something you don’t want the user to install initially with the .xap file. You can easily control this by selecing the reference of the dll in your project and going to the properties tab and setting the “Copy Local” property to “False”. This does mean that you will have to provide that dll reference at some point before that reference is called within your application, so be aware of this prior to doing it. It gives you full control to screw something up.

Finally, my last piece of information about the .xap file is in hosting. If you are having problems hosting a silverlight application its most likely due to the .xap file and the fact you dont have IIS or whatever web service you have with the properly known mime type for silverlight. You will have to create a known mime type for file type “.xap” and mime type of “application/x-silverlight-app”

Silverlight 2 and Tooltips

If you are anything like myself, you may have noticed that some of the new controls have a property labeled Tooltip. A good example of this is the button object, so in your xaml you can specify the following:

<Button Content=”I am a Button” Tooltip=”Hello World” />

And just like that you will notice that the button will present a common tooltip of “Hello World”. But what about tooltips on things that do not have a Tooltip property. A good example is a layout control like the Canvas. Well in trying to figure this out, I looked at intellesense in Visual Studio and noticed a ToolTipService property; however, setting the property as I would intuitively do to something like (<Canvas ToolTipService.Tooltip=”Hello World”></Canvas>) was not working. In further investigating the scenario I found that you have to do two things:

1. Add a namespace to the additional Controls DLL of System.Windows.Controls:

<UserControl x:Class=”SomeClass”
     xmlns=”http://schemas.microsoft.com/client/2007″
     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
     xmlns:control=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls”

….

2. In the object you want to add the Tooltip functionality, inside its container specify the tooltip service; however, the tooltip property of the tooltip service wants to be set to an instance of a tooltip object and not a string:

<Canvas x:Name=”SomeCanvas” Background=”Green” Width=”100″ Height=”100″>

<control:ToolTipService.ToolTip>
     <ToolTip Content=”Hello World” />
</control:ToolTipService.ToolTip>

</Canvas>

And viola, a canvas now has a Tooltip property.

How to get started with Silverlight 2

Let’s face it Silverlight 2 is not a simple one application installation for getting started with Silverlight, and the installation is not streamlined because, well, it’s in beta. So, before I go rambling on about how to do this or that in Silverlight 2 I thought I would start by explaining how to get started working with Silverlight. There are 4 things you need to download before jumping into Silverlight 2 and those are the following:

1. Silverlight 2 browser Plug-In (Click Here)

Obviously if you are going to be doing any work in Silverlight 2 you will need to get the plug in for the browser so you can see your work in action. If you have Silverlight 1 plug-in already installed first uninstall Silverlight 1 and then install Silverlight 2, and don’t worry Silverlight 2 will support the Silverlight 1 bits without any problems.

2. Visual Studio 2008 Silverlight 2 Toolkit. (Click Here)

If you need a Silverlight toolkit for VS 2008 then that obviously means you need Visual Studio 2008 to work with Silverlight. Doesn’t matter which version you have so Standard, Professional, Team Edition any of them will do. If you don’t have Visual Studio 2008 standard or above then I believe you are out of luck with beta 1. I mean you could do Silverlight 1 and even some 2 bits with a Javascript code behind but that’s not what I am condoning here.

3.  Silverlight 2 SDK (Click Here)

This may seem odd to some people that Silverlight 2 requires the SDK to work with Silverlight, and you’re right to think that. The SDK is not “required”; however, the SDK plays a big role in some of the Silverlight 2 features. A lot of the new “Controls” available in Silverlight come from the SDK automagically. In other words, to keep the size of the runtime down to small chunks a large portion of the Silverlight controls are held in the SDK. In visual Studio and Blend these controls are still in the toolbox if you have the SDK installed but when you add these controls to your project there will be a reference made to the appropriate DLL.

4. Expression Blend 2.5 BETA Preview (Click Here)

This could be considered an optional download. It really depends on your style and preference and intent. Expression Blend allows you to interact with a designer layout for all XAML needs. XAML is the front end designer; while Visual Studio gives you a design view into the look of your Silverlight applications the XAML in Visual Studio requires you to write it by hand. For artists and “dev-igners” alike, Blend should be fairly straight forward with exception to the animation stuff. However, if you plan to do any sort of non-basic animations, then blend is a must.

Now with that said let’s cover one important aspect of blend before you go out and download it. Currently Blend and Silverlight 2 support is in beta which means the download is free. There are two different blend versions in beta. There is Blend 2 and Blend 2.5, you want Blend 2.5. If you are currently using blend for WPF then you will want them both. Because Blend 2.5 has a specific focus of Silverlight 2 and Blend 2 has a specific focus on the next generation WPF and Silverlight 1 support. Both previews and the currently Blend release can all 3 be installed at once without effecting each other.

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

Silverligt 2 Full Screen Mode

The most common feature seen among many different silverlight applications is the runtime’s ability to run in a full screen mode that doesn’t appear to be inside a browser. This isn’t just a great feature for videos but also for web applications as well. This feature is only available on a user interacted event and cannot be set without user interaction; for example, you cannot set the full screen within the application’s load event. This feature is rather simple to implement; however, if you don’t know where to look it will be rather difficult which is why I decided to put it into my blog. If you want to set the full screen simply use this:

System.Windows.Application.Current.Host.Content.IsFullScreen = (bool);

Obviously the “(bool)” should be repaced with a bool value or what I do often is make it the opposite value its currently set at. Also if you like that there is an event inside the “…Host.Content” for determining when the full screen changes so you can enlarge your video or put attention to specific controls. Whatever the reason, the event is called “FullScreenChanged”. This Host object has several nice extras, so check it out.