Design and Evaluation of a User Interface for an ...

Design and Evaluation of a User Interface for an Interaction Supported Video Platform Josef Wachtler, Gerald Geier & Martin Ebner! Originalbeitrag erschienen in: Wachtler, J., Geier, G., Ebner, M. (2015) Design and Evaluation of a User Interface for an Interaction Supported Video Platform. Digital Medien in Arbeits- und Lernumgebungen. Jost, P, Künz, A (Ed.). S. 117-124. Pabst, Lengrich

Design and Evaluation of a User Interface for an Interaction Supported Video Platform Josef Wachtler, Gerald Geier & Martin Ebner Social Learning, Computer and Information Services, Graz University of Technology Abstract. Learning videos are currently more and more in use because of the evolving trend of so-called MOOCs (Massive Open Online Courses) (Khalil & Ebner, 2013). However learning videos have only a consuming character due to the fact that they are of passive nature. According to Carr-Chellman & Duchastel (2000) interaction as well as communication are key features of a successful online course. Because of that a web based information system has been developed to support learning videos with different forms of interaction (Ebner et al., 2013). It is obvious that such an information system has to be easily useable and due to that this research study presents the development process of a suitable User Interface (UI). The associated usability study as well as the field study point out that the design approach is generally working and also identified some components to improve.

1. Introduction Due to the currently emerging trend of so-called MOOCs (Massive Open Online Courses) learning videos are more and more in use today (Khalil & Ebner, 2013) (Lackner et al, 2014). Furthermore it seems to be obvious that videos are of passive nature and because of that they have mainly a consuming character. This might be a problem due to the fact that interaction as well as communication are key features of high quality online courses (Carr-Chellman & Duchastel, 2000) (Ebner & Holzinger, 2003). It is definitely important that different possibilities of communication are offered in different forms and directions. Based on these assumptions a web based information system has been developed first introduced by Ebner et al. (2013). With the help of this information system it should be possible to enrich a video with different methods of interaction, which are used to enhance the attention of the students. This is done because of the widely known fact that selective attention is the most crucial resource for human learning (Heinze et al., 1994). The mentioned information system provides the possibility to present questions during the video to students. This means that on the one hand the lecturer is able to add multiple choice questions at predefined positions in the video and on the other hand the information system shows general questions, which are not related to the content of the video in an automatic and random way. In addition there are a lot of different forms of analysis which are based on the interactions presented during the video (Ebner et al., 2013) (Wachtler & Ebner, 2014a) (Wachtler & Ebner, 2014b) Such an information system needs to be easily accessible to provide a remarkable user experience because “users don’t visit Web sites to experience the joy of navigation” (Garrett, 2004). Due to that a modern User Interface (UI) has been developed and will be presented as well as evaluated by this research study. This leads to the following research question: “How to develop a useable user interface for an interaction supported video platform?” At first Section 2 presents the development process of the user interface by providing some technical background as well as by explaining the most crucial parts of the UI. After that Sections 3 and 4 evaluate the UI by showing the related usability studies as well as the final field study. Finally the conclusion sums up the main points of this research study and gives an outlook.

!

1

2. UI Implementation Designing a product or a platform is mandatory for the success of the service and the satisfaction of the users, so “thinking about design is hard, but not thinking about it can be disastrous” (Caplan, 2015). This statement makes it clear, that it is not enough building highperformance and reliable applications and not or only partly consider the UI. Therefore a valuable goal is to develop a user interface for both, best user experience and user satisfaction.

2.1 General Layout Starting point for the development of the new user interface is the existing raw development UI. This development UI was used for the first test period and provides basic usability issues. After an evaluation of the existing design, the need for a new highly user-friendly UI was obvious (Wachtler & Ebner, 2014b). It has been decided to use for the new user interface the well-known web framework “Bootstrap”1. Bootstrap is a well-established base to develop a design, which has a high demand of usability and which needs a mobile view. The framework is easy to use for developers and also includes advanced features for modern web development and mobile optimization. For example, the grid system of Bootstrap is evolved to use it in a very easy way for the desktop as well as for the mobile views. Many other useful components are part of the framework and help throughout the implementation of the user interface. “Red” has been chosen as the main color of the design and acts as eye-catcher. The specific color code is similar to the one from the logos in the header and works well in cooperation with them. The typography is based on “Helvetica Neue” with a fallback to similar sans-serif fonts.

