SketchFlow for Windows Phone

Using SketchFlow
for Windows Phoneby Jennifer Smith

Before you begin

In this section, you discover what you need to download to take advantage of the Sketch for Windows Phone Template.

Install notes:

  • Make sure that you have Blend 4 with SketchFlow enabled (this is the version of Blend that comes with both Expression Studio 4 Ultimate and Visual Studio 2010 Ultimate.) If you would like to download the Microsoft Expression Studio 4 Ultimate Trial go to:
  • Install the Windows Phone SDK 7.1 Beta2 (Mango developer tools) located here:
  • Download the SketchFlow Template for Windows Phone at:
  • Download the Silverlight Toolkit for Windows Phone at:

Overview

In this ToolBox module you discover principles of good UX design. You also discover how to start and build your prototype using the SketchFlow Template for Windows Phone. Along the way, you find out how to add sample data, and customize the look and feel of your data. You also find out how to add interactivity with objects that you create right in Expression Blend, or that are imported from other sources, such as Adobe Illustrator.

Part 1: Discovering basic principles of UX design

  • Reviewing the Expression Blend and SketchFlow workspace
  • Creating navigation using a SketchFlow Map
  • Adding a Panorama control
  • Adding additional PanoramaItems
  • Changing headers, titles
  • Adding a Pivot control to the project
  • Adding a reference to the Toolkit for Windows Phone

Part 2: Adding References and Sample Data to your Project

  • Creating SampleData
  • Customizing SampleData using the Visual Editor and using the XAML editor
  • Creating a ListBox
  • Customizing a ListBox
  • Customizing ListBox ItemsPanel to take advantage of the WrapPanel control
  • Customizing ListBox ItemTemplate to create a graphical look to data

Part 3: Creating a Customized WrapPanel

  • Adding Image objects to your SampleData
  • Adding the WrapPanel component to a ListBox
  • Working with type and shapes
  • Applying transforms to your data

Part 4: Customizing Existing Controls to Create the UI

  • Importing art from Adobe Illustrator
  • Converting Illustrator art to working controls
  • Creating state changes using transitions
  • Applying behaviors to navigate from screen to screen and make visual changes to the application

Part 5: Adding Behaviors to Your ListBoxItems

  • Creating states for ListBox visibility
  • Using conditional behaviors to trigger state changes
  • Binding to ListBox items
  • Creating a trigger that changes based upon a selected ListBoxItem

Part 1:

Discovering basic
principles of UX design

In this lesson you discoverthe process of conceptualizing an application, such as gaining an understanding of the user’s needs and goals. You also find out how to start your prototype using Expression Blend and the SketchFlow for Windows Phone template.

  • Discovering basic principles of UX design
  • Reviewing theExpression Blend and SketchFlow workspace
  • Creating navigation using a SketchFlow Map
  • Adding a Panorama control
  • Adding additional PanoramaItems
  • Changing headers, titles, adding panorama items
  • Adding a Pivot Control to the project
  • Adding a reference to the Toolkit for Windows Phone

Define the purpose of your app

  • What are the goals of the app?
  • What are the user’s goals and how can you keep them aligned?
  • Define your application definition statement.

A successful application typically starts off with an application definition statement. This statement is a concise definition of an app’s main purpose and its intended audience. A statement can be as simple as one line of text. An example could be as follows:

“Make it easy for busy folks
to locate and share quick recipes”

If you create an application definition statement early in the development cycle you will be more likely to remain focused on important features, and stay away from adding unnecessary features that take you away from your original goal.

Define who the user will be. What is their story?

Once you understand the purpose of the application, you need to try your best to put yourself in the place of the user, and create their story. Creating a story might be unfamiliar to you unless you have been involved in UX development. The best way to create a story is to start with a simple matrix of who is going to use your application, where they will be when using their application, what activity they are doing, and what is their motivation to use your application. It is amazing how much functionality you can create by putting thought into these factors.

Define users and their motivations

  • People-That might be interested in using your application
  • Places-Places that someone might use your application
  • Activities-What might someone be doing when using your application
  • Motivations-Motivators a person might have to use your application

For this tutorial,you will focus on the app development of a recipe application, created for an unskilled cook who wants recipes that can be cooked in a short time. As was mentioned in the application definition statement:

“This mobile app provides busy people who love to cook with easy recipes, all less than 1 hour.”

Example of Matrix

