Improving Student's Design Prototyping Skills using Interactive Prototyping Tool

Abstract

This paper will explain the importance of using interactive prototyping tools in the HCI design process. The Future of HCI education project performed by ACM SIGCHI shows that students recognize that prototyping, especially paper prototyping and interactive prototyping, are both very important. Two widely-used prototyping tools in academy, Balsamiq and Oven, will be compared and rated by students according to their preferences. We choose the Balsamiq as our design tool because Oven can be designed on the web but applications cannot be designed directly on Mac or Windows. The Balsamiq tool will help you understand the task process of UI work and highlight the benefits of digital prototyping to test the execution of expected results in a fast fashion compared to high-level prototyping. We also present the outcome of this work through two case studies. In particular, the smart mirror project with voice recognition function shows the effectiveness of the proposed method as an example.

Ⅰ. INTRODUCTION

Human-Computer Interaction (HCI) is a field that repeats the process of designing, prototyping, and evaluating a product’s user interface (UI). An important aspect of HCI is user satisfaction. For this reason, HCI is an interdisciplinary discipline that combines computer science, anthropology, psychology, product design, usability engineering, industrial engineering, and software engineering. Since many people are confused by the use of interfaces and interactions frequently used in the HCI field, it is necessary to distinguish them. User interface refers to the way the user uses the system and the way the system presents results to the user. It is how to design and implement system interactions. On the other hand, user interaction refers to how users behave to the system and how the system reacts to the user. Interaction is an abstract model that represents what roles a user and a computer play in order to perform a given task and how they cooperate with each other [1].

Recently HCI education has become an important subject for IT developers. Project practice is now required along with theoretical education. In the class conducted by the principal researcher, coding for the implementation of the target system was excluded due to the lack of class time. Thus the first implementation was performed using paper prototyping, which is a convenient way for students to quickly develop a prototype. The next step was to use a prototyping tool to conduct the class in a second implementation so that students can experience the process on the screen [2]. In this research, the final product of the class is the creation of a prototype using a medium-fidelity interactive prototyping tool, which is the stage before high-fidelity prototyping. In this paper, we propose the outcome of case study in which students use prototyping design tools in class to improve their prototyping abilities, which is the process of developing prototypes of IT products including software and hardware. This paper is the result of expanding [2] and describing the contents of the study in detail.

We compare representative interactive prototyping tools in Chapter 2, explain the contents of training on the case of design prototyping improvement using the Balsamiq tool in Chapter 3, and conclude in Chapter 4.

Ⅱ. COMPARISON OF INTERACTIVE PROTOTYPING TOOLS

In order to understand the importance and trend of HCI education, Churchill et al. conducted a research that suggested the future direction of HCI education with SIGCHI support from 2011 to 2014 [3]. In this work, 616 students surveyed HCI educators, field practitioners, and students about their perspectives on the current and future HCI environment, that is, what HCI education regards as the top priority in the actual workplace. The very important subject in HCI was investigated as interaction design. In addition, cognitive science, communication, computer science, digital media, psychology, sociology, and statistics were classified as important subjects. As the subject of HCI, experience design is very important, and accessibility, teamwork, HCI development, social computing, and ubiquitous computing are investigated as important. In addition, in the design method, brainstorming, interaction / high-level prototyping, paper / low-level prototyping, and usability testing were judged as very important. And affinity diagram analysis, situation inquiry, and heuristic analysis were investigated as important [3]. The results of this survey also confirm that students recognize that prototyping, especially paper prototyping and interactive prototyping, are very important.

Prototyping tools can help solve design problems before typing program code, and using prototypes is an efficient way to develop ideas into a real product. Users want an interactive prototype that allows them to use the created prototype and immediately see the result. The development designer can select a prototyping tool according to the purpose of the project, how to use it, and the difficulty of learning. In accordance with these criteria, this work recommended that students use two tools; Balsamiq, which is easy to develop both web and app and the operating system can be used on both Windows and Mac OS, and Oven, which is developed by Daum Kakao, and has excellent Korean interface. Of course, hands-on digital prototyping software provides the tools HCI designers need to go from design to user testing. Commercial prototyping tools frequently used in the market include Adobe Illustrator, InVision, Axure, and Sketch, as well as other tools [4]. However, these commercial tools are not free to use, therefore students in this study were given the choice of Balsamiq and Oven.

