UI Prototyping with MS Expresion Blend

Nguyễn Thanh Tùng – Chief Software Architect - MISA JSC

Agenda

Problems when coding without prototype

Introduction to Expression Blend UI Prototyping with Expression Blend

Stakeholders asked for user requirements You started building a function

immediately Stakeholders end up saying that is not

what they want => You ruin and redesign everything with

an angry attitude

Problems when coding without prototype

But it’s not real problem Problem here is we need a way to

validate what’s the stakeholder want before is too late

It has to fast process for the stakeholder provide feedbacks

Problems when coding without prototype

Good pattern

ProductionPrototype

Core architecture

User Experience

Visual Studio

Expression Blend

SketchFlow

PSD, AI, Paper Client

1: Ideas 2: Resources 3: Project

SketchFlow Role

ProductionPrototype

Visual Studio

Expression Blend

SketchFlow

PSD, AI, Paper

ALM/Visual Studio Team System

Specs,Requirements Deployment

3 Ingredients of a Good UX

Platform

Tools

Skills

UX

Interactive design tool for rich apps built in Windows Phone, Silverlight and WPF

SketchFlow is a rapid prototyping tool that allows you to build and test out UI’s quickly

Provide an interactive way to get stakeholder feedbacks

Market-leading designer-developer integration and workflow

Why is Expression Blend Sketchflow

Designer & Developer Workflow

Designer Developer

Rapidly Model the Look and Feel

08/04/2023

Multi-Version/User Feedback

Drag & Drop interface Sketch controls style Navigation, animations, behaviors Realistic sample data Highly customizable: UI & code Package and send prototype to stakeholder for

adding comment, draw some feedbacks figures Documentation generation

SketchFlow hightlights

UI Prototyping with Expression Blend

Define the purpose of the app What are the goals of the app? What are the user’s requirements? How can you keep them aligned?

Analysis Matrix – User Story

People Places Activities MotivationsCollege 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

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

MindMap – User Story

List User Story

Expression Blend Workspace

Document windows

Artboard SketchFlow Map Tools panel Properties Objects &

Timeline

SketchFlow Map

Sketch styles for controls

Adding navigations

Data binding and sample data

SketchFlow animation

SketchFlow player

Design documentation

What’s next?

From Sketchflow to production Animation, Transition

Sketchflow provide us with a quick way to build a prototype using just hand drawn sketches.

How to build a page by using sketched controls and reusable components.

How to add real data to our prototype.

Summary