search

wet-boew / wet-boew-styleguide

A style guide for the Web Experience Toolkit.
http://wet-boew.github.io/wet-boew-styleguide/index-en.html
36 stars 32 forks source link

Heuristic evaluation - Multimedia player #11

Closed rubinahaddad closed 10 years ago

rubinahaddad commented 10 years ago

_Note: This interface is dependant on the core device or platform components (ex. keyboards, dropdown rendering etc). This component may require additional testing on platforms such as iOS, Android, Blackberry._

Please perform a heuristic review of the following component: Multimedia player audio example, Multimedia player video example, Multimedia player YouTube example,

Performing a heuristic evaluation

  1. Post a comment on this issue indicating that you will perform a heuristic evaluation of the component. If you see that at least three people have already indicated that they are performing a heuristic evaluation, consider reviewing another component.
  2. Use the heuristic template to guide your evaluation.
  3. Make sure that you review all responsive states of the component.
  4. Once you have completed your evaluation, post the results as a comment on this issue as follows:
    • For each heuristic, display the heading containing the letter of the section, and the number of the heuristic. Below each heading, provide the results of your evaluation of that heuristic. (e.g., B. Provide status feedback 1. Your result).
    • Make sure you specify which responsive state each result applies to. If a result applies to all responsive states, specify that it applies to all responsive states.
JxRath commented 10 years ago

Will Review by Jan 31

JxRath commented 10 years ago

Multimedia Player: https://github.com/wet-boew/wet-boew-styleguide/issues/11

A. Please indicate which devices were tested (Desktop/Mobile/Tablet): IE Windows 8.0.7601.17514, HP Desktop, Dell widescreen monitor (1920x1080) Apple iPhone 4, latest iOS 7

General visual note: This black and white audio bar is very visually heavy and will overpower the content. It needs to be made more subtle.

B. Provide status feedback

  1. Does the component always let users know about its current status? IE 8 - Multimedia Player Audio Example: Yes & No. No roll-over visual effects for buttons. The “CC” should be greyed-out if it does not apply to the audio sample (as in this case) In this case the CC button expands the black area above the progress bar but no words appear. The buttons work as expected with a down and right on-click movement. IE renders a black and white dotted line around the extent of the clickable area of the buttons, which does not look nice. The Speaker icon to the far right when clicked was expected to act as a volume control, but instead changes to a mute button once clicked.

On-hover, the controls show tool tips; most of which are OK. The “Fast” button should be re-written as “Fast-Forward”.

When zooming in on the control in IE 8 at 400%, timers appear on each end of the progress bar, one on the left showing the elapsed time played and the time on the right showing the total play length of the audio track. They timers do not appear at any other zoom level in IE. When the Timers appear the blue and white progress bar disappears.

iOS 7 - Multimedia Player Audio Example: Yes & No. No roll-over or on-hover effects for buttons. The “CC” is greyed-out as it does not apply to the audio sample. However if the CC button is clicked it works anyway, expanding the black area above the progress bar. The buttons work as expected. The progress bar in iOS 7 looks different than in IE 8. IE 8 is white and blue, iOS 7 is mid grey and blue.

When pinch zooming in on the control in iOS 7 landscape mode, timers appear on each end of the black control box, one on the left showing the elapsed time played and the time on the right showing the total play length of the audio track. Unfortunately when these timer controls appear the progress bar no longer shows up. The timers, with no progress bar, is the default view for portrait mode.

IE 8 - Multimedia Player Video Example: Same comments as the Audio player with the following differences: All 3 Multimedia video examples worked in IE 8. The YouTube Example did not work, but I was in a protected Govt. Domain which was likely blocking YouTube.

Timer appears at 200% zoom not at 400%. The close captioning (CC) button worked, and the text that showed up there was a good size and contrast. On roll-over the right edge of the CC button was “clipped” with part of the button missing. All 3 video examples worked in IE 8.

iOS 7 - Multimedia Player Video Example: Same comments as Audio player with the following differences: The black UI controls appear underneath the Video image. When the user clicks play, the controls disappear. On Rolling over the controls re-appear, but it defaults to iOS 7 video controls. The Close Captioning did not work on any of the examples.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. Does the component give immediate, easy to understand feedback? IE 8 Multimedia Player Audio Example: Mostly yes, though speaker control will be confused with a volume control, not be expected as just for mute. Also Timer controls are hidden until you view at 400%.