Balsamiq mock-up is a tool that allows for fast and easy development of a service and can be compared to a sketch of a drawing. It is recommended for use in developing a simple prototype sketch, but not for creating a highly detailed screen interface. This software is perfect for users who would like to create a quick mock-up of their idea in a short period of time and does not require a steep learning curve. In addition, in the case of a file converted to PDF, the click event to the designated page is applied as it is, so you can feel the interaction similar to the actual product.

Kakao Oven is an online prototyping tool by Daum Kakao. Its intuitive nature invites first time users to easily design screen interfaces without much difficulty. Interfaces designed using Oven can easily be shared via QR code or short URL. Similar to Balsamiq mock-up, it is a suitable tool for sharing how a service works at a high level but not equipped for constructing a detailed interface. Recently, like Balsamiq, a function to convert files such as PDF, JPG, and PNG has been added, but it is impossible to experience the interaction like a click event [5].

Balsamiq is compared with Oven in that it also provides Macintosh and Windows-based applications to work offline, and is compatible with projects in applications in different environments [5]. Students commented that they prefer Balsamiq over Kakao Oven, which supports not only web and apps, but also desktop-only apps and has many use cases. Since it is possible to sync with Google Drive as a prototype storage, students using Google accounts preferred Balsamiq as their prototyping tool. After guiding and assessing student assignments, the principal researcher of this work determined that Balsamiq was more superior as it allowed the development of various UI/UX design prototypes in a global environment compared to Oven [2].

Ⅲ. CASE STUDY ON DESIGN PROTOTYPING IMPROVEMENT USING BALSAMIQ

The research describes Balsamiq tool’s usefulness through student prototyping ability improvement based on two case studies performed by students who used Balsamiq. The first case describes a student team project investigation of ‘improving user-side utilization through layering of notification messages’. D. University students can only receive notifications from the comprehensive information system through notifications from mobile applications. However, there is a limitation in that there is no push notification service for information that is checked in real time or is frequently accessed by users.

Figure 1 shows the system design screen that reduces the university’s budget by improving the effectiveness of the notification function through layering of the push notification service and implementing a notification message that replaces unnecessary group SMS sending. Students first produced paper prototyping as shown in Figure 1(a), and then illustrated the execution process using Balsamiq so that the prototype can be demonstrated on a computer screen in a more vivid way. Figure 1(b) presents the results of students prototyping the interactive process of the project using Balsamiq [2]. The situation in Figure 1(b) is that the application is executed when a notification message arrives on the smartphone and the ‘Yes’ button of the notification is pressed.

Fig. 1. Paper prototype and Balsamiq prototype for layering notification messages of Daegu University.

Students made smart phone layouts and individual components that were produced in paper prototyping quickly and easily using Balsamiq basic components and functions. While the paper prototype functionality lacked to represent the actual product in action, the prototype developed using Balsamiq seemed to mimic the real product, which resulted in more satisfactory results.

In the case of paper prototyping, it is difficult to create a high-level prototype, but it has an advantage in that does not require any preparation process to make one. Therefore, paper prototypes may be the preferable prototype for developing small prototypes as they can be developed right away. However, as more components get added to prototyping requirements, digital prototyping such as Balsamiq, which has a lot of convenient features provided, makes the job more efficient.

