What is SketchFlow?
SketchFlow, new in Expression 3, enables you to quickly create prototypes that demonstrate UI flow, screen layout and application state transitions which can then be effectively presented to your client for immediate feedback.
How does it help me?
In today’s climate the ability to rapidly communicate and demonstrate ideas with your client to get early buy-in is critical in keeping costs under control.
Prototyping with SketchFlow allows you to quickly explore multiple ideas and to catch issues with an application early in the development process when the cost of correcting a mistake is at its lowest. However, creating a prototype that enables you to investigate multiple ideas and demonstrates them effectively to clients, , is labor-intensive and costly.
Looking at this another way, pen and paper is a great rapid prototyping tool, so also are those little yellow sticky notes, white boards, or as Dan Roam would say - the back of a paper napkin. While these low fidelity (lo-fi) methods are perfect for getting ideas out into the open for discussion, they are often not an ideal way to present them to a client in an interactive format.
A client often expects to see something more tangible, or in the case of a rich application - clickable.
Being a slave to computer aided design and simply resorting to interactive technologies to build your interactive prototype expecting that all your issues will be resolved, brings its own issues. The prototype often looks so good (hi-fi) that the client gains a false expectation on how close to final delivery the application actually is. Hi-fi prototypes also discourage generic feedback as clients and testers assume with such a polished looking application, the costs of a dramatic change are too high, so instead focus is placed on making small incremental tweaks rather than looking for larger issues. Building a prototype is often a project in of itself in terms of the time and effort that must be expended.
Ideal early prototypes should be low-fi and cheap, that way you won’t hesitate to throw it away or to explore other variations. Prototypes should also be interactive so your client can gain an understanding of the transitional aspects of the UI. It should be presented in a way that the client, or tester, feels comfortable giving effective and direct feedback and once approved, you should be able to harvest all the assets, animations and controls for use in the production project. In other cases it may be possible to evolve the prototype as the foundation of the production project.
This is all possible today with SketchFlow, a new rapid prototyping tool which is available as part of Expression Studio 3.
How does SketchFlow work?
Use Sketchflow to quickly and efficiently map and experiment with the flow of an application UI, the layout of the individual screens and how the application will transition from one state of the application to another.
Defining the flow of the application
Built-in ‘sketch’ styled controls and components, scribbles, sticky notes as well as imported images enable you to visualize your ideas and make changes easily. This quick and fluid way of working means you can create, test, iterate and discard ideas in rapid succession allowing you to explore multiple routes for a solution with minimal cost. The speed and low cost that ideas can be visualized and demonstrated to a client enable you to consider approaching projects that previously would not have been cost effective or profitable.
Quickly iterate on screen layouts using the build in Sketch styled components
The ability to rapidly demonstrate how the application will flow and transition from state to state enables clients to appreciate the user experience of the application earlier in the design process and highlights navigation and application flow issues early in the development cycle helping you and the client reducing painful and costly last minute concept changes.
Gathering effective and timely feedback from a client is just as important as creating the prototype in helping reduce time lost and costs in the design and development process. The freely distributable SketchFlow player ensures that your Silverlight concepts can be demonstrated effectively to your client through a standard browser where ever they are located. Clients review the Silverlight prototype in their browser, testing multiple parallel scenarios and provide in context feedback for the development team by annotating their experience as they navigate the different screens.
Client adding feedback in the browser based Silverlight SketchFlow player
Once the feedback is finalized clients can save and return it to the development team who can then import it directly back into Expression Blend. The client’s annotations are visible in-context on the design surface allowing it to be immediately reviewed and acted on.
Concepts built during this early design phase may be a prototype in look but they are actually real Silverlight projects utilizing the same project format that is already shared between Visual Studio and Expression Blend. What this means is that from the very first moment you are working on a real project that can be explored and presented – even while it is just a flow of conceptual sketches without any real user interface.
SketchFlow enables the creation of comprehensive project documentation through an export to Work function that creates an outline project document complete with table of contents, screen grabs of the application flow and the different screens within the project. This literally saves hours of time during documentation creation and enables you to easily keep your project outlines up to date even while you are rapidly iterating on the application.
10 ways SketchFlow can benefit you
- Rapidly create multiple conceptual ideas, saving time and money in the early stages of a project.
- Pitch for projects that previously would not have been cost effective to approach.
- Delight clients with the speed and quality of the interactive and dynamic prototypes you can present to them.
- SketchFlow enables you to highlight navigation and application flow issues early in the development cycle helping you and the client save time and money.
- Traditionally prototypes are redundant after the concept phase and discarded. SketchFlow enables you to leverage all the assets and resources you created. In some cases you can even use the SketchFlow prototype as the starting point for your production project.
- Rapidly evolve prototypes by utilizing the full functionality of Expression Blend 3. There is no limit to the scope of a prototype. From a simple wireframe to examples that are fully data driven and high fidelity, a prototype can be as real as a project or client demands.
- Empower your client. Their ability to feedback immediately via the SketchFlow player enables the client to feel an integral part of the process. This ensures the rapid iteration of ideas and a valuable open two way dialog between you and your client.
- The flexible workflow of Expression Blend and Visual Studio enable you to extract the best performance from a team with everyone continuously working to their respective strengths.
- Deliver compelling, cutting edge solutions, in rapid time and on budget to your clients.
- Have fun! Experiment, explore, iterate and retain control of your vision, from concept to completion!
For more info:
Watch Arturo’s introductory video to see SketchFlow in action and better visualize the way SketchFlow can help you in your development cycle.
SketchFlow was first shown at MIX 09 in Scott Guthrie’s keynote. You can watch the 16 minute demo here at http://videos.visitmix.com/MIX09/KEY01. (Skip forward to 99 minutes and 20 seconds for the SketchFlow section.)
At the same event, Christian Schormann held a more in-depth SketchFlow session where he highlighted how quickly you can evolve your prototype from your initial ideas to a fully functional prototype. http://videos.visitmix.com/MIX09/C01F
Christian has also blogged on SketchFlow – Sketching and Prototyping in Expression Blend.
Simon Guest takes a different viewpoint, the view of the architect, as he takes an extended look at the role SketchFlow will play in your development process http://www.infoq.com/articles/guest-simon-SketchFlow