Dave Meeker
User Experience
for Flex Developers
building harmony between
design & development
dave meeker, user experience strategist - roundarch

2
Dave Meeker
Who am I?
Dave Meeker (dmeeker@roundarch.com)
User Experience Strategist ‐ Roundarch
Manages Roundarch Labs
Manages Agency’s Partnership with MicrosoF and Adobe
Blog: www.whatanexperience.org / O’Reilly Inside RIA Blog
Always Hiring Flex Developers :‐)
Core Member: The Merapi Project
Hybrid background: Technology & Design
Using Flash since ’96 and Flex since “Macromedia Royale” (pre‐
alpha)

3
Dave Meeker
Warning!
The following slide(s) may cause
“User Experience” Professionals to
roll their eyes and groan because it
seems as if maybe this talk is
starting out on the wrong foot.

4
(IXD) Interaction Design - (VIZ) Visual Design - (IA) Information Architecture
It’s all the same soup
*(UX) User Experience Flavored

5
Dave Meeker
User Experience Design
(IA) ‐ InformaXon Architecture
(IXD) ‐ InteracXon Design
(VIZ) Visual Design
(UX) User Experience Design (ok?)

6
Dave Meeker
Some UX Deliverables*
Personas User Matrix
Detailed Business
Requirements
GUI Wireframes
Visual Design Comps
(that include notation / business rules)
*NOT an exhaustive list of all User Experience Deliverables

7
Dave Meeker
Pre-RIA Web
Developers got away
with Murder by
proclaiming “You
can’t do that in
HTML”

7
Dave Meeker
Pre-RIA Web
Developers got away
with Murder by
proclaiming “You
can’t do that in
HTML”

Dave Meeker
User Experience
More than visual design, and as some put it, “pre^y pictures”.
Becoming the key driver behind consumer and enterprise soFware development
iniXaXves.
Over the last 10 years, we’ve really increased the possibiliXes of what can
happen on the back‐end.
Back‐end applicaXons have paved the way for what we can now leverage on
the front‐end.
Users are now demanding that applicaXons adapt to their evolving skills, wants,
and needs.
If you are developing “RIAs” (in any technology) YOU care about user experience.

9
Dave Meeker
Great User Experiences
strategy
RIA
Sweet Spot
design technology

10
Dave Meeker
Adobe Flex* was
created with
a single goal...
creating better user
experiences
*and flash, AIR, & other RIA technologies

11
Dave Meeker
All devices that contain screens
provide opportunities for user
experience design and development.
It’s not just about the “computer”
The coming years will introduce more advanced, network-connected
devices for both business and consumer use.
When web technology fuses with “legacy devices” such as
automobiles, appliances and televisions, great user experience design
is required to ensure adoption. Mobile is obvious and here now.

12
Dave Meeker
How Can You Enable
Great User Experiences?

13
Dave Meeker
3 types of Flex developer situations
Individual Developer - Doing Design, Development Solo - You own it all
UX, Visual Design, Architecture, Development
Smaller Projects / Small Teams with Tight Integration
UX Input, Architecture, Development
Big Projects / Large, Multi-Disciplinary Team / More Moving Parts
UX Input (fight for it!), Architecture, Development

14
Dave Meeker
Don’t get Sketched Out
The Process of Building RIAs is different
than Legacy Web Design

Dave Meeker
The Process Challenges of
Creating Great RIA Experiences
Building RIAs changes the way you work. A Great RIA design and development
team are different people than your traditional “Web” development or
“Desktop” development team.
Internal team – Enterprise product development, etc – Building stuff “for us”.
External team – Building stuff “for others” – Consulting / Pro services / design
shop
Your team make-up needs to change
Your process must change
Conceptual Designs
Prototyping
Lean on Iterative processes when at all possible

16
Dave Meeker
Project Approach
Change it. Learn From It. Refine It.
Work in hybrid teams - Get Developers involved early in the project process.
Don’t allow yourself to be handed documentation \"over the wall\"
Go through iterations: sketch >> prototype / proof of concept >> prototype >> test >> prototype >>
test >> design >> test >> design>> develop >> test (or something like this).

17
Dave Meeker
How I like to approach projects @ Roundarch
Strategy - Usually a small, diverse team that works with the client to help them define
problems, understand what options are available to solve the problems, how their
competitors deal with the same problems and how the problem & the solution to the
problem will evolve over time based on other contributing factors. They help figure out
the “what are we really trying to fix? question.
Discovery phase allows team to understand all facets of the client’s problem. Every
discovery phase is different and unique to the situation. Deliverables: User Experience
Brief, Personas, Conceptual Design (usually prototype in flash).
Design: Both Technical design and visual design. Teams work together, with little
separation from designers and developers, analysts, and testers. As requirements are
refined, the prototype grows from a clickable mirage to a prototype with re-usable code.
Agile process helps, and requires full buy-in from team and client or it will not work!
During this phase, testing is done with users to ensure that it meets the functional needs
of all identified user scenarios. Test results are fed back to the team who refine the design
and resubmit to testing.

