Little Red Riding Hood - animated infographic style

Slagsmålsklubben


Source: flowingdata.com

Microsoft's Vision of 2019

<br/><a href="http://video.msn.com/video.aspx?vid=a517b260-bb6b-48b9-87ac-8e2743a28ec5" target="_new" title="Future Vision Montage">Video: Future Vision Montage</a>

Microsoft Re-Designs the IPod Packaging

Bad Design

Two good websites that talk about bad design:

Bad Human Factors Design: http://www.baddesigns.com/


Interface Hall of Shame: http://homepage.mac.com/bradster/iarchitect/shame.htm

Dissolution of Social Networks

Andreas Kluth (San Francisco correspondent for The Economist) talking about real and virtual campfires, and predicts the dissolution of standalone social networks (such as FaceBook and MySpace) as we know them.

Anyone interested in the next generation of internet technology really needs to listen to this podcast. Its clear, concise and really gets at the heart of many social graph issues and human behavior.

Free FLV (Flash Video) Player

Flash Video is by far the best way to deliver video on the web. Every online video sharing site (YouTube, Google Video, etc) use flash video. For smaller websites, flash video supports on-demand streaming without a video streaming server.
The problem previously was that all flash video players previously were commercial offerings (or required that you purchase Adobe Flash Pro).

Luckily a dutch guy - Jeroen Wijering - has now created an Open Source alternative. From his website:

The player allows you to show your videos more controlled and to a broader audience than with Quicktime, Windows Media or Real Media. It supports playback of a single Flash video file, RTMP streams or RSS, XSPF and ATOM playlists (with advertisement possibilities), a wide range of flashvars (settings) for tweaking both behavior and appearance and an extensive, documented javascript/actionscript API

Check it out here!

OpenSource real-time trip-routing

Hi All:

For any of you that have played with the real-time trip-routing in Google Maps, there is now an OpenSource version available.

A demonstration is available here: http://boston.freemap.in/routing.html

This system utilizes the following parts:

1. UMN MapServer for WMS based map image generation;
2. TileCache for tiled WMS generation and caching;
3. PostGIS for data storage;
4. pgRouting for postGIS based route finding;
5. OpenLayers for the javascript based map viewer

The demonstration is a little bit clunky compared to Google’s (probably all because of server speed), but shows the power of what OpenSource can do!

Meat Hair

Yikes! What artists will do... Meat-hair-art. Yes, the artist is German.

Disregard the fold

Here is an interesting web design article about how designing websites with “the fold” in mind is antiquated.

The author is from AOL where she is the Director of User Interface Design and Information Architecture.

The key point of the article is: “stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end. … The biggest lesson to be learned here is that if you use visual cues (such as cut-off images and text) and compelling content, users will scroll to see all of it.”

New domain name - www.suwala.ca

