=Paper=
{{Paper
|id=None
|storemode=property
|title=Using Web Design Patterns to Support Students Web Engineering Group Projects: Lessons Learned
|pdfUrl=https://ceur-ws.org/Vol-607/paper5.pdf
|volume=Vol-607
}}
==Using Web Design Patterns to Support Students Web Engineering Group Projects: Lessons Learned==
https://ceur-ws.org/Vol-607/paper5.pdf
Using web design patterns to support students’ web
engineering group projects: Lessons learned
Susana Montero, Paloma Díaz and Ignacio Aedo
Laboratorio DEI. Computer Science Department
Universidad Carlos III de Madrid
{smontero,pdp,aedo}@inf.uc3m.es
Abstract. Design patterns have emerged as a means to capture design
knowledge and present design solutions to designers. In this paper, we present
our experience in introducing web design patterns within the context of an
undergraduate web engineering course to foster poorly designed system by
providing students with real and concrete examples of best practices they can
utilize and emulate. The lessons learned show design patterns have a great
potential for student-centered learning to support analysis and design of
websites with a usability focus. Moreover, students’ opinion was positive about
their experience building websites based on web design patterns.
Keywords: Design patterns, usability, undergraduate web engineering course,
lessons learned
1 Introduction
It is in 1996, when the Department of Computer Science of Universidad Carlos III of
Madrid, decided to create a course called “Hypermedia Systems: Design and
Evaluation” (HSDE) intended to teaching methods and techniques to design,
implement and evaluate hypermedia systems applying basic principles of software
engineering and HCI [1]. The course has been evolving over the years, mainly in the
topics related to Web Engineering and Information Architecture.
HSDE is one semester elective course for undergraduate students in the Technical
Engineering in Computer Science Degree, whose lasting period is about fifteen
weeks, three hours per week. Students who enroll in this course have not knowledge
about web development or skills in web programming. Moreover, the word
“usability” is completely unknown for them.
Despite design principles and usability heuristics were explained during the
lectures, students’ prototypes suffered from poor usability. Students had problems to
operationalize these theories and apply them to the analysis and design of specific
web applications.
One way to foster these issues is the use of design patterns. Design patterns have
emerged as a means to capture design knowledge and present design solutions to
designers in a number of different disciplines [2][3][4] [5]. A large part of the value
2 Susana Montero, Paloma Díaz and Ignacio Aedo
of design patterns is regarded to serve as a design aid to disseminate this knowledge
to novice designers.
Web design patterns integrate patterns from different design disciplines such as
information architecture, navigation, interaction and interface design. Their main
characteristics are: documented from a usability point of view; based on a series of
design principles and independent of technology [6].
Formulating design knowledge in the form of design patterns is considered to
provide more concrete design information not readily available in other forms of
design knowledge representation such as guidelines, principles or heuristics [7] [8].
Moreover, design patterns have been used for teaching human–computer interaction
(HCI) principles [9] and they appear as topic in the knowledge area “Web Systems
and Technologies. Information Architecture” in the Curriculum Guidelines for
Undergraduate Degree Programs in Information Technology [10].
In this paper, we present our experience in introducing web design patterns both in
the theoretical and practical syllabus to enhance the usability in the analysis as well as
in the design of students’ prototypes. Design patterns allowed us to bring concrete
examples of web engineering best practice into the classroom that students can utilize
and emulate for their projects.
The paper is divided into the following sections. In Section 2 we describe the
overview of the HSDE course and the web design pattern language used in the course.
In Section 3 we show the evolution of students’ projects before and after introducing
web design pattern in the course. Section 4 contains few concluding remarks about
lessons learned on this experience. Finally, section 5 draws some conclusions and
future work.
2 Course overview
The intent of this course is to provide students with a solid introduction into design
and evaluation of hypermedia applications, in particular web applications. After the
successful completion of this course, the students should be able to:
Understanding Web engineering as a multidisciplinary field and its development
philosophy;
Perform a website design project using established process models and best
practices;
Implement a prototype using web standards;
Apply sound design principles and best practices for usability to website
construction;
Perform usability testing pointing out the web application's strengths and
weaknesses.
Figure 1 shows the learning resources of the course including didactic units,
tutorials and assessment project. Didactic units are explained during theoretical
lectures to provide students with the fundamental issues of this discipline. They
include the following topics:
Overview of Web Engineering and hypermedia
Using web design patterns to support students’ web engineering group projects: Lessons
learned 3
Development process, with special stress on functionality and usability
requirements, as well as techniques for gathering requirements
Web design patterns as mechanism for reusing design knowledge
Web and user interface design, including information and navigation design
Usability evaluation process, including heuristic evaluation, reports of the results
of evaluations, and recommendations for solution to usability problems
Tutorials are related to technical issues of the subject fields, i.e. HTML, CSS, etc.
The underlying instructional philosophy is to allow students to acquire technical skills
whereas develop their class project with the aid of introductory didactic units about
web programming (XHTML, CSS, Javascript, XML and XSLT) and web based
resources.
The assessment is based on a team project. Project-based learning is the main
pedagogical method for this course and provides students with the opportunity to
tackle real world situations. The students form small groups (four members) in order
to construct a wireframe, following the development process that had been taught
during the lectures. There has been a variety of applications proposed by the students
as subjects for their projects, such as web sites for schools, universities, conferences,
etc. In the two last years, they are prototyping web sites related to e-government. The
submission of intermediate deliverables and documentation is required in order to
help and advice students along the project.
Didactic Units
T1:Hipermedia T4: Web and user interface T5: Usability Evaluation
T3 :Web design patterns
and Web Engineering design
Prototype with
T2: Development Process XML + XSLT
Prototype with Prototype
Design Patterns Requirements Usability
oral presentation analysis XHTML +CSS +
Javascript Evaluation
Assessment
Tutorials
P2:Javascript
P1:HTML + CSS
P0:Technologies for building P4:XML + XSLT
HypermediaApplications P3: Reusing web
components
Fig. 1. Course overview
2.1 Web design patterns
Web design patterns are one of the topics of our course and the cornerstone learning
resource during the analysis and design tasks of the team project. This assessment is
based on project-based learning that assumes that students are able to produce a final
product that represents knowledge integration. When immersed in project, learners
4 Susana Montero, Paloma Díaz and Ignacio Aedo
are required to access and apply related prior experiences. However novice learners,
as in our case, lack them at the beginning of the project to enable them to maximize
their learning. The following quote summarizes our motivation: “how can students
learn by doing what they do, when they do not know how to do what they have to do
to learn?” [11].
One way to foster this issue is to provide expert strategies by examples and a
context for application. Design patterns have emerged as a means to capture design
knowledge and present design solutions to designers. They explicitly focus on context
and tell the designer when, how and why the solution can be applied, and allow us to
bring concrete examples of web engineering best practice into the classroom that
students can utilize and emulate for their projects.
The reference book used in the course is “The Design of sites: Patterns for Creating
Winning Web Sites”, by Douglas K. van Duyne, James A. Landay, and Jason I. Hong
[6]. Its patterns can be applied to practically any Web site, and they include visual
references and examples. The macrostructure of the language is divided into a larger
and more complex number of major sections: (1) Genre, (2) Navigation framework,
(3) Homepage, (4) Writing and content management, (5) Trust and credibility, (6)
Basic ecommerce, (7) Advanced e-commerce, (8) Help to fulfill tasks, (9) Page
layout, (10) Search, (11) Facilitation of navigation, (12) Speeding up the site, (13)
Mobile web. Therefore, this pattern language provides us a wide range of web design
problems.
We introduced web design patterns in the course 2004-2005. They have been used
in two ways: for User Interface design in a wireframe (2004-2007) and for eliciting
requirements (2008-2010).
The way of studying the web design patterns has been evolving. Nowadays, the
schedule for this topic is: one hour lecture for introductory concepts; three hours for
working in group to prepare an oral presentation with websites examples in which
patterns have been applied in a right and wrong way.
In next section, we describe how the students’ projects have changed over the years
with the use of web design patterns.
3 The before and the after of introducing web design patterns
As mentioned in section 2 students have to develop a prototype using web standard
languages and applying the theoretical issues explained during the lectures.
Throughout all the didactic units, usability is a recurrent topic, such as concept, part
of a user-centered design, heuristics, and evaluation.
Although, at the end of the course students were able to carry out a usability
evaluation, they did not reflect in their projects the theories explained. Most of their
requirements specification was complete regarding functional and non-functional
issues related to the domain chosen, but not regarding usability issues. The most
usability requirement included was “this website is oriented for any kind of users” but
they didn’t deepen on what such a requirement implied.
Figure 2 shows a screenshot of a representative example of students’ prototype
before introducing patterns in the course. Analyzing the projects done during the
Using web design patterns to support students’ web engineering group projects: Lessons
learned 5
course 2003-2004, their main usability problems, even though they had lectures on
usability heuristics and guidelines, were:
1. Not sense of home page. They did not use particular conventions about homepage
layout, such as logo, sidebars, and navigation tools.
2. Non consistent navigation elements. For example, in Figure 2 the two red
rectangles mark the website index. They do not represent primary and secondary
navigation. Some entries are the same but they are organized in different way and
not use the same format.
3. Some navigation tools were missing, i.e. search box, breadcrumbs, or home link.
4. Pages were rather ugly because the color, image or texture choice for the
background affected the website’s aesthetic and readability. Moreover, they used
the blue color for the text and different fonts for each page.
Fig. 2. A Screenshot of a prototype from the course 2003-2004
During the course 2004-2005 we introduced the web design patterns in the book
The Design of Sites [6]. These patterns were presented in the lectures together with
the topic “user interface design” to complement the usability heuristics, and thus to
alleviate the aforementioned prototypes problems. During the practical sessions,
students had to navigate through the pattern language starting from a pattern
belonging to Pattern Group A. Site Genres, and to select those patterns that were
relevant for their own projects.
Figure 3 shows a representative example of students’ prototypes after introducing
design patterns in the course. Although students used more web design patterns, next
we relate what particular patterns helped them to deal with usability problems:
1. C1. HomePage Portal provided to the projects a strong sense of web portal.
(Problem 1)
2. D1. Page Templates showed students how to get a consistent layout and to
maintain consistent navigation throughout the site. (Problem 2)
6 Susana Montero, Paloma Díaz and Ignacio Aedo
3. B1. Multiples way to navigate showed the need of taking into account different
navigation tools such as J1.Search Action Module, K2. Navigation Bar, and K6
Location Bread Crumbs. (Problem 3)
In [6] they don’t deal with aesthetic problems issues (problem 4), but students’
projects improved in this issue as well, maybe motivated by the examples included to
illustrate the patterns.
Fig. 3. Screenshots of a prototype from the course 2004-2005 together with the
solution of the pattern B1. Multiples way to navigate
In order to compare the students’ projects in the courses 2003-2004 and 2004-2005
with respect to the web design patterns enumerated before we calculated their
percentage of application, as shown in Table 1. We found the quality of prototypes
increased considerably in the course 2004-2005, as well as they looked much more
professional. The column 2004-2005 shows a high percentage in the use of these
patterns and the usability issues students addressed. In contrast, the column 2003-
2004 shows a high lack of these patterns and even some projects did not always
maintain the navigation bar visible in all pages.
Table 1. Percentages of patterns application
Web design 2003-2004 2004-2005
patterns (8 groups) (8 groups)
C1HomePage 12% 100%
Portal
J1.Search Action 12% 50%
Module
Using web design patterns to support students’ web engineering group projects: Lessons
learned 7
K2. Navigation 71 % 100%
Bar
K6 Location Bread 0% 62%
Crumbs
D1. Page 12% 87%
Templates
However, requirements specification still lacked of usability requirements. From
course 2007-2008, we asked students they used design patterns as source for eliciting
requirements as well. In the requirements specification they had to record if a
particular requirement was the result of a pattern or if a particular pattern contributed
to resolve a requirement. Table 2 shows the variability of usability requirements in the
projects for the courses 2003-2004 and 2007-2008. In the course 2003-2004 students
just took into account how each type of user could move through the website and to
perform its tasks (navigability) or the application shall be easy for its users to begin
using (entry). In the course 2007-2008 there was more variability. Not only students
incorporated more usability requirements but functional requirements were focused
on usability issues as well. However, there was not a high percentage in the different
types of usability requirements. Moreover, accessibility requirements were suggested
by most of the requirements specification (B9 Site Accessibility).
Table 2.Percentages of types of usability requirements
Usability requirements Course 2003-2004 Course 2007-2008
(8 groups) (8 groups)
Ease to Learning 50% 50%
Ease to Entry 100% 62%
Ease of Use 0% 25%
Navigability 100% 100%
Error Minimization 0% 12 %
Understandability 0% 37%
Moreover, in this last course, we have also asked to students (45) their opinion
about the use of patterns as support both for user interface design and for eliciting
requirements during the elaboration of their projects. Students responded using a 5-
point Likert scale from 1(none) to 5 (a lot). Figure 4 shows their responses coded and
ranked. Students’ opinions of patterns were overall positive (useful for web design).
However, the students considered more useful the web design pattern for user
interface design than for eliciting requirements. Some students seemed not to share
the usefulness of patterns but no-one responded negatively.
In addition, some open questions were asked. All students would return to use the
patterns to tackle a new web project. Some of their comments related to why they
would do it were “websites are more attractive and usable“, “they help to organize site
navigation in an intuitive way”, “they are a good information source to start a new
project”, and “they deal with user’s needs”.
8 Susana Montero, Paloma Díaz and Ignacio Aedo
60%
Useful for web design
50% Useful for eliciting requirements
Useful for web user interface
40%
30%
20%
10%
0%
none a bit enough quite a lot a lot
Fig. 4. Student responses about the usefulness of patterns
4 Lessons learned
4.1 Web design patterns are a valuable learning resource
Our aim with the web design patterns is not to teach HCI principles or web design,
but students count on an extra information source to support the lack of experience in
web design.
Web design patterns have provided to students the best practices within web design
by lots of examples and explanations from an end-user perspective. This has led to:
Move from teacher-centered to learner-centered learning since students have
been proficient with the study, analysis and application of design patterns by
themselves.
Critical thinking to analyze, evaluate and report usability problems caused by
lack of design patterns in a particular website.
4.2 Web design patterns are beneficial for analysis and design activities
Although our students are not very enthusiastic about the use of patterns for eliciting
requirements we have found a considerable improvement in the writing of the
requirement specification due to design patterns provide students with a more
professional vocabulary for describing designs and solutions. The main benefits found
were:
Requirements are meaningful justified from the user’s point of view, e.g. forum
messages organized chronologically help user to distinguish between past and
present messages (B6 Chronological Organization)
Usability requirements are more tangible since students might record the pattern
or patterns that solve the requirement and so they are able to verify them and
trace them during the development.
Using web design patterns to support students’ web engineering group projects: Lessons
learned 9
With respect to the design of the prototype, students are aware of web design patterns
provide general solutions that can be applied to different site genres.
The result of the prototype is more professional. Before introducing design
patterns students’ projects were a set of HTML pages in which usability issues
were not addressed.
Web design patterns are standard solutions that appear in most web sites. If some
of them are missing students understand the website is less usable.
4.3 Patterns by themselves are not a requirement
When students started using web design patterns for eliciting requirements some
problems arise.
Pattern solutions are turned into functional requirements without no mention of
the specific project, e.g. Tab rows will be located on the top of the web page (K3
Tab Rows)
Typical usability requirements are turned into functional requirements just
because there is a pattern that deals with them, e.g. The homepage will be simple
and explain briefly the web site motivation (C2 Up-Front Value Proposition)
In order to avoid these misinterpretations during the eliciting requirement, face-to-
face tutorials become very important. Moreover, it could be considered the inclusion
of domain-specific design patterns for such as emergency [12] or learning [13]
management systems, to elicit more functional requirements.
5 Conclusions
Current studies indicate an absence of the consideration of usability requirements in
early phases of the development lifecycle, as well as other studies have pointed out a
wide range of benefits stemming from usability [14].
This means that we are preparing our graduates to be aware of usability issues at
the early stages of the software development above the current understanding of most
of the jobs they will be entering.
Web design patterns are reusable usability design knowledge that students can
apply in their future professional, independently if they have to operate with ad hoc or
mature development methods.
We have showed how web design patterns are used as support instructional
material during the elaboration of the students’ project. The most clear use for them is
during the web design stage to solve design problems such as make content navigable
or provide a consistent layout, but we have showed how students have used web
design pattern as well to capture functional usability requirements.
We are working on a deeper study over the result of students’ projects to find out if
there is any kind of correlation between the number of patterns used properly in the
requirement stage, in the prototype implementation and in the usability evaluation and
the overall usability of the prototype.
10 Susana Montero, Paloma Díaz and Ignacio Aedo
6 References
1. Díaz, P., Aedo, I.: A hypermedia course in Spanish informatics engineering. SIGCSE
Bulletin 29(4): 58-61 (1997)
2. Alexander, C., S. Ishikawa, and M. Silverstein, A pattern language : towns,
buildings,construction. 1977, New York: Oxford University Press. xliv, 1171.
3. Gamma, E., et al., Design Patterns: Elements of Reusable Object-Oriented
Software.Professional Computing Series. 1995, Reading Mass.: Addison-Wesley
Longman.
4. Rossi, G., Garrido, A. and Carvalho, S.: Design patterns for object-oriented
hypermedia applications. In: J.O. Coplien, J.M. Vlissides and N.L. Kerth, Editors,
Pattern languages of program design Vol. 2, pp. 177–191.Addison-Wesley, Berlin
(1995)
5. Borchers,J.: A pattern approach to interaction design, John Wiley and Sons Ltd., New
York (2001).
6. Duyne, D. K., Landay, J., and Hong, J. I. 2002 The Design of Sites: Patterns,
Principles, and Processes for Crafting a Customer-Centered Web Experience.
Addison-Wesley Longman Publishing Co., Inc.
7. Mahemoff, M. & Johnston, L. (1998). Pattern Languages for Usability: An
Investigation of Alternative Approaches.In Tanaka, J. (Ed.), Asia-Pacific Conference
on Human Computer Interaction. Los Alamitos, CA: IEEE Computer Society.
8. Van Welie, M., Van der Veer, G., & Eliens, A. (2000). Patterns as Tools for User
Interface Design. International Workshop on Tools for Working with Guidelines.
Biarrite, France.
9. Borchers, J. A. (2002). Teaching HCI design patterns: experience from two
uiniversity courses. Patterns in practice: A workshop for UI designers (at CHI 2002
international conference on human factors of computing systems). Minneapolis, MI.
10. Information Technology 2008, Curriculum Guidelines for Undergraduate Degree
Programs in Information Technology. ACM. Available at:
http://www.acm.org//education/curricula/IT2008%20Curriculum.pdf
11. Schanck, R., & Cleave, J. (1995). Natural learning, natural teaching: Changing
human memory. In H. Morowitz & J. Singer (Eds.), The mind, the brain, and
complex, adaptive systems (pp. 175-202). Reading, MA: Addison-Wesley.
12. Diaz, P., Acuña, P., Aedo, I. and Malizia, A. (2009): A Design Patterns Catalogue for
Web-based Emergency Management Systems", in proceedings of the VI Conference
of the Italian Chapter of AIS (ITAIS 2009).
13. Avgeriou, P., Papasalouros, A., Retalis, S., and Skordalakis E.(2003):
“Towards a Pattern Language for Learning Management Systems"
Educational Technology & Society, ISSN 1436-4522 , Volume 6,
Issue 2, pp. 11-24.
14. Juristo, N. 2009. Impact of Usability on Software Requirements and Design. In
Software Engineering: international Summer Schools, ISSSE 2006-2008, Salerno,
Italy, Revised Tutorial Lectures, A. Lucia and F. Ferrucci, Eds. LNCScience, vol.
5413. Springer-Verlag, Berlin, Heidelberg, 55-77.