Bill and Ted’s Big Screen Adventures

When I first saw a tv clip of Microsoft’s Surface my first reaction was that it looked like an over sized video iPod. But if the demos work the way they’re shown, it could be a pretty cool tool. Between the spatial arrangement of elements, the zooming in and out with the hands on the table it reminded me of a Ted video I saw a while ago of Jeff Han. I’ve embedded it above.

The table also got me thinking of the interface in a different kind of way. Since Microsoft is creating essentially the hardware (physical table) and software (how it’s powered), they also perhaps are the only people that can create the interface which means if they’re targeting the surface to casino’s and restaurants they will have to have a consulting team to actually work with the client to create the perfect app. That’s nothing too unique of course, just interesting to think out loud about some of their next steps.

I also just came across the above Ted video “Blaise Aguera y Arcas’s short-but-astonishing demo of his Seadragon and Photosynth technologies”. Again if this visual format can work, it would again suggest opportunities to expand how intuitive navigation works on all types of screens.

Thinking about Google Analytics

Google Analytics

For the last couple of weeks I’ve been actively playing with the revised Google Analytics. In the past I’ve never been a huge fan of GA due to the lack of it’s real time data. There’s also a couple other reasons why it’s not my number one choice, but I’ll go into that later. The free tracker that I do go to more often is Stat Counter. On the negative side the Stat Counter interface is pretty bad but there’s one feature that I think is pretty important though not exactly click efficient. I can look at the isp address of the person looking at my site and find out how they got there. I’m able to see if they got to my site through another link, from a search engine or whether they came to DesignNotes directly. GA will show a referral and the isp of the viewer at the same time – but they’re not connected. I can’t click on the referral information and see the isp or vice versa. Having the connection helps me understand the who and the how of the viewer much easier.

Getting back to GA, here’s a couple quick notes of what stood out for me in the design update.

1. Timeline: There’s a couple ways to define the dates of the stats, either through a calendar or this visual timeline. What’s nice about this feature is that it gives you a quick visual reverence to the date. It can be long or as short as you want.

2. More Graphs: The graphs are small, but surprising clear in terms if line weight. Considering how little space these six sections take up, I can a general outlook quickly.

3. & 4. Map Overlays: The one step backward of the design update is the new Map Overlay (3.). In the old map (4.), it showed individual dots first as opposed to general continent information that is highlighted in colour. While the dots were not entirely helpful in telling the number of visitors, it did give a quick indication of where people were coming from.

5. The new and old Dashboards: Overall a whole post could go into the site architecture of the new and old dashboard, but since both are still confusing to me I won’t dig that deep. What I will mention is that the new one is less daunting and friendly, but still I think there’s some work to be done. Possibly keeping the viewer settings like the old one, but also add a number level from beginner to expert. The icons are a nice break up of steady text.

Since the design update I really haven’t changed a lot of my natural stat behaviour yet with Google Analytics, but it has more to do with the function then taking a look at the newer visual information that isn’t quite connected for a regular blogger like myself.

Children for Children redesign website launch

Children for Children Website

Almost every day I talk about something related to design that’s caught my attention here on my blog DesignNotes. But rarely do I mention anything that I’m working on or have been a part of. There’s a lot of reasons why that is, though one of the practical reasons is that the projects I’m now designing are 1. complex, 2. have large teams and 3. take a long time to launch.

But with that said, one of the first projects that I worked on at Renegade launched last night. Children for Children’s new website (redesign) is now working. There were a lot of Renegade people involved with this project: Alan, Michael (me), Frankie, Sonali, David C., Gordon, Rob, Bryan, Kumail, Jade, Adrian, Fanny and Drew. Aside from everyone at Renegade, there was the dedicated team at Children for Children. Without getting into defined roles of each person, I’m going to talk about a lot of the considerations of the site and how they were implemented.

“Children for Children® (CFC), a New York not-for-profit founded by parents to foster community involvement and social responsibility in young people, offers opportunities for young people from preschool through high school to “grow involved,” through hands-on service and philanthropy programs that teach the value of volunteering and giving.” With that said, the website talks to a couple different audiences, first and foremost to the kids that may want to get involved with the organization, and additionally to the parents of the kids. On a different level there’s the public, whether it’s potential donors or media groups. And a third important group, Children for Children – the organization itself. Each of those audiences have different needs, expectations and uses for the website and I think we’ve made the site understandable and useful for all of them.