For anyone part of the Suwala clan, I have registered www.suwala.ca - which points to exactly the same place as www.suwala.com (Gillian & Jason's photos).

Look for a newly re-designed www.suwala.com/suwala.ca very soon!

One BAD Website

For those that love to hurt themselves, and look at REALLY BAD WEBSITE Designs, Schooley Mitchell Telecom Consulting's website is shockingly bad.

Look at their website, and try to keep a straight face!

(Yes this picture is taken directly from their site!)

3D mouse

If anyone wants to purchase me a "Geek Tool", you could buy me one of these cool a 3D mice.

This mouse is integrated with Google Earth, and allows you to seamlessly pan and zoom around the world. Check out this video demonstration of the output:

Tech Support in the Middle Ages

Apple's next products

Check out this contest where people have used photoshop to design Apple Inc's next products.

Architecture in St. Petersburg

The Russian oil company Gazprom is planning on moving its headquarters from Moscow to St. Petersburg. To show just how fantastic the company is, they have solicited world-renown architects to design "Gazprom City".

Check out the slideshow of the designs here, or the story here.

The Problem with "folders" on Websites

Over my course of developing a bunch of websites, I think that there is a fundamental problem with website development. And that problem is to do with folders.

In a nutshell, people do not understand folders, and website developers do not understand how to display information based on the folder structure.

Web-Server developers have grappled with the question of "how do I display a folder"? Apache uses standard icons to display the contents of a folder, and has decreed that a standard file (usually called "index.html") would be displayed if a user tried to display a folder, rather than displaying another specific file within that folder. This made sense because the index file was only supposed to show an index of all the other pages and sub-folders in the requested folder.

However, things started to get complicated once the usage of websites started to pick-up. Quickly the structure of websites became close-to-useless to users. Users started to say "I don't care where it is, as long as I can click on something and find it easily". This has meant that pages (not folders) with useful content must be created.

Things have continued to get even more complicated as companies have added their own twist of the age-old folders and pages paradigm. For example, Microsoft uses the terms "Channnels" and "Postings" for its Content Management Server system. (the other thing that I find totally frustrating with Microsoft Content Management Server is that Pages (erch - make that "Postings") have a "Name" and a "Display Name". To a non-techy user - how would you differentiate between a "Name" and a "Display Name"?!! How about using "File Name" and "Title"?!! (that's actually what 'name' and 'display name' mean)) Plus the filename of "index.htm" seemed too simple to those at Microsoft, who decided to call these index pages "default.htm" - further muddying the waters.

All problems with Folders and index/default pages come to a crunch when you have to display a navigation scheme for your website. Basically, you have to choose if you will display a) only folders, b) only pages or c) some mixture of folders and pages. Most of the sites that I have been involved with have picked option A (display only folders) because that is the easiest thing to do. However, I believe that from a users perspective (that doesn't care about the whole folders & pages thing), it's the pages that actually have the information, so that's what should be displayed.

What most people don't realize, is that creating a folder is really a two step process. Step 1 is to create the folder while Step 2 is to create the index.htm or default.htm page. The follow-through to this is that any time a new, non index page, is created, you have to update the index page because new information has been added to that folder. This 2 step process is lost on basically all of the website content people that I have ever dealt with.

I figure that the solution to the folders problem is to do away with folders completely. The solution is to design around Pages and Sub-Pages. This gets away from any of the "2 Step" systems, and makes displaying navigation systems very easy.

BC Ferries' (un-usable) Schedule System

I have wondered for some time why the BC Ferries website makes sailing schedules so hard to figure out.

Let me step you through my "thought bubbles" as I traverse through the BC Ferries website trying to figure out what ferry I can catch to go from my place in Port Moody to my parents place in Victoria this evening.

Step 1: I go to www.bcferries.com . Scanning through the home page, I see some pretty pictures, and see "schedules" right in the middle of my screen. Easy enough. I click on "schedules".

Step 2: This is where things get rough. I scan through the page, and see items like "Wireless/Handheld", "Mainland-Vancouver Island", "Southern Gulf", "Northern Gulf", "Inside Passage", "Discovery Coast", and "Maps". Now I don't know where I really fit in here. All I want to do is go from my place in Port Moody to my parent's place in Victoria. Do I see "Vancouver" anywhere? Or even "Victoria"? Unfortunately not. After reading through this page very carefully, I decide to click on "Mainland-Vancouver Island-Sunshine Coast", although I don't want to go anywhere close to the Sunshine Coast, and I don't want to go to Port Hardy either.

Step 3: I scan through the next page, and quickly focus on the map at the bottom of the page. I see a lovely blue-dotted line connecting Vancouver and Victoria. That looks right. So I try to click on the blue line I want to take. Unfortunately this does nothing. Dejected, I scan to the top of the page, and see "(Vancouver - Victoria)" - that looks promising. So I click on that. This link actually works.

Step 4: On the next page I quickly see the words "** Click on date below to view Schedule **". "Wonderful" I think to myself - I'm finally getting to the schedule part of all this. So I scan the list underneath. I see the items "September 12, 2005 - October 11, 2005" and "October 12, 2005 - December 14, 2005", and a big-long list underneath that. I think to myself "oh dear - what day is today"? By looking at my desk calendar I ascertain that it is Sept. 16th. Then I go through the list again. "Does September 16 fit between September 12 and October 11?" Yes - it does. So I click on that.

Step 5: Up comes a brand-new window, and I see that the page is organized into two main columns, "Leave Tsawwassen" and "Leave Swartz Bay". On the previous page, on the map I tried to click on, I remember seeing that I had to go through Tsawwassen to catch the ferry to Victoria. I guess that Swartz Bay is on the other side of the water from Tsawwassen. Scanning down the "Leaving Tsawwassen" column, I see that there is an hourly break-down. Great - I want to take the ferry this evening after work. I get off work at 5:00, so I'll look after 5:00. Looking down from 5:00, I bump into the line that says "6:00 pm: F, Su & Sept 15, 22, 29, Oct 6, 10 only". I think to myself "what does 'F' stand for? I guess it stands for Friday - I see 'Su' - that probably means Sunday " and "Sept. 15 was yesterday - and it was Thursday yesterday, not Friday or Sunday, so is there a 6:00 sailing?" and "Hmmm… Today is September 16th, and is a Friday - I have no idea if there is really a 6:00 sailing". And my final thought is "It looks like there's a 7:00pm sailing - I'll try to show up before 6:00 to see if I can get onto the 6, if there is one, but 7:00 should be fine"

My conclusions based on these message balloons:
a) Use place-names that the general public would know, yet are very descriptive. Good choices include "Vancouver (Tsawassen)", "Vancouver (Horseshoe Bay)", and "Victoria (Swartz Bay".

