Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Rich Text Inline Edit Design Overview

Owned by Daphne Ogle
Last updated: Mar 25, 2009 by Allison BloodworthVersion comment
1 min read

1. Problem

Problem Statement:

  • Currently users have to leave their context to modify or create formatted text that looks different than the original context (display not= edit)
  • Editing text can only be done in plain text in many places on the web
  • If users can edit in interesting ways, they are often required to know and use many different types of markup to create formatted and structured text
  • Markup differs, even if slightly, across applications (and versus HTML)
  • Need faster, better quality and more readable editability

More problem statement...

Design Goals:

  • Don't change the display of information between editing and displaying edited information (i.e. wysiwyg).
  • Don't require user to leave or change their context to edit information.
  • Make it clear that changes can be made and to what.
  • Give users edit tools that make sense for their specific context.  Don't clutter with every possible edit tool.
  • Smooth & easy keyboard interaction.

 More design goals...

Competitive Analysis: Rich Text Inline Edit Competitive Analysis

2. Users

Catalina, Christy and Ashley are the users whose needs we are primarily considering when designing the Rich Text Inline Edit.

Fluid Personas are a collection of various types of important users whose needs we need to consider throughout the design process.

3. Users' needs

Contexts of Use: In what contexts would the user need Rich Text Inline Edit? What activities do they undertake in the contexts?

Functional Requirements: What use cases does the Rich Text Inline Edit component support?

Primary & Secondary Scenarios: In context, what are the primary and secondary user needs are we meeting?

4. Solution

Wireframes: Visual representation of design iterations and final designs.

Storyboards: How, when, and where would the user use Rich Text Inline Edit?

Inline Edit Design Pattern: Design advice for allowing users to edit content in the context of their work.

5. User Testing

User Testing Protocols: Describes how the user testing of Rich Text Inline Edit will be carried out.

User Testing Results: Describes how the users interacted with the Rich Text Inline Edit prototype and what improvements can be made.

6. Preparing for Implementation

Storycards: Decomposes Rich Text Inline Edit into small implementable chunks.

Functional Specification: Development specification containing interaction details such as "interesting moments."