Re: Presentation of examples in Quick Start Tips

Hi all,

On 8/19/2015 3:59 AM, Eric Eggert wrote:
> On 19 Aug 2015, at 9:57, Shadi Abou-Zahra wrote:
6)
>     Hi Kevin,
>
>     My responses inline below, to add to Shawn's. I am using this part of the thread because it is complete (in the subsequent mails you seem to have deleted parts, making it difficult to refer to in a response).
>
>     On 18.8.2015 22:55, Shawn Henry wrote:
>
>         Hi all,
>
>         Please also see my comments and suggestions in GitHub:
>         https://github.com/w3c/wai-quick-start/issues/89, and note especially:
>         "One thing I think we can do to help is to put all of the example --
>         including the heading and captions -- on a background -- like in the
>         Tutorials,
>         e.g.:http://www.w3.org/WAI/tutorials/images/informative/#images-used-to-label-other-information
>
>         I'll say I'm [high-medium] on that."
>
>     I agree with this point. Note that this does not mean /copying/ the tutorials 1:1 but reusing the conceptual design as much as possible.
>
> The white space in the tutorials make having blocks of examples much more tolerable, also they are an integral part of the content (you most likely need to take a look at them to make sense of the tutorial). Here it is more additional information.

+1 ! Examples should stand out more in the Tutorials and in the Tips.

