Article
0 comment

New portfolio website

Ben Crothers portfolio website

It’s been ages since I’ve shown anything I’ve been working on. Plus, there’s a growing amount of stuff like sketchnotes, storyboards and bits and pieces that don’t really have a home on this website. So I’ve done up a new portfolio site at bencrothers.com.

It was also a great opportunity to get my hands dirty with some HTML5/CSS/CSS3/responsive design coding. I’m a big believer in having a decent working knowledge of the platforms, frameworks and code that ultimately bring to life the digital experiences I design, so it made sense for my latest code project to include HTML5 and responsive design.

Take a look, see what you think. I’d also be interested to know what it’s like on your mobile device – feel free to let me know if anything looks kinda wrong…!

Article
0 comment

Parliament (website) for the people

New Parliament website home pageThe Parliament of Australia has just released the new version of its website, and finally access to Parliamentary business and politicians has really opened up online.

‘Punter-centred’ design

Of course we’ve had online access to information about bills, committees and politicians’ speeches and so on for a long time now, through Hansard, XML feeds, and various pages throughout the old website. It’s just that it’s been so hard to find, for your average punter who doesn’t have an ‘inside view’ on how Parliament works.

But now you don’t have to go trawling through loads of search records and acres of text to find what’s actually important to you. The new website has been designed from an ‘outside-in’ approach, i.e. through the eyes and minds of the general public, rather than just those who are ‘on the inside’: politicians and their staff, media, and public service staff who really know their Senate Estimates from their Tariff Proposals.

Opening access to our taxes at work

A big focus of the new design is also about opening up access to politicians and their activities, which demonstrates the sort of mandated responsibility that Parliament has to the public:

  • You can track what your Member of Parliament (and state Senators) is up to, with access to their speeches, and which committees in which they have representation. You can also set email alerts, so you know their latest activities.
  • Don’t know who your Member is? It’s OK, most people don’t, but now it’s much easier to find out, with a handy location-based search.
  • You can easily see what bills are going through Parliament at any given time, and track updates to bills activity with email alerts.
  • A full list of Members or Senators, with their contact details, is only two clicks away from anywhere in the website. Plus each politicians’ profile page has their website links, twitter links, etc

Bringing an experience of the real building online

Love it or hate it, the Parliament House building is a grand statement in the Canberra landscape, and a visit to see the building, to walk its halls, is an experience I think everyone should have. The new website visually threads the presence of the building throughout the website, not only its appearance but the people who use the spaces inside.

The home page creates a dominating centrepiece for the building’s facade, in effect mimicking the experience you have when you first front up to the real thing. The architect Romaldo Giurgola had a finely honed sense of scale and substance for the building, and used surfaces of various types of stone, glass and metal to work with Canberra’s ever-changing light conditions. This is reflected in a little piece of eye-candy for the website: the background image changes depending on the time of day/night.

Other features use the virtual space to welcome people to the physical space:

An experience more than screen-deep

And why am I bothering to write this? I was fortunate enough to be involved in the research, concept and design of the new website, and I’m proud of the efforts of so many people involved in completing such a gargantuan project. It wasn’t the smoothest overhaul by any stretch, but it’s been fulfilling to have worked on something to do proper justice to Parliament and to its elected officials, as well as the building itself.

 

Article
0 comment

Create Conference is on again

Create Conference – the conference run by FEVA for churches and other ministries to tackle gospel communication issues – is on again soon, and I’ve just completed the latest version of the website.

Create Conference 2009 website

Create Conference 2009 website

The Create Conference is on Saturday 14 November, and by the looks of the program, it’s about twice as big as last year. The conference aims to equip Christians to understand the times, generate compelling ideas and messages, and package them relevantly.

Last year, the website design I did focused on the vintage neo-Victorian aspect of the airship, the main part of the Create identity, so it came out looking all steampunky and weathered. This year I expanded on the steampunk-inspired pop-art feel to the illustrations, but went for a lighter, airier feel.

My illustrations went to Andrew Nobbs over at Barton Design, who put together an amazing brochure for the event. His exploration of sky and clouds and bold typography was then translated to the website design. What a neat little example of collaborative design.  ;)

Visit the site, and if you’re keen, register online.

Article
0 comment

Create Conference 2009 website

Create Conference 2009 website

Create Conference 2009 website

This is the new design I created for the createconference.org.au website for 2009, updating the design that I did last year. The brand had to still clearly focus on the airship, but FEVA was very keen to have a new look and feel, to emphasise the strong drive of creativity.

Last year’s vintage neo-Victorian ‘look’ was a big success, so this year I pursued the theme by exposing more of the pop-art illustrations, and less of the grungy weathered feel. I also wanted to use more white and blue to be more vibrant and to complement the deep red in the palette, moving away from the ‘tea-soaked’ age of the previous look.

The result was a lighter, airier feel, giving more space to the sky around the airship and dirigible. The 2009 topical ‘theme’ for the Create Conference was also ‘collaboration’, so I demonstrated this in the design by focusing on the ‘team at work’ inside the dirigible. Who knows what they’re really doing in there… the point is, there’s many complementary tasks going on to keep the airship going.

