Opera and the Nintendo Wii

From gameindustry.biz:

“Opera Software has confirmed that its internet browser will be free for users of Nintendo’s Wii console until the end of June 2007.”

Just when you thought cross platform testing was a lot of work - coming soon: the days of cross-game-console testing. Browsing isn’t completely new to game consoles, and I can’t say I’m very knowledgable about it, but Opera for the Wii will run javascript and flash.

Read the article.

Usability Poster

From http://experiencedynamics.blogs.com:

“Here’s a poster that reflects some thoughts about user experience…all of the bottom row items (outcomes of positive user experiences) in the poster are based on empirical research. Let’s review some of that research, a brief glimpse at the science behind what the poster is communicating…”

View the post.

12 Lessons for Those Afraid of CSS and Standards

From alistapart.com:

“If you’re new to CSS and web standards, you may feel as though you’ve fallen down a rabbit hole. Ben Henick is here to ease your pain.”

Read the article.

6 Ways to Fix a Confused Information Architecture

From useit.com:

“When your website’s users consistently go to the wrong sections, you have many options for getting users back on track, from better labels to clearer structure.”

Read Jakob Nielsen’s latest article

Thechildren.com: Quick Audit

This is the website for a local children’s hospital in Montreal, designed by Uranium Design.

Visit the Children’s Hospital website here.

As parents, grandparents as one of their major audiences, the site must be as accessible as possible. Most visitors aren’t at this website to buy products. In general, they want information as quickly as possible, such as services, location and contact info. Unfortunately, it has some problems that may hinder common users from accomplishing their tasks:

Overall: 2.5/5 - Though I have mentioned many things, overall, it is an improvement over their old site, is pretty navigatable. There are some pretty serious accessibility issues - and considering that this is a hospital site - they ought to be addressed ASAP.

Usability/Accessibility:

• The menu item text, and the majority of the headers are not resizable - making it difficult for vision impaired users to navigate the site.
• The body text is low in contrast, and it is far too small for older adults - thus slowing down their reading time.
• The first category is "Info desk", which overall is good. It makes me think that I can find information there, but then what does "Health info" hold?
• There is an inconsistent treatment of links on images. Some images can be enlarged, some cannot - but they all appear in the same way. In general, when something can be clicked, there should be an affordance that tells the user they can click on it and what happens when they click on it (e.g., will it open a popup, start a download, etc).
• Many items, such as the images of maps and some links cause pop-ups and new browser windows to appear. This is not advised at all. Popups and the like should be avoided at all costs. Many users block popups, and even some browsers automatically block them. They also disable the back button. Not-so-savvy web users (like many parents) get confused with popups and new browsers as they make it easy to click on another window by accident and get confused.
• This site is very printable - a very good thing as most users will probably print things up to bring with them. Unfortunately, maps in popups, could prove more difficult to print for some users.
• The multiculturism section have expandable sections with translated text - however, it is presented in a confusing manner. The translations are not labeled as such - and it’s mystery what will be found when the "+" is pressed. In general it’s never a great idea to hide content. If there is too much content, they should be "chunked" and placed on separate pages. Also, the "+" is used inconsistently - sometimes it expands a section, other times it simply a link elsewhere.
• There is an over use of the "more", and ">>>" link. There should be more of a description of what will be found at the target links - this helps users know where they are going, and helps Google index the site better.
• Any link that will cause a PDF to be downloaded, should be indicated on the link itself, rather than on a note at the bottom of the page.
• It would be ideal, if there was a search function on every page rather than a link to the search page. In any case, the "submit" button on the search page ought to be replaced with the word "search".
• The display of search results should be reformatted. Every result’s title starts with "The Montreal Children’s Hospital", this makes it difficult to browse the results quickly. The search query is also bolded in the results - but since the font is too light, and small - that detail is not very evident.
• In the News section, all the headers should be clickable. The strange icon isn’t needed - as it is slightly confusing as they hint that the link will be a PDF.
• There are no accesskeys. People are forced to use a mouse - accesskeys should be implemented for those with problems with coordination when using a mouse.
• There is an consistent use of the color red. Sometimes red items are links, other times they are just headers.
• There is no need for a "Home" link on the home page.
• On the home page there is a link to "Meet Josiane" - however, clicking on the link sends me to a "Patient stories" index rather than the article itself.
• When dealing with a very large population, and audience, it is best to size the page to fit within 800x600 as about 20% of users still are on older monitors - stranger still, the site barely fits inside 1024px wide windows as well. As some browsers have many add-ons, or costomizations, the safe width to design for when dealing with wider monitors is 990px.

Code:

• Unfortunately, the site is built using many tables - causing many screen readers to have problems.
• There is no graceful 404 page. Accidentally going to the wrong URL (by copying and pasting incorrectly) causes the user to be lost.
• There is inline styling and code - this will cause maintenance problems in the future.
• The wrong doctype is being used - causing many warnings such as open tags, and improper tag case.

Jacob.ca: Quick Audit

You can visit the Jacob site here.

Designed by cloudraker.com, it is a beautiful site, but it has many usability problems. The fact it has won a Boomerang award, makes me believe that the judging panel for the awards don’t have strong usability backgrounds.

Cloudraker prides itself on usability and accessibility. From their website, "At CloudRaker, unlike pure research groups, we take a very pragmatic approach to usability research. We develop end-user personas, conduct task analysis, analyze information architectures, run usability tests or expert evaluations, not for the sake of research but to drive results. Period." But based on this site - they talk the (market) talk, but don’t walk the walk - in fact, they don’t even get up to stretch. And here’s the audit:

Usability issues:

• Firstly, the entire site is in flash, which makes it impossible for me to send the URL of a new article of clothing to a friend.
• Another result of the flash site, is that trying to print the page results in a virtually blank page. So basically, if I found what I wanted online and wanted to print it up for later offline use, I’m out of luck.
• There is no non-flash version, automatically eliminating 5% of the users that may visit this site. For a commercial site, there is no reason to ignore any customers.
• The menu items change positions - you cannot easily navigate the site, because the navigation moves. The user will be disoriented constantly while browsing the site.
• Lack of any breadcrumb - it is impossible to know what section you are in. Not only that, the section selected doesn’t indicate that it’s been selected. If you click randomly - you will get lost within seconds.
• Sometimes text appears in small scrolling windows which don’t scroll when using a scroll-wheel. The text isn’t long, why make me scroll? And since you’ve made me scroll - why can’t I use my scroll-wheel?
• Uses popups - the wallpaper section (I’d tell you how to get there, but I can’t remember how, or post a URL) causes popups to appear without warning the user. This will confuse many people, and leave the vision-impaired users lost since it disables the back button.
• Audio controls are too small. If you have impaired moter skills (not to mention impaired vision), I hope you like the music - because it’s a very small control.
• The language switch button sends you to the home page - and since it’s impossible to know where you are, or remember how you got there - you have to do it all over again. The switch really should send you to the proper page in the first place.
• The site uses market-speak - the language that only marketers understand. "It’s a wrap" means what exactly? Or what about "The Looks"? And what is "Wishlist" all about?
• If you ever find yourself in the "Collections" section - you’ll see you can "add" items…to something. Not sure what, or why, or how to check what else I’ve added. But at least I know it’s added…if I remember I added it, otherwise… who knows. You have to know or stumble upen the fact that the items are stored in your "Wishlist". By the way, you can print your wishlist, too bad you can’t print anything else.
• No search functionality.
• The best part is the listing of system requirements in the FAQ for the site. So, let me get this straight, I have to get into the site so I can find out how to view it? Nice.

Accessibility

• The fonts are smaller than 10px, and cannot be resized. Even worse, they are light gray on dark gray. I hope you have your reading glasses. I am very aware that it is in line with their color scheme, but this is ridiculous.
• The site is built on framesets - this is a very outdated, and looked down approach to web design.
• There are no accesskey shortcuts - you must use a mouse.

Code:

• They use the very offensive "embed" tag.
• The code has many warnings (illegal characters).
• The code uses tables.

