Heuristic evaluation - Archiving content

[rubinahaddad]

Please perform a heuristic review of the following component: Archiving content 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]

Archived Content: http://wet-boew.github.io/v4.0-ci/demos/archived/archived-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: No. This Component is broken in IE 8. It is supposed to show (based on the iOS experience) a solid yellow overlay the spans the top of the page with a close “X”. This overlay does not appear in IE 8. Further down the page there is a yellow bar that spans the width of the body of the page, with the text “Archived Content” in bar. Below this bar is a paragraph of text explaining why the archived content is there. This text is on a white background and not in a box connected to the yellow bar above it.

If the user uses the zoom controls and goes to 125% or 150% zoom, the text below the yellow bar now shows up in a light yellow box connected to the bar. It has a 1px dark yellow border. This is what it was supposed to look like at 100%.

If the user goes up to 200% or 400% zoom level the solid yellow Top Bar overlay with the text “This page has been archived on the Web.” appears, with a close “X” in the upper right corner. The “X” has no roll-over effect. The cursor changes to a pointing hand that allows the user to know it is clickable. On-hover the tooltip “Close overlay (escape key)” appears. Using the escape key does not work…the overlay does not close (it worked in other components). On-click the “X” moves down and to the right which is standard on-click behaviour. Clicking on the “X” closes the overlay. Going to 100% zoom also causes the overlay to disappear. Reloading the page will cause the overlay to re-appear.

If the user rolls-over the black text in the overlay, a black underline shows up indicating that it is clickable. The underline on roll-over goes against the WET link standard. When clicking on the link, it jumps the page to the top of the “Archived Content” box with its associated text.

Further issues with the Overlay:

• At 400% it works as it should.
• Going down to 200% from 400%; Overlay bar appears and disappears when scrolling in the top 25% of the page. Hitting the top of the page by scrolling makes it reappear. Scrolling down from the top of the page causes it to disappear, and then reappear again when the “Archived Content” box hits the top of the page.
• Going down to 150% from 200%, the overlay disappears, but reappears when the top of the “Archived content” box is scrolled to the top edge of the page.
• Going down to 125% from 150%, the overlay disappears, but reappears when the top of the “Archived content” box is scrolled to the top edge of the page.
• Going down to 100% from 125%, the overlay disappears, but reappears when the top of the “Archived content” box is scrolled to the top edge of the page. The Yellow box with the 1px edge for the paragraph of text under the “Archived Content” box also disappears.
• At 75% or 50% zoom it behaves the same as the 100% view as commented just above.

iOS 7: No. On page load, the Yellow overlay appears at the top of the screen but the page underneath does not load properly with the top of the page at the top of the screen. On page load, the “Archived content” box is loaded at the top of the page, with most of the header obscured by the Overlay.

When scrolling the Overlay and “Archived Content” box display normally and works properly in both portrait and landscape modes; and at varying levels of zoom. The overlay also has a nice drop shadow under the bottom edge to make it “float” above the page content.

The link in the overlay does not look like a link, but if the user clicks on it, an underline appears and stays visible. In portrait mode the link goes past the Yellow bar with the “Archived Content” so this header cannot be read. The user can just see a couple of pixels of the bottom of the text in the header. If the user clicks the link immediately after page load, nothing happens as they are already at the linked location.

On page load In Landscape mode the link moves to the top of the light yellow content box. The Header cannot be seen at all.

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

IE 8: No. Feedback and display properties of the component change depending on zoom level. At 100% it does not work properly. Link does not follow WET link standards.

iOS 7: No. Page does not load with the top of the page at the top of the screen. Link does not follow WET Standards.

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

IE 8 & iOS 7: Perhaps not due to issues mentioned above. Also, for accessibility (colour blindness) reasons, an archived icon should be considered as well as the message. Not all people will see the yellow, which in this case signifies warning.

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: Changing zoom level will cause the overlay to appear. This is a bug that should be fixed. The text in the overlay does not look like a link unless the user rolls-over it.

