Laudable Audible

Another of my favorite sessions from Interaction 13 was Trip ODell’s If UX Can Kill it Probably Will: Designing for the 70 MPH Interface. And what interface might that be? I had the fortune of making Trip’s acquaintance a couple days before his talk and learned that he has worked for both Microsoft and Adobe, but he wasn’t speaking of work he did at either company. He is currently at Audible, a company that I have a lot of respect for. He convinced the company that, even though their customers had a very high satisfaction rating with the existing Audible app for mobile phones, it had to be redesigned. That, in and of itself, is impressive, and the fact that the company put the time and money into the effort shows that they really do care about their customers.

What was so bad about the Audible app that it had to be redesigned?

This is what the old app looked like with all of the controls exposed. All the icons and the progress bar at the top could be shown and hidden with a tap on the screen. The volume slider and the row of buttons above it could be displayed or put away by dragging the ribbed tab. But let’s think about the use of audiobooks. As Trip pointed out, you almost always listen to them start to finish. You don’t skip parts, and you certainly don’t jump back to re-listen to a previous chapter. That entire row of rewind/forward controls, while useful when listening to music, are not only useless for audiobooks, but a source of extreme frustration. If someone is driving, or even walking, and they attempt to pause the book, but accidentally jump back to the beginning of the chapter, there is no good way to recover from the mistake.

Trip’s focus was use while driving, and he said that they determined that the play/pause button was the most important, followed by the 30-second rewind and bookmark buttons. Everything else could be minimized for non-driving use. The new design, which released this week, is a brilliant example of simplification done right.

There are a number of other laudable improvements to the app, and it’s getting rave reviews. I want to congratulate Trip and his team on some outstanding work. They should submit it to the IxDA Interaction Awards next year.

Interaction 13: Program

Having attended all of the Interaction conferences so far, and having helped plan one of them, I can’t help but compare each to those that have gone before. The program for every single one has been very good. This year’s program had a lot to offer, from PechaKucha and posters to 45-minute keynotes. I think it’s safe to say that it had the most variety of all the conferences. Every morning began with a short presentation by OCAD students and faculty. There were a few panels, a debate, and the newly introduced ReDux Live, in which design industry journalists gave their interpretations of what happened during the week. I’m afraid I missed the latter two, due to sickness, but I’ve heard really good things about them. I’m looking forward to the videos.

45-minute presentations were often run in one track while three 10-minute presentations ran in another. While I understand now the way they set this up, it was not represented well in the Shortlist application that I used to create my schedule. I had selected a mix of 10-minute and 45-minute talks that didn’t line up. As such, I ended up seeing some that I hadn’t intended to see while missing some that I wanted to. It was easier to see the parallelism in the printed program, once you realized that’s what they were doing, but it wasn’t immediately obvious.

In the Details: Microinteractions

The hardest choice I had to make at Interaction 13 was the first multi-track session on the first day of the conference. Pittsburgh’s own Matthew Powers was presenting Smart and Beautiful: Designing Robots and Intelligent Machines. He actually had presented it a week before for our local group as a practice run for the conference, including a tour of the robotics lab at CMU. I really wanted to attend that, but had an obligation to be somewhere else. In the other corner was Dan Saffer with Microinteractions: Designing with Details, a preview of sorts for his soon-to-be-released book by the same title.

Of all the 45-minute talks to be presented during the week, these were the two I most wanted to see. It figures they would be scheduled for the same block. The deciding factor I typically fall back on in such situations is which one I could more easily make a case for directly applying to my daily work. Microinteractions won out. Actually, it’s a topic that I’m particularly interested in. If you have been reading DesignAday for any length of time, you’ll know that I regularly make posts in my In the Details series. These are exactly the types of interactions Dan is talking about.

It’s the little things that make the difference between a good digital product and a great one. In this insightful book, author Dan Saffer shows you how to design microinteractions: the small details that exist inside and around features. How do you turn on mute? How do you know you have a new email message? How can you change a setting? These moments can change a product from one that’s tolerated into one that’s treasured.

I couldn’t agree more. Perhaps I shouldn’t have been surprised to see one of the examples I wrote about fairly recently on screen towards the end of his presentation. In fact, when I spoke with Dan afterwards, he mentioned that he had mined my posts during his research. It’s good to know they’ve been of use, and I’m looking forward to reading about all of the examples he has included when the book releases this May from O’Reilly Media.

IxDA Speaker Network

One of the exciting announcements from Interaction 13 was the introduction of the IxDA Speaker Network. This is a new resource that connects willing speakers with local groups. Local leaders can gain access to the network by emailing speakernet@ixda.org. The network will allow them to:

  • Access speakers
  • Discover where & when speakers are available
  • Discover speaking topics available

Of course, it takes two to tango. The network only works if there are willing speakers signed up. If you have a presentation or workshop you are willing to share with local groups, proceed to ixda.org/local/network, and fill out the form. You can specify cities you are willing to travel to and limitations on dates and times for each. It’s a great way to get exposure, get practice speaking, and support IxDA.

Interaction 13: Food

The first four Interaction conferences were real treats for foodies. Every reception/party had enough food to make a meal of. The selected caterers provided a wide variety of cuisines plated with artistic flair. I remember a dessert table in 2009 that ran the width of the hotel ballroom. I remember shucking oysters in 2010. I remember eating an orchid in 2008, and there was the street vendor outside the Boulder Theater in 2011.

The conference food in Dublin was mostly forgettable. The food served during the closing party at the Guinness Storehouse was fantastic, but there wasn’t a lot of it. Interaction 13 was worse. The happy hours had nothing to munch on, and the appetizers at the parties, while tasty, were not meal-worthy.

The lunches were beyond lame. Each day gave us progressively less meat. In fact, the only meat on day three was some crumbled bacon you could put on your salad. The main course was macaroni and cheese. They made a big deal of the fact that we were not to visit the vegetarian table if we did not request it when we registered, and I really questioned whether I was at the right table. The only explanation I can think of is that a vegetarian planned the menu.

The one positive was that when I checked in at the Radisson, I was issued coupons for free breakfasts (tip included) every morning for myself and my wife. That was a great start to the morning, and it was the most protein I got a couple days.

I guess we were spoiled the first few years while the conference was small. Now it has grown to the point that a conference center is required to fit everyone, and conference centers require that you use their own catering. Here’s hoping that Amsterdam has more to offer.

Interaction 13: Workshop

Upon arriving in Toronto Saturday night, I discovered that the conference organizers had provided me with a list of attendees, including their job titles and the companies they worked for. I was very interested to find that they ranged from the standard “Interaction Designer” up to managers and directors. I was a bit intimidated by the fact that there were two software engineers registered. This was going to be interesting. What would they think of my push to get designers involved in implementation, and how would they receive my approach to replacing JavaScript DOM manipulation with simple class swaps? Would they actually find the workshop valuable, or would it all be old hat? I would soon find out.

I presented my workshop, Sitting in the Driver’s Seat: creating production ready CSS, Sunday afternoon at Interaction 13. There were nine attendees, and everyone seemed to have learned something useful from it. Their technical abilities varied, but they were all able to follow along and understood, at least in concept, if they weren’t able to complete the more involved exercises on their own.

I began with an introductory slide deck that I’ve posted on Speaker Deck. I explained why I think it is important for designers working on web-based applications to not just understand HTML and CSS, but to master it, so that they can contribute directly to the production codebase. I talked about the tools they should be using, and then we got into the code. We started with a simple CSS formatting exercise in which they had to fix a CSS file to adhere to the formatting standards proposed by Nicolas Gallagher in his Idiomatic CSS. Then they used a diffing tool of their choice to compare their work against my corrected version.

After that warmup, we dove into OOCSS. I used Amazon’s homepage as an example, challenging them to reformat the “Get yourself a little something” component so that with a single class swap, it could be changed from the horizontal layout to a vertical layout, matching the “Best Sellers” column also found on Amazon.com.

Finally, we went over the benefits of defining state through CSS, rather than JavaScript. The attendees had to write CSS that would change the display of entries in a contact list, showing and hiding various elements,

In the end, while I could have used a little more time, I successfully fit the content into the three-hour event. Reactions were very positive, and I’m looking forward to giving the workshop again. So, what did the developers think? I’ll let Anton tell you about that in his own words

Interaction 13: Badge

I arrived at OCAD Sunday morning and registered before having lunch and getting ready for my workshop. In addition to the schwag I detailed yesterday, I received my program book and badge. It’s a program book. It’s a badge. These are not two different items.

The design of the program book was alright. It could have been better, but it sufficed. The design of the badge, on the other hand, was pretty bad. The cover of the book displayed my first and last name, my company, and three words I used to describe myself when I registered for the conference (passionate, dedicated, creative). These words were directly below the company name, which made them appear to be a company slogan. Then, below all of that was my Twitter handle, @jackmoffett, in a small, light font. An orange sticker at the very bottom labeled me as a speaker. The book had a hole punched in the top-left corner so that it could be hung from the lanyard in our schwag bag.

Of course, this meant that at least 50% of the time, the book was hanging with my name against my stomach. When it was out, it was difficult to read. The name wasn’t quite large enough, and since the background was gray, the contrast was low. To make matters worse, you couldn’t easily read the book while it was hanging around your neck. There wasn’t enough lead on the lanyard for the size of the book.

It didn’t take long for the conference organizers to acknowledge that we didn’t like the badges. They hinted at some problem they had in production, but they wouldn’t give us their excuse. Instead, they challenged us to “hack the badge”, turning it into a competition. I’m not sure how many entries they received, but not many used the #hackthebadge hash tag. I’m afraid I came down with a stomach flu early Thursday morning and missed the entire last day of the conference, so I haven’t heard who won.

Interaction 13: Schwag

I’ll be spending this week (at least) reporting on Interaction 13, which took place last week in Toronto. It was another great conference, but rather than diving into the details, I’m first going to give my annual schwag inventory.

The “bag” this year was not actually a bag, but a slipcase for an iPad or other tablet. Made of a dark gray felt and screened with the conference logo in white, the case features two leather loops that pivot around the top corners to hold the tablet in. It was a really good idea and genuinely useful. It contained the following:

  • A ballpoint pen branded by YehID. That is going in my drawer o’ pens that I rarely use.
  • Jauntful Toronto map of Tom’s Selection of Amazing Foodie Finds. I didn’t use it, depending instead on my iPhone apps.
  • Field Notes 48-page memo book. It’s a nice little book, and it’s going in the same drawer as the ballpoint pen on a stack of similar little books.
  • A metal Android V1 stencil by UI Stencils. It’s 150% actual size, which I won’t find nearly as useful as if it were actual size. It has a couple button shapes, but is mostly icons. It would allow you to mark the four corners of the screen, and it can be used as a straight-edge. It also has some embossed icons for interaction techniques, but I’m not sure of their utility. The stencil came in a plastic slipcase and was accompanied by a Zebra HB 0.7 mm #2 mechanical pencil.
  • A coupon for one free ebook download from O’Reilly. That’s something I’ll definitely take advantage of, as soon as I figure out which one I want to get.
  • Lanyard, printed with the Ix13 logo.

As far as conference schwag goes, it was pretty light, which is a good thing: less refuse.

Interaction 13 - Bring it!

Tomorrow, I’ll be driving up to Toronto where I’ll be attending Interaction 13 all next week. I will kick off my conference experience by presenting my workshop: Sitting in the Driver’s Seat: creating production-ready CSS. I have my slides ready (well, mostly), and I’ve created a number of CSS exercises that we will be working through. There are still seats available, by the way. I’ll be encouraging attendees to get involved in the implementation of the web applications/sites they design. To do so, they really ought to know how to create good, clean, maintainable, reusable HTML and CSS components. I’ll be showing them how to do just that.

One of the great things about giving a workshop is that I’ll have it done and out of the way before the conference proper starts, so I’ll be able to fully enjoy myself. There are a lot of people I’m looking forward to seeing, and a lot of food I’m looking forward to eating. Oh, and there are those presentations I’ll be attending, too.

If you are going to be at the conference, please find me. I’d love to meet you.