SlideShare a Scribd company logo
1 of 24
Multimedia UX


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
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
2/17/2014
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
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
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
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
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
2/17/2014
2/17/2014


Review problem statement



Review design explorations (interaction & visual design)



Collect feedback



Determine which design to implement



Discuss next steps

2/17/2014

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
2/17/2014
a) 1-level hierarchy

8 Primary Topics

Primary topics
learning objectives.

2/17/2014

15
b) 1-level hierarchy

8 Primary Topics

2/17/2014

16
c) 2-level hierarchy

8 Primary Topics

5 Subtopics

2/17/2014

17
2/17/2014
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
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
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
2/17/2014
a) 1-level hierarchy

Primary nav and controls
remain visible throughout
viewing.

2/17/2014

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

More Related Content

Viewers also liked

Cognitive Walkthrough Template
Cognitive Walkthrough TemplateCognitive Walkthrough Template
Cognitive Walkthrough TemplateMicrosoft
 
Shiram - space for personal growth
Shiram - space for personal growthShiram - space for personal growth
Shiram - space for personal growthNatalia Utkina
 
E bay mentoring session ba(updated july 26)
E bay mentoring session ba(updated july 26)E bay mentoring session ba(updated july 26)
E bay mentoring session ba(updated july 26)ilieoverthesea
 
cyiza_rwanda_economic_recovery_plan_mw_2012
cyiza_rwanda_economic_recovery_plan_mw_2012cyiza_rwanda_economic_recovery_plan_mw_2012
cyiza_rwanda_economic_recovery_plan_mw_2012Cyiza Rwanda
 
Product & brand selection
Product & brand selectionProduct & brand selection
Product & brand selectionRahul Gupta
 
Event Sneak Peek: Web Analytics Intensive 2013
Event Sneak Peek: Web Analytics Intensive 2013Event Sneak Peek: Web Analytics Intensive 2013
Event Sneak Peek: Web Analytics Intensive 2013NordicClick Interactive
 
LIS 748 topic presentation
LIS 748 topic presentationLIS 748 topic presentation
LIS 748 topic presentationshanimal0714
 
CanDo Power Training nieuw
CanDo Power Training nieuwCanDo Power Training nieuw
CanDo Power Training nieuwCanDo Coaching
 
اساتذة قسم المعلومات والمكتبات
اساتذة قسم المعلومات والمكتباتاساتذة قسم المعلومات والمكتبات
اساتذة قسم المعلومات والمكتباتCollege of Arts/Univ. of Basrah
 
ถอดบทเรียน
ถอดบทเรียนถอดบทเรียน
ถอดบทเรียนbuntawee
 
W complete 2008
W complete 2008W complete 2008
W complete 20082008agwc
 
PROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo Dioulasso
PROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo DioulassoPROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo Dioulasso
PROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo DioulassoPallejà Solidari
 
Carbon War Room - CCW Shipping Case Study
Carbon War Room - CCW Shipping Case StudyCarbon War Room - CCW Shipping Case Study
Carbon War Room - CCW Shipping Case Studydschwa238
 
New batteries for iphone 5 by jason galanis
New batteries for iphone 5 by jason galanisNew batteries for iphone 5 by jason galanis
New batteries for iphone 5 by jason galanisSanket Gandhi
 
Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015NordicClick Interactive
 
Turning A Mental Illness Into Your Next Big Idea
Turning A Mental Illness Into Your Next Big IdeaTurning A Mental Illness Into Your Next Big Idea
Turning A Mental Illness Into Your Next Big IdeaJoe Kleinwaechter
 
20110722 final jp
20110722 final jp20110722 final jp
20110722 final jpyt25
 

Viewers also liked (20)

Cognitive Walkthrough Template
Cognitive Walkthrough TemplateCognitive Walkthrough Template
Cognitive Walkthrough Template
 
Vts topola
Vts topolaVts topola
Vts topola
 
Hallyu_FINAL
Hallyu_FINALHallyu_FINAL
Hallyu_FINAL
 
Shiram - space for personal growth
Shiram - space for personal growthShiram - space for personal growth
Shiram - space for personal growth
 
E bay mentoring session ba(updated july 26)
E bay mentoring session ba(updated july 26)E bay mentoring session ba(updated july 26)
E bay mentoring session ba(updated july 26)
 
cyiza_rwanda_economic_recovery_plan_mw_2012
cyiza_rwanda_economic_recovery_plan_mw_2012cyiza_rwanda_economic_recovery_plan_mw_2012
cyiza_rwanda_economic_recovery_plan_mw_2012
 
