Nate Koechley's Blog

Carpool Conversations Vol. 2

In the second installment of Carpool Conversations, we talked about the dynamics of communication and collaboration. This image is a visualization of our thoughts.

Another thought we had, that's not represented in the chart, is that "silence is a powerful tool". It seems that speaking less sometimes gets better results, and that moments of silence are important. For one, it's important to listen and it's important to think, both of which are markedly more difficult to do while you're talking. Secondly, repeating a point has the generally-unintended consequence of reducing the potency of the idea. If you keep talking after you've made your point, you have a tendency to stray from the initial message, thereby watering it down. At the same time, your listener doesn't have a chance to absorb the idea. Know your message, deliver it as clearly, accurately and succinctly as possible, then allow it to stand on it's own and flourish.

We didn't get to talk too much today (no pun intended), because for some reason the traffic was sparse and we make good time north.

Stay tuned for Carpool Conversations Vol. 3.

Today’s Wrong Solution is Tomorrow’s Constraint

Layered Semantic Markup (LSM) is not a technology, but a framework comprised of HTML, XHTML, Cascading Style Sheets (CSS), Javascript, DOM and other Web technologies. LSM allows for appropriately implemented principles and standards.

LSM is a development framework for creating Web documents and experiences. LSM builds for the least capable devices first, then enhances those documents with separate logic for presentation, in ways that do not place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. LSM supports all user agents, and is inclusive by design. (Progressive Enhancement - Unobtrusive Javascript)

LSM has structural semantic markup at its core, which provides lean, meaningful, accessible pages. This well-built core and the clear separation of structural, presentational and behavioral layers make this development philosophy superior to many short-sighted approaches.

Today’s wrong solution is tomorrow’s constraint. A holistic vision - an underlying philosophy - must guide technical decisions. LSM provides the strategy for a sound and future-ready approach.

LSM embraces Graded Browser Support by using one markup document, subsequently layered with stylesheets and scripts that provide a gradually enhanced experience across a wide variety of browsers and devices.

This approach has profound advantages over other browser support approaches such as graceful degradation. Graded Browser Support recognizes that advanced technology support is not a guarantee of the future, and that legacy software as well as alternative devices (mobile) must always be considered. Graded Browser Support defines support in terms of current capabilities, not in terms of legacy or obsolete software; it embraces accessibility, universality, and peaceful coexistence with more feature-rich browsers/devices; and it allows for adoption of new technology and strategies without leaving any browser/device behind.

Credits

This work is heavily influenced and contains directly passages from Debra Chamra's "Progressive Enhancement: Paving the Way for Future Web Design", Steven Champeon and Nick Finck's presentation "Inclusive Web Design For the Future with Progressive Enhancement", and Steven Champeon's "Progressive Enhancement and the Future of Web Design", all of which may be found here.

Thanks also to the great people who have endlessly debated and developed these topics with me: James Berry, Sean Imler, Todd Kloots, Jon Koshi, Mike Lee, Thomas Sha, Matt Sweeney, Chanel Wheeler, and Christina Wodtke; and everybody else; and to everybody who puts their ideas online so that others may be inspired. Thanks.

Metafilter Tags

Matt Haughey writes: "Jumping on the delicious and flickr bandwagon, I've added tags to MetaFilter"

Newsmap

For all the news junkies out there, and for those of you interested in visualizations, check out newsmap if you haven't seen it before.

• Notice the legend in the lower right corner. Color = age.
• The size of the area represents the number of sources.
• Layout controls are in the lower right corner too. I think I prefer "standard" over "square".
• You can select countries across the top. Each country will get a proportional section of the page. Turn on US, NZ and Canada, and notice how different stories are variously prominent.
• Archive controls are in the lower left. You can examine news from earlier in the day, or earlier in the week.

Looking for Music?

Enter an artist you like here, then explore: http://www.musicplasma.com/

Blog Torrents, P2P and the Development of De-centralized Media

Broadband Daily posts an interview with Nicholas Reville of Downhill Battle, which just recently released Blog Torrent, a very exciting new initiative:

Blog Torrent is a key first step of our plan to make software that builds participatory culture. Video (specifically television) is a huge part of culture. But it's still an extremely top-down medium-- even as the tools to make high quality video and animation have become extremely cheap, very few people watch any significant amount of video other than what's on networks and cable. We think homemade video can compete directly against professional television, especially as reality shows have brought down viewers expectations about the production values needed to make engaging TV.

More from the BlogTorrent site:

What is Blog Torrent?: Blog Torrent is software that makes it much easier to share and download files using the bittorrent protocol. Blog Torrent is easy to install on your website: we don't use MySQL so installation is as easy as uploading a folder to your web host, and all administration happens in the web interface. Blog Torrent is easy for users: even if they don't know what bittorrent is, they get an installer that downloads the file they want. But most of all, Blog Torrent makes publishing with bittorrent painless. Just click "upload", pick a file, and you're done. This is our preview release and it has a lot of bugs and rough edges... but we're smoothing them out for the next version, so stay tuned.

Why does Blog Torrent matter?: Making it easy to blog large video files means that people can share their home movies the same way they share their photos or writings. It lets people create vast networks of truly peer-to-peer video content-- video that was made by individuals and shared with individuals, no bandwidth budget or distribution deal needed.

We'll definitely be seeing more torrent news lately, and this convergence with the blogging world / blogging technology can only help.

Chaos = Cooperation

A new Wired article, Roads Gone Wild suggests that removing street signs, curbs and crosswalks can lead to less accidents.

It begins with this compelling premise: "Build roads that seem dangerous, and they'll be safer.".

It caught my eye for a few reasons. One, it shows that design is everywhere. It's traffic flow too, not just pixels and RGB codes. (Of course I know that, but I still enjoy learning more and more about the design efforts all around us.) Two, it shows that taking things away is often a more effective solution than adding things. Three, it makes me reconsider what and how I design for the web. On the web we try to make things "intuitive". This article strikes me as evidence that more explanatory and instructional text, more user-hand-holding, and more manipulation by the designer to achieve "control" isn't the path to success.

[He considers] most signs to be not only annoying but downright dangerous. To him, they are an admission of failure, a sign - literally - that a road designer somewhere hasn't done his job.

It also reminds me of the disbelief I felt in Rome this spring. Primarily, I was amazed that massive four-lane round-abouts could work. Without cross-walks and without traffic signals or indications of rights-of-way, incredibly dense traffic seemed to almost-peacefully coexist. Across Europe there are cafés more or less in the roads and plazas, all without obvious problem. This article describes just that, and the explanation makes sense:

Monderman ripped out all the traditional instruments used by traffic engineers to influence driver behavior - traffic lights, road markings, and some pedestrian crossings - and in their place created a roundabout, or traffic circle. The circle is remarkable for what it doesn't contain: signs or signals telling drivers how fast to go, who has the right-of-way, or how to behave. There are no lane markers or curbs separating street and sidewalk, so it's unclear exactly where the car zone ends and the pedestrian zone begins. To an approaching driver, the intersection is utterly ambiguous - and that's the point.

Monderman and I stand in silence by the side of the road a few minutes, watching the stream of motorists, cyclists, and pedestrians make their way through the circle, a giant concrete mixing bowl of transport. Somehow it all works. The drivers slow to gauge the intentions of crossing bicyclists and walkers. Negotiations over right-of-way are made through fleeting eye contact. Remarkably, traffic moves smoothly around the circle with hardly a brake screeching, horn honking, or obscene gesture. "I love it!" Monderman says at last. "Pedestrians and cyclists used to avoid this place, but now, as you see, the cars look out for the cyclists, the cyclists look out for the pedestrians, and everyone looks out for each other. You can't expect traffic signs and street markings to encourage that sort of behavior. You have to build it into the design of the road."

Outside of web design and any parallels there, the article hits on things I feel in everyday life. I want to live where being a pedestrian is possible. I want to live in a neighborhood where people hang out outside, and kids play on the sidewalks and in the streets. I want outdoor cafés.... I don't want parking lots and drive-thru's and strip malls.

"They'll go to places where the quality of life is better, where there's more human exchange, where the city isn't just designed for cars. The economy is going to follow the creative class, and they want to live in areas that have a sense of place. That's why these new ideas have to catch on. The folly of traditional traffic engineering is all around us."

I've only captured parts here; the whole article is worth a read.

Now I'm off to drive north from the Silicon Valley to San Francisco, up the crowded, slow, mind-numbing 101 North.

Digital Web Magazine: a Fast Company's 2005 Fast 50 Nominee

If you don't read Digital Web Magazine, you should. If you do, you should leave a testimonial over at the Fast Company's 2005 Fast 50 - their 4th annual - where Nick Finch, DWM's publisher and driving force is nominated this year.

Douglas Bowman's presentation from Web Essentials 2004 in Sydney

Doug Bowman, of Stopdesign and adaptive path, famous for the Blogger and Wired News redesigns, posts his great presentation Pushing Your Limits (And Other Secrets of Designing with CSS) from the Web Essentials 2004 conference in Sydney.

It's a great presentation, and beautiful too. Whether you know your CSS or not, it's well worth a click-through.

The Behavior Layer - Unobtrusively

