SketchFlow: prototyping interfaces in a new way

Original author: Simon Guest
  • Transfer
All the good developers and designers that I am familiar with are involved in prototyping to one degree or another . It seems to me that prototyping resembles a channel between the customer and the developer, through which ideas and feedback from interested parties are transmitted, which allows you to make changes to the project at an early stage of development.

As you probably noticed, prototypes can be presented in a variety of forms: from some sketches on a napkin to a design created in a professional package that looks very close to the desired result. Despite such a number of options, we can distinguish two main types of prototypes: low-fidelity and high-fidelity. An unreliable prototype is a simple description, a sketch on a drawing board, or a sketch that roughly shows a piece of the user interface. An example of such a prototype is shown in Fig. 1.


Fig. 1 - An example of an unreliable prototype that demonstrates the login form



The prototype is called unreliable, because its main function is to show a piece of functionality in its simplest form without emphasizing icons, colors, fonts, and the like.

The opposite of an unreliable prototype is a highly reliable prototype. Such a prototype, for example, as shown in Fig. 2, - this is still a prototype in which there is no functionality and behavior, but it looks very close to the finished product.



Fig. 2 - An example of a highly reliable prototype.

Both types of prototypes find their application in the development cycle.

Unreliable prototypes in the work are very effective for getting user feedback on what they think about the concept without delving into the details. Since the prototype is actually a sketch, users generally find it easier to give feedback. However, it is worth noting that there are situations when when an unreliable prototype is not suitable. There was a case when I once spoke to the authorities at a meeting. And since my materials were unreliable prototypes, my speech was met with witty looks when the only thing I showed was a folding poster. The authorities probably thought: “Are we paying you for writing programs?”

As you might have guessed, highly reliable prototypes have the opposite problem. Although they perfectly show how everything will look in the final product, the induced beauty and gloss can become excessive for most users. I came across cases where users were simply afraid to ask for major changes in a highly reliable prototype, since they assumed that it could take a lot of effort or time. Users believed that since the prototype looks close to how the finished product should look, it means that considerable work has already been done and they tried not to request new changes. In addition, a highly reliable prototype forced users to talk about design when talking with them, like, “should this blue shadow not be in the style of our logo?”, Instead of

Moreover, even the demonstration of any kind of prototype can be difficult, especially when the user is at a remote distance. Often, we had to embed screenshots in PowerPoint and send them without the ability to tell the user about the details or explain some design moments.

To solve some of these prototyping problems, in March 2009, at the MIX09 conference, Microsoft announced a new technology called SketchFlow, which is part of Expression Blend 3. According to the description of the development team leader Christian Schormann, which he posted on my blog, SketchFlow is a fun, informal, flexible, fast, and powerful way to create dynamic sketches and prototypes with rich features in Expression Blend.

In this article, we explore the functionality of SketchFlow by looking at how it works and how this kind of tool can make your prototypes more useful and efficient.

If you've heard about the Expression family of products, then you probably know that Expression Blend is a tool for designers. Although designers are the main users of Blend [approx. trans .: Blend 3 also includes development tools, so Blend has ceased to be a tool aimed at designers], I think that the SketchFlow functionality can offer seductive opportunities for many developers as well, many of whom are sometimes involved in prototyping using mockups ( mockups) Visual Basic or other tools.

SketchFlow Details


Expression Blend 3 supports two different types of SketchFlow projects. The first is WPF applications, and the second is Silverlight, which is hosted in a web browser. Both types of projects provide the same functionality, only the proposed set of controls will vary depending on the chosen platform.

After creating a new project in Expression Blend 3, the first component you will see is “Application Flow”. Application Flow is a panel in Blend that allows you to create a simple view of the data streams in your application.



Fig. 3 - The simplest data stream for an online store

As shown in the diagram above, Application Flow is used to create a simple workspace for navigating the screens of your prototypes. Five elements of a simple online store are defined on the diagram: the main window (storefront screen), navigation window (browse screen), shopping cart (checkout screen), login window and window for confirming the purchase of goods (shipping confirmation screen). The windows are connected by unidirectional or bi-directional lines, which reflect the path that the application user should go along.

Creating such a flowchart will automatically create several empty XAML files in an Expression Blend project.



Fig. 4 - When creating a flowchart, empty XAML files are automatically created

By creating application threads, we can begin to add controls to each of the prototype screens.

If you've tried Expression Blend from previous versions, then you probably know that you can drag and drop controls from a set onto a form to create a user interface.



Fig. 5 - Standard controls

You will be right if you look at fig. 5 say that we started making a highly reliable prototype.

