Inline Edit pre-1.3: Instruction text changes

Thu Oct 21 18:08:13 UTC 2010

Here are my follow-up questions:

1. Do we feel there is enough in the demo, if viewed by itself outside of
the portal context, that a user will understand what is expected?

2. Will a screen reader user have enough information to sufficiently use the
demo without the instructional text?

I'm okay with removing the instructional text since we're expected to do a
round of user testing to identify any gaps in the design.

---
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 Thu, Oct 21, 2010 at 12:28 PM, James William Yoon <jyoon at ocad.ca> wrote:

> Who would've thought instruction text could be so debatable, ;)
>
> My 2 cents:
>
> wrt to the simple inline edit demo (
> http://build.fluidproject.org/infusion/demos/inlineEdit/simple/demo.html),
> I don't think the yellow boxed instructions are necessary. Two reasons why:
>
>   1) A fairly explicit set of instructions already exists, and the
> refinements proposed by Jen don't compromise that explicitness. Adding a
> second set of slightly more explicit instructions isn't going to help much.
> If it does, the problem is in the salience of the first set, and that's what
> would need to be fixed.
>   2) I would hope that instructions aren't necessary anyway. We've worked
> at giving sufficient cues on how to use what's presently a moderately novel
> interaction. In "real life" situations, users typically don't get
> instructions on how to use a website, and we shouldn't assume that they'll
> be given any. The cues built into the component, and the context given by
> the demo should suffice. If they don't, we need to go back and fix those
> things first.
>
> Cheers,
> James
>
>
> On Wed, Oct 20, 2010 at 4:49 PM, Jennifer Chow <jen at jenchow.ca> wrote:
>
>> 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
>>>>
>>>>
>>>
>>>
>>
>>
>> _______________________________________________________
>> 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: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101021/245a0617/attachment.htm>