BLOG

New Product Details Page

06/06/2017

The product details page on our website has been redesigned for easier and more intuitive use by both desktop and mobile visitors.

Key features:

  • New click and touch-friendly interface
  • New breadcrumbs which have drop downs for better cross site navigation
  • Call to action buttons at the top of the page for better visibility
  • Call to action content organized in three clear containers
  • Scroll-friendly content

 

Drop Down Breadcrumbs

As we looked at how users navigated to and from our product details page, we knew there was room for improvement. The newly designed breadcrumbs feature a click and touch-friendly drop down. This allows visitors to easily jump from product to product categories and to other product lines.

 

Specification Sheet, Get Quote and Contact Us Buttons

 

 

We have moved our most popular actions to the top of the page for better usability. The buttons are also click and touch-friendly to consider both desktop and mobile visitors. The actions are better organized under:

  • Specification Sheet – Allowing users to download and email our product information.
  • Get Quote – Allowing visitors to find a sales or distribution representative, get a quote or add the item to a quote cart.
  • Contact Us – Allowing visitors to get more information on how they can connect to AFL (i.e. phone numbers and email addresses).

 

Related Content

In our previous product details page, related content was organized in tabs. With this new design we have pulled those links out and placed them below the product description. Visitors are much more used to scrolling both from desktops and mobile devices and this makes documents, videos, white papers and other supporting content available without a click to reveal.

 

Recommended Products

Recommended products were smaller and to the right of the primary content. In the new design they are just below the related content. We have also made them bigger as to be more touch and scroll-friendly for a better mobile experience.

If you have any questions, please let us know or comment below.