At it’s most essential level Children for Children is run by children. Anyone that has designed for kids runs into the challenge aesthetically to balance fun an playful without going too far that the look and feel seems contrived, speaks down or becomes a rainbow of color. There’s so many reasons why they may come to the site: more info on events, wanting to volunteer, see the latest news, publish etc. A lot of those reasons are similar to what parents, donors, media and volunteers want too. So all the diverse groups in a lot of ways have similar goals when they come to the site.

After meeting with Children for Children and talking with kids that were actually going to use the site, visual explorations began. At the same time the site architecture was updated and content began to be re-purposed. That evolved and merged together to create the framework of the site. Because there was so much valuable content, we wanted to create quick entry points so the person using the site wouldn’t get overwhelmed. That’s why tabs on the home page underneath the flash banner were created. Each of the audience groups could get quick bits of info. Other essential elements was the calendar and how it displayed upcoming events. There’s a monthly visual and if you click on the date it takes you to a dedicated events page. That page also gives an upcoming three month overview of future events. If you wanted to donate or get involved there’s easy access buttons. There’s also typical questions that people might ask, so we tried to anticipate a lot of those and placed a drop down button at the top of the page.

There’s been a lot of talk of web 2.0 and we wanted to take those technical elements that would help foster the community and help Children for Children internally. The biggest thing that isn’t seen but runs the site is the content management system, aside from giving Children for Children the tools to update their own information, it had to be understandable enough to work with the calendar. The home page also works similar to a blog, each new entry or post will find itself on the homepage. As newer content flows, older information goes down and can be found in it’s proper section. Flickr is used to collect photos of events, multiple ways of saving information like Delicious, Digg, Google and Yahoo were also implemented. A rss feed was created to send info to users that know how to use an rss reader.

A website never really finishes. Once people use the new site both internally and externally now that it has launched, tweaks eventually will be made. However a new framework has been designed and I’m extremely happy and proud to see the site come to be as it is now.

the FreshDirect Beef Guide

Ever since I sold my bbq before moving I haven’t exactly been excited about buying beef. Sure I’ll order it at a restaurant, but I don’t tend to bring it home to grill. I only bring this up b/c I wish I had known about the FreshDirect Beef Guide from FreshDirect so I knew exactly what I was buying. It’s a great interactive tool that guides you through the different types of cut, and what you can expect in tenderness and flavour. It’s not exactly easy to find so I’m happy Lillian who I work with told me about it. It’s at the bottom of the beef section that’s inside meat, however you could also just go click

Which Way?

which way

When I scroll down to the end of a blog’s second page I sometimes feel stupid. I’m usually faced with two buttons, “next” and “previous”. It doesn’t matter which button I press, I have a 50% chance that it will take me to the third page, but inevitable it almost always takes me to the home page. I’m not sure why, but I’m always pressing the wrong button. After getting tired of this exercise of feeling less than adequate in my blog surfing ability I decided to document the confusion. I think part of the problem has to do with language syntax and the placement of the button in consideration to left/right sides. As I collected these buttons I also noticed a couple simple words make all the difference in navigation. I always knew where I was going when the buttons said “older” and “newer”, or if there was a number involved. So how does DesignNotes compare? Not so well, though I plan to change that aspect of the design once I can understand this template better.

Wii Wii

Wii at Renegade

I’ll be the first to admit that when I heard that Nintendo was going to call their new game system the Wii, I laughed it off. I thought there would be quite the backlash of the name though nothing really came of it. Now that I’ve had the chance to play the Wii a couple times I want one. My wife who’s been in Canada for the past couple weeks has threatened to return it if she sees one in our apartment. So for now it’s a no go, but I’m sure once her friends start talking about it, it wouldn’t be a hard argument to win.

In the spirit of giving you as much Wii knowledge as I can, I offer Noah’s blog post titled Wiiiiiiiiiiiiiiiiii!!!!!!!! and Jason’s Mental Floss post Virtual Exercise for further reading fun.

The Future of Interaction Design Stalls at Not Being Able to Log In: well at least for me that is


