Website Development & User Experience Flashcards

What is headless commerce architecture in ecommerce website development?

Answer: Decoupling the frontend presentation layer from the backend commerce engine via APIs

Headless commerce separates the frontend (React, Vue, etc.) from backend commerce logic (Shopify, BigCommerce APIs), enabling greater flexibility.

Which design pattern should be used when an ecommerce product has multiple variants (color, size) to avoid creating separate pages for each combination?

Answer: Dynamic URL parameters or hash fragments with client-side variant switching

Client-side variant switching updates product images and pricing without full page reloads, providing a smoother experience while keeping a single canonical page.

What is the purpose of an ecommerce site's robots.txt file from a UX and SEO perspective?

Answer: Prevent search engines from crawling duplicate or low-value pages like cart and checkout

Disallowing cart, checkout, and account pages in robots.txt prevents search engines from indexing pages with no SEO value and avoids crawl budget waste.

A user studies show that ecommerce shoppers frequently abandon the site when they cannot find the search bar quickly. What is the UX best practice for search placement?

Answer: Prominently position search in the header, center or right-aligned, visible on all pages

Search should be persistently visible in the header across all pages because users can enter search intent at any point in their browsing journey.

What does 'graceful degradation' mean in the context of ecommerce web development?

Answer: Building the site so core functionality works even when JavaScript or advanced features are unavailable

Graceful degradation ensures that when a browser doesn't support a feature (e.g., JavaScript disabled), the site still allows basic product browsing and purchasing.

Which ecommerce UX technique reduces perceived wait time when product search results are loading?

Answer: Skeleton screens that display placeholder content matching the result layout

Skeleton screens mimic the structure of content, reducing cognitive uncertainty and making wait times feel shorter than generic spinners.

An ecommerce site's product filter selections are lost when a user clicks the browser back button from a product detail page. What development solution fixes this?

Answer: Store filter state in the URL query string so browser history reflects filter selections

Encoding filter state in URL parameters ensures the back button restores the exact filtered view the user came from, preventing frustrating state loss.