Heuristic evaluation - Pills

[rubinahaddad]

Please perform a heuristic review of the following component: Pills 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.

[JxRath]

Pills: http://wet-boew.github.io/wet-boew-styleguide/new/design/pills-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 - Mobile Safari iPad mini – Latest iOS 7 – Mobile Safari MacBook Air, Mac OS X V.10.7.5 (Lion), Safari V.6.1.1

NOTE: The coding examples need to be improved/finished to show different content areas appearing when the pills are clicked. Pills should operate like the “Tabbed Interface” example with different content areas appearing underneath or next to the pills as they are clicked. WET copied the Bootstrap example which was similarly flawed.

B. Provide status feedback

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

Default Pills – IE 8: No. The pill navigation is supposed to be used to call up blocks of content, so the current default style (as well as the Twitter bootstrap version/example) is not fully coded as a working example. When the user clicks on a “Pill” in the set, a new block of content should appear under the pill and it should turn blue to show it is the active pill, associated with the content area below (or sometimes above) it.

In the examples shown, when the user rolls-over the non-selected pills they turn light grey to show the extent of the clickable area, the underline on the link disappears and the text turns a slightly lighter blue. On-click, the pill turns grey, the text turns a slightly different blue, the text underline disappears and IE puts the black and white dotted line around it. If the example was coded completely, the pill should turn blue, and the text should turn white showing that it is now the “Active” pill, and the content under the pill would change. When the user rolls-over the already active (blue) pill the underline disappears and the cursor changes to the pointing hand. On-click the underline remains missing and IE puts the black and white dotted line around the element.

The roll-over colour change for the blue text is too subtle to be of use, the colour difference needs to be made more pronounced. The light grey used in the roll-over is too light; it needs to be made darker for accessibility reasons.

As with all other elements, IE 8 does not render the rounded corners so the Pills are rendered with square corners.

Default Pills – iOS 7: No. The example is not fully coded (see above). In iOS there are no roll-over or on-hover effects. On-click the non-selected Pills will turn light grey with a slightly lighter blue text; the text underline disappears. As in the IE version the blue text colour difference is not sufficient, and the grey is too light on a white background.

Default Pills – MacBook & Safari: No. The example is not fully coded (see above). MacBook and Safari shows the same roll-over properties as IE, except on-click there is no dotted line around the button as IE does. This is the expected (desired) behavior.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. As in the “Default” example this is not fully coded/working. The Pills should never be used to span the full width of the page. They should be coded in a narrow side column on the left with a wider content area on the right. On-click the content in the area to the right of the pills should change to reflect the label on the pill. Otherwise; same comments as “Default”. There is also some oddity in the code for “Vertical Pills” vs. “Justified Pills”. In IE both Pill styles stack vertically. In iOS the “Vertical Pills” stack vertically and the “Justified Pills” stay in one horizontal row that spans the width of the body with 3 buttons of equal size.

Disabled Links – IE 8: No. The current status of the “Disabled Link” example is not properly or completely coded. One of the three links should always be in a selected state. This is similar to tabbed navigation, one tab is always active. The first two items are non-selected by default and exhibit the roll-over and on-click behaviors described above. The third item that is greyed out and the text reads “Disabled Link”. On roll-over the underline on the greyed link disappears, and the cursor changes to red circle with a line through it. There is a problem with the “Disabled” link; on-click it is still active.

This “Disabled Link” state should likely also be added to the “Link” standard, and not only remain in the “Pills” standard.

Disabled Links – iOS 7: No. Same comments as IE 8, except that there are no roll-over or on-click styles. The “disabled” link also broken because it works  Likely there is a target in the “a href” tag in the code when there shouldn’t be.

Disabled Links – MacBook with Safari: No. Same as IE, but on roll-over the regular cursor arrow changes to a truncated arrow missing the stem, and displays a white circle with a line through it instead of the red version that IE uses.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken; dropdown does not work. I checked with the similar example in Twitter Bootstrap and it does work on their page in both IE and iOS 7. There is a bug in the code that needs to be fixed for WET 4.

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

Default Pills – IE 8 & iOS 7 & MacBook with Safari: No. The proper feedback would be more apparent if the example was fully coded. In the Twitter bootstrap example (that this is based on) the words are not underlined. WET 4 is using underlined text so it looks like a link, but does not follow the “Link Standard” where the underline does not disappear on roll-over or on-click.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. Disabled link works when it should not.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken; dropdown does not work, so the feedback is not what should happen.

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

