Prototyping giao diện sử dụng Expression Blend Sketch Flow

http://techmaster.vn

UI Prototyping with MS Expresion Blend

Bài giảng do giảng viên TechMaster biên soạn


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


Good Pattern


SketchFlow Role


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

http://techmaster.vn10/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

Technology

Prototyping giao diện sử dụng Expression Blend Sketch Flow