Figure 1. The desktop view The general layout of the website (see Figure 1) contains a header (1), a main navigation bar (2), a content area (3) and a footer (4). For

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 1

http://getbootstrap.com (last accessed February 2015)

2

!

Design and Evaluation of a User Interface for an Interaction Supported Video Platform Josef Wachtler, Gerald Geier & Martin Ebner! continuity reasons, the header, the navigation bar and the footer are fixed for each site, so the users are able to reach the primary elements on every website in the same way. These primary elements have only a few components: the logos in the header or important navigation items in the main navigation bar as well as the footer to not overcharge the users. Base for the content area are rounded boxes where the information is presented. These boxes are intended to give the feeling of togetherness and they should represent the information grouped.

Figure 2. The mobile view with closed and opened menu Along the whole development process, it is important to consider not only the desktop users but also the mobile ones. In order to optimize the website for the mobile world, mobile needs have to be identified and taken into account throughout the design process (Ebner et al, 2010). On mobile screens less space is available for the presentation of the website and only one column can be used for the content usually. The grid system of Bootstrap offers the functionality to arrange the columns depending on the output device. The three columns for bigger screens downsize themselves automatically to one column for mobile screens (see Figure 2). Considering the mobile view, the (main) navigation bar is a tricky part. It isn’t possible to show the same (main) navigation bar in desktop as well as in mobile view, because the menu becomes too tiny and the users are not able to use it without zooming. So there had to be a special strategy. To solve this problem Bootstrap offers a mobile menu with the so-called “Hamburger Icon” (1). In the mobile view, the desktop menu converts to a drop-down menu for an easier mobile use. The drop-down menu can be opened and closed by the Hamburger Icon.

2.2 Interaction Method Boxes One of the most crucial parts has been a quite tiny detail of the whole website. The green/yellow boxes in the interaction method (see Figure 3) section turned out to be difficult. The technical aspects of the boxes itself are not a big problem, but the purpose of the boxes. Because they are not only used for the listing of the interaction methods, but also acting as buttons to redirect to further information concerning the interactions method. In the first approach, the whole boxes were used as a link and only a pointer was shown when the

user hover across the boxes.

Figure 3. The Green Boxes turned out to be difficult After the first usability test (see Section 3), it has been determined that the users do not realize that the boxes act also as links. A second reason to discard this approach is the fact, that for some interactions methods, there are multiple links to additional information. So it has been decided not to use the whole boxes for the links and instead adding an “information” icon to every box. These icons act as buttons, with a click on it a so-called tooltip with the links to the additional information is shown and the user isn’t longer confused from the boxbutton combination.

2.3 History Timeline The second important part of the UI is the history of user activities (see Figure 4). This history is used to display when and how long the user watched the according video. More statistical data is shown as additional information. The challenge is to integrate this dynamic growing part of the design and consider that the design has to work in both, desktop and mobile view. The solution for this problem is the combination of two components of the Bootstrap framework. For each activity a progress bar and a tooltip beneath the bar is used. The progress bar acts as a timeline where the duration of the activity is marked and the tooltip contains the statistical information. If there are many user activities, the list of progress bars and tooltips become quite long, so a little trick solves that problem. For a quick look only the progress bars are shown to the user. If the user wants more information, he/she has to hover above the bar and the tooltip becomes visible. In mobile view there is no hover possible, so the progress bars and the tooltips are displayed beneath each other.

!

3

Figure 4. History of user activities