>
> That said, they can use a little more grouping to make sure they are easy to understand.
>
>         Some points on below:
>
>           * I [strongly] do not think we should have in all caps text other than "EXAMPLE" (so not Alt 1)
>
>     I agree with not having /text/ in all-caps but like Alt 1 very much because it highlights the actual examples very clearly. Instead of "INACCESSIBLE INSTRUCTION" maybe you could try "INCORRECT: Uses color only". That is, only emphasizing the type of the caption.
>
>     Note that I am really not stuck on caps at all - my comment was to visually highlight the caption (and as subtly as possible).
>
>           * I support having as little headings and captions as feasible, avoiding duplication, and also providing sufficient explanation. Alt 2 seems way too unnecessarily wordy.
>           * For Alt 3, can't you just add a few words and cover all the bases? ** Inaccessible instruction -> Inaccessible instruction uses color only ** Accessible instruction uses color and symbol ** Inaccessible question -> Inaccessible question uses color only ** Accessible question uses numbers to refer to objects -> Accessible question uses color and numbers
>
>     Some additional points to consider:
>
>       * I don't like the overuse of "Example" in Alt 3 - seems superfluous;
>       * Avoid "Accessible" and "Inaccessible" valuation as this sounds too absolute, and we all know there is no absolute accessibility;
>
>     Here a suggestion for the headings (to be used with Alt 1):
>
>     [[
>     Example: Highlighting instructions
>
>     Incorrect: Relies on color only -- Correct: Uses both color and symbols [to highlight text]
>
>     Example: Referring to content [or "Identifying content"?]
>
>     Incorrect: Relies on color only -- Correct: Uses both color numbers to refer to objects
>     ]]
>
> I think grouping here is very important. Those are not four (independent) examples but two examples with a before-and-after-like comparison.
>
> While correct/incorrect is probably the correct(!sic) way to do it, the wording feels a little bit bureaucratic and not very welcoming. I tried using “Do” and “Don’t” instead in this mockup and it works well (at least for the color example):
>
>           * I started to say for Alt 3, just remove the "EXAMPLE" on each, but then I see that it wouldn't differentiate the caption from the example. I envision: ** All of the Example on a single background block, probably including the main Examples heading. ** A separator line under the caption. I think with good spacing & formatting & color, you could make it not look like a link.
>
>     As above, I'm not fussed with the actual styling but just that the caption stands out. Also as above, I think Alt 1 is a good start!
>
> I also agree that the caption should be more separated from the actual example (that’s why I have added the #ddd hairline in the mockup above ;-).

+1 to something like that #ddd hairline

~Shawn

>
>         Would you be up for trying a mockup of that?
>
>         RE> "• Might additionally benefit from index for the examples, so
>         ‘Example 1:…’, ‘Example 2:…’, etc. Although if there is only one
>         example, this may look a little silly"
>         um - in the case where there's only 1 examples, then you'd just use
>         "Example:" right?
>
>     Hmmm. I think most tips have one example? I don't think we need the numbering. It also kind of implies some sequence or ordering.
>
> I also don’t think we /need/ numbering.
>
> Eric.
>
>     Best,
>     Shadi
>
>         ~Shawn
>
>         On 8/18/2015 8:25 AM, Kevin White wrote:
>
>             Hi All,
>
>             Shadi raised a concern (correct me if I don’t represent all your
>             thoughts) that the captions for the examples should stand out more,
>             and should be associated more with the example itself. He also
>             proposed the idea of incorporating more information into the header to
>             better introduce the examples.
>
>             I am sending this email prior to Thursday’s meeting so that everyone
>             has an opportunity to consider it.
>
>             The images below are ideas for presenting the captions in the examples
>             in slightly different ways.
>
>             I have not mocked these up in Github yet, as it will start to get
>             messy in there if I did.
>
>             Current:
>
>             Alternative 1:
>
>             This approach incorporates some of the design ideas from the
>             tutorials. It uses the bar, same color for the caption, and changes to
>             all caps (actually small-caps but only one capital so not worth
>             quibbling).
>
>             Comments:
>             • Caption may be lost in the example
>             • Caption may be considered part of the example
>             • Heading may be too long and involved
>             • Heading may end up repeating some information that needs to be in
>             the caption
>             • Border may grab too much attention
>
>             Alternative 2:
>
>             This approach simply changes the example heading.
>
>             Comments:
>             • May not address Shadi’s original concern as caption is still simple
>             and above the example box
>             • Heading may be too long and involved
>             • Heading may end up repeating some information that needs to be in
>             the caption
>
>             Alternative 3:
>
>             Incorporates the caption into the example box with a leading
>             ‘Example:’ to help distinguish it from the actual example content.
>             Styles the label to help differentiate it from surrounding content.
>             Avoids styling the caption itself to maintain readability and avoid it
>             looking like a link. Removes border to reduce visual noise.
>
>             Comments:
>
>             • Caption stands out well from example without being separated
>             • Little in the way of attention grabbing
>             • Heading does not introduce specific example content.
>             • Says ‘Example’ quite a bit
>             • Might additionally benefit from index for the examples, so ‘Example
>             1:…’, ‘Example 2:…’, etc. Although if there is only one example, this
>             may look a little silly
>
>             Overall comments:
>
>             • It is worth noting that what works in the tutorial is unlikely to
>             work within the core WAI design template. The tutorial has different
>             constrains, a slightly different palette, different typeface, etc.
>             • These are piece meal changes that really should be done as part of a
>             broad set of design guidelines that consider all possible cases for
>             use. Even when considering just the examples, there are a variety of
>             types of examples and this approach may not work for all of them, for
>             example,
>             •
>             http://w3c.github.io/wai-quick-start/designing.html#ensure-that-interactive-elements-are-easy-to-identify
>
>             •
>             http://w3c.github.io/wai-quick-start/designing.html#create-designs-for-different-viewport-sizes
>
>             •
>             http://w3c.github.io/wai-quick-start/developing.html#associate-all-form-elements-with-labels
>
>             Thanks
>
>             Kevin
>
>     --
>     Shadi Abou-Zahra - http://www.w3.org/People/shadi/
>     Activity Lead, WAI International Program Office
>     W3C Web Accessibility Initiative (WAI)
>
> --
>
> Eric Eggert
> Web Accessibility Specialist
> Web Accessibility Initiative (WAI) at World Wide Web Consortium (W3C)
>

Received on Wednesday, 19 August 2015 13:43:52 UTC