Visual Testing Checklist
Ensure a consistent visual experience for your site visitors.
Consistent Visual User Experience
Stylistic concerns are the foremost priority of mobile site User Acceptance Testing. Therefore, pay close attention to the mock visuals of your mobile site (if they are available to you). The success of your mobile e-commerce site depends on it!
The goal of your mobile site is to facilitate the mobile shopping experience for your customer. Your visitor wants to shop on a site that:
- looks neat
- is easy to navigate
- responds quickly and appropriately to user interaction (This includes screen orientation or zooming.)
- responds appropriately to input
The quality of the visual experience inspires confidence in a customer that the site is a safe place to make a purchase.
Pay special attention to screen orientation changes and to screen transitions. Ensure that page elements adjust gracefully on varying screen widths on different devices.
All portions of the page should adjust to fit the changed screen width regardless of how many times the change is made or how quickly. This includes modals and images.
Modals, notifications and alerts are particularly vulnerable to orientation changes. Be aware of this as you test on Android devices with version 4.2 and lower.
Best Practice: Images Center your images. This way, you avoid images that cannot stretch to fit the new screen width due to loss-of-quality. This is a particular concern on phablets and retina display devices.
The consistent style of all of the visual elements of your site creates a professional and trustworthy appearance. By contrast, loss of font and style between different parts of your site causes the site to look inelegant and disorganized.
Establish a uniform style across your entire mobile site for errors and error messages.
Error elements that are prone to design issues include:
- input fields
Best Practice: Fonts As a best practice, use simple and standard fonts. Fonts need to be carried between devices correctly.
Consider the quality of your images for high-resolution or retina devices. A graphic cannot look pixelated.
As mentioned before, center your images instead of stretching them on screen rotation.
Ensure that common icons such as
magnifying glass, and
info display correctly in all browsers across all of your supported operating systems and devices.
Icon fonts are sometimes referenced differently on different devices.
Common Pitfalls to Avoid
The goal of your mobile e-commerce site is to inspire confidence in the user for a successful mobile checkout. However, here are a few things that are sure to make your site visitor abandon her shopping cart and toss away her device in frustration!
Pitfall: Overlapping Elements Do not let any page elements overlap or clip each other.
When one page element overlaps another, the site becomes illegible. More than that, your site can actually lose its intended functionality. For example, if your "More Information" button overlaps the "Add to Cart" button on a product display page, your site visitor cannot get his item into the cart. Forget about successful checkout!
Pitfall: Page Width Do not have any page whose width exceeds the width of the device screen.
A page that is wider than the screen enables horizontal scrolling. Pop-up modals with image zoom are exceptions to this rule. Check these effects on low resolution screens.Edit in GitHub