I've been working on a framework called Layered Semantic Markup for I guess a few years now. While I spend most of my time considering the Structural Layer (Content, aka HTML) and the Presentation Layer (CSS), there is a third layer: Behavior Layer (scripts and the DOM). Having stable and appropriate Content and Presentation layers are helpful before one can appropriately address the Beharior Layer, which is why I've spent my time as I have.

A foundational idea of Layered Semantic Markup is Accessibility (and not just in the Section 508 of Accessibility for indivisuals with disabilities). Content should be accessible to ALL. Content should be available without Presentation. Presentation should be available without Behavior. In other words, each can only reach their potential (and some would argue bare minimum) if they are isolated and independent.

I don't want my snazzy Javascript DHTML behaviors (which makes my navigation more efficient to desktop computer users) to make my navigation unusable to cell phone browsers. With a nod to "One man's treasure is another man's trash", what's good for one user may be detrimental to another.

With this in mind, take a look at this great tutorial on how to write an Unobstrsive Behavior Layer, or as the author brands it, "Unobtrusive Javascript .

Javascript is a wonderful tool to enhance the usability of web sites. It is the extra layer above the mark-up 'what is this text' and the CSS 'how should it be displayed'. Javascript adds a new dimension, the 'how should this element behave'.

On the following pages we will discuss and see how we can use Javascript, but still maintain accessibility. The technique to completely separate Javascript from the other two layers of web development has become commonly named 'unobtrusive Javascript', as 'accessible Javascript' does not quite cut it. You can have a perfectly separated Javascript and still be totally inaccessible.

Hat tip to little. yellow. different's mini-blog.

Folksonomy and the ESP Game

