providing graphic design, branding, photography and marketing expertise to denver and the world

Quote of the Week:

All solitary dreamers know that they hear differently when they close their eyes.
-Gaston Bachelard

Notes from Notchcode

4.21.2008

Lifestreaming: Aggregating all your social networking crap.


So, want Microsoft's ever-present life-recording tool, but don't want to wait for it to be invented? Find a lifestreaming tool. I've found one that seems promising: Dipity. It collects a bunch of your social networking data from places like twitter, Facebook, flickr, Picasa, blogger blogs, and pretty much any RSS feed, and places items from those feeds on a timeline. Lots of ways to view them, and it looks like they will be expanding their automated importing options, too. My import went well, although it (for some reason) missed all my blog posts from 2002-05, as well as other posts here and there farther back, which was a bit odd. Maybe it's still importing them (I just started an account literally minutes ago). If you have a chance, check out my timeline. And tell me what you think of the interface.

I think it's a good first step for a timeline interface, but it's a bit clunky when you have a ton of info all in one space of time. You can zoom in to the day level of detail, which brings out each event, but it would be nice to see a more intuitive way of viewing the density of events across a wider span of time. You Tufte-ites will know what I mean.

Labels: , ,


posted at 8:30 PM Leave your comments here: 0 comments

Ask the Design Director of nytimes.com a question

Designers: ever want to know why the New York Times' website looks or operates the way it does? What decisions go into the user interface and information architecture? Khoi Vinh, design director of NYTimes.com, is answering questions from readers April 21-25. Questions may be sent to askthetimes@nytimes.com. from the Times article about Mr Vinh:

As design director, Mr. Vinh leads a group of 11 visual designers, information architects and design technologists in continually improving and extending the user experience at NYTimes.com. Mr. Vinh also writes and lectures extensively about design and technology, and serves on the national board of directors for AIGA, the professional association for design.

Labels: , , , ,


posted at 7:10 AM Leave your comments here: 0 comments

4.14.2008

Site Launch: CarlSanderSocolow.com photography

I completed a gallery site for Guggenheim Fellow Carl Sander Socolow this morning, and I encourage you to check out his work, entitled Scenes from Civic Life.

His latest project involves documenting the town of Mata Ortiz, in northern Mexico. He writes,
This work is a photographic study of the ongoing transformation of a number of heretofore isolated northern Mexican villagers into a community of world-class ceramic artists. This transformation is having a profound historic impact on their lives, the life of their village and on the social, economic and cultural life of the surrounding region. I began this project three-and-a-half years ago with the ambition of depicting the harmonies and paradoxes shaping these artists and their village as both are inexorably compelled, by virtue of an event in the history of art, to confront the modern economic and cultural world and find and take their place within it.


In a town of 3,000 people, more than 400 potters are now working in what has become recognized as a form of high art, he continues. This has an enormous impact on the economic and social life of Mata Ortiz, and Carl's documentation of it it touching for its humanity, artfulness, and compassion. These are real people in his images, not just stereotypes or one-dimensional characters. They are potters, fathers, mothers, daughters, cowboys, baseball enthusiasts, and more.

His other work from the US and europe are also worth viewing. His scenes of a debutante ball and of Venice are especially compelling.

Some notes on the site: we experimented with several navigation methods, including a sliding scroll of thumbnail images on the right side of the window, but eventually settled on an arrangement of squared-off elements of each photo, set in a grid, with links to the full image from each photo element. A Java Script runs the enlargement, which also includes title and date information. This format is hierarchically simple, and will make it easy for Carl to add more images whenever he wants by simply adding a thumbnail image to the grid, and linking it to a full-size image with the included script.

above: Courtship with Dog, Mata Ortiz, Mexico, 2004, © 2004 Carl Sander Socolow. All Rights Reserved.

Labels: , , , ,


posted at 10:55 AM Leave your comments here: 1 comments

4.11.2008

New Software Friday: Moody

Need another tool to quantify your iTunes Music Library? Well, I did. ratings are fine, and smart playlists that create playlists out of most-played, least-skipped tracks recorded in the '80s by composers with the name "Peter" in them can only get you so far.

Enter Moody.

