Download Integrating Design Principles into a Web Technology Course

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 Technology 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 Technology 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
Date:
Total [50]:
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
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
Evaluator Name
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