Check out the new Olympic medals for the Vancouver 2010 Olympic games:

http://www.cbc.ca/sports/story/2009/10/15/bc-vancouver-olympic-medal-design.html

Some amazing new designs.  They played with many aspects – including shape (squarish), depth contour (wavy), and design (abstract).

Very cool.

Bruce

I was intruiged by a recent post by Jeremiah at the Web-Strategist.com about how the search box in a browser is circumventing the address field. I read this after sitting with a client today and discussing their mamoth 3.2 million page website. Third client actually, the first one had 100,000 pages, and second one has about 1,000 pages. How do you organize all that content?!

So here is an idea i’ve been toying with for a while. A colleague at Jufa Intermedia and I drew it out on a whiteboard over lunch one day. Should we develop it?

The idea is developing a CMS that treats pages as stand-alone pieces of micro-content. Here is the gambit: the navigation structure is dynamically created, and the pages are easy to find using search tools. So you can both explore and/or search for specific elements. If you don’t know what you want but know the topic you explore, and if you do know exactly what you want you can narrow your search down rapidly. But wait, there’s more…

People don’t usually consume whole websites, they use parts of it at any given moment of need. Search boxes are the second most used navigation element within most sites, yet most site-specific search functions… well, frankly suck.

One of the biggest problems client’s have is
how they will structure their IA:

copy the organization’s operational structure

or

discover how the user consumes the information provided.

The answer is sort of obvious from an effective marketing stand-point – you design for the user. But it’s not that simple, because in larger organizations, the workflow of how content is published does not usually correspond to how the world consumes that information. So if you can’t create good content, then your “effective” user experience is for naught.

So instead of publishing to an area that you are responsible for maintaining, you simply publish for various categories (to seed the choice), you tag it and you tell it who your intended audience is from pre-loaded user-profiles. So you don’t publish to a part of the site, you publish to the TYPE of person you want to read the content.

The CMS will dynamically generate menus based on traffic patterns for each pre-determined user type.

It will guess at what a particular user is looking for based on what the user is looking at and how long they spend looking at it. That’s the first part. Second, is that each page must standalone. So you publish a page so it can be found using an onsite search engine. You can categorize and tag, as you may a blog entry. So instead of a site of pages linked together through a man-made and stagnant architecture, you effectively create a catalog of the content.

Imagine surfing a large site
(1,000+ pages) like you would looking for a book on Amazon.

You have recommendations based on previous experience, you have recommendations based on others experience, you have categories you can browse, and you have simple and advanced search functions for narrowing your results. If the content contains “web 2.0″ user-generated features such as comments, ratings, etc. then they can be integrated into the CMS as well, by helping rank search results, and offering new navigations methods.

So, any VC’s out there want to fund this project?

Bruce

Here is my second proposal that went in to speak at the Web 2.0 NY conference taking place in Sept-08.

———————————————————————————————————

Total Mash-Up Web Design and Development

There is no point in starting from scratch anymore. This talk will show you how to create a web architecture for your organization that takes advantage of world-class applications. Mash and grind up together the best the web has to offer to create an enterprise class web presence so you can spend your budget on content and marketing instead of re-creating the wheel.

These websites:

• Are fully scalable; they will grow as your organization’s needs do.
• Are easy to administer – they are designed to be user friendly.
• Allow you total flexibility over design, layout, look and feel.
• Are Search engine friendly.
• Are primed for all sorts of marketing tactics.
• Can be constructed iteratively; get pieces up as you need them.
• Are cost-effective to build and design.
• And much much more!

Your project can range from a simple small business web page to major corporate rollouts supporting client log-in support, customer service ticketing systems, e-commerce, fund-raising, and many other applications.

Stretch your budget and impress your stakeholders – come and learn how to mash and grind at Web 2.0!

So I recently returned from a vacation near Cancun, Mexico. First let me say, that a week off sucks. “Wow Bruce you’re finally starting to relax!” – that was quoted to me on the day before we left! Ack. You need a week to unwind and at least another week to start recovery. Anyway… just a little life lesson, do with it what you want.

