Get extra lift from AOPA. Start your free membership trial today! Click here

Tale of Two Websites

From ugly site to pretty site

By Chris Horwhat
In this article we will showcase two websites we have created. One will showcase common pitfalls and mistakes we usually see with homemade/amateur websites. The other will illustrate the improvements made and show you that by taking quick/easy actions, you can drastically improve the quality of your site. There are many things wrong with the website, and we invite you to play around with both of them to get a feel of the differences, We will only be highlighting the more egregious issues (see if you can find frustrating things with the website not covered by the article).

FIVE MAIN PAIN POINTS

We commonly see 5 major points of pain in websites, they are:
  • No/Poor Mobile View
  • No Call To Action (CTA)
  • Difficult to Navigate/Broken Navigation
  • Lack of margins/padding
  • Poor Font/Color choices

For each of these "pain points" we will illustrate the before and after and explain why this is so important. In a companion article, we will provide resources and tips on how you can address these problem areas (coming soon). 

If you wish to explore the websites referenced in this article at any point:

The "ugly" version can be found: here (https://download.aopa.org/ch/v2/badexample/)

The improved upon version can be found: here (https://download.aopa.org/ch/preview/index.html)

With that out of the way... lets get into it!

 

1. No/Poor Mobile View

It should not come as a surprise that phones are exceedingly popular, but were you aware that nearly HALF of all web traffic comes from mobile devices (Haan)? Combining this with another popular statistic paints a scary picture… 88% of online users will NOT return to a site after having a bad experience (Haan). So if your website does not have a mobile friendly view (i.e just having a desktop site that users need to pinch and drag/scroll around to see information) this will likely create a bad experience, shutting the door to that potential customer forever. Considering that nearly half of web traffic is from a phone, do you really want to leave the success of your business to essentially a coin flip?

Having no mobile view is obviously the worst case scenario, but even if you have a mobile view, if it is not optimized/slow it can STILL create a negative experience (which risks the 88% chance they do not return to your site). This is why having a well designed, responsive mobile view website is key to your businesses success on the web.

2. No Call To Action (CTA)

Your website should have a reason for existing, whether it's to increase awareness of your flight school, bring in new customers, or even scheduling lessons/checkrides; there has to be SOME reason why your website exists. You may know the reason, but it may not be obvious to your visitors. It is necessary to remember that they may be seeing this site for the first time, they do not know how to navigate it as expertly as you may. For this reason you need to be EXCEEDINGLY obvious with what you want the users to do. This usually manifests in a “Call to Action” or CTA. A CTA can be a variety of things, but is usually a pop up or highlighted button/link that will take the user to where you want them to go, or show them what you want them to see. 61% of users say that if they don’t find what they are looking for in about five seconds they’ll go to another site (Haan). It is an unfortunate reality, but as attention spans and patience continue to drop, you really need to be direct and obvious with a CTA that will ensure your visitors are seeing what you want them to see
.

3. Difficult/Broken Navigation

By now it should be obvious that if user’s cannot find what they are expecting to find, or are having a less than ideal experience with a website they will jump ship. Just like point 1, the degree to how annoying your navigation is a spectrum. In the worst case scenario, it is broken and leads to 404 errors, where the user cannot get to the page they expect. In a slightly better scenario, the user CAN get to where they need to, but will have to go on a scavenger hunt/dive down a rabbit hole of nested pages. Obviously a strictly broken navigation bar is worse, but a difficult to navigate website is also dangerously annoying (it risks the aforementioned 88% no return after a bad experience)

It is important to consider how many pages your website may end up being. Just like physical architecture, designing the layout of your website before you build it can highlight potential structural/navigational weaknesses. Also, if you ever add or remove pages it is essential that you confirm all the navigation still works as intended before releasing the site to the general public.

4. Lack of margins/padding

 This pain point is typically tied to the number 1 pain point of poor mobile view, though it can manifest even in desktop sides. Margin and padding refer to the space around your content (the outer and inner space respectively). Don’t worry if you don't understand the difference between margin and padding, what you really need to worry about is how “scrunched” your content is relative to the rest of the content. Look at this webpage, see how difficult it is to read the columns? Adding just a little bit of margin/padding allows the site some breathing room. It feels much less claustrophobic now doesn’t it. Not only does it make the website just “feel” better, but it is much easier to read/navigate. Do not forget that bad experiences lead to lost visitors, adding proper padding/margins is such a simple fix (usually only requiring 1-2 lines of code) that there is effectively no reason to not make sure your website is properly padded/margined.

5. Poor Color/Font Choice

Just like the previous pain point, this is most often a result of poor initial site planning. Color/font are important to consider because of contrast values. If your site does not have a high contrast between the background and the foreground, they can blend together and be very difficult to read. It is a common trap that people fall into, designing their website around their brand colors. For this example we chose a small burger chain’s iconic colors of red and yellow. While this works on a children's meal box, it is dreadful on a website. This is something that should be well considered before the site is live. Making changes to the website down the line can be a lot harder when the site is large, as there are more areas to consider. There are many tools you can use to gauge your website's readability, as some people see color differently than others, using these tools can provide the most “objective” or standard acceptable ranges of color contrast.

In conclusion...

We invite you now to examine your own flight school’s website. Does it feel more like the broken sample website or the “better” website? If it feels like the improved site (or even better) then congratulations! But if your website feels more like the “broken” sample, do not worry! It took very minor changes in the websites code to make these hugely impactful improvements to get to the better site. Stay tuned for the follow up to this article where we detail the changes!

Source for Statistics:

Haan, Katherine. “Top Website Statistics for 2024.” Forbes, Forbes Magazine, 4 June 2024, www.forbes.com/advisor/business/software/website-statistics/.