Document09

Who we areWho we are• UX Specialist’s for Universal Mind • New UX Studio in Grand Rapids

• UX Specialist’s for Universal Mind • New UX Studio in Grand Rapids

Some of the things we do:Some of the things we do:• Personas• Sketching• Wireframes • Design• Vision Prototypes

• Personas• Sketching• Wireframes • Design• Vision Prototypes

What is a prototype?What is a prototype?

How does this translate to RIA?How does this translate to RIA?

Wireframes are no longer Wireframes are no longer effective for the kind of work we effective for the kind of work we were doingwere doing

Hand waving only gets you so far.Hand waving only gets you so far.

No one wants to read a 200 No one wants to read a 200 page document page document

Experience the application, not Experience the application, not imagine itimagine it

Prototyping ProcessPrototyping Process• Part 1: Sketching

• 10-30 min• Sketchboards• Sketching in Code

• Part 1: Sketching• 10-30 min• Sketchboards• Sketching in Code

Prototyping ProcessPrototyping Process• Part 2: Present/Critique

• Find the best ideas• Keep it short• 2 min critique

• Part 2: Present/Critique• Find the best ideas• Keep it short• 2 min critique

Prototyping ProcessPrototyping Process• Part 3: Prototype

• Using the right tool• Audience• Time• Fidelity

• Part 3: Prototype• Using the right tool• Audience• Time• Fidelity

Prototyping ProcessPrototyping Process• Part 4: Test

• Testing with clients• 1.5 -3 hours depending on complexity

• Testing end Customers

• Standard Usability Test 8-12 participants

• 5-6 scenarios• Audio-Video Capture/ Reporting

results

• Part 4: Test• Testing with clients

• 1.5 -3 hours depending on complexity

• Testing end Customers• Standard Usability Test 8-12

participants• 5-6 scenarios• Audio-Video Capture/ Reporting

results

Reasons to PrototypeReasons to Prototype• Conveying Complex Interactions• Selling your Idea• Usability testing• Gauging Technical Feasibility

• Conveying Complex Interactions• Selling your Idea• Usability testing• Gauging Technical Feasibility

Prototyping in FlexPrototyping in Flex• Skinning• Degrafa• Images• CSS

• Skinning• Degrafa• Images• CSS

DemosDemos• Degrafa• Wireframing in Flex• Skinning components and containers• CSS for flex• Show some Vision Prototypes

(no cameras or pictures please)

• Degrafa• Wireframing in Flex• Skinning components and containers• CSS for flex• Show some Vision Prototypes

(no cameras or pictures please)

Catalyst is just a toolCatalyst is just a tool• Its not the silver bullet• Workflow issues

• Its not the silver bullet• Workflow issues

Prototypes GuidelinesPrototypes Guidelines• Understand Your Audience and Intent• Plan a Little Prototype the Rest• Set Exceptions• Anyone Can Sketch• Its a Prototype!• Prototype only what

you need

• Understand Your Audience and Intent• Plan a Little Prototype the Rest• Set Exceptions• Anyone Can Sketch• Its a Prototype!• Prototype only what

you need

ResourcesResources• http://labs.adobe.com/technologies/

flashcatalyst/• http://www.degrafa.org/• http://www.adobe.com/devnet/flex/

quickstart/skinning_components/• merhl.com (that’s me)• http://www.scalenine.com/

• http://labs.adobe.com/technologies/flashcatalyst/

• http://www.degrafa.org/• http://www.adobe.com/devnet/flex/

quickstart/skinning_components/• merhl.com (that’s me)• http://www.scalenine.com/