My illustrations went to Andrew Nobbs over at Barton Design, who put together an amazing brochure for the event. His exploration of sky and clouds and bold typography was then included in the website design.

Article
1 comment

Government launches LivingGreener

The Environment Minister The Hon. Peter Garrett has just announced the launch of a new government website: LivingGreener.gov.au. It centralises a lot of government information available on living more sustainably, especially information about rebates, grants and loans available.

LivingGreener.gov.au home page

LivingGreener.gov.au home page

There’s been a tonne of work involved in getting this website live, and the Department of Environment, Water, Heritage and the Arts has done a brilliant job at researching and listening to the target audiences to deliver something that anyone and everyone can use.

I was involved as Senior Consultant at PTG Global with the user experience design for LivingGreener, including:

  • Personas and want maps design based on user research, website traffic analysis and statistics from the Australian Bureau of Statistics
  • Information architecture, including an overall conceptual model based on leading people at whatever point they were at, on a journey towards being more active to live more sustainably
  • User interface design, with wireframes and prototypes and working with content writers to structure content to integrate action points throughout the website

This has been a really rewarding project to work on. One reason is that this website isn’t trying to be everything ‘environmental’ to everyone; it’s focused squarely on guiding people towards the government assistance available to help everyone do more for the environment. And that’s got to be a good thing.

This is only the launched version of the website too; there’s more content and functionality in the wings that will be rolled out – to borrow a phrase from the Prime Minister – in due season. ;)

So take a look: livinggreener.gov.au, and here’s the official press release, too. What do you think? What are some ways you think a website can motivate you to do more for the environment?

Article
0 comment

Interpreting usability heuristics for websites, intranets and web applications

Heuristic evaluation is a common technique for assessing the usability and business performance of websites, intranets and web applications. It involves checking a website against a set of best-practice guidelines to identify any issues to fix or improve.

A commonly-used set of guidelines is a set of ten heuristics published by Jakob Nielsen (Molich and Nielsen, 1990). These are listed below, with their original explanations in italics.

These guidelines are over ten years old, and aimed more at desktop software. They’re still an effective consistent application of ‘common sense’ principles, but aren’t optimal for online interaction design and usability. I went searching for some contemporary commentary on these heuristics but couldn’t find much, so I thought I’d write some descriptions on how to interpret each guideline for websites, intranets and web applications, rather than just software. Hope they’re helpful for you.

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

This first guideline relates most closely to systems that lock user access while carrying out a process, such as making a person wait while searching the system, or validating credit card information. If a person has to wait, they should be given some sort of estimation of status, and how long they will have to wait. Simple indicators like a progress bar are useful for setting up an accurate expectation of time required for the person to wait.

The option to cancel is also useful; an explicit Cancel button is a better method of stopping a process, rather than allowing someone to resort to using the Back button on the browser, which may trigger a system error.

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Websites should be designed to harness the existing domain model – i.e. the real-world concepts, patterns and language of the domain – in which the website will be used. Audiences that are familiar with the domain will find the website to be more intuitive.

This means using navigation labels, language and terminology that is free from jargon and other technical language and references. Sometimes, though, technical language is necessary if the audience at which the website is targeted is familiar with this technical language.

User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

This guideline relates more to applications (like word processing software) than websites, where user actions are much more tied to functions on something (like a document), where it is important to allow a reversal of action (undo).

But it is still linked to the visibility of system status and placing system control firmly in the hands of the user. For the purposes of websites, it’s important to always indicate orientation within the website: where in the website hierarchy the person is, and the path back to a familiar location (e.g. the home page).

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Whether the ‘platform’ in the guideline above is an operating system, a software family, or websites in general, there are conventions that people are familiar with that are useful for all systems to follow. People arrive at a website carrying expectations of website behaviour learned from all other websites they have visited. For example, the logo of a company on a website tends to be linked to the home page.

Consistency is also crucial within websites, in terms of the tone and language used, the layout and formatting of the page design, and the navigation appearance and behaviour.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Online forms and multi-step sequences on websites should be crafted to maximise people’s understanding of the task at hand, as well as minimising the chances of incorrect information entry.

Modern AJAX-based form field validation methods can give instantaneous feedback, so that people are aware of incorrect information in form fields well before they click the Submit button.

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

In a similar way to the consistency and standards guideline above, websites will be easier to use if the elements involved in a task or process are all displayed to the person, so that the person need not rely on memory about those elements as well as thinking about how to perform the task at hand on an unfamiliar website. A simple example to display an online cart’s contents and total price at all points during the shopping, checkout, delivery and payment sequences for an online sale.

This guideline is also crucial for the display of navigation. If a person is viewing a page that is four layers deep within a website, the labels for all four layers should be clearly visible in the navigation.

There may also be the expectation that the website should recognise return visitors, or partially-completed transactions. If someone has already entered information into a website, it should capture it and re-display it when appropriate, so that they shouldn’t have to enter it again.

Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

