Inline Edit pre-1.3: Instruction text changes

Thu Oct 21 19:57:10 UTC 2010

I hope user testing will also reveal whether our design does not give enough context for users -- without the box testing should reveal this I'd think?

J

On Oct 21, 2010, at 2:08 PM, Jonathan Hung wrote:

> 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
> 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
> 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
> 
> 
> 
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work