DesignAday

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 Nicola 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.

I’m wearing a book #ixd13 flic.kr/p/dQUGpn

— Jared M. Spool (@jmspool) January 30, 2013

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.

Interaction 13 Shortlist

In past years, the Interaction conference has used Crowdvine to allow people to connect, communicate, and plan what to attend. A couple of the conferences have included custom mobile apps with such functionality. This year, there’s something new: Shortlist.

Shortlist recommends people to meet based on your unique set of goals, professional background and social media connections. We call it “accelerating serendipity.” You’ll call it “amazing.”

Shortlist is also an information hub for essentials like sessions, exhibitors and maps. Everything you need to make the most of your time and opportunity is now at your fingertips. So the only question left to ask is, “Who’s on your Shortlist?”

I can’t say I care about the recommendations too awfully much. I already know a lot of people that will be attending, so I’m more interested in seeing who that I know will be there, rather than a list of people I don’t know. But, the functionality I’m most interested in is the ability to select the sessions I’m planning on attending and then display my personalized schedule.

Crowdvine would allow you to indicate people you considered friends separately from those you would like to meet. Shortlist only seems to allow me to add people to my “shortlist”. Crowdvine would notify you if someone marked you as a friend or someone they want to meet, allowing you to then go and do the same. It allowed you to see each attendee’s list of friends and see who was planning to attend which sessions. As far as I can tell, Shortlist doesn’t make that information public. There is a page for “My Connections”, but it is currently empty, and I don’t know how to add anyone to it.

Of course, all of this is of limited value without the ability to access it on my phone during the conference. I searched for an iOS app and didn’t find one, but Shortlist is optimized for mobile use, so I saved it to my home screen for easy access. That should be sufficient for viewing my schedule as I move from session to session. The only thing missing there is the ability to view one day at a time, rather than having to scroll through the entire week’s worth of events.

Shortlist is less robust than Crowdvine, but it is a solid start for a competing service.

Interaction 13 Program

The daily schedule for Interaction 13 has been posted on the conference website. There’s quite a bit there to choose from. With one full day of workshops followed by four days of presentations and other activities, the program is bursting at the seams. In fact, there is so much to take in, I’m not finding the straight list to be particularly helpful, and I’m not sure it’s entirely accurate. There are some gaps in the schedule, and Thursday morning, in particular, appears to be incomplete. Each day’s 10-minute sessions claim to take place in parallel, whereas I think they are intended to be serialized in a single track running parallel to two 45-minute sessions. Assuming that is the case, I like the format. I can see value in picking three short presentations over a single, longer presentation. There’s a greater chance of gleaning useful tidbits from three short ones if all of the speakers are unfamiliar or the topics aren’t of particular interest. At any rate, I’d like to see a visualization of the schedule, as it would be much easier to see how many tracks there are at any given point and which sessions overlap.

I was struck by the number of game design and healthcare-related presentations. I’m very intrigued by the Idea Markets, and I’m bummed that I won’t be able to attend the Local Leaders Workshop or the Interaction Design Education Summit either one, due to the fact that I’ll be running my own workshop, Sitting in the Driver’s Seat: creating production-ready CSS. Be sure to take advantage of early bird pricing!

Don’t miss out on your opportunity to save $100 on half-day and full-day workshops during early bird workshop registration! The Interaction13 conference program includes 13 exciting workshops and all take place on Sunday January 27 at OCAD U. Workshop capacity is 30 seats and during early bird registration, tickets are limited to 10 per workshop. Early bird workshop registration has been extended and now ends on December 7 so register now before workshops sell out and early registration ends!

…and then we got acquired.

IxDA Pittsburgh had an outstanding event tonight hosted by Confluence on the North Shore. The topic was UX Within an Organization, and our panel had a lot of wisdom to pass around:

• Gary Minnaert, User Experience Architect at Confluence
• Maria Emerson, User Experience Director at Intermedix
• Ian DeJesus, Interaction Designer at Viz | General Dynamics C4 Systems
• Anna Abovyan, User Experience Designer at M*Modal
• Minette Vaccariello, Experience Design Manager at UPMC Health Plan

Ryan Cummings, Manager of User Experience at Dick’s Sporting Goods moderated, leading us through discussions of work environment, organizational structure, designer/developer collaboration, in-house challenges, and growth, among others.

Something that struck me right at the beginning, as each of the panelists gave us a little background about their careers and their companies, was that many of us share the same basic story. We were one of a couple, or the only designer, at a relatively small firm, and then we got acquired by a much larger company and had to establish a UX presence within it. It doesn’t make my job any easier, but I rest assured that I’m not alone on this journey.

Of course, the topic of a designer’s ability to code also came up. I really liked Francisco Souki’s comment. He’s a Game Designer working at Schell Games, and he observed that Interaction Designers in industry have a battle to fight that he doesn’t have. In the gaming industry, it’s a foregone conclusion that a designer is needed on a project. Francisco went on to say that a Game Designer is not expected to code, and in fact, the developers would never let a designer touch their code, but they create tools with which the designers can tweak things. A tool may be nothing more than a text file with a bunch of dimensions in it. That sounds an awful lot like a stylesheet. Hmmmm. Don’t forget, I’m running a workshop at Interaction 13. You too can learn how to replace your specification documents with production ready CSS.

Sitting in the Driver’s Seat

I have some exciting news that I’m finally able to share. The Interaction 13 program has been announced, and I’m part of it! I’ll be running an afternoon workshop on Sunday, January 27th. Registration for the workshop costs $200 through November 30th, after which the price rises to $300. There are only 30 seats, so book it now.

Sitting in the Driver’s Seat: creating production-ready CSS
workshop with Jack Moffett

CSS 3 has handed the keys back to designers. With a syntax and structure that speaks our language and a fine-grained level of control, it empowers designers to not only prototype in the actual medium, but to contribute production-ready code. The days of pointing at the screen over the developer’s shoulder and trying to explain how something needs to shift three pixels are over. In fact, much of the JavaScript currently employed for simple UI behaviors can be replaced with well-architected styles. Take the driver’s seat, and make the CSS your UI specification document. This workshop is intended for intermediate designers interested in gaining more control over their team’s final product. As a participant, you will:

• Familiarize yourself with the tools you’ll need to integrate with your development team.
• Learn how Object Oriented CSS (OOCSS) can lead to cleaner, more maintainable code.
• Discover how to replace heavy-handed, inefficient JavaScript with CSS-driven behavior.
• Get started on your own library of CSS components.

It’s Away!

There are only a couple days left until the deadline for Interaction 13 submissions. I just got mine in. In addition to my talk, “Working with Developers for Fun and Profit”, I achieved my goal of submitting a workshop. In fact, I submitted two. Hopefully, one or the other will be selected. With my teaching experience, I do believe that conference workshops would be an excellent fit for me.

Introduction to Typography

Typography is one of the foundations of design. It should be part of the fundamental training of a designer, whether pursuing Graphic Design, Interaction Design, Industrial Design, Information Design, or Service Design. Unfortunately, due to the limitations of technology, especially on the web, typography was given short shrift. Designer’s control of type was hamstrung, so the importance of learning the finer points of working with type diminished. A large percentage of Interaction Designers don’t have a visual design background and have not been exposed to typographic training.

Now, with the advent of web fonts and services that provide them, typography on the web is seeing a resurgence. CSS 3 provides fine control of type, making it, once again, a powerful tool in the hands of those that know how to wield it. We are the caretakers of an art that has been under development since 3200 BC (cuneiform)—the very architecture of visual communication. As such, it is our responsibility to become proficient in the use of type as a method of communication, a means of expression, and an element of usability.

Intended primarily for typographic beginners, the goal of this workshop is to:

• Provide a basic vocabulary with which to discuss typography
• Give a historical overview of typographic evolution
• Instill a foundational understanding of how type works in print and on screen
• Demonstrate the implementation of type with contemporary web technology
• Elicit an appreciation of, and passion for, well-executed typography

Sitting in the Driver’s Seat: creating production-ready CSS

CSS 3 has handed the keys back to designers. With a syntax and structure that speaks our language and a fine-grained level of control, it empowers designers to not only prototype in the actual medium, but to contribute production-ready code. The days of pointing at the screen over the developer’s shoulder and trying to explain how something needs to shift three pixels are over. In fact, much of the JavaScript currently employed for simple UI behaviors can be replaced with well-architected styles. Take the driver’s seat, and make the CSS your UI specification document.

This workshop is intended for intermediate designers interested in gaining more control over their team’s final product. As a participant, you will:

• Familiarize yourself with the tools you’ll need to integrate with your development team.
• Learn how Object Oriented CSS (OOCSS) can lead to cleaner, more maintainable code.
• Discover how to replace heavy-handed, inefficient JavaScript with CSS-driven behavior.
• Get started on your own library of CSS components.

Never Enough

Yes, that crazy IxDA LinkedIn thread, Do Designers need to be able to code?, is still running. It took a short breather a few months back, but then somebody resurrected it. Most recently, Jessie Nunez asked, “Will the deep skill set that we took most of our lifetimes to develop, hone, and enhance ever be enough?”

No. No, it will not. You see, Jessie, Interaction Design is very, very young. I was in the third graduating class of the very first Masters of Interaction Design program, and I’m not yet in my forties. At that time, the World Wide Web was brand-spanking-new. There was no such thing as CSS. The Inmates Are Running The Asylum had yet to be published. Yes, we’ve come a long way in a very short amount of time, but to think that the current state of the industry is the be-all and end-all of Interaction Design is foolish.

If we peg my career as an Interaction Designer starting in 1998, the year I graduated with my masters degree, then I’ve been practicing for 14 years. Assuming I live to a ripe old age and continue to work in the field, which I have every intention of doing, and conservatively retire at 65, that gives me 27 years in which to continue to grow in my profession—almost twice the time I’ve spent so far.

Should I rest on my laurels, satisfied that I have mastered my trade? Of course not. I will continue to learn, pushing myself to become a more valuable contributor to my team/employer/customers. I do have a pretty good handle on Interaction Design at this point, and I have a degree in Graphic Design as well. Where do I go from here? I see three primary directions to branch out: business, research, and programming.

By research, I refer to hard-core usability testing, human factors studies, psychology, and anthropology. That’s the area in which I’m least interested. Programming is going to give me the most immediate bang for my buck. The more I can spread my influence across the development of a product, the better the end result is likely to be, and the more satisfied I will be in my work. I’ve already started down this path. Business is a longer term goal, one that I’m slowly absorbing from working with my superiors, as well as reading. Strategically, that is what is likely going to get me ahead on down the road.

In the mean time, everything is going to continue to change at a rapid pace. So, no, it will never be enough. That’s the way I like it.

Designers don’t retire. We die. - Jeffrey Zeldman