It’s inevitable that every major business with an online presence will eventually need to address the reality of multiple platforms.  In the auto industry we’ve mostly seen baby steps, as some OEMs haven’t progressed past a single, Flash-dependent desktop website.  Buick and Cadillac are among the few automotive players who have created numerous means for consumers to interact with their brands.

The iPad sites for both Buick and Cadillac are more expansive versions of their mobile brethren: the layouts take advantage of the additional screen real estate while the actual content is nearly identical.  Both are dramatically stripped down from the desktop site.

Meanwhile, cars.com and kbb offer iPhone applications in addition their mobile sites.  The mobile sites have a greater reach and don’t require an additional download, while the applications tend to run faster and have compact and visually more appealing navigation.

Some non-automotive brands have made an impressive commitment to be accessible via almost any possible means.  Let’s start with Amazon, which gives iPhone consumers the choice between mobile site and mobile application.  The mobile site works as expected, while the iPhone application takes advantage of the device’s native capabilities with the “Amazon Remembers” feature, which allows the user to take a photo of something they want.  The picture is then uploaded to the consumer’s account and Amazon will try to find the object among their inventory.  My simple test failed miserably, but it’s certainly intriguing.

Amazon’s iPad application features a clean, uncluttered layout that inherently encourages users to swipe through the recommendation list.  This design principle carries through to the product description page, whose interface looks like a stack of cards rather than a long virtual page or a tabbed layout.  This real-world metaphor can draw visitors into an interaction that’s not possible via keyboard/mouse.

ESPN has long had some of the best content available on the iPhone, with a fully-functional mobile site that also delivers video, and its Scorecenter application.  With the iPad, Scorecenter has now grown into a more robust application that deftly incorporates news, analysis, and video.

My favorite part of the ESPN iPad experience starts at the very first click, which allows me to choose my path:

• The familiar desktop site, with the video delivered via HTML5 instead of Flash
• The less robust mobile site
• Scorecenter XL

As a final example, Nike demonstrates that consumer product companies can also deliver across multiple platforms: in this case, I’ve grabbed the running landing pages for desktop, iPad, and iPhone.  The initial experience for each platform is completely different – different layout, interaction, imagery, etc.  They look and feel like completely different sites!

Diving deeper in, there’s overlapping content in the form of product descriptions and images, news, and links to other Nike content.

It’s not a prerequisite to create a whole new presence for each new type of device – in fact, in most cases it probably doesn’t make economic sense.  In many cases, the primary site will function just fine on a tablet device and there’s no need for yet another version (which needs to be supported and updated).  As a consumer, however, it can certainly be fun.

The iPad mainstreamed yet another platform for website developers to consider.  Most OEMs have already committed to mobile, with Audi, Chrysler, Dodge, Jaguar, MINI, smart, and Volvo as the only holdouts.  In order to see how OEMs are treating the tablet category, I spent some time visiting over 30 OEM websites on my shiny new iPad.

OEMs with mobile sites have a choice in where they send iPad users.  Roughly half redirect to the mobile version (which is stripped down, but guaranteed to be functional) while the other half put iPad users through to the desktop site.  While OEM sites have been reducing their reliance on Flash, some sections won’t function on Apple devices.  As a site visitor, it can be frustrating to not know which content will and won’t work.  For instance, the acura.com interactive showroom won’t load on the iPad, but site visitors don’t know that until they try it.

Ideally the Flash content would not be accessible on non-Flash platforms, i.e. hide the links or deliver video via HTML5.  Another option is to redirect visitors to the mobile site and provide a link (e.g. “View full site”) to the desktop site.

Several OEMs have made the leap to tablet sites.  Porsche’s iPad site is essentially a set of glossy brochures that can physically held.

In the case of Cadillac, I prefer the iPad site to the desktop site:  the less robust functionality reduces clutter and makes it easier to navigate.  The iPad site also eliminates the completely unnecessary and distracting loading animation.

Cadillac vehicle information is displayed on one long page, which works for me since scrolling is less aggravating on a tablet.  The experience is a bit like a brochure, but the poor choice of grey text against a black background makes it a barely readable one.