In this matrix,there areten examples, but you should push this amount to be 15-20 in a live project. It is much better if you get others involved in creating these factors.

People / Places / Activities / Motivations
College Student / In a classroom / Bored in class / Impressing a date
Young single professional / In the elevator / Using spare time / Enjoys cooking
Newly married person / At the bus stop / Waiting for the bus / Wants to improve cooking skills
New mother / On the couch / Relaxing for a few minutes / Needs meals that can be cooked quickly
Nurse / At the doctor’s office / Taking a break / Wants to try new spices and flavors
Busy Parent / On the bus/train / Cooking for a crowd / Looking for recipes for food already in the house
Fireperson / At work / Refreshing memory on favorite recipe / Needs to find fast recipes to feed co-workers
Cook / In the kitchen / Researching other people’s favorite recipes / Create more diversity in meals
Writer / In the car / Looking for good food in own home / Likes to try new foods
Teacher / In the break room / Shopping / Trying to save time/money

Combine users and motivations

Once you have added the factors for your matrix you can start creating a story about the user. In this example one factor is selected from each column to create the first story. Many interactive designers work with multiple stories.

People / Places / Activities / Motivations
College Student / In a classroom / Bored in class / Impressing a date/spouse
Young single professional / In the elevator / Using spare time / Enjoys cooking
Newly married person / At the bus stop / Waiting for the bus / Wants to improve cooking skills
New mother / On the couch / Relaxing for a few minutes / Needs meals that can be cooked quickly
Nurse / At the doctor’s office / Taking a break / Wants to try new spices and flavors
Busy Parent / bus/train / Cooking for a crowd / Looking for recipe for food already in the house
Fireperson / At work / Refreshing memory on favorite recipe / Needs to find fast recipes to feed co-workers
Cook / In the kitchen / Researching other people’s favorite recipes / Create more diversity in meals
Writer / in the car / Commuting / Likes to try new foods
Teacher / While on break / Shopping / Trying to save time/money

Build a Story

Kara and Steve are recently married. Even though they have been living together for several years they have found themselves in the habit of eating the same meals day-in and day-out. Kara learned how to make a mean meatloaf when she was in college, and Steve can simmer incredible chili. Throw in a couple varied meals of spaghetti and hamburgers and you pretty much have their “not-so-daring” menu.

As Steve and Kara increase the size of their social acquaintances and want to entertain more, they realize that they should start being more diverse in their own menu. Steve has taken the lead as he has some commuting time on the train, when he can spend some time investigating recipes.

In addition to working all day, Steve also has regular evening plans, whether it be playing ball or working out. Depending upon the night, he has a different amount of time available to prepare a meal. Steve has tried online recipes and apps before, but finds it difficult to tie together the two major factors that allow him to make a good decision about what to cook: prep time, and what kind of food Kara and he are in the mood for. He would love to find an app that would allow him to indicate that he wants Chinese, and that it has to be on the table in 30 minutes. It is also important to him that the recipe provides a clearly defined shopping list that he can send to his wife, who drives by a grocery store on her way home from work.

Being that Kara and Steve are social, they would like an easy wayto post their favorite recipes, or Tweet what they are having for dinner that night. They would also like to see what their friends are cooking and recommend by following their posts as well.

Sketch! Sketch! Sketch!

Use post-its, pencil and paper to go through navigation iterations over and over again. This is where you brainstorm with others on your team and come up with as many variations as you can.

Sketch basic functionality based upon user needs and features you wish to include.

You can go as far as you want with the design of your wireframe. Most wireframes (also called the information architecture) are created in black and white and include text about user interactivity, such as steps the user might need to take to navigate the application.

Overview of prototyping using SketchFlow

  • SketchFlow prototypes are entirely non-linear. The application flow can be modeled as a complex graph rather than as a linear sequence of slides.
  • SketchFlow has interactive User Interface (UI) elements, such as buttons and menus that you can add to any screen in the prototype.
  • User interface elements use a hand-drawn sketch style to help distinguish your project as a prototype.
  • You can animate your prototype, creating a visual representation of the interaction between the user and the application.
  • You can create interactivity by using built-in behaviors.
  • Reviewers can annotate SketchFlow prototypes while they are running. The review feedback can be passed back to the designers working on the prototype.

Review of SketchFlow workspace