As a second case work, the prototyping case of the team project ‘Multimode Interface Smart Mirror, a mirror display that provides information such as schedule, weather, and news by coating a special film on glass will be described. The smart mirror introduced in the research is functionally similar to the Malmö University Magic Mirror [6] in information display, voice recognition, motion recognition, etc., but increased convenience by adding accessibility using the web as follows. You can control the power of the smart mirror connected to the same Wi-Fi network with a nearby computer or smartphone that users can easily access. In addition, you can choose the time, schedule, news, and weather information provided to the user. In other words, the user can use modules that display the above information, as well as add and delete functions such as video and music. There is a recent research that has developed a smart glass application for core nursing skills to train nursing students [7]. It shows that real life examples of using smart glasses are spreading to education.

Another participating student in this work implemented the representing method of information provision through smart mirror and the module configuration design as a prototype using Balsamiq. In Figure 2, the information that students will output on the smart mirror display expressed by Balsamiq, the overall configuration of the device, and a web environment that can control the smart mirror are presented [2].

Fig. 2. An overall diagram of the proposed smart mirror system.

Students can intuitively see how the system is operated through the Balsamiq’s UI design, which facilitates understanding of development modules and configurations in meetings between team members. Changes and additions in the development process can be reduced in advance by removing the intermediate process of creating and checking UI with actual source code. In addition, it has the advantage of being able to quickly compose and show the screen in the initial presentation before starting the project. This made it easier for evaluators and other presentation listeners to understand the project.

In this project, the system was implemented using a board for Internet of Things (IoT) development called Raspberry Pi through a design using Balsamiq. The basic smart mirror display execution screen is compared with the prototype design using Balsamiq to aid understanding shown in Figure 3. In Figure 3(a), you can see that the location of information such as time, weather, and news to be displayed through the smart mirror is displayed with Balsamiq. Figure 3(b) is an implementation of a screen that provides information to smart mirror users by receiving information by calling an external API and outputting it to the display. Figure 3(b) shows that the mirror and information display functions are operated by the developer after actually implementing the Balsamic prototyping design of Fig. 3(a).

Fig. 3. Comparison of Balsamiq prototype design and actual implementation of smart mirror.

The developed smart mirror performs simple speech recognition using snowboy and Google Assistant API. Snowboy is a wake word detection open source such as Samsung’s “Bixby” or Apple’s “Siri”, and can generate the words you want with your own wake word. When wake word registered in this way is used for smart mirror, Google Assistant is executed. Afterwards, the assistant recognizes the voice and executes commands registered in the smart mirror such as “Monitor Off” or “What time is it now?” in the smart mirror program. After that, you can provide services by adding various APIs. For example, smart mirror can provide directions using maps and public transportation by adding Google Maps and Transit API.

Students emphasized that it is efficient to create prototypes in advance with Balsamiq when changing or adding functions of smart mirrors. This was proved by the implementation of the smart mirror project. Had they gone through the design process using Balsamiq, experimented with the flow of the application, it would be easier for them to start implementation. During implementation process, having the prototype to change screen design and to exchange ideas helped reduce the disagreement between the team members and the time wasted in the change process such as distributing functions.

Ⅳ. CONCLUSION

In this paper, an example of training that leads to the experience of execution screen design using interactive prototyping tools in the HCI design process was presented. We introduced and compared a number of digital prototyping tools used in the field. We presented two case studies of improving design prototyping abilities using Balsamiq, the preferred prototyping tool. Enhancing in the first case of prototyping that improves service utilization through layered notification messages, the augmenting process of from paper prototyping to the use of interactive prototyping tools was described in detail and showed that students’ design prototyping ability was strengthened. Through the second case of the multi-mode interface support smart mirror project, medium-level prototyping experience showed the effect of shortening the implementation time of Hi-Fi prototype and preventing errors. The main reason why we want to utilize design prototyping tools is to ultimately develop a good product UI. In particular, it was confirmed that the use of interactive prototyping tools has the effect of preventing problems that occur until actual product completion in this work.

At the point of creating intermediate prototypes using interactive prototyping tools in consideration of design principles recognized in the HCI field, students emphasized the need to develop designs that take into account end-user usability tests. In the future, in addition to Oven and Balsamiq, the goal is to expand the research to paid design tools widely used in corporate settings and to determine if these tools will improve students’ design prototyping skills.