Expression Blend 3 SketchFlow : New era in Prototyping – Part 2

Thanks for your wonderful response and emails for my Part 1 on Blend 3 SketchFlow. In last part basically I tried my best to put need of SketchFlow in front of you and things around that along with the initial steps to begin your SketchFlow work like how to add controls and what all options are there.

Today in this part, I am going to concentrate on Developing(coding) part along with navigation and much more till how to execute it etc. Maybe the exporting and other important features I will address in my part 3 (I don’t want my readers to feel sleepy with long long paragraphs :) ).

I assume here that, there are total 3 screens in my example application as Login->Welcome->Report, As arrow shows here the flow, without login you cannot move ahead. So flow starts from login screen and ends at Report.

For designers, good thing is that,they can give now smooth transition effects and small animations too while doing some functionality or screen change with something know as SketchFlow Animation like this :

More in-depth information you can find here. As we talking from Part 1, Sketch Flow is all about making prototype more real and interactive. So we can even take help of code behind to make it as if a working code snippet. Let’s say on this Login Screen,If I want to validate user, I can write code for this prototype and make it realistic like this :

I can even associate navigation by means of trigger too by attaching-detaching it,something like this :

<i:Interaction.Triggers>
   <i:EventTrigger x:Name="MyTrigs" EventName="Click">
        <pb:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen_1_1"/>
   </i:EventTrigger>
</i:Interaction.Triggers>

There is yet another way to connect to another screen, Let’s say you have normal navigation button where you directly want to throw user on some specific screen then you can choose “Navigate To” option by just Right Clicking on it like this :

Or directly associate particular screen via Map like this :

Note that One screen may connected to multiple screens and direction is not always one way, All depends on your vision of workflow among screens, So looping is common thing here.

Please make another note that, the Sketch Flow screens can be databound or you can have dummy data for them, How to DataBind screens in Blend, for this I have already written one article which you can refer here.

Now lets build this sample two screens and let’s now talk more on Output and execution part. So after building and executing project, you can see output in browser like this :

Now let’s talk more specifically to each aspects and parts which we can see in above output, Check panel on Left first. (Well if you try to view source,you will find nothing but routine object tag embedding this output, So nothing specific or special there in terms of rendering), now lets concentrate on left panel :

Now Part 1 which is highlighted in Red is nothing but shows us the navigation sequence of screens, you can jump on your own to each of them either by clicking in that list or using Home and back button given on top of it. You will also notice that, your SketchFlow animation is also getting on list here along with screens. Part 2 which is again highlighted in Red is nothing but a scale where you can zoom in and out for particular screen on right hand side. Now let’s talk about Options Map and Feedback on down panel of this, It look like this :

Highlighted icon may confuse you and you might think that it is for full screen, Actually this will overlap on your screen on right and there you can see the current selected screen and its position on map, which you can zoom in-out and can close too like this :

If you ask me..from my own experience in IT, Hardly there will be any client who will not give any feedback and give go ahead on the spot, So feedback has to be there to improve work and do it more better and better. For this, You have a Feedback tab on left which look like this :

With those pens and colors, you can draw or quote your remarks or feedback on screen on right like this :

Now not all the times these remark will help Designers to understand what exactly they are suppose to do, so we have a Text entry feature again made available which gives more information on what wrong on right side like this :

 

Now a question may come to your mind that, what if I/My Client close down the browser? Where will that feedback get stored? am I going into loss for not having that data? Well, Simple answer is you have something known as “Feedback File” where all this information get stored, So all you need is just to click on Folder like symbol on left panel bottom part at right most button and then choose option like this :

Click on Export Feedback…

and you are done ! You can then access that file from your drive or even you can transfer it wherever you want !

But what to do this Feedback file? and how will designer come to know feedback who might be sitting altogether at different location? Any other features where I can export my Output as Prototype? Well for all these questions, just wait for Part 3 where I will be talking about getting feedback file and how to extract feedback and make those changes along with much more powerful features..So be here once again for Part 3 with much more new things, I will take another day(Maybe on Tuesday) for Part 3 since as per my time zone,after few hours, it will be Monday Morning Blue for me !! :D

Like Part 1, I hope Part 2 will be helpful to take your development one step ahead, Do let me know your feedback.

Vikram.

Expression Blend 3 Sketch Flow : New era in Prototyping … – Part 1

First of all, wishing my all blog readers a very Happy Diwali and wonderful year ahead ! Now its almost a month since I am writing something here, I was totally occupied with Community sessions for last two months, now got some time finally to be here with you all again !

Expression Blend 3 is nothing new for us, I have already talking about it since it was in Preview stage at the time of MIX09 around months of March, you can find more here :

http://pendsevikram.blogspot.com/2009/03/silverlight-3-explore-power-of-blend-3.html

Indian Software giant Infosys also made note of this article and they refer on their blog too : (Thanks Infosys !)

http://www.infosysblogs.com/microsoft/2009/03/blend_3_and_sl_3_preview_avail.html

