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 - Language selector #35

Open rubinahaddad opened 10 years ago

rubinahaddad commented 10 years ago

_Please note that this will need to be a language selector for more than 2 languages as well_

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

I'm going to give this one a try!

jeffdavidgordon commented 10 years ago

Here it is!

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

Windows 7: Firefox 26, IE 11, Chrome Android 4.1.2 (Google Nexus S): Default Browser

B. Provide status feedback

  1. Does the component always let users know about its current status? No, the component only indicates which status you would go to when activated. For example, the component does not indicate the current page (and its state) is English on an English web page. It only says Français
  2. Does the component give immediate, easy to understand feedback? Yes, when activated the component label changes.
  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, the menu dropdown button on mobile. It is always visible on desktop

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? Partially. Typically language is mixed with internationalization on other sites. Normally you would choose from a dropdown list: "Canada - English", "Canada - Français", etc... Since we are an entirely Canadian site, it make sense to omit the country name. However the current component is more a toggle than a true selector, which means it only supports two states. For more than two languages, a toggle doesn't work which is why most other websites use a selector system (often implemented using a dropdown of some kind).
  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? See C1 above.
  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? Not always, it may be unclear what clicking the component actually does. Do you get the same page in the other language? Will it instead be the home page in the other language? Will the user lose any data (or their spot in the web site) by clicking it? The component's label, a language name, is a bit ambigious. The component does not indicate on screen that it is for switching the language of the page. This may not be needed but we might want to test it.
  4. Is the experience consistent across screen sizes? Yes. Although it's possible some users on mobile may have more difficulty locating the component. This would have to be tested to find out for sure.

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 it 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, except for perhaps issue identified in D3.
  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? Mostly. However, the menu button is being shifted off the screen slightly in portrait view on my Android phone.
  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
JxRath commented 10 years ago

Language Selector: http://www.canada.ca/en/index.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 & iOS 7: No. The component does not show the current status, it shows the alternate status choice. However the entire page shows the current status as it reflects the current language chosen.

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

IE 8: Yes, it uses the WET link standard of blue underlined link. The “Visited” coloring does not work and the colour change on roll-over is too subtle to be properly noticed or useful. The colour change should be more pronounced.

iOS 7: No. The language selector is hidden under the “menu” item and does not follow the WET link standards. There is lag once the item is clicked which may cause multiple clicking on the link. A menu toggle might be a more appropriate UI choice for iOS, but it will generally be used correctly as is.

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

IE 8 & iOS 7: Mostly yes. Very few people should have an issue at 100% zoom levels. See comments 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. There is the Menu icon that appears in iOS, and in IE 8 at reduced screen sizes. The menu icon is not a common component in most web sites in a desktop environment so it may not be interpreted correctly by some people. People using mobile devices will likely find it as this is becoming more of a web standard icon.

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; with comments above.

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

IE 8 & iOS 7: Yes; with comments above.

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout?

IE 8 & iOS 7: Yes; with comments above.

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

IE 8 & iOS 7: Yes; with 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: Yes.

  1. Is the experience consistent across screen sizes?

IE 8: No. It changes from having the link visible to having it “hidden” under a menu icon. This may confuse some users.

iOS 7: Yes. The experience is consistent across landscape and portrait view and at various levels of magnification. 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: Yes. On coming into the Canada.ca site there is a language selector page, so the user has already chosen a language before seeing the main page. The single “Français” choice is an accepted standard in Canadian sites where there is only the choice (generally) between two official languages. If the user links directly to a page the choice is on all headers of the page for the user to select. iOS 7: In mobile applications, the language selector is “hidden” in the menu icon at the top of the screen. Once the menu is opened the “Français” choice appears in the top half of the menu directly under the “Search” box. It is appropriately sized for mobile and is easily selectable. Since only one alternative language choice is available it helps people from selecting the language they are already viewing.

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

IE 8 & iOS 7: N/A. No Error messages.

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

IE 8 & iOS 7: N/A. No Error messages.

