A Systems Methodology Approach to the Designing and Evaluation of Websites
Fotini Chatzistratidi1, Evangelos C. Papakitsos2, *, Argyro Mavridaki3
1West Attica Secondary Education Directorate, Hellenic Ministry of Education, Research and Religious Affairs, Elefsina, Greece
2Department of Education, School of Pedagogical and Technological Education, Iraklio Attikis, Greece
3Financial Office in EU Projects, European Commission, Brussels Area, Belgium
To cite this article:
Fotini Chatzistratidi, Evangelos C. Papakitsos, Argyro Mavridaki. A Systems Methodology Approach to the Designing and Evaluation of Websites. American Journal of Operations Management and Information Systems. Vol. 1, No. 1, 2016, pp. 7-16. doi: 10.11648/j.ajomis.20160101.12
Received: October 7, 2016; Accepted: October 20, 2016; Published: November 16, 2016
Abstract: The aim of this study is to improve the communicational efficiency of website designs. In this respect, any website is perceived as a means of communication between the interested user/visitor and the organization that operates it. By considering a website as a means of communication, the online information design and delivery of the operating organisation may become more efficient. Consequently, certain guidelines from the conceptual framework of Communication Theory should be also followed for the designing of a website, contrary to the established methodology based predominantly on IT techniques. The suggested method for this designing operation is the systemic one and especially Systems Methodology that combines concepts from both the disciplines of Information Systems and Communication, in a holistic manner. Moreover, the efficiency of information design and delivery can be also evaluated by using the same criteria as those of the design. In conclusion, the proposed herein approach is demonstrated through both the design and the evaluation of an experimental website for postgraduate studies, indicating as a result the applicability of the systemic methodology for this purpose.
Keywords: Information Systems, Website Design, Communication Theory, Systems Methodology
For the last two decades, Internet has become a main source for a major part of humans’ daily activities. Therefore web designers had to follow specific rules to increase the usability level of the websites and the number of satisfied users . Furthermore, the evolution of websites from a group of linked hypertext pages to complex and sizable web applications created a need for the existence of appropriate design methods. These models can be the base of well-organized and consistent webpages, where the user can easily be navigated. In addition, with the use of specific models, the constructors could develop integrated web applications with both dynamic and static content and provide maintainability and extensibility. Web design models provide the designers with the capability to consider separately the several aspects of a website. So the web designers construct the webpages facing separately themes like presentation, data, navigation or implementation. Web design methods are based on some data modeling techniques in order to model the content of a web site providing high functionality, proper navigation and presentation of information . Adaptation, personalization and localization of the webpages to the users’ needs, in order for them to find the required information easily, were also a new characteristic of designing web pages, during the recent years.
At the same time within the Social Sciences community, it is recognized that certain IT applications are part of the social communication techniques, just like the media and telecommunications . This recognition permits the use of concepts from the respective Communication Theory models to design effective websites. Although the interest in website-design methods (see section 2. Related Works) seems to focus on the user; however, the relevant guidelines address primarily the way of presenting information and not the rest of the relevant features. These features are the completeness, the validity, the timeliness, the clarity and the feasibility of information . Even in terms of presentation (information delivery), it has been further noted that the information provided suffers from redundancy and difficult navigation, issues that should enforce the design to be driven by the characteristics of the user (audience-driven) rather than the data (data-driven) of the application . These findings imply that the design of a website should be treated as a problem of communication between the user and the organization viewed through the website.
The present approach aims at improving the information delivery of websites. It is based on the adaptation of Systems Methodology to the design and consequently the evaluation of websites as means of communication, for dealing with the communicational deficiencies of the previous models. Standard Information Systems techniques have been modified according to Systems Methodology, in order to provide a unified conceptual tool that it can be more efficient in this respect. Thus, the knowledge of some basic concepts of Communication Theory is necessary. Yet, before we proceed to the presentation of some basic concepts of Communication Theory, the presentation of some related works will follow in the next section, referring to some of the existing website-design methods.
2. Related Works
The systematic development of website-design methods has begun at least since 1991 . A number of models for this scope have been developed . Virtual environments have been also introduced in webpages due to new technologies and the increasing speed of internet connections . The construction of this kind of applications is usually especially complex and time demanding and the web designers need to use a base to avoid errors and to make the applications’ adaptation easier . Consequently, a number of models for the construction of virtual context in Web have been developed. In this section, a presentation of some available web-design models will initially take place, roughly classified in data-driven and audience-driven ones. Other models for web adaptation and virtual reality applications will be briefly presented, as well, at the end of this section.
2.1. Data-Driven Models
In this class of web-design models, the information delivery is driven mainly by the characteristics of the data of the application. Six relevant models are presented next.
2.1.1. Hypermedia Design Model (HDM)
The primary elements of this model are the Entities, Components, Units and Perspectives . Entities are real world objects, connected with the application and with a specific or conceptual form. Entities consist of components which follow hierarchies. Components are a set of information that defines a part of an entity. Every Entity belongs to a specific type. There are also links (Structural or Application) that connect the Entities with other Entities or with components. The structural links indicate the hierarchy of the entities and the application links indicate the application domain relations. Moreover, perspectives are used for providing the necessary abstraction procedure, so as the components to be represented with several aspects. The way that a component can be described according to a specific perspective is called a Unit. A group of Entities and the links between them creates an HDM Schema. HDM supports a non-linear organization of information.
2.1.2. Object Oriented Hypermedia Design Method (OOHDM)
This method follows the Object Orientation principles, uses the UML data modeling technique and constitutes one of the first web design models. It sets the basis for future successors like SHDM . With this method, the presentation of complex information items is allowed, while at the same time intricate navigation procedures and user interface transformations can be achieved. It basically constitutes a hypermedia application that uses four steps, which are followed from the constructors in order to create a web application. These steps are the Domain Analysis, the Navigation Design, the Abstract Interface Design and the Implementation .
2.1.3. Relationship Management Methodology (RMM)
The current design model is based on the Relationship Management Data Model (RMDM) which is used for providing an abstraction of a part of the real world . RMDM consists of the domain primitives, which provide modeling of the information about the application domain, entity types that are used for the abstract representation of the objects of the real world, and associative relationships, which define the relationships between the entity types and resemble the relationships of a database model. Furthermore, RMM itself includes seven basic steps that are followed for designing a website. Those are: The E-R Design; the Slice Design; the Navigational Design; the Conversion Protocol; the User-interface Design; the Run-time behavior Design and finally the Construction and testing step. RMM methodology is mostly appropriate for websites with regular structure and also for websites that need often information updating.
2.1.4. Scenario-Based Object-Oriented Hypermedia Design Methodology (SOHDM)
With this method, the requirements for the hypermedia applications are identified from the early steps of systems development. Also both object-oriented and logical user views are used as navigational units. The SOHDM method consists of six phases: domain analysis, object modeling, view design, navigation design, implementation design, and construction . More specifically, during the domain analysis, the designer draws a context diagram in order to represent the system borders. Also the user’s requirements are identified by the use of scenarios. This use of scenarios leads to an object model which constitutes the second step of the method and refers to the framework of Class Responsibilities Collaboration. A Class Structure Diagram (CSD) is used for the representation of the relationships between the object classes. In the next phase, the view design phase, the extraction of object-oriented (OO) views from CRC cards takes place. Object-oriented views are navigational units in the navigation design. The navigation design step refers to the construction of the Access Structure Nodes (ASNs) and the navigational links. In this phase, the designer sets the access structure and defines the paths to OO views. Navigational links are depicted with the use of a navigational link matrix. During the implementation design phase, the users’ windows, the navigational flows from one page to another and the user interfaces (UIs) are defined. Lastly, during the construction phase, all the products of the previous step are transformed to physical elements and create a physical database schema.
2.1.5. Web Modelling Language (WebML)
This method is a model-driven design method that uses a visual language to define the content of a web application and to connect the different items of this content, setting with this way a specific structure for a web application [17,18]. The method uses ER-Model data design and contains the following steps: The Requirements Analysis that contains a description of the most important information about the application domain; the Data Design that produces the data model using the requirements specifications; the Hypertext Design that creates the hypertext model, which sets the navigation model; the Implementation step; the Testing and Evaluation step, which can lead to changes in every previous step, and finally the steps of Deployment, Maintenance and Evolution.
2.1.6. Semantic Hypermedia Design Method (SHDM)
This method can be considered as a model-driven design method and it is the successor of OOHDM model. Both models are conceptually similar but SHDM uses different data modeling techniques like RDF(S) and OWL [23,24]. The specific model consists of the following five steps: Requirements Gathering, Conceptual Design, Navigational Design, Abstract Interface Design and Implementation. The method considers the application "as a view of some conceptual ontology describing a given problem domain" . Like OOHDM, the SHDM method keeps the separation between conceptual and navigation design, addressing so different concerns in Web applications. Conceptual modeling defines objects and behaviors within the web application and navigation design organizes the hyperspace, considering the preferences and tasks of users.
2.2. Audience-Driven Models
In this class of web-design models, the information delivery is driven mainly by the characteristics of the user of the application. Six relevant models are presented next.
2.2.1. Web Site Design Method (WSDM)
The current method is an audience-driven (user-centered) approach, focusing particularly on the preferences and the requirements of the intended users by the classification of their different types [12-14]. The model uses ORM and CTT techniques for data modeling and is composed of three primary phases. The first phase of the above method is the User Modeling, which includes two sub-steps, the User Classification and the User class Description. This part of the method is directly connected with the user-centered aspect of the method and is based on the different activities that an organization should support. The next phase refers to the Conceptual Design which consists also of two main procedures: the Object Modeling and the Navigational Design. During the first procedure the user-classes are depicted with the use of conceptual schemes. With the Navigational Design a description is done of the way that different users will be navigated through the webpage. The final phase of the Implementation Design is the phase where the designer depicts the way that the website will look and, in case of a database existence, the logical design of this database. Thus, the Implementation phase of the website refers to the actual realization of the web application.
2.2.2. Object Oriented Hypermedia (OO-H)
This user-driven method is based on the object-oriented paradigm and provides to the web designer the ability to create web-based interfaces and also to connect these interfaces with already existing application logic items [15,16]. It is based on UML data modeling technique and consists of four different views that compose the total process. The first view is the domain view which defines the system requirements and the domain information construction, providing so the appropriate data model. The navigation view is used for the creation of navigation diagrams (NAD: Navigation Access Diagram) that are used by the users to access the required information. The next view (the presentation view) is a group of mapping steps which will play the role of the web interface. Finally, the personalization view provides the adaptation of the application to the particular needs and preferences of the user. This view is implemented with a personalization framework which enables the designer to construct web context following a specific personalization policy for a user or a group of users.
2.2.3. UML-based Web Engineering (UWE)
The UWE method [19,20] is an object-oriented and systematic approach that provides personalization and adaptation of the applications to the users. It uses UML (Unified Modeling Language) as a standard notation and a method that is composed of both analysis and design models, which use UML packages for their implementation. More specifically, UML is used for the description of the functional requirements, which are expressed as a domain model, the form of a class diagram and constitutes the use-cases phase. A conceptual model is generated next, based on the previous use-case, which then is used for the design of the navigation model. This model refers to the objects that can be accessed during navigation (navigation space model) and the way that the user can reach the required objects through the application (structure model). Moreover, a presentation model is connected with the navigation structure model and follows both static and dynamic perspectives. For the static part of this phase, a presentation-structure model and a model based on abstract user interface is used. For the dynamic part, the means are a presentation-flow model and UML sequence-and-state diagrams. The next model (the adaptation model) includes a reference model that provides adaptation and personalization (Dexter reference model). UWE manages adaptation using information about the user behavior and a group of rules, which derive from this behavior or from the information of the user and domain models.
The Hera methodology [21,22] is a model-driven approach that uses the conceptual modeling. The model has two main layers: the data collection layer and the presentation generation layer. Data collection layer homogenize the application data that come from different sources and have different forms. The second layer, the presentation generation layer, creates the Web presentations, which are harmonized with the user and the selected browsers. The data collection layer is further separated to the conceptual layer that operates as an interface between the two main layers of Hera and the integration layer, which creates the proper mappings of the data from different sources. The presentation layer consists of the application layer which defines the navigation view over the data and the presentation layer which contains the presentational perspectives of the Web Information System that will create the implementation of the application, using an appropriate platform like HTML or WML. Hera provides also adaptive operation since there is an orthogonal layer (the adaptation layer), which selects the appropriate issues for this procedure. Furthermore, Hera uses four models to collect the information to be modeled. These are the Conceptual, the Integration, the Application and the Presentation Model.
2.2.5. Web-Based Portal Computer-Human Interface Guidelines
This is an important and useful Technical Report  that provides guidance for portal computer-human interfaces. The authors collected information from various standards and guidelines (including the Human Factors Design Standard) and combined them with examples and lessons learned through human factors experience, in order to form specific guidelines. Guidelines within this document are written in the form of "should" and "shall" statements. Topics covered include: page layout, text design, graphic design and accessibility standards. Although this document was originally written for a specific portal, most of the guidelines can be applied to websites, intranets, and other web-based applications. It is meant to be a "human-factors reference-tool used" that, when used in conjunction with an experienced human-factors professional, can improve the computer-human interface of portals and web-based applications.
2.2.6. Confrontational Pattern Design Method (CPD)
The method of CPD  is an interesting and different one, based on the integration of modern management methods and some of the best proven traditional solutions for creating web design patterns. It originates from a concern about more effective electronic commerce tools, which should be designed according to the concepts of Service Design and Agile Design methods. CPD method aims at: optimizing the investment in information services (and systems, in general); creating new projects of IT services that are based on the added value of the multicultural and global customers; realizing projects that minimize the exclusion from the realm of operating systems. Therefore, it is claimed that CPD deals with the disadvantages of current methods that "are not rooted in an economic or a wider praxeological context" and without building "theoretical knowledge in the form of models, procedures, and practices".
2.3. Personalization – Localization
The various studies about websites designing show that it is very important for the attraction of more users to a specific website, the adaptation of the website to a local community or a group of users. Localization and personalization are both significant advantages for websites and contain the adjustment of visual and graphical elements and the translation of the text content in order to provide the appropriate cultural environment for the users . For these specific adaptations, operations and user modeling, information such as the users’ preferences, their behavior and knowledge are collected to form a user model that can be used to provide the beneficial and attractive use of a website. For this model usually many applications share information for the users in order to extend the ability of the adaptation level of websites. For this purpose many mechanisms were developed. Among them are UserML and GUMO, which offer a common language and ontology for the user model communication. Another similar model is MUMS, which uses a database of reused ontologies, and GUC, which uses generality, expressiveness and strong inductive capabilities that is based on the Hera model . Hera-S can also support dynamic adaptation and personalization functions, using context maintenance of the user’s actions. Sesame is the framework with which Hera-S makes the connection between the content and the context data, creating a context model of the user . Other adaptation frameworks that are used mostly for mobile devices are the CARE properties (Complementarity, Assignment, Redundancy and Equivalence), the ISATINE framework and the Cameleon reference framework. CARE presents how modalities can be made up in a multimodal application. The ISATINE framework includes seven stages of adaptation, namely, the goals for user interface adaptation, the initiative for adaptation, the specification of adaptation, the application of adaptation, the transition with adaptation, the interpretation of adaptation, as well as the evaluation of adaptation. Finally, the Cameleon reference framework creates adaptation design and run-time phases, ignoring the particular implementation requirements .
2.4. Virtual Reality Models
Virtual reality applications have been also recently developed for The Web. VR applications are 3D worlds that contain 2D and 3D objects, often especially complex objects, which interact creating so different behaviors. For this dynamic and realistic depiction of the real world, classical conceptual modeling languages such as ER, ORM and UML are not adequate. New, more appropriate methods have been developed for this scope: VRID (Virtual Reality Interface Design); VEDS (Virtual Environment Development Structure); CLEVR (Concurrent and Level by Level Development of VR systems); the Ossa system; the I4D framework; the Rube methodology; Virtools; Icon; the Marigold toolset; Petrinets; InTml; UsiXML and VR-DeMo (Virtual Reality: Conceptual Descriptions and Models for the Realization of Virtual Environments) that are the most known models for VR applications [7,8].
3. Web-Design Discussion
Most website-design methods (see section 2. Related Works) focus on the technical part of the design, dealing rightfully with this issue as a formal software development process (e.g., see also: ). Indicative of this approach is the terminology noted in the descriptions of these methods: "object-oriented principles", "data modelling techniques", "conceptual design", "hypermedia design", "navigation design", etc. However, because the requirements of user-tailoring and communicational effectiveness have been recognized , a need arises for creating design methods that combine both software and communication standards. These standards can be used both as design tools and as quality criteria of evaluating websites, if they are included in a single developmental framework that includes concepts of Communication Theory from a social perspective, as well.
Communication, in social terms, can be defined as sharing linguistic and non-linguistic messages between acting subjects . People communicate because they are trying to understand the needs, views and perceptions of others, to influence their behaviour, to meet their own needs and desires, to evaluate the effect of their own behaviour on others and to improve their interpersonal relations . According to Lasswell , the communication process as a social event must answer the following questions:
[i] Who: a resource;
[ii] What: the message content;
[iii] To Whom: the message recipient;
[iv] Where: the context or social environment;
[v] How: communication or transmission channel, languages (codes);
[vi] Why: purpose or need;
[vii] Consequences: results (intentional or unintentional).
Therefore from a communicative point of view, these are the main criteria that should be also included in designing a website so that it can be effective in conveying the desired message. These along with the five previously mentioned ones (see section 1. Introduction):
[i] the completeness: nothing relevant should be missing;
[ii] the validity: accurate information from reliable sources;
[iii] the clarity: understandable message written in simple language;
[iv] the timeliness: updated information in time;
And the feasibility that is identical to [vi], eventually leave us with eleven discrete criteria ([i]-[xi]). Thus apart from the web-design tools, it is a substantial issue to perceive a website as a means of communication and include the above criteria in the development process.
4. Systems Methodology for Websites
For the purpose of designing communicatively effective websites and for determining criteria of quality for providing information online, the application of a general Information Systems technique is suggested in this work. It is called Organizational Method for Analyzing Systems (OMAS, see: [36,37]) and has evolved from previous information systems techniques by adopting and integrating principles and concepts of Communication Theory (see the next subsection). The systemic approach was followed, considering that the integration of different standards (software and communication) in a single operational framework can be best achieved through a holistic view of the website design process.
4.1. Systems Methodology Technique
OMAS is a method of Information Systems, being an evolution of SADT  and IDEFx series of techniques , which are well-established Information Systems analysis methods. Therefore, it is compatible with both the General Systems Model  and the methodology of Systems Inquiry [41,42], which is probably the most complete conceptual framework of systems thinking. This method incorporates the concepts of Communication Theory ([i]-[xi]) both in understanding a system and in its diagrammatic representation that inseparably accompanies the technique (Figure 1: solid arrows denote data-flow and dashed arrows denote any kind of influence).
Specifically for the scope of this work where a website is perceived as a system, it is defined through the answers to the (conventionally) seven journalist’s questions (in accordance with criteria [i]-[xi]) that refer to:
[i] Why: the purpose of the system (criterion [vi]);
[ii] What: the output of the system, including feedback (criteria [vii] & [x]);
[iii] Which: the input of the system, including resources needed and feedback (criteria [ii], [iii], [viii] & [ix]);
[iv] How: the guiding rules and conditions (criterion [v]);
[v] Who: the monitor who operates the system (criterion [i] directly and, in case of on-line feedback, criterion [iii] indirectly);
[vi] Where: the place/location and other spatial aspects of the system (criterion [iv]);
[vii] When: The temporal aspects of the system (criterion [xi]).
The structure of the system (Parts) is determined by the answers to the last two questions (Where-When), while the rest of the elements (Factors) determine its organization. The application of this method is characterized by flexibility and polymorphism in the definition of its elements, depending on the problem, and by recursive applicability at every successive level of analysis. For example, question Where may indeed refer to the context or social environment (criterion [iv]), which can be also more of a part of the guiding rules and conditions (How), but it may also refer to the website map and the navigation design (polymorphism).
OMAS has been used in many different applications, apart from classical software development , including various administration tasks [44,45], teaching how to write essays  and software documentation manuals , creating curricula [48-50] and developing extracurricular training , studying conflict management , etc. In this application, OMAS-III (the third improved version of the original one, see: ) was experimentally utilized for evaluating the design of a suggested website for an MSc programme. The suggested process can be also extended to the designing of a university’s portal in a more comprehensive manner, which has been an issue of consideration for the computing community (e.g., see: ).
4.2. An Experimental Application
A website was experimentally designed (What [vii]) as a postgraduate dissertation . The intended purpose of its design (Why [vi]) was to inform:
A. candidate postgraduate students (Who [iii]), who would be interested in enrolling, about the studies, curriculum, admission processes, application dates, fees, regulations, infrastructure details, etc. (Which [ii], Where [iv], How [v] & When [xi]);
B. attending postgraduate students (Who [iii]) about courses, scheduled lectures, seminars, laboratories, etc. (Which [ii], Where [iv], How [v] & When [xi]);
C. alumni section (Who [iii]) with feedback facility (What [vii]);
D. academic staff section (Who [i]) with relevant information (What [vii]).
The structure of the website (Figure 2) was designed according to the above initial specifications ([A]-[D]), most of them being gathered through questionnaires that were handed out to academic staff and students.
For every class of users, of required information and conditions, a relevant sector was implemented in the overall structure of the website, consisting of four hierarchical levels (Table 1). Every sector fulfills one or more design criteria, presented merely as an indication in the most-right column of Table 1, which is also an evaluation chart for the compliance of the sectors with the design specifications.
The most significant issue of the website navigation (Where) is implemented by the presence of the website structure (map), having the current sector marked, on the left-side of every window (Figure 2). Finally, the requirement of the website's operator ([i]) for feedback capability is implemented by a comment facility (Σχόλια) at the bottom of many windows that commenting makes sense (Figure 2).
|About||General Information||[ii] [vii] [ix] [x]|
|Master Description||[ii] [iii] [vi] [vii]|
|Program||[ii] [iii] [viii]|
|Alumni [C]||Alumni 1||Identification||[i] [iii]|
|Staff [D]||Status A||Professor 1||CV||[i]|
|Courses [B]||Course A||Evaluation||[v]|
4.3. Commentary on Evaluation
By examining the Criteria column of Table 1, the overall evaluation of the design can be conducted as to whether the website is structured according to the required specifications or not. For example, let’s assume that we would like to evaluate the adequacy of the spatial aspects (Where [iv]) of the website. Looking at the chart and seeking the presence of criterion [iv], it can be seen that it is present only at the last row of the chart, regarding the Website map. Thus, other forms of spatial aspects like the available relevant infrastructure concerning laboratories, lecture-rooms or other facilities are missing as information. Therefore, the design should be modified in order to deliver such information to the potential client (candidate postgraduate students) of the advertised organization.
The necessity of creating websites that are technically sound, communicatively attractive and adequately informative can be covered by incorporating communication criteria into their design specifications, through Information Systems methods. Such a method, briefly demonstrated in this paper, is OMAS-III that was applied for evaluating the experimental design of a website. OMAS-III is not suggested herein as a competitive method to the existing ones but rather as complementary, in an umbrella manner. Similar approaches do exist in the field of web content management, like MAA , although again from a computing point of view. Namely, starting the designing process with OMAS-III and depending on the factor in focus, other models can be applied respectively. For example, when the potential user of the website (Who [iii]) is studied, in order to create a more suitable output and feedback facility (What [vii] & [x]), these methods that are specialized in User-Modeling (e.g., OO-H or WSDM) can be locally and partially utilized. The authors hope that the continuous use of this approach may resolve any initial weaknesses and contribute to the effective website designing, in general.
The author would like to thank the reviewers for their comments and suggestions that improved the presentation of this article.