To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

ClickIt: A web based application to aid the learning of web development in an educational environment



5 Interface Design

5.1 User Interface

Since the interface is designed to encourage the user to work from left to right, the interface should look somewhat similar to the three panel interface concept of Scratch since a large number of schools already use Scratch. Figure 5 shows a sample user interface concept which borrows from the Scratch interface.

The interface should also feel like other applications that users are likely to have used before.

Mockup

Figure 5 - a mockup of a concept user interface

Figure 5 represents a wireframe diagram of a concept interface.

Within the top section of the interface the user can find the standard menu with the default menu buttons as usual. The left hand section is where HTML and CSS code blocks can be found. This is in the form of an accordion, so the user would click CSS at the bottom to open the CSS code blocks. The user should select an item from this section and drag it in to the code editor in the middle. The user can then see the actual HTML code in the bottom right. Finally, the section at the top right displays a live preview of the webpage.

The interface was originally inspired by the Scratch three panel interface due to the comments received from children using Scratch in a school.

5.2 Interface Evaluation

To evaluate the whole system, the application will be evaluated by students at Heriot-Watt University on a regular basis. This will allow bugs and usability issues to be detected early in development. The application will be assessed using a user- centred design, which will allow me to evaluate whether or not the original requirements have been met and makes web development easier. Students will be tested on their own learning gain.

In the prototype, the application will be evaluated by children aged 12 - 16 from a nearby secondary school who will use the application for a short while, completing several preset short activities and then completing a usability questionnaire.

The questionnaires will allow me to deduce whether or not the concept of the ClickIt application aids the in development of webpages with children within the age range of 12 - 16.

References

  1. Computing Science Project General assessment information, SQA, 2015 . Available from: http://www.sqa.org.uk/files_ccc/GAInfoCompScience.pdf . Accessed 12 Nov 2015
  2. Maiorana, F, 2014. Teaching Web Programming . University of Catania, pp. 49
  3. Jenkins, T, 2001. Teaching Programming - A Journey from Teacher to Motivator. University of Leeds, pp. 1 - 3.
  4. Kahn, K, 1995. ToonTalk - An Animated Programming Environment for Children . Stanford University, pp 198 - 201.
  5. SuperLogo, Axe Valley Community College, Available from: http://folders.axevalley.devon.sch.uk/html/ict/year7/SuperLogo/ . Accessed: 11 Nov 2015
  6. Maloney, J, Resnick, M, Rusk, N, Silverman, B, 2010. The Scratch Programming Language and Environment . Massachusetts Institute of Technology, vol. 10, pp. 2 - 8.
  7. Hourcade, J P, 2001. Interaction Design and Children . University of Iowa, pp. 282 - 283
  8. Hanna, L, Risden, K, Alexander, K, 1997. Guidelines for Usability Testing with Children
  9. Texas Child Care: Back Issues, Lee, T, 2011. Available from: http://www.childcarequarterly.com/spring11_story3.html . Accessed: 17 Nov 2015
  10. Kolb’s Learning Styles, Business Balls, 2015. Available from: http://www.businessballs.com/kolblearningstyles.htm . Accessed: 17 Nov 2015

Bibliography

  1. W3C HTML5 and CSS2 and CSS3 specifications
  2. PHP Reference library
  3. SQA Curriculum for Excellence
  4. SQA Higher and Advanced Higher Computing course notes and past examination papers
  5. ToonTalk website (http://www.toontalk.com)
  6. Logo versions website (https://logo.codeplex.com)
  7. Scratch website (https://scratch.mit.edu)
  8. Zurb Joyride website (http://zurb.com/playground/jquery-joyride-feature-tour-plugin)