6 Tips for a Great Flex UX: Part 2

February 18, 2009 — 4 Comments

Since our 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 2 of 6:

  • Play With It: 10 Explorers & Galleries
  • Learn From the Best: 10 Great Flex Apps
  • Learn From the Rest: 10 Great RIAs
  • Stock Your Toolbox: The Essential Controls
  • Review Best Practices for Designing a RIA
  • Avoid Common Mistakes: 10 Anti-Patterns

Learn from the Best: 10 Great Flex Apps

Take a look at some of the best Flex applications on the market. How did I decide these are the best? I reviewed numerous applications, basing the evaluations on Jakob Nielsen’s 10 Principles for User Interface Design:

Feedback — Metaphor — Navigation — Consistency — Prevention — Recognition — Efficiency — Design — Recovery — Help

I realize these guidelines are a bit old (from 1990!)- but all applications should meet these guidelines at a minimum. The applications listed below also embody our 6 Principles for Rich Interaction:

Make it Direct — Keep it Lightweight — Stay on the Page — Provide an Invitation — Use Transitions — React Immediately

01. Picnik

picnik
Free version available

02. Balsamiq

balsamiq
Trial version available

03. Sprout Builder

sproutbuilder
Demo version available.

04. Campaign Monitor by eyeblaster

campaignmonitor
Commercial application- no demo available. Awarded Top 10 User Interfaces of 2008 by Jakob Nielsen. Report available for purchase.

05. ConceptShare

conceptshare
Free account available.

06. Weight Watchers eTools

weight_watchers
Commercial application- no demo available.

07. Small Worlds

smallworlds
Free account available

08. Buzzword

adobebuzzword
Free account available

09. Whitestone Cheese

whitestone
Publicly available at www.whitestonecheese.co.nz

10. Kuler

kuler
Publicly available at kuler.adobe.com

11. SumoPaint

sumopaint-screen
Free account available

Close Contenders

These apps were really close, but missed a couple of key principles, or are still maturing.

Klok

klok_fullscreenklok_time_entries
Free personal download available

Nice time tracking product in AIR- nailed the metaphor, but haven’t Made it Direct enough (yet). I instinctively want to click in my calendar to start logging my time against a certain project. Instead I have to navigate to Project View, then into Time Entries. And spinners for entering start and stop times are inefficient.

I must say I love the Weekly Time Sheet though, and the fact I can drag it to my desktop! I think this product will mature very nicely.

Tour Tracker

tour_tracker_fullscreen
tourtracker_allcaps
Up for a limited time at Amgen Tour of California.

Looks amazing. The metaphor is perfect- big map showing the course and stages- but lost points on some basic principles. Specifically Feedback- I click and click to “watch a rider” on the home page, nothing happens, so I keep clicking. And Design- a black background might demo well, but white and blue tex, all caps, sure is hard on the eyes.

Google Finance Dashboard

googlefinance
Publicly available at BrightPoint Consulting

This is a really nice dashboard showing what can be done with Flex & Degrafa. I can’t wait to see how they finish it out. Also check out Tom Gonzale’s blog for more amazing data visualizations with Flex and Degrafa.

htmlText Editor 2008

htmltexteditor1
Publicly available at www.theflexguy.com

This is a neat little one screen application that absolutely Stays in the Page and Makes it Direct. However, the Filter Tags feature is non-standard in more than one way: “If you remove tags and see that they really were needed, you can just uncheck the box and press Filter tags again.” I know the space is limited but Undo and Redo buttons would make more sense.

Agile Agenda

agileagendaagile_agenda_clicks
Free trial download available

Project management tool in AIR. Missed the Keep it Direct, and Stay in the Page principles. Too many dialogs where simple inline editing would have sufficed. Need better icons, or text with the icons. Usability aside, the product’s functionality seems to be quite robust and well worth the price.

Comment with your favorite Flex applications

I realize I have only skimmed the surface here, please comment with a link to the best Flex UIs you know of.

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

  1. 

    Thank you for letting me know. I will correct the post.

Trackbacks and Pingbacks:

  1. Theresaneil’s - 6 Tips for a Great Flex UX: Part 2 « The Sprout Blog - February 18, 2009

    [...] See the full post… [...]

  2. 6 Tips for a Great Flex UX: Part 4 « Theresaneil’s Weblog - April 22, 2009

    [...] Learn From the Best: 10 Great Flex Apps [...]

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

    [...] Play With It: 10 Explorers & Galleries * Learn From the Best: 10 Great Flex Apps * Learn From the Rest: 10 Great RIAs * Stock Your Toolbox: 40+ Custom Flex Controls * Review [...]

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