Widened access and lifelong learning trends in modern education require that web-based Learning Environments be designed as student-centred education and support mechanisms. 

Many Virtual Learning Environments are encumbered by a steep learning curve detrimental to their full employment. Students with lower levels of computer literacy struggle particularly. 

This paper reports: 

1) the way in which the traditional Industrial design techniques are used to create virtual Graphical User Interfaces (GUIs) which can be used "instinctively" by students with lower levels of computer literacy; 

2) a case study of the design of a multi-media learning environment examines the ways in which mutually reinforcing learning methods can be utilised to place students at the centre of universities learning policies, allow efficient information storage and retrieval; and on 

3) the potential for future development of such systems

Steve Gill (7062860)

English

Loughborough University Institutional Repository

   This item was submitted to Loughborough’s Institutional Repository by the author and is made available under the following Creative Commons Licence conditions.      For the full text of this licence, please go to: http://creativecommons.org/licenses/by-nc-nd/2.5/  77IDATER 2000  Loughborough UniversityGillAn industrial designer’s approach to a virtual learningenvironmentSteve GillUniversity of Wales Institute, CardiffAbstractWidened access and lifelong learning trends in modern education require that web-basedLearning Environments be designed as student-centred education and support mechanisms.Many Virtual Learning Environments are encumbered by a steep learning curve detrimentalto their full employment. Students with lower levels of computer literacy struggle particularly.This paper reports:1 the way in which the traditional Industrial design techniques are used to create virtualGraphical User Interfaces (GUIs) which can be used “instinctively” by students with lowerlevels of computer literacy;2 a case study of the design of a multi-media learning environment examines the ways inwhich mutually reinforcing learning methods can be utilised to place students at the centreof universities learning policies, allow efficient information storage and retrieval; and on3 the potential for future development of such systems.Keywords: computer-supported design, designing & learning, ergonomics & design, industrialdesign, multi-media, product semanticsIntroductionRecent trends in post-Dearing highereducation towards lifelong, open and distancelearning require that web-based LearningEnvironments be designed as  student-centrededucation and support mechanisms. It followsthat the interface for such a system must bein tune with the needs of a wide range of userswith a range of abilities.Many Virtual Learning Environments (VLEs)are encumbered by a steep learning curvedetrimental to their full employment. Studentswith lower levels of computer literacy struggleparticularly.Since December last year, we in Cardiff havebeen involved in the design of a new VirtualLearning & Communication  Environment(VL&CE) for use by both staff and students.For a number of years, we have had access toexcellent on-line learning materials, databases,e-mail, staff web space etc.  With the possibleexception of e-mail, these are so far under-utilised.There are a number of excellent VLEs availablealready (such as the Nathan BoddingtonBuilding (University of Leeds 1997)).The Nathan Boddington model allowsstudents to work in seminar groups, sit testson the World Wide Web, belong to seminargroups, retrieve lecture notes, etc. It is a verysophisticated model and is utilised byacademics and students across the University.The Cardiff model aims to emulate thesefunctions, but we are also attempting to• create a social environment that connectsstaff and students with other parts of theuniversity;• harmonise the VL&CE with the real world78GillIDATER 2000  Loughborough Universityenvironment;• tackle the social aspects of learning;• make information retrievable by theindividuals with moderate to poor IT skills.This paper reports on:1 the way in which the traditional Industrialdesign techniques are used to create virtualGraphical User Interfaces (GUIs) which canbe used “instinctively” by students withlower levels of computer literacy;2 a case study of the design of a multi-medialearning environment examines the waysin which mutually reinforcing learningmethods can be utilised to place studentsat the centre of universities learningpolicies allow efficient information storageand retrieval; and on3 the potential for future development ofsuch systems.The relevance of traditional industrialdesign techniquesThree dimensional computer models are very“byte hungry”. Although research wasunderway in the early 1970s (Coward, l973) itwas not until the late 1980s that 3D CADbecame a practicality.The World Wide Web is limited too, in this casenot by the computers linked to it, but by itsconnections. Although there have been anumber of developments recently, web-basedmaterial is currently more or less limited totwo dimensions because of the data transferrate of a standard phone line (about 2.8 KPS).Given this and the fact that industrial designis a 3D discipline, how could an industrialdesigner’s core skills be useful?As any Industrial Designer will say, the mostefficient way of designing an effective, useable,Graphic User Interface (GUI) is to make itsuse instinctive to the user. One of the basicmethods of instinctive languages commonlyused in GUI design is the spatial analogy.Spatial analogies are an excellent example ofthe value of three-dimensional thinking forgood interface design.Example 1: A two-dimensional spaceanalogyAs the reader will know, modern computerkeyboards have a collection of buttons witharrows on them that allow the user to move acursor or an object. (See Figure 1)Figure 1 Computer keyboard direction keysThe keyboard sits horizontally on the desk sothat the arrow on the isolated key is pointingaway from the user. The user is looking at avertical screen and knows that although thearrow is pointing away from them, if it ispressed the selected item will move up thescreen. The user knows this will happenbecause this type of spatial analogy and itstransposition from horizontal to vertical is aconvention reinforced over time to becomeinstinctive.So, a forward pointing arrow also means up.Example 2: A three-dimensional spatialanalogyPicture the same keys displayed in Figure 1being used on the same computer keyboardas the controls of flight simulator software.We know from the two-dimensional spatialanalogy that the forward arrow can eithermean forward (in its horizontal mode) or up(in its vertical mode).If the user wished to make the aircraft godown, which key would they press?Surprisingly, the answer is the forward arrow.To explain why, we must move from two tothree dimensions.79IDATER 2000  Loughborough UniversityGillFigure 2 Three-dimensional representationof spaceFigure 3 Joystick spatial analogydial, when it is a lever, etc. This can becombined with a product grammar (Norman,1998) that allows combinations of controls andsigns to have further meaning.These two techniques alone are very powerfuland, properly utilised, will create productswith which the user will instantly feelcomfortable.Case study: The Design of a LearningEnvironment by an Industrial DesignerThe first problem the designer was faced withat the start of this project was how to makeusers want to interact with the environment.Five major principles were decided upon.1 The learning curve should be short and flat(instinctive)2 Information should be easily located andretrieved3 The system should be mutually reinforcingof real world information4 The system should be entertaining to use5 The system should facilitate bettercommunication across the University.Shortening the Learning CurveA spatial analogy familiar to both students andstaff needed to be created. That way, creatinga conceptual model of the virtual world in themind of the user would be easier because itused information they already held (makinguse of the environment instinctive).The bottom face of the cube in Figure 2represents the plane on which the keyboardresides and the back face represents the planeon which the screen resides. Let us look atthe scene from the left-hand face of the cube.This face has a diagram of an aircraft controlcolumn on it. When the forward arrow ispushed, the user’s mental model is of a controlcolumn being pushed in the way shown in theillustration. It moves forward and down.So why was the control column designed theway it was? This is another example of a spatialanalogy.The reason control columns work the way theydo is because they are an excellent exampleof a sophisticated three-dimensional spatialanalogy and are therefore used instinctively.(See Figure 3)If one were to place a model of the aircraft onthe pivot of the control column, the modelwould faithfully reproduce the spatialmovement of the aircraft. The mind employsthis mental model in order to control themachine. It is an exemplar of good three-dimensional design ergonomic practice.Another basic technique in the industrialdesigner’s armoury is product semantics.There is a long-standing “language ofproducts” that firmly indicates to a user whena control mechanism is a button, when it is a80GillIDATER 2000  Loughborough UniversityIt was determined that the University campusshould be used as the spatial model for theproject. Sites would equate to rooms, eachroom connected to the others in the samemanner as they were in the real world and eachgiven their real function. In this way userswould be able to get the information or personthey needed by simply asking themselveswhere they would look in the real-worldmodel.Although each web page was planned as a twodimensional representation from thebeginning, the user used a three dimensionalspatial analogy to “navigate” the environment.Another fundamental principle adopted wasto equate the Learning Environment to aproduct. The chance of a student reachinguniversity without having used a range ofconsumer products is slight. Consumerproduct semantics were used to help the userfeel more at ease in the virtual environment.Areas where text appears have been displayedas screens; buttons have been set intosurfaces; and instrumentation has beendesigned to reflect the appearance of realworld products.Other product icons are more symbolic. Oneexample is the doors. Each “room” has anumber of doors that allow the user to exit.These have been included because of their realworld connotation and appear as symbolswithin the symbolic (virtual) product.A campus map forms the opening page (seeFigure 4). A number of convenientconventions have been used. For instance, thereal scale of the campus has been entirelyabandoned. Building plans have beensimplified and re-sized and unused spacesreduced dramatically (a concept devised byHarry Beck, and used in his 1933 LondonUnderground map). Other conventions havebeen dropped too. The map does not alignwith the viewer’s viewpoint, nor is there anassociation between “Up” & “North”.The user navigates by pointing the mouse overthe areas where he or she expects to find rooms.When a room highlights, then he or she clicksthe mouse to travel there. The user can now“travel” where he or she wants. If for instancethey wanted to contact a member of staff, themost obvious place to do so would be that staffmember’s staff-room. (See Figure 5)Figure 4 Map page81IDATER 2000  Loughborough UniversityGillMaking the Environment enjoyable to useA good example of the effort expended oncreating an entertaining environment is thee-mail facility. If a user wishes to e-mailsomeone they move the mouse over thatperson’s image on the screen. The personturns to the user and asks to be e-mailed. Theuser presses the mouse button and an e-mailwindow will appear. The extra effort requiredto create the necessary rollovers and soundbytes, not to mention the extra webspaceoccupied by such functions, has to bebalanced with the undoubted pleasurestudents get from using a device with this levelof feedback. What may at first appear frivolousis in fact a calculated attempt to ensure theuser wants to use the product.In other areas too, deliberate sacrifices havebeen made in order to maintain anentertainment aspect. A “navigator” has beenprovided that resides in the lower left-handside of the screen. The most efficient mannerof presenting location information is probablya simple text message. A dial, however, waschosen because of its connotations of qualityand solidity and to add to the “quirkiness” ofthe environment.Figure 5 Virtual school staff roomLights illuminate, buttons depress and screenslight up with their messages, all adding to theillusion of a real, entertaining, three-dimensional product-based environment.Making the Environment mutuallyenforcingThe system is mutually reinforcing by being“face and space-based”. People can becontacted if any two of the following areknown:• Where they work• Their name• What they look like.Students and staff can learn to associate nameseither through real-world contact or throughthe virtual environment.Other mutual reinforcing principles includereal world “hints” such as the mimicry ofsymbols used in the real world in the virtualenvironment. A good example of one of theseis the “1” in the top right hand corner of the1st year studio “room” (see Figure 6). The samesymbol appears in the same position of thereal 1st year noticeboard. The presence of thisin conjunction with the drawing pins on thecorners of the notices is designed to act as a82GillIDATER 2000  Loughborough Universityclue to the space’s use.Information should be easily located andretrievedIn order to make it easy for users to retrieveinformation, the system allows webmasters tofilter information before it reaches the user.For example, in the real-world model, Design1st year students share their studio with the2nd year. Although they share the same physicalspace they are following an entirely differentprogramme of lectures, visits, etc. In order toremove extraneous information each studentis asked to logon before entering the VirtualEnvironment. This allows the system to givethem only the information relevant to them.A first year entering the Main studio (seeFigure 6) will see different information fromthat seen by a second year but will have allthe same services available to them.The same system allows for better access touseful web addresses, databases, searchengines, on-line learning materials etc.Facilitating better communicationThe last of the fundamental goals was thefacilitation of better communication betweenFigure 6 Virtual School 1st Year Studiostudents and academic staff, and providing avehicle to link various components of theuniversity.One of the difficulties associated with creatingpart-time courses in Industrial Design hasbeen that the studio environment is soingrained in the design culture(notwithstanding trials already reported(Barlowe, 1999)). This was the reason that ane-mail database has been included to allowstudents to contact one another. It was feltthat this would be one method by which part-time students might be able to stay in touchwith the year group, keeping involved sociallyand in a position to ask for help and advicefrom colleagues.Another area addressed was the services of theCampus nurse. The nurse was moved into anew building last year as part of a drive toprovide students with improved facilities andservice. It was noted that the number ofstudents making use of the service actuallydeclined when it was moved to a higher profilearea. The reason turned out to be thatstudents were embarrassed to be seen visitingthe nurse in this more public environment.83IDATER 2000  Loughborough UniversityGillThis was an area to be tackled (see Figure 7):the environment made getting in touch withthe nurse easily and virtually anonymous. Ifthe required advice could not be dispensedby e-mail then an appointment could be made,but the difficulty of the first approach wassoftened by the method in which it could bemade. Information about the services availableis also included in the “room” and this furtheraided the communication aspect.Future DevelopmentsThe project is presently in prototype form.Some of its present functions have beendetailed above; a number of developments areplanned.Analysis of the prototype has demonstratedthat the face-based geographical model workswell and a number of the planneddevelopments are based on this. There arealready projects underway at Universities,including Northumbria and Brunel (Nam andWright, 2000), looking into collaborativeworking using the Web. This work may have adirect bearing in this arena and it is one of theareas the team is keen to explore.Figure 7 Virtual school nurse’s roomSome of the limitations of the Web have beendetailed above, but software fromMacromedia, Apple and JulyNet Co areproviding methods with which to explore 3Dobjects from a number of 2D images. Thereare a number of uses we are currentlyinvestigating for this type of platform.References• Barlowe, C. (1999) ‘A case studyintroducing an innovative teaching andlearning environment for a tertiary levelgraphic design unit’. In Roberts, P.H. andNorman, E.W.L. (eds) IDATER 99,Department of Design and Technology,Loughborough University, 20-28.• Coward, T. (1973) ‘Computer modellingtechniques’. Department of DesignResearch, Royal College of Art, London.• Nam, T and Wright, D. (2000) ‘Observationsof team design process and the impact ofcollaborative technologies’. Proceedings ofCo-Designing, Coventry. (In press)• Norman, D. (1988) Design of everydaythings, MIT Press, London84GillIDATER 2000  Loughborough University• A Framework for Pedagogical Evaluation ofVirtual Learning Environments: http://www.jtap.ac.uk/reports/htm/jtap-041.html• The Nathan Boddington Building: http://w w w . t l s u . l e e d s . a c . u k /nathanbodington.html• Open folio: http://www.openfolio.com/

An industrial designer’s approach to a virtual learning environment

https://repository.lboro.ac.uk/articles/An_industrial_designer_s_approach_to_a_virtual_learning_environment/9342962/files/16951826.pdf

An industrial designer’s approach to a virtual learning environment

Abstract

Similar works

Full text

Available Versions

Loughborough University Institutional Repository