Expression Blend 3 SketchFlow is for Prototypes

With the recent release of Silverlight 3 we also got a new version of Expression Blend. This new version, Expression Blend 3, includes an exciting new feature called “SketchFlow.”

Introduction

There are three main aspects involved in SketchFlow: Sketch Styles, SketchFlow Map, and the SketchFlow Project. In this blog entry I’ll look at each of these aspects and how they can help us build a prototype of an application. First, however, let’s look at a brief overview of when this is useful.

When starting a new project one of the first processes is to figure out what data the project will present to the user, and how this information should be laid out. This is usually the work of an Information Architect or a User Experience expert. When the IA or UX finishes their discovery process usually what comes out is a PDF document with annotated wireframes. These go to the designers and the designers put a pretty face on it and produces Photoshop files (PSD’s) that the Interactive Designers/Interactive Developers need to translate into a fully functional web site/web application/Rich Client Application/Rich Interactive Application. Sometimes you will be lucky enough to work with an IA/UX professional that will write up very detailed functional specifications, but in most cases an annotated comp is all you get. In extreme cases you’ll only get wireframes, site map, and the designer’s PSDs, but that’s a whole another headache waiting to happen.

I digress, this black hole of information that isn’t gathered in most cases and only written in plain English in the best of cases really needs to be improved. This is the “need” that SketchFlow solves.

Imagine if the IA/UX person could easily prototype the application in such a way that not only would the stakeholders be able to “play” with it, but the stakeholders could also make comments on it from the comfort of their own browser and send those comments back. Oh, and then add in the ability to export it all into a basic set of functional specs complete with screen shots. That is what SketchFlow provides.

I know what you are thinking because I’ve been there before. If the stakeholder sees something that is too functional they’ll think it’s finished. A statement like, “Great, so when can we go live” comes to mind. Well, SketchFlow comes with a resource files that contains styles called Sketch Styles.

Sketch Styles

Sketch Styles attempts to solve the “blue button” problem that can stop progress in a demo meeting with stakeholders. The “Blue Button” problem is the one where the wireframes look too polished and a stakeholder asks if you could make the button blue, or ask why the site doesn’t use the corporate color standards. Instead you can show the client something that looks like the image above.

This is an image of a hypothetical prototype application. It’s hypothetical for this blog, but I’ve done this for other apps and it works pretty well. However, the really cool thing here is that although this looks like a crude drawing (except for that stick figure next to a graph as that truly is a crude drawing) it is 100% functional. On the left there is a real list box, and contained within that real list box are real buttons. Those real buttons are hooked up to logic that actually changes the page when viewing this prototype in a web browser. It is only the style that makes the list box and the buttons look like a crude drawing. This crude drawing style is there in an attempt to get the stakeholders to look beyond the surface and think about what the application actually does.

SketchFlow Map

As I said earlier the buttons on this prototype actually navigate to the “Home,” “About,” and “Tickets” pages. I managed to quickly setup these pages using the “SketchFlow Map” feature in SketchFlow. This is seen in the image to the left here.

The map always begins with the first page. From there you can create as many connected screens as you’d like. This map is a great replacement for a “Site Map” because this map actually represents actual pages in the prototype. You can color code the pages, create connected components, and arrange the pages in the map any way you’d like. This information is also presented in the SketchFlow Project that we’ll look at in a minute. One more place that this information appears is in the export to Word doc. Again, this makes it a handy starting point for the functional specifications.

SketchFlow Project

Once you’ve mocked out the entire application you can export the prototype to a SketchFlow Project. Then just host the project on a web site that the stakeholders can see and you have a platform for very rich interaction between clients and developers. I won’t discuss all the features of the SketchFlow Project, but it is a very handy tool to let the stakeholders see the progress of their application as it is still in the ideation stage.

The stakeholders can make comments, highlight sections of the prototype, and draw all over it. However, to get that feedback back to the IA/UX teams is a rather cumbersome process that itself is more of a proof of concept than a fully baked product. After the stakeholder marks up the prototype, they can save those comments out to a XAML file and then E-mail that XAML file back to the IA/UX team. Then the IA/UX teams have to import that information into their SketchFlow prototype. To make this just slightly more complicated, that import action is hidden be default. You have to enable a “Feedback” pane by an option in the “Window” menu. Then you can load in the feedback. Granted that feedback pane can contain a whole history of feedbacks, but it just seems lightly less thought out than the rest of the product. This is only a Version 1 product (the SketchFlow part, Blend is actually a great solid Version 3 product) and as such I’m sure this process will be better thought out in the next version of the product.

So Where Does that Leave Us?

This has been just a real quick overview of the main features of SketchFlow. I haven’t even mentioned how you can create a temporary dataset for use in the prototype among lots of other little features. There are two (2) main issues that I have with this whole prototyping idea.

The first issue I have with this whole workflow is that regardless of how many times you tell someone that what they are looking at is a prototype and they shouldn’t look at it for style or color, but for functionality they will immediately ask you to change the font. I can hear it now, “That title has to be in Segoe, and where is our logo and the consistent user experience?” On the other end of that spectrum are the customers that like the look of the sketch style and approve it to be in their application. Give it about a year and I’m sure I’ll be running across live applications that are using that sketch style.

The second issue I have with this workflow is that far too few companies are willing to expend any amount of energy on a prototype that is throwaway code. What this means is that after the prototype is finished the powers that be will demand that the prototype code is used for the basis of the real application. I mean, it’s just a sketch style, can’t you just change the style to Contoso Corporation Style and it’s finished? If all you are looking at is the look and feel of the application you’d be 100% correct. However, there’s a reason that the instructions to “Convert into a production project” are 6 or 7 printed pages. It’s really not recommended!

The prototype was built for speed of delivery, not for security, upgradability, or maintainability. The code behind the prototype that is delivered isn’t using any best practice of software architecture or a development pattern of any discernable type. The code in this prototype is throw away. Just think of it this way, would you have your software developers write the site copy? No. In that same way you shouldn’t let your IA/UX people write any final production code. They used SketchFlow to get an idea born and to play with it. The useful parts of the prototype are the ideas that come out of it. The functional specifications are still the final delivery of IA/UX, it’s just that in this case instead of flat 2D wireframes, the developers and designers actually have a prototype to play with as they are doing their job.

Far too many people trivialize the role of the developer. It is important that people understand that a developer is not just a glorified typist. Clearly you hired experts in usability and information architecture to do the IA/UX work, and you hired experts in design to do the design work. Let the experts you hired to write code, write code. Don’t trivialize their abilities by forcing them to try to repurpose prototype code for a final product.

Outlook 2010 with Exchange 2010: Cool Feature

There’s a cool new feature that I stumbled across today in Outlook 2010. I was writing a reply to an E-mail in a Microsoft Internal Discussion List. One of the people on the To line has an out of office setup so this appeared at the top:

That’s pretty cool. Rather than send the E-mail, wait for the auto-reply to come in, Outlook 2010 will just let me know right up front that this person is out of the office! I know there are a lot of other great features in the new version of Office, but it’s the little details like this that will make it a killer upgrade.

In other news, I have recently pushed live a new version of the Office 2007 Real Life Tools web site. There’s 9 demo videos showing real life ways of using Office 2007 at home or in a home office. Find the version of the site for you here:

US English:
http://www.microsoft.com/office/2007-rlt/en-US/Office

Canadian English:
http://www.microsoft.com/office/2007-rlt/en-CA/Office

Canadian French:
http://www.microsoft.com/office/2007-rlt/fr-CA/Office

UK English:
http://www.microsoft.com/office/2007-rlt/en-GB/Office

Australian English:
http://www.microsoft.com/office/2007-rlt/en-AU/Office

France French:
http://www.microsoft.com/office/2007-rlt/fr-FR/Office

I have four more locales coming in August. So check out Office 2007 for now, but do Office 2010 when it’s released sometime next year.

You Cannot MouseLeftButtonDown if You Have No Mouse

I’m in the middle of a fairly large scale code review and I wanted to stop and alert everyone to a common mistake I am seeing in a lot of code that I read. You should use the Click event in about 99.99% of the cases that most people are using the MouseLeftButtonDown event. The reason for this is that if you have no mouse, there is no left button, and if there is no left mouse button it cannot go down.

Imagine if I am a keyboard only user, I would tend to Tab my way though a web page to find the button or link I want to activate. I would then press either the Space Bar or the Enter key to activate it. In POSH any Hyperlink would fire using either of these methods. In Silverlight either of these two methods will activate the Click event, but it will not substitute in for a MouseLeftButtonDown event.

I think this stems from Silverlight 1 where the only way to detect a click was to listen for the MouseLeftButtonDown event, but those days are long behind us.

If your intention is to actually capture an actual mouse event, then use MouseLeftButtonDown. However, if your intention is to capture a Click, use the Click event.

Installing Windows from a Flash Drive

I did not come up with these instructions. I found them on the web, but because I’ll never be able to find them again when I need them, I thought I’d post the instructions here for my own reference.

From the command line run these commands:

1. diskpart
2. list disk
3. select disk x
4. clean
5. create partition primary
6. select partition 1
7. active
8. format fs=fat32
9. assign
10. exit
11. xcopy D:\*.* /s/e/f E:\
12. robocopy D:\ E:\ /MIR

There are a few assumptions made in this. The first is that the DVD drive containing your Windows boot disk is in drive D. The second assumption is that the flash drive shows up as drive E. If either of these assumptions are wrong change line 11 accordingly.

Beyond that look at lines 2 and 3. Line 2 will list out all the disks in your system each with their own disk number starting with 0. Look through that list and find the number associated with your flash drive. Then in step 3 replace the “x” with the number associated with your flash drive.

Because I haven’t tested this out yet line 11 is still an xcopy. My personal preference would be to use robocopy and when I try this out I’ll use robocopy. That command will change line 11 to this:

robocopy D:\ E:\ /MIR

Again, I’ll try this out and report in this entry if it works or not.

UPDATE: I was reviewing the xcopy command and the options are a little strange. /s includes all subdirectories except empty ones, and /e includes all subfolders including empty ones. It doesn’t make sense to include both options. Also /f displays the full name of each file as it’s copied. This may or may not be needed/desired. I’m currently testing the robocopy version and there doesn’t seem to be any problems.

UPDATE 2: I was successful in using robocopy instead of xcopy. Step 11 above has been changed. All in all the install took 10 minutes! Now I need to try this on a netbook.

UPDATE 3: Here’s the link to the original post describing how to do this: http://kurtsh.spaces.live.com/blog/cns!DA410C7F7E038D!1665.entry?wa=wsignin1.0&sa=50757250

what I cannot create, I do not understand

Jeff Atwood blogged about a problem he is having with HTML sanitization on Stack Overflow. The argument that Dare Obasanjo and Jon Galloway were trying to make to Jeff is that it doesn’t make sense to re-invent the wheel. People have solved this problem before and their code is available for re-use. Jeff’s argument is that he’s a professional developer and he should be able to solve this problem. He punctuates his argument with a quote from Richard Feynman, “what I cannot create, I do not understand.”

This is a fine argument if Jeff were a Nobel Prize winning Physicist working on the fundamental building blocks of the Universe. However, and I’m sad to report this, he isn’t. Software Development is not science. Some of us may use the scientific process for finding and fixing bugs, but at its heart software development is an engineering profession. What that means is that most of the hard problems have been solved before. Although it is important to understand how the solution works, it isn’t necessary to re-invent the wheel.

For example, given the inspiration and the need I could rewrite jQuery, but I don’t. Why? Because someone else who does have the time and inspiration already did it. More importantly, many thousands of people have already used it and reported enough bugs on it to make that library very stable and robust. The important part of this example though is that at any time I can, and have, opened it up and read through the code to make sure that it makes sense to me. I’m not proposing that Jeff use someone else’s HTML scrubber blindly, I’m saying he should use someone else’s HTML scrubber after reviewing it for himself to ensure that it meets his quality bar.

I also chose jQuery for this example because Jeff uses it extensively on Stack Overflow. He did not go out and write his own. In fact Jeff also uses the ASP.NET MVC framework, the ASP.NET framework, and the .NET Framework. All of these are software that he could have written given enough time and inspiration. At some point it comes down to ego. An HTML scrubber is a simple enough thing that he should be able to write it, but he really shouldn’t.

Hyper-V Integration Components… Oops

We are going to rack this up to experience. I was trying to figure out today if I have the Hyper-V Integration Components beta installed, the ones that came with Windows Server 2008 RTM, or if I’d upgraded to the RTM version of these components. Well dummy me, I double clicked on the entry in Add/Remove programs and what I got was the system removed the components lick-it-y split and told me to reboot. What, no confirmation?

In other news, after the reboot the virtual machine Blue-Screened and when I repaired it I got a Windows Activation found an “unauthorized change” and it now needs to be reactivated. Activation on Hyper-V sucks ass. If you are working with virtual machines on Hyper-V be warned that monkey-ing with the Integration Components will force you to activate again.

This is double bad because now I have to activate to use the machine, then I’ll re-install the Integration Components (I need network connection man) and then this weekend I was planning on upgrading my Hyper-V server to the new Windows Hyper-V Server 2008 OS that is free from Microsoft. I’m planning that because I am currently running the RTM of Windows Server 2008 that came with the beta of Hyper-V. I want full RTM software running over there. So what does that mean? Well, as of right now this is what I’m looking at doing:

1. Activate Windows
2. Install Beta Integration Components
3. Activate Windows
4. Use the VM until I am ready to get rid of beta
5. Remove Beta Integration Components
6. Activate Windows
7. Install RTM Integration Components
8. Activate Windows

With my MSDN licensing on Windows Server 2008 I’ll use 4 of my 10 activations on this one server alone. That sucks. I guarantee I’ll have to call the activation center before Monday.

Update: Turns out I’m hosed. I need to install integration components to use the network. I have to log in to install integration components. I have to activate to log in. I need network connection to activate.

Server Unleashed Gets Upgraded with Hyper-V

