Title Graphical Web-Interface with Human-Interface Objects for Databases Subtitle Principle

School of Mathematics and Systems EngineeringReports from MSI - Rapporter från MSI”Graphical Web-Interface with Human-Interface Objects for Databases”Principles for a generic moduleJohannes EckerdalJuni 2001 MSI Report 01069Växjö Universi ty ISSN 1650-2647SE-351 95 VÄXJÖISRN VXU/MSI/IV/E/--01069/--SEThesis summaryTitle: Graphical Web-Interface with Human-Interface Objects for DatabasesSubtitle: Principles for a generic moduleAuthor: Johannes EckerdalTutor: Lars-Eric LjungExaminer: Per FlensburgAbstract: Usability and functionality are fundamental when designing human-computer interfaces. The graphical user interfaces with use of metaphorical concepts –suchas use of human-interface objects – are today common in most applications. Abasic idea is for instance the one of direct manipulation; often manipulations oficons with a pointer. In most systems today we have a database as foundation, notat least when creating dynamic and powerful Internet sites. A problem with thismay be the usability issue of creating information visualisations and easymanipulation of the data.The aim of this thesis was to find principles of how to build a system for usingdirect manipulation of a database. The system is a web-interface where themetaphorical thinking of mapping between reality and the computer system i sessential. The principles also address the issue of reuse. The system may beplaced upon any database and can improve the usability and easiness, especiallyfor novice users.The result is nine principles and an example of how a system built upon these maylook like. There are also two instances of the system; an office map system and anInternet shop.Keywords: direct manipulation, usability, metaphor, human-interface objects, interactionAcknowledgementsThe past spring has been most interesting and evolving. I have had the opportunity of combining both theory and practice. I have been able work with issues that appeal to my heart and have hopefully come to a result that can be useful here and now and into the future.First of all, I would like to thank my wife for the patience and support during the months that this thesis has been in my mind 24-7. It has been a great time and lots of fun, but I guess that the work sometimes has had a too great impact on my social life. Thank you for putting up with me!I would also like to thank Sörman Information AB for having me. Thank you Jonas Nilsson for your tutorship, Andreas Thordin for making my days enjoyable, and Peter Nilsson for some great contributions. A special greeting goes to John Twisk for fruitful discussions, inspiration, and constructive critique.Thanks to Owen Evans for the linguistic examination and Tobias Andersson for the review of the frame of reference.Finally, I thank my tutor Lars-Eric Ljung for believing in me, Per Flensburg for examining my work, and the opponents for interesting and constructive objections.Contents1. Introduction (1)1.1. Research question (2)1.2. Methodological issues (2)1.2.1. Research methods (2)1.2.2. Selection of research method (4)2. Frame of reference (5)2.1. Human-Computer Interaction (HCI) (5)2.1.1. Definition of HCI (5)2.1.2. Usability (6)2.1.2.1. Main users and the need for usability (7)2.1.2.2. Usability and system acceptability (8)2.1.2.3. Measure and test usability (9)2.1.3. Cognition (10)2.1.4. Metaphors (12)2.1.5. User Interfaces (13)2.1.5.1. Graphical user interfaces (14)2.1.5.2. The use of icons (17)2.1.5.3. Interaction (17)2.1.5.4. Direct manipulation (19)2.1.5.5. Human-Interface Objects (21)2.1.5.6. Information Visualisation (24)2.2. Generality - Reusability (26)2.2.1. Generic modules (27)2.3. Databases and Web Technology (27)2.3.1. Multi-tier architecture (28)2.3.2. Interaction with databases via web-browsers (29)2.4. Possibilities of Web Browsers (30)2.4.1. Dynamical HTML (31)3. Principles for the system (33)3.1. Possible ways of usage (33)3.1.1. The Internet shop (33)3.1.2. The office location sy stem (33)3.1.3. The visual search tool (34)3.2. Examples of such systems (34)3.3. Identifying the principles (36)3.3.1. Use of images as metaphors (36)3.3.1.1. Principles (38)3.3.2. Positioning of human-interface objects (38)3.3.2.1. Principle (41)3.3.3. Direct manipulation of human-interface objects (42)3.3.3.1. Principles (44)3.3.4. Event-catchers (44)3.3.4.1. Events caught on objects (44)3.3.4.2. Events caught on areas (44)3.3.4.3. Events caught on background image (44)3.3.4.4. Principle (45)3.3.5. Validation and Event-handlers (45)3.3.5.1. Principle (46)3.3.6. Multi-tier architecture (46)3.3.6.1. Principle (48)3.3.7. Template-system (48)3.3.7.1. Principle (48)4. Building of the system (49)4.1. Analysis and design (49)4.2. Implementation (52)5. Instances of the system (55)5.1. Choice of instances (55)5.2. Case 1 – The office map system (55)5.2.1. Prerequisites, Analysis and Design (55)5.2.2. Implementation (59)5.3. Case 2 – The Internet shop (60)5.3.1. Prerequisites, Analysis and Design (60)5.3.2. Implementation (61)6. Discussion (63)6.1. Have we found the principles? (63)6.2. Is the system really generic? (65)6.3. Will the system improve usability? (65)6.4. Other possible ways of building (66)7. Conclusions (67)8. References (69)Appendix A (73)Example – JavaScript Positioning and Direct Manipulation (73)Example – JavaScript and Event catching (74)Appendix B (75)Document Type Definition for the System (75)Example of XML instance of the system DTD (76)Appendix C (77)Code example of the system (map.asp) (77)Code example of style sheet (map.css) (81)Code example of JavaScript file with event handling and validation (map.js) (82)Figures and TablesFigure 1 The building process, modified from Järvinen 1999 (3)Figure 2 Growth of digital computers and user issues (from Shackel 1989) (7)Figure 3 A model of the attributes of system acceptability (Nielsen 1993, p. 25) (8)Figure 4 Levels of an interactive system (Löwgren 1993, p.14) (9)Figure 5 ISO 9241 Metrics, as from Hart 1998 (10)Figure 6 Stage model of major human performance processes (Bailey 1989, p.93) (11)Figure 7 Dependent of your expectations, you perceive this as the letter B or the number 13 (11)Figure 8 The pre-cognitive-science view of the interface (as from Laurel 1998, p. 12) (14)Figure 9 The mental-models view (as from Laurel 1998, p.13) (14)Figure 10 Summary of the generations of computers and user interfaces (as from Nielsen 1996). (15)Figure 11 Example of menus in a WIMP system (16)Figure 12 Interaction cycle (Murray et al. 1998, p.430) (18)Figure 13 Advantages and disadvantages of the five primary interaction styles (from Shneiderman 1998, p.72) (19)Figure 14 Examples of direct manipulation (20)Figure 15 A simple model of icon processing (from Barker & Schaik 2000, p. 164) (21)Figure 16 The Object Action Interface (Shneiderman 1998, p. 62) (23)Figure 17 Tasks that need to be supported, when dealing with information visualisation (Shneiderman 1998, p. 524) (25)Figure 18 A simple example of a generic linked list (27)Figure 19 Overview of two- and three-tier architectures (Gartner 1997) (29)Figure 20 An example of a HTML document (30)Figure 21 The HTML-document is shown in a browser (30)Figure 22 Example of direct manipulation (Appendix A: Example – JavaScript Positioning and Direct Manipulation) (31)Figure 23 The Blair Witch Project Store (Artisan Entertainment 2001) (34)Figure 24 The Process of Dragging and Dropping an Annotation on a Photo (Kang & Shneiderman 2000) (35)Figure 25 Dynamic HTML map (Phillips & Rodden, 2001) (35)Figure 26 Use of office map as metaphor (37)Figure 27 Use of image of room with table and chairs as metaphor (image from Sundelin 2000) (37)Figure 28 Use of geographic profile as metaphor (image from Vätternrundan 2001) (38)Figure 29 The value of an object is determined by its position (39)Figure 30 Object positioning on the office map (39)Figure 31 Object positioning on the geographical profile (image from Vätternrundan 2001) (40)Figure 32 Office map showing some areas and objects (41)Figure 33 Overview of positioning of areas and objects (41)Figure 34 Example of direct manipulation (42)Figure 35 The Internet shop system with areas (43)Figure 36 Office map with areas (43)Figure 37 Validation before event handler (45)Figure 38 Event handler before validation (45)Figure 39 Validation both before and after event handling (45)Figure 40 Validation in two steps before event handling (45)Figure 41 Multi-tier architecture with bridge to get a generic system (46)Figure 42 Multi-tier architecture (as in Figure 19 from Gartner 1997) (47)Figure 43 Overview of the entire multi-tier system (47)Figure 44 The system in its context (48)Figure 45 The module, here referred as "The system" (as from Figure 44) (49)Figure 46 The items to present and information of these (49)Figure 47 Overview of what the presentation logic is to produce (50)Figure 48 Document layers of the presentation (50)Figure 49 Data Flow of the presentation logic for building the web page (51)Figure 50 Data Flow of "Write code for areas" (51)Figure 51 The event functions for each thing in the presentation (52)Figure 52 Functional model over the employee system with “our module” (56)Figure 53 Entity-Relationship diagram (57)Figure 54 Overview of the files that the system contains and their relationships (58)Figure 55 Window dump of the office map system (59)Figure 56 Entity-Relationship diagram of Internet shop (61)Figure 57 Overview of the files in the Internet shop system (61)Figure 58 The food department: dragging a grocery into the cart (62)Figure 59 The entrance and the tools department of the Internet shop (62)Note that figures without reference are made by the author.1. IntroductionUsability, functionality and effective interfaces are fundamental for well-working human-computer interacting. There are several principles proposed to be followed when designing and implementing interfaces both in traditional applications and in information/applications for the Internet. Published results in the research area are numerous and a lot of usability design guides are to be found, not at least on the web. Though, there is still a great lot to do in the area. This is shown by among other factors that the research area of human-computer interaction (often abbreviated HCI) is attracting more and more funding, journals, and researchers. This thesis is not another proposal of design principles, but a use of instant principles for a special area, namely the web-interface for databases.One significant of effective interfaces that we might see is the use of human-interface objects (Tognazzini, 1998). When developing graphical user interfaces (often abbreviated GUI) one models the real world on the screen. For example: if you want to delete a document, you simply drag it t o the trashcan. This and other use of symbols and metaphors is effective and used in most applications today. The design of communicative icons to use in metaphors has benefited a lot from the research field of cognitive science and symbolic/pictorial systems. It seems like HCI can be improved with the use of graphical notation and metaphors.Another significant ought to be the use of graphical tools to increase effectiveness. This is clearly seen in the development of programming tools. They have progressed from being text-editors, to automated text-editors and today there are tools with which developers do not need to use the formal syntax of the language. As a developer you just drag and drop windows, buttons and functions until you are satisfied with the result. This is partly to model the real world directly in your programming tool, but also increases the effectiveness of programming and reduces errors. Some would disagree with this saying that ”real” programmers still use text-editors and that we in s ome way lose control over the code with graphical tools. This might be true, but still most users of computers are not “real” programmers and instead of forcing the users into use of text-editors and poor interfaces our scope is to create well functioning, easy to use HCI tools.At the Internet today many web sites are dynamically generated. A database system with an application on top generates pages depending on the criteria of the client’s request, personalised pages, etc. It is also possible to develop pages with formulas where you, depending on permission, may manipulate the database. This is often used in Intranet solutions. But if we take an analogy from the development of programming tools, we might just say that the web-interface for databases is still like a text-editor or maybe an automated text-editor. If we continue the analogy, a natural development would be a graphical web-interface where entities in the database are shown on the screen and manipulated when clicking, dragging and dropping. For example: the employee is shown as a happy face in his/her office and when dragging him/her to the trashcan he/she is deleted from the database (i.e. fired). This ought to improve the users understanding and interacting with the database, through the web. The users then don’t need to master a formal database language (such as SQL in relational DBMS).What the future holds in hand is hard to predict, but we might identify possible ways of usage. We might also be able to find out the conceptual principles for such an interface. With the principles we could build a generic module for handling this graphical interface. If it is generic enough, the nature of the entities or attributes should not matter; it should just be to instantiate the system on top of any d atabase-system. Surely it is not possible to include every way of use in such a module, but there ought to be possible to build an interface module with principles for general functions. The events triggered are then caught and dealt with in underlying structures that are dependent of the particular context.11.1. Research questionThe discussion in the preceding part about the problem area leads us to a definition of the research question of this thesis, as following:Upon which principles can we build a generic system, for manipulating adatabase through a web-interface with graphical human-interface objects?The main interest is to identify the principles beyond the artefact, the web-interface. Hopefully one result will still be the artefact, but this will in some manner be dependent to one platform.1.2. Methodological issuesThe choice of research method is by the formulation of the research question the most important in a scientific research. The choice of method is the choice of scientific approach in order to solve the particular problem that is in hand. Backman (1998) writes that a well-detailed section about the research method is necessary in order to replicate and evaluate the research. These concepts are proper to demand of scientific work. Another researcher would then be able to replicate the method, hopefully with the same result.1.2.1. Research methodsThere are a great variety of different research methods and presumably there are several methods we may use. Flensburg (2000) states that the overall five scientific approaches are case and action studies, literature surveys, developing research and hypothesis testing.Case studies and action research are great when studying processes and changes. Patel & Davidson (1994) define it as a study of a small, well-limited group. It may also be an organisation or a situation. In this research the process or change are not in focus, but the principles of an artefact. Therefore we leave them without further reasoning.The literature survey is a method more appropriate in this particular research. As my research question proposes I am to find the principles beyond. In some manner all I am going to do is 1) a database-interface, 2) with graphical human-interface objects, 3) as a generic system. For all these areas there o ught to be a lot of literature and my contribution will then be the connection of these in order to find the principles. As a literature survey only, I should do a profound survey with a great deal of energy laid on evaluation of relevant documents, as proposed by Backman (1998).When examining the research question we find out that we shall build something (…can we build…). This building of an artefact should end up in a web-interface for manipulating a database. In the book by Järvinen (1999), the author proposes a constructive research approach that may be appropriate in this case. This constructive research approach is in my opinion similar to the developing research as proposed by Flensburg (2000). Järvinen says that the purpose of a constructive process is to move from an initial state to a desired state, the target state. This movement from the initial towards target state is the building process. The use of “towards” instead of “to” in the previous sentence is because the state we achieve when finished with the building process is the final state and this is not necessarily the same as the target state. The Figure 1 is slightly modified from Järvinen’s figures and shows the distinction between the target and final state. These may be more or less the same and that is one scope to find out in the evaluation part of the research.2Figure 1 The building process, modified from Järvinen 1999The initial state is mostly known and that is the starting point. Often one also knows the desired target state, at least at a contemporary view, e.g. how the built artefact would function. Though, this is not always the fact and the two alternatives Järvinen proposes are to first specify the target and then build or to specify parallel to the implementation during the building process.The target state would, with the research question in mind and in generally words, be a web-interface with graphical human-interface objects with which we could manipulate a database. The specification would then be appropriate to make before implementing. At the particular company within which I do my thesis, they have one ‘big wish’ with the work; they want a database with the locations of their employees and a graphical web-interface. The i n itial state is a database with the employee data and static images over the offices with the employee’s names written directly on the images. The desired state is a database with all information and a web-interface where the location of an employee dynamically is shown in a picture of an office. With easy drag and drop functionality the employees’ changes of locations can be performed. So far the constructive research approach seems applicable.The research question defined also says that it should be generic in order to be reusable. With reusable we should not only mean that certain parts (sub-functions, etc) are reusable. The module or system itself should be generic in order to function as an interface for manipulating any database, not dependent on being office-location-database or an Internet store. Of course we can state this in the specifications of the target state, but which metrics should we use? The evaluation of the final state against target and initial state should be based upon the specifications made at the initial work with the artefact. The company in this case has certain functionality that it needs, which could be used as metrics. The question of generality is then more or less left aside.Järvinen (1999) says that questions within the area of constructive research might be: “Can we build a certain artefact and how useful is a particular artefact?” These are questions that it should not take long to answer. It is relatively easy to build an artefact as described above in this section and I do not hesitate to say that, according to readings in HCI, it ought to be useful. Therefore the scope should not lie on this particular artefact but - as the problem definition states - on the principles and on generic (reusable) systems.Now we leave the constructive research approach for a while and look at the last research methods proposed by Flensburg (2000), the hypothesis testing approach. If our aim lies on the principles for this generic web-interface with human-interface objects, the building is no longer in focus. The principles are of major interest and these seem to belong to a wide area of theories. In an examination of the problem definition we might find key-words like generic, system, database, (web-)interface, graphics, and human-objects. To this list one could add reuse, HCI, interface designing, communication, metaphors, direct manipulation, and cognition among others. Our conclusion is that the research question seems to more or less adjoin, or overlap a lot of research fields.Based upon existing theories in areas of concern we might make our own hypothesis or theory. Patel & Davidson (1994) write that hypothesis testing approach prerequisites that we have enough knowledge in an area. From this area one then derives measurable assumptions about thereality. Their description of the hypothesis testing approach seems to fit our purpose, except for the detail that the assumptions should be about reality. Instead of creating and testing a hypothesis, maybe we should say that we create and evaluate a theory instead. Järvinen (1999) describes this research method and means that it is very suitable for exploratory investigations, i.e. when there is no prior knowledge of a part of reality or a phenomenon. Though, in our case there are prior knowledge, and the contribution of this thesis is a way of combining existing knowledge in a new way. Thus, as the hypothesis testing approach is described by Patel & Davidson (1994), the creating and evaluation of a hypothesis seems to fit our purpose the best.A possible way of working (method) would then be to read literature and articles, evaluate and study existing artefacts, and by this derive assumptions of which principles we would build our system on. If there are to be a hypothesis testing approach we also need to test the derived assumptions. If the object of study was a part of the reality we could empirically test it with studies of the reality. In this context it ought to mean that we have a number of principles that together form a hypothesis and in order to evaluate this it might be appropriate to build a system to test the principles upon. Mainly because of the claim for generality we then have to test it against at least two instances of applications. The complexity of the instances ought to differ a lot and in the search for the appropriate ones, it might be interesting to find out possible usefulness of such a system our principles shall contribute to.1.2.2. Selection of research methodWhen comparing the research methods (constructive research, theory creating and hypothesis testing) they all have their strengths and weaknesses, but the latter seems to have a slight advantage. The constructive research in some way fails when talking about the principles for a generic system. In a particular practical context this method might have been better. The constructive approach also in some way proposes that we have an initial state and are able to specify a desired state. If the desired state is the principles, then we cannot reach them with trying to build an artefact. The questions “Can we?” and “Is it useful?” are, as stated above, easy to answer, but do not scope within the research question. Therefore the hypothesis testing approach ought to be more appropriate.In the hypothesis testing approach, the building of an artefact is used just to test the principles, but the aim is still the principles as proposed by the research question. There are a lot of theories in bordering areas of research and when deriving assumptions from these we might find the desired principles.The first thing to do is to identify possible ways of usage. Without interesting ways of usage the results would seem to be rather worthless. Data acquisition method then should be document studies, e.g. articles and books in the research areas. Data and theories are collected and then structured in order to make general conclusions from it. Järvinen (1999) also proposes the study of physical artefacts that already exists. Information about existing solutions resides within the artefacts (prototypes) themselves, as Järvinen expresses himself. Functions and principles used in other artefacts can guide us in our search for the principles within our scope. Appropriate key words in order to find bordering research fields are HCI, GUI, usability, metaphors, databases and web technology, graphical presentation, and generality (reusability).When suitable theories are collected assumptions are derived and a hypothesis is stated. The hypothesis should be a set of proposed principles and this hypothesis is then tested with the building of a system based on those principles. Because of that the module is an interface to a database, it ought to be evaluated against such. The generality is tested against at least two ranges of usage identified in the above part about possible ways of usage.The conclusion then would be a series of principles and an example of a system built upon these principles.2. Frame of referenceIn this chapter the research areas - that more or less overlap or adjoin the research question of the thesis - are briefed. Interesting theories in the areas are treated and as a result we get a general overview of the area of concern. The research areas treated may be hard to distinguish from each other. This is not the purpose, but it is to m ake them fill in for each other in order to make the ‘bigger picture’ more complete. The frame of reference also functions as a summary of central concepts and definitions that will figure through this thesis.2.1. Human-Computer Interaction (HCI)As the name itself implies the study of human-computer interaction is a multidisciplinary research field, bringing together experts and researchers from areas like psychology, ergonomy, linguistics, organisational theory, sociology, computer science, and engineering. The common interest that brings them together is ways to develop more usable computer systems. As we will see there are several different approaches and views within the area and neither do all researchers agree with the previous definition of the common interest.The need for studies within HCI can be exemplified with the analogy of a standard office desk applied on the computer screen. If you spread a selected amount of your papers containing information on the desk, you would get an overview of the information. To view the same amount of information on the computer you would, according to Henderson & Card (in Lif 1998, pp. 2-3), approximately need 22 standard PC displays. Such examples tell us that there are a great deal of design decisions to make in order to enable usability and utility.Carlshamre (1994, pp. 11-12) mean that we can see HCI at a micro- and a macro-level. On a micro-level the relevant fields of study would be cognition, perception, sensory functions and motorics. From the field of computer science we get the development of more powerful interaction techniques. On a macro-level we are interested in the development and introduction of computer systems, and this is done as a collaborative work between system analysts, software engineers, psychologists, anthropologists, sociologists, etc. We may say that on the micro-level we focus upon the individual user and on the macro-level we try to imagine the ‘big picture’ and include the individual user along with the users organisation and the developers organisation. Researchers from all areas mentioned above contribute with their approach to the HCI field of study and it is difficult to capture and describe all relevant previous efforts done. This is also evident when searching for literature of the area; there are quite a number of published works available. Thus, as the main aim in this thesis is the principles for the interface and not the building process, the focus will be on the micro-level of HCI. Carlshamre gives us an example of issues focused in HCI on micro-level with the question “What characterizes a system … which is ‘good’ for the individual user?”. That example of question is what we can have in mind in the following.2.1.1. Definition of HCIIn the search for one widely accepted definition of the concept HCI, we soon realise that there is no such concept. Hewett et al (1992, p.5) proposes the following definition:“HCI is a discipline concerned with the design, evaluation and implementationof interactive computer systems for human use and with the study of mayorphenomena surrounding them.”Dix et al. (1993, p. Xiii) have the following definition:“HCI is, put simply, the study of people, computer technology and the waysthese influence each other. We study HCI to determine how we can make thiscomputer technology more usable by people.”。