I just wasted a lot of time answering the wrong question.

Almost a month ago the CEO of my company, Scott Abel sent me an embeddable video of an interview he had given. He wanted the interview to appear on our website but he wanted to know if we could do so without using the interviewer’s Flash player.

Well, a quick investigation found the interview posted to iTunes in MP3 format. Problem solved, right? Well, no. Next we had to secure permission to post the audio. This took a week and a couple of emails. Then we had to decide where we wanted to post it. News section? Our blog? Somewhere in our community? The item fell off the radar for another week.

Last Friday it came back on the radar. The decision was to post it to the news section. I checked with our server admin to see if we needed to post it to Fileburst or if we could just host it ourselves. I wanted to wing it because I didn’t think there was much chance of it getting a lot of traffic. He was the (correct) voice of reason: multimedia files go on Fileburst.

Next discussion: headers. Did we want it to play immediately, force a download or leave it up to the user. We didn’t want too many concurrent connections to bog down our Fileburst server if the file saw a sudden burst of popularity, so force the download.

While he was uploading the file I went back to the iTunes podcast to see if I could avoid the whole hosting/serving issue altogether. I had an ITPC link to the podcast’s RSS feed but that forces people to use iTunes. Replacing the ITPC protocol with HTTP pulled up the standard RSS screen. Using that requires people to be familiar with RSS and RSS feed readers.

In the description of the feed was a direct link to the MP3 file. But the MP3 autoplays in the browser with no context and no obvious way to download and save it. And you can’t download it until it finishes loading anyway, adding yet another layer of confusion. Not the best user experience. And, what happens if the owner decides to move where the MP3 file is hosted?

So now I can serve up the ITPC link, the HTTP link or a raw link to the MP3 but each solution has drawbacks and none of them provide a particularly compelling user experience.

It was while mulling those options that I experienced a particularly lucid moment.

I went to the website of the company that did the interview and found where they posted it on their site. It has a descriptive title, some lead copy, a picture of our CEO, and links to play it in the browser, download it, subscribe to the RSS feed or subscribe to the iTunes podcast.

The worst part is that we always link to the source webpage.

This was a very simple issue that was turned into complex one because I never stopped to ask if I was asked the right question. I just tried to answer it.

• Put away the computer
• Start with a six-up template:
  • A piece of paper with six thumbnail boxes
  • Designers tend to come up with only 1 or 2 ideas at first
    Usually influenced by tools and recent designs
  • Six-up template forces you past that wall
  • Don’t limit yourself to six

• Conceptual frameworks:
  • Spectrums: explore 1-dimension of project
    Ex: Experience Level: Beginner to Expert
    • First timer: how-to guide
    • Intermediate: Choose template, step-by-step process
    • Expert: DB stuff with past evites, invitees, etc. (control panel)
• 2×2: spectrum on top of a spectrum
  • First-Timer/Expert plotted against Manual/Automatic
    • Quadrant A: First-Timer/Automatic
    • Quadrant B: First-Timer/Manual
    • Quadrant C: Expert/Automatic
    • Quadrant D: Expert/Manual
• Grids: plotting all the spectrums across x/y axis

• Word Association:
  • accordian, auto-complete, bookshelf, breadcrumbs, carousel, cart, collapsible, comments, comparison, configurator, …, icons, …, modules, …

• Inspiration Library:
  • Use screengrab tool for Firefox to grab screenshots of things that are interesting.
  • Use iPhoto to catalog them

• Assemble an ad-hoc team:
  • Make sketchboards
    • Post sketches by group to a large board (like a mood board!)
      • Ex: requirements, home page, create invitiation, re-visit invitation
  • Run template-based workshops
    • Design the box: front, back
    • Concept Sheet: title, draw a picture, …
    • Design the experience: title, …

Decorate your space with your project sketches and materials while you are working on it (not after). Invite people into the process.

When someone starts describing something to you, give them a pen. Ask them to draw it out.

• Have a black-hat sessions:
  • Get everybody together for a fixed period of time and play a game where everybody has to take a turn being a villian and they have to go through and point out every possible objection they could possibly have. Gets people who won’t shut up about their concerns and let them feel heard. Takes people who were too afraid to give you their criticisms and gets them to open up and voice their concerns.

Get rid of the idea of a genius designer (d’oh!)