I’ve been so busy lately trying to get the SQL Server Energy site out in about 15 languages that I forgot to post that last night I updated the Server Unleashed site with the new Hyper-V goodies. Of course it doesn’t talk about my favorite new product, Windows Hyper-V Server, but it’s a pretty good site, and one that has withstood the test of time so far.

The code base I thought is pretty over-engineered. I keep meaning to write a post on my experience using the MVP pattern in Silverlight but you know how blogging priority goes down when you are busy. Adding in the code for Hyper-V was fairly straight forward. The most difficult part is that the four main pillars used to be on the main navigation screen, now they are hidden behind an "Innovations” button hover state.

I’d like to thank Ben “Virtual PC Guy” for blogging about it as that reminded me to post something here about the update.

First Full SilverSpine Implementation

Today we soft launched the first site that is using the full implementation of SilverSpine. The SQL Server Energy site has gone live. Over the next couple of weeks we will be launching this same site in 15 languages all using the same exact codebase, but the content back (the SilverSpine) will have translated code. This is truly an exciting time.

The site will look similar if you have Silverlight 2 (beta 2) installed or if you don’t have Silverlight at all. We are working on the Silverlight 2 RTW version but for obvious reasons (Silverlight 2 RTW hasn’t been released yet) we didn’t go live with that.

This was a tremendous effort from a lot of people, but we’d like to call special attention to MSCOM for doing their best to stop the launch. We won, you lost. ;-)

Check it out here: SQL Server Energy

Silverlight 2 Beta 2: Should I Stay or Should I Go?

RTW for Silverlight is still off in the near future. The RC0 build of Silverlight is mainly for developers, but you have a very important web site launching in 22 languages over the next couple of weeks. The ad campaign can’t wait for the RTW of Silverlight 2. What on Earth are you to do?

Well as I see it you really have a few options.

0) Wait for RTW to switch to a newer build. This is option 0 because it isn’t really an option. You really do need to be out there testing your beta 2 applications on RC0 to ensure that you get all the updates cleaned up. This way when RTW is launched you just “flip the switch” and you have gotten rid of all of those nasty pre-release bits once and for all.

1) Leave beta 2 on your main development machine and setup the RC0 bits on a separate virtual machine or computer. For me I have the RC0 bits on my laptop and the beta 2 bits on my main development machine, but a virtual machine would work just as well.

2) Switch back and forth between beta 2 and RC0 by using the tried and true “Add/Remove Programs” control panel applet. If you go with this option you need to remove several things. I think Vista shines here because you can use the search box to help find these components. First search for “Silverlight” and you should find three things to remove: “Silverlight 2 SDK”, “Silverlight Tools Visual Studio 2008 SP1 - ENU” and “Silverlight”. Then you should search for and remove the pre-release version of Blend (that’s Blend 2.5 if you have the Beta 2 bits installed and Blend 2 SP1 if you have the RC0 bits installed).

The last step of option 2 is the difficult one. When you install the Silverlight Chainer it also installs a patch to Visual Studio. To find this in the Add Remove Programs control panel applet show updates if you are in XP or click on View Installed Updates if you are in Vista. Then look for (or search in Vista) the update with the KB#: KB956453 and remove that. Then you are clean and ready for a reinstall of which ever version you need at that moment.

Personally I think this is a lot of work. That’s why I’m glad that I have plenty of virtual machines and extra hardware that I can have several machines running different bits of stuff.

Oh, one last thing I should point out. Until Silverlight 2 ships, any site created with Silverlight 2 Beta 2 will fail to run with Silverlight 2 RC0 installed. The SilverSpine sites I’ve created all have a very rich HTML site to fall back on so I just disable Silverlight and I can surf the web without worrying about the Silverlight 2 RC0 incompatibility with Silverlight 2 Beta 2.

Silverlight 2 RC0 is Now Live!

A year and a half ago we got a taste of a new technology. This was a technology designed to leverage developers knowledge of .NET on the client side browser. Some call it Microsoft’s answer to Flash, but mostly everyone just calls it Silverlight.

Today we’ve reached a milestone in this long and sometimes rocky road to having a small .NET CLR running cross platform in the browser. Today, Silverlight 2 RC0 went live. I won’t spoil the moment with any more of my crap. I’ll just post a  few important links:

• Silverlight 2 RC0 Download Site
• ScottGu’s Brief Post About New Stuff in Silverlight 2 RC0
• Breaking Changes Summary
• Breaking Changes Document (Word Document)

However, I need to plug a Silverlight 1.0 site that is near and dear to my heart: Windows Server 2008 The Server Unleashed 

You may wonder why I’m linking to a Silverlight 1.0 site in a blog entry about Silverlight 2 RC0, well that’s because I wanted to show you that I didn’t make any code changes at all and this Silverlight 1.0 site works perfectly in Silverlight 2 RC0. Way to go to the testers working on backward compatibility. You deserve a raise.