Introduction to Designing for Flex - Austin Adobe Users Group December 2009. Includes: - Flex Tips for getting started - 40+ Custom Flex controls - Flex Data Visualization Tools - Frameworks (event frameworks and graphical frameworks) - User interface design principles and patterns - Showcase of the best current Rich Internet Applications - UI Design Anti-Patterns - Using Photoshop + Flash Catalyst + Flash Builder to work faster - Using Flex templates in CS4: Photoshop, Illustrator and Fireworks

1. Explorers UI Design
and Principles
Galleries
Great
Applicatio
ns
UI Design
Anti-Patterns
Custom
Components
Charts and
Data
Visualizations
Adobe Tools
for Frameworks
Prototyping

2. Explorers
and
Galleries
Know what
Flex offers
Flex Tips

3. Custom
Components
Before you
roll your
own- check
these out

4. AnyCharts FlexMonster Degrafa
BirdEye Axiis Open Flash
KapIT Labs Fusion Charts
yFiles for Flex
Charts and
Many open-
Data
Visualizations
source and
commercial
options

5. UI Design
Principles
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

6. UI Design
1. Provide Feedback Principles
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

7. UI Design
Principles
2. Match the Real World
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

8. UI Design
Principles
3. Minimize Navigation
10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

9. UI Design
Principles
4. Be Consistent 10 Usability
Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

10. UI Design
Principles
10 Usability
5. Prevent Errors Best Practices
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

11. UI Design
Principles
10 Usability
Best Practices
6. Minimize the Memory Load
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

12. UI Design
Principles
10 Usability
Best Practices
7. Design for Efficiency
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

13. UI Design
Principles
10 Usability
Best Practices
8. Respect the Principles of C.R.A.P
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

14. UI Design
Principles
10 Usability
Best Practices
9. Assist with Recovery
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

15. UI Design
Principles
10 Usability
Best Practices
10. Provide Integrated Help
10 Principles from Jakob Nielsen, C.R.A.P acronym from the Non-Designers Design Book by Robin Willams

16. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Aviary

17. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
CrazyEgg

18. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Balsamiq
Mockups

19. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Discover
Spend
Analyzer

20. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Wufoo

21. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
SlideRocket

22. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Picnik

23. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Sprout
Builder

24. Great
Applicatio
some Flex
ns
, some not
50 Most
Usable RIAs
Quicken
Online

25. UI Design
1. Make it Direct Principles
6 Principles
for Rich
Interactions

26. UI Design
Principles
2. Keep it Lightweight
6 Principles
for Rich
Interactions

27. UI Design
Principles
3. Stay on the Page
6 Principles
for Rich
Interactions

28. UI Design
Principles
6 Principles
4. Provide Invitations
for Rich
Interactions

29. UI Design
Principles
6 Principles
for Rich
5. Use Transitions
Interactions

30. UI Design
Principles
6 Principles
for Rich
Interactions
6. React Immediately

31. UI Design
Anti-Patterns

32. UI Design
Anti-Patterns
borg idiom
don’t munge
controls together
Ebay AIR

33. UI Design
Anti-Patterns
non-
symmetrical
actions
keep the actions
symmetrical
Disclaimer- this is one of my favorite web apps, it just has this one anti-pattern

34. UI Design
Anti-Patterns
double duty
each object
should have one
responsibility
Disclaimer- this is a really nice and useful AIR application, it just has this one anti-pattern

35. UI Design
Anti-Patterns
hover and
cover
hover below, left
or above, not to
the right
Disclaimer- this is a beautiful application and fun to use, it just has this one anti-pattern

36. UI Design
Anti-Patterns
oceans of
buttons
re-evaluate the IA
and user goals

37. UI Design
Anti-Patterns
oceans of
buttons
re-evaluate the IA
and user goals

38. UI Design
Anti-Patterns
animation
gone wild
rule of 1/2s-
remove 1/2, then
1/2 again
Disclaimer- the Behr paint site is really nice, just a little overzealous with the animation

39. UI Design
Anti-Patterns
tiny targets
go no smaller
than 16x16

40. UI Design
Anti-Patterns
tiny targets
go no smaller
than 16x16

41. UI Design
Anti-Patterns
novel notions
intuitive=
familiar, don’t
get creative

42. UI Design
Anti-Patterns
novel notions
intuitive=
familiar, don’t
get creative

43. UI Design
Anti-Patterns
novel notions
intuitive=
familiar, don’t
get creative

44. Event
Frameworks
frameworks
17

45. Event
Frameworks
frameworks
17

46. Event
Frameworks
frameworks
17

47. Event
Frameworks
frameworks
17

48. Graphics
framework: also, take a
Frameworks charts, look at
for
mapping, ScaleNine
skinning... Flex Skins
18

49. Photoshop + 1. Start in
Adobe Tools
Catalyst + Photoshop or
for er
Flash Build Illustrator
Prototyping 4

50. 2. Import into
Adobe Tools Photoshop + Flash
for Catalyst + Catalyst-
er
Prototyping Flash Build then save
4 project

51. 2. Import into
Adobe Tools Photoshop + Flash
for Catalyst + Catalyst-
er
Prototyping Flash Build then save
4 project

52. 3. Open project hack for
Adobe Tools Photoshop + in Flash
keeping the
for Catalyst + Builder 4
er two sync’d
Prototyping Flash Build (formerly Flex
4 Builder)

53. :
Alternative Open ‘New Flex
Adobe Tools Use skin Skin’ from the
for templates in menu, edit,
I:
Prototyping PS, FW or A then ‘Export
CS4 Flex Skin’

54. Twitter
@theresaneil
theresanei
l.com
Thank you!
b
presented at the Austin Adobe User Group Dec 11,2009 Designing We
Interfaces,
O’Reilly 2009