The MossyBlog Times Archives 2007 - 2009 : Design

User Experience – The Kettle.

scbarnes — Tue, 29 Sep 2009 22:55:13 GMT

How many kettles have you owned over the years? is it more than one? has it always been the same one? It’s a pretty straight forward device, you fill it up with water, it heats up and then you tip the contents out into a container. Why then are...(read more)

Apple stole my whitespace.

scbarnes — Thu, 10 Sep 2009 02:07:12 GMT

I often meet up with a co-worker (Michael Bach, Product Manger & Designer for Microsoft.com/Web) and we talk all things design. As it for us is therapy given we are constantly surrounded by engineers within Microsoft :)

One insight Michael came up with the other night is that Apple own white. It got me thinking and the more we looked at how other sites are designed, the more we both agreed that in the end its very hard today to come up with a site design that uses a big picture and is done in white without someone saying “dude, that’s so apple”.

I’ve done some design mockups for microsoft.com/silverlight that i want to pitch to the team, but am very annoyed as the more i look at them the more i can see them being labeled “that’s so apple”.

Another insight is that we noticed these days a lot of the brightest and best website designs seem to evolve around a central image, in that photography is playing a vital role in the way sites are designed.

A big vibrant picture can actually hide a lot of “meh” in a design.

Example:

http://sethsaid.com/

With a big vibrant image, i found my initial reaction to this site to be well designed.

Now without.

It just seems flat? and very monochrome. You can find more at (Web Creme Web design inspiration) and have a look at BIG Image vs SMALL Image.

Now lets take a throw-away design I was tinkering with for Microsoft.com/Silverlight.

The design is ok, but the image for me lacks life in that without the image, the design would look very basic.

Now lets see what happens if I add some other elements that i got from another site (as it struck me as a great concept to mood-board together from).

The two look completely different imho, and it sort of brings new energy levels to the design – even though its a very very basic design in the first place.

Damn you Apple, damn you and your white space designs.

Scott Out.

Function, Form, Fashion – Shanemo.

scbarnes — Thu, 11 Jun 2009 06:56:06 GMT

Shane Morris, who for the few left that don’t know is one of our User Experience Evangelists in Australia. Shane’s actually got a deep background in Usability and is a lot of his fingerprints on our upcoming release of Expression Blend – Sketchflow.

He seems to have recently done a presentation on “Function, Form and Fashion”. Although it’s only in slide deck format, I’m damn curious to see the vocals behind this interesting discussion.

Check out the deck for yourself via Shane’s blog.

Customer Experience and the 3 F's

View more OpenOffice presentations from Shane Morris.

I promise when I’m home in Australia to get Shane on camera at some point, to get his thoughts on more around Design + Microsoft in general. Shane has taught me a lot about design and I often think he’s got way more to offer us than his role provides time for.

Definitely get face time with him if you are in Australia (especially at ReMIX AU) and make sure you watch his blog closely. He’s got the gift and definitely gets design – better than I do that’s for sure.

Add this to your RSS Readers: http://blogs.msdn.com/shanemo/

Design First, Engineer Second.

scbarnes — Tue, 09 Jun 2009 06:38:10 GMT

A lot of the time folks write off Apple customers as simply being MacTards, fans that are so pre-occupied with Apple and less about the products they make. In part that can be true, I’ve meet some extreme ignorant fans, but in general that’s not true at all.

I’ve meet a lot of fans of Apple who can’t stand the company, but embrace the products they design. I’ve asked many creative souls who in Apple they worship the most, Steve Jobs isn’t on the list as much as Jonathan Ive is. It’s interesting to note this, as competition isn’t important as much as why folks CHOOSE to compete. I’m a fan of Jonathan’s work, as what i’ve read about him is that he seems preoccupied with design first, competition / politics last – seems healthy in a positive way?

Industrial Design is fast becoming the differentiator in today’s technology markets; it’s not just about the magic of software it’s also about how the software experience is presented outside the binary owned domain. Everything from the packaging through to the device it’s housed in all play a collective role. Short change one component to this formula, the rest can suffer.

It’s not easy either, if you look at the first generation of iPods compared to today’s iPhone, there is a radical change in not just ergonomics but visual design inside the software. Evolution is something that you have to fight your way through when it comes to products, it’s not about V1 or V2, but often V3 can be your sweet spot. I like to call this the “Goldie Locks” effect in that as a child I was told the story of “Goldie Locks & the Three Bears”. Basically by her 3^rd attempt at eating the porridge, it was “just right”. Its amazing how often this formula seems to happen not just in Microsoft but all brands really.

I look at the Zune from where it’s come to where it’s heading and I’m at peace with it. I feel our Zune team get design, the shame here is it’s not available outside the U.S (something I hope will change).

I look at the XBOX Team and Project NATAL and it again, I’m at peace with it all as they are looking to focus on the experience and less on the technology per say – games are funny incubation of innovation at times.

I look at the next version of Office and am amazed at how clean it’s fast becoming. Same with Windows 7.

The point is this; we have become used to judging “new” from how it looks not so much how it acts. If we see a new product come out that’s based off the old, it’s main focus is on how it looks and less what it does new – that comes later and is of equal importance.

We do judge a book by its cover, and as such we really need to tackle the design first and focus on engineering second. If you target where you want to head and then focus on how you get there, at least your goal is more weighted towards innovation and less on limitation.

I think Apple has taught Microsoft a valuable lesson in the past 3 years; it’s a healthy amount of competition as well. Adobe is also teaching Microsoft valuable lessons as well.

We are a company that has had a lot of engineering culture ingrained into our DNA – yet in the past 3-4 years I’ve seen the design discussion change from being this quiet blip on the radar to being a more focal point in discussion.

I’m not a fan of the the new Bing logo, it just irritates me at how the proportion is off, yet I’ve seen a healthy debate internally on the subject that has made me extremely proud of how Microsoft is changing its approach to design. I’m not happy with the outcome, but will happily accept this given the result was we approached a conversation differently to what I would of ever thought years ago. In the end I concede that Bing will be measured by how well it helps folks search not so much on what the brand looks like.

Engineering only gives you so much of a head start, as it can usually be matched, design however is something that if you copy becomes obvious as well the initial moment had already passed.

Design can interrupt you in a positive way. Its downside is that it’s not open to “rinse & repeat” formulas.

It’s better outlined here:

http://seedmagazine.com/content/article/a_new_map_for_design/

Engineer and Designer walk into a bar..

scbarnes — Tue, 24 Mar 2009 10:47:05 GMT

An Engineer and a Designer walks into a bar, and notices a picture hanging on the wall. It’s a picture of a dog screwing in a light bulb. The engineer turns to the designer and says “that’s just not possible, the dog hasn’t got opposable thumbs..” the designer turns and says “I disagree, he has, see…”

http://stopdesign.com/archive/2009/03/20/goodbye-google.html

Enough said.

I hate it when a designer touches XAML..

scbarnes — Sun, 25 Jan 2009 10:42:10 GMT

I’ve meet with a few die-hard Silverlight developers in my time and some feedback I get at times is how designers produce bad XAML.

“..I hate it when a designer touches XAML..” – oh? why?

My first thought was, “bad XAML?” how on earth can a designer produce bad XAML. *confused look*

After digging I find out that one of the pet hates is that the designer doesn’t name their controls properly or that they’ll use a rectangle instead of a grid/canvas etc to visually represent the UI.

I then hold up my hand and say “stop”.

Here’s the lesson folks.

Expression Studio and Visual Studio allow you to collaborate with designers and developers. We’ve made it so you majority of the time never need to look at how the tools generate XAML as it just works. That all being said, it ENABLES you to work together, you still need to WORK together.

Meaning, setup rules of engagement with one another. Tell your designer that you need certain User Controls for certain contexts. You expect a clear naming convention and so on. Let the designer execute their creative vision and don’t impose too many rules on them as you could starve the process of creative flow but agree on how the pipeline will work UPFRONT.

Don’t expect the tools to automate your communication between developer and designer, as to do that would be a one neat trick.

Word for today: Communication.

How to: Make Innerglows with Expression Blend.

scbarnes — Sun, 14 Sep 2008 22:25:04 GMT

