Lately I’ve been coming across a lot of really cool stuff on the web via a variety of sources. The most recent of which has been Digg. I had heard about Digg for years but a system to rank popular news stories just didn’t interest me that much. I finally took a look at the site and I was an immediate convert. The design category is fantastic.

I’m a little behind on my reading (and posting) but work has been busy and taking time off for SXSW didn’t help things. I found myself reading the February issue of How while I ate my lunch today. February was the issue on typography. I was surprised to find an article on web typography but even more surprised by what it wrote:

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.

I don’t know how he did it but somehow he managed to steal this list straight out of my brain. Sure he added a few things like move to New York and picking up music again, but it’s basically my list. Compare:

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

I’m normally a “play-it-cool” kinda guy. I don’t like to fawn over people or even go out of my way to meet them. They’re just people. And if they’re well-known people they probably already have enough of that going on and wouldn’t mind a little bit of personal space.

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.

Random notes from the panel which is still ongoing. Maybe I’ll liveblog!

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/

Flickr photo stream

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.

This panel defined folksonomy and the current state of tagging. During the course of the conversation there were a few suggestions on ways to improve upon the current state of affairs, which is what the panel was really about. I wanted to expand on that part of the conversation.

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)

SXSW Interactive is just over a day away. It’s my favorite time of the year. Even better than Christmas.

Great article up on Salon right now called I, Nanobot. Definitely worth a read.

I just saw a great Twilight Zone. One of the old black and white ones. Man, I didn’t realize how much better they were than the schlock they put out in the color series. I saw two great episodes really, but the second one resonated more. The all powerful state, which banned books to limit knowledge, decided if people were obsolete or not. Obsolete people were executed. The obsolete person, a librarian, got his revenge on the state by getting his judge executed as well. What’s good for the goose…

This post was written at 1 AM but due to a power shortage wasn’t posted until morning. (I only mention that so that people don’t think I sit around in my underwear watching old Twilight Zone episodes on a workday morning.)

On a mailing list the following question was asked:

Does anyone have links to any usability studies comparing 2-column layouts (1 column with navigation + ancillary information, 1 column with content) against 3-column layouts (2 columns with navigation + ancillary information, 1 with content)?

As an independent web developer I don’t get to do usability studies for my websites. I have to rely on published studies and common sense. That’s okay: most small businesses can’t afford usability studies but they can, and should, have the best website they can afford.

The question piqued my interest so I did a quick Google search for “web design usability study two-column three-column“. The first result led me through a virtual wonderland of usability studies that provided a lot of really interesting information:

Is Multiple-Column Online Text Better? It Depends!

Large high-resolution displays can now have resolutions of over 1900 pixels, resulting in extremely long lines of text. One way to resolve the problem of very long text lines is to divide the text into multiple columns, thus decreasing the width of each individual line. Some sites even allow users to customize pages into one, two, or three columns…

Effects of Link Arrangement on Search Efficiency

Results indicate that column treatments of a large numbers of links has an effect on search time. - This statement could imply that if the designer is given no choice with regards to page depth, that no tested improvement can be made on the search time. In other words, nothing shows that arranging many links in particular formats is going to generate lower search times, so choose the best one from a design point of view.

I found this study to be particularly interesting because it determined that users were able to find links quicker when they were spread across multiple columns whereas I would have expected people to more easily scan a single vertical list.

What is the Best Layout for Multiple-Column Web Pages?

An important issue regarding the physical layout of a web page is the use of space or in this case, how the contents of a web page should be placed within the confines of a window. Web designers have dealt with this issue by using several different methods…

This study found that fluid layouts are preferred by users. Left justified layouts (fixed to the left of the window) are least preferred. None of the tested layouts caused a significant difference in usability. Unlike the previous study regarding link columns, the results of this study are exactly what I would have expected.

Where Should You Put the Links? A Comparison of Four Locations

Online newspapers and journals, as well as many other types of informational sites, are invariably confronted with the question of where to place links associated with the online document. Currently, many informational sites place associative links below (as seen with CNN.com) or on the side of the document (as seen with techreview.com), while a shrinking number of sites embed associative links within their documents, such as scientificamerican.com.

This one studied link locations. Again, no significant difference in
usability based on location of the links. Users preferred links embedded in
the content. I’m with the users and, despite the findings, disagree on the usability aspect. Embedded links appear within a context. I know what they’re about and that makes them more useful to me.

Like I said the other day, I’m using a canned template that was created by somebody else (Denis Somar. I don’t want to knock the template in any way, on the contrary, I picked it because I liked the look. As I also mentioned the other day, it’s not exactly valid XHTML (although I think Denis made a good faith effort here).

At any rate, I figure the design will work until I have some time to create my own. The previous design wasn’t so much a design as it was an experiment in creating a Wordpress template.

Why am I repeating so much from the previous post?

Because I just found out that in IE6/PC the content was way down below the menus in the sidebar which means ~75% of people visiting my website may have thought there was no content. Oops.

The lesson here is to never assume that something you didn’t make yourself is going to work as advertised. (You would think I would know this already having grown up in a Microsoft world.) It’s also entirely possible that I made a change somewhere the caused the problem as well, even though I didn’t touch the code for the main divs.