Moody uses a 16-square grid of color cubes, representing sad and less intense (blue, in the lower-left corner) all the way up to happy and intense (yellow, in the upper-right corner). Running in "Tag" mode, you simply click on the square that corresponds to how the track you're listening to makes you feel. In "Listen" mode, click on a square and Moody plays the tracks you've assigned to that mood. So: it's a rainy friday, and you feel like listening to shoegazer music and feel melancholy? Click the purplish-gray square (row 3, column 2 for me) and you'll get some slightly intense, slightly sad music. Might not be all Cocteau Twins and Brian Ferry--in fact, most of those are probably too intense for that setting--you'll probably end up with some jazz, some blues, a few Rolling Stones tunes...who knows? And that's the beauty of Moody: a seemingly random (but not really) way of listening ot music that fits your mood exactly, because you are the one telling it what music equates to which mood.

From an interface perspective, this is a pretty nice solution, although it's not perfect. Ignoring the little intro screen that explains what the grid coordinates correspond to, I was using the Sad, Slow corner to tag grungy blues tracks...but I suppose as long as you are consistent with your tagging methodology, you could assign any two variables to the grid and have it work well for you.

I'd actually prefer an infinite number of points, more like a full spectrum, and perhaps be able to draw a vector on the space--say, from just above sad and slightly intense up through slightly happy and very intense--and then get tracks returned from all the points along the line. This would require a heavier tagging scheme on the backend and in the comments area of each iTunes track (where Moody hides its data) but I think it could be done.

Don't want to tag all of your tracks? Take the lazy-man's way out and click the "Upload/Download Tags" button. Moody will send your tags to their database, and pull down tags for songs in your library that other users have tagged, but you haven't. Mind that now you have other people telling you that Black Sabbath's "Children of the Grave" is less sad that you might think it is, but that's the price you pay for being a slacker.

It's free, with donations appreciated, and they even have a beta online player version, too.

Labels: , ,


posted at 5:02 PM Leave your comments here: 0 comments

4.07.2008

...and if I code all four by then, I get a cookie!

I am web interface boy this week, with three web site projects all hitting the user interface design phase at the same time. What kind of project manager let that happen? Oh, right; that would be me. In any case, it's all good: doing a lot of the same sort of work can improve the quality of work done on all of the projects I'm working on...you get in a groove, and just keep refining and making things better. I told myself when I rolled out of bed this morning that if I got all three interfaces done by Wednesday I'd treat myself to an afternoon by myself at the art museum, or maybe the Museum of Contemporary Art.

I also have another site which had the final bits of content land in-house last week, and am hoping to get that completed and live. It's a great little site, and I can't wait to share it with you guys. Stay tuned.

Labels: , ,


posted at 7:21 AM Leave your comments here: 0 comments

3.25.2008

sign Up Forms Must Die

