JxRath
commented
10 years ago Tabbed Interface with slide-horz: http://www.cic.gc.ca/english/games/museum/1.asp
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
Note: there are Errors on this page. The header search field and menu do not render properly. This may cause, or add to, other errors in the component.
B. Provide status feedback
- Does the component always let users know about its current status?
IE 8: No. This component does not work properly with IE 8.
When the page first loads the first line in the content area is “Artefacts in Room 1 – Early settlement.” This is followed by 15 stacked horizontal bars with numbers centered in them. The bars span the full width of the page. At the bottom of the stack there are two Blank bars with nothing in them (I think these were supposed to contain left and right facing arrows).
The area under the bars contains an image with the header “Certificate of Freedom, 1783” followed by two columns of text and some links to the other “Rooms”
When the user rollls-over the horizontal bars they turn darker grey indicating that they can be clicked and likely link to other pages. Clicking on these bars does nothing – the links do not work.
iOS 7: Somewhat. When following the link provided on the heuristics evaluation page in iOS 7 I was brought to Room 2, while in IE 8 I was brought to Room 1. In both cases I should have been brought to the “Lobby”. The page controls seem to work in iOS 7 letting me know what page I was on by the numbered page highlight. The Arrow buttons also worked as expected.
- Does the component give immediate, easy to understand feedback?
IE 8: No. This component does not work properly with IE 8.
iOS 7: Yes. The button controls and links worked and I was able to navigate through the site.
- Will the user have enough visual cues to easily complete the component’s tasks?
IE 8: No. This component does not work properly with IE 8.
iOS 7: Yes. The button controls and links worked as expected (more or less) and I was able to navigate through the site.
- 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: No. This component does not work properly with IE 8. Links do not work, so hidden content and linked pages cannot be seen.
C. Match real world conventions
- 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: No. This component does not work properly with IE 8. Buttons highlight but when clicked they do not work.
iOS 7: Yes. The page controls and links worked as expected, although the numbered buttons sometimes rendered on top of text below the buttons partially obscuring it.
- When users perform actions within the component, are the results they get what they would commonly expect?
IE 8: No. This component does not work properly with IE 8. Links and buttons do not work as expected.
iOS 7: Yes. The buttons, highlighted buttons, links and visited links worked as expected. D. Apply standards and ensure consistency
- Have industry formatting standards been used consistently throughout?
IE 8: No. This component does not work properly with IE 8. Formatting of buttons does not work – they span the full page in a vertical stack which is not the intended layout. Also the left and right arrows do not appear.
iOS 7: Somewhat. The buttons render in multiple rows, which is not ideal, and they also occasionally obscure the text underneath it.
- Is there a logical and consistent usage of elements throughout the component?
IE 8: No. This component does not work properly with IE 8.
iOS 7: Somewhat. The buttons do not remain a consistent size when shifting from portrait mode to landscape mode.
- Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component?
N/A
- Is the experience consistent across screen sizes?
No. The experience renders differently in iOS and IE 8.
iOS 7: The numbered buttons stack up in 3 rows. First row, 1 through 9; Second row, 10 through 15 with a left arrow; Third row, Right facing arrow. The right facing arrow in the third row renders on top of the “Certificate of Freedom” text partially obscuring it.
iOS 7: When the user switches from “portrait” mode to landscape, the buttons nor navigating the pages get larger. The user needs to “pinch-zoom out” and then the buttons return to the size they were in portrait mode.
IE 8: One column of 17 buttons that span the full page, which is inconsistent with the way the buttons render in iOS 7.
E. Help users recognize, prevent and recover from errors
- Does the component help to prevent users from making errors whenever possible?
IE 8: No. Page design and controls do not work properly and cause errors.
iOS 7: There are some possibly minor rendering errors on the page which may cause accessibility issues, but there is no way to “recover” from these errors.
- When there is an error, is it simple and informative?
IE 8 &iOS 7: No. There are no error messages; the user quickly will determine that the page is “broken” if in IE 8.
- Does it provide information to fix or correct the error?
IE 8 &iOS 7: No. There are no error messages; the user quickly will determine that the page is “broken” if in IE 8.
F. Design for human interaction
- When using the component:
a. Is the layout/style intuitive?
IE 8: No. This component does not work with IE 8. Page appears to be broken. Buttons span full width of screen.
iOS 7: The button controls work, but not always as expected. The list of links at the bottom of the page exclude the “room” the user is in. Not sure if this is by design or a coding error.
b. Are the interactions intuitive?
IE 8: No. This component does not work with IE 8.
iOS: Yes. The button controls and links worked as expected (more or less) and I was able to navigate through the site.
- 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. This component is not compatible with IE 8. Formatting of buttons does not work – they span the full page in a vertical stack which is not the intended layout. Also the left and right arrows do not appear and none of the links in the buttons work.
iOS 7: Buttons overlap the text in many cases and do not always work as expected.
- 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
- Does the component display only the information needed by the user at any given point in time?
IE 8: No. It tries to link information in the different “rooms” of this virtual museum, but the component is broken and the links do not work.
- Overall, are user interactions kept as simple as possible?
IE 8: No. This component does not work with IE 8.
iOS: Yes. The button controls and links worked as expected (more or less) and I was able to navigate through the site.
- Does the component use plain language?
N/A
LXP122
thomasgohard
rubinahaddad
ivan4
nrustand92
ballantr
Please perform a heuristic review of the following component: Tabbed Interface with slide-horz example.
Performing a heuristic evaluation