Embed Size (px)
DESCRIPTION
Find out how to build real world user experiences using Adobe's newest products: Flash Catalyst and Flex Gumbo. I'll explore some best practices and pitfalls to watch out for in these early beta tools while building a prototype application from design through deployment. The audience will leave with an understanding of what these tools provide in their current builds, how they can be leveraged in the designer/developer workflow and some best practices for how to leverage their functionality in their own designs. I will provide all the source code and design notes for the application that we'll build.
Citation preview
XD with Flash Catalyst and Flex GumboErik Loehfelm
What’s Experience Design?
What’s Experience Design?
‘The physical engagements between people, design, computers (web technologies), and processes through which the activation of a brand takes place.’
What’s Experience Design?
‘The physical engagements between people, design, computers (web technologies), and processes through which the activation of a brand takes place.’
Also termed UX or User Experience Design
What’s Experience Design?
‘The physical engagements between people, design, computers (web technologies), and processes through which the activation of a brand takes place.’
Also termed UX or User Experience Design
Multi-discipline: information architect, graphic design, interaction design, cognitive sciences, usability engineer, etc...
• 8GB Flash Drive
• 480-by-320-pixel resolution at 163 ppi
• Frequency response: 20Hz to 20,000Hz
• Quad-band (850, 900, 1800, 1900 MHz)
• Audio formats supported: AAC, Protected AAC, MP3, MP3 VBR, Audible (formats 1, 2, and 3), Apple Lossless, AIFF, and WAV
Tools for an XD Pro
Tools for an XD Pro
Pen and Paper
Tools for an XD Pro
Pen and Paper
Adobe CS4: Fireworks, Flash, Photoshop, Illustrator
Tools for an XD Pro
Pen and Paper
Adobe CS4: Fireworks, Flash, Photoshop, Illustrator
OmniGraffle
Typical Deliverables for an XD Pro
Typical Deliverables for an XD Pro
Project objectives
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
“Implement solutions, not features.” - John Geleynse, User Experience Evangelist, Apple
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application de"nition statement (big picture)
Application de"nition statement for iPhoto:
“Easy to use digital photo editing, organizing, and sharing app for casual and amateur photographers.” - John Geleynse, User Experience Evangelist, Apple
Application de"nition statement for iPhoto:
“Easy to use digital photo editing, organizing, and sharing app for medical imaging professionals.” - John Geleynse, User Experience Evangelist, Apple
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Persona: Fred Fish
Photo from Flickr, some rights reserved
Fred Fish, Director of Food Services > Fred works at Boise Controls, a mid-sized manufacturer
of electronic devices used in home security systems. > He supervises the chefs at each of the six sites and
oversees cafeterias and catering services. > Not a big computer user, Fred can send email and use
spreadsheets, but often needs help from his assistant. > Personal: 55 years old, married, three grown children,
Masters degree from Johnson & Wales University.
Background information Fred grew up before computers and the Web were popular. He’s picked up enough to get by, but he’d rather use a cutting board than a keyboard.
He started as a cook in a small restaurant and worked his way up to chef in a larger kitchen, then chef/manager of a small chain, and now works at Boise Controls. He’s a good manager and has seen many of his cooks and chefs move on to their own restaurants, which pleases him.
Sometimes he prepares menus on his computer, but he might also write them on paper and give it to his assistant to distribute.
“I’m a chef. Let’s get out of the office and into the kitchen!”
Key goals As a manager, Fred doesn’t get his hands (literally) dirty the way he used to. He stops in at all the Boise Controls sites and sticks his fingers into things once in awhile to stay in touch with cooks and cooking.
He wants to learn his computer tools, but not at the expense of managing his people or kitchens.
Preparing & distributing menus At the start of every quarter, he meets with the head chefs and plans out the next quarter’s menus. That’s one of his favorite things because each chef gets to demonstrate a new
meal. They spend time in the kitchen exploring each new dish.
When they settle on the quarterly menu, he sends the information out to the chefs, assistant chefs, site managers and his own boss.
Some days, he asks his assistant to format the menus. Other times he’ll do it with the new EZWrite system they just installed on his Macintosh laptop.
He’s figured out a lot of it, but not all of it. “One day,” he thinks, “someone has to figure out a way to reuse a menu layout so I don’t have to start from scratch each time.”
On a good day, he can drag in some clip art and do some formatting with fonts.
He always had problems sending a message without the attachment, or an attachment with no message. That’s annoying and embarrassing. That was one of the things keeping him away from computers.
EZWRite seems to have some features to help with that. Anytime he writes something like “…the attached menu…” the program prompts him if he doesn’t attach something. If there were a Nobel Prize for software, he’d nominate the people who designed this.
source: http://www.user.com
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams
Wireframes
Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams
Wireframes
Prototypes - Low Fidelity > High Fidelity
Enter Flash Catalyst!
Enter Flash Catalyst!
Disclaimer:
Enter Flash Catalyst!
Disclaimer:
I don’t work for Adobe.
Enter Flash Catalyst!
Disclaimer:
I don’t work for Adobe.
I’m working on assumptions based on the MAX build.
Enter Flash Catalyst!
Disclaimer:
I don’t work for Adobe.
I’m working on assumptions based on the MAX build.
Current application build doesn’t entirely support my proposed approach.
Adobe’s Proposed Work!ow
Adobe’s Proposed Work!ow
Design in CS4
Adobe’s Proposed Work!ow
Design in CS4
Round-trip from CS4 to Catalyst and back
Adobe’s Proposed Work!ow
Design in CS4
Round-trip from CS4 to Catalyst and back
One-way from Catalyst to Flex Builder
Designer Developer
The XD Pro’s Work!ow with Catalyst
The XD Pro’s Work!ow with Catalyst
‘Boxes and Arrows’ in Catalyst
The XD Pro’s Work!ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low "delity prototypes in Catalyst
The XD Pro’s Work!ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low "delity prototypes in Catalyst
Iterate through higher "delity prototypes in Catalyst
The XD Pro’s Work!ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low "delity prototypes in Catalyst
Iterate through higher "delity prototypes in Catalyst
Catalyst to CS4 for introduction of styling and theme
The XD Pro’s Work!ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low "delity prototypes in Catalyst
Iterate through higher "delity prototypes in Catalyst
Catalyst to CS4 for introduction of styling and theme
CS4 to Catalyst for high "delity prototypes
The XD Pro’s Work!ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low "delity prototypes in Catalyst
Iterate through higher "delity prototypes in Catalyst
Catalyst to CS4 for introduction of styling and theme
CS4 to Catalyst for high "delity prototypes
CS4/Catalyst/Flex round-trip very high "delity
DeveloperExperience Designer/Graphic Designer
Hmmm...
Hmmm...
Doesn’t quite work this way :(
Hmmm...
Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP
DeveloperExperience Designer/Graphic Designer
DeveloperExperience Designer/Graphic Designer
Hmmm...
Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP
Hmmm...
Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP
Round-trip from Flex -> Catalyst not intended
DeveloperExperience Designer/Graphic Designer
DeveloperExperience Designer/Graphic Designer
Workarounds
Workarounds
Low-"delity component library in CS4
Workarounds
Low-"delity component library in CS4
Version control from Flex -> Catalyst
Workarounds
Low-"delity component library in CS4
Version control from Flex -> Catalyst
Not WYSIWYG after Flex
Our Project - Weather Widget!
Our Project - Weather Widget!
Weather app from the iPhone
Thanks!
http://erikloehfelm.blogspot.com
http://www.twitter.com/eloehfelm
http://www.adaptivepath.com/
iPhone Getting Started Videos - ADC Web Account at http://developer.apple.com
