The topic was causes.

I was struck by how awkward of a public speaker Al Gore is, even now. His attempts to plug Current TV were clumsy enough to elicit a few groans from the crowd.

At the end, when Sean plugged Causes and prefaced it with “Now’s the portion of the session devoted to shameless plugs,” the VP redeemed himself with a joke. “Wait, there’s a portion devoted to shameless plugs?” (Try to imagine that in Al Gore’s voice.)

Note: those quotes are paraphrased. I was too busy trying to get the above photo to write down the exact quotes. I don’t know how photo journalists do it.

It sounds like Billy Corgan has accepted the changed landscape that the digital world and, perhaps more importantly, the fans have imposed on the music industry. He’s accepted it, but it sounds like he still doesn’t get it.

He said the solution to the problem (“problem” was not clearly defined, at least not in the Digital Savant article) was for the fans to support the music they like. Well, duh. But that’s not exactly the whole of it. He’s laying the music industry’s woes entirely at the feet of fans. Bullshit. Everybody had a hand in that pie. We already know how the music industry and, more specifically, the record labels / RIAA fucked things up. No need to rehash that. No, I want to point a finger at the artists themselves for a moment.

And not artists like Metallica who went after their own fans with cops and lawyers. Those douchebags are in the same bucket as the RIAA as far as I’m concerned. Though they did that with the same underlying motive that Billy Corgan alluded to in his SXSW conversation.

I’m pointing a finger at artists like Billy Corgan because what he’s upset about is not that he can’t make a damn good living as a musician, but that he has to work more to make less. And that’s kind of reasonable, unless we’re talking about millions of dollars, in which case, fuck you Billy Corgan. Or, put another way…

Oops, your sense of entitlement is showing.

Or, put a third way…

I think you just stepped on your dick.

Look. I’m sorry you can’t make MEGA millions anymore. I’m sorry that, as a performer, a good chunk of your income in the future will come from, well, performing. If you’re a smart performer, you’ll probably make another huge chunk of change from merchandise. But I get it. It’ll never replace the gold that used to rain down from the sky with each breath you took in the Before Time.

At the end of the day though, you’re going to be a lot happier if you get over that.

I have to preface this post with the fact that I missed Friday because I stayed home with strep throat. I didn’t want to be patient 0 and ruin SXSW for God knows how many people. And, because I have strep, I’m on antibiotics, which means I can’t drink. I know most of you would still go to the parties, but I’m what people call a “social drunk,” sometimes known as a sober introvert. So even though I made it to Saturday, I went home after the last session to put my son to bed after watching an episode of Dr. Who with him (the Library episode with River Song).

There are some advantages to not going until Saturday. It took me less than 10 minutes to get my badge and my bag. I had an extra day to look over the schedules and bookmark interesting sessions. I wasn’t at all hung over Saturday morning. And… that’s about it.

I always run into local friends that I haven’t seen all year. I have just as many non-local friends in town, but I always have the hardest time finding any of them. Today it was Matt Fangman. He and I are both interested in storytelling this year. Luckily, there seems to be a lot of sessions devoted to that. Visual storytelling, storytelling for your brand/company/marketing campaign, actual storytelling, talks with storytellers, well, you get the drift.

I ended up looking at the wrong day and missed “Does Your Product Have a Plot.” If anyone went to that and sees this, please send me your notes! (A good nights sleep apparently wasn’t that great of an advantage.) Baratunde Thurston’s keynote “How to Read the World,” was good. I would summarize it if I could, but I can’t. You had to be there.

Looking forward to tomorrow. Not sure what I’m going to yet. I might start out with the Yoga though. It might just make me alert enough to look at the schedule for the right day.

Now showing Bespin, an online code editor that uses canvas. Very cool. I had forgotten about that project. Ben Galbraith used canvas instead of Flash for performance, font rendering and browser interaction.

Alon Salant is now showing a dashboard for a large scale storage cluster network that is written in Canvas. The dashboard graphs are rendered with a JQuery plugin called flot and canvas.

Veen asked Salant why he chose Canvas over Flash. Answer: the client was very anti-Flash. Had previously used Flash for charting and had a bad experience. So it wasn’t exactly a technical reason.

Chet Haase works on the Flex SDK. Thinks it might have been a huge waste of time and resources to code a new solution (flot). He’s giving the standard Adobe line about all the existing development work behind Flash and how people shouldn’t bother reinventing the wheel. Says people latched on to Flash because of the tools available for developing in it. He finds the Flot/Canvas API to be good, but it’s lacking tools.

My thought: the tools will come. And probably faster than Adobe would like.

