The purpose of this guide is to show customers the capabilities of our solution and help shoppers effectively use it.
- Interface is optimized for three main device types:
- The interface supports the change of orientation:
- All design elements are made using vector graphics, which looks well on all screen sizes and resolutions
- Site structure consists of the Home page and Products pages by categories:
- Side menu with links to available actions on the page:
The purpose of the home page is to provide customers a simple way to navigate through the product categories, show tabs for top products and search for products by text.
- Home page tabs:
- Search for products by text
Use search icon on toolbar top right. Search is done in 2 phases. First displayed filtered list of categories with number of found products. Then you can open found categories to see products. Content in tabs with top products is also filtered by search text:
On Products page Shopper can browse, filter, sort, compare products.
- Page layout depends on the device type. For Desktop and Tablet Products page has Filter on left (see Filter). For Phone in Vertical orientation at the same time displayed either Product list or Filter:
- To have more space for product list you can hide filter:
- Different View Modes for Product list:
- Page navigator is used to show product list.
You can select the number of rows per page. When ”Auto” - number of Rows will be adjusted to fit in page height.
- Viewed product blinks after return from Product page. If it has been changed then blinks twice (see).
The filter is an important part of the Products page. It helps Shoppers quicker find what they are looking for.
- Appropriate Filter Option is created for each product attribute
- Options in the user interface are grouped in a hierarchy with the ability to expand / collapse
- Switching between the Primary / Selected / All options
- Ability to clear the selected option, group or the entire filter
Filter Options (UI - user interface):
- Boolean - used for attributes with Yes / No value. UI - checkbox. Example: Display Touch Screen.
- List - used for attributes with a value from the list of possible values. UI - a set of flags. Example: Manufacturer
- Range - used for attributes with a numeric value. The Shopper can enter values for From and / or To inputs. Also there is a slider with 2 arrows for From and To values. Example: Weight
- Quantity - used for attributes with a quantity value. UI - combination of Boolean and Range. Example - quantity of USB ports. Shopper can select the checkbox - to show products that have at least one port. Or expand the Option to filter Quantity using Range UI
- List/Range - used for attributes with numerical values, which are grouped into ranges. UI - combination of List and Range. Example - Price. Shopper can select grouped range using List UI. Or switch to using the a Range UI
Product page gives the shopper the full information about the product.
- Product page tabs:
- You can navigate through product list using ”prev Product / next product” buttons on the top right corner:
Images is one of the most important product info.
- For the convenience of Shoppers there are many ways to access images:
- Shopper can scroll images directly on product tile using left and right arrows:
- Shopper can open the ”Images Gallery” directly on the Products page. To use - click on icon on left top product tile corner:
- For quick navigation on ”Images Gallery” shopper can use thumbnails gallery, which is placed either below or to the right to maximize space for large image:
- To reduce size of data to be transferred images are resized into 4 scales: icon, small, medium, large, with widths fixed to 50px, 135px, 235px & 500px respectively, height - auto
- Index of current image is saved when switching to ”Images Gallery” or the Product page
Products comparison helps Shoppers choose the best product before you buy.
- unlimited number of products in compare list
- change products order - move products left / right, delete
- visual highlight for different attribute values
- show all attributes or only different
- show primary, selected or all attributes
- attributes are displayed in a hierarchical format with the options to ”expand all” and ”collapse all”
- scrollable in vertical & horizontal directions, with fixed zones for attribute names & product titles