This list of best practices was written for the Designing for Flex series. To learn more about designing rich Internet applications and rich desktop applications, check out the Flex Interface Guide on the Flex Developer Center.
Download all parts of the FIG series as PDF files that you can print and read offline: adobe_flex_interface_guide.zip (ZIP, 5.7MB)
Planning your application
Understand your market demographics, but recognize this isn’t sufficient information to guide design alone.
Understand your users’ goals as they relate to your product.
Study the tools and artifacts your users use or produce today.
Document tasks your users perform today to accomplish their goals
List the types of content your users will access in your application and obtain real samples for reference.
Write scenarios to represent the primary tasks users must perform with your application.
Structuring your application
Employ information structures when your users’ primary goals involve browsing, comparing, or comprehending different pieces of information.
Employ process structures when your users’ primary goals involve providing information in an efficient, straightforward, and structured manner.
Employ creation structures when your users’ primary goals involve creating entirely new content or making significant changes to existing content.
Eliminate unnecessary navigation in your applications.
Only use page-to-page transitions when the user is pursuing a clearly different goal. Use intra-screen changes to modify the screen as the user advances through tasks that are related to the same goal.
Illustrate intra-screen changes by supplementing wireframes and comps with storyboards.
Prototype key interactions in your application to tune and communicate the feel.
Follow a “hub-and-spoke” navigation model, not a hierarchical site map.
Design your application’s entry point to present useful tasks or information that clearly relate to your users goals with no interaction required on their part.
Immediately present relevant content to your users for an information application’s entry point.
Clearly list the tasks your application supports for a process application’s entry point.
Provide a way to start with existing work for a creation application’s entry point.
Employ sound visual hierarchy to communicate the important elements on the page and to guide the user’s eyes to the next part of their task.
Merging the web and the desktop
Design Flex applications as RIAs first, and desktop or web applications second.
Offer a web experience when your application must be accessible from any machine and fully integrated with the web environment.
Offer a desktop experience when your application must have a presence on the user’s computer and integrate more seamlessly with the host operating system.
Provide URLs that a user can bookmark and back button support for all navigable states.
Provide support for low-vision users by offering a version with high contrast colors and larger type and controls.
Design sovereign applications to consume more screen real estate and employ more focused interactions and smaller controls.
Design transient applications with simple interactions, larger controls, and clearer task flows.
Hide the complexity of the file system.
Clearly communicate functionality changes caused due to a loss of network connectivity.
Avoid spawning windows in desktop applications unless the windows map to disjoint pages.
Designing content displays
Design content displays around questions your users will ask about the content.
Design content displays first, then add controls and other application chrome afterwards.
Integrate highly related information into a single content display whenever possible. Avoid splitting information across multiple screens or states.
Make it easy for users to not just find content, but explore content.
Support content exploration by making search and filtering controls instantly responsive to user changes.
Favor direct means of manipulating content over indirect ones.
Favor modeless feedback integrated with content over modal pop-up dialog boxes.
Employ affordances to clarify which items within your content are interactive.
Display controls in the context of the content they manipulate.
Never re-implement your own controls when a suitable off-the-shelf control is available. Instead, customize the off-the-shelf control to suit your needs.
Guiding with motion
Employ motion to apply physical principles that help users understand the workings of your application.
Employ motion to subtly draw users’ attention.
Use transitions to keep the user informed about where they are, where they have been, and how they get back.
Use effects to draw the user’s attention and provide feedback.
Avoid gimmicky or gratuitous motion.
Use the motion properties of physical objects to guide your decisions on how your Flex interface elements should move.
Employ proxies during animations for visually complex objects.
Sequence the movement in state transitions into logical chunks that overlap only slightly if at all.
Use effects to emphasize an item that has unusual permanent or temporary importance that the user may not otherwise notice.
Use transient notifiers to unobtrusively present small bits of temporarily important information.
Use system-triggered notifiers sparingly.
Making your application fast
Use the impeccable memory and powerful processing abilities of computers to eliminate work for your users.
Discover your users’ real tasks to better understand what flows you must make more efficient.
Never bother your users with information or questions that have nothing to do with accomplishing their goals.
Never require users to reenter information they already provided.
Be flexible about the input formats your application accepts.
Automate tasks whenever it will save users time, but always allow them to verify and correct system mistakes.
Offer users sensible starting points by remembering the state they left your application in or by inferring an appropriate starting point from their context.
Focus performance tuning efforts on those portions of the application where the actual speed of operations is most at odds with user expectations.
Pre-compute results while the application is idle and cache results to speed up future operations.
Break down long tasks into smaller bits so that the results can be presented to the user as they become available.
Use an appropriate feedback mechanism for long operations based on the nature of the job and the expected length of time the job will take.
Provide wait feedback only as a last resort.
Making Your Application Safe
Never lose your users' data.
Always provide continuous save.
Forgive user mistakes by allowing them to back out of them later using undo or cancel.
Provide feedback appropriate to the severity of the consequences of a user action.
Avoid unnecessarily draconian security measures.
Improve usability and security by providing adequate feedback on the consequences of user actions while there is still time to change them.
Acknowledgements
Although this article series has my name on it, many people contributed to its development. I’d like to thank my reviewers, Sho Kuwamoto, Phil Costa, Steven Heintz, Narciso Jaramillo, Josh Ulm, Jeremy Clark, Deb Galdes, Tom Hobbs, and Amy Wong for providing me with extremely helpful feedback. Special thanks to Sho Kuwamoto and Phil Costa for envisioning this project and pushing me to complete it and to my managers, Josh Ulm and Jeremy Clark, for finding the time for me to give it the attention it needed. Finally, extra-special thanks to Tom Hobbs, Narciso Jaramillo, Sho Kuwamoto and Peter Flynn for guiding my thinking on many of the topics that appear in the articles.
About the author
Rob Adams works for Adobe Systems, Inc. in San Francisco, California. He started at Macromedia, Inc. in 2004 and has worked on the Flash authoring tool, Flash Player, and Fireworks, but nowadays works primarily on the Flex product line. He is involved with the design of the core framework itself as well as the designer/developer tools such as Flex Builder and Creative Suite. Although his primary focus is on design research, he also does some design work, promotes sound design practices both within Adobe and without, and makes himself a general pain in the necks of the designers, product managers, and engineers he works with.
