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

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