This guideline is aimed squarely at desktop software, which could include several ways to achieve the same task. For example, formatting text as bold in word processing software could be triggered by selecting the function from a top menu, a toolbar button, a keyboard shortcut, or a selection from a menu activated by a click of the right mouse button.

Allowing users to tailor frequent actions also hints at the ability to create macros – or pre-set sequences of actions – and assigning custom keyboard shortcuts to those actions.

Websites can still implement this guideline by assigning more frequently-used actions or more frequently-accessed pages several methods of access, such as sets of ‘quick links’, and more prominent navigation cues and links. Bookmarks, whether managed on a website (such as delicious.com and dig.com), or part of the browser software, are another example of how people can tailor their online experience to cater for more frequently-accessed websites.

Websites that are more optimised for accessibility feature shortcut keys to trigger primary navigation links, so that the keyboard can be used to navigate the website in addition to (or rather than) the mouse.

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Although this guideline has been written with software in mind (‘dialogues’), the principle of integrating visual design with functionality remains the same: the visual design of a website should facilitate and not distract from the goals of the website.

Whether those goals are to simply expand a company’s brand experience into the online space, or to convert casual interest in a product to an online sale, or to convert an interested observer into a committed ambassador for a not-for-profit cause, design elements should be assessed for whether they are helping the goals or hindering. Following the guideline above, if they are hindering then it should be considered to modify or remove such elements.

Studies also indicate that a website’s visual design is an integral part of its performance. A Stanford University research study (How do People Evaluate a Web Site’s Credibility? Fogg et al, 2002) found that the ‘design look’ of a website was mentioned most frequently in terms of how online audiences assessed a website’s credibility.

Help users recognize, diagnose and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

This guideline’s heritage is also from desktop software, but the intention to articulate clear messages and solutions is just as applicable to websites, especially applied to broken links, form validation messages and instructional text.

Examples of implementing this guideline include tailored 404 (‘File not found’) error pages that offer alternative courses of action (such as links to key content pages and a search function), and using AJAX-powered real-time form field validation with descriptive help text.

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

The complexity and comprehensive function offerings of most software require help documentation of some sort, but websites should not require accompanying help text. Sound information architecture, consistent navigation, well-designed layouts and clear well-written content should be enough for websites to be intuitive and easy to use.

Notable exceptions include online forms and web applications that serve specific domains or specific skill-sets. In these cases, help text that is clear, concise and contextually-relevant, located next to form fields, greatly increases form usability. There are also plenty of conventions that online forms should use, to take advantage of online audience’s previous experience of forms on other websites, such as the ‘shopping cart/checkout/payment’ pattern.

Article
2 comments

Create Conference 2008 website

Screenshot of the Create Conference home page

Screenshot of the Create Conference home page

Create Conference is a day-long ideas fest run by FEVA for churches and other ministries to tackle communication issues, covering everything from improving death-by-PowerPoint sermon presentations, to promoting church in particular, and Jesus and Christianity in general, to the world around us.

This website was a huge departure from the usual corporate flavour I’m used to designing for, and I went at the brief with a vengeance. Once I had soaked in the existing brand and vision of FEVA and the conference, I brought two themes — an airship and a clockwork-slightly-steampunky feel — together to evoke an image of broadcasting in a playful, graceful way to the world around us.

The pressure was also on, not only with a very tight deadline, but also to produce a website that would demonstrate all the best-practice things that they were going to be talking about at the conference, about what a website should be and do.

I did some concept sketches that the client liked so much, they ended up running with the ‘sketch’ theme in the downloadable conference information brochure (done by Andrew Nobbs at Barton Design). These were then transormed into what you see online.

Go to: createconference.org.au

Article
0 comment

Workforce Guardian website

Screenshot of the Workforce Guardian home page

Screenshot of the Workforce Guardian home page

Workforce Guardian is an online application to help businesses hire, manage and exit employees. The production of this website was by-the-book in terms of audience analysis (carried out by PTG Global), stakeholder consultation, rigorous information architecture, website optimisation and content strategy. The visual design and W3C standards-compliant XHTML was outsourced to Reactive, who really knew what they were doing. The website has also been tuned for best search engine tastiness by another external partner, who also perform ongoing search optimisation.

Update: after the website was first launched, I re-did the Products/product options index page with an accordion-style product comparison feature, which opened up the details of the features much more efficiently for people to view and decide which edition was best for them.

Another note: the website – especially the home page – has changed quite a lot since it was first launched.

Go to: workforceguardian.com.au

Article
0 comment

Rawson Park Tennis Centre website

Screenshot of the Rawson Park Tennis Centre website

Screenshot of the Rawson Park Tennis Centre website

Rawson Park Tennis Centre in Mosman NSW boasts the friendliest most dedicated staff you could find. They wanted a website that evoked the same friendly yet professional feel that tennis players experienced on court. The website is powered by Catch.Publisher, Catch Media’s CMS, which includes a comprehensive tennis match singles and doubles scoring and ranking application.

Go to: rawsontenniscentre.com.au