S8080 Blog

Aardvark is a small tool that allows you to easily manipulate the contents of a web page.

It’s available as a Firefox extension and as a bookmarklet that works in any browser. Through a simple set of keyboard shortcuts (press h to see them), you can manipulate any item on a web page – the most useful functionality being to remove elements, or to isolate them.

How is this useful? It can be invaluable when printing content from the web.

Invariably, the information you want to print is surrounded by ‘computer administrative debris‘, to use a phrase coined by Edward Tufte. Menus, comments, headers, footers, the list goes on – all of this is useful when you’re navigating through a website, but it’s mostly redundant when you’re reading it on paper. Some sites provide print stylesheets that optimize the page for printing, but many don’t – and that’s where Aardvark comes in handy. You can just highlight the section of the page that you’re interested in, isolate it (therefore removing all other elements from the page), and you’ve got a very printable and readable page.

It’s a bit tricky to describe in text, so the best thing to do is give it a spin yourself!

Firefox extension: http://karmatics.com/aardvark/
Bookmarklet: http://karmatics.com/aardvark/bookmarklet.html

To celebrate the birthday of Samuel Morse.

Start.io is a new service which you can use to create your own startpage – a website to hold all of your favourite links, such as your favourite blogs, news sites, or anything else you go to every day. The idea is that you then set it as your homepage or ‘new tab’ page, for easy access. Here’s an example: http://start.io/peter

You can group links (e.g. news, blogs, work, etc), and give groups and individual links their own colours. There are a bunch of readymade layouts, but they’re also completely customizable – you can edit the CSS and HTML to suit your own needs. You can also set particular links or groups to be private, so you can only see them if you’re logged in.

I used to use iGoogle, but I find this much more flexible and lightweight. Good stuff.

Google have rolled out two new useful additions to their image search.

The first allows you to search for pictures featuring a particular colour. Simply perform a search as normal, and then choose a colour from the dropdown colours menu:

For example, if you do a search for tulips, you can narrow it down to display just yellow ones, or just red ones. In fact, you can even combine two colours by fiddling the URL of the search yourself. Colour search adds a parameter to the URL of the form: imgcolor=red. By adding a comma and then another colour, you can search for a combination – for example, pictures of tulips with yellow and blue in them: imgcolor=yellow,blue!

The second update is Google Similar Images. This lets you see similar images to a particular image in your search results. So perhaps you search for London:

And you see a picture of Tower Bridge that you like. If you click the ‘similar images’ link beneath it, you’ll get back a page of… similar images!

You can find out more from this slightly cringe-worthy video from Google:

We have just launched a brand new kiddies website for Lee Valley Regional Park – the largest open space within the M25 stretching 26 miles from the East End to Hertfordshire.

The new site features a bunch of little guys called The LeeVs…

LeeVs love nothing better than playing in the wind, chasing each other, racing each other and generally running around having fun together. They enjoy floating down the river, paddling in puddles or cycling around their Regional Park.

The accessible site features extensive use of Flash for interactive games and character animation that really brings the LeeVs to life.

Lucy Hose, the Regional Park’s Marketing Manager, said “The new site has been designed to encourage children to learn through having fun and to find out more about the Regional Park and the environment. We’ll continue to update the pages and youngsters need to keep a look out for competitions which we’ll be running on the pages. My favourite game is Rob the Ranger!”

We pulled out all of the stops to get the site looking fantastic for the youngsters – our illustrators worked very closely with our Flash team and created a whole virtual word for the LeeVs to inhabit. The site features lots of little surprises that delight youngsters.

For example, you’ll be reading about birthday parties in the park and all of a sudden, a little bright blue bug will wander around the screen, or a LeeV will ride his bike right past you and even pop a wheelie for you.

More kid’s sites in the pipeline

We are just about to launch another two sites for young people, a bit closer to home, but we can’t say too much about that yet.

Matt Howard, our Technical Director and Information Architecture guru said “There are a whole different set of usability rules to apply to sites for younger audiences. We have lots of experience designing for children of all ages for clients like Careers Wales, Welsh Assembly Government, DTI and the Mid and South Wales Safety Camera Partnership, so we have learnt a lot along the way”.

“Our illustration team have even been commissioned to design and produce a whole visual language for youngsters with special educational needs (SEN) and this has been so successful it looks like it will be rolled out across Wales and hopefully nationally”.

From a design perspective, designing for kids is just very good fun. Why just have a ‘help’ link when you can have an animated wriggly worm pointing the way!

A few years back (2005) Christine Perfetti wrote a great article about 5-second tests (http://www.uie.com/articles/five_second_test/), a simple usability testing technique to test that content pages are understandable to users and that the key / priority information is being communicated.

The 5-second test in a nutshell.

Most content pages have (or should have) a distinct primary purpose, the 5 second test aims to quickly check that the design makes this primary purpose obvious to a user…

How to do it:

• Give the user a simple task – e.g. “find out what the email updates include”; “ can you see the property location on a map ”; “ what sizes are available ”
• Tell the user they will be shown the page for 5 seconds, and ask them to try and remember everything they see for this short period
• When 5 seconds is up minimise the window and ask them to write down everything they remember about the page
• When they are done ask them the 2 questions: “ What is the most important information on the page”, and depending on the task “ how would you go about finding what the email updates include ” / “ how would you go about finding where the property is located ” / “ how would you go about finding what sizes are available”

Now analyse the results:

• Listen to the users initial impressions – this will tell you if the content page is clear and concise, understandable pages allow the user to quickly recall critical content and tell you the main purpose of the page

When is it good to use the 5 second test?

For quick improvements to content pages where users have said the site’s content pages are cluttered or confusing.

SEE: http://www.uie.com/articles/five_second_test/

Here’s the latest snippet of usability testing from useit.com who tested how well users understand the first 11 characters of web site links & headlines

In a nutshell:

Lists are great for scanning and web copy and therefore used all over web sites (search results, category pages, news lists, blog lists, twitter feeds, table of contents, site maps, bulleted and numbered lists in content etc etc).

The research finds users scan and typically see about 2 words for most list items, approximately 11 characters.

The best links had these characteristics:

• Plain and simple language
• Specific terminology was used
• Follow conventions for naming common features
• Action oriented
• Show numbers as numerals in web text to catch the users eye and get more into the headline and links

The worst links had these characteristics:

• Generic, bland words
• Made up words or terms were used
• Start with waffle

SEE the full article: http://www.useit.com/alertbox/nanocontent.html

Google have updated their mobile Google Mail interface to use cutting-edge HTML5 and CSS3 features available to WebKit-based browsers and the upcoming Firefox 3.5.

The new interface provides new functionality such as offline access – you can load Gmail in your browser even if you go offline, then reply to e-mails, etc, and it’ll all be synced back to the ‘cloud’ when you’re next online. The new Gmail also uses the <canvas> HTML element (a region of a web page defined in HTML code, which can then be drawn on with JavaScript) to draw various graphic – thus preventing the need to download images – as well as CSS animations and transformations to make the interface more dynamic. Clever stuff.

It’s amazing that this kind of stuff is leading the way is on mobile devices, where the most popular browsers (Safari on the iPhone, and the Android browser on Android-based phones) are generally more capable and advanced than the current versions of the most popular desktop browsers.

For more information, see:

http://gmailblog.blogspot.com/2009/04/new-mobile-gmail-experience-for-iphone.html
http://google-code-updates.blogspot.com/2009/04/html5-and-webkit-pave-way-for-mobile.html

I must admit I thought this was a clever way to get images tagged, the Google Image Labeller turns the laborious task of tagging images into a game you play with another user online.