One of the truly potentially transformative aspects of the iPad is its multi-touch screen, which lets users interact directly with content.  These early automotive iPad entries don’t take advantage of these advanced capabilities: for instance, I wish I could manually manipulate Cadillac’s 360 vehicle spin.  But we’ll get there soon enough and I can’t wait to interact with a vehicle online.

Traditionally, driving to dealer lots has been the preferred shopping method among used-vehicle buyers.  The recently released 2010 J.D. Power and Associates Used Vehicle Market Report shows that more used vehicle shoppers are using the Internet/online classifieds.  In fact, for the first time in 5 years, the Internet has surpassed driving to dealer lots as a primary method to shop for used vehicles.

But, dependence on dealers hasn’t been reduced – it’s only shifted online.  Among those who used the Internet in their shopping process, website visitation to dealer sites has grown to 81% in 2010 (up from 64% in 2006).

Additionally, dealer sites are the second most useful type of site, following independent sites.  This year, the usefulness of dealer sites has grown to 20% from 18% in 2009.  Shoppers find dealer sites most useful for inventory listings, vehicle specifications, and pictures of vehicles.

Used-vehicle shopping has always been and will always be about vehicle availability.  While nearly half of used-vehicle buyers still drive dealer lots, the reality is that Internet shoppers have access to far more vehicles and tools.  And more widespread Internet adoption couple with more robust online inventory will continue to draw shoppers to that medium.

Ten years ago, dealers were pretty much left to their own devices to create an online presence.  With the current rush to mobile, they have a little more help from established vendors, making it far easier for dealers to quickly establish a usable mobile site.

Mobile usage is primarily time- and location-sensitive.  For the automotive industry, this translates to dealer contact details, location, and inventory, i.e. information needed while visiting dealer lots.  For this posting, I surveyed a number of mobile site templates, concentrating on these critical information needs.

In general, I was surprised by the high level of usability – these sites certainly weren’t built by anyone’s nephew.  I liked the navigation layouts below from Dealer.com and Dealerskins.  The most important information – dealer address and phone number – is featured prominently at the top.  The links to additional content are obvious and require little or no scrolling.

My primary complaint for both is that they ignore branding.  Manufacturers and dealerships put substantial effort into differentiating their products, ownership experience, marketing/advertising, and online presence.  Mobile should be no different.

Templates from izmocars and Nexteppe address this issue by incorporating the OEM brand logo at the top of the page, with Hendrick BMW featuring a large vehicle image.  Unfortunately, this also pushes the dealership address to the bottom of the page.  Lexus Rockville Center doesn’t even display the address.

The Contact Us page for Audi Chantilly (from eBizAutos) consolidates all the dealership phone numbers in one place.  And although I would be surprised to see high usage rates for emailing from mobile sites (especially when calling is literally one click away), I like the formatting of the Midlands Honda Contact Us page.  It’s compact and just looks slick.

Mobile inventory requires the most effort, with lots of scrolling and clicking.  The results pages are also tough, since limited screen real estate requires limiting the amount of information shown.  These two sites do a decent job by displaying images, price, and mileage.  Gentilini Ford even makes room for the exterior color.  Even so, I was disappointed to see that Gentilini Ford gives a “retail price” and “sale price” for each vehicle, while Lexus Rockville Center labels theirs a “special price.”  It seems the old special Internet price game is alive and well.

I was even less enamored with these three inventory results pages, which provide tiny or no images and/or insufficient vehicle information.  This forces visitors into substantially more clicking to research the available vehicles.

For the actual vehicle listing, Audi Chantilly stands out by virtue of its excellent vehicle images.  This template links to a page of 24 large images, which gives the mobile user the ability to do a virtual walk around and have greater confidence in the vehicle they’re looking at.  Many mobile dealer sites are restricted to a single image.  I would have liked to see a less generic description in favor of one that tells the story of this particular model, but that’s the responsibility of the used-vehicle department rather than the mobile site.

Dealers have a limited ability to alter vendor-provided template.  In many cases, the mobile site may be an add-on as part of an existing relationship, so taking the most expedient route is understandable.  But as mobile continues to grow, the needs of the mobile shopper will need to be upgraded from “afterthought” to “shopper.”

