View Full Version : Review Request - overall usability (also interested in feedback from safari users)

02-15-2007, 07:22 AM
As I posted in another thread, I just completed a new section to my website. This new section was done at the request of my mother so that she could use it in one the environmental classes she teaches. As stated in the other thread due to larger design requirements and considerations the width of my site is locked at 756px and can not be made wider until the percentage of my users using a screen width of less than 1024px drops to below 5%.

The new section is based on the U.S. Department of Transportation's "Hazardous Materials Table" from U.S. federal regulations 49 CFR. The layout of my version of this table is designed to mimic the layout of the actual table in the printed regulations as closely as is possible. The width of my site, the size of the table and CSS limitations created some really unique design challenges for me.

What I need to know is how effective I was at balancing the conflicting design requirements I had and how usable the new section of my site is. I will be meeting with my mother's class and discussing the usability of this new section with them, but they already some familiarity with the DOT HazMat Table. What I need to see is how easy it is for someone who has never seen the DOT HazMat table to find information on my version of it. As such I am asking folks here to try out this section of my site and see how easy it was for you to find certain pieces of information. Any participation in this test and any feedback would be greatly appreciated. I am especially interested in feedback from Safari users as to any significant Safari specific rendering and/or dynamic menu issues (screen captures of problems would be appreciated).

Beginning point for test: http://environmentalchemistry.com/yogi/hazmat/table/

Goal #1: Find the UN ID# and Qty Limit for Passenger air/rail for the chemical "Ethylenediamine"

Goal #2: Find the proper shipping name and hazard class number for UN ID # UN1708. What is the name of this hazard class? What color is its placard (the diamond shaped sign)?

Goal #3: What is the proper shipping name and UN ID# for the first Class 2 material listed under Division 2.2? What color is its placard?

These three tasks should reasonably test the usability of this new section of my site. I'm not going to give any hints about using the table as many people who hit this section of my site will have never seen the HazMat table before.

Again I would greatly appreciate anybody who has Safari to do a side by side comparison between Safari and other browsers to see if their are any issues that need to be addressed.

02-15-2007, 03:48 PM
Goal #1: Find the UN ID# and Qty Limit for Passenger air/rail for the chemical "Ethylenediamine"

UN1604 - 1 L

Goal #2: Find the proper shipping name and hazard class number for UN ID # UN1708. What is the name of this hazard class? What color is its placard (the diamond shaped sign)?

Toluidines, liquid - 6.1 - Division 6.1 Poisons - white

Goal #3: What is the proper shipping name and UN ID# for the first Class 2 material listed under Division 2.2? What color is its placard?

erosols, corrosive, Packing Group II or III, (each not exceeding 1 L capacity) - UN1950 - green?

Wow - that was like been back at school :eek: my head is fried

All that was done using Safari and when cross checking with FireFox - I didn't notice anything different at all

02-15-2007, 06:06 PM
Fantastic. Someone give agua a gold star. ;)

Did you find my HazMat table easy enough to use when trying to answer those questions?

Making this table user friendly given the 700+ pixel width it needs and the 440px width that is available was one of the biggest usability challenges I've had to face on my site.

Thank you very much. Especially for the Safari thing. I've always been very concerned about this since I can't test on that browser. I now know it works okay on Safari which is a great relief. Now if I could find a blind person with a dynamic Braille display to test my site for me.

02-15-2007, 08:40 PM
Wey Hey - first gold star ever :)

Yes - it was very easy to use once I figured out the menu and table structure... which took around 3-4 mins and considering I never did chemistry at school and it was like a foreign language to me - so thats not bad.

I've found that most things work in Safari - its quite a good browser, although I still use FireFox most of the time.

Can't help you out with the blind person... sorry :)

02-15-2007, 09:01 PM
If it makes you feel any better that table is even more obscure than chemistry. That table is part of the United States Federal Regulations (to the non-lawyer this is basically laws) in regards to the transportations of dangerous goods (e.g. Hazardous Materials). It was written by bureaucrats at the instruction of politicians. Every little data point represents pages of regulations.

The U.S. Department of Transportation has a version of this table on their website, but it is not at all user friendly and it is missing some very fundamental styling requirements. For instance certain entries in the proper shipping name are supposed to be italicized, which infers a very specific thing in the regulations. Unfortunatly their online version of the table is missing this exceedingly critical piece of formating. The formating errors and lack of usability was frustrating my mom in her efforts to teach this stuff to her students and she asked me if I could put something like this together since I already had the data in my database and was using it in a different way on my website.

02-16-2007, 08:13 AM
I don't like the horizontal scroll.

If you're trying to view the far right column you can no longer see the far left column, which means you have no idea which chemical the information you are seeing blongs to.

02-16-2007, 09:07 AM
I don't like the horizontal scroll either, but it can not be eliminated given the current design limitations and formating requirements for the HazMat table (remember the formating of the table can't be changed).

