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

http://techmaster.vn

Agenda

• Problems when coding without prototype

• Introduction to Expression Blend

• UI Prototyping with Expression Blend

http://techmaster.vn

• 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

http://techmaster.vn

• 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

http://techmaster.vn

Good Pattern

http://techmaster.vn

Good Pattern

http://techmaster.vn

SketchFlow Role

http://techmaster.vn

3 Ingredients of a Good UX

Platform

Tools

Skills

UX

http://techmaster.vn

• 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

http://techmaster.vn

Designer & Developer Workflow

Designer Developer

http://techmaster.vn

Rapidly Model the Look and Feel

http://techmaster.vn10/04/2023

Multi-Version/User Feedback

http://techmaster.vn

http://techmaster.vn

http://techmaster.vn

http://techmaster.vn

• 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

http://techmaster.vn

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?

http://techmaster.vn

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”

http://techmaster.vn

MindMap – User Story

http://techmaster.vn

List User Story

http://techmaster.vn

Expression Blend Workspace• Document

windows

• Artboard

• SketchFlow Map

• Tools panel

• Properties

• Objects & Timeline

http://techmaster.vn

SketchFlow Map

http://techmaster.vn

Sketch styles for controls

http://techmaster.vn

Adding navigations

http://techmaster.vn

Data binding and sample data

http://techmaster.vn

SketchFlow animation

http://techmaster.vn

SketchFlow player

http://techmaster.vn

Design documentation

http://techmaster.vn

What’s next?

• From Sketchflow to production

• Animation, Transition

http://techmaster.vn

• 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