We recently conducted a pilot study on the usability of automotive mobile websites.  This evaluation is patterned after our Manufacturer Website Evaluation Study (MWES) which looks at the usability of desktop automotive websites.

Kia, Mazda, and Volkswagen were the top performers among the manufacturer mobile sites, balancing the sometimes competing elements of navigation, information/content, appearance, and speed.  We can look to these industry leaders for guidance on how to provide a good experience for today’s mobile shoppers.

Navigation
Mazda’s mobile site scored highest in navigation, primarily because they have their homepage set up to access all the same things you can access on their traditional site: shopping tools and direct access to their models.  It only takes two clicks to get to detailed, comprehensive information for the specifications of any individual model.  They also make good use of color and icons to help visitors find the shopping tools.

Vehicle Images
Kia and Volkswagen did a good job of providing a variety of large, high-quality photos on the mobile site, both in the galleries and the performance details for VW.

Acura and Lincoln, on the other hand, didn’t score as well in the vehicle images attribute.  Acura provides one image in the model overview and has a limited gallery, while Lincoln’s feature images are so small that it is difficult to see the vehicle details.

Appearance
Both Honda and Hyundai score well in appearance.  In addition to providing nice images that attract the shopper, they each establish visual focal areas around the navigation elements.  Honda uses colored bars to focus the eye, while Hyundai uses distinct frames to organize its content.

Options/Features/Specs
Volkswagen’s information is well-organized, making it easy to access a large amount of information quickly.  The site has four distinct tabs available to get to features details.  And, they are able to provide extensive, yet concise, details using either bullets or short paragraphs accompanied by images.  Shoppers can quickly research related information in categories, balancing fewer clicks and reduced scrolling with the availability of comprehensive information

Infiniti’s and Mercury’s mobile sites also score well on options, features, and specifications.  Infiniti translates its high-scoring trim information from the traditional site to the mobile site.  It also reduces the length of its trim lists by not repeating equipment information from a previous trim level.  Mercury provides its features in a grid to help with comparing across multiple trims at a time.

While only a small percentage of shoppers use the mobile Internet in the vehicle shopping process, it is not enough to simply have a mobile site — you need to have a good mobile site.  When designing mobile sites, keep the same basic principles (navigation, appearance, information/content, speed) in mind as when designing traditional sites.

Automotive websites have some of the most robust creative content – imagery, video, interactive – available anywhere online.  Given the massive volume of dollars behind OEM marketing and advertising in the United States, it’s not surprising that domestic automotive brand sites generally lead the way.  But recently, in the course of sifting through dozens of international automotive websites, I found some great examples of creativity at work.

Audi Germany has a clever presentation of its features descriptions, with a series of images that rotate and can be selected to learn more.  It also brings color into a monochromatic site.  On the downside, the interface doesn’t allow for quick scanning and would benefit from previous/next arrows so that the user doesn’t have to continually close/open/close/open to perform basic vehicle research.

It doesn’t always have to be complex.  I like the way that the Hyundai Canada gallery combines a large central image along with large thumbnails, allowing visitors to get a lot of visual information quickly.

Ford UK offers subtitles on its videos, a rather straightforward feature that I haven’t noticed anywhere else online.  The most obvious target audience is hearing-impaired individuals, but I’m guessing that many shoppers (especially those at work!) would appreciate a respite from the blaring music and voiceovers that accompany so many automotive videos.

My favorite find was on Volkswagen UK.  The gallery mixes images and videos, which can be confusing, but on this site the videos actually run from the thumbnails!  It’s eye-catching, interesting, and useful.

These are just some of what is available on sites created beyond our borders.  As I discussed in a past post, the German OEMs have invested heavily in creating great video content for a variety of online channels, including the brand website.  More money certainly makes it easier to take more chances, but a clever idea and good execution can also make a site stand out in some way.

Manufacturers sell vehicles all across the world and while a local online is certainly helpful, many markets cannot support a custom website that delivers the necessary level of functionality and branding.

The Chrysler Group uses a shared template across its three brands (Chrysler, Dodge, and Jeep) that also extends globally.  The U.S. sites carry the most robust content, but even a small market like Australia benefits from a usable navigation framework, large photo gallery, and rich feature descriptions.  Some sites, like the Chrysler UK site, also get 360 colorizers in the model pages.