A couple of weeks ago I came across a presentation from Adobe titled The Future of Interaction Design with Hugh Dubberly and Jodi Forlizzi. The event was described as follows: “a one-hour online conversation on the Future of Interaction Design. Participate in this discussion and share your views! All you need is your browser, your telephone, and your point of view to be an active participant — or just listen in”.

I was interested, I even stayed home from work to listen in. The emails that confirmed my attendance arrived so I felt confident that it would be a smooth process to log in. Well, instead of listening in I’m blogging about the fact that I couldn’t log in. I went through all the scenarios and it just wouldn’t work. I have to admit that this was my first time trying to listen in w/ an Adobe presentation, but there shouldn’t be any type of learning curve to log in. If you get an email confirmation, you accept it into your iCal things should just be a simple login with user name and password. But that didn’t happen on this day. Maybe there was a glitch in the information architecture and I missed a step, but I’ve gone through much more confusing logins w/ success. Until we can figure out how to get people access to online interactions (no matter what their online understanding is), the conversation about what to do after the fact will be futile. Well I hope the talk is recorded for those that were able to participate and then I’ll be able to listen in…

UPDATE: Apperently I have officially become New York. When I hear 9 am, I just assumed it was Eastern time. The start of the event is 9 am Pacific time = 12 pm in New York. My very big bad.

No sound

UPDATE 2: I had minor success logging in – but only after Sonali sent an email to the moderator did she get a direct link as a guest and then sent it to me. Unfortunately you needed a phone to hear the sound. That would have been fine except we had to connect through wifi b/c our net was flaking out this morning. So for me at least it was a bust. I lost an hour at home and another forty-five minutes at Renegade. I hope the next session works out better, for what it’s worth they’re looking feedback on how to improve things.

Yahoo Maps Mashup: Measure your running distance and save the information


Long before google attempted to create a measurement tool for their maps, Randy Troppmann created a mash up for runners using Yahoo Maps at The navigation and his instructions have improved over time, but the real benefit to this site is the fact that you can store your routes. By saving the information you can share it with others and watch your progress. There’s also a live chat feature. My only negative remark about the site is that the green lines that denote the route should be in a colour that contrasts more with the yellow. I’m sure my friend won’t mind a friendly online crit…

I was also happy to hear that he’s been getting some well deserved press. The Edmonton Journal published the article Need a running route? Just click and jog a couple days ago. Be sure to check out and his blog at

Make your own Mac Dashboard Widget


Recently I came across a great site that talks about how to create your own Mac dashboard widget. This was perfect timing as it looks like the new iPhone will be using widgets in their nav – hence in theory you should be able to create some cool apps for your cell phone. Abduzeedo breaks it down at The Abduweedget: creating a dashboard widget. If you want in on the app, visit Apple’s Developer Connection to download the Dashcode. The only catch is that you need an Apple ID. I was able to use my .Mac account id to get it. Dashcode itself is pretty nice. It breaks down the seven different templates along with the custom version to create a widget. I’ve only started playing around with the application to create my own, so it may be a while before I release the DesignNotes widget. A couple other sites to check out would be Developing Dashboard Widgets, Build a Dashboard Widget, Apple Applications Dashboard Sample Code and How to make your own Dashboard Widget with Dashcode.

Opening the Apple iPhone


There’s been a lot said for months, weeks and days now about the Apple iPhone and what it may or may not look like. I was a little surprised at the actual outside design and am a bit skeptical about how easy it will scratch after owning an black video iPod for a while. I’m also not so sure about their solution for the QWERTY keyboard. Maybe after I get one for user testing purposes I’ll be able to dispel my issues. Oh, it’s too bad that I can’t upgrade my treo 650 for a couple years so I will probably have to wait unless cingular decides to get with the program about those that want to seriously upgrade their phones at will…

But what really excites me is the opportunity to create widgets and other potential applications. As frogs blog mentions, there’s some serious design potential out there for tech and software advancements on this phone. From their blog: “I quickly realized that Apple has created a platform in which web developers will be able to play a substantial part. With the inclusion of widgets, Apple has created one of the most accessible development platforms for data transfer and productivity apps to date on a mobile phone. All you need to know to develop a widget for Tiger’s dashboard is XHTML, CSS, and JavaScript. With the iPhone running OS X, I’m assuming the requirements will be the same.”

