We’ve had much success over the years, with 6 “Best In Class” awards and 5 “Outstanding Achievement” awards. One of our latest entries, however, has scored our best mark yet – The Maura Fay Group’s Corporate Learning website managed to get a final grade of 493/500 or 98.6%.

So, bragging aside, what makes a website score 493/500?

Design: 98/100

The IMA website’s Judging Criteria page has this to say about design.

The design, or appearance, of a site is clearly important in establishing its appeal. We recognize that a well-conceived, well-developed design that serves the purpose of the site and stays on message requires talent and ability.

So how do we ensure that our designs serve the purpose of the site? Well, there’s a lot to it, but the key point is that we do a lot of work before the design phase.

All of our website projects start with what we call a Website Blueprint. The website blueprint phase is where we nut out the plans for the website, this includes (among other things):

• The technical aspects (what functionality will be required),
• The information architecture (or sitemap),
• The content strategy (tone of voice/language to be used, key marketing message, keywords etc), and
• The creative brief.

It’s the creative brief that helps us hit the nail on the head with design. In the creative brief, we start by doing a mini competitor review that identifies the good and bad features of competing websites. We also re-iterate the company’s personality. We then go on to develop some key design considerations which might go something like:

• Large, eye-catching images should play a key role in the design to create colour and set the mood.
• The corporate branding should remain clean and crisp on a white background while letting other page content (usually large images) create the mood of that particular page.
• The overall look and feel should be neat, clean and professional; this can be achieved by:
  • Using sharp(ish) corners and straight lines in the design
  • Designing with a grid layout
  • Utilising plenty of whitespace

The last thing we create is a mood board based on both the company personality and these key considerations. The mood board is used to demonstrate the kind of feel that we are going for and ensures that the final design is in line with the company personality.

In the case of the Maura Fay website, we wanted a professional looking website that still had plenty of personality and flair. We achieved that by using a corporate-style layout with sharpish corners and straight lines, while also using lots of bright colours to inject personality and flair.

Usability: 98/100

Usability is something we’re very big on at Bluewire Media, most of the office crew have read the classic Don’t Make Me Think by Steve Krug and we value the importance of good usability.

Our usability considerations begin in the creative brief, where we outline usability essentials and recommendations. We also pick apart the websites in the competitor review in terms of usability.

Some things we might commonly note about the competing websites are:

• Is the home page crowded? Or does it use whitespace well and limit the number of calls to action?
• The dark background works well for titles, but for longer passages of text it starts to get hard to read.
• Their menu items are structured according to buyer personas (E.g. “For Teachers”, “For Students”, “For Parents”; would that also work well for us?)
• Their menu appears crowded with 10 items, we should limit our main menu to 9 or less, and separate any others into a secondary menu.

During the wireframing process we also have in-depth discussions about the placement of elements, what is more important than what, and whether this, that or the other even deserves to be on a certain page. To ensure we have these ideas bouncing around, we always start with two or more of the project team sitting down with a whole lot of blank paper and just start sketching and discussing the pros and cons of their layouts. It’s a great way to arrive at the result quickly and ensure that the team knows why we did it the way we did.

Once we’ve agreed on the layout for the most important pages, one person will take over and create the rest in a neater way (usually Photoshop) to present to the client.

Content: 100/100

As I mentioned earlier, part of the website blueprint phase is the development of a content strategy.

In the content strategy, we look at:

• The target audience and the language they use,
• The company personality and how they want to come across,
• The key marketing message,
• The keywords that people search for.

From that we can come up with guidelines writing great copy. Some of the other tips we often give are:

• Write in a journalistic style (most important information first),
• Use descriptive headlines (not just for SEO, most people scan websites and good headlines can help entice them to actually read your copy),
• Talk about the problems that you can solve for your audience, rather than how good you think you are (in the copy, there should be more references to your customers than to yourself).

Credit where credit is due here though, in this case it was the staff at Maura Fay who took our guidelines and ran with them to score 100/100 for their copy.

Feature Functionality: 100/100

The Judging Criteria page of the IMA website has this to say about good functionality.

Good functionality should not attract attention to itself; it remains invisible to the user and doesn’t distract from the site’s primary message. In short, functionality is about ensuring the technology and programming on the site work well.

While the Maura Fay website doesn’t have any whiz-bang feature functionality, we do have some processes in place to ensure that any functionality we implement does work correctly. In short, we do rigorous testing.

