Post on 27-Jan-2015
description
transcript
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