Screen Concepts for Multi-Version Hypervideo Authoring Britta Meixner1,2 , Stefan John1 , Philipp Defner1 1 University of Passau, Innstrasse 43, 94032 Passau, Germany 2 FX Palo Alto Laboratory, 3174 Porter Drive, Palo Alto, CA 94304, USA 2 meixner@fxpal.com, 1 firstname.lastname@uni-passau.de ABSTRACT or a new hypervideo has to be put together in the authoring The creation of hypervideos usually requires a lot of plan- tool from scratch. In case of changes in the hypervideo, both ning and is time consuming with respect to media content versions have to be altered and maintained, which can be creation. However, when structure and media are put together error prone in larger projects. Translating a hypervideo means to author a hypervideo, it may only require minor changes not only translating every text or medium, it also involves to make the hypervideo available in other languages or for the table of contents, the terms for the keyword search, the another user group (like beginners versus experts). However, titles of scenes, alternative texts for media, the captions and to make the translation of media and all navigation elements button labels of control panels, and all other elements that of a hypervideo efficient and manageable, the authoring tool are shown in the player at some point. Providing facilitating needs a GUI that provides a good overview of elements that functions for this in a hypervideo authoring tool can help can be translated and of missing translations. In this work, we keeping maintenance costs low while providing up to date propose screen concepts that help authors to provide different hypervideos. versions (for example language and/or experience level) of a The aforementioned issues raise the question how a translation hypervideo. We analyzed different variants of GUI elements feature can be integrated into a desktop hypervideo authoring and evaluated them in a survey. We draw guidelines from the tool without overcrowding the GUI. However, possibilities results that can help with the creation of similar systems in the need to be provided to add contents in another language for future. all hypervideo elements. Accordingly, the goal of this work ACM Classification Keywords was to understand: H.5.2. Information Interfaces and Presentation (e.g. HCI): • How are the different versions of the hypervideo best indi- User Interfaces cated in the GUI? Author Keywords • What is a suitable GUI approach to enable the translation Hypervideo; Navigation; Multilingual; Translation; Authoring of single elements in a hypervideo? INTRODUCTION • What is a suitable GUI approach to give an overview of all Hypervideos consist of linked video scenes which are com- elements and enable editing in the overview? bined with other types of media to provide further information We conducted a survey with 51 people mainly from Germany on certain topics. Linking media that way, non-linear struc- and Austria presenting them different screen concepts. The tures are created that allow users to interactively explore facts survey used conditional statements to present screen concepts fitted to one’s personal level of knowledge and learning speed. always based on previous decisions to avoid confusion among This type of video is then presented in a player with additional the participants. We found out that users preferred a tidy presentation areas and navigational elements. user interface that can be controlled by keyboard and mouse, Hypervideo media content creation is time consuming and making it not overcrowded with too many buttons. requires a lot of planning. Currently, if a new version of an This paper is structured as follows: We first give an overview already finished hypervideo is needed, for example in another of related work, then we describe the procedure and partic- language or for another target group (like beginners versus ipants of our study. The evaluation results lead to tentative experts), a completely new hypervideo has to be created. This recommendations for hypervideo authoring tools. The paper requires either to copy the existing video and replace contents ends with a discussion and conclusion section. in a database or (often XML- or JSON-based) transfer file, RELATED WORK Taking a look at hypervideo and multimedia authoring sys- tems, it can be noted that neither early systems like Hyper- Hitchcock [16] nor current systems like the SIVA Producer [11, 9, 10] or Klynt [6] are capable of translating contents or providing different versions of contents. This is why we started looking at systems with similar underlying structures 4th International Workshop on Interactive Content Consumption at TVX’16, June 22, 2016, Chicago, IL, USA of the content, namely Content Management Systems (CMS) Copyright is held by the author/owner(s). for web-pages. According to [3], a CMS should “enable and disable as many languages” as required and provide a fallback locale. The fallback locale is used if content is not available in the language selected by the user. Several CMS offer the option to translate the contents of a web-page. OctoberCMS [13] provides a default language and translations. New languages have to be added in the settings view, where already added languages can also be managed. Figure 1. Version representations for combo-boxes. Text can be translated via a table. The table provides two op- tions, one shows all contents, the other allows to hide already translated contents giving a better overview. The Adobe Ex- perience Manager (Adobe CQ5) [4] lets users translate whole web-pages. “The website will be displayed side by side in 2 parts with the source (reference page) and the target lan- guage page in order to compare, check difference, edit and translate as appropriate”. ICanLocalize [7] is a translation service for web-pages by professional translators. The tool that is provided for the translators loads web-pages and shows a list of sentences which are extracted from the web-page. The translators can then translate sentence by sentence. The rubedo CMS [15] requires to first add a list of languages into which the currently available content is translated. The user se- lects between two strategies. The “only one” strategy displays Figure 2. Version representations for tabs. only translated elements in the resulting web-page (nothing is displayed in case no translation is provided). The “with fallback” strategy displays the fallback language if content is into an online survey that allowed conditional elements based not translated. In order to edit or translate contents of a lan- on previous answers. guage, it is selected in a combo-box. Then, only the contents The survey as well as the high fidelity prototypes used a car in this language are shown, which allows no comparison with repair scenario. The goal was to make the instructions on the default language. Images and other media files cannot be how to repair a car available for beginners and experts in both translated (or replaced with content in another language), only German and English. Accordingly, the original version of the descriptions can be translated. Synapse [8] is a system for the hypervideo which was created for German novices had to be management of translations of websites. Translation is done extended with a version for German experts and translated sentence by sentence (or parts of sentences). The translation into English. interface shows the original text and the translated text alter- nating for the single parts separated by markups. Another way First, participants were asked about their demographic data to deal with the translation issue is proposed by the Open Real (age, gender, level of education) and technical background Estate CMS which provides automatic translation of contents (monitor size, monitor resolution, experience in video editing). [12]. It first used the Google Translate API [5] and is now The second part of the survey showed three different represen- using the MyMemory API [18]. tations of the versions used in a combo-box (see Figure 1) and The systems described in this section offer different implemen- on tabs (see Figure 2). The first representation (a) was purely tations of the translation functionality in the GUI. Ranging text based combining language and experience level with a from translations of whole web-pages to translations of sin- “_”, the second representation (b) was purely image based gle text elements, most of the tools do not offer functions to showing a flag and a symbol, and the third representation (c) replace media files. was a combination of text and image, where the experience level was written as text and the language was shown as a STUDY/METHOD flag-symbol. In the remainder of the survey, the version repre- To answer the questions stated in the introduction, we con- sentation option preferred by the participant in a ranking was ducted an online survey comparing different interface designs. utilized in the next screens. The third part of the survey showed different variants of the Procedure/Data Collection media repository and how the elements should be grouped (see A brainstorming in a focus group [14] with four participants Figure 3). Variant (x) grouped all images, videos, text-files, (N = 4) was used to find different ways of presenting the audios, and subtitles into separate folders not differentiating different versions of a hypervideo in the GUI of the SIVA between the versions. Variant (y) adds a second layer for Producer. Then, high fidelity paper prototypes were created grouping the elements. Here the files are first grouped by and refined step by step that covered all alternative presenta- medium and then by version. Variant (z) also has a second tion approaches in a way with consistent representations of layer for grouping the elements. In this variant, the files are concepts. The high fidelity prototypes were then integrated grouped by version first and then by medium. Again, the Figure 3. Different layers in media repositories. Figure 5. Variants for the translation of the conditional control scene graph element. the path selectors at a fork in the scene graph (more complex set of text fields, combo- and check-boxes, Figure 5), the an- notation editor for image galleries (text fields and drop areas for images, Figure 61 ), and the editor for the table of contents (tree structure with entries and list of scenes, Figure 71 ). Each GUI element had a variant that showed the current implemen- tation in the SIVA Producer, but extended with a combo-box for version selection (variant (A), see Figure 4 and Figure 5). Variant (B) showed a very similar view compared to the cur- rent implementation but arranged on tabs (one tab for each version) (see Figure 4 and Figure 5). Variant (C) extended the Figure 4. Variants for the translation of scene titles. screen. It showed both the original version of the element and three tabs for the other experience levels and translations (see versions had to be ranked. Another question in this part of Figures 4, 5, 6, and 7). The variants for each GUI element the survey explored various ways to import media into the were ranked by the participants. media repository, which also had to be ranked. One way was The last part of the survey showed different versions of an first selecting the version and then the media which were then overview table that allows the author to detect missing transla- added to the right folders automatically. Another way was to tions. One version of the table had equally high rows for all first select the media and then the version. The third option elements (see Figure 8 (Y)), the other had collapsible rows that imported the media into a “global” folder from where they had showed previews and full texts if they were expanded and only to be added to the according folders in the media repository basic information (like the beginning of a text or the name of by drag-and-drop. These solutions also had to be ranked. A a media file) when they were collapsed (see Figure 8 (Z)). The text field was offered for suggestions of other solutions. participants were asked several questions about each version The fourth part of the survey showed three variants of exem- as well as to select the preferred variant. Other questions were plary GUI elements needed for the creation and translation of the hypervideo itself. The shown GUI elements were part 1 Variants with combo-box and tabs are not shown here to avoid of the scene editor (simple text field, Figure 4), the editor for repetitive images and space issues. Figure 6. Default version and translation tabs for the image gallery view. Figure 8. Versions for the translation table with all elements. media repository folders also revealed no clear answer with an even distribution of the answers for each option. Taking a look at the variants of the four different GUI elements Figure 7. Default version and translation tabs for the table of contents. (scene settings, path settings, image gallery editor, and table of contents) it can be noted that the tab-based variant (B) was considered as most appealing (average over all elements: 25 about editing and deleting of elements and contents in the participants) and clearly arranged (average over all elements: table and the presentation of editing options. 23.75 participants). The representation of the different ver- sions was considered most obvious (average over all elements: Participants 28 participants) and the distinction of the versions from each Survey participants were recruited through emails and postings other was most clearly visible (average over all elements: 26.5 on social networks2 . The participants had a mean age of 23.23 participants) for variant (B). Asking the participants which years (SD = 3.47). 39 of the participants were male and 11 variant they would want to use, on average 24.75 chose variant were female, one person did not want to tell. All participants (B), 15 chose variant (C), and 11.25 chose variant (A). Variant had at least some school degree; 6 had finished a training on (A) with the combo-box seems to be considered better for the job, 21 finished university. About half of the participants the simpler GUI elements (scene settings and path settings), used screen resolutions of 1920x1080 and monitor sizes of compared to the more complex ones. However, variant (C) 20 inch and larger. Most of the participants did not have achieved the best results regarding the question which variant a lot of experience with video editing software, only two makes the translation of contents the most pleasant (average categorized themselves as experts for Adobe Premiere [2], over all elements: 26 participants). some had knowledge of Adobe Flash [1], Blender [17], and Adobe After Effects [2]. The questions regarding the overview table revealed somewhat controversial results. Half of the participants found the GUI of both versions appealing and clearly arranged. They found EVALUATION that the contents can be recognized well (35 participants) and The question regarding the representation of a version clearly it is easy to find out which elements do not have an expla- showed that a combination of text and symbol is preferred nation or translation in a certain variant (25 participants) in (42 participants) (see Figures 1 and 2 variant (c)), 6 partici- the variant showing all the available information (i.e. variant pants chose the symbol and 3 participants chose the plain text (Y). However, 30 participants preferred the collapsible variant. variant. Regarding the editing of contents in the table, 38 participants For the question about media grouping in the media repository, preferred “drag & drop from the media repository or input of no clear statement regarding a preferred version can be made. text directly in the cell of the table”, 8 participants wanted However, it can be stated that a grouping with only one layer is an editor window that only shows the content of the cell as not preferred, as variant (x) was selected by only 8 participants. well as editing tools, and 5 participants wanted to open the Variant (y) was picked by 20 and variant (z) by 23 participants standard annotation editor. Regarding the question how to (see Figure 3). The steps for importing media into the desired delete contents, 26 participants preferred marking a cell and pressing the delete button, 12 participants wanted a right-click- 2 https://www.facebook.com/ (accessed May 26, 2016) menu with a delete option, 9 participants wanted to drag the element and drop it on a trash-bin symbol, and only 4 partici- the view of the standard version and the tabs of the alternative pants preferred an additional delete button in each cell. This versions, and to variant (A) with the combo-box. No clear is also supported by the results of another question, where 42 statement can be made regarding the design of the overview participants wanted a tidy user interface instead of providing table where participants evaluated the version showing more additional buttons in each cell for editing contents. Regarding information at one time better, but would prefer the more the question how missing versions should be presented, 22 par- compact version when they were asked directly. ticipants preferred empty cells and 29 preferred a grayed-out miniature view of the standard version. Future work should include follow-up studies to confirm and refine the tentative guidelines and recommendations formu- lated in this work. Further work in this area should also include RECOMMENDATIONS hypervideo authoring on tablets and other devices. The evaluation results of the versioning interfaces for the desk- top hypervideo authoring tool allow us to draw tentative guide- REFERENCES lines and recommendations for similar systems where contents 1. Adobe Systems Incorporated. 2016a. Adobe Flash Player. of hypervideo have to be translated or edited for another ver- Website http://www.adobe.com/products/flashplayer.html sion: (accessed May 26, 2016). (2016). • If suitable, provide a combination of text and symbol for 2. Adobe Systems Incorporated. 2016b. Adobe Premiere representing a version in the GUI. Pro CC. Website • The media repository should provide more layers than just http://www.adobe.com/products/premiere.html (accessed sorting by medium. May 26, 2016). (2016). • A view with tabs is preferred to switching between versions 3. Globalization Partners International. 2013a. Selecting the with a combo-box. Right Multilingual CMS to Manage International Websites. Website http://blog.globalizationpartners. • Showing the default and translated versions next to each com/cms-international-websites.aspx (accessed May 06, other makes the translation task more pleasant. 2016). (2013). • In an overview, elements should be editable as easily as 4. Globalization Partners International. 2013b. Website possible (direct entry, drag & drop, keyboard shortcuts) Translation in Adobe Experience Manager - Adobe CQ5. and only necessary information should be visible without Website http://blog.globalizationpartners.com/ overcrowding the GUI with buttons for editing the contents. multilanguage-website-adobe-experience-manager.aspx (accessed May 06, 2016). (2013). • Missing information should be either visualized by empty fields or by grayed-out versions of the originals. 5. Google Inc. 2015. Google Translate API - Dynamically translate between thousands of available language pairs. DISCUSSION AND CONCLUSIONS Website https://cloud.google.com/translate/ (accessed In this paper we presented a GUI concepts study for providing May 06, 2016). (2015). hypervideo contents in different versions, like for beginners 6. Honkytonk Films. 2015. Klynt. Website, and experts and/or in different languages. We created high http://www.klynt.net/ (accessed April 27, 2015). (2015). fidelity prototypes of GUI concepts and integrated them in a survey which was answered by 51 participants. However, 7. ICanLocalize. 2016. ICanLocalize Documentation - most of the participants were less than 30 years old, from Ger- ICanLocalize documentation center. Website http://docs. many/Austria, and had very limited to no experience in video icanlocalize.com/information-for-clients/tutorials/ editing. A more diverse user group with more participants how-to-translate-cms-websites-with-icanlocalize/ would make the results more reliable. Rough guidelines could (accessed May 06, 2016). (2016). nonetheless be drawn from the results where most of the users 8. iData Technologies. 2016. Multilingual Content agreed. Our prototypes have a somewhat complex scenario Management with the Synapse Publisher CMS. Website showing different experience levels and languages making it http://www.idatatechnologies.com/en-US/ harder for the participants to understand the scenario. Using a Multilingual-Web-Content-Management.aspx (accessed simpler scenario would have made understanding the scenario May 06, 2016). (2016). easier, but would also have over-simplified the prototypes. This may have resulted in results that are not applicable to 9. Britta Meixner, Stefan John, and Christian Handschigl. more difficult scenarios. 2015. SIVA Suite: Framework for Hypervideo Creation, Playback and Management. In Proceedings of the 23rd A combination of text and symbol are preferred for the de- ACM International Conference on Multimedia (MM ’15). scription and differentiation of the different versions. Media ACM, New York, NY, USA, 713–716. DOI: organization in the media repository should be enabled on two http://dx.doi.org/10.1145/2733373.2807413 levels, either medium-version or version-medium; an organi- zation structure with only one level is not desired. Comparing 10. Britta Meixner, Katarzyna Matusik, Christoph Grill, and the different GUI variants for editing hypervideo elements, Harald Kosch. 2012. Towards an easy to use authoring variant (B) with a list of tabs is preferred to variant (C) with tool for interactive non-linear video. Multimedia Tools and Applications 70, 2 (2012), 1251–1276. DOI: http://dx.doi.org/10.1007/s11042-012-1218-6 11. Britta Meixner, Beate Siegel, Günther Hölbling, Franz Lehner, and Harald Kosch. 2010. SIVA Suite: Authoring System and Player for Interactive Non-linear Videos. In Proceedings of the 18th ACM International Conference on Multimedia (MM ’10). ACM, New York, NY, USA, 1563–1566. DOI: http://dx.doi.org/10.1145/1873951.1874287 12. MonoRay. 2016. Machine (automated) translation in Open Real Estate CMS. Website https://open-real-estate.info/en/blog/ mashinnyj-perevod-v-open-real-estate-cms (accessed May 06, 2016). (2016). 13. octobercms.com. 2014. OctoberCMS Plugins - Translate - Enables multi-lingual websites and translate website contents. Website https://octobercms.com/plugin/rainlab-translate (accessed May 06, 2016). (2014). 14. D. Remenyi. 2012. Field Methods for Academic Research: Interviews, Focus Groups and Questionnaires 3rd Edition:. Academic Conferences and Publishing Limited. 15. rubedo. 2013. Multilingualism tutorial : rubedo cms. Website http://www.slideshare.net/Rubedo-project/ multilingualism-tutorial-rubedo-cms (accessed May 06, 2016). (2013). 16. Frank Shipman, Andreas Girgensohn, and Lynn Wilcox. 2008. Authoring, Viewing, and Generating Hypervideo: An Overview of Hyper-Hitchcock. ACM Trans. Multimedia Comput. Commun. Appl. 5, 2, Article 15 (Nov. 2008), 19 pages. DOI: http://dx.doi.org/10.1145/1413862.1413868 17. Stichting Blender Foundation. 2016. Blender. Website https://www.blender.org/ (accessed May 26, 2016). (2016). 18. Translated.net. 2015. MyMemory: API technical specifications. Website http://mymemory.translated.net/doc/spec.php (accessed May 06, 2016). (2015).