//
I just got my 2009 yearly uptime report for this website. It was offline for a total of 6 minutes and 3 seconds, which is better than 99.99% uptime! Thanks Verve Hosting — this is why I’ve been with you since 2001 without a thought of swapping to another provider.
If you’re not monitoring your site’s uptime, I use Host Tracker, which monitors up to two URLs for free.
It’s a good time for companies looking to do usability testing cheaply. The range of quality web-based usability-related tools is steadily increasing — to the extent that it’s getting hard to know what to pick.
Fortunately, for anyone wanting to learn more about what services would best meet their needs, User Effect has put together a great guide to low cost usability tools. Well worth checking out.
Optimal Workshop is offering to send free, “Jacob Nielsen approved” usability buttons to anywhere in the world.
What better way to enhance the geek cred of that usability specialist in your life? I especially like the “What Would Jacob Do?” button.
Get yours by filling out this order form before they run out.
TechCrunch home page as viewed in Notable
TechCrunch is the most recent recipient of a home page critique by Zurb, using Notable, their visual feedback tool for design teams.
Zurb have also reviewed the home page designs of other popular sites, such as Twitter and CNN.
While some of the feedback about the TechCrunch design feels somewhat subjective (view TechCrunch’s own post on the subject), I do agree with their feedback on the footer, that a different design would likely increase engagement.
In fact I posted my own redesign of the TechCrunch footer a while back. It will be interesting to see if something like this ever gets adopted.
Notable itself looks like it might be a useful tool if it is intuitive for non-technical people to use.
I know it is aimed at design teams, but I would find it really helpful for gathering feedback from other stakeholders (e.g. marketing) who are not always the best at giving their feedback in a clear and detailed manner.
I do like the options Notable provides to review code and copy as well as the visual design of the page. That’s something you don’t see often. The history/tracking features of the tool look handy too. Fine, sign me up for the free version.
The kind folks at Overnight Prints — purveyors of fine printed products such as business cards, postcards, greetings card and flyers — are offering one lucky reader of my blog 500 free business cards (free shipping included too).
Simply leave a comment on this post as to why you’d like the business cards. The winner will be drawn at random from the comments and notified by email (so use a real email address).
The deadline is 11:59pm CST Tuesday, 24 November.
UPDATE: Congratulations to Anita P who is the randomly chosen winner!
Last year I wrote about 12 essential web site building blocks — things that you should check when you take on responsibility for a new web site, or even just launch one.
Well, this year I’ve come up with a few more, mostly as a reminder to me for the next site that I’ll be running.
If you’re going to show the impact you’ve made on your organization’s web sites, you’ll need a point of comparison to start from.
You want to be able to show how things were before you started making improvements. So take screenshots of your site, as many as you can. Also take screens of how your site ranks in search engines for branded and non-branded keywords.
If you’re a coder, take screenshots of your site’s source code. In six months time you can show how much cleaner you’ve made it. Take screens of how well your pages validate, how accessible they are, etc. Run a page load speed test and take screens of the results.
Run some quick ‘guerrilla’ usability tests of your site with friends and family or other employees. Video the results. Not only will this help to establish a baseline of usability for your site, but it will help you to become more familiar with it and identify some usability-related quick wins.
Set up some goals and conversion funnels in your analytics tool — easy to do if you’re using Google Analytics. Make sure your website up-time is being monitored by using a tool such as Montastic.
Start tracking how your site ranks on search engines. Set up your site in Digital Point’s free search engine keyword rank tracking tool so that you can see how your site is performing over time.
Establish yourself as someone who gets things done and start making an impact by getting some easy fixes under your belt.
Set up a quick A/B test on a popular page (not necessarily your home page; find one that’s easier to make changes to) and share the results internally. Stakeholders love data-driven decision making.
Some highly-trafficked web pages are all too often viewed from a purely functional standpoint. Try adding a promotional area to your account log in page or site map. Or how about adding some calls-to-action on your newsletter sign up confirmation page?
How useful is your footer? Does it contain links to your social media URLs and other important destinations?
Review the automated emails that are sent out when someone signs up for an account, forgets their password, etc. Can they be made more useful and/or user-friendly? Chances are they haven’t been looked at in a while and could do with an update.
You need to become intimately familiar with all aspects of your site as soon as possible.
Click through most, if not all, the pages on your site(s). Become familiar with what’s out there and any navigational and IA issues. Sign up for your site’s email newsletter using an account from each of the main email providers.
Speak with team members and stakeholders to learn the history of your web site and the reasons for certain design decisions.
Review the most popular landing pages on your site, especially the ones with the highest bounce rate. Are there any obvious quick fixes that can be made?
Read through the content on these pages — chances are there are readability improvements to be had, if not grammatical and typographical errors to be fixed.
The more organized and structured you can be from the get-go, the better.
Set up a general web team email address and use this for creating accounts with any online tools and services. Start encouraging internal employees to use this address for web requests and inquiries. Add it to your email signature.
Start keeping a record of everything that you do. This makes it much easier at annual review time. A good way to ensure you do this is to send a weekly update of your accomplishments for that week and goals for the next to your supervisor. They’ll love this.
I enjoyed this conversion rate analysis by Dustin Curtis on the link he places at the bottom of his articles to his Twitter account.
It’s fascinating to see the results of this sort of A/B testing, especially when the results can be so dramatic.
Most of the time when you’re running a website you’re focused on the larger things — adding new content and features, increasing usability, improving page speed, etc. So little time is spent on the details, such as how a link should be written.
However, it’s clear that this is an area where you can receive the most return on your time invested. Setting up a test using Google’s Website Optimizer or just adding some campaign tracking tags to the link URL is quite easy to do with a little practice.
One particular bone of contention for me has always been promos or ads where the call-to-action (CTA) link reads “Learn more” or “Read more.” It’s so weak; almost anything would be better than this.
So much time is typically spent making the banner look visually appealing compared with the content that is driving people to click through.
This issue of weak CTAs often arises for two reasons:
One solution to this is to write a web style guide that specifically explains how content should be optimized for web presentation (headings, links, lists, etc).
It’s not hard to do and has the added advantage of creating a common understanding of how content — which can often be so subjective — should be written for the web within an organization.
[via Gerry McGovern]
If it’s been a little quiet around here lately, it’s because I’ve been busy with, among other things, launching a new website for Mytheon, the next game from True Games Interactive.
A few months back we launched a teaser website to kick-off marketing for the game.
Old Mytheon teaser website (click to view larger)
It certainly helped to get the buzz going, but it was never planned to have a long lifespan. And so now it’s been replaced by a full-featured marketing and community site, powered by Drupal.
New Mytheon website (click to view larger)
As project lead, my responsibilities included strategy, IA, wireframes, art direction, writing content, you name it. At least the project management side of things was made a little easier thanks to Basecamp. It really was an invaluable tool.
Initially, I tried out a number of site layouts, especially for the home page. However, after not really finding anything that was especially compelling, I decided to go with a traditional layout that players of MMOGs would be familiar with.
Instead, because the game is so full of lore and mythology, I opted to focus more on the content than just the visuals. In Mytheon players take part in a war between mankind and the gods. It draws upon various mythologies, starting with Ancient Greece, which makes it a gold mine from a content perspective.
Although, with hundreds of Power Stones (many more to come) for players to use in the game, each of which we intended to have its own page of background and description, there were times where I was concerned that we were biting off very much more than we could chew.
The mythological setting is also why we decided to use Poseidon as our signature character, as he is one of the more recognizable Greek gods.
Because of the great visuals in the game, we also used lots of screenshots for banners and spot art. Many a late night was spent taking those, although it has been interesting to watch the game progress and become increasingly polished with each build.
Another important component of an online game website is the forums.
Mytheon forums (click to view larger)
I’ve always been really happy with how our forums turned out. Working with forum software is never the easiest, and I was pleased that we were able to give ours a pretty custom look.
The design for ours is based on the teaser site, but I think it still it ties in pretty well with the new site. It will probably be a candidate for a visual refresh in the months to come though.
You can see more examples of great forum design in my forums showcase.
I recently came across a collection of website navigation bars from a few years ago. I couldn’t help but wonder how those navbars looked today, and how the impact of site growth, redesigns, branding updates, etc. have affected them.
Here’s a comparison of the old versus the new (click on an image to view a larger version).
Old Navy: then
Old Navy: now
Shopping.com: then
Shopping.com: now
Adobe: then
Adobe: now
Weather Channel: then
Weather Channel: now
REI: then
REI: now
Amazon: then
Amazon: now
Apple: then
Apple: now
Google: then
Google: now
Netflix: then
Netflix: now
Expedia: then
Expedia: now
Walmart: then
Walmart: now
Pogo: then
Pogo: now
All Recipes: then
All Recipes: now
Bank of America: then
Bank of America: now (it hasn’t changed!)
Buy.com: then
Buy.com: now
Not too long ago, Mint, a popular online service for managing your finances, redesigned a great feature which enables you to set a monthly budget and track your progress against it.
My wife, who is the main Mint user in our household has been struggling with it ever since.
One of the main issues is that the redesign of the budgeting page (for some reason they call it ‘Planning’ which makes no sense to me) is now much longer. Consequently, it now requires much more scrolling up and down the page in order to get an complete picture of your current budget status.
A comment in the support forums echoes this view:
The budget section is nice but takes up too much space – make this smaller so that it is more usable and concise – the old view was much better.
Sample from the Mint budgeting page: before
However, with a few CSS tweaks, I was able to reduce the length of our budget screen by 20%. In the example below, you can see that 6 budget items are now visible in the same space that could previously only fit 5.
Sample from the Mint budgeting page: after
I also took the opportunity to make some of the very light gray text darker in order to make it easier to read. Mint is a great tool for managing your finances, but I do feel that they have a way to go on its usability in certain areas.
If you look up you’ll notice I made a small update to the way dates are presented in my headings. It’s not a big change, but I wanted to include the year without increasing the height of the date stamp.
Rotating text to the rescue! Following Jonathan Snook’s article it was easy to implement the few lines of CSS necessary to make this adjustment.
Getting it to look right in IE7 and IE8 was a different matter. In the end I used the *:first-child+html hack for IE7 and the \9 hack for IE 8.
I realize that I should replace these hacks with conditional comments (should I?), but for now they’ll suffice. Also, with a little more research it looks like this IE7/8 hack would have been more elegant.