Using Low-Fidelity Prototyping to Teach the Basics of Interface Design Leah Schultz lschult@tarleton.edu Computer Information Systems, Tarleton State University Stephenville, TX United States Abstract Finding time to teach all of the skills needed to enter today’s job market can be a daunting task for instructors in computer information systems. Anytime an exercise can teach and reinforce multiple concepts from lecture, the more useful an exercise can be. One area in computer information systems that is many times overlooked in undergraduate education is the human factors or human-computer interaction field. Particularly with the increase in web based information systems, many firms are hiring specialists in user experience or interface design. However, the crunch to fit additional information about this topic into an already overflowing curriculum is difficult. This paper outlines an exercise of low-fidelity prototyping that introduces the idea of iterative prototyping while requiring students to employ some basic concepts of human-computer interaction. The exercise is hands on and requires little cost or preparation on the part of the instructor. Keywords: Paper prototyping, human-computer interaction, interface design, classroom exercise 1. INTRODUCTION AND LITERATURE REVIEW As many schools begin to study their curriculum in light of today’s technology needs, human-computer interactions courses are becoming less likely to be required in a college or university’s required core. Educators feel the need to focus on the objects and programs being delivered instead of the experience that users will have when using the product being delivered (mcCrickard, Fowler, & Chewar, 2005). Many schools resort to short discussions in systems analysis classes or management of information systems. Because these classes are so dense with information that must be delivered, finding an easy and effective way to teach these concepts is becoming increasingly difficult. Importance of HCI education Human computer education is defined in the ACM SIGCHI Curricula for Human-Computer Interaction as “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.” (ACM, 2008). The importance of HCI and interaction design is summarized as “knowing what the user wants.” (Cooper, Reimann, & Cronin, 2007) and is important because “armed with that knowledge, you can create better, more successful” products. As user centered design and the way people interact with computers becomes more pervasive in the technology field, particularly with the emphasis of user experiences in web design, companies are beginning to hire or consult with companies that offer expertise in this field. A field which has grown out of the human factors and ergonomics field is experiencing tremendous growth as companies compete to release usable and rich applications. One only needs to look at recent releases of Microsoft Office, which underwent major changes in the interface design and usability of the product. McCrickard, Fowler, and Chewar (2005) advocate inclusion of HCI in computer science curriculua to combat the decline in CS majors, in particular , women and minorities whose participation is on the decline in the field. The authors suggest that the principles of human-computer interaction should be intergrated “from the earliest stages of each curriculum through graduation—to provide a coherent, connected experience for students”. However, many schools who are under budget constraints and who have increased pressures for higher four-year graduation rates do not see where these principles can fit into a curriculum that focuses on the programming aspects of software development. Paper Prototyping Pros and Cons Paper prototyping, also known as low-fidelity prototyping is a process used in the development of user interfaces in many fields from auto design to web design to mobile device application development (Karat, et al, 2003; Nielsen, 1995; Sauer, et al, 2008; Kangas & Kinnunen, 2005; Lim, Pangam, Periyasami, & Aneja, 2006; De Sá & Carriço, 2006). The idea is to use inexpensive, non-labor intensive prototyping processes to evaluate possible design flaws and to garner feedback from potential users of the system. Proponents of paper prototyping estimate that 80% of all interface design problems can be discovered with low-fidelity prototyping. Paper prototyping, which became popular in the 1980’s as a development technique used by IBM in the design process, has become an accepted testing method in the design community . The reason many designers in computer and engineering fields have turned to paper prototyping is the low cost and quick return of feedback. The cost of the project, which can be done with items found at a local grocery store, can provide useful feedback on planned interfaces before any coding has begun. The iterative nature of prototype testing also lends itself to the quick and easy turn around. With paper prototyping, changes to the interface can be made almost immediately and tested with the same participants. Very little has been spent on building the prototype and technical bugs do not interfere with testing (Rettig, 1994). Because the interface development does not require technical skills, design team members or other stakeholders can also participate in the process (Sefelin, Tscheligi& Giller, 2003). Many developers have used low-fidelity prototypes earlier in the design process , saving higher-fidelity prototypes for testing when the product is further along in the production stages . Another positive about the paper prototyping exercise is its ability to allow designers to explore multiple possibilities in design and resolve macro-level issues in design that need to be decided early in the development process. (Bailey, Biehl, Cook, & Metcalf, 2008). The lost cost of materials and development time can be used to not only explore different ideas, but to eliminate unworkable ideas, and create buy-in amongst developers who may not have seen possibilities in certain ideas. Bailey, et. al (2008) also believe that participants are more likely to give substantive criticism of design because the rough nature of the design seems more informal. Paper prototyping is also very mobile due to its simplistic approach. Conducting user testing no longer has to be done in a lab and broader opinions can be gathered from different users if necessary. Hendry, Mackenzie, Kurth, Spielberg, and Larkin (2005) used paper prototypes to test the design of their system on sexual health care for young adults and disenfranchised populations. Having participants come to a lab to test for usability was difficult in this situation so the researchers simply took their paper prototype to the street and conducted the iterative process on the fly. Paper prototyping also has it detractors. Many researchers believe that paper prototyping does not give a realistic feel for the system and is therefore is not testing true interface design. Other researchers have found that low-fidelity prototyping is not very efficient with some test groups, particularly older users (Hawthorn, 2007). Some researchers have also stated that the abstractness of paper-prototyping and delay in reaction time in a paper based environment can also affect the success of the process (Lim, Pangam, Periyasami, & Aneja, 2006). Resarch shows that test subject prefer a computer-based prototype over the paper prototype (Sefelin, Tscheligi, & Giller, 2003) and interfaces that depend on multimedia interactions are hard to emulate using paper prototyping, many times requiring a hi-fidelity prototype (Nielsen, 1995). 2. PAPER PROTOTYPING EXERCISE IN THE CLASSROOM One of the advantages of conducting a paper prototyping exercise in class is the low level of expertise required by students. The skills needed to participate are skills such as cutting, pasting, and coloring are skills that are learned in kindergarten (Rettig, 1994). As a result this class can be conducted at almost any level of instruction in the computer information systems curriculum. From a preparation standpoint, there is also little effort required on the part of the instructor. The exercise, which was conducted over two class sessions of one hour and fifteen minutes each, begins with a mini-lecture presenting some of the basic concepts of interface design. In addition to the human-computer interaction information, students are also asked to read information about prototyping and its place in the development process. Soon after the lecture, students will begin implementing those concepts as they begin the exercise. The materials needed for the exercise include posterboard, construction or colored paper, index cards, post-it notes, tape, glue, markers, pens, rulers, etc. Each team is given a posterboard and the rest of the material is in a community area where students can take supplies as they are needed for their prototype. Once students are divided into teams they are given the prompt and work on their project for the remainder of the time and have a portion of the next class to put the finishing touches on their prototype. The instructions given to the student can be any interface design with the system requirements briefly described. The prompt used in the classes being described, required the students to design a touch screen interface for ordering food at a fast food restaurant. The exercise is based on exercises presented by Dr. Cathleen Norris at the University of North Texas. In addition to the written specifications of the system, students are familiar with the tasks to be completed and can apply their knowledge as a user to the situation. The prompt should specifically spell out tasks that the system must be able to perform in addition to any display information that must be displayed in response to user actions. For example, in the Moolah Burgers Touch Screen design project, students are instructed that any time a customer orders a Moolah Burger with fries, they should be prompted to upgrade to a Moolah meal that includes a drink. Their interface must be able to handle the specific requests of the prompt as well as normal operations of a system of this type. Before construction of the interface students are informed that their interface will be tested by volunteer users. The students are told to apply the concepts discussed in lecture because the “best” interface will win a prize. Prizes can be something concrete or can be extra credit used at the student’s discretion. Judges, which will be mock customers, can be recruited from fellow faculty or other faculty or staff at the institution since CIS knowledge is not necessary. There should be as many judges as there are student groups. Once the prototypes are complete, judges will be given a list of tasks that they must complete on each interface. In the Moolah Burgers example, a judge may be given the instruction to order a hamburger, fries, and a drink, and then change their mind and remove the fries. The students who design the paper prototype will act as the computer. When a judge activates the interface by “pressing” a button or “selecting” an item from the interface, the students display output using paper prompts, many times in the form of index cards or post-it notes. The students cannot give verbal instructions at any time to the judge and if the interface does not support the task, then the interface fails. Judges are encouraged to speak their thoughts out loud so students are familiar with the user’s approach to the system and can make changes accordingly. After judges have interacted with one interface, students are allowed to make changes to their interface to accommodate any problems discovered in the first iteration. This process demonstrates the iterative nature of the prototyping process and shows students how to test prototypes and make changes as necessary. After a short period allowing for changes, judges continue on to the next interface with their task. At the end of their interaction, students again make changes as necessary and the process continues until all judges have encountered each interface. The iterations tend to be shorter in duration as the process continues because students are making corrections to their interface and the last judge many times does not encounter any problems with their task. Once all judges have completed their rotations, judges are asked to rank the usability of each interface and provide comments on what they had problems with and what they liked about each interface. The group with the highest score wins the contest. Students should be given the chance to review the winning entry and class discussion can center on the strengths of that submission. Students should also be allowed to review the comments on their interface in their groups to bring the project to completion. The final stage required in the project is to require student to write a short paper describing their experience and what they learned. Students are encouraged to imagine that this had been a real development project and predict how the iterative prototyping process might have helped the development process financially, organizationally, and what the impact might have been on the final product. Students are asked to explain how they used the main concepts of human-computer interaction to improve their project. This analysis again enforces the concepts of user-centered design along with the process of iterative design. 3. OUTCOMES This exercise has been conducted for three semesters in a course in management of information systems. Students have generally been divided into teams of four students. Student response has been very positive and reports indicate an appreciation for the concepts of human-computer interaction and the paper prototyping process. Most students estimate that the procedure would have saved their company a lot of money and time in the development process because of the many mistakes they made in the initial prototypes. Students also reported that most of the errors had been detected by the time the last judge interacted with their product and most of the judges were able to complete their tasks on the last iteration of each interface. Student participation is also highly interactive and the competitiveness of the project brings out high levels of participation from most students. Another theme that has appeared in many of the analysis paper also teaches the students something of group dynamics and their position in the group. Many students noted in their paper that they had to take the lead or complained that they didn’t have enough input to make their product better. Anecdotally, many students have commented after the semester that they learned a lot from the process, discussed the project with future employers in interview, or have used some of the ideas in their work after graduation. 4. CONCLUSIONS Although not the optimal way to teach concepts of human-computer interaction, combining these concepts into the prototyping process allows instructors to tackle two topics that may receive little attention in the normal curriculum of a computer information systems program. Students report that they enjoy participating in the project and report that they learned information that they believe will be helpful to them in their careers. The low cost, low effort nature of the project does not require additional resources or extreme amounts of preparation on the part of the instructor. One drawback of the process is the fact that it does take two class periods to complete which can be difficult to accommodate in a tightly scheduled semester. However, our curriculum does not include formal courses in interface design, and the two class meetings in the management class does not seem to be wasteful. This project serves as a way to engage students in a fun exercise and combine teaching of multiple concepts in one exercise. The project could potentially be improved to include additional learning outcomes such as requirements documentation or other methods of usability testing. Other uses of the project may be its inclusion in lower level classes to generate excitement about our field and encourage more students to become majors. The project is considered by many students to be fun and would not be intimidating to beginning students who have few technical skills. Hands on participation in the design process could spark interest and potentially serve to recruit students to the field. REFERENCES ACM SigCHI. ACM SIGCHI Curricula for Human-Computer Interaction. Retreived from http://sigchi.org/cdg/index.html on August 6, 2008. Bailey, B.P., Biehl, J.T., Cook, D.J., Metcalf, H.E. (2008). Adapting paperprototyping for designing user interfaces for multiple display environments. Personal Ubiquitous Computing, 12, 269-277. De Sá, M. & Carriço, L. (2006). Low-fi prototyping for mobile devices. CHI 2006 Proceedings, Montreal, Quebec, Canada, 694-699. Hawthorn, D. (2007) Interface design and engagement with older people. Behaviour & Information Technology, 26(4), 333-341. Hendry, D.G., Mackenzie, S. Kurth, A., Spielberg, F. & Larkin, J. (2005). Evaluating paper prototypes on the street. CHI 2005, Portland, Oregon, 1447-1450. Kangas, E, & Kinnunen, T. (2005). Applying user-centered design to mobile application development. Communications of the ACM, 48(7), 55-59. Karat, C.M., Brodie, C., Karat, J., Vergo, J, & Alpert, S.R. (2003). Personalizing the user experience on ibm.com. IBM Systems Journal, 43(4), 686-701. Lim, Y., Pangam, A. Periyasami, S. & Aneja, S. (2006). Comparative analysis of high-and low-fidelity prototypes for more valid usability evaluation of mobile devices. NordiCHI, Oslo, Norway, 291-300. McCrickard, D.S, Fowler, C.J., & Chewar, C.M. (2005). Towards a “humans-first” computer science curriculum. 43rd ACM Southeast Conference, Kennesaw, Georgia, 363-364. Nielsen, J. (1995). Using paper prototypes in home-page design. IEEE Software, July, 88-89, 97. Rettig, M. (1995) Prototyping for tiny fingers. Communications of the ACM, 37(4), 21-27. Sauer, J., Holger, F. & Ruettinger, B. (2008). Designing interactive consumer products: utility of paper prototypes and effectives of enhanced control labeling. Applied Ergonomics, 39, 71-85. Sefelin, R. Tscheligi, M. & Giller, V. Paper prototyping-what is is good for? A comparison of paper-and computer-based low-fidelity prototyping. CHI 2003, Ft. Lauderdale, Florida, 778-779.