Heuristic evaluation - Light box

[rubinahaddad]

Please perform a heuristic review of the following component: Light box 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, create a heading containing the letter of the section, a period and the number of the heuristic (e.g., ## A.1).
   • Below each heading, provide the results of your evaluation of that heuristic. 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.

[rubinahaddad]

A. Please indicate which devices were tested

Desktop: IE 9

B. Provide status feedback

1. No – The only hover-over state is the cursor change which is not obvious enough.
   Things done well: When you select a lightbox selection it does takes the screen focus so the state is obvious to the user. Also, the image number and total # of images in the gallery are present in the modal box.
2. Yes – the background changes to dark grey as soon as the user selects an image. When the user selects a next or previous arrow the images change based on the image position in the gallery
3. No – Even though the arrows are present on large/medium screens they are too far from the image so they are easily lost. Everything else is ok.
4. Yes – Clicking an image will open the view, and selecting the exterior of the image/Close button will close the view. Hover state should be more obvious. (B.1)

C. Match real world conventions

1. Yes – this is a standard image gallery
2. No – Usually when a user clicks on the right side of the image they would go to the next image. Similarly if the user clicks on the left side of the image they would go to the previous image. Currently clicking anywhere in the image goes to the next image.

D. Apply standards and ensure consistency

1. Yes – Consistent icons/interactions
2. No – the Close X button should always be in the top right – not always there (Modal popup example)
3. Yes – Close and Next/Previous buttons are all clear
4. Yes

E. Help users recognize, prevent and recover from errors

1. 2. 3. N/A

F. Design for human interaction

1.a. Yes 1.b. No – See C.2, D.2

2. Yes
3. N/A

G. Keep it simple

1. Yes – Only when the user clicks on the image they see more.
2. Yes
3. Yes

[DesignbagGT]

A. Please indicate which devices were tested (Desktop/Mobile/Tablet):

Tested on Apple MacBook Air (OS 10.9), with Firefox 26.0, Safari 7.0 (9537.71) and Chrome 30.0.1599.101

B. Provide status feedback

1. Does the component always let users know about its current status? Not for anchor links or image links.

When light box was launched, the Next/Back and Close link hover state are too subtle.

1. Does the component give immediate, easy to understand feedback? Yes
2. Will the user have enough visual cues to easily complete the component’s tasks?

Mostly.

Would consider adding the text label “Close” opposite the “X” in light box UI to cater for all learning styles and variances in UI perception.

Would consider adding the text label “Previous” opposite the “<” arrow in light box UI to cater for all learning styles and variances in UI perception.

Would consider adding the text label “Next” opposite the “>” arrow in light box UI to cater for all learning styles and variances in UI perception.

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

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? Yes.
2. When users perform actions within the component, are the results they get what they would commonly expect? No.

Distance of Previous and Next button from the image/light box area can cause user to accidentally close the light box if accuracy whining clicking arrows is not 100%. Would expect to be able to click both side of light box image to navigate through image gallery.

Display of magnifying glass with minus (-) symbol when hover outside of light box image area was unusual.

Checkbox selection issue for AJAX - Example 3 light box: Once focus is gained (via tabbing), the standard accessibility method to select a checkbox is to use the SPACEBAR. However, clicking the SPACEBAR closes the light box. Issue occurred in all browsers tested.

Also, placement of UI buttons within AJAX - Example 3 is a little inconsistent with common standards. Normally positive or progress button are on right, and negative, go back buttons are on left.

Solution: Place button labelled “Submit - default appearance” on right of light box UI. Place button labelled “Reset - default appearance” on left of light box UI.

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout? Yes.
2. Is there a logical and consistent usage of elements throughout the component? Mostly - see points above.

Also, placement of the Close model window breaks the UI pattern employed in all other light boxes.

1. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component? Yes.
2. Is the experience consistent across screen sizes? Yes (Desktop and iPod)

Tested at: 1920 x 900 1280 x 900 980 x 1280 800 x 600 600 x 800 768 x 1024 360 x 640 320 x 480

E. Help users recognize, prevent and recover from errors

1. Does the component help to prevent users from making errors whenever possible?
3. When there is an error, is it simple and informative? Print error. When printing open light box, the background page printed with the light box content over-printing on it - this making it unreadable.

Expected: When a light box is open and user prints, would expect only the contents of the light box to print and not the background content.

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

F. Design for human interaction

1. When using the component:

a. Is the layout intuitive? Cannot see any major barriers to understand the layout.

b. Are the interactions intuitive? Cannot see any major barriers to understand the interactions.

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.

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?
2. -

G. Keep it simple

1. Does the component display only the information needed by the user at any given point in time? Yes.
2. Overall, are user interactions kept as simple as possible? Mostly. See point above for checkbox within AJAX light box.
3. Does the component use plain language? Yes.

[JxRath]

Will Review by Jan 31

[JasonSa]

Will review by Jan 31

[rubinahaddad]

@JasonSa Thanks for your help on the heuristic evaluations! We already have 3 evaluators committed to this component, would you mind choosing a different component? There are plenty where no one has signed up so we need all the help we can get!

[JasonSa]

Will do

From: Rubina Haddad [mailto:notifications@github.com] Sent: January 14, 2014 12:46 PM To: wet-boew/wet-boew-styleguide Cc: Saunders,Jason [NCR] Subject: Re: [wet-boew-styleguide] Heuristic evaluation - Light box (#7)

@JasonSa https://github.com/JasonSa Thanks for your help on the heuristic evaluations! We already have 3 evaluators committed to this component, would you mind choosing a different component? There are plenty where no one has signed up so we need all the help we can get!

— Reply to this email directly or view it on GitHub https://github.com/wet-boew/wet-boew-styleguide/issues/7#issuecomment-32288221 . https://github.com/notifications/beacon/6197913__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcwNTI1NDM0OSwiZGF0YSI6eyJpZCI6MjIyMjk1OTB9fQ==--3a13ffef75497c76244542170c57e4b7d4a380e5.gif

[JxRath]

Lightbox: http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html#

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

B. Provide status feedback

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

IE 8 – Single Items – Image thumbnail: No. Unless the user moves their cursor over the image, there is no indication that it is “clickable” and that a larger version will appear if they do click on it. On mousing-over the image, the cursor changes from an arrow to a hand, which indicates that the image is clickable. After pausing over the image for a second, an alt tag appears in a nicely formatted box with a drop shadow. There is no roll-over state or on-click effect for the image. This does not correspond with other “clickable” elements such as buttons.

On-Click, the image enlarges to full-size on top of a dark grey semi-transparent background. Mousing over the grey background, or anywhere else on the page, the cursor is an arrow pointer. Pausing with the arrow over the image should cause the alt-text tag “Image 1” to appear. Nothing happens, so this functionality is broken and may cause accessibility issues. When the user clicks on the image, nothing happens, but when the user clicks anywhere else on the page (including the close “X”), they are returned to their previous page. This may not conform to user expectations given that there is a specific “X” for closing the page.

There is an “X” in the upper right just above the image. If the user mouses over it the cursor does not change from the arrow to a hand pointer as it should. On-hover over the “X” causes the tooltip “Close overlay (escape key)” to appear. There is no roll-over effect, as there should be for clickable elements. There is an on-click effect (moving the “X” down and to the right) which does correspond with other “clickable” elements such as buttons. Unfortunately in IE 8 the on-click also causes an ugly black and white dotted line rectangle, the width of the image below, to also appear. Once the “X” is clicked, overlay disappears and the user is at their original starting point prior to clicking the image.

iOS 7 – Single Items – Image thumbnail: No. Picture does not look clickable. No roll-over, on-hover alt text, no on-click effects. If the user does decide to click on the picture it opens to the full width of the iPhone screen. Turning from portrait to landscape view the image resizes and pivots appropriately. Once image has been launched to full screen the caption and close “X” both appear. Clicking on the grey translucent background causes the image to close as does clicking on the “X” which may not be expected by the user. In portrait mode the “X” is pretty tight to the edge of the screen and is a small touch target which can make it difficult to click. The “X” does have an on-click effect; it turns from light grey to white, but is difficult to spot as it’s underneath the user’s fingertip.

Clicking and holding on the image causes the “Save Image”, “Copy” and “Cancel” buttons to appear. Other web images when selected on other sites offer the options of “Open, Open in New Page, Add to Reading List, Save Image, Copy, and Cancel.” This behaviour seems to be more of an iOS 7 standard, but the extra options are excluded in the lightbox. On the parent page when clicking and holding on the thumbnail image, all of the options are shown.

IE 8 – Single Items – AJAX – Example 1: No. There is a light grey box with the words “AJAX – Example 1” There is no indication that the box is a “Clickable” object, unless the user chooses to mouse over the box. On mouse-over the box changes from grey to white, the words become underlined indicating that it is a link, and the cursor changes to a hand, indicating that the item is “clickable”. A tooltip also appears “AJAX – Example 1 of AJAX content.” The underline appearing as the link/square is rolled-over does not follow the “Link Standard” formatting elsewhere in WET.

On-Click a message box component appears on top of a dark grey semi-transparent background. The message box includes a blue header bar with white bold text for the header and an “X” in the top right corner for closing the box. The “X” is a web/application standard for closing a window. On-hover over the “X” causes the tooltip “Close overlay (escape key)” to appear. There is no roll-over effect, as there should be for clickable elements, but the cursor does change from an arrow to a hand indicating that the element is “clickable” (which it did not do in the image example). There is an on-click effect (moving the “X” down and to the right) which does correspond with other “clickable” elements such as buttons. Unfortunately in IE 8 the on-click also causes an ugly black and white dotted line square, to also appear. Once the “X” is clicked, overlay disappears and the user is at their original starting point prior to clicking the image. If the user clicks anywhere on this page it also closes the page which may not conform to user expectations given that there is a specific “X” for closing the message box.

The link example included in the message box follows the WET standard for links (Underlined, blue), but the “visited” style did not work.

iOS 7 – Single Items – AJAX – Example 1: No. As with IE 8 there is no indication that the grey box with text in it is a clickable object. On roll-over effects are the same as IE 8; box turns white link becomes underlined. Once launched the message box renders nicely with the rounded corners and a drop shadow that IE 8 will not do. The close “X” is further from the edge of the screen so is an easier target to click. Visited link formatting does not work. Tooltip for “X” does not work. Message box renders in appropriate sizes for both portrait and landscape mode.

IE 8 – Single Items – Inline content: No. There is a light grey box with the words “Inline content” There is no indication that the box is a “Clickable” object, unless the user chooses to mouse over the box. On mouse-over the box changes from grey to white, the words become underlined indicating that it is a link, and the cursor changes to a hand, indicating that the item is “clickable”. A tooltip also appears “Example of inline content.” The underline appearing as the link/square is rolled-over does not follow the “Link Standard” formatting elsewhere in WET.

On-Click a message box component appears on top of a dark grey semi-transparent background. The message box includes a blue header bar with white bold text for the header and an “X” in the top right corner for closing the box. The “X” is a web/application standard for closing a window. On-hover over the “X” causes the tooltip “Close overlay (escape key)” to appear. There is no roll-over effect, as there should be for clickable elements, but the cursor does change from an arrow to a hand indicating that the element is “clickable” (which it did not do in the image example). There is an on-click effect (moving the “X” down and to the right) which does correspond with other “clickable” elements such as buttons. Unfortunately in IE 8 the on-click also causes an ugly black and white dotted line square, to also appear. Once the “X” is clicked, overlay disappears and the user is at their original starting point prior to clicking the image. If the user clicks anywhere on this page it also closes the page which may not conform to user expectations given that there is a specific “X” for closing the message box.

The link example included in the message box follows the WET standard for links (Underlined, blue), but link did not work (coding error?)

iOS 7 – Single Items – Inline content: No. As with IE 8 there is no indication that the grey box with text in it is a clickable object. On roll-over effects are the same as IE 8; box turns white link becomes underlined. Once launched the message box renders nicely with the rounded corners and a drop shadow that IE 8 will not do. The close “X” is further from the edge of the screen so is an easier target to click. Visited link formatting does not work. Message box renders in appropriate sizes for both portrait and landscape mode; there is a lot of text in this message box, so it exceeds the screen size in portrait mode and the user must scroll to see everything, but this is a standard behavior. Tooltip for “X” does not work.

There is a Bug with the link in the message box on this page in iOS 7 (link worked in IE 8). If the user clicks on the link in this message box, the message box seems to disappear and the grey background remains. If the user scrolls down the grey page they find the message box again. So the link is taking the user to the top of the page, which it may have been designed to do, but does not make the grey background and message box disappear.

IE 8 – Single Items – Modal popup: No. There is a light grey box with the words “Modal popup” There is no indication that the box is a “Clickable” object, unless the user chooses to mouse over the box. On mouse-over the box changes from grey to white, the words become underlined indicating that it is a link, and the cursor changes to a hand, indicating that the item is “clickable”. A tooltip also appears “Example of a modal popup.” The underline appearing as the link/square is rolled-over does not follow the “Link Standard” formatting elsewhere in WET.

On-Click a message box component appears on top of a dark grey semi-transparent background. The message box includes a blue header bar with white bold text for the header and an “X” in the top right corner for closing the box. The “X” is a web/application standard for closing a window. On-hover over the “X” causes the tooltip “Close overlay (escape key)” to appear. There is no roll-over effect, as there should be for clickable elements, but the cursor does change from an arrow to a hand indicating that the element is “clickable” (which it did not do in the image example). There is an on-click effect (moving the “X” down and to the right) which does correspond with other “clickable” elements such as buttons. Unfortunately in IE 8 the on-click also causes an ugly black and white dotted line square to also appear. Once the “X” is clicked, overlay disappears and the user is at their original starting point prior to clicking the image. If the user clicks anywhere on this page it also closes the page which may not conform to user expectations given that there is a specific “X” for closing the message box.

The link example included in the message box follows the WET standard for links (Underlined, blue), but link did not work (coding error?)

iOS 7 – Single Items – Modal popup: No. As with IE 8 there is no indication that the grey box with text in it is a clickable object. On roll-over effects are the same as IE 8; box turns white link becomes underlined. Once launched the message box renders nicely with the rounded corners and a drop shadow that IE 8 will not do. Message box renders in appropriate sizes for both portrait and landscape mode; there is a lot of text in this message box, so it exceeds the screen size in portrait mode and the user must scroll to see everything, but this is a standard behavior. Button works as expected.

IE 8 – Galleries – Image Gallery: No. It does not communicate its status as a clickable object. There are 4 square images in a horizontal row that do not have the appearance of being “clickable” unless the user chooses to mouse over the images. On-hover a tooltip appears “Image 1, Image 2, etc.” On-click IE shows an ugly black and white dotted line 1px on the outside of the image.

On-Click, the image enlarges to full-size on top of a dark grey semi-transparent background. Mousing over the grey background, or anywhere else on the page, the cursor is hand pointer. This is not consistent with some of the other modes. It should be an arrow pointer changing to a hand pointer over only the clickable areas.

The issue is that everything is a clickable area. If the user clicks on the image, they go to the next image. If they click on the background or on the “X” it closes the window.

There are two triangular shaped arrows; one to the left of the image with a tooltip “Previous (left arrow key)” and one to the right of the image with tooltip “Next (right arrow key)”. In IE 8 the arrows are “jaggy” and do not have nice edges. As indicated in the tooltip that shows up on-hover the user can also use the arrow keys on their keyboard to move through the images. If they click on the right triangle arrow they are taken to the next image and if they click the left triangle arrow they are taken to the previous image. There is no end point, the images loop; after the 4th and final image the user is taken back to image 1. There is no roll-over effect for the arrow buttons. On-click the arrow keys move down and to the right, and IE displays the added visual clutter of a black and white dotted line around the clickable area of the button.

Pausing with the arrow over the image should cause the alt-text tag “Image 1” to appear. Nothing happens, so this functionality is broken and may cause accessibility issues.

If the user clicks anywhere on the image they advance to the next page. There may be a user expectation that if they click on the left half of the image they go to the previous image (e.g. 3 moving to 2), and if they click on the right half of the image they would go to the next image (e.g. 3 moving to 4). When the user clicks anywhere else on the page (including the close “X”), they are returned to their previous page.

When the user clicks anywhere on the background the page closes and they are returned to their previous page. This may not conform to user expectations given that there is a specific “X” for closing the page.

There is an “X” in the upper right just above the image. If the user mouses over it the cursor does change from the arrow to a hand pointer as it should (on some galleries this cursor change does not happen). On-hover over the “X” causes the tooltip “Close overlay (escape key)” to appear. There is no roll-over effect, as there should be for clickable elements. There is an on-click effect (moving the “X” down and to the right) which does correspond with other “clickable” elements such as buttons. Unfortunately in IE 8 the on-click also causes an ugly black and white dotted line rectangle, the width of the image below, to also appear. Once the “X” is clicked, overlay disappears and the user is at their original starting point prior to clicking the image.

iOS 7 – Galleries – Image Gallery: No. Picture does not look clickable. No roll-over, no on-hover alt text, no on-click effects. If the user does decide to click on the picture it opens to the full width of the iPhone screen. In Portrait mode the left and right navigation arrows render on top of the image and are light grey with a dark grey border. There seems to be a glitch with the “Item 1 of 4” text as the “4” renders on a different line. Sometimes switching from portrait to landscape and back will fix it, and sometimes it renders fine the first time.

Turning from portrait to landscape view the image resizes and pivots appropriately. However in landscape mode (since there is more room) the navigation arrows render outside of the image area as is the default for IE 8.

Once image has been launched to full screen the caption and close “X” both appear. Clicking on the grey translucent background causes the image to close as does clicking on the “X” which may not be expected by the user. In portrait mode the “X” is pretty tight to the edge of the screen and is a small touch target which can make it difficult to click. The “X” does have an on-click effect; it turns from light grey to white, but is difficult to spot as it’s underneath the user’s fingertip.

IE 8 – Galleries – AJAX Gallery Example 1: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. There is a light grey box with the words “AJAX – Example 1”. On mouse-over the box changes from grey to white, the words become underlined indicating that it is a link, and the cursor changes to a hand, indicating that the item is “clickable”. A tooltip also appears “AJAX - Example 1 of AJAX content.” The underline appearing as the link/square is rolled-over does not follow the “Link Standard” formatting elsewhere in WET.

On-Click, the image enlarges to full-size on top of a dark grey semi-transparent background. Mousing over the grey background, or anywhere else on the page, the cursor is an arrow pointer. When the user moves over the “clickable” areas such as the left and right arrows, the “X” close box or the link in the message box the cursor changes to the hand pointer as is appropriate.

When the user clicks anywhere on the background the page closes and they are returned to their previous page. This may not conform to user expectations given that there is a specific “X” for closing the page.

See previous sections for comments and issues concerning the arrow, “X” and Link behaviour.

iOS 7 – Galleries – AJAX Gallery Example 1: No. As with IE 8 there is no indication that the grey box with text in it is a clickable object. On roll-over effects are the same as IE 8; box turns white link becomes underlined. Once launched the message box renders nicely with the rounded corners and a drop shadow that IE 8 will not do. The close “X” is further from the edge of the screen so is an easier target to click. The hyper link in the message box worked but the Visited link formatting does not work. Message box renders in appropriate sizes for both portrait and landscape mode. Tooltip for “X” does not work.

In both portrait and landscape modes the left and right navigation arrows render on top of the message box and partially obscure the text underneath the arrows.

In landscape mode having the buttons on top of the message box is inconsistent with the image galley, but the images used in the examples are square, so perhaps if the image was also in landscape format the navigation arrows would be on top of the image?

On Example 3 the in the form elements do not work. BUG?

IE 8 – Galleries – AJAX Gallery Example 2: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. There is a light grey box with the words “AJAX – Example 2”. On mouse-over the box changes from grey to white, the words become underlined indicating that it is a link, and the cursor changes to a hand, indicating that the item is “clickable”. A tooltip also appears “AJAX - Example 2 of AJAX content.” The underline appearing as the link/square is rolled-over does not follow the “Link Standard” formatting elsewhere in WET.

On-Click, the image enlarges to full-size on top of a dark grey semi-transparent background. Mousing over the grey background, or anywhere else on the page, the cursor is an arrow pointer. When the user mouses over the “clickable” areas such as the left and right arrows, the “X” close box or the link in the message box the cursor changes to the hand pointer as is appropriate.

When the user clicks anywhere on the background the page closes and they are returned to their previous page. This may not conform to user expectations given that there is a specific “X” for closing the page.

See previous sections for comments and issues concerning the lack of alt text for the images, the arrows, “X” and Link behaviour.

iOS 7 – Galleries – AJAX Gallery Example 2: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. Other comments are similar… see iOS 7 – Galleries – AJAX Gallery Example 1:

IE 8 – Galleries – AJAX Gallery Example 3: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. There is a light grey box with the words “AJAX – Example 3”. On mouse-over the box changes from grey to white, the words become underlined indicating that it is a link, and the cursor changes to a hand, indicating that the item is “clickable”. A tooltip also appears “AJAX – Example 3 of AJAX content.” The underline appearing as the link/square is rolled-over does not follow the “Link Standard” formatting elsewhere in WET.

On-Click, the image enlarges to full-size on top of a dark grey semi-transparent background. Mousing over the grey background, or anywhere else on the page, the cursor is an arrow pointer. When the user moves over the “clickable” areas such as the left and right arrows, the “X” close box or the link in the message box the cursor changes to the hand pointer as is appropriate.

When the user clicks anywhere on the background the page closes and they are returned to their previous page. This may not conform to user expectations given that there is a specific “X” for closing the page.

See previous sections for comments and issues concerning the lack of alt text for the images, the arrows, “X” and Link behaviour.

BUG?: In this AJAX example 3 the contents of the message box include Input, Text area, Option dropdowns, Checkboxes and buttons. All of the elements mentioned do not work on this page. When the user tries to interact with them e.g. (enter text, make a selection, choose a checkbox) the window closes and does not allow them to complete the desired function.

iOS 7 – Galleries – AJAX Gallery Example 3: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. Other comments are similar… see iOS 7 – Galleries – AJAX Gallery Example 1:

IE 8 – Hidden Image Galleries – Image Gallery: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. In this mode only one image is used to launch an image gallery of multiple images. This may be an appropriate use if in the descriptive text around the image explains what will happen if they click on the image and launch the gallery.

See previous sections for comments and issues concerning the lack of alt text for the images, the arrows, “X” and Link behaviour. Also the cursor remains a hand pointer over every part of this page instead of just over the appropriate controls.

iOS 7 – Hidden Image Galleries – Image Gallery: Same comments as the IE 8 Version with the additional issue of the “X” close box being very tight to the edge in portrait mode which can make for a more difficult target to touch. Additionally the “Item 1 of 4” text does not render properly in landscape mode, bumping the “of 4” to a second line. Switching to portrait mode moves the text to a single line as was intended.

Clicking on the grey background above the image in portrait or landscape mode closes the page, which may be an unintended result. Clicking in the grey area below the image advances the image to the next one which may be an unintended result.

IE 8 – Hidden Image Galleries – AJAX Example 1: Yes & No. It does communicate its status as a clickable object, as the hyperlink is properly formatted with an underline, unlike every other AJAX example. There is no mouse-over effect (changing the box to white) as in all of the other AJAX examples. In this mode only one link and box is used to launch an image gallery of multiple pages. This may be an appropriate use if in the descriptive text around the image explains what will happen if they click on the box/link and launch the gallery.

See previous sections for comments and issues concerning the lack of alt text for the images, the arrows, “X” and Link behaviour. Problems with AJAX Example 3 persist on this page…see reference to BUG above.

iOS 7 – Hidden Image Galleries – AJAX Example 1: Yes & No. It does communicate its status as a clickable object, as the hyperlink is properly formatted with an underline, unlike every other AJAX example. Clicking above or below the image in the grey background area causes the page to close which may be an unintended result. Other comments are the same as above in IE 8 – Hidden Image Galleries – AJAX Example 1.

IE 8 – Alternative Image Title: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. Also if there were a large number of images with the text below it would be difficult to relate the text with the image, especially when the images begin wrapping to different lines.

See previous sections for comments and issues concerning the lack of alt text for the images, the arrows, “X” and Link behaviour, and action that occurs when clicking on the image. Also the cursor remains a hand pointer over every part of this page instead of just over the appropriate controls.

iOS 7 – Alternative Image Title: No. It does not communicate its status as a clickable object, unless the user chooses to mouse over the box. In Landscape mode the “Item 1 of 2” text renders the “of 2” on a separate line which is not intended. The longer title text on the left wraps appropriately in both landscape and portrait modes. Other comments are the same as above in IE 8 – Alternative Image Title.

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

IE 8 – Single Items – Image thumbnail: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable.

Roll-Over State: Yes & No. No roll-over state, but the cursor does change from an arrow pointer to a hand.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: No. There is an “X” for closing the page, but if the user clicks anywhere on the page (Other than the image) the page closes. Also lack of Alt text for the image could hinder accessibility.

iOS 7 – Single Items – Image thumbnail: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable.

Roll-Over State: No. No roll-over state.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects

Launched State: No. There is an “X” for closing the page, but if the user clicks anywhere on the page (Other than the image) the page closes. Also lack of Alt text for the image could hinder accessibility.

IE 8 – Single Items – AJAX – Example 1: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: No. There is an “X” for closing the message box and the cursor does change to a hand when over the “X”, but if the user clicks anywhere on the page (including in the message box – different behavior than in other message boxes) the page closes. Link in the message box did not use a “visited” state, but did use appropriate underline and cursor changing to a hand during roll-over.

iOS 7 – Single Items – AJAX – Example 1: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: No. There is an “X” for closing the message box and the color does change to white “on-click” when over the “X”, but if the user clicks anywhere on the page (including in the message box – different behavior than in other message boxes) the page closes. Link in the message box did not use a “visited” state, but did use appropriate underline.

IE 8 – Single Items – Inline content: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: No. There is an “X” for closing the message box and the cursor does change to a hand when over the “X”, but if the user clicks anywhere on the page (excluding in the message box) the page closes. The Link in the message box did not use a “visited” state, but did use appropriate underline and cursor changing to a hand during roll-over. BUG. The link in this example does not work properly. Clicking on it does not return the user to the previous page as it is supposed to do.

iOS 7 – Single Items – Inline content: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: No. There is an “X” for closing the message, but if the user clicks anywhere on the page (excluding in the message box) the page closes. The Link in the message box did not use a “visited” state. BUG. The link in this example does not work properly. Clicking on it does not return the user to the previous page as it is supposed to do.

IE 8 – Single Items – Modal popup: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: Yes. There is no “X” for closing the message box; the user is forced to use the "Close" button in the message box (as designed). The cursor does change to a hand when over the button. Button roll-over causes a colour change and on-click the text in the button moves down and to the left. Unlike other pages, if the user clicks anywhere on the page (including in the message box) the page does not close. This is by design as it forces the user to acknowledge the message by clicking on the button.

iOS 7 – Single Items – Modal popup: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: No. There is no “X” for closing the message box; the user is forced to use the "Close" button in the message box (as designed). On click the button changes color. If the user clicks slowly on the button it does not work, they need to click quickly which would cause multiple button clicks to perform the operation. Also if the user clicks anywhere on the page background the page will close, defeating the purpose of clicking only on the button. This action could also easily happen accidentally, further confusing the user.

IE 8 – Galleries – Image Gallery: Resting State: No. It does not provide appropriate visual feedback. Items do not look clickable.

Roll-Over State: Yes & No. No roll-over state, but the cursor does change from an arrow pointer to a hand.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the page, but if the user clicks anywhere on the page (Other than the image or arrow controls) the page closes. Lack of Alt text for the image could hinder accessibility. Hand cursor is used for every part of this page. User may try to click on the right side of the image to advance the slide show and the left side of the image to view the previous image. This will not work… clicking anywhere on the image causes the slide show to advance.

iOS 7 – Galleries – Image Gallery: Resting State: No. It does not provide appropriate visual feedback. Items do not look clickable.

Roll-Over State: No. No roll-over state.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the page, but if the user clicks above the image the page closes, if they click anywhere below the image it advances to the next image which may be an unintended result. User may try to click on the right side of the image to advance the slide show and the left side of the image to view the previous image. This will not work… clicking anywhere on the image causes the slide show to advance.

IE 8 – Galleries – AJAX Gallery Example 1: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: No. There is an “X” for closing the message box, but if the user clicks anywhere on the message box or the background it closes the page. The cursor does change to a hand when over the appropriate controls. Link in the message box did not use a “visited” state, but did use appropriate underline and cursor changing to a hand during roll-over.

iOS 7 – Galleries – AJAX Gallery Example 1: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: No. There is an “X” for closing the message box, but if the user clicks anywhere on the message box or the background it closes the page. Arrow navigation buttons partially obscure the text. Link in the message box did not use a “visited” state.

IE 8 – Galleries – AJAX Gallery Example 2: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: No. There is an “X” for closing the message box, but if the user clicks anywhere on the message box or the background it closes the page. The cursor does change to a hand when over the appropriate controls.

iOS 7 – Galleries – AJAX Gallery Example 2: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects. Launched State: No. There is an “X” for closing the message box, but if the user clicks anywhere on the message box or the background it closes the page which may not match user expectations.

IE 8 – Galleries – AJAX Gallery Example 3: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: No. There is an “X” for closing the message box, but if the user clicks anywhere on the message box or the background it closes the page. The cursor does change to a hand when over the appropriate controls. BUG?: In this AJAX example 3 the contents of the message box include Input, Text area, Option dropdowns, Checkboxes and buttons. All of the elements mentioned do not work on this page. When the user tries to interact with them e.g. (enter text, make a selection, choose a checkbox) the window closes and does not allow them to complete the desired function.

iOS 7 – Galleries – AJAX Gallery Example 3: Resting State: No. It does not provide appropriate visual feedback. Item does not look clickable. Link is not underlined.

Roll-Over State: Yes. The object changes colour and an underline appears on the hyperlink.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: No. There is an “X” for closing the message box, but if the user clicks anywhere on the message box or the background it closes the page. BUG?: In this AJAX example 3 the contents of the message box include Input, Text area, Option dropdowns, Checkboxes and buttons. All of the elements mentioned do not work on this page. When the user tries to interact with them e.g. (enter text, make a selection, choose a checkbox) the window closes and does not allow them to complete the desired function.

IE 8 – Hidden Image Galleries – Image Gallery: Resting State: No. It does not provide appropriate visual feedback. Items do not look clickable.

Roll-Over State: Yes & No. No roll-over state, but the cursor does change from an arrow pointer to a hand.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the page, but if the user clicks anywhere on the page (Other than the image or arrow controls) the page closes. Lack of Alt text for the image could hinder accessibility. Hand cursor is used for every part of this page. User may try to click on the right side of the image to advance the slide show and the left side of the image to view the previous image. This will not work… clicking anywhere on the image causes the slide show to advance.

iOS 7 – Hidden Image Galleries – Image Gallery: Resting State: No. It does not provide appropriate visual feedback. Items do not look clickable.

Roll-Over State: No. No roll-over state, or indication that it is clickable.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the page, but if the user clicks anywhere above the image (Other than the image or arrow controls) the page closes. If the user clicks below the image to it advances to the next image. User may try to click on the right side of the image to advance the slide show and the left side of the image to view the previous image. This will not work… clicking anywhere on the image causes the slide show to advance which ignores the purpose of the navigation arrows which render on top of the image.

IE 8 – Hidden Image Galleries – AJAX Example 1: Resting State: Yes. Link is underlined and looks clickable.

Roll-Over State: Yes & No. No roll-over state, but the cursor does change from an arrow pointer to a hand.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the message boxes, but if the user clicks anywhere on the page (including anywhere on the message box) the page closes. Issues already noted for the 3 message box styles persist.

iOS 7 – Hidden Image Galleries – AJAX Example 1: Resting State: Yes. Link is underlined and looks clickable.

Roll-Over State: No. No roll-over state.

On-Hover State: No. On-hover the alt text for the link/box does not appear.

On-Click State: No. The object does not move down and to the right as other clickable objects.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the message boxes, but if the user clicks anywhere on the page (including anywhere on the message box) the page closes. Bugs already noted for the 3 message box styles persist.

IE 8 – Alternative Image Title: Resting State: No. It does not provide appropriate visual feedback. Items do not look clickable. Text is disconnected from the images which could cause confusion especially if there are a large number of images.

Roll-Over State: Yes & No. No roll-over state, but the cursor does change from an arrow pointer to a hand.

On-Hover State: Yes. On-hover the alt text for the image appears.

On-Click State: No. The object does not move down and to the right as other clickable objects. Also IE 8 displays a 1px black and white dotted border around the item which is not desirable.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the page, but if the user clicks anywhere on the page (Other than the image or arrow controls) the page closes. Lack of Alt text for the image could hinder accessibility. Hand cursor is used for every part of this page. User may try to click on the right side of the image to advance the slide show and the left side of the image to view the previous image. This will not work… clicking anywhere on the image causes the slide show to advance.

iOS 7 – Alternative Image Title: Resting State: No. It does not provide appropriate visual feedback. Items do not look clickable. Text is disconnected from the images which could cause confusion especially if there are a large number of images. This will be a larger issue on the smaller screens. As the user scrolls down to read the text the image it refers to will be out of sight which will cause a larger cognitive disconnect.

Roll-Over State: No. No roll-over state.

On-Hover State: No. On-hover the alt text for the image does not appear.

On-Click State: No. The object does not move down and to the right or change colour as other clickable objects.

Launched State: Yes & No. There are enough navigation elements to run the gallery. However, there is an “X” for closing the page, but if the user clicks anywhere on the page (Other than the image or arrow controls) the page closes. Lack of Alt text for the image could hinder accessibility. User may try to click on the right side of the image to advance the slide show and the left side of the image to view the previous image. This will not work… clicking anywhere on the image causes the slide show to advance.

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

IE 8 & iOS 7: Yes and No. See above. Generally in the resting state there is not enough visual feedback to indicate that the items are clickable. In launched state the user has enough visual cues to run the gallery with the challenges and inconsistencies noted above.

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 & iOS 7: No. The associated image galleries are hidden, but unless they know to click on the thumbnail image or AJAX box to launch the gallery they will not find it.

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: Yes and No. See above. Generally in the resting state there is not enough visual feedback to indicate that the items are clickable. In launched state the user has enough visual cues (left and right arrows) to run the gallery with the challenges and inconsistencies noted above.

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

IE 8 & iOS 7: No. The visited link colour change does not occur. Problems with interacting with input fields in the message box. Inconsistent use of hand and arrow cursor (IE 8) causes unpredictable results. Clicking in certain areas (within message box or on background) causes unpredictable results, either closing or advancing to the next page.

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout?

IE 8 & iOS 7: No. The visited link colour change does not occur. Problems with interacting with input fields in the message box. Inconsistent use of hand and arrow cursor (IE 8) causes unpredictable results. Clicking in certain areas (within message box or on background) causes unpredictable results, either closing or advancing to the next page.

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

IE 8 & iOS 7: No. There is inconsistent use of the hand and arrow cursor (IE 8). Sometimes clicking anywhere on the page cause it to close instead of using the dedicated “X” close symbol.

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

IE 8 & iOS 7: Generally yes, but missing alt text on the images within the gallery.

1. Is the experience consistent across screen sizes?

IE 8 & iOS 7: Yes, in IE 8. No, in iOS 7; portrait and landscape views can cause differences in layout and whether the left and right navigation arrows render on top, or beside the image. In landscape mode in iOS 7 the “Item X of X” text often renders on two lines instead of on one.

E. Help users recognize, prevent and recover from errors

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

IE 8 & iOS 7: No. Unpredictable use of “click to close” may result in the user accidentally closing the window prematurely when they click on the background. This will be a larger issue on iPhones, as when the user is holding the device, an accidental touch on the screen will cause the page to close.

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

IE 8 & iOS 7: No. No Error messages, user is returned to previous page if they accidentally click in the wrong spot.

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

IE 8 & iOS 7: No. No Error messages, user is returned to previous page if they accidentally click in the wrong spot. They can then try again and hopefully they will have learned not to click in the wrong places.

F. Design for human interaction

1. When using the component:

a. Is the layout/style intuitive?

IE 8 & iOS 7: Resting state; No. Launched state; with exceptions noted - Yes. They should be able to run the slide show once launched.

b. Are the interactions intuitive?

IE 8 & iOS 7: Resting state; No. Launched state; with exceptions noted - Yes. They should be able to run the slide show once launched.

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 & iOS 7: With exceptions noted, generally Yes. Interacting with Message box 3 does not work. Clicking any control causes the page to 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?

No.

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: Yes.

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

IE 8 & iOS 7: Yes. Though some of the interactions will cause unpredictable results.

1. Does the component use plain language?

IE 8 & iOS 7: Yes.

[rubinahaddad]

Thanks @DesignbagGT @JxRath ! 3 HEs completed so we can close this ticket.

[ballantr]

Summary: Lightbox

http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html# 20 April, 2014

A. Devices and Browsers Used

Device	OS	Browsers
Desktop	Windows	IE 9
Apple MacBook Air	OS 10.9	Firefox 26.0,
Apple MacBook Air	OS 10.9	Safari 7.0 (9537.71)
Apple MacBook Air	OS 10.9	Chrome 30.0.1599.101
HP Desktop, Dell widescreen monitor (1920x1080)	Windows	IE Windows 8.0.7601.17514
iPhone 4	latest iOS 7
Laptop (24 inch Monitor)	Windows 8.1	Chrome 33.0.1750.146 m
Nexus 7	Android 4.3	Chrome 33.0.1750.136
Nexus 7	Android 4.3	FF 28

B. Overview

The widget appears to have evolved for the better since reviewing started. However in many ways it stills seems incomplete.

C. Bugs Etc.

Print error

When printing an open light box, the background page printed with the light box content over-printing on it - this making it unreadable. There are also other problems printing pages with closed lightboxes

iOS 7 – Single Items – Inline content: Close does not Close

JxRath found a bug (which is still there) with the link in the Single Items – Inline content message box iOS 7 (link worked in IE 8). If the user clicks on the link in this message box, the message box seems to disappear and the grey background remains. If the user scrolls down the grey page they find the message box again. So the link is taking the user to the top of the page, which it may have been designed to do, but does not make the grey background and message box disappear.

iOS 7 Landscape Images rendered too narrow

In iOS the “Item X of Y” text in the Galleries does not always render properly in landscape mode, bumping the “of X” to a second line. As a result square images render smaller in landscape than portrait.

D. Issues

Hover states

• Problem: All three reviewers noted the lack of, or barely detectable, hover response of clickable objects.
• Priority: Medium-High
• Suggestion: All clickable objects should show a hover response, and the pointer should change appropriately.

The Link Standard does not seem to be correctly supported

• Problem: Links are nonstandard in terms of color and underlining
• Priority: Medium-High
• Suggestion: Apply the standard everywhere.

Clickability

• Problem: None of the objects invite clicking. Images in particular should show border treatment that suggests clickability
• Priority: Medium-high (particularly for the images).
• Suggestion: Use the same general approach used for other clickable objects in the UI.

Inconsistent & unpredictable Ajax behaviour

• Problem: Reviewers found inconsistent behaviour in the Ajax elements between browsers/devices and between examples provided. The behaviour purpose of these elements is unclear since they cannot be copied nor used productively because they disappear when clicked (and when the “SpaceBar-Select” convention is used).
• Priority: Medium-High
• Suggestion: Reconsider the purpose of these things, and modify the widget appropriately, or do not use.

Image gallery indistinguishable from single image

• Problem: An image gallery is indistinguishable from single image
• Priority: Medium-High
• Suggestion: (1) Add graphic elements to the outside of the (unopened) gallery image that suggest there are multiple objects layered there, and (2) add a tool-tip, or modify the Alt text, to make the situation plain.

Click Behaviour AROUND images

• Problem: Clicking OFF the images/Ajax elements is inconsistent and unpredictable.
• Priority: Medium
• Suggestion: One reviewer felt that clicking off the image should not close the image, as there is an ‘X’ provided for that purpose. I am OK with the close, but the behaviour should be consistent, and the mouse pointer should be consistent and should signify the close action.

“UnMagnify” pointer icon for ‘Close’

• Problem: The use of a “UnMagnify” pointer icon for ‘Close’ on the background and the ‘X’ is not appropriate.
• Priority: Medium
• Suggestion: Find a more accurate and meaningful icon. Consider something including both the idea of a “Click Hand” and an “X”.

Next/Back can be too far away 2

• Problem: In a wide screen the Next and Back controls can be far from the image. They can be missed, and/or the distance to the controls increases the probability of clicking on the background, closing the image.
• Priority: Medium
• Suggestion: Have the Next and Back controls stay close to the image.

Click Behaviour ON images in Galleries

• Problem: Several reviewers noted that clicking anywhere on an image advances to the NEXT image, whereas many implementations support clicks to the left of the image going to the PREVIOUS image.
• Priority: Low-Medium
• Suggestion: Consider supporting this functionality.

Alternative Image Titles not visually connected to images

• Problem: Alternative Image Titles Text is disconnected from the images which could cause confusion especially if there are a large number of images.
• Priority: Medium
• Suggestion: Indent the text, or find some other way of creating a visible connection between the test and the image.