Using contextual design time data with SketchFlow

Design time data can be used to provide contextual data for your sketches and prototypes when demonstrating these ideas to your clients.  I want to highlight some of the areas that I am leveraging today that have helped to speed up the process of creating prototypes and my interaction with User Experience and Visual designers.

WelcomBackScreen My aim was to build a simple prototype using design time data in the prototype in order to provide a more contextually rich prototype for the user to interact with. This can be done alongside the sketches which the User Experience person is putting together or later once you have drilled  down to a couple of sketches which your client want to move into a prototype phase. From a developer prospective getting to know what data you have available and the ability to communicate with the UX on how this can be visualise early on in the process I have found to be invaluable.

So the prototype that I want to attempt is a simple shopping cart style application that communicates to the client what we are thinking about with regards to a User Journey which illustrates; how users will login into the application; a filtered list of products which meet previous buying habits; the ability to the user purchase items; and a page to show the checkout of those items. There is also a design element which means that the user has a personalised greeting on each of the pages.

To create each of the screens is trivial, in the sketchflow flow document window right click and add your screens give them the right names and link the screens together to illustrate the flow for the user journey. Next take the sketches from the UE and import them into Blend, luckily for me the designs are in a psd format so I can easily import these into Blend and get up and running, if this is not there are other supported formats which can be imported easily. Once we have the screens in place and sketches imported the next step is to add navigation behaviours so that when the prototype runs in the player our client can interact with the prototype and follow the journey.DesignTimeDataDataTab
As we are not intending on writing any logic at all and adding the design time data support is something we want to do in the lightest possible way our goal is to communicate the flow of the application and the journey the user will follow when interacting rather than logic and branding. The prototype at this stage is really to uncover the functionality and highlight where the complexity may be when implementing that logic, in order for us to communicate with the client potential areas of functionality which are going to be expensive to build in order for the client to assess the ROI of the features to be built in our initial brief. Therefore, we should not be including design elements at this stage or anything that lets our client get distracted from the journey and proposed experience that we want to take the user on when performing this particular task. For me, design elements come later when we have done a couple of iterations and have decided on the idea which we are going to take into production.
My intentions were to create a collection for the shopping basket and get this to contain a custom data type of productitem however when I attempted to do this blend does not recompile the .cs file correctly and thus I get an error in the design time data Xaml.

How does the design time data work?

When you are creating deign time data from the Blend menu, Blend is kindly generating the code behind to support your data structures that you are specifying for your prototype. The Xaml file produced is where you data that populate the code behind lives. The xsd is the mapping of the types and their definition. The xsd is an auto generated from the .cs file which Blend creates.

Unfortunately in the current release there is no support for copying and pasting data, so there is no support for creating a collection and then copying these contents to another collection, this is also the case for copying and pasting complex objects around your data source. The scenario why it would be good to have this functionality can be seen in our sample prototype, we have a list of products and we want to add the products collection to our shopping basket collection, therefore the ability to copy our predefined data into our new collection would be very helpful. Especially when we take into consideration that both collections are of the same type. So what choices do we have, well from what I can find there seems to be 2 options; BuyScreenfirst re adding the items using the Blend UI; or roll up your sleeves and edit the cs manually. If you are nervous about cs then option 1 is the right way.
One of the reasons why this functionality does not seem to be present in Blend is that there is a certain level of heuristics involved where Blend has to interpret what we mean and this in itself could become a nontrivial piece of functionality however, it is still possible and I hope to see this functionality in the next release (fingers crossed).

  1. If you want to change the cs file here are the steps :-
    1. First create the design time data structure that is required for the products collection, next create your Shopping basket collection.
    2. Save and build the project.
    3. Open up the .cs file and in here you will find the classes for the product and the product collection classes, you will also find the new definitions for the shopping basket collection and the items contained in that collection.
    4. Remove the shopping basket item class and modify the collection so that it contains a type of product item class.
    5. Save the project and build. You should get a compilation error in the Xaml file as the ShoppingBasket Item class is no longer defined.
    6. Open up the Xaml file and copy the product items from the product collection and paste them into the shopping basket collection.
    7. Save and build the project and you should have a successful build. We can then bind the shopping basket to the shopping basket user control.

So although there is some manual work to do its rather trivial hence the reason why i think this process could be automated.

Once again the power of design time data can be harnessed to provide a richer experience for your prototype, it is however important to only start doing these tasks at the right iteration, and at the moment this is normally around when you have started to dig into a reduced set of ideas that could be used to move into a prototype and its at this iteration where analysis of the datasets needs to be cleared up and an understanding of what data needs to be presented to the UI in order to provide a rich User Experience.
Using data templates to present the data means that we can layout and display contextual data for those parts of the user journey, Blend support for GUI editing of data templates when used in itemscontrols provides a quick and graphical mechanism for editing the layout. Its also the creation of these styles and templates later on in the final stages of the prototyping have potential high levels of reusability when moving into build the clients POC, what is interesting is that around this stage you are more than likely to be building visuals for the POC. Designers assets produced as vector graphics, adobe illustrator and Photoshop files can be imported into Blend in order to create styles and templates in order to recreate the visual design. Those datatemplates which were built in the earlier iterations can be reused with new Styles and Control templates providing you with the ability to speed up the entire process and potentially create a higher number of prototypes that show different visualisations of data and potential experiences.

Be Sociable, Share!

3 Responses to “Using contextual design time data with SketchFlow”

  1. […] from Richard Griffin   –  more here […]

  2. Excellent post..Keep them coming :) Thanks for sharing.

  3. There’s lots of differing beliefs on design and style that it truly is difficult to please everybody sadly…

    Pricilla Dostie

Leave a Reply