2.4 Multiple Choice Questions Often the details in the UI are the challenging parts during the development process and one of these details emerged as tricky. The “answer to the multiple choice questions”-view (see Figure 5) ran through several design steps to become the final one. The problem is the display of the table with the timestamp, correct/wrong and student answers columns in an understandable way. Especially the correct/wrong column/s, which display if the answer is correct or not, turned out as challenging. For the first approach, 2 columns, one for correct and one for wrong were carried out. If the answer of the multiple choice question was correct, the corresponding cell in the correct column was marked green with a check and if the answer was wrong, accordingly the cell in the wrong column was marked red with a cross.

Figure 5. “answer to the multiple choice questions”-view After a few tests it has been determined (see Section 3), that this approach confuses the users and they do not understand the meaning of the two columns. A few attempts later the final solution has been found. In this final solution only one column is present, which indicates if the answer is correct or wrong. If the answer is correct, the appropriate cell is marked green with a check and if the answer is wrong the cell is marked red with a cross (see Figure 5).

2.5 URL Design Finally it is required to design the URLs (Uniform Resource Locators) due to the reason that they are also part of the user interface (Andrews, 2012). Figure 6 shows the main navigation bar and the current URL. The following aspects could be seen:

4

•

The directory structure corresponds to the navigation bar.

•

Hierarchical design allows moving upwards by removing the end of the URL.

•

Meaningful parts of the URL help to guess it.

•

URLs are easy to type, which means that they don’t contain any special characters.

!

Design and Evaluation of a User Interface for an Interaction Supported Video Platform Josef Wachtler, Gerald Geier & Martin Ebner!

Figure 6. The main navigation bar Due to these principles the whole platform could be used by simply entering URLs.

3. Usability Study As mentioned by the previous section some parts of the developed user interface were revised after some usability tests. This section explains these tests in a more detailed way. At each revision of the UI a heuristic evaluation has been performed. This usability testing technique is done by few experts who are testing the UI according to predefined heuristics (Ebner, 2006). These tests have been done by four expert-evaluators which seem to be sufficient because with three to five evaluators it is possible to identify 75% of the usability problems (Nielsen, 2001). The first identified issue regards the boxes displaying the interaction methods. Each box is a link to further details of the corresponding interaction method. Unfortunately the evaluators had no idea that there are further details available and due to that they were not able to identify the boxes as buttons. Because of that the presented adaptions (see Section 2.2) has been made and with this new icon acting as the link to the details it is possible for the evaluators to find the detail pages. Furthermore the number of columns at the “answer to the multiple choice questions”-view turned out to be problematic (see Section 2.4). At the first revision two columns were used to indicate the correctness of an answer. This approach has confused the evaluators and due to that these two columns have been merged to a single one. Finally an evaluation of the URLs has been performed. It points out that it is possible to use the platform with the URLs only and due to that the constraints presented by Section 2.5 are fulfilled.

4. Field Study After the improvement of the issues found by the usability study (see above) a final field study is performed. For that the video platform with the newly developed user interface is used at the lecture “Logic and Computability”2 at Graz University of Technology. This lecture consists of 13 videos which introduce the topics of propositional logic as well as of predicate logic and is attended by 25 to 70 users per video. To evaluate the design of the user interface the users as well as the lecturer were asked to provide feedback. This leads to the following list of positive remarks: •

The structure of the main navigation bar is clear and consistent and due to that it is easy to find the requested pages.

•

The color schema as well as the font is well readable and not offensive.

However the users reported some problematic issues regarding the usage of the UI. It has been stated that the history timeline (see Section 2.3) sometimes does not show a marked area. This happens if the joined timespan to mark is very short and the width of the screen is also small (e.g. the screen of a mobile phone in portrait mode). So the area to mark simply becomes too tiny to be displayed. The second reported issue regards the ordering of the videos at a view displaying a list of them. Due to the fact that they are ordered chronologically the latest video is the last. This leads to a problem if the list contains more than ten videos because this splits the list in

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 2

http://www.iaik.tugraz.at/content/teaching/bachelor_courses/logik_und_berechenbarkeit/ (last accessed February 2015)

!

5