Germick as a game developer agrees with Haase. No argument that existing tools for Flash are more robust and well developed. The problem is with Flash itself, not its tools.

Canvas doesn’t work in any version of Internet Explorer. Is that a show-stopper for using canvas? Everybody is providing different answers. Most agree with common sense: it is a show-stopper for consumer sites but not so much in smaller, niche uses.

Current slide is just a link: http://code.google.com/p/explorercanvas/. That’s a script that adds canvas functionality to Internet Explorer.

Canvas is a really small API. Consequently implementation across browsers that support it are extremely compatible.

Sites with Flash won’t work on iPhone/iPadd. Sites with canvas won’t work in IE, so no one solution will achieve ubiquity.

Germick, a Flash game developer, is excited about the next version of Flash and it’s ability to package up Flash files as native iPhone apps.

User Experience

Flash breaks browser experience. No back button, you can’t copy text and images, you can’t link to pages within the Flash, etc. These are extremely well-known complaints.

Haase says if it’s for a game the browser interoperability doesn’t matter very much because it’s about the experience. Salant called him out on that. It’s a very limited use case.

Overall I didn’t find this panel all that interesting but that may be because I’ve followed these arguments for a long time now.

Highlighting exceptions allows people to quickly spot problem areas. Example slide was a bar chart full of gray bars with one very low bar that was red. Second example slide showed negative % change in red with other percentage values in black.

Key Performance Indicators (KPI)

Everything on your dashboard will be a performance indicator but not necessarily a key performance indicator. Example: Total sales: 9.1M — the value looks good. But if the percent change YoY (year over year) is -13.6% then the total sales value isn’t very good at all. Choose the right data to display.

• Avoid a lot of interactivity on dashboards.
• Use “word sized graphics” — very small charts shown inline with text data.
• Use contrast effectively to make exceptions pop visually.
• Your dashboard doesn’t have to look like a car or plane dashboard.
• Gridlines aren’t necessarily necessary.

“Pie charts are a bad idea regardless…” Really? It’s a bad idea in his example slide with 50 different items listed out. “Round visuals aren’t an effective use of real estate.” A round visual may leave some whitespace on the table but the last time I checked that wasn’t necessarily a bad thing.

“Bar charts are fine but…” He’s showing a slide with too many bars. Lesson here is: be careful of the data set range you choose to include.

Shiny doesn’t work for data graphics and can actually cause confusion. Example slide shows a highlight on a pie chart causing one section of the pie chart to look like two sections.

It’s difficult to prototype a dashboard because you need to develop the data model to support the prototype. Suggestions for good prototyping: Focus your work on the static portions of the dashboard. Get the right layout, data, metrics, and visualizations. Vet your ideas with the programmers to ensure feasability.

There was a list of links presented at the end that I didn’t catch, but Scot Hacker did (scroll to bottom of post).

The better the design:

• The easier the reading experience
• The deeper the engagement
• The more connected the consumer
• The stronger the brand relationship

Wired commissions custom fonts for their magazine. Much of typography has been lost with the move to online. Fixing that is one of the goals of Wired.

Wired’s custom fonts have 10,000 kerning letter pairs! A typical font has 500.

Wired’s Tablet Project:

Combine the fidelity of print design with the flexibility of online design.

400 Designers and 1,100 Editors at Conde Naste, parent of Wired. They need a digital solution that can integrate into the existing design workflow. Conde Naste reaches over 60 million people a month.

Slide showing the flow of an article being built for Wired. Lots of steps in the process.

K4 is the database architecture that allows simultaneous distributed design and editing with remote tie-in.

What is the best way to navigate a digital publication? Influential factors: print magazines, iPhone, digital and web content, ergonomics of a tablet device, intuition and what they thought people would find easy to use the first time. Three design goals: allowing the content to shine, walk-up usability (instant, intuitive interface), and revolution through evolution, meaning not doing everything at once. The application will evolve over time.

Showing a slide diagraming the workflow to repurpose a print article for tablet devices.

Magazine browsing is a left-to-right linear process along a vertical axis (down). Tablet app uses the same flow.

Here it comes. The WIRED reader prototype is about to be shown with the current March issue on it.

iPad application will release first! Adobe worked with Wired to create this thing. Wondering if they used the new Flash-to-iPhone native app conversion to build iPad version? Demo is on a Dell. Ads are scrolled through just like in the print version. Advertising is still very important.

Showing some very cool interactive features. Image galleries in articles, 360 degree rotating 3D images, animated graphics, etc. These are the features that will make the tablet version of the magazine so compelling. Showing a second gallery implementation now–this one with thumbnails.