German OEMs enforce a uniform online brand appearance.  BMW specifies many of the navigation elements (colors, font, etc) and the basic setup of the primary menu, but then allows each country to make modifications within this framework.  Variations on the BMW main menu are shown below.

Porsche and Audi go further by establishing global templates that apply to all countries with little modification.  Porsche has generally been a top performer in our Manufacturer Website Evaluation Study (MWES), while Audi has performed poorly (most recently ranked in the bottom five).  I do find it interesting that Audi allows the UK to depart substantially from its standard.  In fact, the addition of whitespace helps the navigation better stand out and should enhance the entire site’s usability.

On the other hand, many manufacturers allow major markets to implement their own sites.  This approach allows each market to tailor the site for its buyers and for the local Internet norms/conventions.  Toyota (in addition to Honda, Hyundai, and Subaru, among others) takes this approach and has entirely different sites for many of its markets, as shown with the six below.

Global templates may make more efficient use of limited marketing dollars and ensure a consistent brand image, but the lack of flexibility can also hinder local selling efforts.  Then again, not offering shared templates and/or tools means that multiple countries are creating content from scratch.  In an ideal scenario, the parent organization would provide some standards and shared content while also allowing the individual markets to customize.

The primary focus of most mobile websites is time-sensitive and/or location-specific information. In the automotive realm, this means dealer locators, inventory, and pricing.  For instance, m.autotrader.com has little functionality beyond inventory, even though the primary site offers rich vehicle research.  But there are interesting examples of useful “lower funnel” data and tools that can enable a better consumer shopping experience.

Loan calculators are nearly ubiquitous on desktop automotive websites, while in the mobile realm they are domain of third-party sites.  The value is obvious – help shoppers better understand the financial impact of their purchase.  Each site has a slightly different take.  I find Edmunds’s results screen to be problematically formatted and difficult to read.  On the other hand, I like how cars.com includes a reverse calculator (which starts with the desired monthly payment) and also specifically calls out sales tax.

AutoTrader includes its MyAutoTrader in the mobile site. Consumers who have put a lot of work into setting up searches and/or selecting vehicles can easily access that information while they’re out and about.

Automotive Internet shopping was originally driven in part by pricing information – online shoppers could walk into the dealership armed with more data than ever before.  Online pricing information has continued to increase in richness (e.g. market value pricing, cost of ownership), and is yet remarkably sparse on mobile sites.

Kbb offers the basic MSRP / Invoice / Market price data.  Helpful, but really basic.  mobile.truecar.com goes many steps further with its Truecar Price Report, which provides multiple pricing data points.  Rather than setting a single market price, Truecar (as discussed in this post) offers several targets, e.g. Great Price, Good Price.  This is precisely the kind of information that would help consumers when they’re out shopping and more importantly, negotiating.

Truecar’s mobile presentation is nearly identical to that on the desktop site.  I did find it curious that the two sites didn’t agree on the dealer cost and factory invoice for the 2011 Audi Q5.  To be fair, the difference was less than $70.

As mobile sites continue to bulk up, we will undoubtedly see more of the great, current-desktop-only content migrate and further enhance the experience of the real-time shopper.

Disclaimers and fine print are an expected part of product information in any industry.  These additional details are used to clarify claims about features or services that may be restricted, limited, or otherwise requiring additional clarification.

Though this information might not be the main point of research or interest on a website, the requisite “fine print” should not be forgotten content when it comes to site layout and usability.  Across automotive manufacturer websites, there are a variety of strategies used to help shoppers get to these details.

There are three main categories that most OEM disclaimers fall under:

• Listing footnotes at the bottom of the page;
• Linking to specific disclaimer information in a fly-out or pop-up;
• Linking to a separate list of all disclaimers.

From the J.D. Power and Associates Manufacturer Web Site Evaluation Study (MWES), we have learned many lessons about Navigation on OEM websites.  Overuse of clicking, scrolling, or jumping between pages or long blocks of text can quickly confuse shoppers and distract them from the main goal at hand: researching vehicle information.

With these lessons about usability in mind, below are my observations on the different strategies for displaying disclaimers on OEM websites.