• Use design principles (5-7 pithy statements about the essence of the experience):
  • Tivo Ex:
    • It’s entertainment stupid.
    • It’s TV, stupid.
    • It’s video, damnit.
    • Everything is smooth and gentle.
    • No modality at deep heirarchy.
    • Respect the viewers privacy.
    • It’s a robust appliance, like a TV.
  • Google Calendar Ex:
    • Fast, visually appealing, and joyous to use.
    • Drop dead simple to get information

Quiddity (great Scrabble word): a statement of what you want the essence of the experience to be. You will not create a great experience unless you define what the quiddity is.

• Evite was the case study used for the session:
  • Three step process:
    • Choose design from the design gallery
    • Add recipients
    • Send evite
  • How would you improve this process?

Of course, you can create text as a graphic using any font in your arsenal. The drawbacks to this tactic are that it’s not easily changed later, it can’t be copied and pasted with other text on a page, it doesn’t scale in size when the user chooses a different default font size for the browser, and it’s not accessible to people with visual impairments who use text-speaking devices. The benefit, however, is that the text you create in Photoshop appears exactly as you want it to appear, with your font of choice and any graphic effects or other visual stylings.

Now, there was a little bit of FUD there about the screen readers (text-speaking devices). If you provide the text in an alt attribute for the image it will be perfectly accessible. However, I found it amazing that a magazine for designers, primarily print designers, would be so astute as to point out all of the failings of using images for text.

Later in the article was another paragraph, this one about Flash:

When designing Flash projects, most of the same typographical rules mentioned above still apply; you’re simply gaining the freedom to use whatever font you like. However, Flash isn’t nearly as accessible as HTML, and certainly not as flexible as CSS if you want to change the appearance. Frankly, waiting for Flash animations to load can be annoying to site users, even those with broadband internet connections.

Steering designers away from Flash because of accessibility and load times? I’m not religious but Hallelujah! I take this article as a sign of the maturity of the online design community, our tools and our pool of knowledge. We’ve come a long way in the last 10 years and pieces like this give me hope for the next 10.

