Speeding into the World of Automobile Websites: The Good, Bad and Ugly

One of the most popular industries in the world is the automobile or motor car industry. Women love their jewels and fashion, while men love their cars. Although that may be a cliché, there is some element of truth in it. The type of car one owns has become a statement on the status and the position in life of the individual. The more luxurious and expensive the automobile, the better it reflects on the owner.

Speeding into the World of Automobile Websites
Image credit: Johnmueller


The history and facts surrounding the automobile industry is a fascinating one. However, in this article we will focus on the website of various automobile brands and analyze the fundamentals of the automobile website industry and how it sells itself, through the use of the web, to potential buyers.

We will take a look at some of the designs of popular automobile websites and determine the current trends as well as focus on some of the key factors like typography, accessibility and usability.

The Importance of Usability and Accessibility

The usability of a website should not be neglected. This is especially the case with the automobile industry. One must realize what makes a website work and how the website can be designed to provide excellent service to their target audience. Automobile companies should make the usability of their websites their top priority in their next revamp.

Limiting Browser Compatibility

Designing for just a single browser in today’s context is simply not an option. Doing so will limit your audience numbers. Internet Explorer no longer has monopoly of the web as there are several different browsers available today. You can lead a horse to water, but you can’t make it drink. Similarly, while you cannot force the mass public to choose your vehicle brand, maximize your audience numbers by allowing everyone the chance to explore your brand website on the various browsers in existence today.

Kia Motors
Kia Motors is one example. The following screenshot is how Kia Motor’s website looks like in Opera Browser. Unfortunately, when viewed on a Google Chrome browser, the bottom alignment shifts and becomes unsightly.

Kia Motors

Negative Effects of Slow Loading Times

Flash is admittedly very impressive and popular among designers. It is a great way to present dynamic effects and enhances the visual appeal of the vehicle to potential customers. However, more often than not, designers get carried away and overlook the fact that slow loading time can make or break the possibility of a sale. This is especially the case with impatient customers or customers with hectic schedules and busy lifestyles. Yes, Flash can be used to create some of the most appealing and amazing effects. However, one needs to strike a good balance and be careful not to overdo it. One option is to build a half Flash website instead of a whole site in full Flash mode.

Subaru Canada
An issue mentioned many times before is the amount of time a viewer has to wait before a page fully loads. Their site, despite the simple and clean looking design tries one's patience with the long loading time required to view the page.

Subaru

Full Flash Site: A Need or a Want?

SEO experts have repeatedly commented on the negative effects a full Flash website will have on a website’s ranking on search engines. But more importantly, there are other noteworthy implications of a full Flash website on the experience of a visitor in terms of usability. The issue to consider is how we can resolve this problem.

Opel
The Opel website features one method of resolving the issue by allowing visitors the option to launch the site in full Flash mode or html mode.

Opel

The best option is of course to develop a site with a balanced mix of Flash and basic HTML markup. However, if full Flash is necessary, it is important to provide visitors the choice to view the site in full Flash or HTML mode.

Provide Important Information

Buying an automobile is a big decision because of its hefty price tag. One of the more important factors a potential customer considers when buying such an expensive item is its price. However, some websites provide all the specs of the vehicle and describes how great the automobile performs, but neglect to include the price. Beating around the bush might work against the company when a frustrated customer needs to go through a lot of hassle just to find out the price of a vehicle. Why would they bother to go to a website when they cannot obtain all the important information from it?

Proton Singapore
With Proton Singapore’s website, there are no price details listed. On top of that, a customer has to go through the tedious and time consuming process of registering just to download their online brochure.

Proton

The website’s sole purpose is to provide relevant information to potential customers easily and whenever they want it. It defeats the purpose of having a website if they have to call a customer service officer from the company and waste precious time with an automated machine that will guide them to that person.

Include Useful Tools

Potential customers scout around to compare specs, prices, and designs of various car models and brands. Providing them with an accurate estimate of its price will help them in their decision making process. An added bonus that will be much appreciated is the addition of an easy to use comparison tool within the website. This will allow customers to easily compare the various models a brand has that will also meet their own personal requirements in an automobile.

Hyundai
The site has some useful tools for buyers to play with that allow customers to build their own and compare vehicles.

Hyundai

Design and Typography

Although most automobile websites in existence today are fairly usable, its design is more often than not boring, with their use of obsolete styles and layouts. Car manufactures invest millions of dollars into research to produce more effective and powerful models. However, they overlook the importance of developing their web engine. A brand’s website should be maximized as a form of advertising on top of those seen in media or print.

Exploring the Problem: Lack of Creativity or Lack of Budget?

Traditionally, car companies pump in more money into print and media advertising which has had a great track record of promoting their products. Websites are only maintained because every major brand of any given product has a website. It also enables customers who prefer the web medium to communicate with them.

Jaguar
Jaguar’s website deviates from the norm and has a vastly unique style of presentation that visitors can enjoy.

Jaguar

The lack of creativity in the field of automobile web design is indeed a matter of great concern. This is either because car companies do not have the budget to outsource the project to a web designer or that they don’t even allocate a decent budget to the creation and maintenance of a proper website. Sadly, some car companies do not consider having a good brand website a viable expense.

Dissection of an Automobile Brand Website

Kia is an automobile brand that is gaining global popularity in recent years. Taking a look at its official website, we will point out the issues the current site has and what kind of changes they can make to improve the presence of this Korean brand on the Web. This exercise is not an attempt to find fault, but rather to objectively look for ways to improve the design standards of the automobile web industry.

A red circle on the image indicates areas where improvements can be made to that section while a green circle highlights sections that are well executed.