From A List Apart:
You load a new web service, eager to dive in and start engaging, and what’s the first thing that greets you? A sign-up form. We can do better, says Luke Wroblewski, author of Web Form Design: Filling in the Blanks. Via a technique of "gradual engagment," we can get people using and caring about our web services instead of frustrating them (or sending them to a competitor's site) by forcing them to fill out a sign-up form first.

Amen, brother.

Labels: ,


posted at 4:07 PM Leave your comments here: 0 comments

2.09.2008

Best. 404. EVAR.

A lot of other designers have talked about how kickass the Barack Obama branding is, especially regarding how their site pulls it all together. But in case you head on over there on a day where their servers aren't overwhelmed by donors and news-seekers, this is what their 404 page looks like:

"Thanks to your overwhelming support,
our servers are a bit overwhelmed right now...."

What's great about this is that for one thing, it's not just a generic 404 page (which any smart company will already have replaced with a custom one). For another, the language speaks to the essential brand identity of Obama, that is to say: "hey, we are the underdog candidate, right? We're happily surprised that our server is being hammered right now. Isn't it cool?"

That subtext, reinforced by the subtle silhouette of the masses of people above the text, makes this one of the best 404/error pages I've seen.

Labels: , , ,


posted at 9:21 PM Leave your comments here: 0 comments

2.08.2008

Google Analytics part 2: tracking outbound links from within a Flash document using Google Analytics

>Geek-out alert<
Tracking intrasite links using GA is pretty easy: as long as you have the tracking code installed in the body of each page, Analytics is doing all the heavy lifting for you. The one exception would be if you have a Flash-based site, in which case you need to do the first half of the below bit. The second half applies to tracking outbound links, either embedded in a Flash file or in normal XHTML. Let's get to the Flash-embedded link-tracking first.

You can track any Flash or java-enabled event using Analytics. The trick is calling out to Analytics in each event (or action in Flash, say) using GA's JavaScript. Here's the note from Google. Specifically for Flash event, you just include an action that tells GA to create a link entry to a fake directory or page. Clicks on those actions in Flash are then recorded by GA as links to that directory/page, and you can then access stats for them in GA. Confused? Don't be, it's simple.

Say I have a map, like this one, and I want to know when people are clicking on, say, Boise. I would place this in the action for my Boise button:

on (release) {
// Track with no action
getURL("javascript:pageTracker._trackPageview('/city-clicks/boise');");
}

I'd then see an entry on my Analytics page for /city-clicks/boise and could measure how many times Boise was clicked. Remember, this works for _any_ action, not just clicks. Over, Hit, Release....lots of possibilities to measure how people interact with your Flash file here.

Now for part 2.

The map example above was developed for one of my clients, who needed a gateway page that their member public radio stations in different states could send people to when they wanted to donate money. They wanted one simple URL to announce on-air, to keep their branding and messaging consistent. Easy enough. As you can see on the example page, there's a list of stations below the map with clickable logos and text links to the member stations' giving/donation pages.

But we wanted something more compelling. Something that would make station location easy for geographically disprate listeners easy. The idea of a map came up, and we realized we could do something special with it in Flash: the user rolls their cursor over the map, landing on their city. The city's state is highlighted, and a balloon with the call letters and station logo appear, linked to the city location. Not too flashy, but it provides necessary information for the user (is this my station? If I click here am I giving to my station, or to someone else's?) and does it without making things too crowded (a list of stations and call signs or cities).


The problem was this: With all of this in Flash, Analytics has no way of tracking the links out to the member stations' donation pages. So all GA tells us is how many people visited the map page, not where they went afterwards. Not very useful when the client wants to be able to tell a particular station how many potential donors they sent them. Enter the JavaScript call mentioned above, but slightly modified.

Before we implemented this action, the action to send people from the Flash map to, say, Boise, looked like this:

on (release) {
getURL("http://radio.boisestate.edu/members.html");
}

...and they were sent on their way to KBSU in Boise. But they weren't being tracked.

So we added this:

on (release) {
getURL("javascript:urchinTracker('/outgoing/kbsu');");
getURL("http://radio.boisestate.edu/members.html");
}

and now Analytics reports each click for KBSU as a link to the fictional directory "/outgoing/kbsu", making it a breeze to track.

There are a few additional things to do, like placing your Analytics tracking code ABOVE the Flash element that contains your embedded tracking calls, but really it's pretty easy. I mean, it's not rocket science. So give it a try, and your Flash-based design clients will love you.

For more information on how to embed tracking code for outbound links, see these Google Analytics help documents:

How do I track Flash events?


How do I manually track clicks on outbound links?

Labels: , , , ,


posted at 7:30 AM Leave your comments here: 0 comments

2.07.2008

Why Google Analytics matters. Part one: the overview

>Geek out alert<

Tracking links within your site is really easy using the Google Analytics tool. Oldsters may know it as Urchin, too. To use GA, you place a little bit of JavaScript code in the body of your XHTML which basically sends info to Google whenever that page is accessed. Or maybe little gnomes do it. I am not a programmer. In any case, Google gets the info and you can assess your access stats for any page with this code on it from within the increasingly-ever-more-useful Google Analytics tool.
But Alan, you say, I am just a designer. Who cares? Let the programmers take care of all this stuff. Well, wouldn't it be nice to be able to tell your clients "hey, we can measure how your page is accessed, where people go within your site, and what is so unpopular you might want to consider sending it out on the ice floe to die with dignity"? These sorts of metrics help the client (and you) to assess the value of:
  • their content (information)
  • their site's structure (information flow)
  • the usability of their site's navigation (flow control)