Default Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. The examples are not fully coded, and the links do not follow the link standard.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. Disabled link works when it should not.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken; dropdown does not work, so the user task cannot be completed.

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

Default Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. The examples are not fully coded, so the missing content area that should come in and out of view depending on which pill is clicked does not work. WET copied the incomplete Bootstrap example. The coloration for the “Visited Link” that should come into view after a link is visited does not. The roll-over brings into view the grey pill boundary that shows the extent of the clickable area, but the link underline disappears which goes against the WET 4 link standard.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. Missing content area to the right of the pills that should appear and disappear depending on which pill is clicked. The pills should never span the full width of the body area.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. A red circle with a line through it appears (white with a black arrow in MacBook & Safari) when the user mouses over the invisible pill holding the “Disabled link” text. This does not work on iOS 7. The underline on the link also disappears, but since this link is supposed to be disabled, the disappearing underline also helps to communicate that the link is not supposed to work.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken; dropdown does not come into view when the pill is clicked. Also the area that is supposed to be controlled by the pills and the missing dropdown does not appear when the pills are clicked.

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?

Default Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. Links do not match WET link standards and “visited” link style is missing. Components are not fully functional so the expectations are not met when clicking on the pills. Also the “invisible” pills are unexpected. The user will expect a link that is formatted like a link to work like a link instead of an invisible button with grey roll-over and disappearing link underlines.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken, see additional comments above.

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

Default Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken, see additional comments above.

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout?

Default Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken, see additional comments above.

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

Default Pills – IE 8 & iOS 7: No. See comments above. Inconsistent with other component standards in WET, but consistent throughout the component with the exception of the “Disabled Link” example where one of the pills should always be highlighted.

Vertical & Justified Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Disabled Links – IE 8 & iOS 7 & MacBook with Safari: No. See comments above.

Pills with Dropdowns – IE 8 & iOS 7 & MacBook with Safari: No. Component is broken, see additional comments above.

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

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: Language is determined by writer/coder; not specific to the component.

1. Is the experience consistent across screen sizes?

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: Yes.

E. Help users recognize, prevent and recover from errors

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

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: No. Components were not fully coded to show the areas that appear and some examples (Disabled link and Dropdown) were broken. No error messages appeared.

1. When there is an error, is it simple and informative? ALL Pills – IE 8 & iOS 7 & MacBook with Safari: No. Components were not fully coded to show the areas that appear and some examples (Disabled link and Dropdown) were broken. No error messages appeared.
2. Does it provide information to fix or correct the error?

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: No. Components were not fully coded to show the areas that appear when the pills are clicked and some examples (Disabled link and Dropdown) were broken. No error messages appeared.

F. Design for human interaction

1. When using the component:

a. Is the layout/style intuitive?

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. The component coding needs to add the missing content areas.

b. Are the interactions intuitive?

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. The coding is missing the result of 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?

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: Generally Yes. In iOS 7 if the coder has a number of pills with very short words in them the touch target on the iPhone may be difficult to hit at 100%. Pinch zooming may be required to hit the right target.

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?

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: N/A

G. Keep it simple

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

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: No. See comments above. The component coding needs to add the missing content areas.

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

ALL Pills – IE 8 & iOS 7 & MacBook with Safari: Yes, with comments above. The interactions are simple but the results, or lack thereof, need to be fixed.

1. Does the component use plain language?

IE 8 & iOS 7 & MacBook with Safari: Language is writer/coder controlled.

[nrustand92]

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: pills are highlighted w/ the cursor hovering, clickable links look clickable & disabled ones look disabled. The blue “Home” pills’ underline is hidden w/ the hover, which is less salient than the highlighted grey pills.
2. Does the component give immediate, easy to understand feedback? Yes, not w/ Home pills. See B1
3. Will the user have enough visual cues to easily complete the component’s tasks? Yes, except for Home pills. See B1
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? Blue “Home” pills can be mistaken for a cursor hover highlight. So, if users subsequently hover the other 2 links & see they turn grey, they may be a little surprised. Otherwise, yes to this question. P.s., the dropdown pills should have an actual dropdown menu to demo the functionality better.
2. When users perform actions within the component, are the results they get what they would commonly expect? Yes, except for the Home pills

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? Yes. E.g., the “forbidden” icon for disabled link is saliently preventative
2. When there is an error, is the messaging simple and informative? No such messaging
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? Can be better answered when certain examples are refined further. E.g., dropdown pill example should have an actual menu. Otherwise, N/A
2. Overall, are user interactions kept as simple as possible? Yes
3. Does the component use plain language? Yes