Currently 11% of my users still use 800x600 screen resolution and the formating requirements for the HazMat table are very specific. The horizontal scroll was the least undesirable of the formating options I had. HTML/CSS also has significant limitations when it comes to tables in that one can not "fix" header columns such that they don't scroll. From what I have read this is being addressed in CSS3, but we all know that it will be 5+ years before we can implement those changes. Any of the cutesy JavaScript solutions I found created tremendous complexity to the code and created accessibility nightmares so they are not workable solutions either.

In order to eliminate the horizontal scroll, I need at least 680px of horizontal space (and this would be squished). I'd have to eliminate both the left hand ad column and the right hand menu column in order to eliminate the horizontal scroll in order to have the entire page width display on a 800x600 monitor properly. Eliminating either the ad or menu column is an option I am not willing to accept. After all there is no purpose in my publishing stuff like this if I can't display ads and in order for ads to be effective on a page like this they need to be displayed next to the content.

I am considering fixing my page layout to a width of 1000px, which would eliminate the horizontal scrolling issue for most users, but then I would have to do something to address the 11% users with smaller resolutions. The only solution I see to this is to use a JavaScript to reset the width of pages to the current layout for users with smaller desktop resolutions. This would add extra code and require significant testing to make sure it works correctly.

Given the fact that for now I have to live with a horizontal scroll, my object has been to reduce the usability issue this creates as much as possible. For this reason, I'm using the hover pseudo class to highlight whatever row the mouse cursor is hovering over. This will at least allow one to stay on the chemical they are interested in as its name scroll out of view.

I tried adding the "title" attribute to the <COL> tags for each column and while the HTML specifications do allow for this, no browser supports this. I'm also using the "headers" attribute to associate rows and columns, but again this has no impact on graphical browsers and is only useful for accessibility purposes.

I'm telling you that this new section of my website has created some of the biggest usability complexities I've had to face on my site. There is no solution that doesn't have a significant negative impact on something or some one.

02-16-2007, 09:31 AM
Why not launch the table in a new window with a different layout than the rest of your site? One that uses horizontal ad units instead of vertical ones to free up that necessary space.

Also, consider adding an overlib (http://www.bosrup.com/web/overlib/) type javascript addon so that when mousing over a row the chemical name is displayed in a little popupthing.

02-16-2007, 09:46 AM
Also you could probably make the left column not scroll not by any funky css, but by simply putting out outside of the iframe.

02-16-2007, 10:12 AM
Horizontal ads are not effective and I don't want to change the layout of the site from section to section. I feel this creates a greater usability issue than the horizontal scrolling.

JavaScript is not needed for a little popup thingy, I could use the title attribute in the TR tags of rows (and I'm thinking of trying this) but I'm concerned that it will override other title attributes within TD cells that also provide important information.

The table is not in an iframe, it is in a scrollable DIV. Putting the left column outside of the DIV would destroy the table from an accessibility standpoint as one would now have two tables and the columns would no longer have any relation to each other. Also not all rows are the same height so there would be no way to keep the rows of the "title" column lining up with the other columns. Any cell can cause a specific row to stretch in height (columns 2 and 7 are prime examples).

The table MUST be kept in tact with all columns in a single table to ensure everything stays together. Anything else would create greater usability and accessibility issues than the horizontal scrolling.

As things stand right now, one can turn off CSS and JavaScript and the hazmat table would be entirely usable with the important formating like italics still being as it should be. The page also prints out correctly (sans menus and other detritus) without any special tricks. All of this would be broken if I broke the "header" column off from the rest of the table.

02-16-2007, 10:23 AM
I just added the "title" attribute to the <TR> tags of rows with the proper shipping name. This does seem to work just fine in Firefox and MSIE7. I have not yet tested IE6 or other browsers. This should partially address the concern of the chemical name scrolling off the page.

02-20-2007, 05:01 PM
It looks pretty good.

I would definitely consider launching the table in a new window. With such a large table in a little amount of space, it gets pretty convoluted. Also, I would alternate row colors.

02-20-2007, 06:32 PM
Row colors do shift as a mouse is moved over them.

My plan is to increase the width of my site at some point in the future once I see the percentage of users with 800x600 desktops drop far enough. Spawning a new window would cause all kinds of accessibility issues.

02-21-2007, 08:55 PM
How about an optional spawn? Also, I still think you should change alternate row colors - especially if the user has to scroll (to a point where they can't see the first column).

02-21-2007, 09:11 PM
Alternating row or column colors? From a coding standpoint alternating rows would be easier.

02-21-2007, 09:28 PM
Row colors.

02-23-2007, 11:23 AM
Okay I've "shaded" every 5th row. I tried every other row and it started to screw with the eyes by causing a weird plaid effect.:sick:

Every 5th row seems to avoid the plaid effect while still creating reference rows. The effect is very subtle as there is already too much going on in the table.

02-25-2007, 08:47 AM
Much better :)