I'm knee deep in a WPF project i'm writing for my team. I had the need today to have an innerglow, and noticed that we seem to have forgotten this little BitmapEffect of goodness (which I'll be promptly hassling Jon tomorrow for in the next revision).

That being said, as stubborn as I am I decided to try my hand at producing my own InnerGlow effect. It was actually very simple procedure to replicate inside Expression Blend.

Step 1.

Define your shape. In this case I went with a rounded Rectangle, but you can use any shape you see fit and firstly you need to figure out your base shape.

Note:
Now it's important here to note, that you need to think of this as being "Pancakes" in terms of the design composition.

Don't worry to much about pixel perfect precision inside Vector either. A illustrator friend of mine once gave me a basic rule to live with when it comes to Vector art:

You can hide a lot of imperfections, as given you can zoom endlessly you get to the point were the naked eye can't see it and move on..

Couldn't agree more.

Step 2.

Simply copy the shape (CTRL+C) and hit Paste keys (CTRL+V). It should paste exactly on top of the previous shape and retain the exact x/y co-ordinates.

Rename your layer to something suites you, I myself called it IcnInnerGlow

Step 3.

Selecting the layer you just copied, you now want to add a BitmapEffect called "Outerglow". This can be found via your Properties area, under the group called Appearance. You will need to click on the expander for this group in order to see the below.

You should see something like this:

Not really inspiring is it?

Step 4.

You now need to knockout the Fill and bump up the Border. So in this case, go to your Fill and click on the No Brush Tab.

You will also need to ensure the Border's Brush is set to a color or setting that you feel comfortable with. In this case, I chose a solid color and ensured the Opacity was 53%.

The results should now look like this.

Step 5

Now comes the real magic. You select your layer, and again hit CTRL+C and CTRL+V (duplicating your layer basically).

With this new layer (it should increase the glow effect, make a note of that!) you now want to make this a clipping path. In that everything inside this shape is what you only want to make visible. The rest is something we want to discard.

To do this, right-click on the newly duplicated layer, Choose Path, then Make Clipping Path.

A new Modal window will now appear, asking which path you want to attach this clipping path to (think masking in Flash). Choose your "InnerGlow" shape, and you should now have the following result:

Notice no bleeding beyond the shape's actual borders? Now you have a uniform InnerGlow that matches your shape. It's now up to you what you want to do from here on out, but overall this is a quick and fairly friction free way of achieving an InnerGlow using the basic BitmapEffects in place.

I personally, adjusted the color to white, added another BitmapEffect (Blur) and tweaked the settings in a way that I ended up with the following visual effect.

Doesn't look like much does it? well keep in mind I'm Zoomed In here, when I zoom back out to 100%, this is the visual look I pulled off.

Now to add some Gloss to the buttons..as we all know, there isn't enough "Gloss" online today :)

Summary.

Expression Blend isn't meant to be a Adobe Photoshop replacement, it's meant to essentially act as a bridge between the Designer Tools and Developer Tools. That being said, it has a fair amount of hidden power under the hood (when dealing with WPF). I've found that I can achieve a lot of the visual effects I've commonly used in Photoshop via Expression Blend (yes its weird I know). It requires more hand-crafting but overall visually once I've put it into place, I can re-use across a lot of controls throughout my WPF application.

I think at times the Vector UI's look absolutely crap and its dying of gradient brush overkill, so I'm hoping to show folks a few tricks here and there to produce visually appealing art.

Here's the best part of all. If you like the above, then cut and paste this XAML code into your application, and you're off to the races.

Yet another upside to using XAML, sharing art is as easy as pasting XML.

                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Grid.Column="0" Grid.ColumnSpan="1">
                        		<Rectangle.BitmapEffect>
                        			<DropShadowBitmapEffect Opacity="0.835" ShadowDepth="1" Softness="0.305"/>
                        		</Rectangle.BitmapEffect>
                        		<Rectangle.Fill>
                        			<LinearGradientBrush StartPoint="0.538462,0.98077" EndPoint="0.538462,-0.576924">
                        				<GradientStop Color="#FF232323" Offset="0"/>
                        				<GradientStop Color="#FF5D5B5B" Offset="1"/>
                        			</LinearGradientBrush>
                        		</Rectangle.Fill>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z" d:IsHidden="True">
                        		<Rectangle.BitmapEffect>
                        			<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.415"/>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy1" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z">
                        		<Rectangle.BitmapEffect>
                        			<BitmapEffectGroup>
                        				
										<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.5"/>
                        				
                        			</BitmapEffectGroup>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>

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.

WebDesign 2008 - Going from Wireframe Zero to UX Hero

scbarnes — Fri, 20 Jun 2008 00:02:32 GMT

July 21st Seattle - I'll be speaking at the WebDesign 2008 conference here in Seattle on "Going from Wireframe Zero to UX Hero".

The session is basically going to cover the "How" I guess on what's next after you've made the leap of deciding to adopt our technology (Silverlight or WPF). I'll be showcasing a project that I and co-team member David Pugmire, been working on the past 2 weeks called RCIA.

The description I gave (I always hate doing these as how do you fit 45mins of ideas into a paragraph! hehe) is the following:

The blank canvas can be a daunting and scary thing at times, even more so when you’ve just taken the leap to learn Microsoft technology. Don’t stress, as Scott will show you some tips, tricks and insights into how to go from Wireframe Zero, to UX Hero using the latest versions of both Silverlight and Expression Studio.

If folks like the presentation, I'll look into how to re-do it over the web post the conference for those whom aren't able to attend.

That's all.

http://webdesignworld.com/2008/seattle/sessions.aspx

Windows 7 Multi-touch: Think beyond your Notebook of today.

scbarnes — Wed, 28 May 2008 20:51:27 GMT

I like the rest of the world read about our Windows 7 Multi-touch capabilities and personally thought it was brilliant move on our part. As this paves the way for mainstream use around multi-touch devices, something that the next generation of applications should consider more.

That being said, one journalist (ZDNet's Mary Jo) comment did catch my eye. She states - "..I am still a non-believer. Do you want touch on your Windows notebook? I, for one, do not..."

hmmm... Yes, I agree, I don't want multi-touch on my Macbook Pro, as well the ergonomics just don't suite it, yet if you believe that the industry is going to rest on current designs as being the future templates for laptops going forward.... think again.

As multi-touch is one of these components that still in many respects needs wide-spread adoption if you will. In that if you were to seed the market with Windows 7 (hypothetical here) and say 70%+ were to have multi-touch capabilities, what would that signal for hardware vendors?

Apple for example has proven in many respects that consumers are attracted to the multi-touch component found within user experience. Nintendo Wii also has proven that with a "hands-on" form, consumers will and have enjoyed the experience.

What is the next generation of laptops likely to look like? well take the below picture.

It's a future design concept (LG eBook), but essentially the notion that today's laptops will exist tomorrow is something I just don't put a lot of stock in (Apple's made some strong hints in this space with Apple AIR).

If you take the sleek thin design found within the LG eBook and combine it with multi-touch, well, some interesting fusion between function and form can take shape here.

Still not convinced?

Ok, well let's look at the theory behind the XO Laptop as surely it hints at the value add of multi-touch?. It's design centers purely around the existence of a laptop combined with multi-touch capabilities - that's it in it's distilled form.

Getting the point now?

The future of tomorrows laptop has not been defined, and if you think the Windows 7 Multi-touch is something to just gloss over as a wasteful feature with little consumer demand? Think again, it's being prototyped today in many labs and is high on the wishlists of many technologists.

That being said, having a dream to own the next hollywood style multi-touch device is one thing, but we here at Microsoft are actually quite serious about this space.

An example, let's look at what the Microsoft Future Health folks are cooking up in their labs. Could you name one hospital anywhere in the world that would not want this vision of the future? What impact could such a technology have on sustaining human life? How could it improve accidents within hospitals?

View more here

Now's the time to get your head into the XAML Game..

Learning Maya and the side lessons i've learnt.

scbarnes — Tue, 25 Mar 2008 03:43:31 GMT

I shopped around a lot in the past 5 months as I've wanted to get back into 3D modelling for quite some time. Given my day to day life is Microsoft, I needed a non-Microsoft hobby - mainly to keep me partially sane.

I began to research what software out there can cater to my needs, in that i have a few years of old skool 3D modelling behind me, but didn't want to drink from the firehose again. In the end, I settled on Maya simply due to the communities and massive amount of supporting learning information centred around it.

That and there is a XAML Plugin for Maya - who knows, this may come in handy down the track.

One thing also occurred to me was that I didn't really care about Platform choice. In that I own both a PC and Mac but in the end, platform wasn't a high priority for me. I often wonder at how the new generation of designers of tomorrow shop around for their software or technology to adopt.

Does platform play a significant role? If so why?

Learning is also going to be a challenge, I've decided to head down the 3D Cartoon path as for me this is where the most fun surely is to be had, but it's also the easiest path to choose. Making 3D models realistic is extremly hard, and not for novice modellers.

How did I come to this conclusion? research and advice and it's interesting to see how people like myself chose learning paths like "Cartoon or Realism".

It's all interesting as you see, I look at this entire experience and think to myself - what do our customers face when adopting Silverlight or WPF. How could I improve this experience?

I'm in the right team now to make an impact on that question, just know that being a designer is many things and the hardest challenge we all face isn't about which platform the nominated software exists on, but how do i learn it and how many will support me in such a quest.

All I want is to be one day scouted by Pixar and I first need to execute on creative vision, technology philosophy be damned.

Designers, Designers, Designers..

scbarnes — Sat, 01 Mar 2008 06:31:00 GMT

Q.What do you expect from Microsoft going forward in the design space.

I meet with a lot of customers in many forms of communication. I often am surprised not by the "we are thinking of adopting Silverlight/WPF" meetings but more, "We have adopted them, but we need help".

When I get to the bottom of it, it's something they face, well all face universally, in that "we need more muses / inspiration".

I used to struggle with this years ago, when I conjured creations inside Flash. I'd sit there for hours struggling to bend Photoshop to somehow produce a design that I could take to the next level.

My intent was to always raise the bar, both personally and hopefully amongst my peers.

I see this as a critical flaw in the Adobe & Microsoft campaign going forward, in that where do people go to draw inspiration and what life raft can be thrown to them should they stare at the blank <CANVAS>.

Steve Ballmer has stated we committed to design, and we have lots of talent inside the firewall whom - we probably don't amplify enough. It's something I'm keen to explore further but, you the audience, the readership. What would you like to see from Microsoft around design,.

What are we doing wrong? (keep it constructive heh).

Meet "Dax", my idea for a mascot (not official).

scbarnes — Sun, 03 Feb 2008 19:46:00 GMT

I like both the "blue monster campaign" and SIlverlight and given I'm dabbling around in 3D at the moment, I decided to play around with the idea of combining the two.

Note: This is not the official mascot for Silverlight, instead it's simply me mucking around with 3D. Please do not use this in anyway in conjunction with Microsoft branding.

Here's "Dax" as I'd like to call him (why? dunno but Dax just stuck out as a cute name for the little guy). He's currently sitting in a surgical chair because he made fun of Flashbots new upgrades. He said they were rushed a bit to and looked like he just raided a dead storm trooper for them.

Flashbot obviously disagrees.

I'm so i love with these two cool characters, that I'm using them in my PowerPoint decks next week (TechReady 6 - Internal Microsoft conference in Seattle next week).

Here are some other picks

(Fig 1 - Since I'm an aussie, don't be alarmed at my accent fellow international audience members)

(Fig 2 - Here are your "Go Do's")

(Fig 3 - Putting Flashbot under the ...drill?)

(Fig 4 - Title Screen.. FLashbot's so proud of his new helmet)

(Fig 5 - Old title screen, Dax and Flashbot having a fall out over it)

(Fig 6 - Flashbot pinned to the wall heh.)

What resolution do you design RIA in?

scbarnes — Mon, 28 Jan 2008 04:15:48 GMT

I read an interesting post this morning on how the author wanted folks to consider the 800px resolution for their designs. He cites that although he has a large resolution, it doesn't mean that he's not also using other applications at the same time.

...But with 1900+ pixels, I keep half for the browser and half for other stuff. If you go with 1000+ pixels, it doesn't leave me with enough room for my other apps, and I've got to (ack!) scroll sideways. It's not as bad with the ball on the Mighty Mouse, but most people don't have one and it's not exactly effortless even with one... - Sammy Larbi

It's an interesting point to debate, as whilst on one hand I do agree with him that the potential for your audience to overlay multiple smaller applications is there, yet at the same time the benefits of expanding your resolution to accommodate more on screen can also be in an asset.

Screen real estate is a hard subject to nail as even if you're the best information architect in the world, you will still annoy someone with your chosen path. The trick is to figure out you collateral damage, in that what percentage of your user base is going to disagree with your design.

The easiest way to work that out is to do some basic research, check the statistics of your existing site (assuming you had one already) then ask them but do so in a way that doesn't draw attention to your intent - as humans are funny at times, they do one thing but say another.

eg:

Q. Do you think Coke is good for your diet...
A. Yes, it's terrible...

The intent was it's terrible, bad, negative, stop!. Yet they will drink coke.

Here is a tip, we are habitual creatures and if you can compliment our patterns of habit, you're likely to become less annoying.

Take this blog for example. Below is a graph indicating my resolution stats for this blog.

Would it be a good idea for me to go back to 800x600 resolution? If not what would you consider my ideal resolution.

Know your audiences technology limitations, know your customers habits and above all plot your approaches into a Risk Matrix.