[ballantr]

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

A review of Pills: http://wet-boew.github.io/wet-boew-styleguide/v4/design/pills-en.html#

Device	OS	Browsers
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

Evaluation of this widget depends entirely upon the objective the widget is trying to achieve – and I’m afraid that is not entirely clear from examining the widget.

“Pill Buttons” are interpreted by some as providing “a ‘Tab Like’ interface for quickly switching between multiple views of data”, and by others just simple buttons that are shaped like pills. I regret that the widget fails on both of those counts.

For this review I will assume that the objective is the former - “a ‘Tab Like’ interface for quickly switching between multiple views of data”.

B. Provide status feedback

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

No. The pills do not appear to offer (tab-like) alternatives. The selected pill looks like a button (and, in isolation, it is not clear if that button is selected or not), and the unselected ones look (until you hover) like unrelated links.

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

Yes. Hover works, and presumably when you click an unselected pill the coloring will change appropriately.

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

No. The unselected pills do not appear to provide (tab-like) alternatives. See B1. The vertically arranged pills even less so. To succeed these pills must appear to be part of a group of buttons, so the user can intuit

• That they are related
• That they are alternatives &/or
• That one is ‘active’ and the others not.

The following is a successful implementation.

In the pills under review, when a blue pill is selected, the embedded text changes from white to blue. Blue text on blue background is not acceptable.

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?

No. See section B.

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

Only if the users understand the pills provide “tab-like” alternatives – I don’t think users will.

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout?

No. Not that there are exactly standards on these things, but to the extent there are – no.

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

Not logical to change the text color to blue on blue.

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

N/A

4. Is the experience consistent across screen sizes?

Mostly. Justified pills rearrange themselves – but in their vertical arrangement they are even less likely to be understood.

E. Help users recognize, prevent and recover from errors

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

Yes

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?

Only if you understand the tab-like behaviour

F. Design for human interaction

1. When using the component:

a. Is the layout intuitive?

No. See section B.

b. Are the interactions intuitive?

No. See section B.

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?

N/A

[ballantr]

Summary: Pills

http://wet-boew.github.io/wet-boew-styleguide/v4/design/pills-en.html# 17 April, 2014

A. Devices and Browsers Used

Device	OS	Browsers
HP Desktop, Dell widescreen monitor (1920x1080)	Windows	IE Windows 8.0.7601.17514,
Apple iPhone 4	iOS 7	Mobile Safari
iPad mini	iOS 7	Mobile Safari
MacBook Air,	OS X V.10.7.5 (Lion)	Safari V.6.1.1
Desktop		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

B. Overview

The Pills example is not fully coded, so they cannot be fully evaluated. Specifically, selecting a pill does not cause any behaviour on the page, and the behaviour is critical for understanding these widgets.

Two of the reviewers felt that the widgets failed in their task, for one reason or another. For example the image below in no way looks like a “tab-like” interface with three alternatives. It looks like a button and two unrelated links:

The following is a successful implementation of the idea:

As a result, it is this reviewer’s opinion that the widget is not yet ready for use.

C. Bugs Etc.

• In IE 8 “Vertical Pills” &. “Justified Pills” stack vertically (not verified)
• In Desktop/Chrome disabled bills show enabled till you hover. This is user-hostile!

• JxRath reports “IE 8 & iOS: There is a problem with the “Disabled” link; on-click it is still active.“

  D. Issues

  Invisible Visited Link coloring

• Problem: The link’s “Visited Link” coloring is not clear against the blue pills

• Priority: High
• Suggestion: Rethink this. Do not treat these as links. The Blue background is sufficient use an approach like this:

Link behaviour

• Problem: As in other widgets using links, the colors and underline attracted criticism
• Priority: Low in this instance
• Suggestion: Adopt and apply a universal link standard.

The Light Grey (hover color) is rather subtle

• Problem: The light grey used in the roll-over is too light; it needs to be made darker for accessibility reasons
• Priority: Low in this instance
• Suggestion: Adopt and apply a universal link standard.

Full Width Pills do not make sense

• Problem: As JxRath put it: “The Pills should never be used (so that each pill spans) the full width of the page. They should be coded in a narrow side column on the left with a wider content area on the right.”
• Priority: Medium-High
• Suggestion: Use ‘Default’-style pills only..