A Java-based Course in Human-Computer Interaction. Eileen Kraemer. The University of Georgia. Athens, GA interface.

Size: px

Start display at page:

Download "A Java-based Course in Human-Computer Interaction. Eileen Kraemer. The University of Georgia. Athens, GA interface."

Alisha Nelson
5 years ago
Views:

1 A Java-based Course in Human-Computer Interaction Eileen Kraemer Computer Science Department The University of Georgia Athens, GA Abstract The ACM/SIGCHI proposed curriculum for Human-Computer Interaction includes four types of HCI courses. The course described in this paper most closely ts the description of the CS1 course, User Interface Design and Development, focusing on the design, implementation, and evaluation of graphical user interfaces. Java has several features that make it a good choice for the implementation component of such a course. We describe the nature, goals, and content of the course, explain our reasons for choosing Java, and describe the features of Java that make it well-suited for a course in human-computer interaction. Keywords: Human-Computer Interaction, Java 1 Introduction Human-computer interaction (HCI) is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them[1]. The importance of courses addressing these concerns becomes apparent when one realizes that the user interface often represents more than half a system's lines of code. The ACM/SIGCHI proposed curriculum for Human-Computer Interaction[1] includes four types of HCI courses, two of which are computer science courses. The course described in this paper most closely ts the description of the CS1 course, User Interface Design and Development, in that it stresses practical software development concepts, focuses on how students can produce better user interfaces, and has a major project that requires students to design and implement a graphical user interface and to apply practical evaluation methods to that interface. Java serves as the basis for the implementation component of this course. Benets of using Java include the following: 1) Java is well-documented, widely used, architectureneutral, and freely available. 2) Java provides packages of high-level user interface components (AWT, Swing, etc.). 3) Java provides good support for the multi-threaded, eventbased style of programming associated with user interface development. 4) Java supports graphics, animation, and sound. 5) The increasing importance of the Internet and webbased programming make Java programming ability and user interface design experience marketable, practical skills that appeals to students. 6) Student projects can easily be placed on the Internet for viewing by the instructor, graders, classmates, and potential users. 7) Swing components have many features that support the usability concerns discussed in class including support for internationalization and localization, support for assistive technologies, a \pluggable" look and feel, and support for help \bubbles" (tool tips) and shortcut keys (mnemonics)[2]. The design component of the course includes a study of the range of human capabilities regarding visual perception, attention, memory, and motion. Emphasis is placed on designing for accessibility, so that the graphical user interfaces produced are easily usable by as broad an audience as possible. One barrier to accessibility stems from language and

2 cultural dierences. The language, format or meaning of attributes such as currency, dates, times, phone numbers, mailing addresses, units of measurement, colors, icons, sounds, and online help can vary with locale. Internationalization refers to the process of writing an application that takes into account the potential variation in cultures and languages. The process of customizing an application for a particular culture, language, or region is known as localization. Java provides support for internationalization and localization through layout managers and resource bundles. Layout managers control the size and location of the components in the application. Resource bundles store locale-specic data such as text, colors, graphics, fonts, and mnemonics and make applications easier to localize because they provide locale-specic data without changing the application source code. The Java 2 SDK provides formatting classes that can automatically format numbers, currencies, dates, and times for a specic locale. Also, a Collator class in the java.text package enables locale-sensitive string sorting. Visual impairments and other physical disabilities present another type of barrier to accessibility and usability. Again, resource bundles are useful in creating interfaces that meet the needs of these users. The placement of fonts and graphics in resource bundles can benet the visually impaired by providing a simple means for the substitution of larger fonts. Swing components also provide a means by which shortcut keys, called mnemonics, may be dened. Through these mnemonics, users may use the keyboard to access GUI components. The availability of these mnemonics can aid blind and low-vision users and users with physical disabilities. In addition, \power" users, those who are highly procient and frequent users of a particular program, often prefer to use the mnemonics because of the increases in speed of interaction that are possible. Braille screen readers can take also advantage of \accessiblename", \accessibledescription", and \labelfor" properties that may be dened for each GUI component. A tool, Ferret, can be executed to ensure that these properties have been dened. Other features of the Swing components that can be employed to enhance the usability of a graphical user interface are a \pluggable" look and feel, and \tool tips". The pluggable look and feel permits the look and feel of the program to be easily customized. In this way a single user interface can be developed to be executed on multiple platforms and on each platform the interface can adhere to the prevailing style, whether Windows, Macintosh, Motif, the Java-native Metal look and feel, or some userdened view. Tool tips are brief descriptions of the purpose of a GUI component. When the mouse is positioned over a component for a short time, a help bubble displaying the description pops up. Finally, a set of Java \Look and Feel" standards[2] has been dened, and adherence to these standards promotes both the usability of the user interface for the general population and the accessibility of the user interface for special populations. 2 Structure of the course This course introduces students to issues in the design, development, and evaluation of user interfaces for computer systems. Concepts in human factors, usability, and interface design are covered, and the eects of human capabilities and limitations on interaction with computer systems are studied. Students then apply these concepts to the design and implementation of graphical user interfaces. The course begins by dening and outlining the history of the eld of Human-Computer Interaction. The study of HCI concepts is motivated by describing productivity gains experienced when HCI techniques were employed and examining wellknown failures or disasters that occurred due in whole or in part to poor interface design. Ideally, the course would then proceed sequentially through the study of design, implementation, and evaluation. However, to allow sucient time for students to learn Java, create two substantial user interface projects, and

