great experiences with flex

Charts and

Data

Visualizations

Great Applications

Custom

Components

UI Design Principles

UI Design

Anti-Patterns

Explorers

and

Galleries

Adobe Tools for

PrototypingFrameworks

Explorers

and

Galleries

Know what Flex offersFlex Tips

Custom

Components

Before you roll your

own- check these out

Charts and

Data

Visualizations

Many open- source and commercial

options

AnyCharts

AxiisBirdEye

DegrafaFlexMonster

Fusion ChartsKapIT Labs

Open Flash

yFiles for Flex

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

UI Design Principles

10 Usability Best Practices

1. Provide Feedback

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

UI Design Principles

10 Usability Best Practices

2. Match the Real World

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

UI Design Principles

10 Usability Best Practices

3. Minimize Navigation

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

UI Design Principles

10 Usability Best Practices

4. Be Consistent

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

UI Design Principles

10 Usability Best Practices 5. Prevent Errors

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

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

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

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

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

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

Aviary

Great Applicationssome Flex, some not

50 Most Usable RIAs

CrazyEgg

Great Applicationssome Flex, some not

50 Most Usable RIAs

Balsamiq Mockups

Great Applicationssome Flex, some not

50 Most Usable RIAs

Discover Spend

Analyzer

Great Applicationssome Flex, some not

50 Most Usable RIAs

Wufoo

Great Applicationssome Flex, some not

50 Most Usable RIAs

SlideRocket

Great Applicationssome Flex, some not

50 Most Usable RIAs

Picnik

Great Applicationssome Flex, some not

50 Most Usable RIAs

SproutBuilder

Great Applicationssome Flex, some not

50 Most Usable RIAs

Quicken Online

Great Applicationssome Flex, some not

50 Most Usable RIAs

1. Make it Direct

UI Design Principles

6 Principles for Rich

Interactions

2. Keep it Lightweight

UI Design Principles

6 Principles for Rich

Interactions

3. Stay on the Page

UI Design Principles

6 Principles for Rich

Interactions

4. Provide Invitations

UI Design Principles

6 Principles for Rich

Interactions

5. Use Transitions

UI Design Principles

6 Principles for Rich

Interactions

UI Design Principles

6 Principles for Rich

Interactions6. React Immediately

UI Design

Anti-Patterns

UI Design

Anti-Patterns

borg idiomdon’t munge

controls together

Ebay AIR

UI Design

Anti-Patterns

non-symmetrical

actionskeep the actions

symmetrical

Disclaimer- this is one of my favorite web apps, it just has this one anti-pattern

UI Design

Anti-Patterns

double dutyeach object

should have one responsibility

Disclaimer- this is a really nice and useful AIR application, it just has this one anti-pattern

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

UI Design

Anti-Patterns

oceans of buttons

re-evaluate the IA and user goals

UI Design

Anti-Patterns

oceans of buttons

re-evaluate the IA and user goals

UI Design

Anti-Patterns

animation gone wildrule 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

UI Design

Anti-Patterns

tiny targetsgo no smaller than 16x16

UI Design

Anti-Patterns

tiny targetsgo no smaller than 16x16

UI Design

Anti-Patterns

novel notionsintuitive=

familiar, don’t get creative

UI Design

Anti-Patterns

novel notionsintuitive=

familiar, don’t get creative

UI Design

Anti-Patterns

novel notionsintuitive=

familiar, don’t get creative

17

Frameworks Event frameworks

17

Frameworks Event frameworks

17

Frameworks Event frameworks

17

Frameworks Event frameworks

18

Frameworks

Graphics framework:

charts, mapping,

skinning...

also, take a

look at

ScaleNine for

Flex Skins

Adobe Tools for

Prototyping

Photoshop +

Catalyst +

Flash Builder

4

1. Start in Photoshop or Illustrator

Adobe Tools for

Prototyping

2. Import into Flash

Catalyst- then save

project

Photoshop +

Catalyst +

Flash Builder

4

Adobe Tools for

Prototyping

2. Import into Flash

Catalyst- then save

project

Photoshop +

Catalyst +

Flash Builder

4

Adobe Tools for

Prototyping

3. Open project in Flash

Builder 4 (formerly Flex

Builder)

hack for keeping the two sync’d

Photoshop +

Catalyst +

Flash Builder

4

Adobe Tools for

Prototyping

Alternative:

Use skin

templates in

PS, FW or AI:

CS4

Open ‘New Flex Skin’ from the

menu, edit, then ‘Export Flex Skin’

theresaneil.com

Twitter @theresaneil

presented at the Austin Adobe User Group Dec 11,2009

Thank you!Designing Web

Interfaces,

O’Reilly 2009