Footer and signup section UI polish #318
Conversation
57ffaba to
cbdaa94
Compare
cbdaa94 to
2c57f90
Compare
I noticed that too, but changing that style would definitely be a global change. Presumably a change like that would be called out, if not handled in its own ticket, but it's probably worth checking with design to make sure we're using the right values here currently. @wiktoriaswiecicka |
| @@ -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 }}"> | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
Selectto cover more actions
There was a problem hiding this comment.
"Click to subscribe to emails" via aria-label makes sense to me. @wiktoriaswiecicka
There was a problem hiding this comment.
"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?
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
@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.
There was a problem hiding this comment.
@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 👍
|
I know this was merged, but I'm not sure where else to leave these notes, sorry! UI polish notes from @wiktoriaswiecicka and I:
|
* main: (23 commits) Cart content update (Shopify#370) Footer spacing and alignment adjustments (Shopify#369) Product Template UI polish updates (Shopify#219) footer ui updates (Shopify#318) Fix cart improvements empty state (Shopify#319) [Announcement] Adjust block id for displaying dynamic names (Shopify#327) Update translations: buyer (Shopify#329) Revert editor setting changes (Shopify#328) Update translations (Shopify#294) Fix collection filtering UX (Shopify#268) Added page width setting and fixed image quality (Shopify#292) Add top border on cart notification when "show separator line" setting is deactivated (Shopify#306) movebadge code into base.css (Shopify#313) Collage UI bug fixes (Shopify#308) Customer account UI polish (Shopify#177) Added custom liquid block to product page (Shopify#269) Fix disclosure icon (Shopify#310) Fix facet price filter label spacing (Shopify#300) Fix duplicate search icon when header logo is set to "Top center" (Shopify#252) Add card outline setting (Shopify#239) ...
Why are these changes introduced?
Fixes #202
Latest design screenshot
Other considerations
For testing, be sure to test multiple footer content configurations on multiple viewport sizes for side effects.
Demo links
Checklist