Let me tell you , i was shocked, SHOCKED!, at the cost of food. On an enclosed resort with no competition, they can charge whatever they want. So I forked out $20/meal on average. Good food, fine, I can take it. But then I went into town. It was the same damn thing. Seriously, I paid more for a cab ride in Cancun, Mexico than I did in Manhattan. Nonetheless, how can food and service be the same cost? $75 for a 60 minute massage. $6 for a mojito. Come on..

Then I walked one block up from the beach. Massage, $33 for 60 minutes, mojito $4, meals $10.

2 blocks up, massage $10, mojito $2, and meals $4-5.

I didn’t venture further away…

But this is what the cost of pretty much anything in Mexico looks like:

Essentially the further you are from the beach, it’s an exponential decay in cost. Things get cheap fast the further you are from the beach. From food, drink and service to real estate.

So how does this relate to web usability?

Well let’s take the same graph, but this time, let’s replace the horizontal scale to the # of clicks it takes to pull your prospect into your funnel and close them on whatever it is you ar trying to get them to do (buy, sign-up, click an ad, etc).

So the further you engage your prospect from your home or landing page, the less likely you are to close that individual.

Lesson?

Get them intruiged fast.

Answer their questions faster.

Get them into your sales/action funnel ASAP.

The longer you let them drift on your site, the less likely you get the results you want.

Questions? Drop me a line.

Bruce

Ok, I’m pitching another website redesign project, and this is my favorite client so far – why? – They are paying us to pitch them a new design. This does not happen very often… believe me!

The client sent a list of sites in and around their field – ie. similar institutions, organizations, etc. with similar setups, mandates and/or subject matter. It’s interesting when you look at 10 sites in a row within a peer group. Most of the sites were heavy in content – lots and lots to of useful, practical, necessary information. They are partially marketing sites, partially to provide information and resources, and partially to inspire action.

Fundamentally all these sites looked different – style, look and feel, etc. But they all had one thing in common, they broke rule #1 of building site navigation… CONSISTENCY!

Rule #1: Be consistent

Your navigation should be consistent from page to page, section to section. If you are using a horizontal and left vertical menu system, for the love of all that is reasonable in this world, STICK WITH IT. Don’t change it half way to no left nav, or introduce a right one now and again, or change the buttons, order of the items, or what/how it appears there! Pick something, and EVERY PAGE MUST HAVE THE SAME STRUCTURE! You must build expectation for your users. Look left to see X, and look up to see Y. Don’t change it to A and B half way through the site. Stick to this rule and you are half way to great usability.

Rule #2: Maximum 3-click Policy

You should be able to get to any main detail on your website with a maximum 3-click policy. I try and do it in 2-clicks if the volume and diversity of data is low. What this means is that if i’m reading a news article on your site, i should be able to get to your Products and actually looking at a list of products within 2-clicks and a specific product in 1-click.