several pages. It is clear that now the latest video is on the last page however users often want to watch the last one and so they have to navigate to the last page to find the video of their interest. Furthermore the lecturer claimed that adding a multiple choice question is tricky because it is difficult to find the position in the video where the question should be inserted. The position for the questions is searched by clicking in the progress bar of the video. This could be a task which is not very handy if the video is quite long because the space of the searched position becomes smaller with a longer video. A possible solution for this issue could be a button to jump through the video in steps of predefined length.

5. Conclusion This research study presents the development and the evaluation of the user interface of a video platform first introduced by Ebner et al. (2013). It shows the technical aspects of the UI as well as the most crucial parts of the developed UI. Furthermore the performed usability study and the final field study point out that the approach is basically working and give some suggestions for improvement which should be adapted in a future version. So the research question (see Section 1) is finally answered.

6. References Andrews, K. (2012). Information architecture and web usability lecture notes. URL: http://courses.iicm.tugraz.at/iaweb/iaweb.pdf [01.12.14]. Caplan, R. (2015). URL: http://www.goodreads.com/quotes/540494-thinking-about-design-is-hard-but-notthinking-about-it [11.02.15] Carr-Chellman, A., Duchastel, P. (2000). The ideal online course. British Journal of Educational Technology 31(3). S. 229–241. Ebner, M.; Holzinger, A. (2003): Instructional Use of Engineering Visualization: Interaction-Design in eLearning for Civil Engineering HCI Konferenz Kreta 2003, Human-Computer Interaction Theory and Practice: Volume I, ISBN 0-80584930-0, Lawrence Erlbaum Associates, S. 926-930 Ebner, M (2006). Usability Tests und deren Einsatz bei der Entwicklung von Lerntools für die Hochschullehre - ein Erfahrungsbericht. In: Usability im eLearning & eLearning Strategien, Tagungsband, 12. FNMA Tagung. S. 84-95. ISBN 3-902520-02-07 Ebner, M.; Kolbitsch, J.; Stickel, C. (2010) iPhone / iPad Human Interface Design. - in: Human-Computer Interaction in Work & Learning, Life & Leisure, S. 489 - 492 Ebner, M., Wachtler, J., Holzinger, A. (2013). Introducing an information system for successful support of selective attention in online courses. In: Universal Access in Human-Computer Interaction. Applications and Services for Quality of Life. Springer. S. 153–162. Garrett, J.J. (2004). The elements of user experience. Jjg. net. Heinze, H.J., Mangun, G.R., Burchert, W., Hinrichs, H., Scholz, M., Münte, T.F., Gös, A., Scherg, M., Johannes, S., Hundeshagen, H., Gazzaniga, M.S., Hillyard, S.A. (1994). Combined spatial and temporal imaging of brain activity during visual selective attention in humans. Nature 372. S. 543–546. Khalil, H., Ebner, M. (2013). Interaction possibilities in moocs–how do they actually happen. In: International Conference on Higher Education Development. S. 1–24. Kehl, T. (1966). The purpose of computing is insight, not numbers. SIMULATION 7(6). S. 280–280. Lackner, E., Kopp, M., Ebner, M. (2014) How to MOOC? – A pedagogical guideline for practitioners. Roceanu, I. (ed.). Proceedings of the 10th International Scientific Conference "eLearning and Software for Education" Bucharest, April 24 - 25, 2014. Publisher: Editura Universitatii Nationale de Aparare "Carol I” Nielsen, J. (2001). Designing Web Usability. Markt und Technik Verlag. München Wachtler, J., Ebner, M. (2014a). Attention profiling algorithm for video-based lectures. In: Learning and Collaboration Technologies. Designing and Developing Novel Learning Experiences. Springer. S. 358– 367. 6

!

Design and Evaluation of a User Interface for an Interaction Supported Video Platform Josef Wachtler, Gerald Geier & Martin Ebner! Wachtler, J., Ebner, M. (2014b). Support of video-based lectures with interactions-implementation of a first prototype. In: World Conference on Educational Multimedia, Hypermedia and Telecommunications. Volume 2014. S. 582–591.

!

7