Re: [request for feedback] markup with request for changes on the image representing a correct example

Hi Jennie and Lisa,

I completely agree with Lisa's comments above. My markup was based on the
assumption that the current graphic is the direction that had already been
chosen by the group before I joined, so I limited it to fixes that the
designer could do in the timeframe you mentioned (this weekend).

That said, there are more underlying issues with the graphic than just the
things that I marked up, such as "what is it that I'm supposed to do or get
from this page?" Even if all of the things I marked up are fixed, I feel
that it will be more of a "not wrong" example rather than a "good" example
of the guidance.

Two questions before continuing:

   1. What is the actual deadline for completing this graphic?
      - If the deadline is too soon, is it possible to use a modified
      version of this as a temporary set of examples and then replace
it when we
      have something that more clearly illustrates the specific guidelines?
   2. Out of respect to the designer, who I'm assuming has put in a lot of
   effort and for whom I know we are all grateful, what would you recommend as
   a path forward?
      - If we don't feel comfortable going back to the designer, then I can
      also take on the responsibility of creating our baseline
example. This may
      make it easier for individuals on the task force to give honest feedback
      without worrying about asking too much of a generous volunteer.

Thank you. I apologize if my comments feel too strong and I'm making anyone
uncomfortable with this feedback.

Rain

On Sun, Feb 14, 2021 at 12:14 AM Lisa Seeman <lisa1seeman@gmail.com> wrote:

> Hi Jennie
> Thanks so much for this. The site looks beautiful which is important. But
> for an example of how to follow the guidance it needs a lot of work.
>
>  I wonder if it would be better to start this over with our guidance as a
> starting point for a design. That way the guidance is emphasised.
> Maybe we should start with a page that clearly emphasises how to start a
> task? It could be realy clear  I start a task. what do I need for the task.
> The risks known.
> we could have an exemplary design, were  it is super clear what things are
> and how to use them. I can find the main feature easily, and the site
> hierarchy is clear. Text is simple clear and easy to understand, user
> mistakes are minimized, no distractions etc.
>
>
>
> If we continue to repair this page, here are some initial comments.
>
> The first objective is the most needed. Do I know what everything is, and
> how to use it? This includes:
> Can I tell what is clickable and what isn't? For example, is the bold text
> is not clickable. The design of the menu on the other hand does not show it
> is clickable
> Can I tell easily how to just by someone flowers (not for valentines day?)
> Where does the "shop now" button go? The shop main page or the
> valentien specials?
> The shopping cart should probably also have text, so people know what it
> is.
> The icon should be before the word search in an English site.
> WCAG needs to be followed, such as contrast.
> The newsletter email field needs a label for email address. Not something
> that disappears . How do submit the email? Is there a send button?
>
> Objective two is: Can I easily find the most important things. In this
> case it is the normal shop to buy flowers. I had to look for it, but i
> think may people will not find it. The advert for valentine's day is not
> the key feature for most people.
> Objective 3 is clear  content. This page has puns on it. I am not blanket
> objecting to that, but personally  I  do not want them  on an example page
> of good practice.
> for the objective on Help, it would be lovely if a clickable phone number
> was available with the icon. that is much more useful then the address.
> Having a personalization tool bar would be great!
>
> All the best
>
> Lisa
>
> On Thu, Feb 11, 2021 at 8:03 PM Rain Michaels <rainb@google.com> wrote:
>
>> Hello,
>>
>> I've attached an image that marks up a few recommended requests for edits
>> to the image representing a "correct" example that can be used to
>> illustrate the guidelines.
>>
>> Per our action item in our meeting today, please provide feedback by the
>> end of day tomorrow (Feb. 12) so that the designer has time to work on
>> revisions.
>>
>> *My notes in text-only format:*
>>
>>    1. Main Nav Links:
>>    The pattern under the links themselves may make it difficult for some
>>    individuals with visual processing, reading, and sensory challenges to
>>    easily read these link names.
>>    The links themselves would benefit from increased prominence, size,
>>    and clarity as the important links, and as five distinct elements.
>>    2. Search Field:
>>    The presentation of the search label and icon next to the field
>>    itself feels visually overwhelming, making it difficult to see the field as
>>    being connected to the search label.
>>    For cognitive, it may not be clear how to submit the search (the user
>>    would have to know to press “return/enter” and may not).
>>    3. Search Field + Cart:
>>    For cognitive understanding, it may be difficult to understand that
>>    the cart is completely separate from the search field
>>    4. Magnolia Flower Shop:
>>    It is unclear if this is meant to represent a link, or just be
>>    emphasized text, since it has a different color.
>>    If it is a link, it needs more affordances, such as an underline.
>>    If it is not a link, consider avoiding using the same color that is
>>    used for the main nav links as the color for emphasis.
>>    Consider visually clarifying what this represents.
>>    5. Typography:
>>    Increase line height to support readers with visual processing
>>    challenges or reading disabilities
>>    Consider a font that has more letter spacing, and maybe also consider
>>    a font that uses “*a*” (without the hat) instead of “*a*” (with the
>>    hat) for the A, such as Poppins
>>    6. Colors:
>>    The white text on the blue button has a contrast ratio of 2.93:1,
>>    which doesn’t meet the desired 4.5:1 or bare minimum of 3:1 for 18pt text,
>>    and so this should be darkened.
>>    7. Colors:
>>    The white text on pink background is a ratio of 3.37:1, not the
>>    recommended minimum of 4.5:1
>>    8. Subscribe form:
>>    Many users with reading disabilities report difficulty with italic
>>    typography.
>>    For cognitive support, consider making the “subscribe” instruction
>>    and the field a more visually connected element that is distinguishable as
>>    a separate unit of content from the Social element.
>>    Also for cognitive support, it is not clear to the user how they
>>    submit their email address once it is entered. Consider adding a button.
>>
>>