Re: Presentation of examples in Quick Start Tips

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.


> 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 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!


> 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.

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)

Received on Wednesday, 19 August 2015 07:57:23 UTC