iOS7- Multimedia Player Audio Example: No. Fast-Forward button is almost impossible at 100% to use due to the placement so close to the play button. Mute button does not work. Timer controls are hidden unless user pinch zooms in landscape mode, then progress bar disappears. Default view of progress bar is different depending if landscape or portrait mode.

IE 8 - Multimedia Player Video Example: Same comments as Audio Example.

iOS 7 - Multimedia Player Video Example: Same comments as Audio Example with the following additions: After working successfully on a previous day, when I went back in to continue testing the video controls on the black bar (rewind, play, fast-forward etc. would not render. Instead it showed squared bottom “U” shapes instead of the proper icons. Generally the control feedback is “easy to understand” but has glitches as mentioned above.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. Will the user have enough visual cues to easily complete the component’s tasks? IE 8 - Multimedia Player Audio Example: Mostly yes, though speaker control will be thought to be for volume control, not just for mute. Also Timer controls are hidden until you view at 400%.

iOS 7 - Multimedia Player Audio Example: Mostly yes, though speaker/mute control does not work in iOS 7. Fast-Forward was almost impossible to activate at 100%.

IE 8 - Multimedia Player Video Example: Same comments as Audio Example.

iOS 7 - Multimedia Player Video Example: No. Certain controls (Mute, CC, Fast-forward) did not work in iOS 7.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. If some part of a component is hidden, can users see something that allows them to bring it in and out of view?

IE 8 - Multimedia Player Audio Example: No. Timer controls are hidden until you view at 400%. There is no way a user would guess this.

iOS 7 - Multimedia Player Audio Example: No. Timer controls are hidden unless user pinch zooms in landscape mode. Progress bar cannot be made to appear in portrait mode. CC controls do not work properly.

IE 8 - Multimedia Player Video Example: Mostly yes, though speaker control will be thought to be for volume control, not just for mute. Also Timer controls are hidden until you view at 400%. Tool-tips appear on hover, which is an industry standard.

iOS 7 - Multimedia Player Video Example: Mostly yes, though speaker/mute, Fast-forward and CC controls do not work in iOS 7. Timer controls appear and disappear depending on zoom level and screen orientation. Alt tag/tool-tips for buttons do not work. When video is playing all controls disappear. The iOS 7 standard controls re-appear if the user touches the playing video.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

C. Match real world conventions

  1. Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable?

IE 8 & iOS 7 - Multimedia Player Audio Example: No. Speaker control is for mute only and not for volume (and does not work in iOS 7). Fast-Forward and Rewind controls move the audio progress bar in approximately 10 second “jumps” rather than smoothly second, by second.

In iOS the user must first hit the “Play” button before the “Fast-forward” button will work. Fast-forward button can only be used if the user has zoomed in on the controls – touch targets are too close together.

IE 8 Multimedia Player Video Example: No. Same as Audio example.

iOS 7 - Multimedia Player Video Example: No. Same as Audio example with additions: Controls change look and feel when activated in iOS 7.

  1. When users perform actions within the component, are the results they get what they would commonly expect?

IE 8 - Multimedia Player Audio Example: No. Speaker control is for mute only and not for volume. Fast-Forward and Re-wind do not operate smoothly, but in chunks of time. CC should be greyed out (or not displayed) if there is no CC text.

iOS 7 - Multimedia Player Audio Example: No. Speaker control does not work. Fast-Forward only works if Play button has been clicked first. Fast-Forward and Rewind do not operate smoothly, but in chunks of time. CC button operates even though it is greyed out.

IE 8 & iOS 7 - Multimedia Player Example: No. See comments above.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout?

IE 8 & iOS 7 - Multimedia Player Audio Example: No. Speaker control is for mute only and not for volume (and does not work in iOS 7).

IE 8 & iOS 7 - Multimedia Player Example: No. See comments above.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. Is there a logical and consistent usage of elements throughout the component?

IE 8 & iOS 7 - Multimedia Player Audio Example: Yes, with exceptions noted above.

IE 8 - Multimedia Player Example: Yes, with exceptions noted above.

iOS 7 - Multimedia Player Example: No. Once activating the video, the controls change to iOS 7 versions.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component?

IE 8 Multimedia Player Audio Example: Yes, though “Fast” in tooltip should be “Fast-Forward”

iOS 7 - Multimedia Player Audio Example: No tooltips appear, so N/A.

IE 8 & iOS 7 Multimedia Player Video Example: As commented above.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. Is the experience consistent across screen sizes?

IE 8 Multimedia Player Audio Example: No, timer controls only appear at 400% zoom.

iOS 7 Multimedia Player Audio Example: In Landscape mode the user sees a progress bar and no timer controls unless they “pinch zoom” in. In portrait mode there is no progress bar, and the user only sees timer controls.

Also placement of the Rewind, Play and Fast-Forward controls are too close together in iOS 7 making it difficult or impossible to trigger the correct control at times. Fast-Forward is especially hard to hit at a 100% zoom level.

IE 8 & iOS 7 Multimedia Player Video Example: As commented above.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

E. Help users recognize, prevent and recover from errors

  1. Does the component help to prevent users from making errors whenever possible? IE 8 Multimedia Player Audio Example: Lack of grey-out on CC control will cause user error. They will believe that there is close-captioning even when there is not.

iOS 7 Multimedia Player Audio Example: Tight spacing of controls will cause user error at 100% zoom level. Close captioning is greyed out but is clickable anyway.

IE 8 & iOS 7 Multimedia Player Video Example: As commented above.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. When there is an error, is it simple and informative?

IE 8 & iOS 7 Multimedia Player Audio Example: N/A – no error messages

IE 8 & iOS 7 Multimedia Player Video Example: N/A – no error messages

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7.

  1. Does it provide information to fix or correct the error?

IE 8 & iOS 7 Multimedia Player Audio Example: N/A – no error messages

IE 8 & iOS 7 Multimedia Player Video Example: N/A – no error messages

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it. No Error messages, Page is blank; does not render Video placeholder box or controls.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7. No error messages or explanation.

F. Design for human interaction

  1. When using the component:

a. Is the layout/style intuitive?

IE 8 & iOS 7 Multimedia Player Audio Example: Style is too black and visually heavy, it will overpower the content.

IE 8 & iOS 7 Multimedia Player Video Example: Same as above. Many controls issues noted above will impair full functionality.

IE 8 - Multimedia Player YouTube Example: Did not run in IE 8, but I was in a ‘protected’ Gov. domain that was likely blocking it. No Error messages, Page is blank; does not render Video placeholder box or controls. Not intuitive.

iOS 7 - Multimedia Player YouTube Example: Did not run in iOS 7. No error messages or explanation.

b. Are the interactions intuitive?
IE 8 & iOS 7 Multimedia Player Audio Example: Yes, with exceptions noted above.

IE 8 & iOS 7 Multimedia Player Video Example: Yes, with exceptions and problems noted above.

IE 8 & iOS 7- Multimedia Player YouTube Example: Did not work.

  1. Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons?

IE 8 Multimedia Player Audio Example: Yes, with exceptions noted above.

iOS 7 Multimedia Player Audio Example: No. Buttons are too close together to operate at 100%. User needs to zoom in to operate controls properly in some cases.

IE 8 & iOS 7 Multimedia Player Video Example: Yes, with exceptions and problems noted above.

IE 8 & iOS 7- Multimedia Player YouTube Example: Did not work.

  1. If the task can't be completed in one session, does the user have an option to save and return to it at a later time?

IE 8 & iOS 7 Multimedia Player Audio Example: N/A

IE 8 & iOS 7 Multimedia Player Video Example: N/A

IE 8 & iOS 7- Multimedia Player YouTube Example: Did not work.

G. Keep it simple

  1. Does the component display only the information needed by the user at any given point in time?

IE 8 & iOS 7 Multimedia Player Audio Example: No. Non operational controls (CC) may be more information than the user needs at a given moment.

IE 8 Multimedia Player Video Example: Generally yes but the “heavy” UI controls distracted from the video.

iOS 7 Multimedia Player Video Example: Yes, Controls disappeared while video was playing and did not distract, or take up screen real-estate from the viewing experience. Controls reappeared if the user touched the screen.

IE 8 & iOS 7- Multimedia Player YouTube Example: Did not work.

  1. Overall, are user interactions kept as simple as possible?

IE 8 & iOS 7 Multimedia Player Audio Example: Yes, with exceptions noted above. IE 8 Multimedia Player Video Example: Generally yes but the “heavy” UI controls distracted from the video.

iOS 7 Multimedia Player Video Example: Yes, Controls disappeared while video was playing and did not distract, or take up screen real-estate from the viewing experience. Controls reappeared if the user touched the screen.

IE 8 & iOS 7- Multimedia Player YouTube Example: Did not work.

  1. Does the component use plain language?

IE 8 & iOS 7 Multimedia Player Audio Example: Yes.

IE 8 & iOS 7 Multimedia Player Video Example: Yes & N/A.

IE 8 & iOS 7 Multimedia Player YouTube Example: Did not work.

lonnycameron commented 10 years ago

A. Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet):

