6 Tips for a Great Flex UX: Part 4

April 22, 2009 — 3 Comments

Since our new book focuses on rich interactions, I want to spend some time on Adobe Flex/AIR.

These tips are based on the best Flex resources I have found, and how you can use them to craft a great user experience. This is part 4 of 6:

Stock your Toolbox: 40+ Custom Flex Controls

Flex 3 includes a wide range of controls. Unfortunately, it doesn’t have all of the Essential Controls I use for RIA design. But fortunately, talented and industrious Flex developers have created numerous custom controls for Flex.
40_flex_custom_controls1

I pulled together a visual repository of custom Flex controls. Most of these controls were created to showcase certain functionality- not usability best practices. So some may need further refinement to comply with the usability principles discussed in the previous posts. Click on the picture for the demo.

01. Accordions

accordion_with_custom_header
Complex Headers
accordion_horizontal
Horizontal Accordion
accordion_apple_style

Apple Style
More under ‘Collapsible Panels’

02. Auto Complete

auto_complete
More Examples

03. Bar Code Generator

barcode_reader

04. Build a List

build_a_list2

05. Calendar/Scheduler

calendar1
ILog Elixir
calendar
Ely Greenfield’s early Scheduler
calendar_scheduling
Adobe’s Scheduler on flexlib see flexlib.scheduling package

06. Captcha

captcha

07. Charts & Graphs

chart
3D charts by iLog Elixir
graph_drill
Chart Drill Down with Animation
dash
Dashed Line Series
graph_compress
Chart Offest
legend
Advanced Legend
scroll_zoom
Scroll and Zoom

08. Collapsible Panels

collapsible_panels
Window Shade- panels roll up and down
collapsible
Arc90’s Collapsible Panel
stacked_panels
Early Stacked Panels

09. Cover Flow

coverflow1
Doug McCune’s updated Cover Flow

10. Data Visualization

diagrammer
gauge
Kap IT Lab
ILog Elixir
BirdEye

11. Docking

dockable

12. Drop Down Menu with Scrolling

menu_scrolling

13. Find and Highlight Text

highlight
In flexlib as Highlighter

14. Fisheye Menu (like Mac Dock)

dock

15. Flip Card

flip

16. Floating

floating

17. Gantt Chart

gantt
ILOG Elixir Gantt
gantt
Doug McCune’s Early Gantt Chart

18. Inline Edit (Fields)

inline_edit
Early example by Ely Greenfield
inplace_edit
Modal editing variation by Ryan Swanson
* The hover invitation to edit on a field by field basis (like Flickr) works best for infrequent edits

19. Icon Loader

image_converter
On flexlib under Icon Loader

20. List/Tree Converter

list_tree
On flexlib under Convertible Tree List

21. Mask (text input and validation)

mask
On Adobe Flex Exchange

22. Multiple Document Interface (MDI)

mdi1
On flexlib under flexlib.mdi

23. Magnify

magnify1
magnify_big

24. Map Callouts

map_callouts

23. Pan and Zoom

pan_zoom

24. Page Turn

page_turn
Peek Panel by Bill White (nice blog)
Ely Greenfield’s early FlexBook

Didier Braun’s PageFlip

25. Pivot Table

pivot
Satish’s Pivot Table
pivot_flexmonster
Flex Monster product

26. Resize

resize1
Resizeable and moveable window
resize
Resize Objects with ResizeManagerFX

27. Scrolling-Internal

scroll_panel
In flexlib as Drag Scrolling Canvas

28. Side Tabs/Vertical Tabs

side_tabs
Degrafa ToggleButtonBar vertical tabs
side_tabs_2
side_tabs_3
Vertical Tab Navigator

29. Sliders

slider_dual

30. Sliding Panel

slide_panel

Early example
Slide out menu with effects instead of states

31. Sparklines

sparkline
More examples:
Fusion Charts
Sherlock Informatics
Birdeye
19nates

32. Spell Check

spell_check
There is also a Spell Check component on Flex Exchange

33. Tabs (configurable)

tab_2

34. Text Prompt/ Watermark Fields

watermark
At flexlib under prompting TextInput

35. Tree Table

tree_table
Early Tree Grid

36. Time Picker

time
Alternate one on Flex Exchange as Time Chooser

37. Toolbars

toolbars

38. Trees

tree
Open branches by clicking on the row
Adding leaf notes
Showing XML
Rearranging nodes with drag and drop
Drag from a Grid to a Tree

39. Upload Files

upload

40. Vertical Browse

vertical_browse

Comment with your custom Flex controls

Please comment with a link to your favorite custom Flex controls.

3 responses to 6 Tips for a Great Flex UX: Part 4

  1. 

    hi,this is mallik mca fresh graduate this is nice information about flex ui.that means how to flex we have to use in webbased applications and this is RIA
    using this user can easy understand how to interact with ui layer,and it is nice information to the students who have interested inflex
    Thanks&Regards,
    mallik

Trackbacks and Pingbacks:

  1. 6 Tips for a Great Flex UX: Part 5 « Theresaneil’s Weblog - July 10, 2009

    […] & Galleries * Learn From the Best: 10 Great Flex Apps * Learn From the Rest: 10 Great RIAs * Stock Your Toolbox: 40+ Custom Flex Controls * Review Usability Best Practices * Avoid Common Mistakes: 10 […]

  2. Flex Components « Pat IT Dude Blog - August 12, 2009

    […] Advanced Components FX:Script blog Flex Componentor Some great Flex UX components […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s