How would you like to be able to tell a client "hey, you should structure your site in a certain way so as to maximize your revenue"? I bet they would be willing to pay you more for such value. Eh? Eh? Never dismiss (more importantly, never let your clients dismiss) the value of measurability.

Getting started in Google Analytics is easy. Head on over to www.google.com/analytics/ and get going. Really. If you have a gmail account you are pretty much ready to go. I'll let the online tutorials and Q&A take it from there.

Once you have a site set up, there are lots of ways you can use GA to analyze data. Lots of books have been written on this, so I won't go over much more here. Let's just say that you can assuredly show your clients how awesomely their content is (or isn't) being received. You can then use these stats to retool the site structure and content to better reach your audience with the content you really want them to see. The web is iterative, iterative, iterative, itera----- you get the idea.
Next post: Solving the problem of tracking outbound links (or any links, really) that are embedded within a Flash document.

Labels: , , , ,


posted at 4:27 PM Leave your comments here: 0 comments

1.22.2008

Once again, the New York Times does Information Graphics Right


The folks over at the New York Times always seem to do visual displays of any kind of information the right way. From graphics showing deaths in Iraq to the US elections, their illustrators manage to pack a lot of information into a compact, understandable package. The latest case in point: Analyzing the January 5th Democratic presidential debate transcript.

The amount of words for each candidate, the moderator, and video clips are displayed as blocks in a chart. Run your mouse over the candidate's name, and their blocks are highlighted. It gives the reader a sense of the pacing of the exchanges between candidates, and allows them to see who talked the most on which topics. Run the mouse over a block, and the transcribed debate text appears in a box to the right.

You can read the entire debate this way, look at just the statements of one candidate, pick out the long passages of speech, or look into the snipes and jabs exchanged between the speakers. It's one more example of why the NYT is so good at conveying information to a broad audience.

Labels: , ,


posted at 8:16 AM Leave your comments here: 0 comments

1.04.2008

The Elements of User Experience: User-Centered Design for the Web


If you are someone interested in hiring a designer or team to create/improve/reimagine your web presence, you owe it to yourself to know what the term "user experience" means. Sure, it means, basically, "how the user sees what is on the screen", but it's really a whole lot more involved than that.

I would recommend to anyone who touches a website project (from designers, to writers, to illustrators, to programmers, to clients) the book I'm reading now: The Elements of User Experience: User-Centered Design for the Web by Jesse James Garrett. Good info that you can go back to time and again for reference or additional understanding of underlying concepts. The diagram here is by Garrett (a snippet of a larger whole, which can be downloaded from his book's site) and is the basis for the idea that spawned the book. Check it out, and if you are intrigues in the least by what is there, buy the book. You won't be disappointed.

Labels: , ,


posted at 10:40 PM Leave your comments here: 0 comments

12.03.2007

Ellen's got a new website


Ellen Bruss, my favorite boss of all time (from back when I had a boss), has a new website up for her firm, EBD. I'd like to say it was an incredible amount of foresight that made me recommend to Ellen that she use the very desirable three-letter "ebd.com" as her domain, way back in the mid-'90s, but really it was that I thought people would be too lazy to type out "ellenbrussdesign.com" into their browser. I can tell you this: I bet her domain is misspelled a lot less than mine.

This new site has a ton of whitespace in it: something we all wish more of our clients would allow into the concepts we create for them. It has a novel navigational grid, which overlays the viewing area. And lots of nice portfolio images from the last few years' of their environmental, collateral, print, identity, and web design work.

So: Yay Ellen, and crew! Good work.

Labels: , , , , ,


posted at 4:17 PM Leave your comments here: 0 comments

11.23.2007

Analogs do digital video transitions via trampoline tech

For all my physical acting and film grad student friends out there, See it and believe it:


All done in one take. My favorite part is the painted progress bar at the bottom.
via the Panopticist.

Labels: , , ,


posted at 10:30 PM Leave your comments here: 0 comments


Business Blog Top Sites
Subscribe with Bloglines
View Alan Bucknam's profile on LinkedIn

Add to Technorati Favorites