Skip to main content

Prototyping Applications with Sketchflow

How many times have you needed to present visual concepts behind your application to a client?

Over the years, I've had several times where I had to build a quick mock-up in Visual FoxPro to show how an application or function might run. Designing the screens themselves weren't the challenge - the challenge was showing the user how the application would flow between different areas. Short of putting fake code into buttons or saying "and now we go here", there really hasn't been an easy way to do this.

Now, sometimes, a client has gone so far as to hire someone to build "wireframes" to depict this. I found this process an entire waste of time. People building wireframes tend to be "business analysts", in short; people who have stopped learning how to develop code but still want to show their value by being the translator between the client and the developer. As far as I'm concerned, if you want to be a senior developer, you need to be able to translate as well. Sure, you may leave the task to other developers, but you should always be able to demonstrate or show your ideas to others.

I recently had the experience where I had to show some user interface concepts on a new application. I was interested in trying out Expression Blend, one of Microsoft's tools found in the Expression Studio but also one of the integration tools noted in Visual Studio 2010. While it specifically targets WPF or Silverlight application development, I found the SketchFlow tool invaluable.

Expression Blend uses XAML to build the user interface. So, if you're not building a XAML application, you'll need to convert this over. However, the key benefit is the little "map" section at the bottom of the screen in the designer.

With the map section, you can build the entire work-flow for the interface. By right-clicking on the main page, you can create a connected page.

Since the tools available in Expression Blend are based on regular developer tools, it's easy to build a sample representation of your application in minutes. If you are using WPF as your development platform, you can also convert it into a production environment or share your existing components (with code behind it) in your prototype. This is similar to building a true development prototype using existing code or components.

When you "run" the prototype, all of your connections appear in a menu on the left side. To move to another page, you click the related page OR you can use the map below to show the navigation.

The best part, however, of SketchFlow is the SketchFlow player. Expression lets you "package" the entire solution into a single executable that runs with the navigation menu. Now the user can run this prototype on their own. There are also tools to let them add their own feedback and then send it to you via e-mail. This can make remote prototyping much easier than it already is.

Added bonus features:

1. You can take a larger part of the screen that you are working on and instantly create a "user component" for it, so it can be re-used with other pages. Drag and drop the user component in the map onto another page and it will put an instance of that object on that page.

2. You can add annotations to individual pages and components on the screen. These annotations can pop-up for your users so they can see your comments.

3. Sketchflow has a "style" from which you can create the look and feel of "wireframes", instead of the real look of controls. This makes the entire application have that real "prototype" look to it, so your clients don't think it's easy to move from prototype to production.

4. You can also add real "animations" within the application so when users click a button, a dialog can appear or an object can "move" on the page.

Many developers push off Expression as being the "designer" tool or look at Expression Web simply being the "new" FrontPage - but it's definitely more than that.

If you're a "coding" developer, it may not be for you - but the next time you have to show interface concepts to a user, you definitely want to be looking at Expression Blend and SketchFlow.

Expression with Sketchflow has been around since Expression 3.0 so if you have MSDN from the past year (2009), you already have access to it.

Other useful links:

Demos from MIX
Prototyping with SketchFlow

Comments

Popular posts from this blog

Refactoring T-SQL

While much has been said about the benefits of refactoring application code (see VFPX Code Analyst), I typically haven't seen a lot of noise about refactoring T-SQL and stored procedure code.

The refactoring features found in SQL Manager tend to be more about refactoring your database design but not about the actual content of the SPs.

It's important to note that if you tend to rely on large stored procedures, then many of the same rules of refactoring apply:

1. Keep it short and sweet.
2. Make it readable.


So when dealing with a particularly unruly stored proc (over 1000 lines), I was quite happy to find Red Gate's SQL Refactor (here's a post from the lead developer).

Some of the features are pretty basic (renaming variables, etc) but the one of great interest was the Encapsulate as a new Stored Proc.

As with a number of tools that are add-ons to other components, its overall usefulness might seem limited if you are building your stored procs either using testing patterns …

VFPX: New Tools based on Existing Code

Tools like Code Analyst and Class BrowserX all use code from existing Visual FoxPro tools. This is possible because in 2007, Microsoft released the code for all of their xBase components with a special license. This license allows developers to create and update components and applications based on these components. It explicitly gives two rights:

Copyright – "a non-exclusive, worldwide, royalty-free copyright license to reproduce the software, prepare derivative works of the software and distribute the software or any derivative works that you create"

Patent – "a non-exclusive, worldwide, royalty-free patent license under licensed patents to make, have made, use, practice, sell, and offer for sale, and/or otherwise dispose of the software or derivative works of the software"

There are some limitations; primarily that you can't use the Microsoft name, must include any existing copyright notices, and that the software is provided "as-is" but the real bene…