Adobe - Developer Center - Designing for Flex ÔÇô Appendix A- Best practices.pdf

  • Upload
    csarpm

  • View
    214

  • Download
    0

Embed Size (px)

Citation preview

  • 7/29/2019 Adobe - Developer Center - Designing for Flex Appendix A- Best practices.pdf

    1/4

    Adobe - Developer Center : Designing for Flex Appendix A: Best ... http://www.adobe.com/devnet/flex/articles/fig_appendixa

    of 4 3/3/08 10:54

    Designing for Flex Appendix A: Best practices

    This list of best practices was written for the Designing for Flex (www.adobe.com/devnet/flex/articles/fig_pt1.html)

    series. To learn more about designing rich Internet applications and rich desktop applications, check out the Flex

    Interface Guide (www.adobe.com/devnet/flex/?navID=fig) on the Flex Developer Center.

    Planning your application

    Understand your market demographics, but recognize this isnt 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 applications 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 applications entry point.

    Clearly list the tasks your application supports for a process applications 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 users

    eyes to the next part of their task.

    Flex Article

  • 7/29/2019 Adobe - Developer Center - Designing for Flex Appendix A- Best practices.pdf

    2/4

    Adobe - Developer Center : Designing for Flex Appendix A: Best ... http://www.adobe.com/devnet/flex/articles/fig_appendixa

    of 4 3/3/08 10:54

    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 users 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

  • 7/29/2019 Adobe - Developer Center - Designing for Flex Appendix A- Best practices.pdf

    3/4

    Adobe - Developer Center : Designing for Flex Appendix A: Best ... http://www.adobe.com/devnet/flex/articles/fig_appendixa

    of 4 3/3/08 10:54

    back.

    Use effects to draw the users 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 ismost 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.

  • 7/29/2019 Adobe - Developer Center - Designing for Flex Appendix A- Best practices.pdf

    4/4

    Adobe - Developer Center : Designing for Flex Appendix A: Best ... http://www.adobe.com/devnet/flex/articles/fig_appendixa

    of 4 3/3/08 10:54

    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. Id 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.

    Copyright 2008 Adobe Systems Incorporated. All rights reserved.