The MossyBlog Times Archives 2007 - 2009 : RIA Handbook

The Wow Effect (10secs vs. 10mins)

scbarnes — Sat, 28 Mar 2009 01:37:25 GMT

The explosions of plug-ins today have brought innovative ways to visual experience online in ways that are both exciting and dangerous. I say dangerous, as on one hand they are visually appealing they are at times useless and typically can end up becoming a trend.

The Muse.

I had the pleasure of being a part of a workshop at MIX09 with Rick Barazza in which he highlighted a point called the 10second vs. 10minute wow. I must admit I didn’t pay all that much attention as I was in/out with customers, but I felt I understood his point he was attempting to make. In my own words I’ll echo where I think this point could go?

If you see a solution and in the first 10seconds, you get immediate feedback of emotion (meaning wow, this rocks) it’s easy to then grade that as “this is the best of the web”. If after 10mins however your feedback with the said experience begins to degrade and it’s simply this cool effect that has little or no functional purpose, it’s not past the crucial 10minute wow.

Essentially you have 10seconds to make an impact, you then have the next 9mins 50 to retain that impact and should you still score high post the 10minute mark, your ability to produce an effective experience has greater potential.

Let’s look at a WoW Effect Matrix.

Got to a site on FWA and pick 10 sites. Now grab a pen and paper, and rate your experience after 10 seconds of usage (allow for loading etc).

At the 10second interval, I want you to then rate the experience in two categories.

Form (0= Average and 5=Outstanding).
Form is about the user experience, was it fun to use, did you find it easy to navigate, was it rewarding etc, all emotive feedback you can muster and allocate a score against that connects via UI.

Function(0=Average and 5=Outsanding)
Did this experience have a purpose, did you retain any information that helped you? Was it able to provide you with anything beyond a visual connection?

Write down your score for both. Now proceed to repeat this again after 10mins of using the said solution (should you even feel compelled to stay for the full 10mins. If you don’t then they automatically are rated 0).

Now using the WoW Effect Matrix below for each score per category, you’ll see what WoW effect you potentially could have per category.

If you score high meaning the darkest blues, you’ve done a great job in each category and stand to retain your audience beyond the initial viewing. If however you score low, your ability to retain the audience maybe high risk and consider balancing out the Function vs. Form aspect of your experience.

If you score in the middle, then it’s not that bad, but it could go either way and so it would reduce your risk of abandonment by optimizing in either category that you feel is weak.

Why is this important to those whom create with Silverlight?

There’s this myth floating around on the web, that unless you have ubiquity, people won’t install plug-ins. It’s actually false, and look at either Flash or Silverlight download rates and you’ll see that people are willing to install a plug-in should the experience or solicitation of the said experience be worth the install.

The reason this myth is being portrayed is because folks tend to look at their failure to install rates and go “ahah! See, plug-ins are bad..long live AJAX”. I see this all too often and shake my head, as typically they failed in soliciting the end user to actually install – “Get Silverlight” isn’t solicitation, its laziness.

Assuming they do install or have the said plug-in, the next argument is “ahah! See they didn’t stay, people don’t like plug-ins” which is also incorrect. You didn’t hold up to your end of the bargain, meaning you didn’t produce a compelling experience.

As chances are, you scored low on the WoW Effect. You didn’t provide the end users a compelling experience and just because you spent 30k+ on a compelling solution, doesn’t mean you automatically get 30k+ retention in end users. It’s no different to any medium out there and it ranges from TV, Movies, Games, and Websites etc.

When you produce a Silverlight experience, you simply need to balance between great visual effects and UI feedback whilst at the same time ensuring the functionality of what you’re producing has meaning. Going nuts on Deep Zoom isn’t enough as great, I can zoom in and out, so what? What else do you have for me? Why am I even here on this solution and so on?

Out Of Browser whilst being hailed an immediate success already, is going to be also quite dangerous in terms of WoW Effect. As whilst it’s great I can take my experiences online and offline, the reality is why should I even bother? Just because I can, doesn’t mean I will.

It comes back to balancing the function vs. form.

I have no idea if this was what Rick wanted to convey, but that’s my take on The WoW Effect anyway.

Silverlight: VisualState Manager, Storyboards and why designers should care about them both.

scbarnes — Mon, 30 Jun 2008 09:50:18 GMT

I've seen a lot of talk around VisualState Manager online and it mostly covers button states and so on. What I want to do here in this post is illustrate why VisualState Manager is a handy tool for the average interactive designer out there and how it can kind of short-cut a lot of animation transition logic automatically for you.

You can make your own States.

In Silverlight via Expression Blend you will have the ability to make your own VisualStates. In my case I have a Menu that when a button is clicked it fly's down. Once clicked again, it fly's back up.

First things first, I setup a basic wire-frame UI (always prototype people!) in which I have an outer-chrome and underneath it, I have a Green rectangle which represents the "menu".

Closed:

Opened:

That's the intent anyway.

Inside Expression Blend, on the Far left you should see this:

This is the area where you can add your own VisualStates. In this case, if you click on the icon, you will get "Add State Group", which should automatically add a StateGroup for you.

New StateGroup added.

Now, notice the 0s next to the StateGroup Label (You can change the Label if you want by the way to suite a more appealing name). The 0s input is essentially the total duration of time it will take to go between each state housed within this group. It's currently at 0s which means that there will be no animated transition between states. To enable an animation between states, bump this up to more than 0, (0.5seconds will be great starting point, as anything lower and it's hard to visually gauge the transition).

At this point, go ahead and Add two States via the menu (+ meaning add, - meaning remove).

You should end up with the following:

Setting up the States.

At this point, go ahead and rename the State and State1 to PullDown and PullUp.

Click on PullDown's state.