Today, I am going to talk more on Blend 3 Sketch Flow feature which I never touch in past over here. Offcourse there are several resources on net available on Sketch Flow, but as usual here I will make it simple and straight for you without any confusing technical terms and also I will share right resources on net to refer.

To start Expression Blend 3 Sketch Flow, It is very important to first understand “Why you need Sketch Flow?”, This question may be already there in your mind,let me give you pictorial view of Design-Developer Application Cycle to make my point in front of you :

(Picture taken from http://lore.ua.ac.be/Teaching/SE3BAC/SoftwareSpecCartoon.gif   for just example purpose, it carries its respective copyright to its owner)

Well ! Above picture tell us that there is something went wrong in cycle. In above case, we will focus more on Designer and Developer part. Most of the time we have Best Industry designers with us and Best Industry Application Developers with us, but if there is no flow or smooth communication among them and their work, above things are common observations.

Microsoft as usual took lead to bring down the gap among Designer and Developers and they came up with Expression Blend, We all know now, how Blend and Visual Studio are tightly integrated, You do something there in Blend, you can see changes in Visual Studio and vice-versa.

For Designers, there is always challenge to build interactive prototypes for customers so as to give feel of application to customer in reality, Typically before tools like Blend Sketch Flow, we use to either build POCs (Again we need to put Man efforts in this activity) or we use to build designs in Excel or word, Drawback of this was, it does not helps to exactly put forth our point in front of client since they might not be that interactive and realistic which can give feel of application which we plan to build. Outcome of this is something like the picture above I have shown, You design something, Due to lack of awareness or right tools, something different gets designed and output is totally different than required !

Let me introduce Expression Blend 3 Sketch Flow which will give solution to all above concerns we raised above. All you need is to grab bits of Expression Blend 3 with Sketch Flow which you can find on Expression portal (Do you need url ?)

Once you install, it will show you following templates :

Now you need to choose “Silverlight 3 SketchFlow Application” template along with your language choice. Then you can see following things :

1. SketchFlow Map :

2. SketchFlow Animation :

3. Main Designer Window :

So, these are the three main blocks we need to look into more seriously as far as our prototyping is concern. By default you will get one screen and to add rest of it, you can do it via traditional way of adding new xaml pages or you can now take help of Sketch Flow map here like this :

You can see highlighted menu there above, each icon have its own meaning, let’s see one by one :

This is for to “Create a Connected Screen”, A New Screen which you can then further connect with the existing screen.

This is for “Connect to existing Screen”, All you need is to just drag-drop the arrow to the target screen to associate. It will represent connection by means of unidirectional blue color arrow.

This is for “Create and Insert a Component Screen”, Another good feature where you can add particular component which you feel is potential in your design workflow.

This is “Change Visual Tag” and very useful to highlight particular screen with some colors, This is given so as to set the priority screens or to highlight important screens or screen with important or same functionality etc. There is no generic guideline for this, however its purely matter of choice of designer !, Available colors are :

Now we are all set to design our prototype screens, So now its time to hunt for Controls, A normal way is we go to either toolbox or do it via XAML or take help of Asset Manager. Let me share this with you, for Sketch Flow, you have a set of unique Sketch Flow Controls which are similar to your traditional Silverlight Controls, Only difference is that they are especially made different as far as appearance is concerned and they look like someone drawn them with Pencil, Pencil shade looks to each control. Since we are building prototype (Which may turn into final design once client approved), it is good to go for Sketch Flow controls.

Point to be noted here is, Sketch Flow controls can have styles and effects like your other controls and last but not least, you can even write the corresponding C#/VB.NET code with them. So now go to Assets Tab and check for Sketch Controls like this :

Note that each control is having extension as “-Sketch”, This is how you can differentiate among normal controls and sketch controls. Now all you need is just drag drop them on your designer and you are good to go !, Well you need to have Microsoft.Expression.Prototyping.SketchControls.dll on your system which you will get once you install Blend 3 Sketch Flow. If you are not able to see the controls for Sketch Flow, you can refer this thread which I started when I was stuck in early preview stages of Blend 3 Sketch Flow(http://social.expression.microsoft.com/Forums/en-US/blend/thread/5babede8-9cf6-4e1f-b968-1576cebb3e88), If that don’t help you, you can post your query on Expression forums and you will get support there by lot of expertise from Microsoft and from other experts.

Well now once you drag-drop controls on designers, then you may have questions like what to do next? Simple answer is just wait for one more day for my Part 2 article where I will cover how navigation works,what all things you can do,how to run this etc and in Part 2 or maybe even in Part 3, I will talk about exporting features, Documentation Features and much more ..so be here everyday to see more insightful visit of Blend 3 Sketch Flow.

I hope you like this Part 1 and it will help you to start your prototype work, Offcourse your designs will be way good than me since I am developer Silverlight MVP and have very average design sense :) ..but still I am sure in coming parts of this article, I will give you some very good inputs which will help you for months to come ahead.(The way Microsoft coming with its versions, I guess “Months” is a perfect word !!)

Do let me know your feedback and be ready for more in Part 2 and ahead..

Vikram.