Squarespace hear my plea!

While my career is firmly rooted in user experience design, I often find myself rescuing websites stuck in old-world web-designer arrangements and migrating them to blog/CMS platforms like Wordpress or Squarespace.

It may not be free or open-source but Squarespace has become my #1 recommended solution for small businesses because it’s easy to get up and running, is reasonably priced, and I feel confident that when I hand over the keys to the site, the owner can manage the content succesfully themselves. I wish I had designed it!

Development on the product has been quiet for months, and I’m willing to bet a new release is on the horizon. Before it launches, I decided that I’d best make a wishlist for their team. Most are likely known issues, but even for a near-perfect interface, user feedback is never a bad thing.

• Often buttons respond as if they’ve been pressed, but then action does not occur, as if they’ve been dragged not clicked. Increase hit area?
• Allow pages to have different column layouts. I had to work some CSS magic to get Thom’s homepage to look like this. It’s common for homepages to have more featured content, but subsequent pages to have more room for core content.
• It took me a while to realize that sections can contain either page links, or widgets, but not both together. Now that I know, this is fune, but is this a necessary restriction?
• Change Widths interface too buried. Perhaps promote to become a sibling item of Banner & Navigation?
• Applying a border is overly tedious for most common scenario (all-sided solid border)
• Page links should usage page title as link TITLE. Best for SEO and hint text.
• I have been on projects where the only horizantal navigation is the footer navigation, currently it not supported
• Overhaul image gallery entirely
  • Debug image navigation on a slow connection. Loading can be spastic, and lack of loading indicators do not help.
  • Many image professionals do not want to, or are not allowed to, offer full screen versions. Lightbox should be optional.
  • Consider offering of host of jQuery-based slideshows, even my own Wideslide
  • Allow users to embed image slideshows inside blog posts

More comments will appear are they come to me!

Behind the Toronto Public Library’s New Faceted Search

My 2009 work-highlight was the opportunity to work with the great people at the Toronto Public Library on their new faceted search interface. We tested the interface with over a dozen users, and then made recommendations based on the findings. Almost all of my work has surfaced into the current public beta which is shaping up to be one of the better library websites in North America! Seriously, look around.

As a search-obsessed UX designer, the best part of the project was not the size of the collection, but the richness of their metadata. Most items are described with media type, language, age level, owning branch, subject, author, and more.

TPL Web Team Manager Dara Renton and I recently gave a presentation at UX Show & Tell so we thought we’d post the presentation for people to see the thinking that went behind the current design. We couldn’t get permission from our volunteers to post their Silverback sessions online, but their participation proved invaluable in helping us prioritize the interface.

Best viewed full screen!

Winter Sock Nirvana

Thriving in Toronto year-round means keeping yourself comfortable and warm during the winter months. A few year years back I wrote about Body Winterization in Toronto describing my favourite (though elusive) socks, the J.B. Fields Icelandic. Made of 70% merino wool these socks are remarkably soft and warm even on the coldest of days.

Thanks to the magic of Google, I figured out that the Great Canadian Sox Company is located in Toronto on the northeastern edge of East York, so my brother and I took a trip to their outlet located in an industrial park on Waterman Avenue.

What a find! On sale were the Icelandics as well as the socks they produce for Sorel, L.L. Bean and others. It turns out that their flagship brand J.B. Field’s was founded in 1877 to make socks for the Canadian logging industry. It’s a shame their branding doesn’t really reflect the pedigree because these could be the next Canada Goose coat.

A decent pair of winter socks from MEC costs around $20. I walked out of there with 7 pairs of -30°C 70% merino wool socks (pictured above) for under $25. They were apparently seconds but I still haven’t found a flaw on them. Regular pairs are $8.00 or 3 pairs for $20.00.

Store hours are Tuesday to Saturday, 10am – 5pm.

Printing TTC Schedules, The Better Way

Last week I printed out the timetable of a TTC bus stop near me and was disappointed with the results. It took three pages and, shudder, was overloaded with white space. Here’s what it looks like:

Ideally the TTC can move to a vastly more efficient printed layout, but in the meantime a little CSS hack will do. Today I spent a few minutes looking at Greenwood Station – 31 Greenwood and have coded some CSS that can be appended to their print stylesheet.

My suggestions:

• Removed the route diagram from the printed version. It consumes vertical space and is not readable as a thumbnail.
• Removed the “Next 3 scheduled buses” block. The full timetable is below, and once printed it’s obsolete.
• Removed inactive tabs (e.g. Saturday, Sunday, Monday) to avoid confusion.
• Set width of time containers to automatic to prevent wrapping

Here’s what it looks like:

And here’s the CSS code (please comment improvements!):

Fun with Google’s Auto Complete

What kinds of questions are our fellow humans asking Google? From the Google homepage, start typing a question (who, what, when, where, why, how, etc.) to see what’s being asked.

To see what teenagers are curious about, start with “can u”. Endless fun. My favourite: “can women get prostate cancer?”

The Education of Single Click

Ever notice how latecomers to the web will often double-click links? In my usability work, I’ve observed this happening countless times. Such activity almost certainly doubles the users risk of developing carpal tunnel syndrome (CTS). It also raises the ire of environmentalists, as it doubtlessly shortens the life of an average computer mouse by half. In order to do our part to curb this dangerous behaviour, I teamed up again with Andrey Petrov to build this simple javascript that aims to strengthen single-click behaviour.

UPDATE: If you are using jQuery or Prototype.js, follow these examples which only affects links. Otherwise use this original version, which affects all double-clicks.

Feel free to propagate in your HTML to end the senseless double-clicking of web links forever!

The Stop That Wasn’t There

I moved to the Danforth area about a year and a half ago and am often waiting at Queen for the northbound 31 Greenwood bus. This is a problematic stop with northbound buses on either side of the street that also lacks a posted schedule for the primary line. Despite repeated requests to the TTC and even Councillor Giambrone over the past 18 months, I have been unable get a schedule posted for Route 31. I sense that I am perhaps not making myself clear, so I have drawn a frikkin’ schematic.

Route 31 is a peculiar stop because the northbound bus waits facing south on the west side of Greenwood, instead of facing north on the east. It does this because it makes the next two rights and a left to get back onto Greenwood. Unless it’s the alternate B line which runs for a few hours a day and appears on the more obvious east side of the street.

On many occasions I have had to inform (and startle) people because they waiting on the wrong side of the street. It boggles my mind that our city spends thousands on glass bus shelters, but cannot manage to equip these shelters with a basic schedule. TTC, please equip at least the main stops on your routes with information about those routes. Not to Deride the Rocket, but how are we to know The Better Way?

Introducing Wideslide: A jQuery slideshow plugin

A few months ago I was in Patzcuaro, Mexico working again on a website for the Hotel Casa de la Real Aduana. The co-owner, Didier Dorval, is a veteran photographer I met when we worked together at Masterfile. He has taken fantastic photos of the hotel and surrounding area, but when we started to put together slideshows for the site, it became clear that the images would have to be recropped to the same size; much to their detriment. Why don’t existing slideshow solutions handle varying aspect ratios?

To solve this problem, I brought in the big guns, Andrey Petrov, to help me design and build a slideshow plugin for jQuery, demonstrated here using some illustrations of my wife.

Simply include jQuery, the plugin, and create a list of images with the class “wideslide” and you’re off. Want to try it, or try to improve upon it? We open-sourced it.

Download Wideslide on GitHub.

Our AutoShare Year – 2008

As posted in 2006 but not 2007, I’ve created a spreadsheet detailing our AutoShare expenses for the past year. For those of you unfamiliar with AutoShare, they provide excellent cars for hourly usage in locations across Toronto. Ideal for trips in and out of the city that require less than a day; after that point a traditional rental usually offers better value.

My wife and I are on their basic $10/month plan and over the course of the year incurred $25.25 of “Idiot Fees” (last minute cancellations, extensions by phone, etc.). We are very happy with the service and whole-heartedly recommend it. If only the nearby Beer Store would cooperate and provide AutoShare a spot, it would save us a 1km walk to the closest car!

A nice bonus was a $25 referral fee in August! Those are very welcome, so keep us in mind if you sign up!

ParkVu Brand Identity Done!

Though I’m primarily an interface design person, from time to time I work on brand identity projects. I recently finished some design work for a very compelling software startup. Though I can’t tell you the nature the software, I can show you the logo I designed.

I really can’t wait for the project to launch because I expect I’ll have a big attachment to it!