Tablet: Nexus 7 Operating system: Android 4.3 Browser: Google Chrome and Firefox

B. Provide status feedback

  1. Does the component always let users know about its current status?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

The CC (Closed Captioning) button on the toolbar is grey. Generally, when a button is grey it typically means that it is not available; however, a user can tap on this button.

The choice of blue on grey in the progress bar may be difficult for some users to distinguish the contrast so they can clearly understand the current status. Might be even more pronounced with users who are colour blind.

The buttons for Back, Play, and Forward are very small. Also, the distance between these buttons is very narrow. Users with motor disabilities may find it problematic to hit the target zone to tap in the right area.

Comment below is applicable to Google Chrome - Multimedia player YouTube Example:

The black and white play button in the toolbar did not work in Google Chrome, but did work in Firefox. This is different from the red and white play button that appears in the middle of the screen like other standard youtube videos. When the user taps on the standard red and white yourtube button the video plays as expected using a Chrome browser.

Comment below is applicable to Firefox - Multimedia player YouTube Example:

When a video is playing and the user taps on the video, a translucent black bar with a pause button appears. This behavior does not happen in Google Chrome. The standard behavior of the youtube app is that when the user taps on the video a small translucent black circle with pause button appears in the middle of the screen. Should this be expected behavior for this component?

  1. Does the component give immediate, easy to understand feedback?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes, when the user taps on the play button the UI immediately switches to a pause button following UI conventions and matching user expectations.