Product & brand selection
Product & brand selectionProduct & brand selection
Product & brand selection
 
Event Sneak Peek: Web Analytics Intensive 2013
Event Sneak Peek: Web Analytics Intensive 2013Event Sneak Peek: Web Analytics Intensive 2013
Event Sneak Peek: Web Analytics Intensive 2013
 
LIS 748 topic presentation
LIS 748 topic presentationLIS 748 topic presentation
LIS 748 topic presentation
 
CanDo Power Training nieuw
CanDo Power Training nieuwCanDo Power Training nieuw
CanDo Power Training nieuw
 
اساتذة قسم المعلومات والمكتبات
اساتذة قسم المعلومات والمكتباتاساتذة قسم المعلومات والمكتبات
اساتذة قسم المعلومات والمكتبات
 
ถอดบทเรียน
ถอดบทเรียนถอดบทเรียน
ถอดบทเรียน
 
W complete 2008
W complete 2008W complete 2008
W complete 2008
 
PROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo Dioulasso
PROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo DioulassoPROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo Dioulasso
PROJECTE: Instal·lació d'una granja de gallines ponedores a Bobo Dioulasso
 
Carbon War Room - CCW Shipping Case Study
Carbon War Room - CCW Shipping Case StudyCarbon War Room - CCW Shipping Case Study
Carbon War Room - CCW Shipping Case Study
 
Welcome back!!!
Welcome back!!!Welcome back!!!
Welcome back!!!
 
New batteries for iphone 5 by jason galanis
New batteries for iphone 5 by jason galanisNew batteries for iphone 5 by jason galanis
New batteries for iphone 5 by jason galanis
 
Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015
 
Turning A Mental Illness Into Your Next Big Idea
Turning A Mental Illness Into Your Next Big IdeaTurning A Mental Illness Into Your Next Big Idea
Turning A Mental Illness Into Your Next Big Idea
 
20110722 final jp
20110722 final jp20110722 final jp
20110722 final jp
 

Similar to Multimedia UX

Acl3XsIcb_j22h6.pptx
Acl3XsIcb_j22h6.pptxAcl3XsIcb_j22h6.pptx
Acl3XsIcb_j22h6.pptxStonyVsstony
 
Moviemakertutorial 100618093621-phpapp01 (1)
Moviemakertutorial 100618093621-phpapp01 (1)Moviemakertutorial 100618093621-phpapp01 (1)
Moviemakertutorial 100618093621-phpapp01 (1)Shirin Jannoo
 
Non interactive materials
Non interactive materialsNon interactive materials
Non interactive materialsu082929
 
Tubi tv mobile designs
Tubi tv   mobile designsTubi tv   mobile designs
Tubi tv mobile designsJeff Bayer
 
Video Editing in Blender Workshop - v.1
Video Editing in Blender Workshop - v.1Video Editing in Blender Workshop - v.1
Video Editing in Blender Workshop - v.1Eddie Vega
 
Menerapkan efek khusus pada objek produksi eng
Menerapkan efek khusus pada objek produksi engMenerapkan efek khusus pada objek produksi eng
Menerapkan efek khusus pada objek produksi engEko Supriyadi
 
[Free Chapter 1] Determination of Interface Specifications
[Free Chapter 1] Determination of Interface Specifications[Free Chapter 1] Determination of Interface Specifications
[Free Chapter 1] Determination of Interface SpecificationsAlexis Aronis
 
Explaindio is a versatile tool for creating animated videos
Explaindio is a versatile tool for creating animated videosExplaindio is a versatile tool for creating animated videos
Explaindio is a versatile tool for creating animated videosFoyezAhmed10
 
Powell lynetta storyboard_week9
Powell lynetta storyboard_week9Powell lynetta storyboard_week9
Powell lynetta storyboard_week9Walden University
 
Collaborative Subtitling Design Challenge Submission
Collaborative Subtitling Design Challenge SubmissionCollaborative Subtitling Design Challenge Submission
Collaborative Subtitling Design Challenge Submissionakai_megami
 
Introduction lightsworks
Introduction lightsworksIntroduction lightsworks
Introduction lightsworksVisCircle
 
Powell lynetta storyboard_week4
Powell lynetta storyboard_week4Powell lynetta storyboard_week4
Powell lynetta storyboard_week4Walden University
 
423480261-Filmora-Presentation.pptx
423480261-Filmora-Presentation.pptx423480261-Filmora-Presentation.pptx
423480261-Filmora-Presentation.pptxJHONROISAPIAN
 

Similar to Multimedia UX (20)

Moviemaker report
Moviemaker reportMoviemaker report
Moviemaker report
 
