172. Hand Drawn

Paul Boag

On this week’s show: Paul looks at the seven wonders of wireframing and Anna reviews the new micro CMS Perch.

Download this show.

Launch our podcast player


10 Tools to Improve Your Site’s Usability on a Low Budget

As we have said many times before on this show testing the usability of your site is one of the smartest things you can do. Usability involves making a website’s interface easier to use and simpler to understand, so that the user’s experience is as intuitive as possible.

However, many website owners do not carry out user testing because they perceive it as expensive and time consuming. When they think of user testing they imagine usability labs with two way mirrors, video cameras and expert facilitators.

Of course if you have listened to this show for any length of time, you will know it does not need to be that way. In a post entitled 10 Tools to Improve Your Site’s Usability on a Low Budget the Web Designers Depot outlines some of the ways you can keep costs and effort to a minimum.

The list of tools includes Silverback, Clicktales and Google Website Optimizer, all of which we have mentioned on the show before. However, it also includes several I have never heard of including: Chalkmark, Userfly and Feedback Army.

For the complete list and a review of each tool see the article.

Outlook 2010 and HTML email

The big story of the week is the campaign to fix Outlook 2010. This has come about because Microsoft plan to continue using the Word rendering engine to display HTML emails in the next version of Outlook.

This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more.
Unsurprisingly this has caused a passionate response from the web design community with literally thousands of blog posts and tweets expressing outrage.  For me Zeldman sums it up best in his post Sour Outlook

It’s outrageous that the CSS standard created in 1996 is not properly supported in Outlook 2010.

It’s difficult to believe that in 2009, after diligently improving standards support in IE7 and now IE8, Microsoft would force email designers to use nonsemantic table layout techniques that fractured the web, squandered bandwidth, and made a joke of accessibility back in the 1990s.

Unfortunately it is looking unlikely that Microsoft are going to change their minds. In response to the outcry Microsoft released a statement saying…

We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around, with rich tools that our Word customers have enjoyed for over 25 years.

However, the most amusing line in their statement reads…

Word has always done a great job of displaying the HTML which is commonly found in e-mails around the world.

I try and to objective when I share the news on this show but honestly, what a joke! For me Ben Ward sums up my response to this statement from Microsoft when he writes…

I’ve tried to write different responses to this sentence. Different witty re-workings run through my head, and some of them are quite good. Yet, every time I touch the keys, all I can write is “F*** you”.

Visual decision making

I have a strange job. It is a mixture of sales, marketing and user experience design. I often find it hard to reconcile what appears to be on the surface very different roles. However, I have come to understand that there is a common thread that runs through all three… psychology.

Whether I am designing a user interface or pitching to a potential client, I am essentially doing the same thing. I am trying to anticipate the persons needs and nudge them in a certain direction.

Understanding the way the human mind works is invaluable when running or designing a successful website. Whether it is understanding how users make judgments about your site or how to influence their decision making, psychology is an important component.

In this issue of A List Apart, a post entitled ‘Visual Decision Making’ delves into the mind of users. In particular it focuses on a users ability to draw conclusions about a site in less than 1/2oth of a second. It is also a rebuttal of Jakob Nielsen’s assertion that graphics have little influence on users.

The author presents a well constructed argument that draws upon a number of excellent sources including Malcolm Gladwell’s book Blink. I would therefore strongly recommend reading this article if you are involved in user experience design or just wish to better understand your users.

An introduction to RDFa

Back in show 166 I mentioned that Google was starting to include Microformats and RDFa in their search results. This provides users with richer results that include reviews, contact details, and more. For website owners it provides the ability to stand out in the search results and the opportunity to give users additional information that may encourage them to click through.

Although Google is only displaying this extra information for a small number of sites, this will change and so we need to be ready. Now is the time to start integrating Microformats and RDFa into your site.

We have talked a lot about Microformats before, but have yet to touch on RDFa. I have to confess this is mainly because of my own ignorance on the subject.

Fortunately another post on A List Apart has come to my aid. ‘An introduction to RDFa‘ explains what RDFa is and gives examples of how it can be used on your site. At the most basic level (and I mean basic) RDFa is a framework of meta data created by the W3C. Much like Microformats, the aim is to allow computers to better understand c0ntent that has been written with humans and not machines in mind.

Like Microformats, the implementation of RDFa seems very straightforward. There is nothing stoping you from getting started. What is more, this looks like the first of a series of posts on A List Apart that will take you step by step through the process.

Back to top

Feature: 7 wonders of wireframes

This week we explore how quick, hand drawn wireframes can provide substantial benefits that save time and money.

Read the 7 wonders of wireframes

Back to top

Review: Anna Debenham reviews Perch

Hi, I’m Anna, and I’m going to tell you a bit about a new micro CMS I’ve been trying out called Perch by edgeofmyseat.com

If you’re looking for a powerful CMS with lots of features that writes your blog posts, walks your dog and does the dishes for you, this probably isn’t for you.  But if you ever build static sites where it’s hardly worth plugging a CMS into at all, but you still want to give the client the option to edit the content themselves, or maybe you’re a designer who just wants to design sites and not get dragged into CMS code hell, this could be the perfect solution.

Perch is very adaptable, and it’s easy to plug it into an existing site.  I did just this, and it took me about an hour altogether, and that was the first time I ever used the system.

Ideally, you shouldn’t have to build a site around a particular CMS. You should be able to build a site, then plug in the CMS, and only let the client edit the copy, not the layout.  You don’t want it to mess with your code, and you want the back-end to be compatible with even the most technologically challenged of your clients.  Perch does all of the above.

It installs onto the web server you host the site on, rather than storing it on Perch’s website, so if the Perch website goes down, your user can still update their site.  Before Perch came out I was using CushyCMS which works in a similar way. Their site went down, and I suddenly got an influx of emails from clients who couldn’t edit their sites. Perch’s approach is also more secure than trusting another company with your FTP details.

Installing Perch is really straightforward.  You download the setup file from the website, unzip it and drop it into your home directory. Then you navigate to the setup page,  complete a form with your MySQL database settings, copy the code it generates, and paste it into a configuration file.  Then you integrate the CMS into your site by adding a PHP include tag to the top of each page and php tags in the page where the editable content will be.  When you log into Perch, it will have recognised these tags and set up the editable interface for the content.

Within a page, you can have more than one editable region.  You set a template for each region that you can define yourself.  You may just have a block of text that you want the client to be able to change.  Just use the “text” template.  You can even allow multiple items in a region, so if for example you had a news page, you could let the user add news items rather than edit a whole body of text.

The back end is very clean, simple and also brandable, so you can add your logo, and change the colours to personalise the interface.

There’s some handy documentation that’s been updated a lot since I first tried it out, and you can also contact the developers with any questions.

The price is a £35 one off payment per domain, which I think is a really sensible payment option, especially for freelancers who don’t maintain long term relationships with their clients.

There’s also a server compatibility test you can download to check the CMS is compatible, and I’d recommend you try out their live demo first at grabaperch.com to see if it’s right for you.

Back to top