In order to give it less credibility, SketchFlow introduced a new XAML style called “WigglyStyles”. As you understood from the name [approx. transl .: translation is difficult, so we will understand from the picture], the new style imitates the simplest version of the display, which could have turned out when creating a sketch on a napkin. For greater effect, SketchFlow contains support for a couple of new fonts, in the style of handwriting and architectural sketch (architect's sketch). Applying controls with WigglyStyles style as a result, we get a completely different effect.



Fig. 6. - Controls with WigglyStyles style 

It is important to keep in mind that these controls remain fully operational, and are not simple images. You can enter text into text fields, press buttons, move scrollbars and, as a result, get a very functional, but at the same time, unreliable-looking prototype.

Add navigation


Now that we’ve figured out the data streams and styles, let's get down to designing our prototype. In this article we will create a prototype for the new InfoQ store, which should serve to sell a number of products under the famous InfoQ brand [approx. perev .: this is such humor, InfoQ is the site on which the article is posted, well-known, by the way].

After defining the data flows between the screens, we still have not added navigation. Say, by clicking on the “Basket” button, I want to go to the basket prototype screen.

In previous versions of Expression Blend, which is true for many other user interface development tools, creating a navigation often involves setting up an action or event and writing code to handle the navigation. It is not very difficult if you are a developer, but it is completely not intuitive for designers or those who are not familiar with the development, in addition, completely unnecessary code for the task slows down the development of the prototype.

Fortunately, Expression Blend has a different approach to navigation. By clicking on any control with the right button, you can call the context menu for setting navigation, as shown in Fig. 7.



Fig. 7. - The “Navigate to” context menu in Expression Blend

Selecting any option from the menu will automatically generate a trigger for the control. In the XAML code, it will look like this:



The part of the XAML that is responsible for navigation is the interaction trigger, which contains an “EventName” to identify the event that triggers the trigger, and “NavigateToScreenAction”, which contains the target screen for the transition. All this XAML code is generated automatically and you don’t have to enter a single line of code.

Add a composition screen


Another part of the navigation in SketchFlow is the concept of a composite screen. If you have experience in web development, then you are most likely familiar with the need to solve the problem of the same set of controls for different pages. This can be a common set of tabs or buttons at the top of the page or a general-looking design that all pages inherit.

In SketchFlow, this mechanism is a composition screen. A composition screen is a collection of XAML objects that can be displayed on any page. To create a composite screen, the first thing you need to do is set a set of controls.



Fig. 8 - A common set of controls that we want to show on each page

In fig. 8 there are four buttons: one to return to the home page, one to display the product page, one to go to the account page and one to go to the cart page. To display these elements on each of our screens, we must select them all, right-click and select the menu item “Make Into Composition Screen ...” as shown in Fig. 9.



Fig. 9 - Creating a composition screen based on buttons

After entering the name of the composition screen (I called it “TopBanner”), the controls will form a separate XAML file and the composition screen will be displayed in Application Flow.



Fig. 10 - Composition screen and Application Flow

As you can see in fig. 10 The TopBanner composition screen is now displayed in the application flow (green color stands for composition screens from the blue navigation screens). To link the composition screen to other XAML pages, we can create links between the composition screen and navigation screens.



Fig. 11 - Binding the composition screen to the navigation screen

in Fig. Figure 11 shows that the composition screen is now used in storefront, browse, and checkout screens.

Getting feedback from users


We have added some controls to the InfoQ store and are now ready to show the prototype to users in order to get feedback from them.



Fig. 12 - The finished form that we will show users

As you probably know by pressing F5 we will build our application. But this will not happen as you expect. The application will start, but in the context of the SketchFlow player, which will allow users to control the application and leave feedback right in the process of studying.



Fig. 13 - An application launched in the context of a SketchFlow player

As shown in fig. 13, the user is given the opportunity to use prototype navigation in three different ways. The player's “navigate” tab, located on the left, shows the user the available screens in the stream. The buttons that we configured for navigation also work. The last third navigation method is the ability to explore the application flow in the lower left window by going to the FLOW tab. The Flow tab shows application flow in almost the same form in which we created it (Fig. 14).



Fig. 14 - Tab Flow shows application flow

While navigating the prototype, the SketchFlow player allows the user to leave comments and reviews about the design in two ways by entering the review text in the feedback window (for example, the user can leave a question or just a review about the prototype). And the second way - the user can draw on the screen using the pen and marker tools. Both ways to leave feedback are shown in Fig. 15.



Fig. 15 - User reviews

User feedback on the best arrangement of controls or windows can be very helpful. This review will be saved as a file with the extension “.feedback”, which can later be uploaded to the site or sent by email to the development team. When developers receive a review file, it can be imported into Expression Blend and used as an overlay for the project, thus allowing the team to receive feedback and user comments in the form of an overlay on the original prototype.

States and Transitions


Earlier we considered navigation between windows. But what about showing the user a message or animation that is not a navigation window? For example, when a user clicks on the “add cart” button in InfoQ Store, we might want to show a message confirming that the product was successfully added to the basket. This does not require a separate screen, but we must do some things to process the response from the prototype. In SketchFlow, this mechanism is known as a change of state.

States are created using the States tab.



Fig. 16 - Two states for showing and hiding the message “added to cart”

Notice in the example above, I created two states: ShowCartMessage and HideCartMessage. I can determine what should happen for each of the conditions. For ShowCartMessage, I created a simple dialog that contains a message that the product has been added to the basket and has a transparency of 100% (Fig. 17).



Fig. 17 - Simple dialog

For the HideCartMessage state, on the contrary, I set the dialog transparency to 0%, creating the effect that the dialog disappears.

Just as I previously worked with controls and navigation, I, using the context menu, simply bind the state to the control. This time, when the user clicks on the “add to cart” button, the ShowCartMessage state is activated and a dialog appears on the screen.



Fig. 18 - Binding state to the button

In the same way, the action is attached to the dialogue, so that when the user clicks somewhere outside the dialogue, the message disappears.

As with creating navigation, state binding creates XAML code for each control. The mechanism that controls the state is ActivateStateAction:



For greater effect, states support animation transformations. For example, if your prototype is to show or hide a dialog with a slowdown, then for this we can create a XAML storyboard that will complete the task. As you probably understood, everything created in SketchFlow is created using XAML - there are no hidden mechanisms or options here - this means that everything you do in the XAML markup will be reflected in the prototype, even if this function is not supported through the addition in the designer .

Add test data


Until this moment, we considered adding controls and navigation, but filling out test data is also a very important element of many prototypes - in our example, this could be a list of products that we sell on the InfoQ store.

Previous versions of Expression Blend supported connecting to external data sources through a direct database connection or CLR objects, but this activity can take up too much time, especially when creating prototypes. This alone can cause the prototype to be rejected, in addition it creates unnecessary inconvenience in the requirement to create databases, schemas, tables only in order to obtain data for several simple objects.

To solve this problem, Expression Blend 3 supports the ability to create test data directly from the designer. This becomes possible with the addition of a new data source in the Data tab.



Fig. 19 - Options for test data

Two options for defining test data are supported: create a new dataset or import data from an XML file. The second method can be especially useful when you have an XML file that represents data from some internal system, for example, the result of exporting data from the current version of a business application or even from a public RSS feed.

We do not have an XML data source for our prototype, so I will define some test data in the first way.



Fig. 20 - Test data set for our store

To demonstrate our store, a dataset has been created that showcase products. Keep in mind that test data sets can be presented in several ways. For example, SKU is presented here as a text field, and the Image field as an image in the form of a png file from a disk (a folder with images can be imported into a test data set).

Now that we have defined the data structure, we can define a test data set for the store.



Fig. 21 - Editing test data

Here you need to take into account that in addition to the entered fixed values, Blend also supports automatically generated values ​​for different types.



Fig. 22 - Automatically generated values

This feature is especially useful when you are working on a prototype that displays a list of made-up phone numbers, URLs, email addresses, and so on.

When the work with the definition of test data is completed, the next step is to drag the data set from the panel to the required screen element so that the data appears in it. When the prototype application is launched, all test data will appear in the prototype.



Fig. 23 - Transfer test data from the panel to the screen element

Documentation


I know only a few people who really like to document projects, including for prototypes. However, documentation can be critical, especially for prototypes, as it provides notes about the location of prototype elements, user reviews, and prototype states.

If you fall into the category of document lovers, then one of the features of Expression Blend 3 will appeal to you. This is the “Export to Microsoft Word” option on the File menu.



Fig. 24 - “Export to Microsoft Word ...” option

This menu item allows you to generate a new word document for all elements of your prototype. Fig. 25 - Example





This includes application flow and screen layout and user reviews and statuses. All this has content and a list of all the images. All this information in word format allows you to easily apply your own style of documentation and add your own comments or data for the subsequent sending of information to the client. [approx. perev .: export to Word really generates a very nice file, the mechanism is excellent].

From prototype to production


After all, prototype quality can often be measured by the success of the end application. Which raises the question: “How do I transfer these prototypes to production?”. When I work with clients, I most often see two approaches.

The first approach is to throw away all the prototypes and use the usual tools, which is most often done today. So, the designer creates a screen mockup of the application in Photoshop, exports it to an image and gives it to the developer in such a way that he creates a real application. Most likely, this will lead to differences in the interpretation of what the designer wanted to say and what the developer will do, especially in the intricacies of the design.

The second approach is to save as much as possible from prototypes, for further use in the steps of creating an application. Using SketchFlow, many visual solutions and controls can be used with replacing application flow and navigation with another framework, such as MVC, simply translating states into code, implementing error handling, and so on. You should always keep a balance in how much you take from prototypes in production and how much is left overboard, but the interactive prototyping tool makes it much easier to find a compromise in this choice.

Conclusion


I hope this article has been helpful to you and your understanding of the possibilities in SketchFlow. I hope you will agree that the new set of tools has every chance of becoming an assistant for designers and developers and will allow taking prototyping to a new level.

From translator


The translated article is based on the preview version of the SketchFlow tool. But having examined the final version, I did not find differences in the material presented.

Today, Expression Studio 3 is already available in the final version, and with it Expression Blend 3 with SketchFlow. You can download the entire studio or Blend 3 separately at this address .

To continue exploring Expression Blend and SketchFlow, you can use the rich video materials from TechDays.ru.

Alternatively, you can watch the video “SketchFlow: from concept to production” from the MIX '09 conference.

I hope you enjoyed the translation and found the translation material useful and new to you. SketchFlow is an extremely interesting mechanism that offers a new approach to prototyping custom elements with convenient support for all stages, from demonstrating to the customer to compiling documentation.

Progg it

Also popular now: