Would this be considered black-hat cloaking?

Question

In my newly developed ecommerce site, where I sell tires, I have a tire-finder page. This is essentially the page where you find your product and go to the specific product page. I wanted it all to be real nice and modern with javascript form and ajax calls, but I also wanted it to be SEO friendly. So if you enter the page with JS turned of (or as a Googlebot) you will see this:

This lists all tiretypes (summertires, wintertires, allyear tires etc.) on the left side and all products according to the selected type on the right side linking to the specific product page.

And a normal user with JS turned on, would initally see the same, but it would quickly be replaced by this, when the DOM is ready:

After the form is loaded, the products are loaded with ajax and are updated each time you change something in the forms.

I showed it to my friend, who claims it was "bad" cloaking. He claims this was considered violating Googles guidelines for cloaking, because i showed different content to the user and google. In my opinion, it's the same content displayed in two different ways, but I really can't afford to take the chance on a hunch, and i'm very new to SEO, so basicly I really don't know.

So i went online when I stumbled upon this article claiming there is both white cloaking (good) and black cloaking (bad). Unfortunately I still don't feel very convinced on whether it's good or bad, so...

So my main question is:

• Is this technique considered bad cloaking or good cloaking?

Additional questions:

• I have considered displaying my top 20 overall products instead of displaying all tires filtered by tiretype in the "Google"-view. Is this a better option for optimizing my popular products?
• I have also considered just having all products in a long list, opinions about this?

Answer 1

This is fine. You're showing the same content, one is just a better user experience then the other. This is a perfect example of progressive enhancement.

Cloaking is when you only show content to search engines specifically for the purpose of manipulating the search engine rankings. So if you start showing content to Google only, especially if you're filtering content based on user--agent or IP address, then you're cloaking and it's black hat SEO.

Answer 2

As John Conde said this is not cloaking. If loading content after the DOM were considered cloaking then we couldn't use much of javascript or ajax scripts. What you should do, is trying to show always the same "content" to the js and the non-js users.