Comment below is applicable to the Google Chrome and Firefox - Multimedia Player Audio Example.

No, not for the Closed Captioning (CC) area. When the user taps on the CC (Closed Captioning) button, a black box appears. If there is no closed captioning should the black box appear?

  1. Will the user have enough visual cues to easily complete the component’s tasks?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

This area might be a candidate for user feedback (usability testing) because of the issues outlined above and below.

  1. If some part of a component is hidden, can users see something that allows them to bring it in and out of view?

Google Chrome and Firefox - Multimedia Player Video Example:

It is not clear what the link labelled “Transcript” is going to do before the user taps on it. Some users might think that it is going to take them to another page. In reality what happens is the Transcript link disappears and the actual transcript is displayed. It might be beneficial to add an expand/collapse component to the “Transcript” link. This will instruct the user that they are going to stay on this page after they tap on this link.

C. Match real world conventions

  1. Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

No, not for the mute button. When the user taps on the mute button the icon for mute is not different enough to clearly tell the user that the volume has been muted.

  1. When users perform actions within the component, are the results they get what they would commonly expect?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Generally yes, but with exceptions noted above.

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

The fast forward and rewind buttons do not show how much you are advancing rewinding. Is it 10 seconds, 30 seconds, etc …?

There is no numerical timer that tells the user the total length of the audio/video segment and where they are in the segment, e.g. 5:00 hour/min of 10:00 hour/min audio segment.

It should also tell the user what the unit of measure is, e.g. seconds, minutes, hours.

  1. Is there a logical and consistent usage of elements throughout the component?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes.

  1. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

There is no text on the component. Only icons are used to communicate status.

  1. Is the experience consistent across screen sizes?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes it is consistent when switching between landscape and portrait.

E. Help users recognize, prevent and recover from errors

  1. Does the component help to prevent users from making errors whenever possible?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes.

  1. When there is an error, is the messaging simple and informative?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

No. When the device loses WiFi connectivity the user is not presented with any error. After the user taps on the play button, it briefly switch to the Pause button (as expected), but then switch back to the Play button. No error.

  1. Does it provide information to fix or correct the error?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

No. See issue identified above.

F. Design for human interaction

  1. When using the component: a. Is the layout intuitive?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes.

b. Are the interactions intuitive?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes.

  1. Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

As noted above the Rewind, Play, and Fast Forward buttons are too close.

  1. If the task can't be completed in one session, does the user have an option to save and return to it at a later time?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

No, the user can’t “save” where they are, if they are part way through listening to the audio/video segment. However, the component will remain in the same state of playing provided the browser does not change state like tapping the browser refresh button. This follows UI standards and matches user expectations. It behaves the same way as youtube.

