Beyond Lorem Ipsum and why QWERTYUIOP ASDFGHJKL is not good enough.

Whether you’re presenting designs for software interfaces, or working versions of software, using good example data can make the difference between a presentation that goes smoothly and a stuttering mess of interruptions.

Ham-fisted developers often have the tendency to SAgfjhtdFYT ITRYFITY their way through form fields when testing application forms, and this soon leads to an interface that bears no resemblance its real-world existence. Worse still, they erase all data from the application with each build so that the interface remains in an “infant” state.

Why use good example data?

• Enjoy distraction-free presentations. Never again hear “Those dates are wrong.” “That name appears twice.” “That’s not in alphabetical order.” etc.
• Identify short-coming in the design. Will designs scale to fit content? Will truncation handling be necessary?
• Find bugs. Does auto-complete work properly? Will it handle non-alphanumeric characters?
• Mitigate developer aversion to complexity Though it pains them, real-world data reveal bugs earlier and helps developers build better tests.

How can example data best be used?

• Pre-sort the data so it appears in the desired alphabetical and/or chronological order.
• For wireframes, use names consistently to better illustrate a real user scenario.
• De-duplicate examples to avoid confusion.
• Compile large example sets of data that populate the application with each build.

What tools can help me create better example data?

• The classic Lorem Ipsum generator is best used sparingly for user-generated paragraphs of text like bio, notes, description. Using it to complete our incomplete design is not advised.
• The Calendar Date Generator from RANDOM.ORG allows you to generate random calendar dates useful for inboxes, tables and… um… calendars.
• The Integer Generator from RANDOM.ORG allows you to generate random integers for things like phone numbers, file sizes, and quantities.
• The Random Name Generator uses data from the US Census to randomly generate male and female names. Most useful for names, but with a bit of processing can be useful to generate usernames, and domains.
• Existing files are a great source of data. Use Google’s filetype operator to find Excel files, CSV files or plain text files

Have your own favourites? Please post in the comments and I’ll update this post accordingly.

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!

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!):