b) Display a graphical calendar with the default day set to today

c) Make any images conveying information clickable

d) Follow industry standards for displaying schedules. Good examples of sites that allow you to see schedules easily include aircanada.ca and expedia.ca. A good example of a ferry system's website is Harbour Lynx and New Zealand's InterIslander.

e) In general, the BC Ferries schedule system makes people contort their minds to their view of the world, rather than vice-versa. Why do I have to know the name of the terminal that BC Ferries goes through? Why do I have to figure out if the day that I'm travelling fits into their schedule?

My strong suggestion for those people at BC Ferries is to buy the book "Don't Make Me Think" by Steve Krug. It's cheap - $35 at Chapters - following the recommendations in this book will make BC Ferries' website visitors much, much happier.

How to make a progressive download Flash Video file From a DVD

I have created several flash videos using a DVD as a source, which use progressive downloading not streaming) for viewing. Flash video is great because basically everyone has the flash viewer, and because no special server is needed for progressive downloading. Here are the 3 steps I took to create these online videos.

1. The original video file was copied off of a DVD and trans-coded to an MPEG video file. I used a program called "DVD2SVCD" to do this. I tried all sorts of other programs, but DVD2SVCD was the only one that ended up working, and didn't cost any money (even VirtualDubMod did not work). This was one of the longest parts because the transcoding is not straight-forward (DVD2SVCD has 14 tabs of options to fiddle with). (side comment: If you have a WMV file, I have used Stoik Video Converter to create an AVI file that Riva FLV Encoder can use. All other converters seem to barf at various WMV files.)

2. With the MPEG file created at a fairly high quality, I used the "Riva FLV Encoder" to convert the MPEG file into a FLV file (I chose Riva because their FLV encoder is free). Configuring Riva FLV encoder tkes a fair amount of time trying to play with resolution, framerate, bitrate, and audio settings. In the end, I used 320 x 240 as the resolution with mono 11K audio, but I can't remember any of the other settings.

3. With the FLV file at a decent size, I went home and opened up Flash MX 2004. I have Flash MX at work, but that version is too old and doesn't contain the all-important MediaPlayback Component. In Flash MX 2004, all you do is drop a MediaPlayback Component onto the stage, and point that component to the FLV file. Make sure the "Control Visibility" is set to "on" so that people can have their "pause" button available. With that component configured, publish the HTML and SWF file and voila - you have your progressive download video file that can be viewed by anyone with flash installed! (this step is well documented by macromedia - just skip the section about exporting your video using the FLV exporter.)

See how your site looks in other browsers

A cool new utility has been created that allows you to see how your site looks in other browsers, without installing those browsers yourself. The only problem is that their public (non-pay) queue is pretty long, and you have to wait for a couple of weeks for your site to be visited. However, they will send you an email once your screenshots have be created which allows you to submit and forget!

Click here to see how www.cityofportmoody.com looks in a bunch of different browsers!

Smart Choices

Looks like Smart Choices has redesigned their website. Unfortunately it doesn't look very good in Firefox (it works fine in IE).

Smart Choices will be having their AGM tomorrow at the Innovation Centre which I will be attending.