If you are familiar with the way StoryBoards work inside Expression Blend, then you will notice that the timelines per state can exist (by default they aren't added until you add them via clicking on the icon). This is called "in-state animation".

This is quite a powerful, as basically we've provided you the ability to add your own amount of animation per state. In this case, I've made my Green Rectangle fly down from 0y to 130y within the PullDown in-state animation.

I've made the duration for the animation around 2seconds which in this case means that although my animation for that state is expected to run for 2 seconds it won't (well not quite like that)

Why won't it?

The 0.5s here will add to the overall actual animation. As the way VisualStateManager works is that it will take 0.5s to go from PullUp state to PullDown state. Once the transition has completed, it will then play the 2second animation.

In total, your entire transition will take 2.5 seconds. Important thing to note here, is that should you want it to take 2seconds you just make the actual StateGroup (NxsRibbonMenuState) 0s.

The reason I would opt for a 0s Duration is that this allows you to attach your own easing (in/out) sequence per state, whilst allowing you to have a multi-step animation (meaning the animation can play different effects per tick on the Timeline).

This could also be done simply using a basic Storyboarding approach, but you don't get the flexibility of accessing the VisualStateManager via code-behind and you also have to write your own reverse routines should the user wish to interrupt the sequence of animation.

Why use States for Animations then?

In my case I wanted to enable a Menu to come down and up when the user clicks on a button. I also want it to also allow the user to change their minds and reverse the animation should they click the button half way.

VisualState Manager's can provide a great way to achieve this, as in my Button's Click handler, I simply tell it which state to go to and the rest automatically takes care of itself.

What does that mean though? say you've clicked on PullDown and the animation of PullDown state is half-way through (meaning 1sec into the animation). If you then trigger the state change to PullUp, VisualStateManager will automatically figure out how to transition all properties adjusted whilst in PullDown State back to PullUp state, automatically.

Note: When I say automatically (it's half true) what really happens is that Blend will create some storyboards within the VisualState tags. This is done at design-time but at run-time it essentially is automated in terms of figuring out how to go from AS-IS to a TO-BE.

Pretty powerful yes?

Here's some code to illustrate how you switch between states.

   1:  public partial class NxsRibbon : UserControl

   2:  {

   3:      public NxsRibbon()

   4:      {

   5:          InitializeComponent();

   6:          CURRENT_STATE = "PullDown";

   7:          VisualStateManager.GoToState(this, CURRENT_STATE, true);

   8:          this.btnTest.Click += new RoutedEventHandler(onButtonTestClick);

   9:      }

10:

  11:      public string CURRENT_STATE;

  12:      void onButtonTestClick(object sender, RoutedEventArgs e) {

13:

  14:          switch (CURRENT_STATE)

  15:          {

  16:              case "PullDown":

  17:                  CURRENT_STATE = "PullUp";

  18:                  break;

19:

  20:              default:

  21:                  CURRENT_STATE = "PullDown";

  22:                  break;

  23:          }

  24:          VisualStateManager.GoToState(this, CURRENT_STATE, true);

  25:      }

  26:  }

VisualState Manager is quite a powerful feature within Silverlight and Expression Blend. You just have to treat it with care, and keep your eye on the durations as the StateGroup will always win the fight.

Silverlight Experiment: Create a PullDown Menu using Storyboards.

scbarnes — Sun, 29 Jun 2008 07:09:59 GMT

This is a basic example of how to create a "PullDown Menu" using Silverlight and Expression Blend.

The Objectives

The GUI will have a PullDown Menu (UserControl) under the main outer chrome. It's intended that when a user clicks on the "MainMenu" it will not only change state, but animate down or up (depending on the previous state it was resting in - default being Up).
The End User will need to have the ability to interrupt the animation should they decide to cancel the action, as a result the menu will react to the End User's intended action and reflect the direction change as well as state change.

The Expected Outcome.

The Blueprints.

1x OuterChrome Control
- 1x TopLeft Corner Bitmap (Static)
- 1x Top Bitmap (Stretch Horizontally)
- 1x Left Bitmap (Stretch Vertically)
1x PullDownMenu Container
- 1x InnerMenu Control (NxsRibbon)
- 1x LowerBar Bitmap (Static)
- 1x PullDown Tab Bitmap (Static)
- 1x PullUp Tab Bitmap (static)

The Process

Create the the WireFrames.

Create a UserControl in Blend, call it NxsApplication.xaml (this will be your base)
1. Change its Metrics to be 1000px, 760px.
2. Change the NxsApplication.LayoutRoot from Grid to Canvas (as you want things to freely float).
  
  NxsApplication.xaml
```
   1:  <UserControl x:Class="RCIA.Containers.NxsApplication"
```
```
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
```
```
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
```
```
   4:      Width="1000" Height="760">
```
```
   5:      <Canvas x:Name="LayoutRoot">
```
```
   6:          <Canvas.Background>
```
```
   7:              <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
```
```
   8:                  <GradientStop Color="#FF000000"/>
```
```
   9:                  <GradientStop Color="#FF131313" Offset="1"/>
```
```
  10:              </LinearGradientBrush>
```
```
  11:          </Canvas.Background>
```
```
  12:      </Canvas>
```
```
  13:  </UserControl>
```

Create a UserControl in Blend, call it NxsShell.xaml (this will be your Chrome)

Keep NxsShell.LayoutRoot type as Grid.

Inside NxShell, define the Grid Definition as having the below (you basically want to use the Grid to help you scale-9 the overall assets).

NxsShell.xaml

   1:  <UserControl x:Class="RCIA.Controls.NxsShell"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   5:      <Grid x:Name="LayoutRoot">

   6:          <Grid.RowDefinitions>

   7:              <RowDefinition Height="30"/>

   8:              <RowDefinition Height="*"/>

   9:          </Grid.RowDefinitions>

  10:          <Grid.ColumnDefinitions>

  11:              <ColumnDefinition Width="30"/>

  12:              <ColumnDefinition Width="*"/>

  13:              <ColumnDefinition Width="30"/>

  14:          </Grid.ColumnDefinitions>

  15:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Fill="#FFFE0000"/>

  16:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="1" Fill="#FF213986" Grid.ColumnSpan="1"/>

  17:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="1" Fill="#FFA42020"/>

  18:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="2" Fill="#FF0943FF"/>

  19:      </Grid>

  20:  </UserControl>

Create a UserControl in Blend, call it NxsRibbon.xaml (this will be the container you place your ribbon into).

NxsRibbon.xaml

   1:  <UserControl x:Class="RCIA.Controls.NxsRibbon"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="1000" Height="180" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   5:      <UserControl.Resources>

   6:          <Storyboard x:Name="PullDown">

   7:              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

   8:                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="130">

   9:                      <SplineDoubleKeyFrame.KeySpline>

  10:                          <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>

  11:                      </SplineDoubleKeyFrame.KeySpline>

  12:                  </SplineDoubleKeyFrame>

  13:              </DoubleAnimationUsingKeyFrames>

  14:          </Storyboard>

  15:          <Storyboard x:Name="PullUp">

  16:              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

  17:                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0">

  18:                      <SplineDoubleKeyFrame.KeySpline>

  19:                          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>

  20:                      </SplineDoubleKeyFrame.KeySpline>

  21:                  </SplineDoubleKeyFrame>

  22:              </DoubleAnimationUsingKeyFrames>

  23:          </Storyboard>

  24:      </UserControl.Resources>

25:

  26:      <Canvas x:Name="LayoutRoot" Background="#FF0D0D0D">

27:

  28:          <Rectangle Height="160" Width="962" Canvas.Left="30" Canvas.Top="-115" Fill="#FF35E50C" Stroke="#FF000000" x:Name="rectangle">

  29:              <Rectangle.RenderTransform>

  30:                  <TransformGroup>

  31:                      <ScaleTransform/>

  32:                      <SkewTransform/>

  33:                      <RotateTransform/>

  34:                      <TranslateTransform/>

  35:                  </TransformGroup>

  36:              </Rectangle.RenderTransform>

  37:          </Rectangle>

  38:          <Button Height="23" Width="81" Canvas.Left="911" Canvas.Top="149" Content="Open..." x:Name="btnTest"/>

  39:      </Canvas>

  40:  </UserControl>

Inside NxsRibbon.LayoutRoot, create a rectangle and a button.
Name the button "btnTest".

In NxsAplication instantiate the GUI assets.

In NxsApplication.xaml.cs instantiate NxsRibbonMenu UserControl. As this will ensure it has the lowest z index.

In NxsApplication.xaml.cs instantiate NxsShell UserControl. As this will ensure it has the highest z index.

NxsApplication.xaml.cs

   1:      public partial class NxsApplication : UserControl

   2:      {

   3:          public NxsShell NXS_SHELL;

   4:          public NxsRibbon NXS_RIBBON;

5:

   6:          public NxsApplication()

   7:          {

   8:              InitializeComponent();

9:

  10:              // Add the Nexus Ribbon

  11:              NXS_RIBBON = new NxsRibbon();

  12:              this.LayoutRoot.Children.Add(NXS_RIBBON);

13:

  14:              // Add in the Nexus Chrome.

  15:              NXS_SHELL = new NxsShell();

  16:              NXS_SHELL.Width = Width;

  17:              NXS_SHELL.Height = Height;

  18:              this.LayoutRoot.Children.Add(NXS_SHELL);

  19:          }

  20:      }

In NxsRibbon.xaml.cs register the btnTest to initiate the PullDown and PullUp Animations.

In NxsRibbon.xaml.cs register the Animation state to ensure that if the user wishes to interrupt either the PullDown/PullUp animations that they react in a way that halts the current storyboard, switches to the opposite storyboard and then continues to play.

NxsRibbon.xaml.cs

   1:     public partial class NxsRibbon : UserControl

   2:      {

   3:          Boolean CURRENT_PULLDOWN_STATE;

   4:          Boolean IN_MOTION;

5:

   6:          public NxsRibbon()

   7:          {

   8:              InitializeComponent();

   9:              this.btnTest.Click += new RoutedEventHandler(onButtonTestClick);

  10:              this.PullDown.Completed += new EventHandler(PullDown_Completed);

  11:              this.PullUp.Completed += new EventHandler(PullUp_Completed);

12:

  13:              CURRENT_PULLDOWN_STATE = false;

  14:              IN_MOTION = false;

  15:          }

16:

  17:          void PullUp_Completed(object sender, EventArgs e)

  18:          {

  19:              CURRENT_PULLDOWN_STATE = false;

  20:              IN_MOTION = false;

  21:          }

22:

23:

  24:          void PullDown_Completed(object sender, EventArgs e)

  25:          {

  26:              CURRENT_PULLDOWN_STATE = true;

  27:              IN_MOTION = false;

  28:          }

29:

30:

  31:          void onButtonTestClick(object sender, RoutedEventArgs e) {

32:

  33:              if (IN_MOTION)

  34:              {

  35:                  if (!CURRENT_PULLDOWN_STATE)

  36:                  {

  37:                      IN_MOTION = true;

  38:                      CURRENT_PULLDOWN_STATE = true;

  39:                      PullDown.Pause();

  40:                      PullUp.SeekAlignedToLastTick(PullDown.GetCurrentTime());

  41:                      PullUp.Begin();

  42:                  }

  43:                  else

  44:                  {

  45:                      IN_MOTION = true;

  46:                      CURRENT_PULLDOWN_STATE = false;

  47:                      PullUp.Pause();

  48:                      PullDown.SeekAlignedToLastTick(PullUp.GetCurrentTime());

  49:                      PullDown.Begin();

  50:                  }

  51:                  return;

  52:              }

53:

  54:              if (!CURRENT_PULLDOWN_STATE)

  55:              {

  56:                  IN_MOTION = true;

  57:                  PullDown.Begin();

  58:              }

  59:              else

  60:              {

  61:                  IN_MOTION = true;

  62:                  PullUp.Begin();

  63:              }

  64:          }

  65:      }

The Conclusion

I found that it was faster to create the initial StoryBoard for PullDown. Once I was happy with the way it animated in/out, I then Duplicated the StoryBoard (via this ). I renamed the PullDown_Copy to PullUp and under the same icon () I "Reversed" it. This basically figured out how to revert the various properties that are being changed to the appropriate state.
Keeping track of the IN_MOTION and CURRENT_PULLDOWN_STATE was relatively easy, and although I have a few ideas on how we can improve this concept going forward, it's pretty trivial to setup.
Adjusting the animation Easing via the KeySpline editor can attract various results on both Up/Down. It pays to think more about how this will affect the End User firstly, but also the fundamental question you will need to answer going forward "Is this going to annoy them?" if the answer is yes, look to shorten the animation duration or adjust the Easing.

The Outcome.

This took me less then 30mins to complete. You will also note that I used only basic elements found within XAML to setup the wire frames. I did this as this illustrates that an Interactive Persona can setup the various pieces required to ensure the animation and basic events are ready for the next step in the workflow.

This means that you could have someone sitting designing the textures and detailed composition of the artwork in their nominated Art Tool. At the same time you could have an Engineer writing the actual NxsRibbonMenu so that it mimics the Office Ribbon concept.

Once all three have completed their individual contribution to the GUI, they are then able to meet for a "Happy meeting" where they basically look at how they are going integrate the pieces into the GUI.

In this case, the Interactive Persona is able to swap out the rectangle placeholders and apply specific bitmap textures or whatever it is that is required to execute on the visual finish.

Once that's completed, the same persona is also then able to swap out the dummy NxsRibbonMenu place holder and implant the real Control, with it's own black boxed composition.

This could highlight that using Expression Blend, Visual Studio and Silverlight that three individual personas are quite able to build, design and animate independent of one another. It does however also indicate that there needs to be a Interactive Architect in the room to ensure all the various placeholders and external pieces fit into their respective places within the overall Application composition.

Special Notes

Nexus is a home grown Silverlight framework being written by a few friends / co-workers of mine (we decided to collaborate on an idea to test some best practices out). This framework isn't likely to be publicly available but should it do so, I'll let you folks know at that appropriate point in time.
All visual assets are copyright to me. Basically if I see you stealing my art, I'll hunt you down as don't be that guy/gal whom does that. Ask though should you wish to use it, as I'm pretty open.
This was fun and that's what this whole RIA conversation is about, having fun.

RIA is slowly fading in terms of it's definition.

scbarnes — Sun, 20 Apr 2008 04:26:04 GMT

When I first started the RIA Evangelism role in Microsoft, I had this nagging feeling that the term RIA was just all over the place. Depending on which technology you are backing and which stream of alliance you uphold, the truth is the term was destined to be abused before it really took off.

I even tried to provoke conversation around it, by waving a big red flag and saying "Microsoft is about to use Rich Interactive not Rich Internet Application, debate me on it". Oh they debated me on it and lots of it, as the end conclusion was simply folks didn't care what the definition was, so long as we all understood Macromedia owned it in 2002. Such logic baffles me to this day.

I started to see some Adobe Staffers in many respects abuse the very term they acquired, by mixing the pool with Rich Branded Experiences against RIA, and if it had Flash - well it was RIA. I challenged many of them on that, and the result ended in personal character warfare.

After all these blog battles, arguments, debates and so on, the term is becoming lost in the struggle over which technology is better than the other. The true essence of what I thought RIA stood for has now become a buzz word, much like the "Web 2.0" or "Social Networking". That's sad, not because I am attached to the term, but simply because it's a much easier way for customers to frame the conversation with other customers, and not have to spend time educating them.

Ryan Stewart, has recently tried his best to define the term RIA, but has failed. It's not that Ryan doesn't get it, but simply - who is he to define the term? (In that it's not about Ryan, but who is he to define it? debate that first and then follow up with a merit debate on the semantics of the term).

Some folks loyal to the Adobe cause will support him, others whom aren't will argue the point with him (have already). In the end, the term is now up for debate, with no single winner or owner but simply open for mob rule.

The team with the biggest horde will own the definition - for a while, that is until someone or something with large amount of credibility and marketing power will change the landscape once again.

Can you sit here and honestly blame Microsoft in many respects for leaning more towards the term Rich Client Platform vs RIA, sure it doesn't start the conversation with the right framing - as most regard RIA has holy and all that is good ( DO NOT TOUCH stickers are ready to put around it's term). Yet, Rich Client Platform is simply a way for us internally to define what it is we are setting out to do. To build a Rich Client Platform.

Welcome to the Internet, where a terms definitions is as good as those who lobby for it inside wikipedia. Mob rules.

RIA Designers are smart.

scbarnes — Thu, 13 Dec 2007 05:01:06 GMT

One thing annoys me more than anything in this world, is when I hear folks whom aren't designers refer to them as "pony tail, black skivvy wearing..." and the comments trail off.

It's not that I care whether they think we have pony tails, it's more to the point that it smacks of contempt at times for what it is these folks do. In that, I don't think it's deliberate and I'm sure in most cases it's said with a positive tone, but underneath it all there is a slight amount of "contempt".

I personally think interface designers are a smart breed and especially those whom are skilled in RIA. As when you look at most RIA solutions or any interface in today's software, one thing that gets overlooked is depth.

In that when you're designing a button for example, there are highlights and shadows associated to the design. That's the basics pretty much there, but when you then look at other elements and composition of some interface designs, have you not noticed the visual representation of depth found within these designs?

It doesn't really stop there, then there is also the colour selection, in that what colours are correctly placed within to underpin the usability of how an end user is able to navigate through various checkpoints in a User Interface.

This is all done at the design stage in most counts, as once an initial theme has been settled upon, the designer not only keeps that momentum going forward but at the same time is conscious of various variables that need to be factored into the overall equation.

Designing an Interfaces for RIA isn't always about shape adjustments, colour composition and pony tails. At times a lot of thought goes into both the x,y & z axis of how one is able to look at a 2D visual design and almost walk away believing they are viewing 3D but from a "front view".

So if you're a non-designer today, and you speak about them tomorrow, spare a thought for the thought process these folks go through in order to help make software what it is today.

Putting the Rich in RIA : User Account Profiles.

scbarnes — Sun, 02 Dec 2007 12:58:25 GMT

A User Account Today.

Typically when you set out to build a RIA, you look at what data you're about to keep about a persons account. In that obviously "Username, Password and Email" are three key pieces of information you need to begin. The rest is the other metadata associated to an account, and in CRM's you'd go deeper in terms of phone numbers etc.

The data is up to you and I'd never dictate what you should and shouldn't capture. What I am focused on is how you present that data, in that how "Rich" do you want the experience to be in terms of presenting what is probably the most boring data in a RIA.

I'd wager majority use Tabs + Forms and basically categories this into neat portions that are close to being semantically correct (in terms of which heading they fall under - look into information architecture).

Context is what though?

What's the context of having a person(s) username & password in a form along side their other information? Isn't this more of a security thing vs a personal bio? What if you're profiling your accounts based on experience they've had with you as well? where do you put that data?

Point is, suddenly your tabbed approach starts to get bogged down and the next thing you know it, you're facing a comprehensive set of tabs (stacked ontop of one another most likely) and the form probably grows in metrics - width/height to accommodate).

Let's put the Rich back into RIA.

Well, I'd now argue that if you're using some of the new RIA technologies, why the heck are you using Tabs? In that, you've got the ability to go beyond a form now, in that the technology is a blank canvas and the experience is up to your imagination (alongside some basic Usability Principals).

That's the key, why present a form which after traversing through a grid presents you with more then you bargained for. Why drop the experience there, why not approach it differently - radically if you will.

Step away from the Tabs as you know it..

In the blow example I did something trivial, I took all these pieces of a users profile and applied them in a format that is well similar to a Mobile Phone.

The reason I did this is what's the best device on the planet at the moment that has almost figured out how to cram a lot of data into a small portion (screen). In that assign "icons" to represent what the tabs would typically do, but also do so that it's broken into piece meal format(s). Let the user then decide which part of a users detail they want to drill into.

That's all well in good, but where is the Form?

So once the "Profile PDA" (if you will) has been conjured up, how does the end user get into the form?

Well, this is where your imagination needs to do it's job. In that take the above example, it states that I've selected the "User Profile" card, which in this case means "this is the users contact profile" so the form could then spring out (overlay the top of grid style layout) and present the persons details in a similar looking "Contact Card". (Sorry still working on the artwork for that).

Point is, you've just isolated the overall account metadata into one small piece, once clicked it expands into a richer experience (I assume your next step will be rich!). The experience is the motivator here, in that let's make this form almost feel like some GUI found within games, like you've hacked into some year 2055 future looking CRM - have fun with the data but be serious with it, as it's business still.

What are your users thinking?

I hinted in an article before that when you build your RIA's you should think about monitoring the users interaction with it. In that in the above GUI you will note a "smiley speech bubble icon". This is basically an idea whereby when a user logs into the system, they not only get asked their Username & Password but also "how you feeling right now?".

Based on their answer, the Profile PDA adjusts it's UI to suite. This will then empower the owner of the RIA system to get an understanding of the emotional state of their users (why isn't important, it serves this example so stop asking questions).

let's assume when I logged in today, I nominated my emotion as angry. This then updates a row in a database (simple flag) and the UI reacts to my emotional state (in that what if the outer GUI would reflect on colours that would help cheer me up or does something that makes me laugh? - maybe a joke in a newsticker or a funny youtube overlay).

Emotions are for weaklings, I love Vista how does this matter?

Well, as you'll note in the Profile PDA next to the "Scott Barnes" part, there is also a "Vista Zealot" icon (I got these from an icon set called "Forum Faces"). In my RIA I'm curious to know what type of breed my profiles are? in that what do their peers think of them and again, can the User Interface react to suite this (advertising could suite more towards Vista compatible software instead of BeOS hehe). If the account in question was a Mac fanboi etc you could also insert an icon that represents this.. etc etc..

Conclusion.

The objective of this post was to trigger thought, in that you are armed with some of the greatest, most agile and excited technology to build with and the first thing we typically see in most RIA's is a typical "form" mentality and I often ponder on this. I can see it's easier to ship, and well I don't fault that at all. It just irritates me the most though, as I think user experience isn't just about pre-defined design patterns, it has more potential and the objective I'd like to see tomorrow's RIA have is that they react to context.

I want software to react to me for a change, I want to be able to punish and reward my software and lastly I want it to be something that can adjust my mood and that of the work force.

Software isn't just about balancing general ledgers, it can also be about fun and just because you're building a complex financial system doesn't mean it also can't be fun at the same time.

Think about it, why does the Friday emails get sent around in email about some funny random act that happened around the world. It helps break the day up a little and that's my hope for RIA.

Q.What's that RIA you're building Scott?

I've got this idea for a RIA Platform, it's something I've been very slowly chipping away at for the past 2 years. It's being built in Microsoft technology (was built in Adobe Flex), and I'll expand more another day, as I'm not ready to talk about it just yet (it's my personal project that I hope to release before I grow old and retire heh).

(I'm also thinking of ways to one day pitch it internally to become a Microsoft Product.. i have but a dream..)

Usage Metrics in your RIA

scbarnes — Tue, 20 Nov 2007 17:00:01 GMT

Inspiration comes from Games.

I was at MIX ON CAMPUS (Brisbane) today and I was listening to one of our guest speakers (Ross Brown) talk about about some of the projects / research his students are doing with regards to games. One part of this session that really caught my interest was the metrics associated around the usage of games and how one is able to pinpoint events / ripple effects associated to game design.

An example was around how in a game like WoW, where a druid suddenly picks a fight with other characters, what would be the ripple effect of this event occurring. Using a tracking graph, one is able to pinpoint when the druid attacked and one furthermore is able to determine if the druid is now to powerful or not powerful enough, thus restoring balance back to the game.

Games are RIA's but have different content.

When you factor in a game like World of Warcraft vs Hotmail, what are the differences (other then the obvious context). In that in its primitive state, HumanA logs into ServiceA, HumanA interacts with ServiceA using various features within ServiceA. HumanB does the same as HumanA, only they use it differently (maybe left handed mouse etc).

If you're not tracking this, then how do you know what's really going on behind the scenes? Where are the usage bottle necks and how do you ensure that User Experience Architect that you forked out a small fortune for isn't just some crack pot fortune teller after all?

The only real way is to validate your usage. In that look at ways in which you not only monitor the structure of your user interface but log various events within it. This in turn provides valuable data in which you can later aggregate and analyze to determine what the next features will look like or more to the point which features constantly get overlooked or never used.

This isn't new, don't get me wrong and the idea has been around for quite some time. A lot of folks do do this in fact one local guy within my area and resident WPF Guru has done this many moons ago (Joseph Cooney). He was measuring various data points to determine what his consumers of his application (Thoughtex) were up to.

We also see hints of this in mainstream auto-mated bug reporting found within all Operating Systems ("Do you want to send a report back to Microsoft") etc.

Yet, we need to do more .. much more, especially in the RIA space as this will help underpin/elevate RIA perception further.

Reward them.

Once you figure out what you want to measure and why, and it can be anything just so long as it doesn't impact on performance. Yet, be careful at the same time.

For instance, I floated the idea of XBOX Achievement style concepts past our Hotmail folks internally (ie wouldn't it be great to have more areas of Hotmail open up with the more you use it? reward the power users if you will). They loved the idea and took it onboard, but they have reservations.

I thought "Why.. why on earth would you not act!"... simply put, privacy.

Can you imagine the fall out if we secretly monitored not only your behavior with Hotmail but all our software? In that whilst we have positive intentions in mind, at the end of the day this is still a privacy thing and it would be a delicate balance to strike.

The intent though is there, figure out a way to reward your power users and not so much your lesser users. As you in theory stand a better chance of driving User Satisfaction that much higher.

RIA is primed for this.

This is something RIA can do today, as majority of the time RIA solutions have to constantly talk back and forth between servers. Usually the outbound call is simply a case of "getXXX()" which is small in size and usually the returned response is where the hurt kicks in. So why waste that call and why not send some extra metadata down the pipe to record this information for later use.

RIA is primed for this kind of thinking as the technology itself is agile enough to cope with this, and more to the point has enough technological prowess in the room to do some smart overlays with that said data (in that you could heatmap areas of interest within your GUI).

This to me is where analytics in the future should head, it's providing a service that RIA Producers can tap into and relate such information back to their chosen solution. Not only that, it also helps determine performance spikes, as after all you're exposing a desktop like experience to the entire web, much like most mainstream games do today.

What impact does this have and how can you correlate your UX against your server logs in the event of a crash?

If anyone needs me, I'll be talking to the Live.com guys about this and seeing where I can take some of my ideas around this further.

Understand, RIA isn't about just putting a presentation tier ontop of disparate systems, it's also about ensuring it fits snugly within an entire platform and what impacts it can and can't have.

POC #1 - Project Harmony (pt1) (Silverlight & Flash)

scbarnes — Thu, 15 Nov 2007 11:18:00 GMT

I've been enjoying the overall experience of what Silverlight has to offer since I started with Microsoft back in January 07. That being said, I've often been an internal "goto" person at times for some Flash advice on behalf of Microsoft customers around the world.

In light of this, recently I also encountered a situation where a customer was looking to use both Silverlight and Flash together, something which I kind of gave a confused look at? (ie .. not because I wanted them to pick ours etc, but more to the point what was the root of the problem).

The problem was simply that they had deadline to meet, they wanted to retain the video in Windows Media format but were looking to use the GUI inside Flash as a base. Fair enough, this isn't a Zero Sum Game and we play well with others.

This isn't the first I've seen similar stories around this, but mostly its from Design shops around the world whom are keen to embrace Silverlight and Flash (fingers in both barrels) but are kind of skittish to start with (i.e. the assumption is really you have to pick a team, red vs blue).

Thus, I decided to put together this proof of concept, titled "Harmony". The project is quite extensive and I'll spend the next month dissecting it and talking about different cross-sections of how you as a designer & developer are able to produce compelling enriching experiences with Silverlight and that you can execute on your creative vision. The rest is simply semantics and bits/bolts.

In this first iteration of my Project "Harmony" I wanted to test to see how well the performance would be in the event one was to use 90% Silverlight and 10% flash. In that overlay Flash on top of Silverlight and see what happens.

The results speak for themselves, suffice to say that I really put in a lot of gratuitous animations in Silverlight to really try and break the performance overall.

You can view for yourself here:

http://www.demo.members.winisp.net/poc1/

(Note: Link Requires Silverlight 1.1 and Flash 9.x)

My Objectives for this first iteration was:

Objectives (v1.0)

Determine to see if Flash (Transparent windowless) degrades in performance in the event it sits on top of Silverlight.
Determine if PNG overlays impact the performance of the video whilst mixed with Flash.

Conclusion (v1.0)

I did see some performance degrading on both technologies, but that is mostly due to both making use of alpha transparency (I'm yet to meet a runtime of any brand that can withstand alpha transparency)
Working inside Flash & then crossing over to Visual Studio / Expression Blend is not for the feint hearted (I kept tripping up in C# vs AS3.0 scripting syntax hooks hehe - nothing against both technologies but its more of a mind map thing).

Highlights (v1.0)

Using PNG's a designer is capable of doing some interesting things to a graphical interface. In this case used a bullet that appears to not only be embedded into the TV Screen but also shatters it.

I also added the "bullets" in the top right corner as PNG overlay to also test how 2xOverlays inside the Video would perform.
Using Video Reflection within Silverlight, one is able to really bring home a gloss finish by giving it a "glass" effect (as we all know there isn't enough glass effects online
Using an infinite loop within Silverlight, I was able to create a "ambiance" feel to the UI by making two sets of images fade in/out underneath the Flash area and the Silverlight Video. This again, was to really see how the performance would go with a Silverlight animation underneath Flash.

Using Adobe Photoshop for the bitmap artwork, I stumbled upon a technique whereby if you take a photo, duplicate its layer and then apply "gussian blur" with 50% transparency it kind of gives this glow/ambiance effect commonly seen in most games today.

Silverlight (Video aside of course) handles its progressive loading of assets in a unique way, I'm yet to put my finger on it but I must look into this more as I expected the GUI to take much longer to load (as there aren't any preloaders in this design).
The Flash Slider (ie works like iTunes) was done reasonably quickly, and the code has already been ported to Silverlight suffice to say, it looks seamlessly integrated within the GUI and unless you don't have Silverlight or Flash installed, it would argueably be forgiven as being part of one technology not 2.

It's a small experiment at first, mainly to test the waters and see what holds together initially.

The walk away message here is simple, this isn't a Zero Sum Game firstly and I want to stress that the most. The other impact is that if you're keen to try Silverlight but aren't quite ready for that big leap, it's ok you can use both without penalties implied.

The last but most important of all, is prove your concepts initially. In that if you're looking to switch from using Flash (for whatever reason) and aren't bold enough to do the lock stock and barrel or aren't allowed to, that's ok. Establish some objectives initially, build a Proof of Concept (POC) and chip away at the idea, as you will no doubt learn both technologies limitations faster than any book can really teach you.

The secret of a truly successful RIA in my opinion is knowing the technologies limitations.

The next POC (pt2) I'll talk more about the JavaScript Bridge and how I was able to make the Thumbnail Slide load up the Video Playlist etc. I'm also putting together some Video Casts on not only how I made this but also will upload the code once I get it locked into Codeplex.com (open source). All code & design is hand-made by myself only.

(NOTE: This is a crude, raw POC and progress bars etc for both technologies aren't important for this initial purpose. They are coming, and I'll talk more about that later. Again, this is a POC so don't lock this down as some end to end final production grade solution).

(NOTE: I used Teamfortress 2 Artwork, because it's my favorite game at the moment, I have personal history with it and well, the Soldier video is by far the funniest game trailer I've seen in quite some time. Valve Software are legends in my book - My Steam ID is "[te] Skittlez")

Next: The "HOW" (Code Dump / VideoCast).

Related Post: Writing Proof of Concept RIA's

Writing Proof of Concept RIA's

scbarnes — Sun, 11 Nov 2007 13:35:24 GMT

When you sit down one night and decide to road-test a theory or an idea you have, then a Proof of Concept (POC) is something you should consider. That being said, when you do decide to write a POC knowing the difference between when you are writing a POC vs Application is something you can easily fool yourself into doing the later (ie I swore it started out as a POC, but here's my RIA anyway).

I say this from experience as this week I started out with a basic POC and then it slowly evolved into an full blown RIA, which don't get me wrong is fantastic to showcase once it's ready for public viewing (closing out bugs now, and about to upload). Yet, this is not what I set out to do...

It's a struggle as when you start out with a POC, you want to evolve it or you can see points where you think to yourself "..hmmm.. if I get more traffic hitting this, it could crash there, ok better go refactor that code and fix it up a bit.." - that's when you should halt and think to yourself - what are you doing here?

Knowing when to pause, reflect and push ideas like that aside is the true art of writing a successful POC (in my opinion). As the best part of stating "..It's just a POC.." is that you get out of jail free cards in terms of:

Design Patterns
Performance
Syntax / Coding styles (aka Code Reviews)
Expectations.

There are more if you consider it further, but those are the main four that rest on one's shoulders at times when writing a RIA.

"...How will this application handle under performance.."

"...How am I going to architect this so that I don't bloat the code or back myself into an OOP corner..."

"...Hmm.. I should really spend more time on the transitions as that's what visually people are expecting..."

What I normally do before I start a POC, is write up a list of Objectives. I call it my "POC Quest Log", in that what am I trying to prove? What are my goals and benchmarks associated with the projects.

I also keep a diary of the overall progress (In this case a Video Diary). I do this as it can at times be something you can go over again and get your bearings on say a year from now when you need to evolve a similar concept like the one you wrote further.

Knowing when to evolve later vs today, is a key balancing point when writing POC RIA's.

An example came tonight. I'm writing a Component (in Silverlight) that works like iTunes Slider, in that you have dots that represent "pages" and when you click next/back the slider animates between these "pages" within the Slider.

I got the basic prototype working in under 30mins. Yet I started to think about "well, what happens when there is like 100 items, what will this thing look like.." and began heading down this code "rabbit hole".

When, in the end the idea has been proven, that Masking, Using Animation Tweens and ensuring Mouse Behavior is intact. Mission successful, move on.

Further with this example I was so worried about making sure the GUI would react to the way it was skinned (in that the arrows were 20x20 pixels, but what if they were 45x45 pixels tomorrow!). Again, don't worry, lock it in and put a big comment in between "sorry, if you want this to be elastic, then code it your darn self.." not only to add to this, but don't be afraid to use "green squares" to represent where your actual bitmap is likely to go.

That is the spirit of POC's, achieve your objectives, put a line through them when you reach those milestones and learn to back away as you'll end up in a time sink.

POC's are also the most perfect way to embrace a new technology or illustrate to others how a technology actually works under the covers.

I'll release this POC shortly, and it's title is "..We Play well with others.."

RIA: 10 Questions on Icon Design - I ask our Microsoft Design folks to respond.

scbarnes — Tue, 30 Oct 2007 06:08:58 GMT

I have an Icon fetish that is disturbingly wrong. In that I collect them, horde them and will happily spend Microsoft's good hard earned money on as many of them as I can find - if allowed.

Yet, what makes Icon's so special? in that why do they enhance an applications user interface to the point where it almost is lost without them. Why does Microsoft and Apple spend a lot of money and time ensuring that menu navigation and icon's are done in a manner that's not only attractive to the eye, but enhance a users experience?

Well, I decided to ask our UX folks, the same folks whom chose Icons for our operating systems, software applications and so on. I had one intent, to get to the bottom of this whole Icon business and more to see where Icon's can play a role in tomorrows RIA. RIA is going to embrace the icon market, something I have now doubt and so with this, onto the top 10 questions with Frank Bisono & Brittnie Hervey (UX demi-gods).

RIA: Difference between an Application and Website.

scbarnes — Thu, 25 Oct 2007 05:59:03 GMT

There are many things that make up a RIA today. I posted last week about Interactive vs Internet, and I think it's played out enough. Personally my conclusion is to let the "I" be silent, and it could be "Information, Interactive, Internet, Interface, Idiocy" etc. "I" of the beholder if you will.

Yet, one thing that was uncovered in the process is what really is the difference between RIA and a website? I mean technically speaking the Website of today is really getting blurry in what it's doing vs supposed to. I say this as the AJAX movement has empowered webowners (if that's the right title) to embrace JavaScript driven experiences without question (something you would of been publicly beaten up on in the early days).

This blog is what I'd classify a website, but one could also argue that it has a degree of "application" associated to it, in that think of the context of use. You visit the site, you read my posts, you decide to move on or leave a comment - if you will - you reply.

Now where have I seen that methodology before. Oh yes, email.

What are the differences between Email Messages and Blogs, especially as more and more agents popup around the globe in helping you manage all your RSS feeds. Yet, at the grass roots of them all, they are simply websites?

What is RIA today, and where is it going. Already folks from the competition are talking about branded applications being accepted as RIA? (*shrug*)

Website or Application? show me the distinct difference between Flickr and Picnik.com? once you do, compare the results against Nike+ while at the same time compare to <insert your favourite RIA here>.

Confused? I know I am and I've been in this space since 1999. I must be getting old and all this new RIA fashion seems to be skewing my understanding of a website.

Is it a case of "If it has a runtime, it's classified as RIA until proven otherwise" or is it even possible today to show a definitive split between website and application. That being said, the Rich part of the discussion will be easy, as it's simply a case of underpinning the user experience quality and degrees of such.

Overall, I doubt there will be a true definitive answer suffice to say, the term is slowly starting to crack in places and in a very subtle way, being bent to suite different agenda's. In saying this, my conclusion is that it's fast becoming a term that lacks maturity, governance and is practically the same as other terms like CMS, CRM, ERP, SOA etc.

It's what you make of it, and any whom oppose your belief is both right and wrong. It will just come down to your debating skills as to which of the two will ultimately win out.

In the end, it's all a website, just with different grades of user experience housed within an aggregated view over different layers of services.

Rich Interactive Applications.

scbarnes — Thu, 18 Oct 2007 18:39:47 GMT

I just finished a blog post by James Ward (by far the best Evangelist Adobe have today) and it was a bloody good post, so much so, it helped me formulate this post (inspiration can come from many things I guess).

“I was a young man with uninformed ideas. I threw out queries, suggestions, wondering all the time over everything; and to my astonishment the ideas took like wildfire. People made a religion of them.” - Charles Darwin

I start with this quote, as at times we all get overtaken by absolutes and assume that is the law of the land and be done with it. To challenge a belief, is never popular and to ask a community to adjust their perception can be considered misconduct or easily labeled as bullying behavior / crazy. Religions are formed based on loosely defined ideas and when an agenda is the fueling such ideas, absolute obedience is required. To then defy such obedience, those that do so can be swarmed by what I call the "policy" police, obedience must be protected at all costs.

As a result, emotions boil and nothing get's resolved, except someone sure as the earth is round, get's a beating.

Allow me to explain further.

When you think of RIA what is it your mind casts an image to first? I think each person will have a unique response, but I would hazard a guess it could/may involve a focus on brand power. If you do conjure this image, you are now sadly seeing the wrong approach to RIA and you can be forgiven as branding can be easily crossbred to produce application like solutions.

If you don't, ignore this post and continue on building RIA, then come back and show me or others :)

RIA isn't about attention/eyeballs, it's supposed to be focused on empowering end users of a defined type, to carry out mundane task through an enriching user experience. User Experience is the key, in that a true RIA solution has the power to abstract complexity through aggregation or 360 degree view(s) of content without altering context.

One would further argue this is the same principals of what a Desktop Experience should have, and I would easily agree. In fact, I hope the next evolution of the Desktop driven software does! - yet - the difference between a Desktop and RIA client, is simply that it has the ability to be positioned within the middle tier. It has the capability of being utilized on any client or device surface with minimal effort required by such end user(s).

It simply put, empowers.

It looks like a desktop, therefore it's RIA right?

If you were to take a simple example, of a typical HTML bullet list of names (eg: HR Review System). Each name represents a person or entity within a organization. The end user clicks on such name, and as a result the context of view alters and the screen repaints with what typically would be a more in depth view of such person (personal details in tabs, photos, review metadata etc). If you were to then throw in some animations, form controls, transition sequences or a desktop styled menu bar - one could then argue "behold! this is RIA, see.. it looks like a desktop".

Yet what has happened in reality? Sure the UX has gotten a better story behind it and it may be more inviting, but what really has happened to the context of view and how did this alter a persons experience from what is typically found within a Desktop solution of similar type (ahah! X-Platform you say.. hold that thought).

This is where RIA is essentially ready to take over from such a web site driven experience. It has the power to alter perception, to adjust the context further by allowing the end user to aggregate slices of such data to carry out more complex tasks yet doesn't require as much effort.

If you were to swap out the bullet list of hyper linked names, and replace them with Document Icons within a GridView Container. Each Icon has a male/female icon in the top right corner. Below such icon is maybe some other metadata (ie star rating on such users performance, profession type indicator, etc).

The UX story doesn't just change, but the overall complexity becomes more abstract as now the end user has the possibility of thinking of this bullet list as becoming a living breathing document. A document that I want to drag to another zone within the User Interface. A document that I want to cut and paste elsewhere. A document that I want to print, edit or merge, A document that I want to see pages of data to view and explore with the context of a single person in mind. A desktop experience, housed within a middle tier.

The experience changes, the interactivity of the experience changes and yet the data behind the rich client has the capability of staying static, un touched or passive (whichever you choose to best describe this). One has the ability to treat it like a document, but with hidden twists and turns along the way. As you scroll down a page of data around a person, you see form controls embedded within. You may even see video, audio or what have you around that person also embedded within - much like some Harry Potter magical news paper. RIA isn't about forms or emulating a desktop UI, it goes far beyond this.

That is Rich Interactive Application (RIA) shifting the paradigm. It had nothing to do with the Internet, suffice to say it's housed within an agent which is connected to the Internet - or - Intranet.

Whom says you can't copy and paste between Facebook and Flickr, the only thing stopping you is you're ability to aggregate the view(s) and focus on mature approach to RIA's instead of wanting Flickr and Facebook to become the actual RIA's.

RIA needs maturity to succeed.

What we are seeing publicly online more of these days, is microsite styled branded solutions being classified as RIA, something which at every turn sets the idea of RIA back further. The confusion between attention economies and application have given birth to such cross bred solutions, and as a result immaturity reigns supremacy. The loudest voices win all arguments and so the mob takes over control. The fallout / collateral damage? technology, partners and ecosystems underpinning RIA in it's early infancy can starve themselves of more realistic enterprise grade potential. Simply because of how easily perception becomes reality, how advertising and buzzwords overshadow core ideas and principals of design.

I look at a company like Microsoft. I think of many things about Microsoft, but one thing that I find most if not all will agree upon, maturity. It's a company that works very hard at maintaining maturity (patience mostly) in it's solutions and being successful is easy, staying successful - now that is the real hard trick. Is it perfect? no, but whom/what really is perfect? Today's IT Perfection is simply an evolutionary process, growing more intelligent as time passes and trying not to repeat past mistakes from not only their own history, but others.

RIA for Microsoft is important, it's the in part one of the key pillars to our future. Our over arching vision in my mind is similar to the what the original architects, engineers and designers of the Millau viaduct faced.

Millau Viaduct is a story, of defiance. Bridges are common around the world, and there are many ways to tackle them, but the ones that stand out are the ones that are defiant in their ability to do more than just allow people to go from one end to another.

Here is a bridge, that spans enormous heights and has an impressive length that would scare any politician in terms of funding (as it's construction will end up going beyond their term of employment). It crosses over terrain that roads themselves have a hard time navigating, but none the less its also made with enormous amounts of passion and it's actual design was built to inspire, to be photographed and in many ways intimidate the imagination but not scare (as well, you got to cross that damn bridge in the end).

I've studied the story of this bridge as it fascinated me, and in the end it required mature thinking, mature engineering and mature ecosystem to support it's vision. You can't build something this size without a strong partners, understanding of your target audience and more importantly the best engineers money can buy.

Microsoft brings years of experience in the software industry to RIA. It's bringing an entire product eco system, matched with partners whom have invested billions in the products it ship's year after year. It won't inherit someone else's legacy, it will look to make it's own mark, and help shape RIA into something much like what it believes marvels like Millau viaduct achieved. It won't be the only company to do so, but I would lay bets that it has the capability to raise the benchmark high.

Our vision of RIA is still being built, what you see before you today is simply "Pillar 1", the next hurdle, is Pillar 2 and so on. Understand the destination, and you will have a firm grasp on the journey ahead.

What do you want to be? an engineer? architect? project manager or critic?

Competition is a good thing right?

Hold the bridge analogy in your mind.

I started this post with a quote form Charles Darwin. It reminded me of this whole compete situation I seem to dance with some all to often. Folks, it's simple, a religion has been formed and disciples have been born and any whom oppose will be swarmed in those whom will try an enlighten.

In fact, this entire post could be argued as a religious doctrine according to Microsoft Staffer such as myself. That's ok, I hope not but I'm indifferent to what folks do with this, suffice to say two things - I don't pretend to be the oracle of that which is RIA and I hope all it does is provoke original thinking (negative or positive, but please pause long enough to consider what RIA is).

I find the RIA conversation within the Adobe blogsphere anchored down with a notion that one man's idea is tomorrows vision. It has no ending, and it really never had a beginning it was simply an idea for the future in which Macromedia products should head towards (it was bold, and the marketing brochure had me sold). It was marketed as best it could, the technology made some strong effort in the "Rich Internet Application aka Rich Client" space, but in the end it realistically didn't take as quickly as this one man hoped it would when it was authored.

Like all software companies, mistakes were made and I could point out lots but in the end, the vision changed, just the doctrine didn't get updated. A new change of the guard was established and two cultures whom once fought over which had the first piece in UX technology, united and painted what I call an upgrade to the "Macromedia RIA Roadmap" - only, it looked different to this one mans vision.

At this point, I'd like to make mention of something that stuck with me when I first heard movement of Silverlight/WPF from Microsoft (pre joining Microsoft). A Macromedia staffer told me once "...See, they know RIA is the future and so they are now validating it by competing in our market(s)".

Validating? or simply tired of waiting for the first pillar of the bridge to be built?

Competition is a good thing, and it will be something that both brands will continue to knawel away at until something big happens. That big thing could be anything and everything and I don't think it will be the one whom finishes the bridge first. I think it's going to come down to many things, but the neither has the perfect solidified answer.

RIA though, needs to evolve from where it was yesterday/today into where it should be tomorrow. Inheriting a Product Roadmap from one brand and expect all other brands to follow suite, isn't the way forward. Rich Interactive Applications is simply Microsoft's vision of "Pillar 2". "Pillar 3" may take on a different name and the ultimate choice for one and all is simply figuring out which bridge is worth investing in it's construction.

You can make dual investments or you can make just one. Competition is a good thing, but it can also limit your potential should you invest on blind faith. (now you can let go of the bridge analogy).

The Gorilla.

RIA discussions take many forms and depending on whom your buying from and why, you will argue what you will. Yet, I'm left with a final summary of it all today.

In a cage is a chimp and a 800lbs gorilla, the chimp is good at making jokes, dancing and performing amazing tricks. It captures the crowd's attention with such display and most applaud it's behavior, even the Gorilla (whilst others deplore it's caged state). Yet, it comes to feeding time, one of them goes hungry the other doesn't.

The trick for you the upcoming bridge/RIA/developer/designer/disciple is to figure out whom the gorilla is, whom the chimp is and lastly but the most important of all - when is feeding time likely to begin?.

There is no right or wrong answer and it's up to you to make what you will of it all. Everyone around you tells you what RIA is and isn't but in the end, you still don't know, because you're preoccupied with figuring out whom is the Gorilla and whom is the Chimp.

RIA can change context.

scbarnes — Sat, 08 Sep 2007 16:45:49 GMT

Context is when you look at a situation from a perspective and generally fall into a predefined segment. In that, if I look at say Microsoft Word, my context of use is to read a document - yet others may use word to construct a document. So different roles play different parts, thus the segments of the technology is defined by context.

A RIA runtime, is one of these products that can reshape and redefine context under the guise of being passive while unbeknown to others, it's quite aggressive in the way it hijacks segments of use.

A couple of years ago, I meet up with a fellow-RIA developer, who showed me approaches to using the runtime that I guess challenged the way in which I've approached technology. The way in which he did this, was he showed be a before and after approach to the same software, yet one had RIA and one had HTML. It was pretty much a straight forward deal; on one side you had an ugly HTML User Interface (UI) while on the other you had this rich vibrant UI.

The rich vibrant UI was the easier sell, as lets face it, we do tend to at times judge a book by its cover - sorry, it does happen. Yet, one thing that stood out from the start that I couldn't quite explain to others that he conveyed to me was that the perception was changed or be it, context.

You see, there wasn't just a sexier UI over the top, no, what was really changed was the fact that instead of seeing a HTML Bullet List of names, suddenly we were seeing a directory of documents. Yes that's right, documents which suddenly changed folk's perceptions or context of use (content/data didn't move a muscle).

Looking at a HTML list, it's vanilla and doesn't provide you much in terms of interaction. You move your mouse over it, at times there maybe style updates but other then that it's still simply a plain old list. A developer could spice things up, by allowing a context box to hover under the mouse pointer as one moves over the listed item. Thus giving a more detailed look into what's behind the listed item ( which the developer may get some applause for ).

Yet, what this RIA Producer did was change the context of the data's use, by turning a list item into a document. So now, end users could be expected to now approach the exact same data set (being for this example, a persons name and say their personal information) with pre-defined expectations.

The end-user could arguably, click on the document of the persons name and then expect to carry out actions such as copy or print? (desktop centric experience) The end-user could also expect to double click on the document and see a more detailed view of the end user in a report style approach. The list (heh) could go on.

So now, the context of use has changed - the data / content really didn't though - and it was done by trickery using a RIA runtime.

Now, comes the AJAX evangelist(s), I see you, sitting in the front row ready to pounce on any mention of how great runtimes (such as Silverlight) are. AJAX can do the above, no question about it, but it could also be more work to get to that point and lets face it, hunting and gathering the data in an efficient timely manner with richer UI that's controlled 100% by the agent in which its viewing across all manners of operating systems - is well... harder then it looks.

To do the above, is basically really small amount of work - in fact the hardest part is deciding what protocol and approach you'd like to take to mine such data.

The overall point I have is that RIA can really shift context into gear, it can not only provide radical adjustments to the perception of how data will be used within UI, but it can also be used as a bridge or conductor if you will over how disparate backend technologies can be bridled.

It's got an easy approach to getting the visuals out of the way, so one can focus more on data transmissions back and forth. It can work closely with DOM by not only allowing it to be overlaid on top but it can also provide a much faster turn around in injecting packets of HTML into the DOM Hierarchy given via server-side.

Context is why RIA should be used, not because "all the kids are doing it".

RIA User Interfaces, how much space do you waste?

scbarnes — Sat, 08 Sep 2007 15:49:37 GMT

The Story (Context)
I used to work for a Rail company, and outside my office was the main concourse for our "Central" station. On this platform was a coffee shop, which basically takes up around 10m x 6m of real-estate right next to the exit gates (i.e. its half-inside the gate and half-outside the gate).

Right across from it is also a McDonalds which once all cooking devices are installed etc takes up pretty much similar space.

The McDonalds is constantly busy, as approx 100k people a day move in and out of the gates so one can imagine the general population that love their McDee's.

The coffee shop however, not only sells coffee but is also part of another company that sells sandwiches and all sorts of "fresh' food. Overall, they take up twice the space as McDonalds and have a fraction of the customers.

To be blunt, they are a waste of space.

Reason being was I visited it every morning to get my Coffee and Toasted Raison toast, I'd have to line-up every morning, wait approx 10mins (on a good morning) and then began a walk of shame back to my office. I kept chastising myself for giving these folks money as I felt they weren't earning it.

They were taking up prime real-estate and not even making an effort to entice customers away from McDonalds, something which is hard but yet most would do if given a reason, given they *could* provide a healthier alternative?

So how does this all relate to RIA & UI?
Well simply put I often wonder a lot as to why most software these days have so much screen real-estate either wasted or simply overcrowded? As more and more people are adopting windscreens, the ratio of UI usability is changing, and concepts like Microsoft Office's Ribbon were born to cope with managing such real estate.

It's about maximizing someone's work efficiency through software, not conforming to everyone else's take on how information / control is to be presented? There are obviously talented usability experts (much like my co-worker Shanemo), but not all have the budget and access to guys like him. What to do? how does one ensure the UI is within context of the end user and empowers them to gain various levels of access to content buried within such an application as a RIA (Rich Interactive/Internet Application).

Context will be keep you focused.
Using the above Coffee Shop example, my ideal world would be to subdivide the coffee shops, put in more attractive businesses that "value add" to the 100k people walking past each day and hope that someone's busy life is that much easier. Same goes with UI, I'd prefer if software had UI built to suite a persons actual Position Description, rather then hunt for the Universal approach.

Think back to the software you use daily, and ask yourself on a % scale? How much do you actually use? What if someone were to aggregate all these disparate software UI's and provided you with a central one-stop shop that suites your Position Description (not just your personal context)?

Instead, its put on the "too hard" pile or "not my job" pile, much like the Eftpos/POS machines located in most stores (the ATM style side swipe ones). Has it not occurred to the Eftpos industry that a universal "side" would be great? Instead you always fumble around with it going "oops, wrong side", flip your card and try again. Think about the context in which a user is going to use your product, what are their roles within such product and lastly be bold and take risks where you can get away with it (my colleagues in the UXE's division will hunt me down for saying that) - but - seriously put together a risk matrix (likelihood / consequences) of shifting how features within the UI are to be positioned, whom knows you may accidentally come across your own Microsoft Office Ribbon success story.

Key ingredients for a RIA ecosystem.

scbarnes — Fri, 07 Sep 2007 04:55:23 GMT

Silverlight's announcement recently caught headlines, in that it's release and partnership with Novell to ensure delivery of Silverlight via Linux is supported. This in turn underpins the notion that in order to have a successful RIA (Rich Interactive/Internet Applications) story, you need partners and more to the point an ecosystem to support the actual runtime itself.

An ecosystem is something that RIA Producers need the most, as it's not just simply about punching out an application that can do something better then most HTML or Desktop clients are capable of doing. That's the end delivery and usually the piece that the end-user only see's, but prior to this the developer or designer needed to have buy-in to get to this point in time.

What are the factors that motivate a designer or developer to invest into a runtime and languages associated to such runtime? (not always in the below order either)

Community
This is initially the first piece that I'd wager most would look at. If I invest into this language and runtime, whom are likely to be my peers and influencers? where could I go should I need to have support or better yet help guide me through the teenage years of learning a new technology. A strong community foundation is critical, it's key and without this it could easily shy potential new recruits away.

Communities should be both online and offline, have a strong support with regards to User Groups and most importantly have an easy "onramp" to learning about a runtime with minimal pain & suffering. Communities also ensure the possibility of career movement, with a strong community in place one is able to put out a call (marketing channel) for "recruits" to a company on a given category within the runtime. It also means folks whom have risen in the learning ranks of a runtime, can scout for potential employers.

Communities are the oxygen to RIA adoption.

Tools
If you're going to build something, why not demand a tool that has an "instant build idea button" put inside it? It's but a small request is it not? Tools are also critical to successful adoption as technically we could write lines and lines of code within a plain old "Notepad" style application. This could work but we'd prefer to have colorize code, automated database layer mappings, compilers that understand strong typing and all these sorts of things that speed up our day to day lives in producing some RIA.

Tools need to be smart, they need to address my pain points today but also my potential future ones tomorrow and oh, could they do the same for my neighbor in the other cubicle at work. Tools need to ensure the workflow is held together for both a Developer and Designer.

Workflow
A workflow must be fluid, factor in both Tools and Skills and merge the two together, but also needs to be mature enough that should a recruit come to the table late, there is already lessons learnt that they don't have to go through in order to continue forward. A workflow can many things, it can be an approach to a framework housed within the Runtime but it can also be simply a way in which developers & designers talk amongst one another, a foundation in which they can communicate.

Partners
You can do all this yourself, but it will be a very prescribed approach and to locked in. A strong partner support base is really needed to ensure the adoption is sustained. Partners do many things, they enhance the runtimes touch points, they embrace and support the community driven events, they produce work around's or components to enhance both the tools and workflow but overall partners are the investment capitalists whom have pegged a stake in the ground and stated "we need this runtime to succeed more than the folks whom make it!" - trust the partners, as they will be the ones whom push the runtimes development teams to do better - they demand better and aren't forgiving should one come up short.

Conference Circuits
A Conference circuit is much like the community piece, but it's more of a meeting point in which partners, developers & designers are able to meet with one another, exchange business ideas, tips/tricks and haggle with the runtime makers to get better footing on a new way forward in their approach that touches on all of the above. These are also points in time, when the new stuff is usually announced and is where most of the heavy investment is put to ensure that it becomes a marketing channel all can rely on in terms of getting a message delivered fast and within context.

Services
You hear a lot of buzz words associated to services (Web 2.0, SOA, Software+Services etc) these are all in a nutshell a cloud of technology in which RIA Producers are likely to leverage when they either build professionally or in the "prototype" stages in life. Services for example like Twitter could be used to trickle announcements out to the community about a subject, but it's all done with pre-existing architecture. The trick for the runtime makers are that it must be agile enough to talk direct or via proxy to such services with minimal amount of coding possible.

Services are a great ally to the RIA eco-system, it provides an existing remote tools to leverage and with RSS/REST/SOAP/AMF etc all becoming normalized services today, one ideal goal is to have the runtimes themselves talk directly to such protocols with ease.

Distribution
A wise man once told me, there are three types of lies: A lie, Damn Lies and Statistics. Yet they do work, and so distribution can be a funny thing. It can be purely a perception thing or it can be a mathematical equation to illustrate depth of a runtimes install base.

It's also not just about how many sockets are installed, but it's more to do with how many more are likely to be installed and at what rate are the installs likely to happen. It furthermore is a subject in which one asks "where are the runtimes installed and how" overall, many questions are derived from the word Distribution.

A potential recruit will factor in two things:

Where are we today?
Where are we tomorrow?

A correct way to asses this is to look at the above in depth with questions like:

How big does the community look (as they will obviously drive distribution)
How many partners are in the room ( as they will obviously drive adoption/distribution but also pay for it in some cases - money speaks volumes).
How easy does it first look to produce a RIA? (if the ease of use is there, then its likely to occur faster)
How well seeded do the RIA tools look? (The runtime distribution isn't always the only point of call, look at where the Development/Designer tools sit in the market today, and how accessible is it to these folks should they wish to produce a RIA tomorrow)
Who is using the Runtime? (Not just how many, but what influencers out there are using it).

Thought leaders / Influencers
Lastly, these are the ones that make it all look easy. Usually an Evangelist or Community Influencer are typically these folks, as they can produce an example use of the technology that makes people pause long enough to consider the technology's strengths and weaknesses. It also can then inspire others to push the metal rivets on a runtime further and so, a thought leader is essential. These folks should then be rewarded (except if they are hired to do that) by the partners, runtime makers and community for their effort(s) as this helps motivate these folks to continue to do more, to change the conversation about RIA for better or for worse.

I usually call these folks "Indispensable Hero's" as every community needs them, the ones whom will champion the cause and be capable of going toe to toe with the Runtime development team on a subject that has such depth, it could end up changing the way the runtime will work in future generations.

A great example of an influencer would be Robert Scoble & Twitter. He used it quite heavily and in turn the degrees of influence helped twitter forward in terms of adoption. If you have the right amount of influencer(s) you can change the conversation quite rapidly.

Conclusion
We also need to show we are having fun with the technology, a RIA Producer is typically someone whom is enjoying using the technology as technically speaking, it can be a painful experience to sit between the Web and Desktop, so in turn there is an element of fun.

I say, invest in RIA for today, as tomorrow you will be better off. I wouldn't stop at one brand either, I would pickup as many as possible as interoperability is vital to a runtimes succession, so in turn you may be quite capable of mashing two or more runtimes together.