Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer and signup section UI polish #318

Merged
merged 1 commit into from
Aug 9, 2021
Merged

Footer and signup section UI polish #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions assets/component-newsletter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
width: 100%;
}

.newsletter-form__field-wrapper .field__input {
padding-right: 5rem;
}

.newsletter-form__message {
justify-content: center;
margin-bottom: 0;
Expand All @@ -42,12 +46,10 @@
}

.newsletter-form__button {
margin-left: 1.4rem;
width: 4.4rem;
margin: 0;
}

@media screen and (max-width: 989px) {
.newsletter-form__button {
width: 100%;
margin: 1.4rem 0 0 0;
}
.newsletter-form__button .icon {
width: 1.5rem;
}
93 changes: 24 additions & 69 deletions assets/section-footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
.footer {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.footer:not(.color-background-1) {
border-top: none;
@media screen and (min-width: 750px) {
.footer {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.footer:not(.color-background-1) {
border-top: none;
}
}

@media screen and (max-width: 749px) {
Expand All @@ -21,6 +24,11 @@
.footer-block.grid__item:first-child {
margin-top: 0;
}

.footer__content-top {
padding-left: 4rem;
padding-right: 4rem;
}
}

.footer__content-top {
Expand All @@ -30,11 +38,6 @@
}

@media screen and (min-width: 750px) {
.footer__content-top {
padding-top: 7rem;
padding-bottom: 7rem;
}

.footer__content-top .grid {
margin-left: -3rem;
row-gap: 6rem;
Expand Down Expand Up @@ -107,25 +110,12 @@
}
}

.footer-block:only-child:last-child,
.accordion:first-child + .footer-block:last-child {
.footer-block:only-child:last-child {
text-align: center;
max-width: 76rem;
margin: 0 auto;
}

.accordion:empty + .footer-block {
margin-top: 0;
}

.footer .accordion {
margin-top: 0;
}

.footer .small-hide + .accordion {
border-top: none;
}

@media screen and (min-width: 750px) {
.footer-block {
display: block;
Expand All @@ -142,7 +132,7 @@
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
margin-top: 5rem;
margin-top: 2rem;
}

.footer-block--newsletter:only-child {
Expand All @@ -153,6 +143,12 @@
flex: 1 1 100%;
}

@media screen and (max-width: 749px) {
.footer-block.footer-block--menu:only-child {
text-align: left;
}
}

@media screen and (min-width: 750px) {
.footer-block--newsletter {
flex-wrap: nowrap;
Expand Down Expand Up @@ -181,42 +177,27 @@
justify-content: center;
}

.footer__list-social .list-social__item--placeholder:not(:only-child) {
display: none;
}

.footer-block__newsletter {
text-align: center;
}

@media screen and (max-width: 749px) {
.footer-block__newsletter .newsletter-form__field-wrapper {
width: 30rem;
}
}

.footer-block__newsletter .newsletter-form__button.button {
width: fit-content;
.newsletter-form__field-wrapper {
max-width: 36rem;
}

@media screen and (min-width: 750px) {
.footer-block__newsletter:not(:only-child) {
text-align: left;
}

.footer-block__newsletter .newsletter-form__button.button {
margin-top: 0;
margin-left: 1.4rem;
}

.footer-block__newsletter:not(:only-child) .footer__newsletter {
justify-content: flex-start;
margin: 0;
}
}

.footer-block__newsletter + .footer__list-social {
margin-top: 5rem;
margin-top: 3rem;
}

@media screen and (max-width: 749px) {
Expand Down Expand Up @@ -405,12 +386,6 @@ noscript .localization-selector.link {
opacity: 0.75;
} */

@media screen and (min-width: 750px) {
footer .accordion {
display: none;
}
}

@keyframes appear-down {
0% {
opacity: 0;
Expand All @@ -422,38 +397,20 @@ noscript .localization-selector.link {
}
}

footer details[open] summary ~ * {
animation: appear-down var(--duration-default) ease;
}

.footer .accordion .list-menu__item--link {
justify-content: center;
text-align: center;
}

.footer-block__details-content {
margin-bottom: 4rem;
}

.footer-block__details-content li:first-child .link {
padding-top: 3rem;
}

@media screen and (min-width: 750px) {
.footer-block__details-content {
margin-bottom: 0;
}

.footer-block__details-content li:first-child .link {
padding-top: 0;
}

.footer-block__details-content > p,
.footer-block__details-content > li {
padding: 0;
}

.accordion:first-child + .footer-block:last-child li,
.footer-block:only-child li {
display: inline;
}
Expand Down Expand Up @@ -490,7 +447,6 @@ footer details[open] summary ~ * {
.footer-block__details-content .list-menu__item--link {
padding-top: 1rem;
padding-bottom: 1rem;
margin-top: 0.5rem;
}
}

Expand All @@ -502,7 +458,6 @@ footer details[open] summary ~ * {

.footer-block__details-content > :first-child .list-menu__item--link {
padding-top: 0;
margin-top: 0;
}
}

Expand Down
3 changes: 1 addition & 2 deletions locales/en.default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"month_year": "%B %Y"
},
"newsletter": {
"label": "Your email",
"label": "Email",
"success": "Thanks for subscribing",
"button_label": "Subscribe"
},
Expand Down Expand Up @@ -206,7 +206,6 @@
"update": "Update"
},
"footer": {
"social_placeholder": "Follow us on social media!",
"payment": "Payment methods"
},
"featured_blog": {
Expand Down
32 changes: 5 additions & 27 deletions sections/footer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-accordion.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-accordion.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
Expand All @@ -31,26 +29,7 @@
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
{%- if block.type == 'link_list' and block.settings.heading != blank -%}
<div class="accordion" {{ block.shopify_attributes }}>
<details>
<summary><h2 class="h4 accordion__title">{{ block.settings.heading | escape }}</h2>{% render 'icon-caret' %}</summary>
{%- if block.settings.menu != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</details>
</div>
{%- endif -%}

<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu small-hide{% endif %}" {{ block.shopify_attributes }}>
<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
Expand Down Expand Up @@ -128,14 +107,14 @@
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing the visible label and replacing with an arrow icon may cause issues for voice dictation users; the label "Subscribe" may not be easily discerned as a result.

🗣 "Click submit. Click go…" 🤷‍♂️

Have we considered other labels?

cc @gretchen-willenberg

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button and button text is now an arrow. My very light research had negative findings on that:

  • See Prada example, they use arrow and have negative usability “review”:  doesn’t look like a button and can be hard to click. Second, it doesn’t direct an action. Great call to action buttons have text that incites the visitor to complete the action (e.g. “Sign Up”). Here we’ve got nothing.
  • See Gucci example, another arrow: This is a usability flaw, but also a communication flaw. It’s not clear that by clicking on it you’re signing up, and since there’s no text on that button, it’s not “pushing” anyone to take action. 

Hopefully there is other, positive research.

Was the mail/envelope icon discussed instead of an arrow? There are a few examples of that and maybe that’s 10% clearer, but still less clear than a button with 1-3 words, e.g. was Subscribe but accessibility concerns that this may not stand out.

And finally to the copy to help end-user customers subscribe:
Can we add an explicit label on hover and/or aria label?
Click to subscribe to emails

  • Shopify allows Click, at least internally: Example: These emails are automatically sent out to either you or the customer. Click on the email templates below to edit.
  • Some UX writing practice objects to this b/c of accessibility and uses Select to cover more actions

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Click to subscribe to emails" via aria-label makes sense to me. @wiktoriaswiecicka

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Click to subscribe to emails"

Please don't do this. This would add redundant content and be less obvious than what's currently there. It's like adding "Image of" to image alt text.

Let's keep as "Subscribe" as this is the end result of the user action.

Side thought, it seems like visual affordances are being removed with this PR. Previously, the "Subscribe" button looked like a button, with a clear text label. The icon-only control with no explicit border make this UI more difficult to perceive. To some it may look like an "Email" heading with an icon arrow inside a box, not like a form.

Is it too late to revisit this and include the visual affordances that help make this UI more obvious for folks with cognitive impairments or the aging community?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth noting, this pattern has also been implemented on at least the search page https://screenshot.click/09-18-cgim2-v95j9.png, but it does use a more informative icon than an arrow. Is a mail/envelope icon a reasonable enough solution here @svinkle or is the lack of a visible button label a dealbreaker in general?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kmeleta There could be issues here, too. I'm curious if this pattern has gone through usability testing, or if there are plans for this? I don't want my comment to be a bottleneck for this PR, so let's leave as-is for now.

@emma-boardman Are we in a good spot to revisit testing with Fable? I believe last time we chatted about include more than screen reader users.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@emma-boardman Are we in a good spot to revisit testing with Fable? I believe last time we chatted about include more than screen reader users.

I'd be delighted to moderate if the Dawn team are interested in doing another round 👍

{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
<button type="submit" class="button button--secondary newsletter-form__button" name="commit" id="Subscribe">
{{ 'newsletter.button_label' | t }}
</button>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
Expand Down Expand Up @@ -217,7 +196,6 @@
</a>
</li>
{%- endif -%}
<li class="list-social__item--placeholder">{{ 'sections.footer.social_placeholder' | t }}</li>
</ul>
{%- endif -%}
</div>
Expand Down Expand Up @@ -512,7 +490,7 @@
{
"type": "text",
"id": "newsletter_heading",
"default": "Sign up to our emails",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
Expand Down
6 changes: 3 additions & 3 deletions sections/newsletter.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
<button type="submit" class="newsletter__button button" name="commit">
{{ 'newsletter.button_label' | t }}
</button>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
Expand Down