WTD: Lesson - Common Bugs Checklist

An image of a clipboard containing a checklist.Common Bugs

Why Bugs?

When you read or hear the word bug, what image comes to mind? Now how in the world could anything that resembles that image in your mind end up in web page design or in computer science at all? That’s quite an interesting story.

According to an article in National Geographic, Dr. Grace Hopper, a trailblazer in technology and Computer Science, along with her team, actually discovered an error in one of the computers they were working with that was not performing a program correctly. Once the team discovered the error, they removed it and the code/program ran successfully. Dr. Hopper called the error a bug, which makes that one of the earliest known examples of computer debugging. Prior to Dr. Hopper using the term, it was also noted that Thomas Edison used the word “bug” to describe technical problems as well.

Common Bugs Found in Web Design

Just as in nature, there are various types of bugs and countless places where they are discovered. Let’s explore a few common bugs based on the tests used to check for the error.

  • Cross Browser Adaptability: A test focusing on interoperability. Checking for this type of bug ensures that the web page works with different types of browsers and OS (i.e. Chrome, Firefox, etc.).
  • Form Validation: A test for invalid characters entered in the validation fields. Certain protocols can be followed to prevent disruption while setting up validation logic.
  • Usability: A test to ensure that an app is user friendly. If this error is discovered, the navigation and/or other critical functions may be inaccessible.
  • Inconsistencies in Integration: A test exposing challenges with interfaces when accessed through various devices or program components. Infrastructure inconsistencies and overall performance may be adversely affected.
  • Broken User Interface (UI) Elements: A test for incorrect coding of buttons and text fields. Errors in this area may cause the site to crash. Most people have experienced a site or web page crashing after multiple clicks and returning with an error message. For example, have you ever had a web page load and all it says on the screen is, “Oops, something went wrong.”? If so, this might have been due to a UI bug.

How does Debugging Happen?

It is important to note that web testing can be done manually or by using an automated markup validation service. There are free tools and tools that cost money. For instance, the Worldwide Web Consortium (W3C) maintains a validator tool, which can check web code for common errors. More in-depth or complex validation services can be expensive. Think about how much time and money a big game developer invests in making sure the final release of the game is as error-free as possible. Bugs can make or break a program or game, and thus can make or break a company! These companies are likely running both automated bug checks for the code, but then investing in manual game checkers as well.

For this lesson, you will not need to pay for any web testing reports as we will be exploring manual debugging. Manual debugging means that you do the checking yourself, instead of relying on a machine to check. We will explore manual debugging by using a UI Testing Checklist. This checklist is intended to give you an idea of a UI Testing process.

UI Testing Checklist
Description Yes No Comments

Does the site have a consistent, clearly recognizable look and flow?

Is the text legible and appealing?

Are there any spelling or grammatical errors?

Do all the buttons and interactive elements load properly?

Does the page load in different browsers and/or operating systems?

Does the page load quickly?

Try It!

Use the checklist above to manually debug this page. Are there any flaws in the UI coding for this web page? Even if there aren't errors, do you have anything you would change about the UI? Hopefully, you were able to check 'Yes' for all of the questions in the UI test! These are the questions that designers ask themselves before publishing their websites to the world.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION