I know, I know – it’s not polite to brag. But please, cut us some slack here, because we really do have something exciting to brag about!

Yes, for the 3rd year straight, 76design has been made an Official Webby Honouree for the work we did conceiving, designing and building the Ottawa Public Library’s new children’s website.

This was a really innovative project and it definitely feels good to get this recognition. In case you don’t know the Webbys, they’re kind of like Oscars for the Web. We didn’t actually win a Webby – we got the equivalent of 2nd place. But considering our co-Honourees in the youth category include the likes of Disney Channel, Barbie and MTV, we figure we’re in some pretty elite company.

What’s even more amazing though, if I do say so myself, is that this is the 3rd year running that one of our sites has been a Webby Honouree. Last year it was our corporate website, and the year before it was the site we built for Maisonneuve Magazine.

76design is not a huge shop. We don’t charge as much as the big international agencies and our clients’ budgets tend to be – well – just a tad smaller than Disney’s. But the quality of our work speaks for itself. Year after year we rank alongside the world’s top interactive agencies in the toughest competition there is.

Next year we’re aiming to crack the final frontier and become an official Webby award winner. Which of our clients will benefit from that acclaim, and be the proud owner of one of the best websites in the world?

It could be you.

Speaker: Niqui Merret

Contrary to popular belief, making a Flash movie accessible to a wider selection of users does not require cartwheels and back flips. A few basic usability and accessibility considerations can take your movie to the next level and reach a wider audience. The most basic step of embedding a SWF into a page incorrectly could cause a screen-reader to hang.

This session will take a cause and effect look at accessibility covering a selection of common problems and possible solutions. Niqui will cover visual, audio, mobility and cognitive disabilities and demonstrate how Flash can help or hinder access.

Notes:

Any information provided along a timeline should include synchronized text based description such as captions accompanying a video. For exmaple, weebls toons have captions.

Accessibility in the real world: no technology can be 100% accessible to all users. Level accesibility is directly proportional to level of effort put in.

Barriers to accessibility: technology (flash, browser, screen reader), developer (interface designer, programmers, copyrighters). Content developers cause barriers by not being aware of accessibility considerations.

Technology – Flash player interfaces with screen readers and keyboard well. Focus (big yellow box around object) is clear to user and focus is made available and is fed through to assistive technology.

Standards and guidelines? Current documentation is difficult to comprehend and digest. The key is to understand the user – its not a case of understanding rules and guides.

Simple tests. Take away the mouse and attempt to follow similar paths.

Simple disability categories. Visual (vision, colour blindness, etc). Audio (lack or partial). Motor (hands and holding). Cognitive (understanding).

Screen readers. Needs to gain access and report back to assistive technology. Not fully integrated with OS and sometimes unreliable – they are stuck in the middle of a chain of information.

Tips for flash: set the name of buttons; specify the reading order; avoid using wmode(!); and, test with screen reader and Microsoft Active Accessibility 2.0 Software Development Kit Tools. Tab index (found on accessibility panel in flash) is very useful in providing proper experience in flash – note this only applies to dynamic text fields. Flash also provides ability to program shortcuts for elements.

Tip: put tab index right on mockups.

As compared to AJAX, flash accessibility can send screen updates to the screen reader. HTML pages are treated as linear and do not send updates to the screen reader.

Microsoft Active Accessibility Tools allow deveoper to view the screen reader output in realtime.

On windows, OS contrast adjustment does not affect flash movies. On Mac, adjusting contrast settings affects the colours on the screen. Another possibility is to provide accessibility controls that allows the user to adjust the contrast – the flash object in turn adjusts the colour scheme in the movie.

Font size controls in browser do not affect flash movies. However, a particular approach (see Text-Resize Detection), is to listen to when a user adjusts the font size n the browser, and using javascript, pass that information back into the flash movie.

The creators of SWFObject and UFO have are working on SWFfix.

Keep in mind: Progressive enhancement != accessibility.

Also see: Adobe DevNet

Speakers: Anthony Eden and Scott Weeks from Snepo

Flash is the ideal technology for public facing user interfaces but few flash developers have had the chance to cut their teeth building complex kiosk applications. Come on a journey to the land of hardware peripherals, exotic software integration and regression testing. The possibilities are endless for flash if you know which tools to use and what lies on the outer extremities of the flash universe.

Presentation description

A few points from the presentation with respect o building interactive systems:

• Touch screen technologies (haptic devices) include: Point-of sales systems, kiosks, iPhone, check in system, etc
• Attract user -> engage user -> educate user-> call to action
• User is constantly aware of where they are in their process (location, state, etc) - important because user may come into appliaction at any time during the process. Users very frequently end part way through an application – set an appropriate timeout.
• Rule of thumb: “fat fingers” – move navigation to bottom of screen – navigation must be obvious - just press: dragging and scrolling is not intuitive and release event is not intuitive either
• Accessibility: plan for limited vision so use big thick fonts; plan for color blindness so use high contrast colours. Be aware of mechanics of using the device.

What worked well:

• Transaction services and xml for storage: provides high service level and is relatively easy to develop.
• JSFL: automation scripting for flash helped to strealine production
• Logging ever single piece of interaction. You are able to track entry and exit points – this provides evidence of points of confusion and where users become frustrated and give up.
• Testing: especially brute force testing – putting the system through any imaginable situation. Example: hire a few computer science interns.
• Remote monitoring: transaction server on kiosk would send heartbeat back to server. Central server would expect hearbeat and can repsond by performing diagnostic and basic support such as restart, reset, clear memory, etc.
• Experimentation!

What didn’t work very well:

• Computationally complex procedures may cause kiosk to slow down and possibly become unresponsive.
• Dying computers and enclosures: ensure mechanical robustness of kiosk.
• Screen calibration: potentially a big issue. Callibration can creep from true state.
• Updating was cumbersome: especially as it pertained to physically loading onto machine.

Upsides:

• Environment: you know your and can define your environment – no browsers or campatibility issues.
• Economics: there is money to be made.

HistoryShots Genealogy of Pop & Rock Music: Covering the time period from 1955 to 1978, more than 700 artists and 30 styles of music are mapped in currents flowing from left-to-right. For each performer, the length of time that he/she remained a major hit maker is provided.

VisualComplexity.com intends to be a unified resource space for anyone interested in the visualization of complex networks. The project’s main goal is to leverage a critical understanding of different visualization methods, across a series of disciplines, as diverse as Biology, Social Networks or the World Wide Web.

newsmap: Newsmap is an application that visually reflects the constantly changing landscape of the Google News news aggregator. A treemap visualization algorithm helps display the enormous amount of information gathered by the aggregator.

A Periodic Table of Visualization Methods

The good people at Yahoo have just launched Yahoo Pipes. “Pipes is an interactive feed aggregator and manipulator. Using Pipes, you can create feeds that are more powerful, useful and relevant.” Very cool stuff indeed. This really takes the leg work out of developing aggregators and the like. Not to mention, it has legs. There is a lot of room for growth and I was pretty excited to try it out.

This post wouldn’t be complete without my first attempt, dubbed “Shift+Control catgeories thru Flickr”: http://pipes.yahoo.com/pipes/ILK4nQW42xGW05_3qu5lkA

I would say this is a pretty big development in the Google/Yahoo arms race – and hot on the heels of Yahoo’s new Search Marketing service Panama launched earlier this week.

Or “I can’t find my way home”

The common failing and hence distrust of the site map is due to general poor execution. To be effective, the site map should be a clear visualization of the site structure. The site map page must be easy to scan; within it, categories must be easy to recognize; the labels must be intuitive in language and structure; and, the page itself, must be easy to find.

Why agonize trying to developing an all-encompassing menu-based navigation system when you can provide the usability of a sitemap. Although not always the solution, the following sites employ a method of displaying a site map or site index that is easily accessible in the bottom portion of the home page. Unobtrusive to the main message of the site yet still a handy navigation tool.

NetSquared – A new found personal favourite. Usability will bring back the popularity of the sitemap. This navigation tool describes the breadth of the content very quickly and is easily scanned.

digg maintains the primary focus of the site by keeping the housekeeping off the main thoroughfare. When the site is providing a service, supporting content will become an obstacle.

CBC is a great example of a site index that caters to the variety of context in which a user might be browsing. Categorization by subject matter, by audience, by purpose: provides redundant but intuitive listing of links to the desired content.

Further reading

Site Map Usability

Sitemaps and Site Indexes: What They Are and Why You Should Have Them

Peter Morville gives some good insight in the field of information architecture and findability. Morville wrote Ambient Findability and co-wrote Information Architecture – both great books. Morville spoke on two panels at SXSWi this year: the first, Searching and SEO; and second, Ambient Findability.

A portion that really struck me as valuable was his characteristics of usability – a word that has become synonymous with general quality of a website: Useful, Useable, Desirable, Accessible, Credible, Findable, and Valuable. Each characteristic contributes to the appearant value of website design.

Another topic that came up dealt with the conversation of taxonomy vs folksonomy. While quite popular now, folksonomy may become essentially unuseable due to the impending growth in content under single tags. Tendency back towards taxonomy will keep the content findable and ultimately useable. For example, clustering tags into logical groups is a step towards traditional taxonomy.

While taxonomy and folksonomy help us in finding the content we are looking for, the social aspect of describing the aboutness of content is increasing as a qualificaiton of the content. “What others are doing” with this content ultimately gives further context and credibility.

The intuitiveness of the path to the content we look for is the essence of ambient findability. When designing a website we have to realize there are a variety of methods of navigation that may be equally intuitive. Searching, for example, is more than likely going to be the first step in navigation. User-centric and self-identification based navigation is another method. A subject based hierarchy is yet another. The following steps should provide an effective way to drill down into the content the user is looking for.

Further exploration, reading resources for information architecture

1. Boxes and Arrows
2. Don’t make me think by Steve Krug
3. Information Architecture Summit