Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Multimedia UX


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

Multimedia UX

  1. 1.  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
  2. 2. 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
  3. 3. 2/17/2014
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 2/17/2014
  10. 10. 2/17/2014
  11. 11.  Review problem statement  Review design explorations (interaction & visual design)  Collect feedback  Determine which design to implement  Discuss next steps 2/17/2014 12
  12. 12. 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
  13. 13. 2/17/2014
  14. 14. a) 1-level hierarchy 8 Primary Topics Primary topics learning objectives. 2/17/2014 15
  15. 15. b) 1-level hierarchy 8 Primary Topics 2/17/2014 16
  16. 16. c) 2-level hierarchy 8 Primary Topics 5 Subtopics 2/17/2014 17
  17. 17. 2/17/2014
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 2/17/2014
  22. 22. a) 1-level hierarchy Primary nav and controls remain visible throughout viewing. 2/17/2014 23
  23. 23. 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