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 - Footnotes #5

Open rubinahaddad opened 10 years ago

rubinahaddad commented 10 years ago

Please perform a heuristic review of the following component: Footnotes 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.
rubinahaddad commented 10 years ago

A. Desktop: IE 9

B. Provide status feedback

  1. Yes – with the use of hover over effects.
  2. Yes – By selecting the footnote number in the content area, it links you to the footnote section of that number and vice versa.
  3. Yes – the user will be able to identify the footnote linked to the content
  4. N/A

C. Match real world conventions

  1. Yes
  2. Yes – linking is expected

D. Apply standards and ensure consistency

  1. Yes
  2. Yes
  3. N/A
  4. Yes

E. Help users recognize, prevent and recover from errors

      1. N/A

F. Design for human interaction

1.a Yes – common footnote pattern

  1. b. Yes – But is the user expecting that when the text is highlighted in the footnote section area that it should link to the footnote? (Only the number currently links)
  2. Yes
  3. N/A

G. Keep it simple

  1. Yes
  2. Yes
  3. N/A
JxRath commented 10 years ago

Footnotes: http://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html#fn3-rf

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: Mostly. The footnote number is underlined which communicates that it is a link; the flat grey square cornered box around it does not look clickable on its own. There is a roll-over effect which turns the box dark grey and the text and underline to white, the cursor changes to a hand pointer which also indicates that it is clickable. There is no “on-click” style used as in the “Button” standard. There is no on-hover tool-tip which may impair accessibility. Given the speed at which JAWS reads (300 words per minute or higher) is there something in the code that would indicate this number is a footnote?

Clicking on the numbered footnote links the user to the associated number and notes at the bottom of the page. In IE 8 the Number there is not selected in dark grey with a grey box around the associated text as in iOS 7. The style does not work in IE 8. If the user rolls-over the number in the footnote area it has the same roll-over properties as the number that led the user there. If it is clicked on it links back to the original number that the user clicked to get there in the first place.

iOS 7: Mostly. The underline for the footnote button is extremely fine (hairline) and will not be seen by anyone with vision issues. There are no roll-over, on-hover or on-click styles (should follow “Button” standard) The grey box around the number has square corners, where other clickable object in WET typically use a rounded corner box in iOS. On-click the user is taken to the associated footnote at the bottom of the page. The underlined white Number in the footnote is in a dark grey box, and the text area is in a light grey box with a dark grey border. It does not look clickable; it looks like it is already in a “selected” state. If the user clicks on the number (which already looks selected) they are taken back to the associated number in the body of the text. The number they link to looks selected (White text, dark grey box) but is still selectable.

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

IE 8 & iOS 7: Yes, with exceptions noted above.

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

IE 8 & iOS 7: Yes, with exceptions 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: Yes, with exceptions noted above.

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, it looks like a footnote with a slight superscript styling.

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

IE 8: Mostly; as with other links within the same page, if the user can see both halves of the link (Number above in text body and text below in footnote) when they click on the link nothing will happen as the item they are linking to in already displayed on the page. They may think the link is broken until they realize what is happening.

iOS 7: Works differently than IE 8. Nicer formatting when the user links to the footnote box below. The formatting used helps to immediately draw attention to the footnote they were looking for. The user may try to click on the body of the text area to return to the linked footnote above. The Dark grey box with the footnote number already looks selected.

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout?

IE 8 & iOS 7: The footnote box should follow the “Button” standard, instead of creating a new roll-over and selected look and feel. Also the spacing of the footnote number in the body copy is too tight (in some cases touching) the text next to it. A bit more padding could be added to the outside of the numbered footnote box. Also would be nice if the formatting worked the same on IE 8 and iOS 7.

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

IE 8 & iOS 7: Yes

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

  1. Is the experience consistent across screen sizes?

IE 8 & iOS 7: Yes

E. Help users recognize, prevent and recover from errors

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

IE 8: Yes, should cause no issues or errors.

iOS 7: Mostly, some questions as to what would be clickable in the selected footnote…see above.

  1. When there is an error, is it simple and informative? IE 8 & iOS 7: N/A
  2. Does it provide information to fix or correct the error?

IE 8 & iOS 7: N/A

F. Design for human interaction

  1. When using the component:

a. Is the layout/style intuitive?

IE 8 & iOS 7: Mostly, with exceptions noted above. Need more padding around exterior of footnote number in body of text. Spacing is too tight.

b. Are the interactions intuitive?

IE 8 & iOS 7: Mostly, with exceptions noted 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: Yes.

iOS 7: Mostly. Though if there were three of more footnote numbers next to each other, at 100% the touch target would be pretty tight and my cause “click errors”.

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

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

IE 8 & iOS 7: Yes, with exceptions noted above.

  1. Does the component use plain language?

IE 8 & iOS 7: Yes.

nrustand92 commented 10 years ago

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? Yes. Clicking footnote links in the body highlight them in the footers
  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
  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. If page is viewed above the fold, clicking the link will direct user to the appropriate footnote

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, works much like paper footnotes
  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? Not sure
  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? Yes

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
  2. 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
  3. 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 commented 10 years ago

Thanks @JxRath @nrustand92 !

ballantr commented 10 years ago

Summary: Footnotes

http://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html#fn 17 April, 2014

A. Devices and Browsers Used

Device OS Browsers
Desktop Windows IE 9
HP Desktop, Dell widescreen monitor (1920x1080) Windows IE Windows 8.0.7601.17514
iPhone 4 iOS 7 ?Safari?
Desktop Windows IE 8
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
Laptop Windows 7 IE 8.0.7601.17514
Nexus 7 Android 4.3 Chrome 33.0.1750.136
Nexus 7 Android 4.3 FF 28
iPhone 4 iOS 7 Safari

B. Overview

Apart from some minor formatting issues, the reviewers were well pleased with the feature. Several IE 8 issues were raised, but they appear to have been addressed. One viewer recommended adopting a Button standard rather than something between the link and a button. I disagree as I don’t think the button hover highlighting will be sufficient with such small objects.

C. Issues

Tooltip