• Start drawing (both offline and with a sweet pen tablet)
• Write those stories I keep starting (and participate in this year’s National Novel Writing Month
• Look out for myself (okay I’m stealing that one from him)
• Stay in better touch with my friends — and get out more
• Practice my Spanish*
• Design more and code less — including designing some t-shirts
• Start blogging about things I’m passionate about (design and the web)
• Redesign my site — I’m using someone else’s design!

See? Same damn list. He might have tried to customize it a bit to “make it his own” but we all know the truth. James Craig reads minds. I don’t know if he has to get close to you to do it, so I want to make sure I get these out now:

• Finally create my web-based cartoon — it’s been six years
• Start a t-shirt company (hey, everybody else is)
• Create some sweet WordPress plugins:
  • Real estate listings
  • Events calendar using the hCalendar microformat
  • Contact list using the hCard microformat

Okay, it appears that Structured Blogging is way ahead of me on the whole microformats-for-WordPress thing, so I’ll have to check that out.

* This one is major since my wife’s family doesn’t speak English and we visit them several times a year. I would also like to learn German since my own extended family doesn’t speak English either. As it stands right now I can’t communicate with her family or mine.

But a combination of fascinating people, one day after another of free booze (top shelf stuff too!), and a lot of really interesting discussions combined to push me past the bounds of propriety.

Did Matt Mullenweg need to hear me tell him that I make money off of his product that he gives away for free? Probably not. Did Tantek çelik need me stalking him for 20 minutes to take a picture ? Definitely not. (I was really just sitting two rows behind him and trying to get a shot when he turned his head.) Did the guys who make Red vs. Blue need me to take advantage of their open bar tab? Well, that one’s their own fault.

I’m slowly recovering from SXSW Interactive, which ended last night. I’ll (hopefully) post more on it once I’m a little bit caught up on work. Like it does every year, it has left my head bubbling over with ideas.

1. Web design should be controlled by designers
2. AJAX is the future of the web
3. Every big company should have a usability lab
4. All web apps require ethnographic research
5. 99% of Flash is BAD

The above are all DOGMA. Forget it. Let’s talk about the direction we need to be going. –Dirk Knemeyer

Savant
Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. –Steve Jobs, Apple

Scientific Method
Introduce cautious, well-measured changes and introductions of new features and products. [...] UI is a science not an art. –Marissa Meyer, VP Product, Google

The above pair of quotes were presented on a slide

Hey, I’m am liveblogging [Update:]

Grossman is talking now: discussing how usability testing can be taken to extremes and become dogma. It reminded me of a common theme today for the smaller businesses that are creating beautiful products that work well. Amazingly they have product release cycles measured in days or, in some cases, hours! (I can’t even conceptualize that.)

They pointed out something that has been obvious to me for years: Amazon has a horrible interface. Yet they do a ton of usability testing and A/B testing for any change they make to their site. A/B testing is like comparing McDonald’s burgers with mayo to McDonald’s burgers with mustard (analogy stolen from one of the panelists). At some point a radical change is required to move forward with the design of the site or product or whatever.

Of course the example of good usability testing is the Apple iPod product line which also popped up on a slide.

Conventions are a useful thing. Jakob Nielson is not. (That one is my own.)

The Leadership Triumvirate

1. Ideation
2. Communication
3. Implementation

Design normally comes in at the implementation stage as the production part of the product assembly line. It should start after the initial idea stage (design as communication is a strategic value add).

“He who can define the problem can define the solution.” –Goto

Really neat process map by Wroblewski:

http://www.gotomedia.com/goto/lifestyle/process/

I’ve temporarily added the Flickr Flash app to display my SXSW photo stream below the menu on this site. Temporary because I don’t like the Javascript implementation but I don’t have time to put up anything else right now.

Microformats presentation by Tantek Çelik

I saw these applications on Jakob Heuser’s laptop and thought they were cool:

Textmate (Text Editor for OS X)

It first grabbed my attention because Jakob had edited his color schemes to be colored text on a black background. Silly reason I know but it took me back to my days of programming MUDs back in college.

The functionality took me back too. It was the best of both worlds with the syntax highlighting and robust features of a GUI editor and the aliasing system of Linux. I’m not saying I’m going to replace my BBEdit, but I’m definitely going to play around with Textmate.

Adium X (Messenger for OS X)

I have no idea about this one but it looked interesting and I saw it at the same time that I saw Textmate, so I want to check it out too.

It seems to me that every time a cool new technology or idea comes around, we jump on the bandwagon with such enthusiasm that we leave behind everything that came before. When the discussion repeatedly turned to letting non-power-users rely on or draw from the knowledge of the group, either in the form of automatic tagging or keyword suggestions, people questioned how any one person could rely on the opinions of another. While I agree that no system is perfect (systems are, after all, created by imperfect humans), it seems to me that we’ve been developing methods of quantifying trust for a long time.

When I buy something on eBay I’m reasonably assured that I’m buying from a reputable seller. The same goes for opinions on Epinions. Does anybody remember when Epinions was the cool new kid that would empower the masses? I still use the site when making purchasing decisions. For that matter, look at any peer-to-peer network.

Simple ideas tend to be the best ideas. That’s my corollary to Occum’s Razor. Simple methods of user ranking can create a trust mechanism that would allow novice users to rely on the wisdom of experts. This could easily allow for experts in specific areas (Jazz was mentioned during the panel).

I want to repeat one suggestion that was brought up during the panel: tagging should be incorporated directly into the browser (and operating systems). Regular bookmarking should take advantage of tags. This should not replace categorization but rather be offered as an option to it. Just because you think it is better doesn’t mean it has to replace something people have already learned to use. There is something to be said for the efficiency of knowledge already learned.

That suggestion led directly to something that I have not heard mentioned by anyone despite it being extremely obvious. In fact, it hadn’t occurred to me until the panel. Tagging has been around since the early days of the web. It has been done by the experts in each subject area and it has been done to a vast quantity of what is out there. I’m talking about keywords. Remember meta-tags?

Why has nobody created a bookmark plugin or web utility bookmarklet that automatically includes meta-data with the link URL? This should be automated in every browser and bookmarking website and, at the very least, include the two most common meta-tags: description and keywords. Relying on past lessons learned: bookmark searching should be able to very easily include or exclude metadata in order to deal with keyword spamming (there we go re-using past knowledge to enhance the trust of the system…).

I’ll leave off there. Hopefully other attendees (and the panelists themselves) can offer more suggestions or point out the flaws in mine. The evolution of ideas is best accomplished through collaboration.

Related Links:
Panel Listing on SXSW
Beyond Folksonomies (great resource page)