Kia Motors
KIA

Pointer 1 Pointer 2 Pointer 3 Pointer 4 Pointer 5 Pointer 6 Pointer 7 Pointer 8 Pointer 9 Pointer 10 Pointer 11 Pointer 12 Pointer 13 Pointer 14

The Good

We will take a look at the good, the bad, and the ugly in regards to Kia's website design. And we start off first with this site’s positive points.

Pointer 1
Not everyone enjoys interactive media sites as some prefer the simple style of traditional websites. Giving visitors the option to stop and mute the video is a plus point.
Back to Image

Pointer 2
Speed is the in thing today. Allowing visitors, who already know what they want, to go directly to the model of their choice with the four different tabs is another plus point.
Back to Image

Pointer 3
One of the main pluses of the website is the choice of using large videos. However, it would have been even better if the videos were of crisp and clear quality.
Back to Image

The Bad

Now, we will explore the areas of the KIA website that can be improved upon.
Back to Image

Pointer 4
Other than the fact that the color of the logo stands out, the position where the logo is placed could be rearranged to give it more prominence. The logo text is also not aligned well. The biggest issue is when the Flash video starts to play, the changes in the background occasionally overshadow the logo and it loses its visibility and prominence.
Back to Image

Pointer 5
The quality of the video is poor. When using a Flash video, the purpose is to have it as the main attraction. The video also has the largest coverage of the web page and the best chance of exposure hence they should make use of Hi-Definition streaming. If the video quality is poor, it is a bad reflection of the product itself. Potential buyers might equate the quality of the video to that of the actual product.
Back to Image

Pointer 6
Having too many repeats may not be a good thing. There are two showroom link options; one is sufficient. Also, when clicked on, the micro-site link produces too many windows which can be frustrating for visitors.
Back to Image

Pointer 7
The rollover will result in a link box that provides three links for visitors. However, the titles of these links are ambiguous and assume that the user knows where they will be directed to. This need for guesswork to proceed further defeats its initial purpose of being a quick way to navigate the website. This might just be a case of a bug in the Quick Site Section. However, the box will also remain expanded unless the close button is clicked which renders the original purpose of the effect redundant.
Back to Image

Pointer 8
Leaving too much White Space project a sense of emptiness and is really a waste of good space. Although one should not use up every bit of space that is available, having too much of it is also not wise. The space left empty could be used to provide more helpful information for visitors.
Back to Image

Pointer 9
The purpose of having a full sized video is negated with the addition of the preview box in that location. The reason it was done so might be to promote other models the brand has to offer. However, its location is not aesthetically well placed and serves as a bad distraction from the video. Also, repetition of the option to visit the same micro-site within the page is redundant.
Back to Image

Pointer 10
One of the most important details included in a website is the contact information. However, the link to this crucial section is not given its due. It is too small and almost illegible. The site has lots of white space that should have been better utilized like the addition of a more prominent contact link.
Back to Image

Pointer 11
The fact that the website is flushed to the left renders the entire visual aesthetic of the design off balance. It is visually unpleasant and an unpopular layout. Optimally, the design of the site should be centralized as it is visually more appealing.
Back to Image

Pointer 12
The disclaimer at the footer is an image and does not link to a detailed description.
Back to Image

Pointer 13
A search bar helps visitors to quickly and efficiently get to different sections of the website. The lack of a search bar in this website can add to a visitor’s frustration. With the abundance of white space in this design, this is one of the extra features that can be added.
Back to Image

Pointer 14
The grid box proportion is uneven which makes the site look messy and unprofessional. Once again the excess of white space is an issue as it gives visitors the feeling as if there is something missing.
Back to Image

The Ugly

Unfortunately, there are also hidden issues in regards to this site in terms of the development and architecture. This site was constructed using tables without any form of modern CSS. On top of that, the SEO is also negatively affected by the many broken links and errors found on the site.

16 Top Automobile Websites

The automobile web industry is not without its outstanding examples. The following list shows the best of what automobile website industry has to over. They excel in various areas like overall design, usability, functionality and other dazzling techniques. Although they are not comparable to other great websites in the market, they are the best in this niche industry. After all, one cannot know what good entails without first experiencing the bad.

Abarth
Abarth

Acura
Acura

Alfa Romeo
Alfa Romeo

Audi
Audi

Buick
Buick

Cadillac
Cadillac

Chrysler
Chrysler

Maserati
Maserati

Mazda
Mazda

Mini Cooper
Miniusa

Nissan
Nissanusa

Renault
Renault

Skoda
Skoda

Toyota
Toyota

Volkswagon
Volkswagon

Mercedes Benz
Mercedes Benz

Porsche USA
Porsche USA

Further Reading

  • Instantshift: Showcase of popular automobiles websites
  • Useit: 113 Design Guidelines for Homepage Usability
  • Sitepoint: Design Effective Navigation in 10 Steps
  • Onextrapixel: 10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
  • Indeziner: 30 awesome car inspiration websites
  • Ryanscherf: An insightful article by web designer & developer Ryan Scheft. In the article, he dissects and suggests a new design for the BMW website

Automobile Websites: A Work In Progress

The web is not without its failures. We hope that this article helps you realize that not every site in the automobile website industry is perfect. Something that might work aesthetically with design websites of other industries might not work as well for the automobile website industry. It is a niche market that is currently still being refined and explored. And the results are still inconclusive. However, there can be no growth without discourse and discussion.

What elements do you think are crucial when designing an automobile website? Are there other good automobile websites worth mentioning that hasn’t been listed in this article? Feel free to share with us your thoughts in the comment box below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.