Inline Edit pre-1.3: Instruction text changes

Jennifer Chow jen at jenchow.ca
Wed Oct 20 20:49:19 UTC 2010


Hi all,

Any thoughts on building the demo page so that the yellow box only appears
for screen reader users and is otherwise hidden?

The page we're looking at:
http://build.fluidproject.org/infusion/demos/inlineEdit/simple/demo.html

Jen

On Wed, Oct 20, 2010 at 1:32 PM, Jennifer Chow <jen at jenchow.ca> wrote:

> Hi Jonathan, thanks for the thoughtful feedback. As we discussed over
> lunch, I agree that there is value in having the yellow box as a concise,
> conceptual summary and intro piece for users with a screen reader.
>
> Regarding the rest of the text though, this was my takeaway from our chat
> (please confirm):
>
> Merge the blurb from the portal page (
> http://fluidproject.org/releases/1.2.1/demos/) with the grey
> "instructions" box text from the demo page (
> http://build.fluidproject.org/infusion/demos/inlineEdit/simple/demo.html)
> and using the same blurb on both the portal page and the demo page's grey
> box, as it provides a nice intro on what value the component offers.
>
> Essentially this:
>
>
> "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."
>
> To replace "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. This component is
> part of the Inline Edit family of components." and * "Instructions:* This
> example shows an image with a title and caption. By clicking or activating
> the Title or Caption, you will be able to edit the text, save it, and undo /
> redo edits."
>
> Jen
>
>
> On Wed, Oct 20, 2010 at 11:55 AM, Jonathan Hung <jhung at ocad.ca> wrote:
>
>> Hi Jen,
>>
>> These are great suggestions - anything we can do to reduce cognitive load
>> is desirable.
>>
>> 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 ocad.ca <jhung.utoronto at gmail.com>
>> 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 jenchow.ca> 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 gmail.com>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
>>>> http://fluidproject.org
>>>>
>>>> _______________________________________________________
>>>> fluid-work mailing list - fluid-work at fluidproject.org
>>>> To unsubscribe, change settings or access archives,
>>>> see http://fluidproject.org/mailman/listinfo/fluid-work
>>>>
>>>
>>>
>>>
>>>
>>>
>>> _______________________________________________________
>>> fluid-work mailing list - fluid-work at fluidproject.org
>>> To unsubscribe, change settings or access archives,
>>> see http://fluidproject.org/mailman/listinfo/fluid-work
>>>
>>>
>>
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at fluidproject.org
>> To unsubscribe, change settings or access archives,
>> see http://fluidproject.org/mailman/listinfo/fluid-work
>>
>>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20101020/f2a31309/attachment.html>


More information about the fluid-work mailing list