18
Dave Meeker
How I like to approach projects @ Roundarch
Development still involves design team members, and begins once 60%-70% of
the critical requirements are documented in either wireframe or the conceptual
prototype. The team starts with the things most likely not to change. As
requirements are solidified, they are built into the application. As soon as an alpha
GUI is available, it is staged and the combined team follow an Agile path to getting
things done. If changes come from testing, or as new requirements from the client,
they are simply worked into the overall project and dealt with based on priority.
Project Managers are more like Project “Leads”, with a diverse background
and an understanding of both technology and design, the PM’s “own” the project.
They are hands on, and are focused on every aspect of the project. They work with
a tech lead and creative lead, who is responsible to the PM for their team’s
deliverables.

19
Dave Meeker
10 +1 Things You Should Do
when building Flex Applications!

20
Dave Meeker
Keep your Eye on the Ball.
Review Other GUIs constantly.
Consume Them, Borrow From Them,
Improve upon them.
Understand what your users are seeing in different applications,
operating systems, etc. Study trends. One-up the competition, but
don’t design for “design’s sake”... Design because it matters.

21
Dave Meeker
Designers & Developers
Work together to create great results!
Try to stimulate and enhance the \"designer / developer\" workflow.
- Flash Catalyst, Creative Suite / Adobe Product workflow / DeGrafa (Skinning Framework)
Be precise. Pixel perfect skins matter. Respect the work of Experience Architects and
Designers by implementing UIs to perfection! DO NOT BE AFRAID to suggest new ideas and
solutions to problems! (collaboration and sharing is very important!)

22
Dave Meeker
Repeat After Me...
Implementing a Design that is
“Close” is not usually “Close Enough”
Create a theme project, includes skins, images, etc..., to allow ease of
switching and maintainability.
Use CSS
Involve design team members throughout the course of the project

23
Dave Meeker
Follow the Leader.
Learn from Others...Follow your
Architect’s Lead
Using design patterns, frameworks, etc, is not as important as convention. Maintenance
is expensive, consistency throughout an application is extremely important.
Comment your code!
Implement Flex component correctly. Build robust custom components to allow flexibility
and portability.

24
Dave Meeker
Work Smart, Not Hard.
Find / invent tools that help minimize repetition.
Use best practices and technologies that make your life easier, but
don't be a zealot. Don't be afraid to try something new.

25
Dave Meeker
Lean on Frameworks
Code Right: Keep things Separate
Knowing the basics is important. It is probably not a bad idea to get
your team comfortable on one of the popular Flex frameworks
(Cairngorm, pureMVC, etc).

26
Dave Meeker
Take Risks...
But don’t be crazy!
Write code that uses abstraction, but don't go crazy... Implementing
the most elegant, abstracted patterns take time.
These implementations are only as valuable as the problems they solve.
Over-engineering is one of the biggest losses to efficiency.

27
Dave Meeker
Breath Life into Your Apps.
Discrete Animation, Physics, etc.
Fades, Movement, Resizing/Scaling, Collision, Object Physics, Etc.

28
Dave Meeker
Take a Load Off.
Define an asset loading
strategy that optimizes the
user experience

29
Dave Meeker
Think Outside the Grid
Use a layout that works best for the
experience you want to create
Don’t be afraid to build an interface that really solves the problem or creates the experience that you
need most.
Enhance your interface with fluid object layouts (that react to one another) and don’t be shy about
breaking outside the bounds of a constrained box. Go full-screen if you need it, but don’t hijack
someone’s experience.
Use the right “magic” for the battle you are fighting!

30
Dave Meeker
Tour de Flex
Use It, Contribute To It.
Tour de Flex, created by Adobe is a major improvement over the old “Flex
component explorer” - http://flex.org/tour
A critical tool in the arsenal of anyone learning Flex!
Integrates with Eclipse (Search, etc) by using Merapi (wait for tomorrow!)

Dave Meeker
“Serious” Applications
Are no longer Boring, Bad, Poorly Designed and “A Challenge” to use
They have started to reflect the changes that have happened in the consumer space:
Less Serious Feeling
More Visually Appealing
Easier to Understand
“Signposting” Design
Designed with users in mind instead of based on legacy IT capabilities
Don’t have to feel monstrous, or overwhelming
Examples? Citi, US Air Force, Motorola, US Army, Northern Trust, etc.

32
Dave Meeker
Thanks!
dave meeker - roundarch - dmeeker@roundarch.com