They’ve actually designed pages different for landscape and portrait orientation. On top of the magazine layout, that’s insane. Just showed a zoom in on an complex image. Ads with interactivity. They’ve built ways to layer interactivity on top of flat advertiser assets, like a photo explorer for hi-res photos, form interactions, 360 rotation for 3D images.

Showing built-in audio. Called Kevin Smith annoying.

Showing several different platforms, including several smartphones.

Audience Q&A

They won’t launch with usability features for sighted or otherwise handicapped users. They said they would add those features in the “years to come.” I’m willing to bet that will piss more than a few people off. Also doesn’t make Adobe look good since they’ve had longstanding usability issues with Flash.

They don’t yet know how the new tablet app will affect the website and what content ends up on the website. They want to reset the economics of print journalism.

They want to reach out and be wherever their readers are, including the iTunes store. This was a response to a question about giving away subscriber data to Apple. Good question. Surprised that they don’t seem to be very concerned about it at all though. I hadn’t even thought about this issue until the questioner raised it.

Psychology Cards

10 minutes late to the start of the panel — Groupon breakfast ran long with cool conversations with cool people.

He’s talking about iLike.com where, instead of getting a form to enter artists he likes, he was presented with a grid of artists (picture + title) that he could select bands he likes. At the bottom of the page he could see more artists or he could go to the homepage. Very much like Netflix.

He clicked through 10 pages of artists. The visual nature of the list piqued his curiousity.

Recognition over Recall – select bands you know rather than bands you like.

More seductive interations on iLike: they gave him the iLike challenge where they played song snippets and rewarded points like a game depending on how fast you can identify the song name.

Increasing motivation = psychology.

What do we know about people? We’re curious. We seek out patterns. We don’t like to make choices but we like choice. Mine: We see patterns even where there are none. We seek the opinions of those we trust or we rely on the wisdom of crowds. People like to talk about themselves. People like free stuff.

His stuff: we’re lazy, self-centered, like to be the hero of the story, respond to our name when it is called out, we’re afraid of change.

If we know people are curious, how can we use that?

If you salt (seed) the tip jar people are more likely to add tips. It’s an example of the social proof (similar concept to the wisdom of crowds).

Good example of social proof: the let’s fix Outlook site that has a wave of user avatars in the background.

How to be Mysterious & Intriguing

The Hot Wheels section has tons of options but it also has a mystery car where you don’t know what you’re getting. That’s the one the speaker’s kids always want.

California Kitchen gives out a card prize but you can’t open it. You have to let them open it when you come back. It could be a free appetizer or $1,000. Great example of mystery.

LinkedIn will show you some of the people who have viewed your profile but you have to upgrade your account to see everybody who views it. It only shows you a teaser of who has looked at it though. A “leader in the design industry” for example.

Quantcast gives away website metrics for free then asks “Is this your site? Get Quantified to get more data.”

Playing Hard-to-Get

Private beta + social proof = a powerful combination, much like a nightclub where you have to be invited to get in.

Provide a limited interface. Twitter has a max of 140 characters. Rypple limits reviews to 200 characters.

Earning points to unlock features or spaces.

Sabre’s internal wiki:

• 60-70% of Sabre employees actively use the system each month.
• 60% of questions asked are answered within one hour of posting (90% in 24 hours).
• Average of 30 page views per employee per visit.
• Each post receives an average of nine answers.

Giving limited points to dish out to your own skillsets from a list forces you to limit your responses to what you’re really good at (great idea for a job applicant board!).

Lighten Up

Showing a “No Parking” sign. Now showing a Chili’s sign: Curbside pick-up only. All others will be crushed. Showing several other examples of humorous copy online.

Taking a Chance

You meet people at parties but you don’t really remember their names. Some sites throw in default data. Example: Brighter Planet encourages you to go green. It starts out by populating your profile with defaults and giving you a default rating. It asks for a lot of data but everything you enter affects your rating number. They only expose one form field at a time. You enter one and that form field goes away and it shows you the next one. This is both default data and a good feedback loop.

On Friskiness, Gifts & Pleasant Surprises

“Brains pay attention to what brains care about, not necessarily what the conscious mind cares about.”

What does the brain find interesting? Surprise, novelty, the unexpected, fun, playfulness.

Mailchimp has recommended sizes. If you make an email too wide it starts giving you warnings “ouch, stop it, too wide, etc.” If you make it too wide you tear the monkey’s arms off.

Will the real dopplr logo please stand up? Every visit the color bars change on the site. Very spartan site except for color. Color represents locations, cities around the world. But they don’t tell you that, which makes it a fun thing.

