Integrating Design Principles into Web Technology ...

Integrating Design Principles into Web Technology Courses J.L. Wesson, N.L.O. Cowley and R. Stoman Department of Computer Science & Information Systems University of Port Elizabeth [email protected], [email protected], [email protected]

Abstract The rapid growth in the use of the Internet and the World-Wide Web (WWW) has resulted in a demand for courses on web design and Internet programming at tertiary level. Traditional Computer Science or Information Systems courses do not extend to a detailed coverage of the knowledge and skills required to develop web-based systems. The IEEE-CS/ACM Computing Curricula 2001 does, however, include a module on Net-centric Computing, with a recommendation of 15 core hours. This module is strongly oriented towards technology issues and does not include any web design principles or guidelines. The objective of this paper is to discuss the development of the Web Technology courses at UPE that integrate technology issues with web design principles and guidelines. This paper will discuss the content and structure of these courses as well as the lessons learned from presenting the original course during 2001. These results were used to make certain changes to the courses in 2002, both in terms of content and in terms of mode of presentation.

1. Introduction Developing usable web sites requires an in-depth knowledge of more than just the technologies involved. According to several web design experts, including Nielsen and Spool, “Usability is often the most neglected aspect of web sites, yet in many respects it is the most important” (Nielsen, Coyne and Tahir 2001). To ensure usability requires a user-centred design approach together with an understanding of web design principles and guidelines (Cato 2001) , (Lowe and Hall 1999), (Nielsen 2000). A web technology course should thus cover more than just the technology; it should also cover the principles of web design. Several universities in South Africa currently offer modules on the Internet and web design. Rhodes University offers modules in HTML and JavaScript at first year level (http://www.cs.ru.ac.za/CSc1B0/ ). UNISA has two short modules on the Internet (14 units) and Web Design (4 units), which include an introduction to Hypertext Markup Language (HTML), PaintShop Pro basics, Frontpage and an introduction to JavaScript (http://cs-cert.unisa.ac.za/internet/content/index.htm). The University of the Orange Free State has a second year module called an Introduction to Networks and the Internet, which includes a small section on TCP/IP, web pages and web design (http://www.uovs.ac.za/faculties/nat/comp/programmes/bcom_modules.htm). Most of these courses focus on Internet programming and web technology; very little emphasis is placed on web design. This paper discusses the development of the Web Technology courses at the University of Port Elizabeth (UPE) which effectively integrate Internet programming, web technology and website design (http://www.cs.upe.ac.za/).

2. The Web Technology Courses at UPE UPE currently offers two Web Technology courses at second year level—a course targeted at mainstream Computer Science students, called Web Technology, and another service course aimed at Media and Marketing students, called Web Page Design. The Web Technology course comprises two one-semester modules: WRW201 and WRW202, with a credit value of 7 and 8 credits respectively, implying a total of 150 notional hours. WRW201 consists of an introduction to web design, the Internet, the WWW, HTML, web graphics, and client side scripting (JavaScript). Emphasis is on web design principles and modular code design. WRW202 provides an introduction to server side scripting (VBScript), and an overview of further technologies such as XML and WML. The emphasis is placed on providing well-designed dynamic web content using DHTML and Active Server Pages.

Throughout the Web Technology course, a strong emphasis is placed on web design fundamentals and multimedia communication principles. A number of WWW use cases (good and bad practice) are studied. Students gain experience in preparing websites, creating text and creating and manipulating graphics. A website project portfolio is developed over the duration of the course, as an application of course topics covered, and submitted for evaluation at the end of each semester. The course is offered as part of the BSc (IT) degree and also as an elective for the BCom and BSc degrees in Computer Science & Information Systems. The Web Page Design course is also offered as two one-semester modules, each carrying a credit value of 7, which equates to 140 notional hours. In this course, students are given an introduction to web design, the Internet, the World Wide Web, Hypertext Markup Language and web graphics. A similar emphasis is placed on web design fundamentals and multimedia communication principles and independent exploration of tools. This course proceeds at a slower pace than the Web Technology course, and uses a smaller toolset. Students code all web pages directly in HTML for the full duration of the first semester, and are introduced to a web-authoring tool in the second semester. 2.1 Course History and Objectives The Web Technology course was offered for the first time at UPE in 2001. The only prerequisite for this course was a first-year course in End-User Computing. As a result, the students who registered for the course had a wide range of computer expertise. Some of the students were third-year BSc students with two years of Computer Science, while others were second year BA students with only a onesemester module in End-user Computing. This diversity in student population created several problems, which are outlined in section 3.1. These problems included lower levels of computer literacy and a lack of knowledge of programming principles. From 2002, it was thus decided to present two different courses in Web Technology and Web Design: one course, called Web Technology, for students with at least a first year in Computer Science; and another course, called Web Page Design, for BA and BCom (Marketing) students. 2.2 Mode of presentation In 2001, course presentation took the form of a single formal lecture and a 2-hour practical per week. Theoretical concepts were presented and explored during the lecture, and multimedia facilities were used for illustration purposes. This proved particularly useful for the demonstration of interactive web site content. Students were expected to complete practical assignments in the laboratories. It was found that, as the technical complexity of assignments increased, this mode of presentation was not always sufficient. The multimedia facilities provided in the lecture halls were not equipped for illustrating server side scripting and various other technologies. In 2002, lectures were moved to the practical laboratories on an experimental basis. Lectures were run as workshops based on student participation and exploration. Students indicated that they preferred this environment. The Web Page Design course, offered primarily to BA students, has remained a formal lecture presented in the university lecture halls. 2.3 Textbook and Resources The prescribed text for the Web Technolo gy course in 2001 was chosen because it provides a balance between design and technology principles and is suitable for use by BA students (Gottleber and Trainor 2000). This textbook offered very little support for the more advanced concepts covered in the second semester course. The book was retained for use by the Web Page Design course in 2002 with additional design guidance being provided during lectures.

A new textbook was prescribed for the Web Technology course in 2002 (Deitel, Deitel and Nieto 2002). This textbook offers improved technical support for students, but provides no design guidelines. Design guidelines were offered by means of specific lectures on web design principles. Topics such as information design, presentation design, interaction design, storyboarding techniques, graphic design principles, design heuristics, usability factors and usability evaluation methods were included in these lectures. For further discussion or illustration of topics, students are often referred to various websites and other documentation. The workshop approach to lectures facilitates this process. Students are referred to various sources during lectures, and are required to produce short group summaries and reports during the lecture, which can then be discussed. 2.4 Assessment Student assignments are assessed on a weekly basis. These assignments are packaged and presented as a single portfolio website at the end of the term. Emphasis is placed on user feedback and the iterative nature of design, and to this end, the portfolio undergoes two formal evaluations and a peer evaluation. It is expected of students to incorporate peer evaluation feedback and feedback from the first evaluation into their final portfolio. Theoretical and practical concepts are formally tested by means of a single semester test (written and practical) and a written exam. Typically, 60% of the written exam will test theory knowledge, and 40% will test practical knowledge by asking students to complete code and XHTML segments. Figure 1 contains a screenshot of an example of good portfolio design submitted by a student for the May 2002 portfolio assessment. It was selected as a good design because the information design, presentation design and interaction design was of a high standard. The screenshot does not, however, convey the dynamics of the website, which plays a vital role in determining the usability of the site. An example of a portfolio assessment form is included in the Appendix.

Figure 1 Screenshot of an Example Portfolio for WRW201

3. Course Evaluation Students attending courses offered by the Department of Computer Science and Information Systems at UPE are encouraged to evaluate these courses anonymously by completing a standard departmental evaluation questionnaire towards the end of each semester. This is done online using laboratory workstations or offline using paper-based forms. The questionnaire evaluates the lecturer’s presentation of the course, the course content, prescribed textbooks, class exercises, practicals, student assistants and laboratory facilities by means of statements that the students can rate on a 5-point Likert scale. A section of the questionnaire contains open-ended questions about how the course could be improved, whether the students would recommend the course to their friends, etc. The questionnaire data (including the open-ended question responses) is captured and analysed, after which consolidated reports on each course evaluated are generated. 3.1 Student Evaluation in 2001 As discussed previously, the only prerequisite for the Web Technology course in 2001 was a onesemester first-year course in End-user computing. Most of the students who registered were third-year BSc or BCom students with two years of Computer Science, while approximately twelve were second year BA students. Most of these had only a one-semester module in End-user Computing. A large number of students registered because the course had caught their imagination and was being offered for the first time in 2001. Both groups of students started the course with preconceptions about its level of difficulty. The course was also an elective for many students and so did not enjoy the full attention of students under academic pressure. The BA students exhibited lower levels of computer literacy and a lack of knowledge of programming principles compared to the BSc and BCom students (only two had one or two years of Computer Science). The emphasis of the course content tended to become more technical and less design-oriented as the course proceeded. These similarities and differences between the two groups exposed to the same course content, activities and pace, with a changing emphasis, resulted in the BA students, in particular, experiencing learning difficulties. A tutor volunteered to give extra classes to the students having problems. About half of the BA students cancelled the course or failed in spite of this intervention. The responses gathered during student evaluation of the course in 2001 (46 out of 164 students) were interesting. The students were reasonably satisfied with the lecturer’s presentation of the course, course content, practicals, student assistants and laboratories (most responses were rated at between 3 and 4 on the 5-point scale). They were very critical of the high course workload, the unsuitability of the textbook, the high practical workload and clarity, the task fit between the class work and the practicals, the large amount of work required in the practicals and the software available on the network (responses rated at 2 on the 5-point scale). No open-ended responses were recorded. In the first semester of 2001, 128 out of 164 students passed (78 %). Of those that passed, five were BA students. In the second semester, 72 out of 86 students passed (84 %). 3.2 Revised Course Structure In order to address and prevent the problems resulting from the diversity in student needs, computing knowledge and experience from recurring, it was decided to present two different courses in Web Technology from 2002 as described above. The revised Web Technology course has a prerequisite of at least first year Computer Science. This implies that the course serves the needs of Computer Science students. It teaches applied design

through practical guidance, is Internet programming-rich and is presented at a fast pace. prescribed textbook by (Deitel, Deitel et al. 2002) deals with Internet programming.

The

The Web Page Design course is intended for BA and BCom (Marketing) students. The prerequisite for this course is a six-month computer literacy course. The course emphasises website design, deemphasises programming and technical issues relative to the Web Technology course, and proceeds at a slower pace. The prescribed textbook by (Gottleber and Trainor 2000) deals with an introduction to HTML and JavaScript. It is envisaged that these changes will result in several improvements including increased pass rates and higher levels of student satisfaction. 3.3 Preliminary Evaluation for the First Semester of 2002 Some preliminary evaluation results are already available. In general, the standard of the Web Technology portfolios seems to be higher in 2002 than in 2001. This can be ascribed to the emphasis on applied design through practical guidance. Students appear to have mastered the technical competencies required from them, but the quality of student designs can still improve. The responses gathered during student evaluation (32 out of 56 students) suggest that the students are generally satisfied with the course. Of some significance was the fact that student ratings for the perceived value of their textbook increased from 2001 to 2002. Another marked improvement has been the perception of the students regarding the task fit between the practical assignments and the lectures. This may be ascribed to the different mode of lecture presentation (laboratory presentation). Although students feel that the workload required is too high for the level of the course, they are more comfortable with this issue than the 2001 cohort. Students state that they derive a high level of creative satisfaction from the course. It was found that many students go beyond what is expected of them for assignments, and that this process must be managed because it impacts on the perceived time demands of the course. Students often collaborate, and peer learning and independent study was encouraged. A number of students indicated that they would like more guidance and concrete examples that relate directly to practical assignments. In the semester test, students performed better in the practical sections than in the theory-based sections. This can be ascribed to the fact that students perceive the subject to be a ‘practical’ subject, and are less enthusiastic about theory. Comments made in the course evaluation confirmed this. The initial enrolment of 23 students in Web Page Design has decreased to 18, which is an acceptable attrition. The students coded all websites directly in HTML to give them a firm grounding in the fundamentals, and did not use web editors or authoring tools in the first semester. Students worked enthusiastically, generally in small groups, during and outside practical times in the computer laboratories. The students created original graphic elements for their websites rather than using clip art. The websites that they created were generally well designed and usable and students were able to account for the design decisions that they made. The work seen during the portfolio evaluation in May 2002 was of a good standard. All students obtained Duly Performed certificates for the course. The responses gathered during student evaluation (10 out of 18 students), suggest that the students are very satisfied with the lecturer, course, practicals, student assistants and laboratories (most responses were rated at between 4 and 5 on the 5-point scale). The open-ended responses were positive. It appears that giving the BA students a customised course has had the desired effect. The questionnaire used has not been statistically validated, and therefore the results obtained must be treated with circumspection. Nevertheless, they do provide a useful perspective on student attitudes towards and experience of the courses.

4. Future Research Although the new textbook for the Web Technology course provides additional technical support for Internet Programming (see 2.3), it does not address web design concepts adequately. It was thus decided to develop a computer-based tutorial to teach web page design to supplement both this course and the Web Page Design course. This tutorial is currently being developed by an honours student in the Department of Computer Science & Information Systems at UPE using Macromedia Authorware. This tutorial will provide students with an opportunity to improve their knowledge of basic web design principles, to compare good and bad examples and to practise applying the principles. The tutorial will be web-based so that students can use the Internet to access the learning material and gain experience from working in a browser environment.

5. Conclusions The Web Te chnology and Web Page Design courses developed at UPE are unique in the South African context in that they effectively integrate web design principles with web technology. Several South African universities, including Rhodes, UNISA and the University of the Orange Free State, offer modules on the Internet and Web Design, but the topics covered appear to focus mainly on technology issues. The UPE courses provide the students with an in-depth introduction to the issues involved in developing usable web sites. The use of student portfolios as a means of active learning implies that the students get practice with actual web design and implementation issues and allows for continuous assessment. The original Web Technology course offered in 2001 was modified in 2002 to meet student needs and preliminary results obtained are very promising.

6. References CATO, J. (2001): User-Centered Web Design. Pearson Education. Addison-Wesley. DEITEL, H.M., DEITEL, P.J. and NIETO, T.R. (2002): Internet and the World Wide Web: How to Program. Second Edn, Prentice-Hall, Inc. GOTTLEBER, T.T. and TRAINOR, T.N. (2000): More Excellent HTML with an Introduction to JavaScript. Computer Series. Irwin Mc-Graw Hill. LOWE, D. and HALL, W. (1999): Hypermedia & the Web: An Engineering Approach. John Wiley & Sons. NIELSEN, J. (2000): Designing Web Usability. Indianapolis, New Riders Publishing. NIELSEN, J., COYNE, K.P. and TAHIR, M. (2001): Make It Usable. PC Magazine.January 31.

Appendix: Assessment Form for the WRW201 Portfolio WRW201 Portfolio Evaluation Graduate Recruitment Agency Website Student name

1 1.1

1.2

1.3

1.4

2 2.1

2.2

2.3

Student Number

Evaluator Name

Functionality: Submit Your CV • Article easy to find • Look and Feel of form is consistent with that of whole portfolio View Successful Placements by the Agency: § Article is easy to find § When mouse moves over the name of a candidate, the picture is updated. The row colour changes to indicate which row is currently highlighted. Calculation of Potential Earning Income (may be integrated with CV Submission form) § When any of the ‘Computer Skills’ check boxes, or the Level of Education is updated, the potential earning income of the candidate is displayed. § The updated figure is displayed in a prominent and meaningful place. § It is clear to the user what this figure represents, and what the purpose of the page is. View Word Game Page displays randomly generated sentences with computer-related content. Web Site Design Information Design • Message of site, and target audience is clear • Information is structured effectively • Page headings clarify the function of each page • Names of hyperlinks match page names Interaction Design (Web Site Navigation) • Site is clearly structured and all hyperlinks are valid • Primary information of each page is accessible without scrolling (Sample CV and CV submission forms will involve scrolling) • Navigation structure is consistent on all pages • Home page is accessible from all pages Presentation Design 1. Colour scheme (use of contrast; well chosen colours) 2. 3.

3

Date: Total [50]:

Information is easy to read, font size neither too large or too small A distinct corporate site identity was achieved

Overall Impression • Professional looking, well-maintained site • Good use of language. Low incidence of spelling errors, link errors, JavaScript errors or other inconsistencies

29 May 2002 Evaluator Signature:

Poor 0 1

2

3

Excellent 4 5

Poor 0 1

2

3

Excellent 4 5

Poor 0 1

2

3

Excellent 4 5

Poor 0 1

2

3

Excellent 4 5

Poor 0 1

2

3

Excellent 4 5

Poor 0 1

2

3

Excellent 4 5

2

3

Poor 0 1 Poor 0 1 Poor 0 1

Poor 0 1

2

Excellent 4 5 Excellent 3 4 5 Excellent 3 4 5

2

3

2

Excellent 4 5