=Paper=
{{Paper
|id=Vol-1716/WSICC_2016_paper_5
|storemode=property
|title=Screen Concepts for Multi-Version Hypervideo Authoring
|pdfUrl=https://ceur-ws.org/Vol-1716/WSICC_2016_paper_5.pdf
|volume=Vol-1716
|authors=Britta Meixner,Stefan John,Philipp Defner
|dblpUrl=https://dblp.org/rec/conf/tvx/MeixnerJD16
}}
==Screen Concepts for Multi-Version Hypervideo Authoring==
https://ceur-ws.org/Vol-1716/WSICC_2016_paper_5.pdf
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).