ex. 1st click I’m in the house, second click i’ve picked the room i want, third click i’m into the activity i was looking for. That activity may then have its own clicking structure (House –> Living Room –> TV (click away to channel surf!).

General guidelines for this:

Rule #2.1: 1st click
The 1st click gets you to a broad category, department, or target audience profile. On the 1st click i’m SKIMMING. That means I’m only looking for headers and links to find what i want.

Rule #2.2: 2nd click
On the 2nd click I’m starting to get specific. Here I am SCANNING content. Skimming is a glance, scanning is a systematic breakdown of the headers, subheaders and links. If i get into the bullets or 1st line of a paragraph of text you’re starting to lose me.

Rule #2.3: 3rd click
The third click I want details. I want to read, consume, absorb. I’m ready for the content! If i’m not reading by the 3rd click, you’re likely to lose me.

Rule #3: Navigation is overhead, keep it lean

I’m talking about bandwidth and screen space here. Navigation should account for 25-35% of screen space depending on the depth of content you have. In terms of bandwidth, keep it minimal, you want the menus to load FAST and FIRST. Avoid images if you can, use text, and keep banners and other decorative functions to a minimum –> unless these serve a purpose other than navigation.

Rule #4: Simple

There really aren’t that many navigation options. You don’t see cars developed with 10 different ways of arranging the dashboard. There are differences between each car and maker, but in general you can expect certain elements in certain locations to tell you specific things that you need to know to drive the car. You really don’t want to spend time trying to find your speedometer WHILE driving. Treat your website the same way. What are the archetypes of web nagivation?

• Horizontal top navigation, usually just below the banner. Elements may contain drop down lists, or pull up a second level horizontal nav. Do not go more than 2 horizontals navs. If you need a third layer, use drop downs instead. I don’t like drop downs, because you can’t see them. Once a user clicks on a menu item or a secondary menu item, you want to keep the options for that section displayed, which is why i prefer the secondary horizontal menu vs the pop-up list.
• Left navigation. This creates the uber popular, how websites started, L shape. Upside-down L shape that is. It’s been done and done and done, yes!.. for a good reason. It works. If you have a heavy content site, stick with simple.
• Right navigation. Blogs have made a right navigation system popular. Because today’s (and for last 3-4 years) the screen resolutions have been tending to wide formats, the side scroll is no longer a pressing issue. Depends on who your target audience is however. I recommend right navs only for a 3rd or 4th tier of information. Content page specific navigation where your content topic requires it to be broken down into multiple pages for easier consumption.
• Bottom navigation. I highly recommend a text-only bottom navigation which incorporates either ALL your navigation options, the most popular, or the top level navs. People tend to put Privacy Policies and other legal jargon there. But I recommend even having those sections appear in your main-navigation schema somewhere for completeness.

That’s it! Why re-invent the wheel? Horizontal on top + left vertical = main navigation. Right nav = in-content navigation. Bottom nav = repeat all as text only, most popular, and/or “extra info”.
Rule #5: You can play in your content area

If you want a place to play with high bandwidth, unique design, interesting layout, etc., then use your content area. This is what it’s there for. Don’t mess around with your navigation to make your page different – remember rule #1.

Ok, if you’ve read this far in this blog post, you are keen and want to develop a great navigation schema for your website. Good for you! Go out there, kick ass take names and let me know how it goes.

Bruce

ps. Here is a Bonus Tip: Use a Cookie Crumb Trail to let users know where they are when tunneling through your site.

pss. If you need help, drop me a line. Why DIY when you can get a pro to come in and get it done right!

A little case study for you today:

http://theclimateisrightfortrains.com/

I came across this URL on print recruitment campaign targeting university/college students in a magazine a client publishes.

First of all, the site is awesome. I love the design. Unique use of space.

The site takes great advantage of the widescreens. On my 1920×1200 22″ screen the site looks awesome. On my 1280×768 12″ laptop screen it looks great. It reduces well to < 1024 as well. Kudos and high marks for use of screen real estate at the same time as maximizing horizontal space on the new wide format.

Clicking on any one of the menu items brings up some beautiful photography and a little two line pitch. Nicely done. Great copy, pulls well, I was immediately intrigued.

So far so good!

But… here is where the site totally fails.

You click on the link to learn more and it takes you to a page of scrolling text.

First of all I’m not a big fan of internal scroll bars, but in an all Flash site that is well dimensioned, it can work. Second, the page is 2-3 pages of scrolling text. What the hell? I went from beautiful images of trains and a gorgeously designed website, to text. Honestly, you can write the most profound copy that would change my life forever, but no one will read it. You just set yourself up for failure.

But I read it. On my 4th visit to the site and just to write this blog entry, I read it. And you know what? The copy is fregging interesting. It’s snippets of articles and quotes that lead you to original sources flogging trains as green commuters. Great stuff – well it could be great stuff, except it’s badly used.

Honestly, how hard would it have been to put in some <Prev | Next> and made those pages into a slide show with a few lines of text, some great supporting photographs and actually PITCHED the information.

And here’s the clincher. Ok, here’s your scenarios “so I’m a student and I couldn’t care less about trains except to get my home on breaks. I’m an engineering student and i never thought of getting into trains, cause it was a dead technology.. I’m more interested in aerospace and Virgin’s new airline… or hybrid/hydrogen car technology, etc.”

Ok, so now you’ve convinced me trains can be cool and appeal to my youthful idealism…

Where’s your close Bombardier? Where is the “come work for us, cause we’re a great company, we’re green, we’ve been green for a long time cause we build trains. See – trains do rock, and green has been the colour of our blood, our ethos, and we want YOU to drive the next generation of mass transportation vehicles to make this world a better place…”.

You’ve hooked with this website, you’ve then just as completely fallen over. You have to close the loop.

I can totally ignore the buried copy, but seriously where is your close?? “I AM A STUDENT AND I WANT MORE INFORMATION ON WORKING FOR BOMBARDIER’S MASS TRANSIT DIVISION! Oh well. Time to check out the latest YouTube video and see if anyone posted anything new on my Super Wall…”

Lessons for everyone else:

• Great design – use it for inspiration
• Great use of horizontal screen real estate
• Nice use of photography and copy
• Internal scroll bars are ok in this scenario – but are too narrow
• Mouse scroll wheels don’t work on internal scroll bar, this is doable, do it!
• NO CLOSE! You have to close the loop. This is like an e-commerce site that has convinced you to buy but no BUY NOW button. Don’t make the same mistake, think through the whole loop – intrigue, entice, inspire, and CLOSE.

The climate might be right for trains, but it’s not for recruiting using this website. Too bad, it’s a beautiful design…

Just got back from the Web 2.0 Expo in San Francisco put on my CMP and O’Reilly Media. Great event, I learned a lot, provoked many more thoughts – in general I highly recommend it.

I do have one major gripe…

Very few presenters really brought their talks back to business fundamentals.

Mr Speaker: How do I use what you just talked about
to further my business goals (make money!)?

Nothing summarized this better then on the last day while attending a talk about how Web 2.0 ideas such as blogging, video and pod casting, user generated content, and other such attributes can be used in the SMB market. How do you, as a small business owner, actually USE this stuff yourself?

About half way through someone finally asked that “So, how do I use this for my business!?”

The loudest applause I had heard yet… FOR THE QUESTION!

And to my great and utter disappointment, it was not answered. Don’t get me wrong, the guys on the panel new their stuff, they were passionate, they GOT IT. But they couldn’t make it concrete. They couldn’t bring it back from esoteric philosophy to physical representation that a business owner could understand, and more importantly, APPLY.

To some extent this was true for almost all the talks.

So now that I’m done bitching, I’m going to do something about it. My next few posts are going to be best-of summaries of the ideas I learned and how to apply them for SMBs and the enterprise.

Stay tuned.

“The main problem with your web site is that it’s ego-centric.”

Yeah. I said this to a prospective client last week. They were asking for a quote on making some extensive modifications to their site; ex. they wanted to change “Services” to “Our Services” – that was just the tip of the iceberg… it got a lot worse.

So I went through their requests to get a quote together. Actually all I had to do was read the home page and it set the expectation. The home page was all about them. This is who we are. We do this, we do that, we’re so great, as Elaine would say, yada yada.

I shouldn’t have been surprised though, they weren’t marketers, probably genius scientists, but not marketers. It’s really no fault of theirs, most websites are ego-centric.

Most websites are built to celebrate a company’s own grand illusion of themselves. I know I know, you’re going to say “well we have to sell ourselves.” Yes. Of course, BUT…

Read the rest of this entry »

I’m writing a proposal for a client. The main focus of the RFP (request for proposal) they issued was on the Content Management System. “Tell us about yours, tell us the features” the RFP said. I decided not to sell them a one legged chair, and focus my proposal on refocusing their perspective. Will it work? It’s a gamble, but it’s in their best interest. That’s the only way I go.

The Internet is a communication medium. It is not about technology. It is about communicating a message. Design, branding and getting your messages across are the critical elements. Everything else is made to support this.

Your website is about making a great first impression. It is about engaging prospects. It is about finding relevant information fast. It is about being a useful and current resource.

Your site has to sell what it has to offer – a promise of a future to a prospective student, a career for a new employee, an irresistible benefit to a service buyer, an excited then satisfied look when opening the delivered package, inspire donations, a source of knowledge to seekers of truth, and so on. Whoever your target audience is and whatever it is you offer then – you must convince them that you’re the one to provide it.

All other attributes of the Web site support these objectives. Code is infrastructure; a Content Management System (CMS) is code. It is a foundational piece, but a great foundation is just a very nice hole in the ground.

Design creates the visual appeal and first impression of the site.

Content is the substance which invites and satisfies curiosity.

And finally navigation is the rich user experience; make it obvious and thus enjoyable.

All pieces taken together create a great website.

An interesting brief on Jaguar’s (yes the car company) web site. Just more proof that great photography makes a great site.

http://www.keycast.com/keycast/jaguar/jaguardesign/#