Tweaking Webpage CMS Templates for Better User Experience
You've built your new website and you think the job is over ? Think again. A website should evolve over time, and an important step is the optimisation of webpage templates to maximise the user experience. This is even more imporant if you're using a Content Management System (CMS), as I'll explain and point out some examples from one of our recent projects.
If you are using a Content Management System (CMS), and we like to think that noone should build a website without one, then the chances are that your website comes with some pre-built templates for such things as pages, files and other media. We build most of our websites using Freestyler, which comes with built in templates such as Page, File, Image Gallery, Form etc. One of the benefits we offer our customers is the ability to easily customise these templates to improve user experience. Our own skills and experience consulting in the field of information architecture helps us to identify problems and solve them.
I recently sat down with Avexa, one of my clients to discuss ways to improve their site. Their site design had been implemented into the Freestyler CMS some time ago using the built-in templates but no custom templates. While the site design itself was adequate to their needs and they didn't want a complete redesign, they explained that as more and more content went on the site, they became increasingly aware that it was looking very text and link heavy and that users were taking too many clicks to get to important information. As an ASX listed biotechnology company, they had a duty to ensure that information is as accessible to shareholders as possible, especially given the new discoveries and announcements made in their field. Brand and corporate image is also highly important, so any solution needed to be consistent with the design and style of the site. So we explored some of the ways that we could improve the site and looked at some usage patterns on a few key pages ....
One of the first areas that we tackled was the News section of the site. Press Releases are highly important to Avexa. It is one of the primary ways that the organisation communicates with the general public and the media. The existing News section of the site had consisted of a set of links for each year, within which could be found a bunch of links to the PDF articles. The result was that it required over 3 clicks for website users to download press releases - clicking on the homepage links for either News or the Latest Announcements, then clicking on the year, then clicking on the title of the press release and finally clicking on the link to download the file. Almost all of the files on the site were PDFs, yet there weren't any instructions to tell users how to use them. The date of the release was being included in the title and the PDF page. This was also taking Avexa additional time entering content. Each year they would have to create a new category and each time they added a press release, they would not only have to add the file, but add the date to the title as well as ensure that they were listed in chronological order. It was obvious to Datalink that this page could be improved and fortunately for Avexa, we are able to customise Freestyler templates.
News section before:

Datalink drew up a wireframe model of a new custom template which would meed the specific needs of Avexa's website users. The new Press Releases section would have a 3 column layout. It would include a column for the date, title and an attachment with a nice PDF icon and an indication on the file size. This would all be on the same page so that users wouldn't have to click more than once when they are in the News section of the site. Instead of creating categories for each year, the press releases would be ordered automatically by date and archived by year. As an added bonus, the release list would be made available in RSS format, so that those who need only this information could access it more readily.
The result was the page below, which in my personal opinion looks much better. It is not only cleanly laid out, but really easy to navigate.
News Section after:

This template was designed to be versatile enough to be used in other sections of the site. For example, the label of the second column could be made to fit the context of the section that it is in. The template also makes a cameo in the Investor Relations section of the site. In the above page, the column is called "Announcement", while in the Investor Relations section, the column is renamed to "Reports".
Our second target was Shareholder newsletters. This section of the site is also very important as it is one of the primary ways that Avexa communicates to its shareholders and Avexa puts a lot of effort into ensuring that these print publications are of a high visual standard. The existing section was simply a list of links which required too many clicks to download the archived PDF version of the newsletters. It simply didn't show the effort that goes into publishing these newsletters. We decided to spice this page up by adding images of the first page of each newsletter. Instead of a tabular layout like the News page, our wireframe layout proposed a series of thumbnails with download links below each one. Rather than introduce more content entry work for Avexa by requiring these images to be uploaded with each issue, Datalink decided to automatically generate thumbnails from the first page of the PDF. For a small additional investment, this would save on precious time in the long run.
The result is a much more visual page which reinforces the brand and really lifts the website. Again, the solution is generic enough such that it can be used in other parts of the site, such as Company Reports.
Another part of the solution was to improve the range of imagery on the site. Stock imagery in-keeping with the overal look and theme of the company was chosen and gradually introduced to the site. The images on the homepage randomise from a bank of images to provide visual relief for the design.
Users expect instant gratification when sourcing information from websites. This in turn helps reduce the administration overheads of fielding phone calls from frustrated customers. Usage patterns of the Avexa site show that visitors have responded well to the changes, retrieving information faster.
In summary, a web designer or web developer's job is never done. True, I am a perfectionist. You can't help being that way in this industry. With the nature of the web, no matter what a website is, it needs to constantly evolve and adapt. Not only to changing web browsers, but to changing usage patterns - and not just by site users, but content editors as well. We understand these needs and are professional and proactive in our approach to developing solutions to them. We also recognise that a Content Management System is not an out-of-the-box solution for each and every website and therefore our CMS is designed to be flexible enough for tailor made website solutions. Our clients are in a position where they never get stuck with something they can't change and there is always a way for us to constantly improve things for them.
Comments
There are no comments.
Categories
- Datalink News (24)
- Project News (28)
- People @ Datalink (6)
- Emerging Technologies and Trends (21)
- Best Practice and Strategy (16)
- Web Design & Development (18)
- Internet Marketing (31)
- Website Watch (11)
- Book Reviews (6)
- Datalink Ramblings (17)
- Industry News (5)
- All Categories

