1 of 15

The second of 3 articles addressing best practices for merchants who want to publish their catalogs on the Google Catalogs platform.

Article 1: Fixing Your Feed

Article 3: Annotations | Enriching The User Experience

With the introduction of paid inclusion on Google Shopping, Google has reformatted the Google Shopping home page. The redesign includes prominent placement for Google Catalogs, with “Featured Catalogs” on a banner at the bottom of the above-the-scroll page. Google’s re-introduction of Google Catalogs includes more and better ways for merchants to connect with consumers. The new Google Catalogs is interactive and mobile. There is a Google Catalogs application for iOS and Android tablets. Google Catalogs can contain videos, image galleries and web links in addition links from the merchant’s Google Shopping feed.

A lot of publishers are making the mistake of simply publishing their print catalog on Google Catalogs rather than taking advantage of the unique opportunities that the platform offers.

Maximizing the merchant’s return on Google Catalogs means using strategy, planning and preparation to bring a rich user experience that is going to lead to higher conversion. In this series of three articles I will discuss tips on how to do that.

In this second of three articles I will go over how the consumer experiences catalogs on the Google Catalogs platform and what choices that experience should drive when considering catalog design. On the next slide is an overview of the topics that will be discussed in this design article.

Making �Google Catalogs Work �For �Your �Business

DESIGN | FORM FITS FUNCTION

by

Adreana Langston

2 of 15

Design: Form fits function

Pixel dimensions
What is a spread?
Lay it all out

Layout for digital vs layout for print
Signifying where things are on the page

Creating annotation frames

Annotation size vis-à-vis medium
Section Headers
Article Series Resources

OVERVIEW

Making Google Catalogs work for your Business

Design | Form FITS Function

2

3 of 15

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.

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). In the digital world the only factors that matter are the user experience and the size of the screen.

The IPad 2 screenshot on the next slide illustrates why it might not be such 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. According to Google, most tablet users look at Google Catalogs in landscape orientation. A catalog spread that will fill the available screen space at 100% magnification should have an aspect ratio of 32/21 in landscape. More concretely, this means that should the publisher create a spread that is at least 4096 pixels long by 3072 pixels high that spread would fill the Google Catalog screen.

Making Google Catalogs work for your Business

Design | Form Fits Function

3

PIXEL DIMENSIONS

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.

4 of 15

Design

This IPad 2 screenshot illustrates why it might not be such 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.

.

4

5 of 15

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 not 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 all 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.

The dimensions of a publishers’ printed catalog may be influenced by many factors. In the digital world the only factors that matter are the user experience and the size of the screen. Publishers can not upload the same PDF file to Google Catalogs that they send to the printing press.

WHAT IS A SPREAD

5

Making Google Catalogs work for your Business

Design | Form Fits Function

6 of 15

As wonderful as tablets are they are simply not 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. So 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 following two slides 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.

LAY IT ALL OUT

LAYOUT FOR DIGITAL

VS.

LAYOUT FOR PRINT

Making Google Catalogs work for your Business

Design | Form FITS Function

6

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.

7 of 15

LAY IT ALL OUT

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.

7

8 of 15

LAT I T ALL OUT

All the product description, pricing and product iteration information is in the annotation, allowing the catalog page to have a clean, visually alluring design.

8

9 of 15

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 does decide 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.

LAY IT ALL OUT

SIGNIFYING WHERE THINGS ARE ON THE pAGE

Making Google Catalogs work for your Business

Design | Form FITS Function

9

10 of 15

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 below, 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.

LAY IT ALL OUT

Making Google Catalogs work for your Business

Design | Form FITS Function

10

11 of 15

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% on the desktop. Just follow these steps.

Log in to 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.
Do not 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.

LAY IT ALL OUT

CREATING ANNOTATION FRAMES

Making Google Catalogs work for your Business

Design | Form FITs Function

11

12 of 15

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 would not advise it. Annotations are different sizes on different mediums. Below is a screenshot of the page 22/23 spread from the 4 Wheel Parts 2012 Holiday Gift Guide catalog.

ANNOTATION SIZE

Making Google Catalogs work for your Business

DESIGN | Form FITS Function

12

13 of 15

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%. 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.

images.

ANNOTATION SIZE

Making Google Catalogs work for your Business

DESIGN | Form FITS Function

13

14 of 15

The 4 Wheel Parts 2012 Holiday Gift Guide suspension package page includes suspension packages for nine different kinds of vehicles. But 4 Wheel Parts carries suspension packages for more than just nine types of vehicles. In the print catalog, if the consumer did not see his vehicle listed he would be encouraged to telephone the sales department and inquire about suspension kits for his particular vehicle. 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. That is why on the opening spread of the 4 Wheel Parts catalog the consumer is advised that at the beginning of each section of the catalog he will find a section header with links leading to the page on the website where he can find parts that fit his particular vehicle.

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. I personally think section headers are appropriate in print catalogs as well, replacing the web snippet annotations with QR codes.

There are many small businesses that 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.

SECTION HEADERS

Making Google Catalogs work for your Business

Design | Form FITs Function

14

15 of 15

Though there is photographic evidence to the contrary, Adreana Langston is not a cyborg. She is a human female who resides in Southern California and makes her living creating content, taking photographs, managing websites and working for Transamerican Auto Parts in the E-commerce Department as a member of the SEO Team.

ARTICLE SERIES RESOURCES

ABOUT THE AUTHOR

15