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, Knz, 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 dont 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.

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 Bootstrap1. 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

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

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 isnt 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 isnt 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.

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:

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 dont 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 Computability2 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

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

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. 229241.
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 fr 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. 153162.
Garrett, J.J. (2004). The elements of user experience. Jjg. net.
Heinze, H.J., Mangun, G.R., Burchert, W., Hinrichs, H., Scholz, M., Mnte, T.F., Gs, 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. 543546.
Khalil, H., Ebner, M. (2013). Interaction possibilities in moocshow do they actually happen. In: International Conference on Higher Education Development. S. 124.
Kehl, T. (1966). The purpose of computing is insight, not numbers. SIMULATION 7(6). S. 280280.
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. Mnchen
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. 582591.