There are three testing stages in the Bluewire Media methodology:

• Alpha-site testing (internal testing before we launch a beta-site for the client to see)
• Beta-site testing (the most rigorous testing phase, just prior to launching)
• Post-launch testing (ensuring everything still works after launch – running a test for broken links etc)

Our testing process involves each staff member testing the website in a different browser. We use Google Docs to create a form for each tester to complete, which then neatly compiles everyone’s responses in an easy-to-digest way.

Testing usually includes:

• Layout (checking for anything out of place, drop-downs going behind feature slide-shows etc)
• Forms (can’t submit without valid data, error messages are easy to understand, success message is obvious, submits properly to database, sends auto-responder etc)
• Broken/missing links
• Ease of finding information (E.g. for a staff member not involved in the project, “Find information on toucans”)
• Any other functionality will also have it’s own specific testing requirements.

Standards Compliance & Cross-Browser Compatibility: 97/100

I’ve already discussed how we do cross-browser compatibility testing, and there’s really no trick to it, other than You Should Do It!

To make it easier for ourselves though, we usually start developing a website by using the HTML5 Boilerplate. There are heaps of advantages to using it, but in terms of cross-browser compatibility, it offers a great way of targeting buggy browsers (Internet Explorer). Rather than creating specific stylesheets for IE6, IE7 etc (which mean more HTTP requests and slower load times), or CSS hacks (which don’t validate), it checks for the browser version before the <html> tag and adds a class to it. E.g. <html class=”ie6″>. This means that we can include our valid CSS for separate browsers in the same stylesheet by using .ie6 #content {}.

It’s a bit technical to go into any more detail here, but if you want to learn more about it, check out this article by Paul Irish.

Conclusion

Hopefully there are some tips here that you can take home, but what it all boils down to is that the secret to developing great websites is in good planning and thorough testing (who would have thought?).

Zap.

OK, so maybe on that occasion my comment wasn’t necessary, but I’m going to take a punt and risk the “blindingly obvious” again…

The first priority of your web strategy has to be people. Your website, Facebook page, email campaign, tweets, that’s all important but it’s still secondary. It’s all about your people.

Who?

At the beginning it’s about figuring who it is you need to be talking to. What are they like? What positions do they typically hold? How do they operate? David Meerman Scott suggests naming your “buyer personas” first to make them more human, more real, than just a “prospect”. Straight out of John Jantsch’s “Duct Tape Marketing” comes the idea of then vividly describing them.

For the sake of this post let’s call this persona Frank.

What?

Doesn’t sound so people oriented does it? But there are two parts to the “What”.

Firstly: What problems do you solve for Frank? What are Frank’s issues that you can address? What keeps Frank up at night? If you’re not solving his problems, then he probably won’t be interested…

Secondly: What actions would you like Frank to take? Would you like him to sign up to your email newsletter, enquire, buy, follow you on twitter or watch your videos? You need to  understand this so you can being to assess the success of your marketing.

Why?

And why… Why will Frank take that action? Why will he want your product/service over someone else’s? Why should you be Frank’s first choice? So now it becomes a matter of convincing him. Frank will take that action if he believes that you’ll be able to solve his problem. Here’s a quick list of things that might help persuade Frank that you’re the one:

1. Authority - Qualifications, experience, presentations, industry commentary, articles, blog posts, whitepapers, books, forum contributions – in a word – content.
2. Guarantees - maybe you can offer a money back guarantee or a response time guarantee or an uptime guarantee.
3. Testimonials - written and video. Not doctored, not scripted, not faked. The real deal. Real people saying real things that will help Frank to be convinced.

If you can answer these questions with reasonable clarity then you have the core of your strategy. When it comes time to execute, that’s when you start looking at how best to use your website, your social media, your email marketing.

Workshop

We’re in the process of putting some tools together that will tie a whole lot of these concepts together into what (we hope!) will be a useful reference for you. Actually we’re going to be conducting web strategy workshop next Tuesday (27th of April). It’s called: “Your web strategy and topping Google”.

For more about prioritising people in your web strategy, call Bluewire Media on 1300 258 394.

• The best UI you have ever used — UX Exchange
• The worst UI you have ever used — UX Exchange
• 50 geeky gifts for Valentines’ Day — Hongkiat
• Apple unveils iPad Tablet — Sydney Morning Herald
• 53 New York City Storefronts vs Their Websites — Blue Fountain Media
• UX case study: Designing a user-focused web app — Brian Cray
• Colour theory for designers — Smashing Magazine

 
Tips for Better Ideas

Rethink Scholarship at Langara 2010 Call for Entries from Rory O'Sullivan on Vimeo.

Via Kitsune Noir.

Most people who have the pleasure of using one Sarah Hyne’s websites, wouldn’t be able to put a finger on what makes them so good.

Why is that you ask..?  Well, they just WORK!

And that is the key to usability and web design according to Bluewire’s impressive web designer Sarah Hyne. I sat down with Sarah to find out more.

What is it you do?
Basically, it’s tough trying to describe what you do to people outside web design, because to them it’s a totally intangible product. Whilst they experience usability everyday, they don’t realise there’s someone behind the scenes making it work.

The easiest way to describe it is a bit like getting an architect in to design your houseplan. A lot of people think they know how to design their own website, but similar to designing a house, only an architect really understands how to put it all together and make it work.  It’s all based on the person who has to live it in & the person who has to use it. For example, in a well designed house you might put the kitchen near the dining area.

What process do you go through?

There’s a whole lot of research that goes into it. I need to understand it from the business’s or the clients’ point of view - what are their goals and what are they trying to get out of their website.

Then I have to understand who the users are, and this is probably the hardest and trickiest thing to do because often the client doesn’t know their users all that well, so you need to come at it with a really fresh perspective.  You must keep that fresh perspective all the way through the process, so that means constantly challenging yourself on the ideas you create.

So back to my process, I map out who the user is, stay abreast of all the latest usability conventions, because conventions are what everybody is used to, so the more you stick to conventions the easier the website is to use.

I  look at the information architecture (what you’d call the site map) and do activities like card sorting, or even just bouncing ideas off other people around the office or friends or anyone you can get your hands on. I then do wireframes, which is like doing the blueprint for a house, except for a website.  Again – show that to as many people as possible & get their feedback because it really is a collaborative approach to design.

How (or from whom) do you learn?
There’s a tonne of resources online. Yahoo has a set of patterns that they publish so you can stay abreast of conventions. There’s lots of user experience blogs out there. I read the following blogs via a daily RSS feed:

– A List Apart
- UX Booth
- UX Digest
- Elavision:Insights

On twitter, I follow gurus like Jared Spool and his company UIE.  In terms of books, I’ve recently read Steve Krug‘s Don’t Make Me Think which is considered the bible of usability. And I’m currently reading Information Architecture for the World Wide Web which outlines the process in really fine detail.

I’ve learned a lot from Joel Flom by collaborating with him on several projects & also by going along to IxDA and a workshop run by Peak Usability.

What is your advice to someone beginning usability or who can’t afford your services?
Approach it with an open mind and don’t assume you know what is best for your website because what you are going to do is very different from your users. Test & test often, especially from the early stages and then always get feedback.

And the biggest mistakes you see?
Probably when people try to make something look really fancy.  They place too much emphasis on the actual graphic design, the ‘look & feel’ and trying to ‘engage’ the user

In fact the most common request I get is, “make it look really incredible & reflect the brand”.  Yet a lot of the best websites that we keep coming back to, don’t necessarily look great, but they work very well.

For example, Amazon.com doesn’t look great, in fact its one of the ugliest sites out there, and I hate the colour yellow, but it really, really works.  And the reason for this is because they constantly test and improve their user experience.

You see, the thing is that design is such a subjective thing.  I don’t like yellow, but you’re wearing a yellow shirt, so you can’t go into it as a designer saying, ‘this is what I like and I’m going to put my stamp on this‘, because everybody comes at it from a different angle.

It’s more important that it works!

Any final comments?
Since most people don’t really understand that usability is part of the web design process, it’s often overlooked, which makes it tough to explain because most people don’t know that this industry exists.

In Brisbane especially I think usability is still in its infancy.  However, the more that people understand there’s a science behind designing websites, they’ll appreciate that there’s a lot of thought and strategy and it’s not all about making it look pretty!

Thanks Sarah.

Usability Brisbane:  To get Sarah to work her magic on your website, call Bluewire Media on 1300 258 394. ]]> http://www.bluewiremedia.com.au/blog/2009/12/meet-sarah-hyne-usability-web-design-star/feed/ 0 http://www.bluewiremedia.com.au/blog/2009/12/why-you-should-test-your-website/ http://www.bluewiremedia.com.au/blog/2009/12/why-you-should-test-your-website/#comments Tue, 01 Dec 2009 04:35:25 +0000 Sarah Hyne http://www.bluewiremedia.com.au/blog/?p=2343 I’ve just finished reading Steve Krug’s excellent book on web usability called Don’t Make Me Think. It’s often the case that people (clients and web designers alike) know their websites too well. So well they can’t see them from an objective viewpoint anymore. That’s why I really like Steve’s reasoning for doing user testing:

“Testing reminds you that not everyone thinks the way you do, knows what you know, uses the Web the way you do.

“I used to say that the best way to think about testing was that it was like travel: a broadening experiene. It reminds you how different – and the same – people are, and gives you a fresh perspective on things.

“But I finally realised that testing is really more like having friends visiting from out of town. Inevitably, as you make the tourist rounds with them, you see things about your home town that you usually don’t notice because you’re so used to them. And at the same time, you realise that a lot of things that you take for granted aren’t obvious to everybody.”

User testing, no matter how little you do, quickly confirms what you thought you were doing right, and also flags some serious flaws in your design. The insights you can gain from watching someone use your site is invaluable and will help inform your decisions on how to improve your website: its overall performance and the impression it leaves on people.

Creating websites that don’t make users think is at the core of what we do here at Bluewire. Usability Brisbane: if user testing is something you’d like to explore, call Bluewire Media on 1300 258 394.

Showcase of beautiful typography in web design — Noupe

 
Be sure to check out National Geographic’s International Photography Contest for 2009:

 
For that special geek in your life… FashionablyGeek.com should have some stocking fillers that will take their fancy this Christmas!

1. What is the purpose of a Content Management System (CMS)?

To allow a non-technical person to update their website.
 

2. Therefore, what is the most important aspect of programming a CMS?

The most important aspect is ease of use for the person who is updating. This has to be kept in mind for all the functionality that is developed.
 

3. What are some of the common terms used in CMS development?

- Snippet: This is a front end function written in PHP (Hypertext Pre Processor – a type of programming language and clearly not a correct acronym! More information is available here: http://en.wikipedia.org/wiki/PHP). EG: a snippet can be used to sort news items in a list by date or alphabetical order.

- Chunk: This is a piece of HTML code (http://en.wikipedia.org/wiki/Html) that can be re-used across a website. EG: Headers and footers that are used across multiple pages of a website.

- Module: This is a back end function written in PHP. EG: Sam wrote ModXport which records all of the details from forms that have been submitted on a website and can then be downloaded by a client in case there is an issue with emails from the forms being lost.

- Templating system: This is essentially the page layout which can then have Chunks and Snippets added for functionality and design. You can have unlimited templates in the system.
 

4. What are the strengths of ModX as a CMS?

- Flexible for a developer

- to extend the functionality

- to customise

- to work with the snippets and modules

- Useability: Easy for the user to understand and learn the system and can be simplified by removing functionality that isn’t necessary
 

5. What are the strengths of Joomla as a CMS?

- Much bigger piece of software

- It has a bigger community of developers because it is a more established, older system

- An enormous amount of functionality has already been pre-built

- It has a great community building structure
 

Which CMS do you prefer?

ModX
 

How long would it take someone with a coding background to become proficient in Joomla or ModX?

Probably 1 – 2 months
 

What are 2 common problems when building a website in a CMS?

1. Adding completely custom functionality is always a challenge

2. Insufficient planning of functionality (whether it is completely customised or a tweak on existing)
 

How would you get around these to issues?

Plan! Working out exactly each of the steps that a user takes to go through the process is really important. Given time and resources, a paper prototype would be one of the best ways of ensuring you have planned the functionality appropriately.
 

How do you stay on top of these technologies?

There are a few options:

1. Community forums for development with both ModX and Joomla allows you to ask questions as well as contribute solutions and search through other people’s questions and issues.

2. Keep an eye on the functionality that has been developed by others, so then you’re not re-inventing the wheel!

3. ModX also has a developers’ wiki
 

Where would you go if you wanted to find out more about ModX or Joomla?

Easy – http://www.modxcms.com or http://www.joomla.org.
 

ModX or Joomla Content Management System Development Brisbane : If you would like a helping hand with your CMS development, please call Bluewire Media on 1300 258 394.

 
This is amazing and very exciting…

Thanks to Jaymis for the heads up

PatchMatch: Structural Image Editing from Dan Goldman on Vimeo.

Lo-fi escalator animation. Great imagination!