Teaching web site design: science or art?

Journal of Further and Higher Education Vol. 29, No. 4, November 2005, pp. 331–340 Teaching web site design: science or art? Mark John Taylor*, Fausto Sainz Salces and Sandra Patricia Duffy Liverpool John Moores University, UK In this paper we discuss an approach to teaching web site design to higher education (HE) students that attempts to balance the artistic and scientific aspects of the web site design process. The design of IT systems has traditionally been viewed as a technical activity. However, unlike existing types of IT systems, an organization’s web site is available to the general public, and as such needs to be designed in a different manner, with far more emphasis on presentation and ease of use than existing types of IT systems. This is necessary since if the web site is not appealing to the user they can simply choose another web site, and potential customers or clients are lost. Hence, students need to be taught how to incorporate both artistic and scientific aspects when designing a web site. Introduction The term design can be interpreted in a variety of ways by different professions. To an engineer design might be interpreted as a mechanism for applying scientific principles to the development of an artefact in order to meet defined physical requirements. However, to a marketeer, design might be interpreted as the application of imagination and creative ability to the presentation of an artefact in order to meet loosely described requirements such as being appealing to those in the teenage age group. In IT, design has typically tended to be more biased towards the engineering view, especially in actual industrial/commercial practice (Pressman, 2000, pp. 6–10). However, the emergence of corporate web sites, where presentation can potentially be an equal (if not greater) factor in design compared to technical considerations (Lengel, 2002; Bocij et al., 2003) implies that when teaching web site design it is necessary to impart the creative, artistic aspects of design (as well as technical aspects) to computing students. Degree levels of study in art, media and design may need to potentially address the opposite situation, where students may often feel that they are learning creativity and skill-based competencies when such *Corresponding author. School of Computing and Mathematical Sciences, Liverpool John Moores University, Byrom Street, Liverpool L3 3AF, UK. Email: [email protected] ISSN 0309-877X (print)/ISSN 1469-9486 (online)/05/040331-10 # 2005 NATFHE DOI: 10.1080/03098770500353425 332 M. J. Taylor et al. courses aim to emphasize the value of theory and academic study in such activities (Grove-White, 2003). In this paper an approach to teaching both the ‘technical’ and ‘artistic’ aspects of web site design to second year undergraduate IT students is described and evaluated. Overall the teaching approach described in this paper attempts to engender in students a propensity to utilize both the scientific/engineering approach of breaking down requirements for a web site and assessing the feasibility of different means of addressing such requirements as well as the artistic creative approach of applying imagination to create different visual styles and themes that can support the more loosely described requirements such as being appealing to a particular age group, or representing a given level of formality. Although developing individual creativity and imagination are core aims of most art and design curricula (Steers, 2003), these would typically not be mentioned in the aims of most web design modules forming part of a UK computing degree course. Morrison and Johnston (2003) stated that systematic approaches to the development of creativity amongst higher education students appear to be limited, particularly in the UK. Teaching a ‘scientific’ approach to web site design might typically involve encouraging students to analyse the requirements for a given web site by breaking down the information and facilities to be provided by the web site, and by identifying different categories of web site users. The next step in a ‘scientific’ approach might be to generate a potential structure for a web site by incorporating the identified information and facilities into groups of web pages within the structure. The initial structure could then be further refined by breaking down the higher level web page groupings into individual web pages. The potential web site structure could then be refined by attempting to group the web site material into sections relevant to the different web site user groups identified. This could produce navigational paths through the web site that will be relevant to the different web site user groups. The design of individual web pages can be achieved by defining the links to and from a given web page, the purpose of the web page and the main functions of the web page. A quality assurance approach can be adopted in order to ensure that all the identified web site requirements are present in the web site structure and in the set of actual web pages, and that the navigational paths created for each identified web site user group match the set of web site requirements for each of the user groups. The ‘scientific’ approach can be useful for dealing with the purpose, structure and function of IT artefacts. However, the ‘scientific’ approach is rather weak with regard to addressing the more ephemeral issues of web site design such as presentation, style, appeal and ease of use. For such issues, a creative artistic approach can take a perfectly functional web site and turn it into something that that people will actually want to use and enjoy using. Thus, for example, computing students need to be taught that a given web page can be too crowded or too sparse; that some colour combinations will contrast well and others will not; that alignment and uniform spacing generally look more appealing than more random arrangements. From a scientific viewpoint such factors might typically be considered to be of little relevance, however to an average web site user they can drastically alter the Teaching web site design 333 user’s perception of a web site and the organization that it represents. Eisner (2003) stated that a feature of visual arts is that they can be used to communicate the way something feels, that is its emotional character. In the context of web design this would typically translate to the user’s feeling or emotion regarding a web site and what it represents to them. Literature review Ozcan and Akarun (2002) commented that in the teaching of interactive media design it is not easy to maintain a balance between distinct disciplines such as computer science and art. The worlds of science and engineering and that of art and design are two alien cultures. Davies and Worrall (2003) stated that in the context of design, information and communications technology (ICT) has the potential to support critical thinking (questioning working methods and procedures) and offers great potential in terms of new meanings, interpretations and practice. However, they commented that in UK higher education many courses lack application of ICT for design purposes. Carter (2003) commented that contrary to popular belief in the computing education community, visual design has much in common with programming since it is a highly iterative process based on constraints, and it can be evaluated objectively. Carter (2003) further commented that computing has become highly visual as interactive programs become increasingly prevalent, and that computer science students need to be taught the concepts of graphic design including basic visual elements, visual organization principles and how to use them in a web context. Lindgaard and Dudek (2002) stated that user interface designers need guidance on how best to balance aesthetics and efficiency factors in their designs. Lindgaard and Dudek (2002) commented that when users first encounter an artefact emotional responses are pre-attentive and precede cognitive ones. The implications for web design, they argue, are obvious and pervasive: if users decide that they dislike what they see in less than five milliseconds, then they may click onto the next web site even before they have taken in any information it offers. They further commented that for a web site, joy of use can be brought by aesthetics alone, even in the face of usability problems. Sutcliffe (2001) commented that web interfaces are causing many human computer interface researchers to rethink traditional views of web design, and that as well as utility and operational ease of use web site designers should rightly be concerned with aesthetic appeal and attracting users. Bloch (1995) takes this argument even further and states that in modern society aesthetic sensibilities are relevant to all products, regardless of their function. When given the choice between two products, equal in price and function, target consumers choose the one they consider to be more attractive. In terms of the actual mechanics of web page design from scientific and artistic perspectives, Vanderdonckt et al. (1994) describe the importance of placement strategies for effective visual design. This involves the aesthetic placement of interaction objects to achieve an effective visual design for a user interface. Lavie and Tractinsky (2004) describe the assessment of web site aesthetics from a classical 334 M. J. Taylor et al. aesthetic perspective that relates to orderly and clear design, and expressive aesthetics that relate to designers’ creativity and originality and the ability to break design conventions. Research results In order to illustrate and evaluate an approach to teaching web site design that incorporates both scientific and artistic perspectives the authors’ experiences in teaching web design to second year computing undergraduates shall be examined. The aims and objectives of the web design module taught were: to evaluate a variety of techniques for web site analysis and design, and to develop abilities in web development tools. The learning outcomes of the web design module were: 1. 2. 3. 4. 5. 6. Apply analysis techniques to determine the web site user groups. Apply analysis techniques to determine the data entities required for a web site, and their relationships. Apply design techniques to create web site structures that support the identified web site user groups, required data entities and their relationships, and provide appropriate web site navigational structures. Apply design techniques to define the purpose, operation and functionality of a given web page with a web site. Apply quality assurance approaches to ensure consistency, completeness and appropriateness of the web site designs produced. Use appropriate web development tools to develop web sites. Assessment strategy, science versus art in web site design The assessment strategy for the web design module described in this paper was to assess the student’s ability to apply the analysis and design techniques presented in the module. This involved presenting the students with a case study that outlined the requirements that a particular fictitious organization considered relevant to their needs. The students had to analyse the stated requirements (which were presented in an informal manner) representing the typical way in which web site requirements would be gathered via interviews with relevant organizational staff. The students then had to formalize the requirements by constructing diagrams that represented the web site requirements in a clearer and less ambiguous manner (something that natural language is notoriously weak at accomplishing). The next task in the assessment was to produce a structural design that took the formalized requirements and transformed them into a web site architecture and navigational structure that met the formalized requirements, was technically feasible and practical, and allowed appropriate ease of use by potential web site visitors. The visual style of the web site then had to be created by constructing an appropriate number of web page designs that defined the typical layout, presentation, style and functionality of individual web pages within the web site. A prototype web site that turned the analysis and design Teaching web site design 335 diagrams into physical reality was then created by the students using an appropriate web site development tool. This involved the selection of appropriate features provided by the web site development tool such as themes, cascading style sheets, forms, templates, and frames in order to physically implement the web page designs previously created. The assessment strategy was not meant to purely assess that the students could ‘do’, in this case use a set of defined web site development techniques and an appropriate web development software tool. It also needed to assess that the students could apply appropriate ‘technical’ and ‘artistic’ evaluation in order to use the aforementioned development techniques in an academic and professional manner. In order to achieve this, the assessment strategy involved the student discussing and justifying why they designed the web site the way that they did, from both a ‘technical’ and ‘artistic’ perspective. For example, the use of a cascading style sheet can provide ease of future maintenance from a technical perspective, since a large number of web pages can be changed simultaneously if an external style sheet is used (Hoffer et al., 2002). However, there is also an artistic justification for why a style sheet containing a given set of colours and text fonts and sizes is used. For example, a given web page might be aimed at children and therefore bright colours and large text size with rounded font should be used in order to appeal to such a target audience. Plankis (1998) stated the need to tailor the style of a web site to its anticipated audience. Costello et al. (1995) commented that visual design should attempt to attract attention to content, present the content in a manner that is easily understood, and make an impression on the viewer. In addition the students also had to explain how quality control was achieved in the design. From a technical perspective this involved ensuring that the different analysis and design diagrams corresponded, for example that a given user requirement identified in the analysis diagrams was represented in the web site structural design diagram, and was implemented in an appropriate web page layout design. From an artistic perspective this involved ensuring that appropriate uniformity was applied throughout the web site, or if this varied between different sections of the web site (for example brighter, clearer layouts for child users, more formal and more textual layouts for adult users) that uniformity occurred within the web site sections. In terms of the actual marking scheme for the coursework for the module described in this paper, there were no strict divisions between scientific and artistic aspects of the coursework, rather marks were awarded for fitness for purpose, which generally involved both scientific and artistic qualities. Teaching strategy, science versus art in web site design The teaching strategy for the web design module described in this paper involved attempting to engender in the students the need to combine the rigour of the scientist or engineer with the creativity of the artist in the web site design process. It is not difficult to encounter web sites that have clearly been technically well designed, but are completely bland and unappealing, and possibly difficult to use. 336 M. J. Taylor et al. On the other hand there are plenty of web sites that may be visually appealing, but lack any real substance in terms of useful content or functionality and therefore may be even less useful to the web surfer than the functional but bland web sites. In this paper the module topics taught will be described and the teaching strategy adopted in order to achieve a scientific/artistic balance for each topic will be explained. The first topic in the module concerned the web site development tool that would be used by the students. The reason for starting with the web site development tool was to allow the students to gain sufficient familiarity with the tool before they needed to use it for the prototype in the coursework. In this manner it was hoped that the students would concentrate on the design aspects of the coursework rather than on the purely technical ‘programming’ aspect of producing the prototype. Although it might appear that teaching students how to use a web site development tool might be a purely technical activity, the teaching sessions also emphasized the ‘artistic’ possibilities that the web development tool enabled. For example the web site development tool came with a pre-defined set of templates, themes, style sheets and framesets. However, any of these could be altered in a variety of ways, to create new colour schemes and layouts and text variations. However, as Grove-White (2003) discusses it is necessary to avoid falling into the viewpoint adopted by some lecturers in art, media and design education who often mystify the teaching and learning process by positioning themselves implicitly within the notion of the romantic artist—inspired and mystically creative, or through subjective judgments such as ‘I like it’ or ‘that works well’ with no supporting explanation. Artistic creativity in web site creation can be justified and assessed by adopting a ‘fit for purpose’ viewpoint, for example will the colour scheme and layout present an appropriate corporate or organizational identity for the web site, and will it appeal to the intended target audience for the web site. Carter (2003) stated that computer science students need to be taught how to visually communicate the services or functionality of a software system. The next topic was the use of web site user requirements diagrams to formally capture the natural language descriptions of web site requirements which typically constitute the start of any web site development project (Taylor et al., 2002). Typically this could be viewed as a purely scientific activity, since the purpose of the diagrams is to break down the requirements in an engineering fashion. However, the students needed to be aware that it is only possible to break requirements down if they can be understood. Hence, there can be even in this seemingly scientific activity of representing requirements, an artistic element of interpretation of requirements. For example those commissioning a web site may use a phrase such as ‘represent our corporate identity’ when specifying what they want on a web site. Clearly such a requirement is open to a fairly liberal amount of interpretation, and would typically involve the selection of appropriate colour schemes, fonts and layouts that in an artistic manner would reflect the products or services of the organization, the organization itself, or even the aspirations of its customers. Teaching web site design 337 Web site structural design diagrams were the next topic taught within the module described in this paper. These diagrams aimed to create a structure for the web site that would cater for the established formalized requirements. The main aim of this technique is to create a technically feasible structure/architecture for the web site. There is also a creative element to this activity though, as students need to be taught that it is necessary to harness appropriate creative ideas in order to develop possible web site structures in the first place. In addition imagination is required in order to contemplate the web site from a potential user’s perspective in order to appreciate what might be an appealing or usable structure for the web site. Another structural design technique taught was that of web site normalization. Web site normalization takes the established database design technique of data normalization and extends and adapts it to the normalization of web site material (Taylor et al., 2003). In this manner it is intended to produce web site structural designs that reduce duplication of web site material and identify the most appropriate navigational elements (or keys) that can be used to navigate through the web site material. Although normalization is principally a technical activity the students were encouraged to appreciate that it also involves an element of creative thinking in order to appreciate how to identify the key items in a mass of web site material from a web site user’s perspective. The next topic of web page design was clearly the activity that demanded the greatest fusion of both technical and artistic thinking by the student. From one perspective, web page design attempts to create a model that can satisfy the established functional requirements for that part of the web site. However, the development of colour schemes and layouts to establish the presentation of the web page is mostly artistic. This involves the use of creative imagination to generate ideas for the colour schemes, text appearance, animations, navigation icons, and images that constitute the web page. Although the students had already been taught the variations that the web site development tool could provide in terms of framesets, themes, style sheets and templates, they still needed to select, amend and combine these separate elements to produce an overall layout for a given web page or set of web pages within the web site. Although there are scientific aspects of web page layout, for example avoiding the use of certain colour combinations in order to avoid potential problems for colourblind users, or using high contrast colour variations to cater for partially sighted users, the majority of web page layout design still centres around the artistic aim of producing web pages that are ‘visually pleasing’, or representative of a particular ‘organizational identity’. In order to exemplify this idea the students were given the example of a technology transfer project undertaken by one of the authors (funded by the UK Department of Trade and Industry and a local organization) that involved the creation of a company intranet. The design of the intranet pages involved sectional colour coding. For the organization concerned whose activities included tourism, conference provision, environmental development and economic development along with the usual administrative functions of accounts, payroll, personnel, etc, an intranet colour palette was devised. Thus for example, tourism web pages included red page elements to identify that the user was in the tourism section of the intranet, whereas accounts and personnel included 338 M. J. Taylor et al. more ‘corporate’ blue page elements. Environmental intranet pages were colour coded green, and economic development pages brown. The idea was that the colour coding was meant to be representative of the type of activity that was shown on the given set of intranet pages within the different section of the intranet. For example, red was chosen for tourism, because in the UK red is typically regarded as a fun lively colour, whereas blue might typically be perceived as being a more formal business-like colour. The web page design topic overlapped with the following topic which concerned the issue of designing a web site for multiple web site user groups. From a technical perspective, different groups of web site users will typically have different functional requirements, and therefore web pages will need to differ dependant upon the requirements of the differing web site user groups. There is also an artistic element to multiple user group web site design, however, in that what may typically be stylistically appropriate or ‘pleasing’ to one group of web site users may not be so for another group. For example, the students were provided with a case study of a web site for a publishing company. The publishing company web site was meant to cater for children, adults and technical customers. One approach to web site design might be to adopt the same functionality and style for all types of users. However, it is easy to appreciate that what might be appealing and appropriate for a child might not be so for an adult or a technical customer and vice versa. Hence, students should consider variations in the needs of the web site users, for example children’s appreciation of bright colours and animation, compared to the more formal presentation and style that would be expected by technical customers. Students were also taught how this concept might apply to the web site text. Children can find a formal writing style unfriendly, uninteresting and potentially difficult to follow. However, how many technical customers would appreciate a writing style such as ‘Check out the cool new text book on quantum mechanics’ which teenage customers might find appealing. The last topic taught on the module was that of web site maintenance. In this topic the students were encouraged to appreciate the consequences of their design choices in the maintenance phase of a web site. Many estimates of the ratio of development to maintenance activity upon a given IT system point to at least 60% of the effort being spent upon maintenance (Pressman, 2000, p. 849). Therefore design choices that can potentially reduce the maintenance effort are clearly worthwhile. In this respect students were taught of the potential conflict of the influence of science and art on web site design. In general terms, the more functional and ‘scientific’ the web site, the easier maintenance is likely to be. The more that the web site caters for the artistic requirements of potential users, for example different visual styles for different types of web site user, the more complex and time consuming web site maintenance activities typically become. Evaluation In terms of evaluating the teaching and assessment strategy used for the web design module described in this paper, the approach adopted will be to discuss the work Teaching web site design 339 produced by the students over the two years that the module had run. In general for both years that the module ran it had a lower than average failure rate and slightly higher than average mean mark (compared to other modules for the same year group that were also assessed by coursework only). However, this could be explained by the fact that the module was an optional module, and therefore in the main only undertaken by students who were interested in the subject. In terms of the balance of scientific and artistic abilities displayed by the students in the work submitted, the majority appeared capable of mastering both the technical aspects of utilizing a web development software package and creating technical design documents, and the artistic aspects of creating appropriate visual styles and layouts for the prototype web site created as part of the coursework. The majority of the prototype web sites created for the fictitious case study organization were both technically functional and artistically appropriate for the intended user base. In addition, in terms of discussing the reasons for designing the prototype web site the way that they did, the vast majority of the students put forward both technical arguments such as the use of cascading style sheets for ease of future maintenance, as well as artistic viewpoints such as, for example, the use of a template including colour schemes and fonts suitable for children. In terms of teaching students both the scientific and artistic aspects of web site design, as the students were all on computing courses, the vast majority were fairly quickly capable of applying the scientific principles taught. However, some of the artistic aspects took longer for them to master. For example, in an early lecture the students were taught how to add colours to a web page using a web development tool. Initially, many of the students chose very glaring and child-like colour combinations during the laboratory session. However, as the importance of presentation and visual design for web sites was covered in further depth during subsequent lecture sessions, the students began to use more appropriate colour schemes, and were able to discuss their suitability for different types of web site users and different types of organizational web sites. Conclusions In this paper we have examined both the scientific and artistic aspects of web design that should be incorporated into teaching and assessment activities for web design modules in higher education courses. It appears that UK higher education computing courses may sometimes suffer from a lack of appreciation of the benefits of artistic creativity in the design process, and art, media and design courses may sometimes suffer from a lack of student appreciation of the benefits of science and theory in the design process. It is hoped that attempts to bridge this gap in terms of teaching and assessment practice in the field of web design as described in this paper may be beneficial to higher education course providers in both camps. With increasing amounts of commercial, educational and even social activities now involving the use of the Internet, web design is an area of growing importance that needs to be taught effectively to future generations of web designers. 340 M. J. Taylor et al. References Bocij, P., Chaffey, D., Greasley, A. & Hickie, S. (2003) Business information systems: technology development and management for the e-business (Harlow, Prentice Hall), 462–467. Bloch, P. (1995) Seeking the ideal form: product design and consumer response, Journal of Marketing, 59, 16–29. Carter, R. (2003) Teaching visual design principles for computer science students, Computer Science Education, 13(1), 67–90. Costello, J., Curtis, S., Joyce, E. & Singer, I. (1995) Interactive multimedia design: a visual approach, Journal of Interactive Instruction Development, 8(2), 3–7. Davies, T. & Worrall, P. (2003) Thinking out of the box: developments in specialist art and design teacher education and ICT, in: N. Addison & L. Burgess (Eds) Issues in art and design teaching (London, RoutledgeFalmer), 90–97. Eisner, E. (2003) Concerns and aspirations for qualitative research in the new millennium in art and design teaching, in: N. Addison & L. Burgess (Eds) Issues in art and design teaching (London, RoutledgeFalmer), 52–60. Grove-White, A. (2003) Theory and practice in photography: student’s understandings and approaches to learning, Active Learning in Higher Education, 4(1), 56–73. Hoffer, J., George, J. & Valacich, J. (2002) Modern systems analysis and design (Harlow, Prentice Hall), p. 542. Lavie, T. & Tractinsky, N. (2004) Assessing dimensions of perceived visual aesthetics of web sites, International Journal of Human Computer Studies, 60, 269–298. Lengel, J. (2002) Web design (London, Addison Wesley), 31–40. Lindgaard, G. & Dudek, C. (2002) User satisfaction, aesthetics and usability: beyond reductionism in usability, in: J. Hammond, T. Gross & J. Wesson (Eds) Gaining a competitive edge, IFIP World Computer Congress 2002 (Boston, Kluwer). Morrison, A. & Johnston, B. (2003) Personal creativity for entrepreneurship: teaching and learning strategies, Active Learning in Higher Education, 4(2), 145–158. Ozcan, O. & Akarun, L. (2002) Teaching interactive media design, International Journal of Technology and Design Education, 19, 161–171. Plankis, B. (1998) Implementing good web style, Techtrends, 43(3), 37–40. Pressman, R. (2000) Software engineering: a practitioners approach (London, McGraw Hill). Steers, J. (2003) Art and design in the UK: the theory gap, in: N. Addison & L. Burgess (Eds) Issues in art and design teaching (London, RoutledgeFalmer), 19–30. Sutcliffe, A. (2001) Heuristic evaluation of web site attractiveness and usability, in: C. Johnson (Ed.) Proceedings of workshop on the design, specification and verification of interactive systems (Glasgow, Glasgow University). Taylor, M., McWilliam, J., Wade, S. & Anacoura, W. (2002) A user centred web site design approach, in: R. Traunmuller (Ed.) Information systems: the e-business challenge (Boston, Kluwer), 171–184. Taylor, M., Wade, S. & England, D. (2003) Informing IT system web site design through normalization, Journal of Internet Research, 13(5), 342–355. Vanderdonckt, J., Ouedraogo, M. & Ygueitengar, B. (1994) A comparison of placement strategies for effective visual design: crafting interaction: styles, metaphors, modalities and agents, in: Proceedings of HCI Conference on People and Computers (Cambridge, Cambridge University Press), 125–143.