You've built an action and it's looking pretty great. Congrats! Now you need to make sure that your visitors have the same positive experience. The tips below are a few considerations that can save the day when you QA your own work.
Use the Browser Tabs and Window
- Use two tabs at the same time: one with your experience running and one not.
- Switch back and forth to help spot any unwanted changes.
- Resize the browser window.
- This can help spot issues with positioning, especially with badges. Typically this is most relevant for responsive/adaptive designs.
Use Other Browsers and Devices
- Spend time checking your site and changes with several browsers.
- This tests compatibility and can also give you a greater chance of catching a bug.
- If you are short on time, you should at least check Firefox, the earliest version of IE that you support, Chrome, and Safari.
- If you have access to mobile devices, view your action on them.
- Emulators can be helpful, but they aren't always the most accurate way to display how your site will behave, especially when switching between orientations.
Page-Specific Tips
| Page Type |
Tips |
|---|
| Home page/general |
- Sign in/out to check any potential layout changes
- Check how drop-downs interact with your action. For example, ensure your action displays behind them.
|
| Index/search |
- Change sorts, filters, and layout (list views vs. grid views)
- Trigger a lazy load
- Navigate through subsequent pages
|
| Product detail page |
- Select different options available for the product
- Add the product to the cart
|
| Cart/checkout |
- Update the number of an item in the cart
- Remove items from the cart
- Apply and remove a promo code
- Verify that you can enter the checkout flow
- Check any alternate checkout flows (guest vs. logged-in visitors)
|
Additional Considerations
| Issue |
Tips |
|---|
| Page structural changes |
- Change the sorts and filters on index/search
- Navigate through pages on index/search
- Log in/out of the site to see what changes
- Update the cart in any way
- Add a product to the cart
- Open/close the menu on a mobile device
|
| Overlapping elements |
- Check drop-down menus
- Check the mini-cart
- Check any other pop-ups
- Inspect quick view modals
|
| Linkability |
- Check click zones vs. links within an entire banner
- If something covers the link/click zone, you've inserted, make sure that that nothing takes over the functionality of the inserted element. For example, you inserted a banner with a click zone below the nav. The nav has drop-down menus and your click zone displays on top of the drop-down menu when triggered. Tweak the z-indexes of one or both of the elements to fix this.
- Check both orientations of your site on a mobile device
|
| General notes & tips |
- Check to see if resizing the window breaks anything
- Check page typing
|