3 evaluate these and other interfaces, we devote the rst three weeks of the 15 week course to Java. Additional lectures on advanced aspects of Java are then interleaved throughout the latter portions of the course. Thus, after the initial survey of the eld of HCI, three weeks are spent on Java alone, covering the basics of the language, inheritance and polymorphism, basic and advanced graphics, event handling and graphical user interface programming, and exception handling. The course then focuses on the human-computer interaction aspects of the course, interspersed with periodic 'special topics' in Java including multithreading, le operations, networking, servlets, and database connectivity. The course project are described in the following subsections: 2.1 Project 1A: Hello, World Students create a web page, implement a simple \Hello, World" applet and place a link to the applet on their web page. A class web page contains links to each student's page. The purpose of this assignment is to ensure that students have correctly congured their programming and web-page environments, and can write and compile a simple applet and make it available through their web pages. Students enrolled in the course come from a variety of disciplines. Approximately 60% of the students are CS undergraduate or graduate students. Another 40% are graduate students from other scientic disciplines, whose programming experience may be less extensive than that of the CS majors. The ability to view the working applet from the web browser provides positive feedback for the students. 2.2 Project 1B: Prototype Paintbox Students create a \paintbox" application that adheres to a functional specication describing the operations that the user should be able to perform. The specication for this paintbox is intentionally loose, permitting the students to apply their own intuition to the design process. A multitude of designs result. While the students are working on the paintbox, class discussions focus on the evaluation component of the course. Students are introduced to a variety of evaluation methods ranging from simple observation of several users interacting with a graphical user interface or prototype through the use of metrics and timed tests in traditional experiments to the collection of user opinions through interviews and questionnaires. Students are asked to extend the JFrame class to create an application through which users may draw shapes (lines, rectangles, ovals, triangles, and polygons) in the user's choice of outline form or as solid objects, draw Freehand shapes, select a \current" drawing color, or select objects and then move, color, and delete these objects. In addition, students were asked to implement four additional features from a list including the selection and placement of images, the resizing of objects, moving objects to the front or back, more rened selection algorithms, rubberbanding, and a drawing mode that represents overlapping shapes explicitly (XOR mode). An example of a student paintbox program is seen in Figure 1. Through the implementation of the paintbox, students have the opportunity to apply and expand their newly acquired knowledge of Java, become familiar with the various graphical user interface components, understand and appropriately employ event handling techniques, and acquire experience with event-based programming and user interaction techniques. The use of an abstract Shape superclass for all of the shape subclasses enforces the notion of polymorphism, and the use of data structures such as linked lists or vectors are also employed. In addition, the project provides students with an opportunity to study layout and to apply usability principles and evaluation methodologies. A paintbox application is a good choice for this project because of the immediate, visual feedback. Students can easily see if they have correctly implemented the program. Further, the design of interactions for the paintbox seem as if they should be simple. However, many usability

4 problems present themselves and design tradeos between intuitive operation, consistency, and minimizing the number of steps required to perform the actions must be negotiated. Finally, the highly visual and interactive application is good for user studies. Student paintbox examples are then employed in classroom demonstrations of evaluation techniques, and critiqued regarding their usability characteristics. 2.3 Project 1C: Rened Paintbox After the rst version of the paintbox is complete, the students are then asked to apply the techniques they have learned to evaluate the usability of their own paintbox applications. Students perform informal usability experiments, report on the usability failures of the interface created, describe how these failures can be addressed, and then proceed to create an improved version of the paintbox. At the same time, the ability to load and save paintbox les is added to the program. In this way, students demonstrate that they are able to perform evaluations through which they identify usability problems. Presented with the reality of implementing the suggested changes, students again must evaluate the design and implementation tradeos involved in revising the application. 2.4 Project 2: Team Project Class lectures now shift to the processes of designing, prototyping, and implementing graphical user interfaces. Students form teams and select a group project from a list of projects generated by faculty and others with an interest in obtaining a graphical user interface for an existing program, or may propose a team project of their own. These team projects have a real \client" and students perform analyses of the target user group and the task to be performed. Students also develop paper and computer prototypes, dene usability criteria, and apply high-level models to the task they select. In previous versions of the course teams have created graphical user interfaces for gene-nding programs, population genetics simulations, network management tools, simulation design environments, network protocol test tools, nuclear reaction simulators, solute transport simulation experiments, a program for the creation of fractal images, the customer area for an online frame shop, and a crossword puzzle design tool. The goal of this assignment is to give students the opportunity to participate in the design, implementation, and evaluation of a substantial graphical user interface in a team setting. 2.5 Project 3: Evaluation This project focuses on the evaluation aspect of the course. Students are asked to apply evaluation techniques learned in class to evaluate web sites, phone interfaces, and the team projects of their classmates. The nal week of the course consists of project presentations by each of the teams and evaluations of those interfaces by the other class members. The purpose of this assignment is to give students practice in interface evaluation, subjective satisfaction measurement, and design. Through the described lectures and course projects students are exposed to the purpose and history of HCI, learn about models, theories and guidelines associated with the study and practice of graphical user interface design, and gain practical experience with design, implementation, and evaluation of graphical user interfaces. Java has been found to provide support for many features of graphical user interface design for usability. Materials related to this course may be found at cs4900.

5 Figure 1: User interface from a student's paintbox program.

6 References [1] ACM SIGCHI Curriculum Development Group Report. [2] Java Look and Feel Design Guidelines.

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 1 Quiz 3 1 I5 due next class Your mission in this exercise is to implement a very simple Java painting applet. The applet must support the following functions: Draw curves,