UI Polish Review: Product Template (Part 2)

[nicklepine]

Part 2

UI review findings (WIP)

Border on media

• [x] All media need to have a border like on the product card, inside the product template and the modal. 🙏
• [x] Remove background on all media except video

Settings

• [x] Move up Enable sticky product information on large screens setting to let the media related settings together.

Modal layout

• [x] We need to revert back the max-width change that we did. Seems like having the closing icon on the corner right over the media is not scalable for all media. It could overlay on top of important controls for buyers. Screenshot
  • [x] Reference of the close position

Large breakpoint

• [x] Media width

max-width: 100%; padding: 2rem 10rem 0;

• [x] Close button position

top: 2.2rem;

Medium breakpoint (750px I believe)

• [x] Media width

max-width: 100%; padding: 2rem 11rem 0;

• [x] Close button position

top: 2.2rem;

Mobile

• [x] Keep as is, but open minded if it requires some changes if I didn't see the full picture properly

No JS

• [x] When I am tabbing, I can't get to the product images, just to the product information column. Wondering if this is expected? (Video recording)
• [x] Dynamic checkout button is not showing when JS is disabled and the space is kept. The button Add to cart could be styled as the primary button in this case instead of the outline secondary button.
• [x] Video media, could we display the video icon to announce the media type? (Video recording)
• [ ] To check if this is still happening, but it worked when I tested on the latest demo you shared with me. https://github.com/Shopify/dawn/issues/179

A11y

• [x] Dynamic checkout button focus style is not the same as the theme (Video recording)
• [ ] The page title (the browser tab title for the page; not the main content heading or h1) does not describes the topic or purpose of the page. but should be fixed by https://github.com/Shopify/dawn/pull/87

General

Product modal

• [x] Mobile/tablet: When I open the modal on mobile, if I play with the position of the image with my finger, and close the modal, opening another image opens the modal to the position I left the previous modal. I am wondering if we can align the media in the modal, top-center to have more success to be zoomed in a detail area of the image? I considered center-center, but would like to hear your thoughts.
• [ ] Media sizes inside the modal are won't always look great inside the modal, both on Mobile. MELI TO PROVIDE SIZING

Variant picker

• [ ] The button type doesn't display the sold out UI, example of a sold out combination.

🎩 My review tasks

Note for myself; Quick list of things I am looking to review:

• [x] Rich media
• [x] No JS
• [x] Product modal with various ratio

Validate the sizing of each media type with designers.

• We need to create a Product with media that meets the following requirements:
  • [x] Multiple aspect ratios (horizontal and vertical)
  • [x] High and low resolution images
  • [x] Transparent and non-transparent background
  • [x] Matching and non-matching media posters
  • [x] Very tall portrait images (Snowboard)

Suggestion from Ludo:

I wonder if maybe we could use a multiplier of the actual image width instead. The reason I say that is if I'm using a shitty image. That is going to make it very pixelated! So maybe if we grabbed the image.width | times: 2 it might be ok whatever the media you're using.

Interaction review

• [x] Try the no-JS flow

A11Y review

• [x] Test the keyboard navigation and the tab order
• [x] The page title (the browser tab title for the page; not the main content heading or h1) describes the topic or purpose of the page.
• [x] All text that looks and acts like a heading is marked as a heading.
• [x] Heading levels are chosen to convey correct hierarchical order in content, not for visual styling.
• [ ] Decorative images are identified as not requiring alternative text.
• [ ] N/A - Forms control markup is written so it can be used with Autofill.
• [x] Touch target size of main links and buttons are large enough and far enough apart from each other to activate easily with a finger.
• [x] An alternative method to activate custom swipe actions or gestures is available (ex., zoom or pan a 3D model.)

Navigation and links

• [x] Content reading and focus/tab order, as determined by the code order, is logical and intuitive (top-to-bottom, left-to-right.)
• [x] Actionable elements have a clear, visible focus state for non-mouse users.
• [x] Link text clearly describes the purpose or destination of the link. (Design annotation kit + PR, for generic links)
• [ ] N/A - Icon-only links have a text alternative. (Design annotation kit + PR)
• [ ] Links which open a new tab/window are accompanied by an aural and visual warning. (PR)

Magnification and Responsive Design

• [x] Low vision users can magnify or zoom in on the content in the browser on any device, including desktop and mobile.
• [ ] The design is optimized for all zoom states, eliminating horizontal scrolling.
• [x] The user can use the website in their preferred orientation (landscape/portrait.)

Dynamic Content

• [ ] Users are made aware of content that is dynamically inserted on a page. New content is positioned next in the DOM from the activator, in the logical reading order / tab order of the page.
• [x] All keyboard-only and touch screen interactions follow expected patterns so users know how to interact with widgets on the page.
• [ ] When users activate scripted functionality (buttons, form submissions, etc.), they know whether the action was successful or not, through a success/error message. The feedback must be available to sighted users, screen reader users, low-vision users, and all other user groups.

[fayskerritt1]

This code works fine for me by disabling the size (which is the second variant looped through) however it does not disable the colours when changing the size unless there are no sizes available at all. Is there a way to check which colours there are in the size that is selected?

To explain further using the below image as an example, when clicked on XS (which you can see is selected) how can we get the colours (the coloured variant images) to be disabled in the same way the sizes are when you click on colours.