Overall 1/5: Good looking, but terribly unusable to the point of frustration. It takes about 3-5 visits before you get the hang of the site. But for first time users, that’s about 2-4 times too many. I’m not saying to take away their award, I’m saying the Boomerang gang has to get its act together, and learn a little about what a proper website is. This solidifies my stance that Montreal is years behind the rest of the world.

Text resize detection and sIFR

I’m actually surprised this didn’t occur to me sooner. After reading this article from alistapart.com, I simply tweaked the code so that upon resizing, it reloads the page. By reloading the page, the sIFR reinitiates, and resizes the flash headers.

Here’s an example of it in use.

In fact, this site is now using this technique - feel free to resize the text size and see it in action!

Firefox security update

From Mozilla:

“Firefox 1.5.0.7 is a security and stability update that is part of our ongoing program to provide a safe Internet experience for our customers. We recommend that all users upgrade to this latest version.”

Of course, if you’re already running Firefox, your browser probably updated itself already. In anycase, here is the link to the direct download .

User Testing is Not Entertainment

From useit.com

“Don’t run your studies for the benefit of the people in the observation room. Test to discover the truth about the design, even when user tasks are boring to watch.”

Read Jakob Nielson’s Alertbox.

CSS style changing based on font-size

From A List Apart:

“Chris Heilmann and Lawrence Carvalho serve up a way to detect your visitors’ text size settings using JavaScript.”

Read the alistapart.com article.

As interesting as this is, there is one problem with respect to IE7 and Opera:

“These browsers take a different approach to resizing: instead of increasing the font size, they zoom the whole document, including form elements and images.”

I’ve still more interested in CSS switching based on screen-size or the drop-column method.

Usability Guidelines Update

The U.S. Department of Health and Human Services have released their 2006 revision of their very important Research-Based Web Design & Usability Guidelines.

From usability.gov:

“Although recent findings show the public increasingly interacting with government Web sites, a common problem is that people can’t find what they’re looking for. In other words, the sites lack usability. The Research-Based Web Design and Usability Guidelines aid in correcting this problem by providing the latest Web design guidance from the research and other forms of evidence.”

Download the PDF from their site.

It’s a compilation of a lot of other reports - and is really useful to reference when explaining the importance of usability to clients.

MGMgrand.com: Quick Audit

http://www.mgmgrand.com/ designed by local web design power-house, dieselmarketing.com

Though some say that a higher end hotel in Las Vegas can slack a bit on usability or accessibility - no website, especially in the service sector should be discriminating against any populations.

Usability:

• Firstly, it’s all flash - it takes long to load. With about HALF the world still on dial up, many will leave the site just waiting the page to load.
  
• Flash Player version 7 is required, which has about 95% penetration. Which is fine, if you don’t care about the possible conversion of the missing 5%. A non-flash version of the site should be available. A place as large as the MGM Grand would surely benefit from the smallest increase of conversions.
  
• Some say, their target audience have broadband connections - so they won’t mind. Which may be true, for a user’s FIRST visit. But repeat visitors will get annoyed at having to wait for all the little widgets to appear each time they load a section. Younger users are notorious for leaving sites when they take too long.
• The flash advertisement, ought to be in one section called - "Tour the MGM Grand". Keep heavy unnecessary animations away, they slow people down in completing their tasks.
  
• The flash is also implemented with javascript - that’s a bit of a mistake. If someone has disabled javascript (to block popups or cookies), they lose the ENTIRE site. It’s like when using a television, muting the volume causes the screen to go blank. Another reason a non-flash version of the site should be available.
  
• Speaking of which, the audio toggle is too small and hard to find. Most users have their volumes low (especially at work) or don’t even have speakers attached. So really, audio should be avoided in most cases anyways.
• There is no search function - forcing rushed users to learn their navigation.
  
• Most of the text is not selectable - makes it tough to email great deals to my friends.
  
• With images turned off - the MGM Grand title disappears.The name of the company should always be visible.
  
• Printing a page prints everything, except… the content (which is in a flash movie). So not only can I not email info, I can’t print it and take it with me to show my friends (another viral marketing opportunity lost).
  