I’m going to start collecting urls and commentary that talks about this, so if you see of anything noteworthy like the above, please let me know. I want in on this game!

Ok, I have had a bit more time to think about this whole iPhone idea. Why couldn’t apple just sell this thing sans phone and have it capable to sniff out wifi? Take it one step further and allow a skype hack? That way you don’t have to worry about a cell phone provider…

More stuff links
russell davies: the macworld experience
cool hunting: iPhone
456 Berea Street: Apple iPhone is cool, but where is my keypad?

The Future of Software?

Software boxes - I grabbed them from Steve Portigal's site

Over the weekend I was reading Steve Portigal’s blog, where he posted an observation about software sold over the net titled Out of the box? There is no box. Really. Essentially the software that is going to be downloaded is advertised in a box when really there is no physical object. It’s an interesting exercise to consider the options to visualize something like this. Either show an object people are familiar with like a box (kind of like the shopping cart icon for online purchases), or try to create something new to show the software. I’ve seen cd’s used in the past to designate software too.

With people starting to talk about the new Creative Suite coming from Adobe, I wonder if this will be one of the last major software upgrades that comes in a physical box with a cd’s? Will the next substantial upgrade after that be a simple download – or will people still feel more comfortable having a physical item. Or maybe the software isn’t even on your computer – you log in and their servers do the computer thinking. Now that would be interesting to show visually.

Yahoo Top Searches of 2006 Could Be More Helpful

Top Searches of 2006 Interactive

When it comes to the end of the year it seems like everyone has a list for something. Top music, top stories, top whatever – and Yahoo is no different. As of late Yahoo has been taken some negative press as being number two in the search engine race and then there’s the news that MySpace beat Yahoo in page views… Well how they documented their top search results doesn’t exactly finish first in my rank either. When you first start off at you’re introduced to a video clip. I was expecting something more than a person telling me what I’m about the click, it was a complete waste of time pressing play. If you weren’t totally turned off and was still interested in their top search data and chose to click “check it out”, you were thrown into this screen above. The floating balls really didn’t have any relation to their size and there’s a lot of mini balls that don’t do anything. On the right hand column, if you roll over one of the names, the images above scroll sideways. While in theory this should be kind of cool, I think the images are too far above the button that is being clicked and your eye has to move to far to make any meaningful experience. There’s other things that aren’t that great about it, but I’ll let you find them yourself.

Top Searches of 2006

And then there’s the big list. Again the way things are designed it’s not helping refelct the information as much as just showing the lists in contrasting tables. There’s the relation of a top ten, but we don’t know how much more American Idol beat Lost for example. A simple percentage reflected in colour or scale would have been a good start, heck even a graph would have helped. The whole idea feels like it was rushed, especially when compared with the 2006 Year-End Google Zeitgeist.

One Laptop Per Child Interface

One Laptop Per Child Interface

Sure, everyone is talking about the $100 laptop. But what exactly does it look like on the inside and what is it exactly going to do? Well there’s some hints from the Pentagram blog where you can read all about the spatial navigation metaphor. Lisa Strausfeld, Christian Marc Schmidt and Takaaki Okada are given credit on the design. You can read their explanation of the interface at New Work: One Laptop Per Child.

As for the actual idea of a laptop that is accessible to any child to own, I go back and fourth. First I thought it was a great idea, then I questioned why people would put faith in a laptop to bring everyone to an acceptable entry point for education, and now I wonder how I take for granted that I have internet access (and a laptop) and wonder where I would be if I didn’t have it. So maybe it is a good idea, though then the second level of questions is to see if the navigation of the laptop makes sense, and does it have enough flexibility that people can make their own interface if wanted….

UPDATE: kottke mentions a wiki that has more info at OLPC Human Interface Guidelines

iPod Patent

I’m trying to not make it a habit of posting something on apple every couple days, but… Above is an image that I’m assuming is part of the patent process for apple. If it’s real, the next iPod could be pretty interesting. It also changes the interface game with new possibilites. Scrolling menues could change a lot. See more of these images at

and here’s some pretty cool video examples

Blog Widget by LinkWithin