Somebody in the physical world told be about Carnegie Mellons ESP Game. (I know it was a physical person because I found the url on a piece of paper on my desk -- I'm not sure who though, if it was you, speak up in the comments below.) It's fun itself, and also relevant to a new meme that's been floating about lately: "bottom-up social classification".

In the same week as I was tipped to the ESP Game, I attended a brownbag lunch at work discussing meta data, primarily as it applies to photos. Of note was the "community classification" offered by the photo service Flickr. Obviously, classification and meta data are crucial as the amount of information continues to skyrocket.

How to do it is much more difficult than identifying the need.

This "bottom-up social classification" idea has been generating a bunch of conversation lately, nicely summarized by Gene. This concept has been coined a folksonomy by Thomas.

You can read more about Folksonomy in thoughtful posts by Victor, Jess, Stewart and Alex.

So, the ESP Game is pretty similar, which is why I've combined these posts. The ESP Game is a Java-based game that facilitates two people viewing a single image at the same time. You can read about how to play, but basically two people are looking at the same image. They both type labels describing the picture. When they've both identified the same label, a match is declared and both players earn points. The points are the reward to the humans -- the high-quality, double-human-confirmed keyword/label associated with an image is the reward to the system that CMU is building.

(Previously identified labels for a specific picture are then taboo words, and aren't allowed to be used in the game. This ensures that additional -- generally more precise -- labels are continually identified and captured.)

They've already collected 3.726 million human-confirmed labels. I'll let them describe the value of this:

Labeling an image means associating word descriptions to it, as shown below. Computer programs can't yet determine the contents of arbitrary images, but the ESP game provides a novel method of labeling them: players get to have fun as they help us determine their contents. If the ESP game is played as much as other popular online games, we estimate that all the images on the Web can be labeled in a matter of weeks!

Having proper labels associated to each image on the Internet would allow for very accurate image search, would improve the accessibility of the Web (by providing word descriptions of all images to visually impaired individuals), and would help users block inappropriate (e.g., pornographic) images from their computers.

Help out and have fun.

75% of web design is normative, the rest is merely color and pictures.

An interesting survey, These web sites are identical...or are they? suggests that "75% of web design is normative, the rest is merely color and pictures.".

I found this link over at blogdex.net

This survey compares 10 web sites through elements of their layout: styles, page construction and elements... The survey seeks similarities and differences between those well known web sites... What can be observed is that those web sites agree on implicit, internalized layout and design norms (Consensus rate), and that deviance from these rules (Dissidence rate) is uncommon.

The survey made the following conclusions, which I'll directly quote here. Before I do, let me urge you to take a look at the data and analysis they present, it's enjoyable.

• Similar layouts

  Even though thousands of different layouts can be achieved using (X)HTML, web designers tend to stick, explicitly or not, to a set of layout elements. Links must be underlined, even when hovered, and the user must be able to tell which links he has already visited. web designers do not like sidebars very much when placed on the left, right sidebars are much more widespread. Every page should include a header logo and a footer; moreover, a white background is preferred. The main text font should be serif. Last, a header graphic is recommended.

• Identical contents

  Some elements of content are recurrent in web design: search boxes are quite common, copyright sentences including the designer's full name are prevalent; 404 pages are quite used too. The habit of dividing web sites into sections is extremely common; such sectioning rarely goes over six sections.

• Coding the same way

  Although many techniques often exist for the same effect in XHTML or CSS coding, web designers favor some coding techniques, elements, or norms. XHTML is acknowledged as the markup language to use by a majority. When designers decide not to use some code, they massively reject it: access keys, XML prologs. Many cleavages still remain: UTF-8 vs ISO encoding, Strict vs Transitional, use of print style sheets...

• Inheritance from print design

  web designers share a common print design background and import some of its elements to their Internet creations: a comprehensive use of sidebars and their positioning, footers, graphic headers, typographical knowledge.

Web Visions Presentation

First Things First: IA and CSS

With apologies for the delay, here are links to the presentation Christina Wodtke and I delivered at the webvisions 2004 conference this past Friday in Portland, Oregon.

'Facetop' Blends Screen and Video Images

Roland Piquepaille's Technology Trends blog has a cool post of the future of video conferencing? Using blended images and transparency, it's not possible to have a single point of focus while working via videoconference. Haven't used it -- not much of a vid-conf user anyways - but seems cool. I do remember how great it was when Apple's iSight had the nexted self-image.

Here's a screenshot from his site.

Interesting article on metadata driven search and browse on an intranet

Metadata based search and browse functionality on the NSW Office of Fair Trading intranet: a Case Study

http://www.oict.nsw.gov.au/content/6.1.1.22.OFTINT.asp

interesting notes from the case study

An authority list is a list of the terms that can be used to populate a given metadata element

The simple search executes a search across the 'subject', 'title' and 'description' metadata fields as well as the text of HTML pages and attachments. If the search term has a synonymous term within the corporate thesaurus then this term will also be searched.

Monitoring user searching and browsing success
Search reports are generated daily and cumulated on a monthly basis. These reports show the number of searches performed, the most popular search terms, search terms which resulted in success and those which resulted in failure. To date we only have reliable data for the last three months and are still looking at how to interpret these reports and how we can use them to develop intranet content and improve search functions.

interesting notes from the conclusion

Assigning metadata centrally, rather than decentralising the process, was the correct decision. It became obvious to us that two people assigning metadata frequently results in higher quality metadata than many people assigning metadata infrequently. The usefulness of the search and browsing functions depends totally on good metadata content, so no matter how good our standards and tools are, without proficient metadata assigners the project would have failed.

interesting notes from external resources

The guiding principle for using qualifiers with AGLS elements, colloquially known as the ?dumb-down rule?, is that a client (eg a person or software) should be able to ignore any qualifier and use the description (element content) as if it were unqualified. The remaining element value without the qualifier should continue to be generally correct and useful for discovery and other management purposes. from http://www.naa.gov.au/recordkeeping/gov_online/agls/AGLS_reference_description.pdf

Theories About Designing Experiences

Jodi Forlizzi hosts a helpful and insightful overview titled Towards a Framework of Interaction and Experience As It Relates to Product Design -
Theories to Talk About.

In it, the work of Alben, Battarbee, Cain, Dewey, Forlizzi, Hudspith, Jaasko and Mattelmaki, Makela and Fulton Suri, Margolin, Pine & Gilmore, Rhea are summarized and contrasted. Diagrams of relevant models accompany easy review.

The 2200 words make it a longer-than-average page; any shorter, and the 11 Theories wouldn’t get there due.

Cheers to http://superfluousbanter.org/

GUIdebook - User Interface Gallery

Brian Kromrey points to this "Nifty archives and historical reference of just about every graphical user interface you can imagine: http://www.aci.com.pl/mwichary/guidebook". Sections on Interface, Components and Icons organize an impressive number of screenshots, including 136 Dialog Components such as file>open.

Wifi changes User Behaviour

Wi-Fi Changes Virtually Everything

"Wi-Fi is taking off fast. More than 64 million Wi-Fi systems are expected to be sold this year, up from 24 million in 2002, says researcher IDC.

Already, Internet companies such as ESPN.com are tailoring features to customers with Wi-Fi. In September, ESPN.com launched a host of features. Among them: live chats with sports experts, more video clips of big plays and tools to help fantasy football fans track their teams.

It's a big change from ESPN.com's initial design, based on targeted users who watched the game in the living room and dashed to an office PC to check scores or stats. ESPN launched the redesign after focus groups said they were using Wi-Fi to take the site into the living room....

Entertainment portal Yahoo TV caters to Wi-Fi users, too. Customers are starting to use a Wi-Fi-equipped laptop while watching TV for interactive viewing, says Director Doug Hirsch. When a big show is on, traffic on the Yahoo site jumps, he says....

found: http://www.theshiftedlibrarian.com/2004/02/19.html#a5233