Google Catalogs Design Tips: How to Best Showcase Your Products

Tablet consumers have a high level of disposable income. If your company does a lot of its sales through catalogs, then getting your products in front of this consumer via Google Catalogs is smart business.

But tablet consumers engage with the Google Catalogs application in a different way than a print catalog. Your business needs to be aware of these differences in order to present its product catalog effectively in the digital world.

This article will go over some of these differences and offer tips on how to best present your products on Google Catalogs. Additionally, we’ll look at how the consumer experiences catalogs on the Google Catalogs platform and what choices that experience should drive when considering catalog design.

Design: Form Fits Function

Google developed Google Catalogs as a tablet application before making it available as a website. Publishers who don’t take full advantage of the tablet platform when presenting a catalog on Google Catalogs are missing out on valuable marketing opportunities.

Dimensions

The dimensions of a publishers’ printed catalog may be influenced by factors such as postal rates, the cost of storing boxes of catalogs at the fulfillment center, printing costs or even the impression the business wishes to make (a luxury products catalog publisher might decide on a catalog that is the size of a coffee table book). But in the digital world the only factors that matter are the user experience and the size of the screen.

The iPad 2 screenshot above illustrates why it isn't a good idea for a publisher to simply upload the company’s print catalog to Google Catalogs. Look at the wasted screen real estate on the left and right sides.

Most tablet users look at Google Catalogs in landscape Orientation, according to Google. A catalog spread that will fill the available screen space at 100 percent magnification should have an aspect ratio of 32/21 in landscape. More concretely, this means that the publisher should create a spread that is at least 4096 pixels long by 3072 pixels high to fill the screen.

What Google Catalogs Means When They Say “Spread it”

A “printer’s spread” refers to what pages of a book will be printed on the same sheet of paper in order for the page numbering to be correct when the paper is cut and bound. So page 1 may be followed by page 8 face up on the same sheet of paper.

The Google Catalogs dashboard gives publishers the option of uploading a PDF file with pages that are individual pages or with pages that are “spreads”. But Google Catalogs is talking about reader’s spreads where page 1 is followed by page 2 and so on.

Publishers can’t upload the same PDF file to Google Catalogs that they send to the printing press. Google Catalogs has guidelines regarding the catalog PDF file.

The print catalog file will have to be compressed because the Google Catalog file size limit is 512MB.The print catalog file will have to be re-saved with selectable text.The print catalog file, which is ordered in printer spreads, will have to be re-ordered in reader spreads.The pages of the print catalog will have to be cropped to remove printer marks.Blank pages will have to be removed from the print catalog file.If the printed catalog has page numbers in it and the publisher simply removes blank pages, the page numbering will be off. So either the page numbers have to be removed (the Google Catalogs application has its own page counter), or the blank pages not only have to be removed they also have to be replaced with pages that have content.Lay it All OutDigital vs. Print Layout

As wonderful as tablets are they simply aren't as easy on the eyes, age 40+ eyes especially, as text printed with ink on paper. Tablets do offer the ability for the consumer to zoom in on text he or she would like to enlarge, thus decreasing the need for the consumer to put the tablet down and look around for a pair of glasses. But zooming in and out can detract from the user experience.

While stuffing each available inch of the catalog page with product images and small text is a time honored tradition in the print world, in the digital world it may not work as well.

Publishers should consider producing a separate catalog with a look and feel better suited to the user experience on Google Catalogs. One in which the interactivity allows the design to be a lot less cluttered.

In the page above the publisher does not need multiple images showing iterations of the same product. The publisher does not even need text on the page showing a description and price for each product. All that information is in the annotation, allowing the catalog page to have a clean, visually alluring design.

Signifying Where Things are on the Page

Depending on the page magnification the publisher uses while annotating the catalog in the dashboard, the annotations may appear larger or smaller or in a slightly different place in the tablet and desktop view than how they appeared to the publisher in the dashboard view.

In the Google Catalogs dashboard the publisher has the ability to put an unpublished catalog in Preview. The publisher can then grant access to the catalog preview to anyone who has a Google account.

Publishers should use the preview function to view the unpublished catalog on an iOS and an Android tablet as well as on the desktop before submitting the catalog to be published. Publishers want to make sure annotations end up where the publisher intended rather than blocking text or images.

If a publisher decides to create a catalog with design elements that fit the tablet experience, the publisher should consider pre-annotating the page with frames to signify where the Google Catalog annotations will be.

In the tablet version of Google Catalogs the annotations load automatically. In the desktop version the annotations do not appear until the consumer hovers the mouse over the catalog. Annotation frames signify to the user what products are being highlighted on the page as well as showing that there is additional information on the page.

In the example screenshot above chevrons indicate product annotations. Rounded rectangles with white borders indicate a video annotation, which is accompanied by a screenshot of the video placed above the annotation frame. Rounded rectangles with black borders indicate a web snippet or image gallery annotation.

Creating Annotation Frames

Annotation frames also help in catalog design. Publishers can create annotation frames that are the same size as the actual annotations would be while viewing a spread at 100 percent on the desktop. Just follow these steps.

Log into the Google Catalog dashboard.Create a new catalog.Upload a PDF file of just one spread. Make sure that the spread is the exact same dimensions you intend to make the spreads in your real catalog.Start editing your new catalog.Put any product annotation on the spread.Put any web snippet on the spread.In the URL address field of your browser, select and copy the string of 25 characters following “map/?ikey=”Close the edit screen.In settings go to Preview accounts.Save the Account Settings.Don't log out of Google Catalogs.In Chrome go to http://www.google.com/catalogs/i?id=XXXXXXX_XXXXXXXX_XXXXXXXX where the X string is the 25 characters that you copied from the URL in Step 7.The one page catalog you just uploaded should appear.When you hover your mouse over the catalog page, the annotations should appear.With the annotations showing, take a screenshot of your browser window and save the image.Open the screenshot in any image manipulation program and crop it so that only the catalog page shows without any other elements of the screen. Save the cropped image.Launch the graphic design program that you will use to create your digital catalog.Open a new file in the program. Make the new file is the same dimensions you plan to use for your catalog.Put the screenshot image on the bottom layer and resize it until it takes up the entire layer.Create a new layer.Create a shape that is the same size as the web snippet annotation on the bottom layer.Style this shape and save it as a separate file.Create another new layer.Create a shape that is the same size as the product annotation on the bottom layer.Style this shape and save it as a separate file.When you get ready to edit your real catalog, you can import the shape files. As long they are not resized they will take up the same amount of screen space as the Google Catalog annotations.

With annotation frames that are the same size as the actual annotations, publishers can design catalogs using annotation frames as place holders for where the real annotations will go. That way publishers can make sure that the annotations don’t crowd images and text. For the employee tasked with actually uploading and annotating the catalog, the annotation frames clearly designate where the annotations should be placed.

Annotation Size is Medium Dependent

Publishers can also take a screenshot of a catalog on a tablet and use that image as a guide to creating annotation frames but I wouldn't advise it. Annotations are different sizes on different mediums. Below is a screenshot of a desktop spread:

Here is a screenshot taken from an IPad of the same spread:

Notice that the annotations are larger on the desktop even though both spreads were viewed at 100 percent. Since the desktop annotations are larger, it is smarter for publishers to create their annotation frames using the desktop screenshots as guides.

If annotation frames are created using the tablet screenshot as a guide when the consumer views the catalog on a desktop the larger annotations may end up blocking text and images.

Section Headers

There are some types of industries where catalogs are meant to list every single item available from a particular merchant (office supply catalogs come to mind). But most merchants use catalogs to market new items or items appropriate for the season (holiday gift guides, back to school, summer swimwear).

Section headers are a way to guide consumers to look for an item the consumer does not see in the catalog by visiting the correct landing page of the publisher’s website. Most print catalogs do not have section headers that lead the consumer back to various pages of the merchant’s website but publishers would be wise to add these pages to the digital version of their catalog. Section headers are appropriate in print catalogs as well, replacing the web snippet annotations with QR codes.

In the digital catalog, asking the consumer to put down the tablet to pick up the phone is taking a risk of losing consumer interest.

Summary

Many small businesses may not have the resources to order a complete redesign for the digital version of their catalog. Small publishers should not be discouraged. Adoption of even a few design changes when transitioning a print catalog to a digital catalog will make a substantial difference in consumer’s experience and, thus, engagement.