EBAY presentation
EBAY presentationEBAY presentation
EBAY presentation
 
Acl3XsIcb_j22h6.pptx
Acl3XsIcb_j22h6.pptxAcl3XsIcb_j22h6.pptx
Acl3XsIcb_j22h6.pptx
 
Moviemakertutorial 100618093621-phpapp01 (1)
Moviemakertutorial 100618093621-phpapp01 (1)Moviemakertutorial 100618093621-phpapp01 (1)
Moviemakertutorial 100618093621-phpapp01 (1)
 
Authoring metaphors
Authoring metaphorsAuthoring metaphors
Authoring metaphors
 
Non interactive materials
Non interactive materialsNon interactive materials
Non interactive materials
 
Tubi tv mobile designs
Tubi tv   mobile designsTubi tv   mobile designs
Tubi tv mobile designs
 
Video Editing in Blender Workshop - v.1
Video Editing in Blender Workshop - v.1Video Editing in Blender Workshop - v.1
Video Editing in Blender Workshop - v.1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Menerapkan efek khusus pada objek produksi eng
Menerapkan efek khusus pada objek produksi engMenerapkan efek khusus pada objek produksi eng
Menerapkan efek khusus pada objek produksi eng
 
[Free Chapter 1] Determination of Interface Specifications
[Free Chapter 1] Determination of Interface Specifications[Free Chapter 1] Determination of Interface Specifications
[Free Chapter 1] Determination of Interface Specifications
 
Rfp 3 d logo 1 23-13
Rfp 3 d logo 1 23-13Rfp 3 d logo 1 23-13
Rfp 3 d logo 1 23-13
 
Adobe Premiere CC Handbook
Adobe Premiere CC HandbookAdobe Premiere CC Handbook
Adobe Premiere CC Handbook
 
Explaindio is a versatile tool for creating animated videos
Explaindio is a versatile tool for creating animated videosExplaindio is a versatile tool for creating animated videos
Explaindio is a versatile tool for creating animated videos
 
Powell lynetta storyboard_week9
Powell lynetta storyboard_week9Powell lynetta storyboard_week9
Powell lynetta storyboard_week9
 
Unit 3 Lesson 09
Unit 3 Lesson 09Unit 3 Lesson 09
Unit 3 Lesson 09
 
Collaborative Subtitling Design Challenge Submission
Collaborative Subtitling Design Challenge SubmissionCollaborative Subtitling Design Challenge Submission
Collaborative Subtitling Design Challenge Submission
 
Introduction lightsworks
Introduction lightsworksIntroduction lightsworks
Introduction lightsworks
 
Powell lynetta storyboard_week4
Powell lynetta storyboard_week4Powell lynetta storyboard_week4
Powell lynetta storyboard_week4
 
423480261-Filmora-Presentation.pptx
423480261-Filmora-Presentation.pptx423480261-Filmora-Presentation.pptx
423480261-Filmora-Presentation.pptx
 

More from Microsoft

Lisa Lane MDes Thesis
Lisa Lane MDes ThesisLisa Lane MDes Thesis
Lisa Lane MDes ThesisMicrosoft
 
2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreads2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreadsMicrosoft
 
MVA student and instructor profiles
MVA student and instructor profilesMVA student and instructor profiles
MVA student and instructor profilesMicrosoft
 
SharePoint customized code analyzer
SharePoint customized code analyzer SharePoint customized code analyzer
SharePoint customized code analyzer Microsoft
 
Built for Man Look Book
Built for Man Look BookBuilt for Man Look Book
Built for Man Look BookMicrosoft
 
Behance prosite beginners guide
Behance prosite beginners guideBehance prosite beginners guide
Behance prosite beginners guideMicrosoft
 
Office 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX ExplorationsOffice 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX ExplorationsMicrosoft
 

More from Microsoft (7)

Lisa Lane MDes Thesis
Lisa Lane MDes ThesisLisa Lane MDes Thesis
Lisa Lane MDes Thesis
 
2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreads2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreads
 
MVA student and instructor profiles
MVA student and instructor profilesMVA student and instructor profiles
MVA student and instructor profiles
 
SharePoint customized code analyzer
SharePoint customized code analyzer SharePoint customized code analyzer
SharePoint customized code analyzer
 
Built for Man Look Book
Built for Man Look BookBuilt for Man Look Book
Built for Man Look Book
 
Behance prosite beginners guide
Behance prosite beginners guideBehance prosite beginners guide
Behance prosite beginners guide
 
Office 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX ExplorationsOffice 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX Explorations
 

Recently uploaded

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Recently uploaded (19)

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

Multimedia UX

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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