Archives For Flex

We’ve been working with Adobe since last year to design and develop a showcase of reference applications for Flex 4.5 and Flash Builder 4.5. This has been an amazing project from a design and development perspective, designing for multiple form factors, and coding with the new SDK.

Read more here:

Just a year after Flash Builder 4 and Flex 4 SDK were released, new versions are available with Flash Builder 4.5 and Flex 4.5 SDK! The main focus for Flex 4.5 SDK and Flash Builder 4.5 is the ability to build mobile applications that target the Google Android, Blackberry Tablet OS, and Apple iOS operating systems. Additionally, Flex 4.5 SDK introduces new Spark components and improvements for large application development while Flash Builder 4.5 introduces dozens of new coding productivity features for faster ActionScript and MXML development.

Shopping Cart


Expense Tracker


Sales Dashboard

New article on InsideRIA today:
Top Ajax Technologies and RIA Frameworks
I posted a fairly comprehensive list of RIA frameworks and Ajax technologies rated on:

  • Completeness of their UI control set, based on the list of essential controls
  • Usability of the controls
  • Aesthetics, based on the default visual design

I also included some examples of applications built with the top frameworks and technologies:

RIA Screen Layouts

February 11, 2010 — Leave a comment

Last year I posted an article on 12 Standard Screen Patterns. It has been incredibly popular so I updated it for 2010. The full article is at UX Magazine. Check out the article and take a look at the 15 standard layouts and examples from more than 80 current RIAs:

Here’s my talk from Dec 11 at the Adobe Austin Users Group. This is a beginners introduction to designing for Flex, although there are some goodies for experienced designers too.

Look for the upcoming post (Thursday, Dec 10) in InsideRIA.com about 28 Rich Data Visualization Tools. I’ve included the first three to whet your appetite.

Ajax.org

Ajax.org Platform is a pure javascript application framework for creating real-time collaborative applications that run in the browser.

AjaxOrg.png

AnyChart

AnyChart is a flexible Flash based solution that allows you to create interactive and great looking flash charts.

Axiis

Axiis is a Data Visualization Framework for Flex. It has been designed to be a concise, expressive, and modular framework that let developers and designers create compelling data visualization solutions.

Also, take a look at the nice window-in-window design on the saturnboy blog.

Check out Design GalleRIA– A design gallery and showcase of the best Rich Internet Applications. I add a couple of new ones each week. Please comment with your favorite RIAs (Ajax, Flex, Silverlight, Laszlo…). My goal is 100+ by the end of 2009!

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:

  • Balsamiq Mock-ups + Nakpee
  • Any wireframes + Protoscript
  • Prototcasting (using click-throughs and screencasts to convey requirements)
  • Atlas and other development environments + visual layout editors

.

New featured article on InsideRIA, 50 Most Usable RIAs.

Excerpt

Bill and I have reviewed hundreds of rich Internet applications, RIAs, while compiling examples for our book and subsequent presentations and articles.

We recently realized that we had amassed quite a list of applications. Thinking other designers and developers might be interested in these resources, we applied two simple criteria to identify the top fifty:

Number 1: Does it adhere to the 10 basic usability principles?
Number 2: Is it really rich? Developing a product with Ajax, Flex, or Silverlight doesn’t inherently make it rich. A usable RIA will embody these six principles: Make it Direct, Keep it Lightweight, Stay on the Page, Provide Invitations, Use Transitions, React Immediately. For more detailed descriptions of each principle, see the Explore the Book section of this site.

10 of the 50

Aviary

aviary1

Balsamiq Mockups

balsamiq_mockups

CrazyEgg

crazyegg

Mint

mint_small

Picnik

picnik

SlideRocket

sliderocket_small

Spatial Key

spatialkey_layers

Tumblr

tumblr

Whitestone Cheese

whitestone

Wufoo

wufoo

Fluency and Rosenfeld Media sponsored the first DelveUI, A 2 Day Masterclass on Designing User (Web) Interfaces last week at the NYU Poly Campus in Brooklyn.

I had an opportunity to speak about my favorite topic: design patterns and principles for rich applications. The talk is titled Designing Rich Applications– and illustrates the need for richness at four levels:

  • application structure
  • screen layout
  • selecting rich UI controls
  • interactions


I’m working on a nifty little flip book that has all of the application patterns, screen patterns, rich UI controls and interaction patterns. All the patterns are on index cards and you can carry it into design sessions- and flip through it for inspiration- or to find a certain pattern. tangible-ria-patterns

ria-flip-book1

Let me know if you think this would be useful.

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 5 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: 40+ Custom Flex Controls
* Review Usability Best Practices
* Avoid Common Mistakes: 10 Anti-Patterns

Review Usability Best Practices

Don’t forget the usability basics. Jakob Nielsen’s Ten Usability Heuristics are as relevant now as they were in 1999. I stress this because I looked at the Flex showcase recently, and it looks like many of the applications are not built with these best practices in mind.

1. Visibility of system status (Feedback)

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
feedback_button
1.0 BaseCamp by 37signals
The upload button is enabled, until clicked. Then it is replaced with a progress indicator until the file has finished uploading

feedback_progress
1.1 Picnik
Progress message and indicator shows while the application loads

feedback_message
1.2 Tick
A feedback message is displayed when an action is performed

feedback_inline
1.3 Windows Live Account
Password strength is shown as the password is entered

2. Match between system and the real world (METAPHOR)

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
metaphor_library
2.0 iTunes
Organized as a library that contains your media library: music, movies, shows, audibooks. Beneath the Library is the Store where you can buy more media to put in your Library.

metaphor_mindmap
2.1 Mindomo
The branches and hierarchy of a mind map can be easily reorganized visually in a non-linear manner. An outline would never work, but this matches the paradigm exactly.

3. User control and freedom (NAVIGATION)

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Supports undo and redo and a clear way to navigate.
navigation_search
3.0 CollabFinder
Search is easy to open, enter info, execute or cancel.

navigation_selected
3.1 Wufoo
Clearly marks where the person is and where they can go by showing the selection in each menu

navigation_cell_editor
3.2 Pages (Apple’s Word Processing Product)
Cell editing shows row and column ids, and the cells used in the equation. The equation can be saved or canceled.

navigation_undo_redo
3.3 Balsamiq
Undo and Redo buttons are available in the toolbar, and can also be accessed with the standard keyboard shortcuts

4. Consistency and standards (CONSISTENCY)

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

consistency_naming
4.0 Gmail
When Gmail was designed, they based the organizational folders on the same ones used in client email applications: Inbox, Drafts, Sent Mail.

consistency_toolbars
4.1 Microsoft Office
Word, Excel, and PowerPoint all use the same style toolbar with the same primary menu options: Home, Insert, Page Layout… Consistency results in efficiency and perceived intuitiveness.

5. Error prevention (PREVENTION)

Even better than good error messages is a careful design, which prevents a problem from occurring in the first place.

prevention_disable
5.0 Yammer
Disables the update button after it is clicked, so the person cannot update the post twice by accident

prevention_buttons
5.1 Example from “Web form Design:Filling in the Blanks” by Luke W.
Make the primary action prominent with a larger click area. Cancel and secondary actions are just shown as links

prevention_auto_suggest
5.2 Google Auto Recommend
The auto recommend feature cuts down on spelling errors

prevention_focus
5.2 Wikpedia
Auto focus on input prevents a common source of frustration, typing only to realize nothing is displayed because the field did not have focus

6. Recognition rather than recall (MEMORY)

Minimize the user’s memory load. Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

memory_type_ahead
6.0 Quanta IDE
Type ahead for coding in a development environment

memory_font
6.1 Keynote
Previews the fonts you can pick from, instead of just the font name

7. Flexibility and efficiency of use (EFFICIENCY)

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

efficiency_shortcuts
7.0 OmniFocus
List of keyboard shortcuts and accelerators

efficiency_preview
7.1 Numbers- Apple’s Spreadsheet product
Previews common function results on the left when a column is selected, more efficient that clicking on an action in the toolbar

8. Aesthetic and minimalist design (DESIGN)

Dialogues should not contain information, which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Visual layout should respect the principles of contrast, repetition, alignment, and proximity.

design_c_r_a_p
8.0 Kontain
Kontain’ search menu exemplifies the four principles of visual design:
Contrast: bold text is used for the two labels in the search
Repetition: the orange, blue, and green text match the media types
Alignment : strong left alignment of text, right aligned drop down
Proximity: a light rule is used to separate tags from the other options

design_alignment
8.1 Harvest
Sufficient padding and spacing keep this timesheet from being a visual nightmare. Header and footer rows, as well as the summary column use subtly different colors to indicate they are distinct from the content

9. Help users recognize, diagnose, and recover from errors (RECOVERY)

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

error_message
9.0 Digg
Provides immediate feedback with specific instructions

error_page
9.1 Humorous ‘ Page Not Found’ Error
Uses a funny image and copy, but provides viable alternatives (article listings and blog link) and a course of action (report it)

10. Help and documentation (Help)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

help_contextual
10.0 Picnik
Contextual help (this is an example of help in the ‘Collages’ module) tips in Picnik are clear and easy to navigate

help_video
10.1 GoodBarry
Embedded videos can be used to showcase features as well as get people started using the product

help_tip
10.2 Zenoss
Help tips are displayed on hover, answering the most likely questions about a field or instructions

help_button
10.3 BaseCamp by 37signals
Help opens a new browser window/tab with a full set of help resources: search, FAQ, video tutorials, customer forums