CEC Website Development & User Experience 5 — Questions and Answers
Question 1: What is headless commerce architecture in ecommerce website development?
- Decoupling the frontend presentation layer from the backend commerce engine via APIs (Correct answer)
- Running an ecommerce store without a content management system
- Building a store using only HTML without JavaScript frameworks
- An ecommerce configuration that hides pricing until checkout
Correct 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.
Question 2: Which design pattern should be used when an ecommerce product has multiple variants (color, size) to avoid creating separate pages for each combination?
- Dynamic URL parameters or hash fragments with client-side variant switching (Correct answer)
- Creating individual product pages for every SKU combination
- Using query strings that trigger full page reloads for each variant
- Embedding all variant content in hidden divs on the page
Correct 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.
Question 3: What is the purpose of an ecommerce site's robots.txt file from a UX and SEO perspective?
- Prevent search engines from crawling duplicate or low-value pages like cart and checkout (Correct answer)
- Block competitor bots from scraping product pricing
- Speed up site indexing by listing all important URLs
- Automatically redirect crawlers to the sitemap
Correct 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.
Question 4: 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?
- Prominently position search in the header, center or right-aligned, visible on all pages (Correct answer)
- Place search only on the homepage since users start there
- Use a floating search icon that expands on click to save space
- Embed search within the product category navigation dropdown
Correct 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.
Question 5: What does 'graceful degradation' mean in the context of ecommerce web development?
- Building the site so core functionality works even when JavaScript or advanced features are unavailable (Correct answer)
- Slowly phasing out older features as new ones are introduced
- Reducing site features during high traffic to maintain performance
- Lowering product image quality on slow connections
Correct 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.
Question 6: Which ecommerce UX technique reduces perceived wait time when product search results are loading?
- Skeleton screens that display placeholder content matching the result layout (Correct answer)
- A spinning loading indicator in the center of the page
- A progress bar showing percentage of data loaded
- Displaying a 'Loading...' text message below the search bar
Correct 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.
Question 7: 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?
- Store filter state in the URL query string so browser history reflects filter selections (Correct answer)
- Use cookies to remember filter state between sessions
- Require users to log in so filter preferences are saved to their profile
- Implement infinite scroll to eliminate the need to navigate back
Correct 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.
CEC Website Development & User Experience 5
What is headless commerce architecture in ecommerce website development?