G. Keep it simple

  1. Does the component display only the information needed by the user at any given point in time?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Yes

  1. Overall, are user interactions kept as simple as possible?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Generally, yes with the exceptions noted above.

  1. Does the component use plain language?

Comments below are applicable to the following components:

Google Chrome and Firefox - Multimedia Player Audio Example Google Chrome and Firefox - Multimedia Player Video Example: Google Chrome and Firefox - Multimedia player YouTube Example

Not applicable. There is no text displayed on this widget.

nrustand92 commented 10 years ago

Audio player doesn’t work in IE8 & Firefox 26.0 desktop

Youtube Player A. Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet): IE8 & Firefox 26.0 desktop

B. Provide status feedback

  1. Does the component always let users know about its current status? Yes. Note in IE8, the video player is pretty much an embedded Youtube video (IE8). In Firefox, mostly yes b/c control bar icons are highlighted w/ white dotted box if clicked. It doesn’t indicate video length & audio icon tells users if it’s muted or not.
  2. Does the component give immediate, easy to understand feedback? Yes. Progress bar & timer indicate how much of the video we’ve seen, pause/play button + the video itself tells users whether video is playing or being paused, CC button is highlighted when it’s turned on, user can roughly tell volume by the sound icon on the control bar,etc (IE8). Yes except for video length & audio icon (Firefox)
  3. Will the user have enough visual cues to easily complete the component’s tasks? Yes (IE8). Yes except for video length & audio icon (Firefox)
  4. If some part of a component is hidden, can users see something that allows them to bring it in and out of view? Yes, just click any icons in the control bar. E.g., volume level click audio icon, video quality click the setting button (IE8). Mostly yes (e.g., CC can be hidden/displayed), but audio icon is misleading: can mute/ turn on volume, but can’t control loudness.

C. Match real world conventions

  1. Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable? Mostly yes. The control bar has no fast forward & rewind buttons. However, direct manipulation of progress bar will do the job (IE8). Things are easily recognizable, but again, audio icon violates expectation & can’t resize video (Firefox).
  2. When users perform actions within the component, are the results they get what they would commonly expect? Yes (IE8). Yes except for audio icon (Firefox)

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout? Since the YT player in IE8 is pretty much an embedded player, not sure if it conforms to Canadian gov’s standards (IE8). Presumably yes (Firefox)
  2. Is there a logical and consistent usage of elements throughout the component? Yes (IE8). Yes except for volume icon (Firefox)
  3. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component? Yes. Icons are straightforward, especially for users already accustomed to Youtube. Words in CC are understandable (IE8). Yes (Firefox)
  4. Is the experience consistent across screen sizes? Yes (IE8 & Firefox)

E. Help users recognize, prevent and recover from errors

  1. Does the component help to prevent users from making errors whenever possible? All icons allow for users to undo their actions (IE8 & Firefox)
  2. When there is an error, is the messaging simple and informative? No messaging exists (IE8 & Firefox)
  3. Does it provide information to fix or correct the error? No, but see comment in E1 (IE8 & Firefox)

F. Design for human interaction

  1. When using the component:

a. Is the layout intuitive? Yes (IE8 & Firefox)

b. Are the interactions intuitive? Yes (IE8). Mostly yes, except for volume control (Firefox)

  1. Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons? Yes (IE8 & Firefox)
  2. If the task can't be completed in one session, does the user have an option to save and return to it at a later time? N/A (IE8 & Firefox)

G. Keep it simple

  1. Does the component display only the information needed by the user at any given point in time? Yes (IE8). The problem is some components that should be displayed don’t show up (e.g. audio icon + video timer) (Firefox).
  2. Overall, are user interactions kept as simple as possible? Yes (IE8 & Firefox)
  3. Does the component use plain language? Yes (IE8 & Firefox)

Multimedia Video Player A. Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet): IE8 & Firefox 26.0 desktop

B. Provide status feedback

  1. Does the component always let users know about its current status? Mostly yes b/c control bar icons are highlighted w/ white dotted box if clicked. It doesn’t indicate video length & audio icon tells users if it’s muted or not (both). For Firefox, a buffering icon appears (not in IE8), which informs users that video is loading if one fast forward the video. It may be a good idea to add the same feature in IE8.
  2. Does the component give immediate, easy to understand feedback? Yes except for video length & audio icon (both browsers). Component doesn’t indicate how long video is, how much time has passed, and audio icon doesn’t control loudness, only mute/turn it on.
  3. Will the user have enough visual cues to easily complete the component’s tasks? Mostly yes, but can’t control volume (both)
  4. If some part of a component is hidden, can users see something that allows them to bring it in and out of view? Yes, e.g., CC can be displayed/hidden (both)