iOS 7: The text in the overlay does not look like a link unless the user rolls-over it. Top of page does not load where it should.

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: No. common expectations are not met, see comments above.

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

IE 8 & iOS 7: No. links do not link to where they should; components appear and disappear depending on zoom level and scrolling. See comments above.

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout?

IE 8 & iOS 7: No. WET standards are not met for link formatting, see comments above.

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

IE 8 & iOS 7: No. links do not link to where they should; components appear and disappear depending on zoom level and scrolling. See comments above.

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: Language is determined by the writer/coder. However, “Recordkeeping” should be revised as 2 words. It may be technically correct, but to the general public it will look wrong.

1. Is the experience consistent across screen sizes?

IE 8 & iOS 7: No. Experience varies by zoom level in IE 8, and in landscape or portrait views 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 & iOS 7: No. Component is buggy in IE and needs to be fixed; it does not load the page properly in iOS 7. Escape key does not work in IE.

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

IE 8 & iOS 7: No. Errors occur with the component due to bugs.

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

IE 8 & iOS 7: No error messages appear.

F. Design for human interaction

1. When using the component:

a. Is the layout/style intuitive?

IE 8 & iOS 7: No. Due to bugs, see above.

b. Are the interactions intuitive?
IE 8 & iOS 7: No. Due to bugs, see above.

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: No. The escape key to close overlay does not work.

iOS 7: Mostly yes, with minor exceptions above.

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: N/A.

G. Keep it simple

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

IE 8: No; due to bugs mentioned above. iOS 7: Mostly yes, with minor exceptions above.

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

IE 8 & iOS 7: Mostly yes, with exceptions above.

1. Does the component use plain language?

IE 8 & iOS 7: Language is determined by the writer/coder. However, “Recordkeeping” should be revised as 2 words. It may be technically correct, but to the general public it will look wrong.

[bsouster]

A. Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet): Desktop: Windows 7, IE11, Chrome 32 Mobile: iOS7, Safari, Chrome

B. Provide status feedback

1. Does the component always let users know about its current status? N/A
2. Does the component give immediate, easy to understand feedback? Yes.
3. Will the user have enough visual cues to easily complete the component’s tasks? Yes, the banner is very prominent.
4. If some part of a component is hidden, can users see something that allows them to bring it in and out of view? N/A

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

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout? Cannot say. I don't know the industry standards on archiving web pages.
2. Is there a logical and consistent usage of elements throughout the component? Yes.
3. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component? Yes.
4. Is the experience consistent across screen sizes? No. If I resize the page to approximately mobile size, the archive banner appears when I'm scrolled to the top of the page, covering the web site banner, disappears when I scroll down a bit, then reappears where it's supposed to.

On mobile, the archive banner is up unless the "X" is clicked to close it.

E. Help users recognize, prevent and recover from errors

1. Does the component help to prevent users from making errors whenever possible? N/A
2. When there is an error, is the messaging simple and informative? N/A
3. Does it provide information to fix or correct the error? N/A

F. Design for human interaction

1. When using the component:

a. Is the layout intuitive? Yes.

