The document discusses designs for a Silverlight media player to deliver training content to users. It explores interaction and visual design considerations. Key points covered include: - Reviewing problem statement of needing a framework to deliver help/demo content - Design explorations for 1-level and 2-level topic hierarchies, and combining topics/subtopics on screens - Proposed screen designs including a begin screen, watch screen with controls/captions, and end screen - Additional concepts like a closed caption navigator and window shade controls The purpose is to collect feedback, determine the best design to implement, and discuss next steps. Wireframes provide examples of navigation, player screens, and caption/control interactions

2. 
Review feedback summary

Review the final design

Collect feedback

Determine if additional work is needed (super cc… see slide 5?)

Discuss next steps
2/17/2014
2

3. Interaction Design
 Think about transitions (begin, play, end)
 Consider keyboard commands to control the player
Visual Design
 Make the overall design whiter and more similar to
the Zune UX but w/ our branding elements
 Keep Topics and Subtopics together, Aal video title should be sentence case
 Change closed captions to gray text on a white background
 Use bolder fonts for headlines, all icons should be blue, remove shadows
 Explore Silverlight interactions for scrolling and selecting, etc.
 Remove small video previews since they will likely be illegible
2/17/2014
3

4. 2/17/2014

5. begin screen
Primary Topics
Max 8
Sub Topics
Max 5
If there is only a single level of
topics… blue subtopics will
be removed.
Interaction
As a user selects each primary
topic it will expand to expose the
corresponding subtopics.
Begin Screen
Primary Topic and Sub Topic
are along with a play button and
bold branding element.
Bulleted learning objectives can
also be added to help the user
determine if this content will meet
their needs.
Leading will need to be modified
based on the final content in order
to ensure that all content is visible.
User Action
User select the play button.
2/17/2014
5

6. watch screen
Watch Screen
Videos will be viewed in this area.
Users can use the controls below
to control the video.
User Action
User viewing closed caption text.
As the user scrolls through the
timing control the text and the
video update to correspond to
specific places in time.
The user can pause the video,
adjust the volume and also share
the video via email, twitter or
Facebook.
Any standardized keyboard
shortcut keys or controls should
be implemented to ensure that
accessibility and interactive
familiarly are achieved.
2/17/2014
6

7. end screen
End Screen
The user can choose to replay the
video or view another video from
the left hand navigation bar.
A Replay icon needs to be
ordered.
New! Icons Needed
-Closed Caption
-Closed Caption Script (tbd)
-Replay
-Volume
2/17/2014
7

8. Something to consider… closed caption navigator

Allow users to view the full closed caption script/text in its
entirety, scan or search the text for key words and then
navigate to specific portions of the video.
2/17/2014
8

9. closed caption navigator (sketch)
[ cc ]
x
Closed Caption Script
Select the text below to jump to a
specific area in the video or enter
a search term below.
Search
00:00 Insert caption text here.
00:05 Insert caption text here.
00:10 Insert caption text here.
00:15 Insert caption text here.
00:20 Insert caption text here.
00:25 Insert caption text here.
03:07 Insert caption text here.
00:30 Insert caption text here.
03:45 Insert caption text here.
00:35 Insert caption text here.
03:50 Insert caption text here.
03:50 Insert caption text here.
03:55 Insert caption text here.
03:55 Insert caption text here.
04:00 Insert caption text here.
04:00 Insert caption text here.
Insert Show Script Closed Caption icon here [ cc ].
Selecting this icon exposes the script shown
in the left-hand Navigation area.
2/17/2014
9

10. 2/17/2014

11. 2/17/2014

12. 
Review problem statement

Review design explorations (interaction & visual design)

Collect feedback

Determine which design to implement

Discuss next steps
2/17/2014
12

13. Currently, Microsoft Online Services has no framework
for delivering tours, help, or demo content to its users.
To fill this gap, we will create a Silverlight media player
to inform our users about our product’s features,
attributes and benefits and improve the speed at which
our user’s adopt and fully utilize our services.
Stakeholder required features:
 Ability to accommodate a max of 8 primary topics
each with a possible max of up to 5 subtopics
 Standard media player controls
2/17/2014
13

14. 2/17/2014

15. a) 1-level hierarchy
8 Primary Topics
Primary topics
learning objectives.
2/17/2014
15

16. b) 1-level hierarchy
8 Primary Topics
2/17/2014
16

17. c) 2-level hierarchy
8 Primary Topics
5 Subtopics
2/17/2014
17

18. 2/17/2014

19. Screen 1) combo
8 Primary topics
and 5 subtopics are
consolidated and
video titles surface
as user changes
focus from one
video to another.
Selecting the Play
button launches
the video.
2/17/2014
Once video
quantify exceeds
width, the user
clicks the white
arrows or uses their
keyboard arrows to
scroll through the
video library.
The user can either
press the Play
button or select
Enter on their
keyboard to watch
the chosen video.
19

20. Screen 2) combo
Video content
Window Shade
Control Panel
After 15 seconds, the
controls collapse downwards
disappearing from the screen
(with the exception of the
time tracker rule).
Media player and time
tracker controls. The user
can move the white bar
on the time tracker rule to
move forwards of
backwards or to a specific
time in the video.
2/17/2014
To see the controls again,
the user simply moves their
cursor on to the media player
and the controls appear
moving upwards from the
bottom of the screen.
Users can share a link to this
video via Email, Twitter or
Facebook.
20

21. Screen 2) combo - closed caption
Selecting this orange arrow
will slide the controls to the
right exposing a miniature
versions of the video library.
Once the user selects a video
is will surface as previously
described.
2/17/2014
Closed caption text would appear here.
Closed caption text would appear here and only show two lines.
Closed caption
When the user selects the
closed caption option, the text
appears above the media player
controls.
After 15 seconds, the controls
disappear with the exception of
the closed caption text and
time tracker rule.
21

22. 2/17/2014

23. a) 1-level hierarchy
Primary nav and controls
remain visible throughout
viewing.
2/17/2014
23

24. b) 2-level hierarchy
Primary nav and controls
remain visible throughout
viewing.
Window Shade
2- level content
After 15 seconds, the 2ndlevel content collapses
downwards disappearing
from the screen.
To see the 2nd-level content
again, the user simply selects
a primary topic or moves
their cursor onto the media
player and the 2nd-level
content appears moving
upwards from the bottom
of the screen.
The title for each video
appears as the user hovers
over each video preview.
Closed caption
When a video is playing and
the user has selected the
closed caption option, the
text appears above the
media player controls.
2/17/2014
24