Slides badge

Testing

Learning Intentions

  • Understand how to test a website effectively

  • Understanding important development concepts such as consistency

Success Criteria

  • I can provide several means of testing a website
  • I can state what makes a good website through the use of development concepts

Describe

Describe each of the following key terms:

  1. Wireframe
  2. Low-fidelity prototype
  3. Website structure

Testing

  • Testing can be carried out that verifies:
    • The finished website matches the original user interface design
    • The links work on the website
    • The media across the website work correctly

Testing the user interface

  • We can test whether a website based on it's original user interface design or not by comparing them side by side. 
  • Matching the original plan to the finished product is perhaps the most important test that can be carried out.

The importance of the low-fidelity prototype

  • The low-fidelity prototype is especially important when testing a website since it can be used:
    • to ensure that the original layout matches with the developed website.
    • to check for consistency across the website
    • to check the links go to the correct locations
    • to ensure that all the media is included in the website

Testing links and site navigation

  • We can also test links to ensure that they go to the correct pages, as specified in the low-fidelity prototype.
  • This involves testing each link on the website and checking the destination. 

Testing MEDIA ON A WEBSITE

  • As well as this, it's important to test out the media on websites (images, videos and audio)
  • If a video doesn't display on a website, you need to ensure that the format is supported by the browser.

Testing MEDIA ON A WEBSITE

  • Further to this, media should be tested for it's positioning on the screen compared with the original designs
  • It should also be tested to ensure that the video, audio or animation plays correctly, including whether autoplay works or not (Chrome 66 no longer allows any audio in videos which autoplay)
  • As well as this, you should test to make sure that any alt tags work correctly for images

Try the following questions:

  1. State and describe two ways in which a website may be tested
  2. How is the low-fidelity prototype important in the testing stage?
  3. Explain the term "consistency" when discussing websites
  4. The following code is written: 

 

<body style="background:#005">

  <h1 style="background:#222">Test webpage</h1>

</body>

 

Explain why the <h1> would not be visible.

Test your knowledge

Consistency

Consistency

the quality of always behaving or performing in a similar way, or of always happening in a similar way:

Consistency

  • Consistency is important to ensure that users can quickly figure out what to do.
  • With a consistent website most, if not all, webpages on the website look similar. 
  • Thinking about the Amazon website, you will find that the layout stays the same on every page:
    • A search box at the top middle
    • A user login at the top right
    • Site links and copyright at the bottom

Consistency

  • It is important that websites are tested for consistency because it ensures that the user can navigate the site without having to think too much.
  • According to research, a user will spend less than 1 second on a website if they find it hard to navigate. 
  1. Explain what consistency is.
  2. Give an example of how a website can be consistent
  3. Explain why consistency is important on a website.

Test your knowledge

Presentation Overview
Close
JB
Testing
© 2020 - 2024 J Balfour
09:09 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files