Listing footnotes at the bottom of the page
The majority of OEM websites list footnotes at the bottom of the page.  There are a few different ways of implementing this strategy.

BMW has numbered footnotes that are referenced at the bottom of the page.  The advantage is that this keeps related content close together.  However, shoppers are required to scroll up and down to view both features content and the disclaimers.

On the Dodge website, numbered footnotes are referenced behind an additional link at the bottom of the page labeled “Legal, safety and trademark information concerning the numbered items above.”  Shoppers must then click on the link to reveal the list, creating an extra step for shoppers to access the disclaimer information for items listed on the page.  This link reduces clutter that could be caused by lengthy text on the bottom of the page, but it also makes more work for the shopper who is looking for this information.

Lexus has hyperlinked footnotes that take shoppers to the bottom of the page where all disclaimers are listed.  The advantage of having the disclaimer information at the bottom of the same page may be outweighed by the amount of scrolling required for this strategy.  Shoppers have to jump back and forth to view a disclaimer at the bottom of the page and then scroll back up to find their place again to continue researching information.

In these examples of listing footnotes at the bottom of the page, information is available in a location where the details are relevant without competing with features information.  However, the amount of scrolling to connect footnotes with the disclaimer can interfere with the goal of an uninterrupted research process.

Linking to specific disclaimer information in a fly-out or pop-up
The next most commonly used strategy is to link to specific information from a fly-out which only references a particular disclaimer.  This links the shopper to relevant information at the point of interest without taking them away from their research path.  A word of caution would be to make sure these footnotes for disclaimer links are not confused with links to additional features information.

Nissan and Mercedes-Benz incorporate this additional information into their sites without distracting shoppers from the research process.  In my opinion, this is a good strategy for providing disclaimer information even though it is not the most commonly used.

Linking to a separate list of all disclaimers
A handful of sites provide a separate link to all disclaimers for information found across the site.  Ford provides shoppers with a link to “View Additional Disclosures” and then provides all disclosures in one comprehensive list.  The advantage is that shoppers can quickly access this content from any point on the site.  However, they must also scroll to the relevant information each time they are interested in additional disclaimer details.

Though there are a few other strategies, the majority of OEM sites fall into one of these three categories for displaying disclaimers on their website.  After looking across the industry to come up with these groups, I think that the approach that has the least amount of clutter and potential confusion is the link to specific disclaimer information in a fly-out or pop-up.  That is, as long as there is not too much competition with other research links.  As in most cases, these decisions should be related to the functionality of the site as a whole and what works for one site might not be the best solution for another.

However the strategy for incorporating disclaimers is implemented, best practices of design cannot be ignored.  There are advantages and disadvantages to each strategy, so OEM sites—and their legal departments—must weigh how to best give their shoppers quick access to disclaimer details without interrupting the research and shopping process.

This spring, Steve Jobs reignited a long-standing debate between Flash advocates and the technology’s detractors.  Jobs posted a long letter on Apple’s site explaining, point by point, why Apple chooses not to support Flash on the iPhone, iPod, or iPad.  Since the resurgence of this Flash debate (but really, since the debut of the iPhone), major brands have been grappling with the most efficient way to provide a mobile Web experience for their iPhone and iPad users.  Some brands provide a separate mobile site for mobile users.  Others choose to make their primary site mobile-friendly.

Over the last 18 months, we have begun to see automotive manufacturers quietly scaling back their Flash implementation.  In some cases, brands are dropping their Flash sites entirely and launching HTML-based sites.  For example, for Wave 2 of the 2009 Manufacturer Web Site Evaluation Study (MWES), which was fielded in April 2009, Acura converted its all-Flash site to all-HTML while maintaining many of the same navigation features.

Initially, Acura’s MWES scores declined a bit (-7 pts overall, -17 for speed, -1 for navigation), but still ranked #9 overall.  The very next iteration, Acura jumped back up to #3 (+22 overall, +20 speed, +19 navigation).  Not only has their site usability excelled with the HTML implementation, but Acura is likely deriving great benefits in terms of cross-platform usage.  It was the first OEM brand site that functioned as-is on the iPhone, and despite some increased page weights, it seems to load quickly for MWES users.

OEMs Scaling Back on Flash Usage

Acura’s transition from an all-Flash site to an almost-entirely HTML site seemed like a rather bold move 1½ years ago.  However, such transformations are becoming more common in the iPhone/iPad era.  In March of this year (even before Steve Jobs published his Flash manifesto), Virgin America dropped Flash in favor of HTML.  The company’s goal in choosing HTML was to provide a seamless experience for customers, including those who choose to check in for flights with their boarding pass on their phone.  Virgin’s CIO Ravi Simhambhatla commented to The Register website that, “Flash is really, really good, but as long as you can keep the hardware controlled…If the hardware you are trying to put your product on isn’t [controlled] then Flash is questionable.”

We have seen evidence of this phenomenon in the MWES study.  The performance of Flash sites can vary wildly among different computers, a flaw which often negatively impacts an OEM site’s usability.  Perhaps OEMs and their agencies have recognized this as well.  In the last year I’ve noticed that more OEM sites are moving away from pure Flash usage, particularly in their menus and primary navigation.  Instead, Flash is more often being reserved to enable true interactivity.

Out of the 33 OEM brand sites measured by MWES:

• All flash: 4 (Jaguar, Kia, MINI, Scion)
• Mostly Flash: 10
• Mostly HTML: 18
• Entirely HTML: 1 (Acura)

Many of the mostly-Flash sites utilize HTML in their configurators (e.g. Infiniti, which is a strong performer across the board).  The mostly-HTML sites tend to utilize Flash in their homepage and/or model page splash areas (e.g. Jeep, Lincoln).

As a category, the all-Flash sites performed worst for navigation, speed, and overall score.  Among the other categories, there’s no clear pattern of which combination of Flash and HTML works best.  In other words, it’s not necessarily the Flash – it’s how you use it.

For instance, Cadillac’s completely non-standard navigation of moving pieces requires Flash’s interactivity, but the result is a nearly un-usable interface.  And Cadillac suffers, finishing last in MWES.  Similarly, Scion uses Flash to enable its microsite masquerading as an OEM brand site and finishes at #32, beating out only Cadillac.  On the other hand, MINI’s all-Flash site features some quirky activity while maintaining a high level of usability, giving the site a ninth-place finish overall.

Comparing Lincoln vs. Mercury also shows how prioritizing navigation supersedes the choice of technology.  Each site used to have the exact same navigation scheme, but Lincoln recently gave its navigation a minor overhaul.  Lincoln has also shifted to become more HTML-based over the past year.

• Lincoln is currently ranked 6th for speed, 8th for navigation
• Mercury is currently ranked 10th for speed, 16th for navigation

It’s unlikely that Lincoln’s score improvement is due in any great part to the switch to HTML.  Rather, Lincoln’s efforts to simplify its navigation are probably responsible for the improvement in score.  For example, navigating Lincoln’s Features section is dead simple, and the images are large and appear above the fold.  Mercury, in contrast, requires users to look below the fold, awkwardly select different rectangular images, and then view a small image with text.  In general, Lincoln has gone the same route as Hyundai and dramatically cut down the number of links offered per-page.

What’s Next in the Flash vs. HTML Battle?

HTML5 is the long-in-coming alternative to Flash that has been anointed by Steve Jobs.  Some features of HTML5 are expected to be ready for use by the end of 2010, but based on what we’ve observed of OEM Web development behavior, OEMs are traditionally not early adopters when it comes to new Web technologies.  However, it is possible that the pressure for cross-platform usage may accelerate HTML5’s adoption.

Flash will likely continue to face some of the same pressures it always has – among them cost, variable performance on different systems, and the closed nature of its system.  Virgin America’s CIO cited all of these reasons for its decision to switch to HTML.  He commented to The Register that Virgin’s site wasn’t using enough of Flash’s capabilities to justify the continued use of the technology.  Rather, he felt that HTML’s free, open system was “good enough” for delivering the site’s animation and overall user experience.

Mercedes-Benz is the latest OEM to enter the debate, having recently abandoned Flash in favor of HTML.  The new site looks and feels almost exactly the same despite a completely re-engineered user interface.  The next wave of MWES (to be released in early 2011) should reveal whether the brand can achieve some of the same improvements we saw this wave with Acura.