b. Are the interactions intuitive? 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? If the user tabs through links, it passes over the archive banner links (because it doesn't appear until the user scrolls down enough), requiring the user to reverse-tab to reach and interact with the banner.
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

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? Yes.
3. Does the component use plain language? Not sure.

[nrustand92]

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

B. Provide status feedback

1. Does the component always let users know about its current status? The component informs user well that page has been archived. If banner is closed, there’s a slight chance user can forget it’s been archived
2. Does the component give immediate, easy to understand feedback? Yes
3. Will the user have enough visual cues to easily complete the component’s tasks? N/A
4. If some part of a component is hidden, can users see something that allows them to bring it in and out of view? Not sure how to bring back the banner once closed

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. E.g., yellow color is associated w/ warning, not danger (red) or something OK (green)
2. When users perform actions within the component, are the results they get what they would commonly expect? N/A

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout? Not sure
2. Is there a logical and consistent usage of elements throughout the component? N/A
3. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component? Yes
4. Is the experience consistent across screen sizes? Yes

E. Help users recognize, prevent and recover from errors

1. Does the component help to prevent users from making errors whenever possible? See B1 & B4
2. When there is an error, is the messaging simple and informative? There’s no error message
3. Does it provide information to fix or correct the error? If a mistake like I said in B1 & B4 happen, not sure how to fix it

F. Design for human interaction

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

b. Are the interactions intuitive? 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? Yes
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

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? Yes
3. Does the component use plain language? Yes

[rubinahaddad]

Thanks @JxRath @bsouster @nrustand92 !!

[ballantr]

Summary: Archiving Content

http://wet-boew.github.io/v4.0-ci/demos/archived/archived-en.html April 16, 2014

A. Devices and Browsers Used

Device	OS	Browsers
HP Desktop, Dell widescreen monitor (1920x1080)	Windows	IE Windows 8.0.7601.17514,
iPhone 4	latest iOS 7	Unknown
Desktop:	Windows 7	IE11
Desktop:	Windows 7	Chrome 32
Unknown	Mobile: iOS7,	Safari
Unknown	Mobile: iOS7,	Chrome
Desktop	windows	IE8
Laptop (24 inch Monitor)	Windows 8.1	IE 11.0.3
Laptop (24 inch Monitor)	Windows 8.1	FF 27.0.1
Laptop (24 inch Monitor)	Windows 8.1	Chrome 33.0.1750.146 m

B. Overview

The banner overlay is very clear (at least to color-normal viewers), and most reviewers had only few issues with it.

A concern of this reviewer, however, is that the banner's meaning is less clear. The first few issues below relate to the use of the word “Archive” (which is somewhat abstract in the context, and does not state the issue), instead of more directly stating the fact that the page is out of date or not being maintained.

C. Bugs

JxRath noted several IE 8 and IOS 7 issues in section B1. At least some of them still apply. E.g.

• iOS/iPhone: The yellow banner still obscures the top of the page menu bar (Medium priority).
• Windows Desktop: At certain levels of zoom (tested with Chrome and IE) the yellow banner appears at the top, before it is “supposed to” - obscuring the top of the page menu bar.

D. Issues

Unclear phraseology

• Problem: In the yellow banner, the phrase “This page has been archived on the Web” does not directly communicate the important point. Only indirectly might we infer that the page has been superseded and/or is no longer applicable. Users won’t puzzle over things that are not in line with their objectives, so the meaning may be missed.
• Priority: High
• Suggestion: Use (or at least begin with) a clearer sentence, like “This page is out of date”. Use the same phrase in the header of the “Archived Content” frame.

Miss-able explanation

• Problem: The warning and explanation above the “Archived Content” frame will be missed (see “The Standard on Web Usability replaces this content…” in the image). Users skip to the stuff they are looking for, and this one sentence, sandwiched above the “Archived Content” frame will be skipped over for sure, yet it is perhaps the most important sentence on the whole page.
• Priority: High
• Suggestion: Put the sentence inside the “Archived Content” box. Also but the sentence inside the yellow banner.

Unclear Referent

• Problem: In the “Archived Content” frame the text clearly explains things about “Information identified as archived…”. However the text is in a closed box, like an isolated and unrelated fragment. It does not specify or unambiguously indicate that the page outside the box is what is being discussed.
• Priority: Medium
• Suggestion: In the header of the frame use text like “This page is out of date”, and likewise in the body get right to the point, like “This page is out of date. It is provided for reference, research or recordkeeping purposes….”
• Suggeston 2: Consider adding a copy of the frame at the bottom of the page.

Screen reader concern

• Problem: Does the yellow banner “appear” to a screen reader? It is not visible at the start, and when it appears, it is probably above the reader’s focus. This certainly is the case with tabbing to the banner. You can’t tab there in a forward direction!
• Priority: Medium
• Suggestion: Test & fix

Color is not enough

• Problem: For reasons of color blindness, the yellow banner should also have a graphical element calling out its status as a special warning.
• Priority: Low-Medium
• Suggestion: Add a warning (or similar) icon