The workspace includes the artboard, the Assets and State panels, the SketchFlow Animation panel, the Objects and Timeline panel, the Tools panel and the Properties panel.

Document windows

A new SketchFlow document opens a start page by default. As you create more navigation screens, they will be opened, and can be selected here.

Artboard

The artboard is your main screen or canvas; you will add various elements such as images, text and forms, and arrange them on the artboard. The artboard represents the authoring view of your application.

SketchFlow Map panel

The SketchFlow Map panel at the bottom of the screen is a graph editor that allows you to define the various screens in your application. The blue rectangle labeled Start is a node, and by default, represents the initial navigation screen. Hovering over any node expands a section allowing you to create new screens, connections, and components, as well as change the visual tag associated with these nodes.

The Tools panel

The Tools panel allows you to create and modify objects in your application. You create objects by selecting the tool and drawing on the artboard with your mouse (or a tablet, if connected). Tools with a white rectangle in the bottom right corner expand to display more tools when you click them.

Creating the navigation of your appusingthe SketchFlow Map

In this section, you start a Window’s Phone application by creating a new project and building screens in a SketchFlow Map.

1Choose File > New Project. When the New Project window appears, select Windows Phone > Windows Phone SketchFlow Application.

2Name your project Prototype01, and press Browse to save the project in theSketchFlowLessonFilesthat you downloaded from the ToolBox ( website for this lesson.

3Double-click on Screen1 and change the name to Main. You can change the name by double-clicking on Screen1, or you can right-click and choose Rename from the contextual menu.

4Go to the SketchFlow Map panel and hover over Main, when the additional options appear, click on Create a connected screen and drag off to the right of the Main screen. A second, connected, screen is created. The name is highlighted so that you can immediately change it; type AdvSearch for the name of the screen.

When you create a connected screen, you are thinking through the process of what screens a user will navigate to when using your application. It is important to know your screens and their purpose before building the application. Otherwise, you create a confusing path for the user to follow.

5In this application, you take advantage of the Panorama and Pivot controls, offering you many options for content, so these are the only screens you will need for this application.

Connecting screens in the map

As you test the navigation of your site, you may notice that you have a dead end or two, or might have lost the path for the user to reach their goal: finding a recipe. In this section, you return to the SketchFlow Map and connect the AdvSearch and screen back to the Main screen.

1Hover over the AdvSearch screen and this time click and drag on the Connect existing screen and point back to the Main Screen.

2Choose File > Save.

Note: If you need to change a connected screen, you can click and hold on the end of the connector and drag it off the screen to delete it, or drag it to another screen.

Adding Panorama Control

In this section, you will be adding the Panorama control to the initial Main screen. The Panorama is part of the core Windows Phone 7 experience. Unlike standard applications that are designed to fit within the confines of the phone’s screen, panoramic applications offer a unique way to view controls, data and services by using a long, horizontal canvas that extends beyond the confines of the screen. It helps to think of a panorama control as being similar to a magazine cover. A panorama should allow a user to explore content that highlights what is relevant to them. Highlights included on the Panorama control should serve as an entry point to further action. The focus of the panorama should be on a small set of tasks that are fresh, dynamic, and compelling. The panorama should not to be the standalone interaction of your whole application, nor should they be overwhelming, dense, or all encompassing.Keep in mind that in this section you are creating an example to help you discover how to build your own panorama control, and that normally one section of a Panorama would not result in modifying another section of the Panorama.

1Double-click on the Main screen in the Projects panel. Note that when you select the screens, the highlight in the SketchFlow Map panel changes and the .xaml page appears in the artboard.

2Click on Assets at the bottom of the Tools panel to display a list of available controls. In the Search button at the top, type Panorama to see the selection limited to items with Panorama in their name. Select the Panorama Control and press OK. The Panorama control appears at the bottom of the Tools panel.

3Make sure you have the LayoutRootselected in the Objects and Timeline panel, and then double-click on the Panorama icon that is at the bottom of the Tools panel.The Panorama control is added to the Main Screen.

Note: If the Panorama control is grayed out, you will need to select it from Assets again.

4Right-click on Panorama on the Objects and Timeline and choose Auto Size > Fill to have the control fill the entire screen.

5Turn down the arrow to the left of the Panorama control in the Objects and Timeline panel to see that the default Panorama has two sections (called PanoramaItems) that are ready to use. Next, you will add the additional PanoramaItems and resize the screen.