Inline Edit pre-1.3: Instruction text changes

Jonathan Hung jhung at
Wed Oct 20 15:55:19 UTC 2010

Hi Jen,

These are great suggestions - anything we can do to reduce cognitive load is

About Proposed Change #2 (removing the yellow instruction text), I would
argue to leave it. This text is there to reinforce / make more explicit the
interaction expected on the page. A new user may need this text to know what
to do.

Also, for a screen reader user, the instruction text acts like a summary
giving them a conceptual map of what they are going to be interacting with
(like an audible sign post). If we remove this text, we should have to make
sure that there is still enough instruction, especially for a screen reader
user who is using this for the first time (which I would suspect to be the
majority case).

An alternate approach would be to still have instruction text, but have it
invisible - thus reducing visible clutter but still providing useful
instructions to an AT user. However, this creates isolated user experiences
for sighted and non-sighted users which may not be a desirable situation.

Thanks for reviewing the text and making suggestions. Wish we had time to do
this for everything we do. Speaking of which, this email itself could use a
good edit :)...

- Jonathan.
Jonathan Hung / jhung at <jhung.utoronto at>
IDRC - Interaction Designer / Researcher
Tel: (416) 977-6000 x3959
Fax: (416) 977-9844

On Tue, Oct 19, 2010 at 4:28 PM, Jennifer Chow <jen at> wrote:

> Hi all,
> Here's a recap of my chat with Jess about in-line edit instructions. To
> start, we identified four blocks of text shown below. Then we came up with
> some potential improvements.
> 1) Portal page blurb
> 2) Grey "Instructions box" on "view demo page"
> 3) Yellow instructions box on "view demo page"
> 4) Tool tips
> *Proposed change #1 (applies to all demo pages!):
> *
> This is a two-part change:
> A) We proposed merging item 1 and 2 into the paragraph below to reduce
> redundancy. The paragraph would then be used on the portal page and
> duplicated in the grey "instructions box" on the "view demo page."
> "Simple Text Inline Edit allows a user to do quick edits to simple text
> without having to switch modes or screens. All work is done on the same
> interface which helps the user maintain context. By clicking or activating
> the text, you will be able to edit the text, save it, and undo / redo edits.
> This component is part of the Inline Edit family of components."
> B) The grey "instructions box" would be renamed to "Description" instead as
> well on all demo pages.
> *Proposed change #2:*
> We thought item 3, yellow instructions box, could be removed because the
> user will have visual cues and tooltips to direct them. At the moment, only
> the in-line edit demo page has the yellow box, so other demo pages shouldn't
> be affected.
> *Proposed change #3:*
> Tool-tip rewording for on focus mode
> Current: Edit title. Select or press Enter
> Revised: Select or press Enter to edit
> *Proposed change #4:*
> Tool-tip rewording for editing mode
> Current: Press Escape to cancel, Enter or Tab when finished
> Revised: Escape to cancel, Enter or Tab when finished
> Thoughts and feedback are welcome!
> Jen
> On Tue, Oct 19, 2010 at 12:11 PM, Colin Clark <colinbdclark at>wrote:
>> Hi all,
>> Yesterday afternoon a bunch of us chatted about next steps for Inline Edit
>> as we near the planned Infusion 1.3 freeze date. Here's the to do list that
>> came out of our meeting:
>> Must fix for 1.3
>> -------------------
>> * Remove edit mode instructions for Rich Text Inline Edit (Justin + Mike)
>> * Tweak the instruction text to be awesomer (Jen + Jess)
>> * Design and implement awesome default styles for each Inline Edit flavour
>> (James + Mike + Justin)
>>  -  Implement icon scaling for Inline Edit pencil and Undo arrows (James +
>> Jen + Mike + Justin)
>>  - Display mode tooltip styling: larger text, lighter background (James)
>>  - Fatter pencil icon (James + Jen)
>> * Screen reader testing with JAWS, NVDA, and preferably Orca (Jonathan)
>> Nice to Have
>> ---------------
>> * Ship Undo by default with Icon + Tooltip (Justin + Mike)
>> * Streamline the toolbar icons for Rich Text Inline Edit demo (Jen + Mike
>> + Justin)
>> * Larger font size by default with TinyMCE RTIE demo, matching the font
>> size of display mode, as well as matching font faces (Jen + Mike + Justin)
>> Colin
>> ---
>> Colin Clark
>> Technical Lead, Fluid Project
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at
>> To unsubscribe, change settings or access archives,
>> see
> _______________________________________________________
> fluid-work mailing list - fluid-work at
> To unsubscribe, change settings or access archives,
> see
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list