• The Date of Arrival tool at the top doesn’t work at all (at least on a Mac - which is known as an audience that is willing to spend money for quality).
  
• The telephone number is not selectable - forcing me to remember the number or have a pen and paper handy.
  
• Clicking on Your Reservation causes a popup to appear, which is a bad practice. Many users block popups - as much as 15-25% of users.
  
• There is no main About Us section where all the reservation, contact, and location info is. This information is hidden at the bottom of the page. Users shouldn’t have to hunt this information down - especially not the address.
  
• The Contact Us form doesn’t check that all the fields have been filled in. This will cause empty entries in the potential-client database. Plus it doesn’t have any mechanism to tell the user they may have missed a field.

Accessibility:

• ALT tags are missing, coupled with the flash content, don’t expect for things to be very searchable on the site.
  
• The text is not-resizable. Is the MGM Grand saying that people with vision impairment (like, say, rich retired folk, or wealthy young blind people) are not welcome? Seems so.
  
• Very low contrast text - hard to read even for young eyes. Never hide important info like a reservation phone number.

Code:

• The site is created using tables. Yet another jab to clients with screen readers, but more importantly, an ancient method of web design that is being abandoned by many top design agencies for their poor performances in search engines.

Overall: 2.5/5 - It’s beautiful, stunning even. It’s usable more or less. But they are really making a statement - they don’t care for anyone but young able bodies people with excellent vision. And if that’s their goal - great - mission accomplished. But everyone gets older, and a site like this is terrible for customer retention.

Collegesalette.qc.ca: Quick Audit

Visit the College Salette website here

This is a school that teaches many things, including web design. Based on their website - they should probably rethink that.

Usability:

• Flash splash intro page - waste of time, and proper web designers have stopped making these years ago.
  
• Text in the menus are too small and not resizable.
  
• When resizing the text, the main content gets clipped.
  
• Logos are too small to understand what they are or what they link to.
  
• There is an affordance on the menu (left pointing arrow) - which, to most people, suggests that some sort of sub-menu will appear. Sub-menus do appear, but not for all of them. Inconsistent.
• No breadcrumb, but at least the menu gets highlighted properly.
  
• There is navigation at the bottom of the page - where it is easily missed.
  
• Clicking on the navigation (located at the bottom of the page) causes a sub-menu to appear, but it’s hard to read because it’s on top of graphics.
  
• With javascript turned off, some content doesn’t appear.
  
• No search functionality.
  
• All the pages have the same name - terrible for bookmarking.
  
• Uses framesets - hard to bookmark.
  
• Many links don’t work, or at least they appear to be links, behave as links - but do nothing.
  
• They use pop-ups for the contact section - without telling you a pop-up will appear.
  
• Improperly filling out the contact form causes a warning message to appear - which is good, but the message is in English while the rest of the site is in French. That’s just lazy.

Accessibility:

• No access keys
  
• Missing ALT tags - when images are disabled, the name of the school is gone.

Code:

• Inline javascript, should be separated from the markup.
  
• No DOCTYPE declaration.
  
• Bad markup - some tags aren’t closed.

Overall Rating: 1/5 - this site ought to be completely redesigned, and they should not be teaching web design at all.

McGill.ca: Quick Audit

This marks the first of my regular website audits. At least once every month I will randomly find Montreal websites, and give them a once over for usability, accessibility, and web measurement issues. I don’t foresee I will become very liked doing these, especially in my own city - but I think it’s time for the Montreal web design market to get up to speed with the rest of the world.

The site in question: McGill University

Usability:

• There is a home link on the home page, not needed and confusing.
• The search, though placed correctly at the top right, is not long enough (ought to be 25 chars long min) and the button should say “search” not “find” (ideally).
• On the home page - the date is repeated unnecessarily.
• Uses popups ?!
• Odd call-to-action “Customize Key Sites” - unclear, and not really useful to new comers.
• MyMcGill tab, leads to a page that doesn’t have a link BACK to the main McGill site.
• Site tools are very scattered around the page (Tabs at top right, sign in on top left…)
• Page titles do not all have “McGill University” on it - bookmarking their pages will be trouble.
• No tag line stating the purpose of the site - even McGill needs to say its a Canadian university, somehow.
• The search results page is a bit confusing, it’s not obvious that they are all results.
• Inside pages have tabs that don’t look like tabs - and don’t react to rollover - they appear grayed-out (looks disabled)
• Second level navigation appears plainly (without drop-down) - not good or bad - just odd how it’s placed above the McGill banner.
• Navigation, does not cause a roll-over affect in Firefox for the Mac (FF/Mac) - the links don’t act like links.
• Their navigation actually changes location, from above the McGill banner, to below.
• The RSS links beside the “More events” link - doesn’t lead to the same place, but it appears like it should.
• Sign-in… for what? for myMcGill, myEmail? Unclear.
• Uses pull-downs on the home page - never a great idea as the full selection can never be seen, and placed so close to the bottom of the fold - may cause issues.
• Page size is odd, slightly bigger than 800x600, but doesn’t fill 1024.
• Minor point on the home page, between the top section and bottom, there is a risk of “illusion of completeness”
• Give to McGill “button” - doesn’t really look like a button, and there is no call-to-action on it.
• Inside page quicklinks don’t work w/out javascript, and the arrows are not clickable - failed affordance.
• External links not indicated - unexpected browser behavior.
• Some “McGill in mind” ads on the inside pages (prospective) have no call-to-action. And if the roll-over doesn’t work - link behavior is not clear, plus unclear where it leads.
• Odd there is no “About McGill” section in the main navigation - its under public & media. Should be top level.

Accessibility:

• The “larger” button, does not enlarge the menu items.
• Semantics: The main sections like “News” and “Events” are not Headers - so in print view, they don’t appear properly (can’t find sections).
• There are instances where the photo caption gets clipped
• The News, Events and Announcements in FF/Mac - all get clipped at the bottom - unscrollable either.
• Images removed - No McGill name at the top
• Javascript removed - the Features widget stops working.
• They started implementing accessibility short-cuts - but without access-keys - so what’s the point?

Code:

• Some minor tag mistakes, missing ALT tags
• Use of the iframe - ought to be avoided.
• Inline javascript calls (out to be separated from markup)
• They seem to be using some sort of dynamic style sheet (.dcss file names with query strings)
• Well commented code

Web Measurement:

• They have a no-cache meta tag, good for tracking, terrible for performance - and with a page size of 408K, that’ll mean a heavy load on their servers.

Overall Rating: 3/5 - the site shouldn’t have left the runway, though better than their last incarnation - it has too many bugs to have gone live.

The most connected US cities

From Forbes.com:

“With most of the U.S. technology industry focused on the East and West coasts, you’d think the best place to get online would be San Francisco, or perhaps New York City. But Atlanta tops Forbes.com’s survey of America’s most wired cities.”

Read the Forbes article.

Skype and Samsung

Interesting events recently… Samsung showcased its new 4G wireless broadband, about 30 times faster than today’s conventional broadband. The technology will probably be ready for prime-time in about 3 years (after minaturization and frequency assignment issues).

Read the Washington Post article.

In a very related story, Skype announced a phone that allows users to use the Skype service without a PC. I see where this is going…

Read the ABC news article.

New web "Browzar"

The people at Browzar (took me a while to spell that correctly, or would that be incorrectly?) want to fill in the niche to provide private web browsing for not-so-tech-savvy users. Their browser doesn’t have a history, cache, nor auto-complete features. At under 300K per download, it’s worth a whirl at least. In my opinion, it’s going to be tough to for them to break into the mainstream and gain large success, especially since most basic users LIKE history features and auto-complete. Furthormore, though you can run it off a USB key, it requires windows and uses Internet Explorer its base application (i.e., it renders as IE) - I simply can’t see this browser taking off.

Read the news.com article.

Download it from Browzar.com

Firefox Beta 2

Firefox has released a new beta. So far nothing really that interesting or truly innovative considering most of those features were available via extensions.

Read the article from cbc.ca.

Download the beta from Mozilla.