Why does this work?

Pattern recognition, playfulness, delightfulness.

Now What?

Sorry, no 9 tips or 5 lessons, but he is making a group of “mental notes” cards. The next time you’re sitting down with a group trying to solve a problem (ex: we need more registered users), you pull out a card and then brainstorm different ways to apply the principle of psychology that is on the card (ex: social proof). Cards will be available at the end of April. Preview packs of the first seven cards are being given away to attendees of the panel!

I missed a lot of stuff. I couldn’t keep up with the speaker. Good panel.

Speaker Info

• Website: jasonspeaking.com
• Twitter: @jasonspeaking

3 Things to Learn About Web Typography

• How to use web fonts
• How to find web fonts
• How to choose the best web fonts for your design

Why does typography matter and what is web typography?

Web typography is not text in an image. (Duh. This panel might be a bit remedial.)

Sites using cool web typography:

• acidsmile.co.uk
• taptaptap.com
• workatplay.com
• sxsw.beercamp.com

Five font-stacks: sans-serif, serif, monospace, cursive, and fantasy.

He’s explaining what those are. This is definitely remedial. Probably a good session for neophytes. I’m hanging out with a friend so I’ll be staying for the duration.

• List of pre-installed fonts on Windows and Mac: http://fluidwebtype.info/web-safe-fonts/
• Another List: media.24ways.org/2007/17/fontmatrix.html

Running through the CSS syntax for webfonts now.

Hey, a good semantic idea:

Give your webfonts a custom name based on usage (Headline, BodyCopy, etc.) instead of using the actual font name, which requires you to change all the references in your stylesheet if you later decide to change fonts.

Discussing formats now, EOT and WOFF.

Sweet, he mentioned Font Squirrel’s @font-face Kit Generator. That’s what I used for the fonts on this site. Discussing font EULAs now.

All fonts on exljbris.com are available for use on the web.

Web font service bureaus

• Subsetting
• Local Use
• Bandwidth Usage
• Price Structure
• Speed/Bandwidth

Limits of webfont service bureaus

• Do not control font name
• do not control font files
• Price often a yearly license
• Browser support

Webfont service bureaus

• Typekit: 400 fonts
• Kernest: 600+ fonts
• Typotheque: 40+ fonts
• Ascender: 200+ fonts
• Fontdeck: 40+ fonts

How to choose webfonts

Choose for voice. Consider the phrase “I am going to kill you” rendered with different fonts.

Font-stack: webfont, web safe font, core web font, generic.

Choose for consistency. Select understudy fonts with similar widths and kerning to the primary font. This is something I’m struggling with my use of League Gothic for headlines.

Choose for style. Select fonts with bold, italic, and bold/italic versions. I’m less worried about that for headlines, but it’s important if you want to use custom fonts for body copy.

Choose for legibility. Select fonts with consisten weight and thickness with simple, low contrast strokes and serifs.

Choose for readability. Select fonts that are well balanced between letter spacing, counter width, letter width, and x-height.

My own thoughts

Free fonts can sometimes be a bit dodgy. There are good sources you can get your free fonts from though. Places like the League of Moveable Type and Font Squirrel. Once you download a font, you can inspect it and generate versions (OTF, TTF, etc.) with FontForge.

We specialize in large, corporate, committee-driven web projects. (paraphrased)

I’m talking about pain-free design signoff for your clients, not you! If the client is happy, you’re happy.

Paul is using the story style that he used in his recent article (it was either in Think Vitamin or Smashing Magazine–can’t remember right now) and in of his recent podcasts.

You present your perfect design and the client isn’t happy because you didn’t find out about his audience or other stakeholders. You presented only one design instead of three, leaving him with no way to pick and choose elements that he wants to build his own frankenstein website. Now he feels like he has to tell you exactly how to do your job:

“Can we fill in that whitespace with copy? Make it bold, make it bigger, make it brash. That’s what I want. Can you move it slightly to the left? Make the logo bigger.”

You feel like you’ve been reduced to a pixel-pusher and you start to argue that you’ve only budgeted for three revisions.

Do you ever say “screw it, I’m just going to give the client exactly what they want,” and just washed your hands of the project. Yes.

There must be a better way

The problem is that we are too defensive. We minimize the interactions that the client has on the project so that they don’t screw it up. We don’t do multiple designs because we know it will lead to Frankenstein creations. We discourage them from showing the design to others because we’re afraid of design by committee.

The client feels ignored, kept in the dark and like we think they’re idiots.

The Solution

Use the skills we already have and communicate.

