Embed Size (px)
Citation preview
Captioning the World!
Interaction design proposal forVideo-overlay widget.
Develop concepts and storyboards for the basic
widget interaction fl ow.
User Interaction Technology SUB0325C01
Week 1 Start: 03 20 09
Page 1
CONCEPT 1
Clusters
In this interaction model, the user previews list of available caption types for all languages at once, and selects
the caption/narration type. Display options such as Change Font Size and Auto Translate are kept at the same
level as the main selection menu. Use of icons and typography aid users who have limited knowledge of
languages, and for improved accessibility.
Page 2
Stage 1Widget Initiation
1.1 The overlay widget loads on the video screen at bottom right. If captions are sponsored, the sponsor’s logo will appear after the initial text “captions (and narrations) brought to you by” in the designated Advt display area.
1.2 Users can collapse the Advt area. It can be expanded by clicking on the icon.
Video dimension 415px X 313px
1.3 The icons and indicate captions and voice overs are available for this video. More icons can be added for future PlyMedia services.
cc
Captions and narrations brought to you by
cc
cc s
cc s
Page 3
Stage 2Accessing the language options
2.1 On hovering over the caption/voice-over icon area, the widget expands to show list of available languages, possibly with a scroll bar. Also, A fade-off has been added to the bottom and top edges of the list to indicate “more to follow”.
When you open the list, the Advt area collapses to the bottom of the screen. Clicking on the “s” icon restores the Advt.
Page 4
2.2 Hovering over languages highlights each row. On delayed hover or on click, the row expands to show various captioning options available. Options not available are shown as deactivated.
2.3 User can select any one of the captioning options available in combination with the voice-over feature.
2.4 Tool-tips appear on delayed hover on the option icons. This will help users to get familiar with the icons.
Page 5
2.5 On selecting an option, the widget loads the subtitle fi le. A loader graphic indicates progress.
Stage 3Loading subtitles
3.1 The menu panel collapses to the state in [1.1] then the mouse cursor is moved away. The caption icon turns to green ( ).
The voice-over, if exists, turns on by default. If the option is not available on the selected language, the voice-over icon is greyed out ( ).
Page 6
3.2 After a delay of 3-4 seconds, the menu panel collapses to a compact mode to allow the captions to take a wider screen area.
3.3 After few more seconds the menu panel fades out from the screen. It reappears when the mouse hovers over the caption.
Hovering over the icon reactivates the language selection panel.
Page 7
Enabling Auto-Translation
Users can use the Auto-translate feature available on the language selection menu to translate sub titles from one language to another.
User can choose from the list of languages available for Auto-translation.
Once the selection is made, the panel refl ects the base language and the translated language.
Other Features
Page 8
Personalization and Customization
Use of minimum colors and fl at tones allow for easy customization of the widget. Furthermore, at the user end, the widget menu panel can be dragged to all 4 corners of the video display area for best viewing.
The widget can be embedded to the
smaller video sizes with minimum
modifi cations. Video dimension 256px X 144px
Page 10
CONCEPT 2
Contextual
This option integrates the widget interaction more seamlessly with the video area. Various caption/audio
options are within a few clicks and do not obstruct viewing experience greatly. A default language and voice
over can be activated when the video loads (IP detection?) and let the user to switch to enhanced captions or
display settings from there on. This interface may require a bit more learning as features appear just in time.
Page 11
Stage 1
Widget initiation
1.1 The overlay widget loads into video screen’s bottom edge. If the captions are sponsored, the sponsor’s logo will appear after the text “captions (and narrations) brought to you by” in the designated ad display area.
Stage 2Accessing the language options
2.1 On click over the TV icon, the list of languages in which captions are available gets displayed. If the language has an audio option also available, it is indicated with the microphone icon.
The user will be able to scroll through the list by taking the mouse cursor to the top and bottom edges of the list.
Page 12
2.2 On selection of a language the list collapses and the widget starts loading the captions in that language. The default caption type that gets loaded will be the closed captions.
Stage 3Enabling the contextual options
3.1 On complete loading of captions, the TV icon changes to yellow.
A contextual menu panel with available captioning options slides out from the TV icon once the captions are loaded.
Page 13
3.2 Users can change caption type. All items on the menu, except text size button, follow a toggle ON/OFF interaction.
Text size can be changed for improved readability.
3.3 This panel slides in after 3 seconds if no action is taken. It can be re-initiated on hover over the TV icon again.
A diff erent language can be selected by clicking on the TV icon again.
Page 14
Stage 4Turning the Advt panel off
4.1 On hover over the sponsor logo, option to minimize the sponsor panel appears.
Page 15
If no activity happens on the caption area, the TV icon and the sponsor logo disappears. They reappear on mouse-over.
Language options can be activated on clicking the TV icon.
Page 16
Stage 5Auto-Translate
5.1 Auto-translation option is provided as the last item in the list of languages available.
5. 2 User selects the Auto-translate option
Page 17
5. 3 Auto translate link slides to the top edge while a secondary language selection list slides down from the top
5. 4 Once the base language selection is made, another list slides down to display target languages.
Page 18
5. 5 Once the selection is made, the list panel collapses and the Auto translate panel slides down.
5. 6 Once the translation is available, the contextual panel slides in to display the options and slides back.
Page 19
The widget can be embedded to the
smaller video sizes with very minimum
modifi cations.
Options for Karaoke, extended captions varied text sizes and auto translation can be excluded in the small format.
Page 20
CONCEPT 3
Branched
Conventional menu approach, much similar to many portable media players lets users access various
captioning options in a sequential manner. Compact yet dedicated space available for individual sections make
the player more readable across all kinds of video environments.
Page 21
Stage 1
Widget initiation
1.1 The overlay widget loads into video screen’s top edge. If captions are sponsored, the sponsor’s logo will appear after the text “captions (and narrations) brought to you by” in the designated Advt display area.
Stage 2Accessing the language options
2.1 Hovering over the graphic on the top right corner displays the expanded menu with list of languages available as captions.
Page 22
Stage 3Accessing the sub-menu structure
3.1 On selection of a language the sub level menu opens up with all the captioning and audio settings. By default closed captions are turned on and will be loaded to the bottom edge as soon as the fi le is loaded. The text size can be toggled between “(S)mall” , “(M)edium” and “(L)arge”.
Stage 4Loading the subtitle and showing the
caption mode ON
4.1 On hovering out from the menu area, the panel collapses and the CC text on the panel glows to show that the caption is turned on.
After 3 seconds the panel will be faded out. The panel appears back on hovering over the caption area at the bottom.
Page 23
Stage 5Auto Translate
5.1 Auto translate is provided as the last option in the language selection menu screen.
5.2 Using two drop down boxes, users can choose the base language and the translation language.
5.3 Loading graphic is displayed while the Auto-Translation takes place.
Page 24
The widget can be embedded in smaller
video sizes with minimum modifi cations.