F. Design for human interaction

  1. When using the component:

a. Is the layout/style intuitive?

IE 8 & iOS 7: Generally yes, with comments above.

b. Are the interactions intuitive?

IE 8 & iOS 7: Generally yes, with comments 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 & iOS 7: 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?

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. Only the alternate language choice is shown.

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

IE 8 & iOS 7: Yes. See comments above.

  1. Does the component use plain language? IE 8 & iOS 7: Yes.
nrustand92 commented 10 years ago

Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet): Firefox 26 & IE8 -desktop

B. Provide status feedback

  1. Does the component always let users know about its current status? No, because it only tells users which language is currently NOT chosen.
  2. Does the component give immediate, easy to understand feedback? The underline informs users that it’s a link, so yes. However, the color change on hover state needs to be contrast-tested. I can see the blue color changes slightly, but not sure if people will notice.
  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

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? In terms of bilingual Canadian website standard, 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? Yes
  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, it’s in the menu icon in smaller screen sizes. Need usability testing to see if users are OK with this

E. Help users recognize, prevent and recover from errors

  1. Does the component help to prevent users from making errors whenever possible? Yes. The splash page “forces” users to pick a language in the first place. If they accidentally pick the wrong language, can click the toggle to get the other language
  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? Mostly yes, not so sure w/ smaller screen sizes

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
ballantr commented 10 years ago

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

Device OS Browsers
Laptop (24 inch Monitor) Windows 8.1 Chrome 33.0.1750.146 m
Nexus 7 (both orientations) Android 4.3 Chrome 33.0.1750.136

B. Provide status feedback

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

It always provides the “Other” option. No issue here

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

Yes, indirectly. No issue.

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

No. In the narrow format the other language is inside a menu. It is a happy convenience that “Menu” is the same in both languages, but I would still not put it in the menu.

Furthermore, whereas the choice is at the top of the screen in wide format, it is not at the top of the menu.

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

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?

Top Right, outside of any menus is the typical place. The narrow format does not meet this. It is not easily located in the narrow format.

A secondary option would be to support clicking on the language specific part of the “Government of Canada” banner.

image

In the both formats, too much vertical space is given to this single feature. Other multi-lingual sites typically fit it in with other information in the top section - often using just a few letters of the language, like "EN | FR"

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?

No. I don’t believe this is ever in a menu. I have examined several multi-lingual country government web sites and it always seems to be visible on the landing page.

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

No. Different location in the large and small display formats

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. See above

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?

Yes

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

Yes

F. Design for human interaction

1. When using the component:

a. Is the layout intuitive?

Not in the narrow format

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

ballantr commented 10 years ago

Language Selector Summary

Devices and Browsers Used

Device OS Browsers
Laptop (24 inch Monitor) Windows 8.1 Chrome 33.0.1750.146 m
Nexus 7 (both orientations) Android 4.3 Chrome 33.0.1750.136
Unknown Windows 7 Firefox 26
Unknown Windows 7 IE 11
Unknown Windows 7 Chrome
Google Nexus S Android 4.1.2 Default
HP Desktop, Dell widescreen monitor (1920x1080) Windows IE Windows 8.0.7601.17514
iPhone 4 iOS 7 Safari
Desktop Unknown Firefox 26
Desktop Unknown IE 8

Notes

The approach was generally well received.
All 4 reviewers noted that the item does not show the “current state”, but rather shows the alternative, though only one expressed any degree of concern.

Issues with link coloring and behavior were expressed by two reviewers, but presumably that will be dealt with elsewhere.

Opportunities for improvement

  1. Three reviewers mentioned that the language choice was “Hidden” in the menu in the narrow format – though only one (this reviewer) had strong concerns about that.
  2. The heuristic template does not provide an invitation to comment on this, and only one reviewer (this reviewer) mentioned it , but the language selector takes up a whole row at the top of the screen in wide format. This is valuable real estate! Other multilingual sites seem to combine the language selector with other items.