Category Archives: Fun

Daily Bread Food Bank 5th Annual Food Sort Challenge

The Toronto Daily Bread Food Bank held its fifth annual Food Sort Challenge last week, and the staff at Usability Matters was excited to take part!

One of the daily tasks around here is the sorting of data and information – applying these skills to the sorting of 3 skids of donations seemed a good fit for us. As newbies to this Challenge, we were unsure of what the process or environment would be, and since I was elected Team Captain, I was bit nervous about letting down my team as well as the honourable staff at Daily Bread. They did a great job in giving us an orientation first and explaining the do’s and don’ts:

  1. do check expiry and best-before dates on all donations
  2. do check under peanut butter and Nutella lids for “sampled product” (how yuck!) or surprise cash gifts hidden by donors (how sweet!)
  3. don’t hurt the food (i.e denting the cans or rip the packaging, etc)
  4. don’t sacrifice attention to these details in favour of speed
  5. don’t interfere with other teams

Armed with these points in mind, a quickly hobbled together plan of attack (2 people on box making, 1 on labeling, two teams of 3 sorters and 1 scanner/palletizer) and our snazzy matching Tshirts, we whipped through 3 pallets of donations in… 58 MINUTES! Whew! And yet we were still not the fastest that day – Congrats to last year’s returning champs: the Ranstad team, who also won overall this year.

The U-Stars Team!

With new skills in hand, we’re hoping to shave 3-5 minutes off our time next year! The Food Bank fell short of their Fall Drive goal this year, so being able to pitch in towards their next target was a great feeling AND a fun team building event.

If you are able, please consider the Daily Bread Food Bank in you charitable giving this year, or run your own food drive!

 

 

 

World Usability Day 2011

Since 2005, the Usability Professionals Association has designated the second Thursday of November of the year as World Usability Day, a day to raise awareness of and to train professionals in good usability practice. Last week, the team at Usability Matters decided to find out just what makes our lives easier. So we bundled up, wheeled out our mobile whiteboard, grabbed some candy and took WUD to the streets of Toronto (specifically to just outside our office building in the Spadina/Queen area)!

 

The plan was to get people to complete this sentence: my ­­­­____ makes my life easier because ________.

 

We were going to collect the responses on post-it notes, reward participants with candy, and tweet out answers to the world to get people thinking and talking about the subject.

The first usability issue we encountered: post-it notes fly away easily in the breeze! Nix the notes and pull out the markers. Next, people are afraid to talk to strangers with candy (my mother would say they were just raised right). Scrap the spiel and gently blurt out “what makes your life easier?” to passers-by.

This question made most people pause and think. Some were quick to identify a thing they used with frequency (a bike, a phone) or something that they wanted (sleep or food). More sentimental folk offered up relationships (friends, parents) and the lovely intangibles (attitude, love, being happy). Of course, we got the rare smart alec (oxygen, running water) and fewer still a depressing “not much these days” (we gave those people an extra piece of candy). And the more thoughtful answers seemed to come from respondents who showed genuine interest in what the heck we were doing out there (civility, accessibility, community).

In three hours, we got just over a 120 responses; here is a chart illustrating the different categories…

After crunching these numbers, I have to say I was pretty happy to discover that the relationship and intangible answers combined equaled the number of tech responses (40% each) and just 15% were material items. My colleague Manna wonders if those percentages would change if we conducted the experiment in a different neighbourhood. Sharing our building with the Centre for Social Innovation does make our local community a relatively thoughtful and socially conscious one. How many Bay Streeters are thankful for their doulas?

It was a fun day to get outside and get in people’s faces a little, sneak a little peak into their worlds and get them thinking about usability. And in the name of fun, here are a couple of word clouds of the various useful items….

 

…and the responses:

If you plan to gather similar research in your area, please keep us posted on your results (and don’t skimp on the gumballs)!

 

Music To Wireframe By

I am not ashamed, but I don’t feel proud to say this either: I listen to the “TRON: Legacy” soundtrack.

It’s been a long time since I’ve had an album in regular rotation that features the Disney logo on the cover art. And it’s not an album I’d listen to while walking to work or doing the dishes—these days I’d opt for Bon Iver or The Black Keys. Daft Punk’s techno soundtrack is, for me, task-specific: I listen to it only to get into a flow when I’m wireframing.

If you’re a UX designer or one of our clients, you’re familiar with wireframes—annotated blueprints for sites or applications, basically. Designing them requires creativity, pragmatism, empathy, and taste; a scrupulous balance of what’s required and what’s possible. They’re best created when you’re in a flow—a state of “energized focus,” as Wikipedia nicely puts it.

The steady, propulsive, and somewhat bland “TRON: Legacy” soundtrack helps me get there. It’s not great music, but it pushes me without distracting me. [1]

I figured we could all use a bigger repertoire of music to wireframe by, so I asked around the UM office for my colleague’s recommendations.

Steven says:

Sarah Toy and I have been fighting over a recording of Arvo Pärt’s music by Angèle Dubeau & La Pietà within my shared iTunes library. That recording and another of Philip Glass by the same ensemble are on very high rotation for me, along with an album by Canadian composer Marjan Mozetich: Affairs of the Heart. [2]

Other favourites include Bach, Mahler, Chopin, Handel or if I can’t decide, the CBC classical music stream. For faster paced music, I may turn to jazz or tango or bossa nova.

One of the key commonalities is no lyrics, or if there are, they aren’t English and I can’t understand them.

The “no lyrics” theme was common. Shannah likes a tango-electronica group called Gotan Project. “Lyric-free, caliente,” she says.

Katie gets into a flow with electronica and house/techno that has few or no vocals, or uses vocal samples. (Also good for workout music, she says.) She selects music to match or modify her mood—either way, it needs to inspire her, not just spin in the background. Her suggestions include:

  • Four Tet’s latest album, “There is Love in You”
  • Lucienn Luciano (various tracks – but right now I love the track “Arcenciel”)
  • Robag Wruhme’s latest album, “Wuppdeckmischmampflow” (yes, that is the real title)
  • Deadbeat’s “Roots and Wire”

When the “minimal” stuff (the scare quotes are hers) leaves her feeling “cold and too robotic,” she’ll mix in any of the following:

  • Beach House’s latest album “Teen Dream”
  • Blind Pilot’s latest album “3 Rounds and a Sound”
  • Al Green’s latest album “Lay it Down” (just a few years old, and amazing)
  • The Temptation’s “Just My Imagination” or “Papa Was a Rolling Stone”
  • Austra’s latest album “Feel It Break”
  • Hot Chip – all albums except the last one
  • The Knife – all albums
  • Bon Iver (if I feel like licking my wounds)
  • My latest obsession is the song “Throw Your Arms Around Me” by The Hunters & Collectors (80s band)
  • I also love getting into Depeche Mode, The Cure, Yaz

“When I’ve exhausted my options,” Katie says, “I usually play my Last.fm radio station, which pumps out songs based on my music preferences. This is a profile I’ve had for over five years, so I get a lot of good stuff.”

Manna, too, goes for online radio, and she doesn’t seem to mind lyrics. She favours whatever’s on indie shuffle or spinner, whose obscure finds and lowercase stylings put my indie cred to deep shame. She also likes NPR’s First Listen site; for a while, she says, her favourite was a tribute album to Buddy Holly that she found through that site. Or she’ll go for old favourites like Depeche Mode, the Smiths or David Bowie. 

Julie, our office manager, doesn’t wireframe, but like everyone she likes to get into a flow. “No lyrics? I’d die,” she says. “But I do only listen to the same things over and over and over so I don’t really need to listen anymore; I know what’s coming.” (I’ve found this works too—listen to stuff you know so well that you aren’t distracted by it.) She likes Bruce Springsteen, Adele, Judy Garland, the Elvises (Costello and Presley), Fleetwood Mac and Stevie Nicks, the Beatles, and a track from the “Moonstruck” soundtrack called “Que Sea El (It Must Be Him)”.

I’d like to share more music to wireframe by with other UX people, so—what music do you wireframe by? We’d love your suggestions in the comments, or @umatters. If you’re a member of Rdio, feel free to add your suggestions to the collaborative playlist.

 

 


[1] Most felicitious “TRON: Legacy” song title for wireframing purposes: “The Grid”.

Wireframing bonus in that particular song: A Jeff Bridges voiceover from the movie, in which he waxes about visualizing clusters of information.

Least felicitous title “TRON: Legacy” song title in every way: “Adagio for Tron”.

[2] Steven and Sarah might enjoy “Adagio for Tron”.

Elevator Confusion

Too often I have observed visitors struggle with the elevator panel in our building. After a few seconds of watching them push a button, the light not staying on, pushing it again, them looking around confused and flustered I jump in and say: “You have to push 2R to get to the 2nd floor”.

The confusion continues…
They freeze and stare in dismay…
I push the button for them…
The elevator takes off…
… and then I point to the sign in the elevator hoping that it will clarify the issue.
(I don’t think it does, but the visitor gets to the floor they need to, and hopefully they’ll remember how to get there again next time.)

So what’s the problem?

Our elevator has two doors – front and rear – (hence the ‘R’ in 2R, 3R, etc.). That’s not really the problem. But it doesn’t make things easier either. Here are the main issues:

  • Expectation Typically the rear doors of elevators are used by people who live or work in a building. Rear doors are often ‘service entry’s’ (i.e. used by custodians, security guards, and all those people that make the building function), and they lead to storage spaces or garages. The everyday person rarely uses the rear door of an elevator, especially if they are a new visitor to a building.Interestingly enough, a colleague mentioned a situation where someone entered the elevator from the rear door, and unsuccessfully tried to keep the door open by pushing the ‘front-door open’ button. The problem was that it was actually the rear door that they wanted to keep open. Apparently they were very confused about which door was the rear door and which was the front door, possibly because their most frequently used door of entry, in their mind, was their ‘front door’.
  • Labeling When a visitor searches through the building directory for an office’s room number, they find a number ranging from 100 – 500. There are no ‘R’s involved. For example, Theatre Ontario’s number is 210. Under usual circumstances that would mean that by pushing the ‘2’ in the elevator, you would get to the correct level and find suite 210. Unfortunately in our building, they must press ’2R’, leading to many confused and frustrated individuals.Sadly, that’s nothing compared to what happens when you are trying to find a room in the 100’s. There is no ‘1’ button. You have to push ‘GR’ to get to the 100’s. (What??).
  • Organization The elevator panel does not help matters either. In the above example, even if the visitor realizes that the 2 doesn’t work and that they need to push ‘2R’, it will still take them a while to find the ‘2R’ button because it is not directly next to the ‘2’ button.
  • Signage In order to accommodate for all this, the building managers have placed a sign in the elevator, hoping that this will ease some of the confusion. Unfortunately the sign adds to the problem. It is difficult to scan, has too many words and the most important pieces are not highlighted in a way that stands out immediately.

So what’s the solution?
Get a new elevator panel!

If that’s not possible, then here are some other things that may help in the mean time:

  • Cover up/remove the buttons & respective labels that no longer function (i.e. : 2, 3, 5R)
  • Cover up the ‘R’s in the remaining, functioning levels.
  • Put a little label next to ‘GR’ indicating that it is ‘1’.
  • Remove the current paper sign and instead place a sign next to the 4 for ‘Center for Social Innovation’.

Ok, so I admit it’s not the prettiest panel, but I think it might help minimize all the confusion and frustration.

Exploring Usability and Aesthetics

One of my absolute favourite books as a child was Richard Scarry’s What Do People Do All Day. It’s one of the series of children’s books Scarry wrote and illustrated about a fictional town called Busytown.

I adored Scarry’s illustrations: the architecturally-correct drawings of buildings, the cutaways showing the plumbing and sewer systems, the fascinating mechanical devices, all depicted in minute detail and carefully labeled.

Image from Richard Scarry's "What Do People Do All Day?" on Google

The wireframes I produce as part of a design project share some of the same elements – the annotation of features and functionality for example – but they don’t usually stray very far into the domain of graphic design or detailed information design. A recent project of mine involved a departure from the usual and represented a different challenge for me.

I was working on the design of a “dashboard” interface for the sales team of a large media client. The objective was to give each member of the sales team (from the VP down to the sales reps) an at-a-glance view of how they are doing against specific benchmarks such as quotas for the quarter or overall sales targets. Sort of like a 360 degree view of their performance to date.

As well as giving members of the sales team this bird’s eye view of sales data, the interface also had to provide a bridge to deeper analysis of the data, which currently existed in the form of reports that were data intensive and hard to read.  Although many types of reports were available, none of them enabled users to see multiple facets of the data in a single view.

We started with a requirements gathering session with the client, as usual. In this session we identified several different user types (VP Sales, Sales Managers, Sales Reps etc.) and discussed the priorities of each type.

Coming out of this session, we drew up a list of the top 5 or 6 questions each user would want answered when they looked at the interface. Questions such as, “How do my sales this year compare to what I sold for the same period last year?” or “How much do I need to sell in order to meet my quota for the current quarter?”  Then, looking at the available data, we identified the best way to answer each question.

These questions and answers translated into a series of modules that formed the bones of the interface. Next, we had to determine how to present the information in the modules. We knew that the presentation of data needed to be heavy on visuals and light on text so that the user would be able to interpret it as quickly as possible.

For inspiration and guidance, I consulted Edward Tufte’s Envisioning Information and The Visual Display of Quantitative Information.


I also looked at a slew of online resources, including some of the information graphics I regularly use, like this one for sailing:

Graphic from Windfinder.com

It was challenging to determine the visual display of each module. Based on the information to be presented, which type of visual was best: a pie chart, a line graph, a bar chart, a matrix, or some other custom visual element?  How might we use colour to establish relationships between elements or invoke an emotional response? How could we use line weight and style to give certain modules character and texture and add a depth to the page?

When a module really ‘worked’, i.e. effectively communicated multiple dimensions of data in a visually pleasing and easily interpreted way, I felt a thrill of pleasure. The same thrill I feel when I look at the wonderful topographical detail of an ordnance survey map.

From Keswick Launch Company website

Or one of the Richard Scarry drawings I described at the beginning of this post.

At the end of the project, instead of the 15-20 heavily annotated wireframes that comprise my customary project deliverable, I ended up with 6 hi-fidelity graphical wireframes that were as much about visual and information design as about specifying interactions.

As for what I am taking away from this project, I discovered that, in focusing on the aesthetics of the interface as much as its usability, I engaged with the emotional aspects of the user experience – pleasure, satisfaction, fun – in different ways. I plan to explore this relationship between usability and aesthetics further. Reading suggestions welcome!

Arcade Fire’s New Google Chrome Experiment

Arcade Fire has a released an interactive music video for ‘We Used to Wait’. With the help of Google street view they have managed to make the experience endearing and magical.

Play along: http://www.thewildernessdowntown.com/