C. Match real world conventions

  1. Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable? Mostly yes, except for audio button, absence of video timer, & the fact that you can’t resize the video although there are 3 sizes in the working examples (both)
  2. When users perform actions within the component, are the results they get what they would commonly expect? Not for volume icon, but the rest, yes (both)

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout? Presumably yes (both)
  2. Is there a logical and consistent usage of elements throughout the component? Yes except for volume icon (both)
  3. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component? Yes (both)
  4. Is the experience consistent across screen sizes? Yes (both)

E. Help users recognize, prevent and recover from errors

  1. Does the component help to prevent users from making errors whenever possible? Actions performed by icons/buttons can be undone by clicking them. Or one button undoes the other (e.g., fast forward VS rewind) (both)
  2. When there is an error, is the messaging simple and informative? No message (both)
  3. Does it provide information to fix or correct the error? Actions performed by icons/buttons can be undone by clicking them. Or one button undoes the other (e.g., fast forward VS rewind) (both)

F

  1. When using the component:

a. Is the layout intuitive? Yes (both)

b. Are the interactions intuitive? Mostly yes, except volume control (both)

  1. Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons? Yes (both)
  2. If the task can't be completed in one session, does the user have an option to save and return to it at a later time? N/A (both)

G. Keep it simple

  1. Does the component display only the information needed by the user at any given point in time? The problem is some components that should be displayed don’t show up (e.g., video timer + audio icon) (both)
  2. Overall, are user interactions kept as simple as possible? Yes (both)
  3. Does the component use plain language? Yes (both)
rubinahaddad commented 10 years ago

@neoinsight @ballantr @matyeo Would you be able to do this one next please?

ballantr commented 10 years ago

Multimedia Player Reviews Summary

Device/OS/Browsers Reviewed

Device OS Browsers
Laptop (24 inch Monitor) Windows 8.1 Chrome 33.0.1750.146 m
Nexus 7 Android 4.3 Chrome
Nexus 6 Android 4.3 Firefox
HP Desktop Windows IE Windows 8.0.7601.17514
Apple iPhone 4 Latest iOS 7 unknown

Summary

Notes:

All of the reviewers ran into bugs or other unexpected issues that prevented the players from running correctly. This review cannot be fully completed until these bugs have been removed (and / or till players that are not expected to work on the devices or browsers in question, don’t show on those devices or browsers).

For example reviewer nrustand92 reported missing controls on FF. Another reviewer noted that on iOS the Closed Captioning did not work on any of the examples. On the Nexus 7 / Android / Chrome, the Fast-forward button actually skips BACKWARD, and the Fast-rewind actually does a BACK TO BEGINNING. Also clicking in the middle of the scrubber is has inconsistent rexults. Sometimes jumping to the correct spot, sometimes going back to the beginning. In some device/browser instances there are no roll-over visual effects / tooltips for buttons in MM Player.

One reviewer noted that when the device loses WiFi connectivity the user is not presented with any error. After the user taps on the play button, it briefly switch to the Pause button (as expected), but then switch back to the Play button. It is not clear to this reviewer whether that is something we can manage, but it will present a problem to users.

This is not a bug summary, and the priorities below assume the most significant bugs are addressed first.

Priorities for improvement

  1. Speaker control: The expectation is that it can be used to control the volume on a continuous scale, not just for ON/OFF muting. This control worried all reviewers. (Priority: Medium-high)
  2. The control set : The buttons for Back, Play, and Forward are very small, and the distance between these buttons is very narrow. Users with motor disabilities may find it problematic to tap in the right area. This is compounded by the fact that clicking/touching in the middle of the player does not always start/stop the play in every device/browser case. (Priority: Medium-high)
  3. The Play / Pause in the middle of the screen: The reviewers pointed out that it is typical to be able to start and stop video playing by clicking in the middle of the video. In some device/browsers this worked, and in others not. (Priority: Medium)
  4. The Play / Pause in the middle of the screen: the Play symbol in the middle of the video frame was not visible in all device/browser instances. This would be particularly useful given the very small size of the Play / Pause on the control bar. (Priority: Medium)
  5. The Speaker control: The “Muted” icon is not very salient, so on small displayers users may not notice that the speaker is muted. (Priority: Medium)
  6. The Scrubber and/or the timers: One reviewer felt that the choice of color contrast in the scrubber area should be increased for visibility. (Priority: Medium)
  7. The CC Button: The CC looks disabled when it is in fact enabled, but not selected. (Priority: Low-Medium)
  8. The CC Button: The CC should disabled (or not be visible) when there is no content to show (Priority: Low-Medium)
  9. The Scrubber and/or the timers: At least two of the reviewers were disturbed by the fact that they could not see the run time & current position time, and/or that you have to zoom in 400% to see them. (Priority: Low-Medium)
  10. The control set : The style of the control strip is very visually heavy. One reviewer remarked that it will overpower the video content. (Priority: Low-Medium)
  11. The fast-forward control: In chrome today it shows “Fast forward” (it said “Fast” when originally reviewed). A hyphen should be used, as in “Fast-forward”. (Priority: Low-Medium)
  12. The fast-forward control: Arguably this is NOT in fact a fast-forward, as it does not play the media at high speed, but a Skip forward in relatively large steps.
rubinahaddad commented 10 years ago

@ballantr For # 4 which browsers devices? I couldn't find this info in the heuristics above.

rubinahaddad commented 10 years ago

@JxRath @lonnycameron @ballantr @nrustand92 How is the following mock-up for the visual changes? I removed the fast-forward and rewind buttons, since they aren't common practice anymore.

cc/ @LaurentGoderre @thomasgohard @pjackson28

rubinahaddad commented 10 years ago

video3

LaurentGoderre commented 10 years ago

I love it!! great job @rubinahaddad. Could the mockup depict what happens when a user selects the volume button?

LaurentGoderre commented 10 years ago

Btw, there shouldn't be bars on the side

LaurentGoderre commented 10 years ago

Isn't the convention for the volume button to be on the right?

rubinahaddad commented 10 years ago

video4

rubinahaddad commented 10 years ago

Found a better screenshot of the player.

So for the mock-up above the audio is shown. Youtube shows it only when the user selects the speakerphone, but i don't think it would be a problem if it’s always visible. This is how the Windows media player works.

As for the volume on the left, i initially had it on the right, but because i think its a primary task, instead of a secondary (CC and share) i grouped it with play and the timers. The Youtube player is very similar to what is mocked-up up.

LaurentGoderre commented 10 years ago

Having it always visible has the advantage of not moving the text every time and when clicking on the volume button it can be a toggle while the slider would be a volume control.

Thoughts?

rubinahaddad commented 10 years ago

@LaurentGoderre my thoughts as well!

nrustand92 commented 10 years ago

Good job, @rubinahaddad! Anything to resize the player?

LaurentGoderre commented 10 years ago

The player resizes to the layout. It's fully responsive.

JxRath commented 10 years ago

In your new mockups the controls are now taking up more prominence as you've bumped some of the controls to a second line, thereby doubling the area for controls. The controls are about 25% of the space accorded to the video or 20% of the total. Are they important enough for that level of real estate? Was it made that large to provide better moblie touch targets?

The contrast ratio between the white text on the dark grey background passes the contrast standard for AA and AAA for both large and small text and all color blindness types.

