Report

SOFT20171: Internet Application Development Assignment 2

Throughout the design of this project, a number of heuristics were considered and adhered to.

For example, a principle which Nielsen and Budd discuss is consistency and standards. Throughout the site a common colour scheme and layout are employed. To achieve this, Bootstrap is used and a consistent CSS stylesheet is also used.

Nielsen additionally discusses recognition rather than recall. Throughout the site the buttons and text are consistent and allow the user to easily recognise what the function of the button or text do. Linking into the previous principle, these buttons are consistent across the site. Another key reason for the text buttons is for accessibility. To allow screen-readers to access the site, text buttons were used rather than images as screen-readers are able to read the text from the button but cannot read images.

Finally, error prevention has been prevalent throughout the site where the users need to enter information. This is another of Nielsen’s principles which ensures that the users enter data in the expected format so that the information which the system subsequently presents is useful to the users. For this a number of validation techniques have been employed in HTML5. Additionally, the use of prepared expressions ensures that the threat of SQL injection attacks are minimised.

This initially presented an issue as prior to this project, only two expressions were passed to the prepared expression. When attempting to pass more than two, an error occurred. Upon investigation of this error, it was identified that when the expression is called, the first element for example “ss” refers to the number of statements expected – in this case two. When changed to “sss” – three expected statements, the error was eliminated.

Budd discusses the need for clarity. To achieve this, useful messages are presented to the user. For example, where there are no records to display from the MySQL database, the site will show a message notifying the user that “No items to display”. This shows the user that the site is working as expected – there is just no data for that particular view.

Overall, I think that the design implemented meets most of Nielsen’s heuristics. However, there are some where it falls short. For example, given more time I would have implemented a basket overview for the user to allow them to see how many items are in their basket from any page.

Appendices

External sources used for coding support

• https://getbootstrap.com/docs/4.0/components/navbar/ - Bootstrap documentation for the navigation bar
• https://www.w3schools.com/xml/xml_applications.asp - XML pull code, which I have extensively modified to fit the purpose of this project
• https://www.w3schools.com/css/css3_borders.asp - Rounded corners CSS code

Image sources

• https://www.paypal.com/pe/webapps/mpp/merchant-integration/paypal-button?locale.x=en_PE – PayPal button image – modified
• https://www.ac-foto.com/product/ef-100-40045-56-l-is-usm-ii - Canon 100-400
• https://www.bhphotovideo.com/c/product/1225875-REG/canon_1263c004_eos_80d_dslr_camera.html - Canon 80D
• https://www.bhphotovideo.com/c/product/1250646-REG/canon_speedlite_600ex_ii_rt.html - Canon Speedlite
• TechShop UK Logo – Created using GIMP
• https://interface-nrm.co.uk/5-star-trustpilot-review-from-vantage-products-limited-ukas-iso-9001-2015-certification/ - TrustPilot 5 star logo
• https://panamoz.com/digital-cameras/canon/canon-eos-80d-dslr-camera-body-only.html - Canon EOS 80D
• https://www.bestbuy.ca/en-ca/product/canon-canon-eos-5d-mark-iv-dslr-camera-body-only-1483c003/10482952.aspx - Canon EOS 5D Mk4
• https://www.vistek.ca/store/427181/canon-eos-r-full-frame-mirrorless-camera-body-includes-free-efeos - Canon EOS R
• https://www.canon.com.hk/en/product/catalog/productItemDetails.do?prrfnbr=200939 – Canon EOS 750D