What the client wants:

• To understand the process
• To have control
• To personally like the site
• (missed two others because I was dealing with a connection problem)

How to give them what they want while building a quality, user-centric site: collaboration not confrontation.

The six principles of collaboration

• Ensure the client understands their role. Explain that their job is to find problems. Our job is to find solutions.
• Have a strong methodology. It reassures clients and helps them to understand what the proces is.
• Include the client often and early. It lets them feel like they’re in control, makes them more engaged personally, gives them a feeling like they’re shaping the final result which helps them like it more personally.
• Educate the client about the decisions being made. Explain the typography, color theory, and other elements that went into your decision making. It helps them understand why you do what you do. It gives them confidence in you. And it gives them ammunition when discussing the design with other people.
• Ask for specific types of feedback from the client. Don’t ask them how they think. Ask them how they think their users will react to the design. Ask whether it meets business objectives.
• Avoid saying no. Say “yeah, sure we can do that, but it’s going to affect x, y and z.” They can then say yes or no, deciding what the project priorities are. They are in control.

Don’t ask them for sites they like. Show them sites you think are appropriate and talk through the elements you think apply and why you think they apply. Get their feedback.

Next show them moodboards. A moodboard shouldn’t take more than an hour or two to make. This is the “multiple comps” step but you’re not spending days building the different designs.

Next up build wireframes. You can build the wireframes with the client using paper or a whiteboard. You can involve developers and project managers at this stage.

Now you can move to the design mockup process. Now you’re producing a single mockup which won’t be a surprise to the client because you’ve already done everything else together. Now you want to present to the key contact rather than a committee. Because a committee will all have different opinions and they will try to find common ground, which means designing on the fly and making compromises. Now you’re back to the Frankenstein design.

Again ask if it meet business objectives? Does it meet the objectives? How will users react to it? Provide them with all of the background information. Paul suggests giving them a video with the mockup in it so that, when they send it around for feedback, they have to send the video with all of your background information and reasonings.

Design testing. The flash test: show it to them for five to ten seconds and then ask them to describe what they saw.

Iterations. One or two rounds of iterations instead of endless rounds because you’re already most of the way there before you even start designing the actual mockups.

Collaboration not confrontation

• Understanding roles
• Use a methodology
• Include the client
• Educate
• Control feedback

Pretty slides. League Gothic for the font. I’m definitely not the only designer in love with that font right now.

Paul Boag flagged this panel on sitby.us. Would be cool to meet him.

Panel is packed (room 10AB).

Presentation:

Three overlapping disciplines (venn diagram on slide): business, design, development.

Mentioned the Elliot Jay Stocks brouhaha.

A generalist takes care of whatever is needed. Showed several slides of things held together by duct tape. “Generalists get the job done.” Generalists can ensure that execution matches intention.

A specialist’s thinking isn’t limited by external constraints. They might design something that isn’t easy to implement because they’re not concerned with what’s needed to implement it. A generalist can see the big picture in a project and can offer key insights on how to solve problems.

I think this panel is by generalists, for generalist, which I’m all for.

Specialists can take advantage of specific market opportunities. Generalists can easily pivot in their careers. Here they’re showing a picture of Dwayne “the Rock” Johnson. He played football, then wrestling and then moved more into the entertainment realm. Now he’s trying singing. Funny example of a person who has changed and adapted over time.

Making Choices in Your Career

Questions you can ask yourself (with my own answers):

• Do you feel the need to be the absolute best at something? No.
• Do you like handling things from start to finish? Yes.
• Do you like working alone on projects? Yes.
• Can you learn and understand foreign concepts quickly? Yes, most of the time.
• Are you competitive and a perfectionist? Yes.
• Do you want to work on the new, hip, sexy projects? Yes.
• Do you need much variety in your career? Yes.
• Are you good at knowing when you’re in over your head? No, but I need to be.
• Is job security a priority for you? Personally, no. But as a father, yes.

Some of those questions I feel more strongly about than others. I absolutely have to have variety in my projects and my career.

Making Choices for your Team (Hiring)

I’m going to answer these questions based on my role at Spiceworks.

• Are you small? Yes.
• Do you have a decent process in place? Yes.
• Is that process more agile than waterfall? Fuck, I don’t know.
• Is amazing execution your top priority? No.
• Can you keep a specialist busy for the length of the job? No.
• Do you need someone who can pitch in various ways? Yes.
• Are you hiring a manager, exec, or very senior role? No.

Paul Boag is here. He just asked if specialists were limiting themselves career wise since the panelists contention, which I agree with, is that generalists make better managers and senior level staff.