The contrast between the blue progress bar and the dark grey bkg is not enough for colorblind (for either AA or AAA standard) as they are too tonally similar. To be fair the online color test ( http://contrast-a.dasplankton.com/ ) is for text on backgrounds so may not fully apply to your progress bar. You could also make the progress bar thinner and brighter to save on the prominece/real estate issue and increase contrast ratio. You may need some indication of progress, but it likely doesn’t need to be so fat. In iOS some of the progress indicators are only a couple of pixels high, but that’s likely too thin for this application and for all users. Need to find the happy medium.

Is the “share icon” going to be universally understood? Likely not; but as long as the actions that occur after the click are obvious then you’re likely OK. As a backup the user would copy paste the URL of the page that the video is on if they really want to share it.

JxRath commented 10 years ago

Forgot to mention...what does the contrast of the greyed out CC control look like on the grey background? Will there be enough contrast to both be visible and to still look greyed out?

LaurentGoderre commented 10 years ago

The grey progress bar was a Chrome bug that was fixed.

rubinahaddad commented 10 years ago

Thanks @JxRath !

The controls are that large for mobile touch targets, before they were too small. I also have it on 2 separate lines to help with the responsive layout. If it was on the same line the timeline in my opinion would be too small for scrubbing.

In terms of making the progress bar thinner, I don't think it would pass the touch target min height of 8 mm. I'll look into changing the tone though.

For the share icon, we have to change it to the open square with the arrow because its the one Bootstrap is using, but its a good point, I'm not sure how universally known they are.

As for the greyed out CC that we saw before, working on that as well (Potentially a modified CC state icon, like the way the speakerphone works), but the default will be the same white as the other buttons. From the HE the grey didn't make sense as it looked disabled.

LaurentGoderre commented 10 years ago

Unfortunately we probably can't use a modified icon because the icon is a bootstrap one.

rubinahaddad commented 10 years ago

After doing some tests, changing the blue to a lighter/more vibrant blue helps with the grey/blue colour contrast, but it makes the whit/blue colour contrast fail. Arguably i think the colour difference between the blue and white is more important, as that is what shows where you are.

LaurentGoderre commented 10 years ago

@rubinahaddad please don't do any testing with the dark gray because it was caused by a bug. It is supposed to be white.

rubinahaddad commented 10 years ago

@LaurentGoderre oh no no i was doing it with the grey of the player

rubinahaddad commented 10 years ago

video_new

rubinahaddad commented 10 years ago

So i left a white outline to at least make the contrast with the grey better. Since we have to use colour to show the CC difference i used a blue that passed colour contrast, but still kept it in the same shade as the bar. As for the Share, this would behave similar to the share this page function, but it would share the YouTube link instead.

nrustand92 commented 10 years ago

@LaurentGoderre @rubinahaddad Sorry, my question about the resizing of the player wasn't about the responsiveness of the player to the layout. I was asking if there's a mechanism for the users to put the player in full screen?

LaurentGoderre commented 10 years ago

I don't think fullscreen is in the roadmap for now because it's not in the HTML5 spec. Chances are that it can't reliably be implemented. Furthermore, captions would not work in fullscreen mode.

LaurentGoderre commented 10 years ago

@rubinahaddad hmmm...interesting that you mader the captions area the same color as the interface.

The share like that could obscure some important information though.

nrustand92 commented 10 years ago

@rubinahaddad does the share icon have to be implemented within the video player? Youtube has a series of tabs underneath the video, 1 of which is "Share." I.e., what if we put it underneath?

rubinahaddad commented 10 years ago

video7

rubinahaddad commented 10 years ago

@LaurentGoderre What if we kept it black? I think it stands out more as black which is better

@nrustand92 What about putting it top right? YouTube is a different context, the whole page is about that video whereas in our context it will most likely be a part of a bigger page so we need it to be noticeable.

nrustand92 commented 10 years ago

Yes sure, top right is fine with me

nrustand92 commented 10 years ago

@rubinahaddad, what if the audio control is implemented vertically like this....perhaps the control can look cleaner overall?

opera-volume

/cc @thomasgohard

LaurentGoderre commented 10 years ago

With this design there is no easy way to mute.

nrustand92 commented 10 years ago

Add a mute icon? If that's too much, the original control w/ horizontal bar should be fine

rubinahaddad commented 10 years ago

Closing since all improvements have been implemented!

LaurentGoderre commented 10 years ago

All of them? Are you sure?

rubinahaddad commented 10 years ago

@LaurentGoderre All the improvements related to this Heuristic evaluation are closed. There is one bug though : https://github.com/wet-boew/wet-boew/issues/5169

There are still some multimedia improvements, but not directly related to this ticket so i figured i would close it. Should i reopen?

LaurentGoderre commented 10 years ago

No, I'm glad I was able to address most of them

LaurentGoderre commented 10 years ago

wet-boew/wet-boew#5169 could be fixed by removing this very annoying overlay

rubinahaddad commented 10 years ago

@LaurentGoderre It's a pretty common pattern for video, so removing it would go against what the user expects. So I would recommend not to remove it.

LaurentGoderre commented 10 years ago

It's invisible....there is no icon. It's there just to catch clicks

rubinahaddad commented 10 years ago

It’s visible on most browsers, and it should be on all. This is what it looks like on my mobile (S4 Chrome) - It’s an old screenshot

screenshot_2014-05-30-11-36-02

LaurentGoderre commented 10 years ago

It's probably the OS that adds it because it's not coming from us I think

neoinsight commented 10 years ago

@rubinahaddad Is this implemented on a site anywhere - so we could get mobile participants to try it?

rubinahaddad commented 10 years ago

@neoinsight not yet. It will be in the next release - so the first week of July.