;Quick Note, This was originally posted on DarkMindZ by mitz247

We'll be finishing up our look at creating a Content Management System by considering good interface design, the creation of a template system, and how we can go about turning what I've described in this series into a fully blown system.
When evaluating an interface, I find it helpful to use Jacob Nielsen's "Ten Usability Heuristics" as a starting point. See here for his site. Here's how they apply to Intranet design.

1. Visibility of system status: The system must tell us what's going on at all times, and not let us get lost in a jungle of information and jargon. Many sites employ a 'breadcrumb' system, so your position within the site is displayed as:
Home -> Subcat1 -> Subcat2

2. Match between system and the real world: Metaphors are very important in computing, from the idea of a 'window', to employing push-buttons that appear to depress when clicked. If your company currently divides its data into 'divisions' and 'departments', for instance, this should be reflected in the design of the Intranet.

3. User control and freedom: The user should not only know their location within the site, but be able to rapidly navigating to the most important information wherever they are. A consistent set of vital links on each page will provide for this.

4. Consistency and standards: The site should be generally uniform throughout, in order to make navigation intuitive. Furthermore, most control panels and forms have a number of functions in common - cancel, save, etc. These should appear in the same location and with uniform design whatever the form is intended to achieve.

5. Error prevention: Prevention is better than cure, so it's obvious to say that the system shouldn't be riddled with bugs. However, a bad design can easily lead a user to make a mistake - for instance swapping around the order of 'Save' and 'Cancel' links, causing the user to loose work by choosing the wrong option.

6. Recognition rather than recall: The user shouldn't be left pondering on what a particular icon does, or which sequence of links he / she has to follow to find a useful snippet of information. This can be as basic as having 'alt' tags on images, that explain their meaning when the user hovers their mouse over them, or better full captions below icons. It may look less sleek, but it can help new users greatly.

7. Flexibility and efficiency of use: You want your Intranet to be quickly accessible to both your experienced staff, and to those just getting started. Provide links to broad sections, but also consider having "task oriented" links, such as "view today's news" or "update my profile". Ordering of links and grouping similar ones together will help.

8. Aesthetic and minimalist design: Many content management systems don't promote this, but aesthetics and minimalism are extremely important. Don't clutter the interface with polls and notices on irrelevant issues, stick to what you need people to read. Take Google as a perfect example of combining a minimalist design with an attractive interface.

9. Help users recognize, diagnose, and recover from errors: This includes concealing ugly system errors, which can flood newbie users with so much guilt and worry that they think they've cast the company into the pits of computational oblivion. A polite "sorry" message would be better all round.

10. Help and documentation: Again it's useful if documentation is task oriented, addressing the most common tasks a user will need to perform. Context-sensitive help is also a very good idea, so that clicking a small question mark on a page will tell the user about what they're looking at.
Clearly there are other design issues specifically with web-based design that Nielsen doesn't consider here — but it's a reasonable introduction that drives home a few messages — make navigation clear and consistent, don't bog the user down with jargon, prevent them from making mistakes, and if they do run into trouble then help them to recover it. With that in mind, let's consider the interface.

Below are a couple of possible layouts for your Intranet site.
The first is the more common:

Design 1


This is a pretty standard grid layout, and has proved itself to be efficient in a range of applications. At the very top of the screen (in the red section, above) appear a number of main links. It's important for them to be near a large 'landmark' such as the top line of the page, as it provides a good sized target for the user to aim their mouse at. Navigation is in two sections — the 'breadcrumbs' above the main content displaying the user's current position within the site, and a main menu to the left. This would be headed by a search box.
Disadvantages? It's not as minimalist as it could be, and on lower screen resolutions the main content could easily get cramped.

Design 2


This design is far more content-centric, looking more like a traditional newspaper than the previous grid layout. The navigation box on the right allows the user to select a section to view, while the top row shows very clearly where the user in within the site. A disadvantage would be the blank space on each side of the content — it will focus the user's attention more on the central information, but could be seen as wasting precious screen space.
Clearly the design you decide upon will depend heavily on your content. Next I'm going to consider templates, and how we can go about creating an easily updateable Intranet site with a uniform look and feel.

Templating Systems

It would be useful to build some kind of templating system into our CMS. Note that the PHP needed for this is a bit more advanced than previous articles, but the complete code will be available for download.

The templater should perform a number of tasks:
* Allow users with limited technical knowledge to create or edit content
* Allow the design of multiple pages to be changed by altering the template
* Maintain a uniform look & feel across the site
* Separate content from programming

There are a number of approaches to this. The most basic is to simply use includes — put all the content into separate files, and insert the correct ones where needed by using the include($filename) PHP command. This isn't a great solution. The files will build up in an disorderly fashion, and you'll defy the point of having a Content Management System in the first place.

Pattern Matching

A simple but elegant solution is to build a pattern matching engine. For example, you'd create a template file including some code such as:

<i> My name is {name}, and my favourite food is {food}</i>

And you'd save that in template.tpl ('.tpl' to denote it's a template). You could then create pages with content, for example one called susan.php would contain the code:

PHP Code:

<?php $values = array('name' => 'Susan','food' => 'chocolate'); compilePage('template.tpl',$values); ?>

And the compilePage function would combine the template with the content, to give:
My name is Susan, and my favourite food is chocolate
Which would be displayed to the user. By having one template file with multiple content pages, you fulfill the goals of keeping a uniform look and feel, separating out content from code, and allowing the site's design to be changed by altering one template.
This is a perfectly adequate solution, although one of our goals is to "allow users with limited technical knowledge to create pages". To save users from having to edit PHP files directly, it would be good to store the page content in the database. This has the advantage of allowing for the content to be easily searched, and to be stored in an orderly fashion. The complete code for this system is beyond the scope of this article and will be available for download, however here are the most important lines:

PHP Code:

<?php foreach ($replaceTags as $key=>$val) {     $template = ereg_replace('{'.$key.'}',$val,$template); } ?>

This has the function of converting tags, such as {food}, and replacing them the words specified in $replaceTags. In the above example, {name} would be replaced by 'Susan', and {food} by 'chocolate'. The newly formed page is now stored in $template, and we can do with it what we please.
A disadvantage of this solution is the need for the above to code to run every time the user views a page. On a large website or Intranet, this could get pretty slow. The answer is only to do this once, and save the combined template and page content into a plain .htm or .php file for the user to view. This is called "static page generation", and greatly reduces server load.

Alternatives

The templating system I'm providing in the downloadable code is only a simple one, and there are very popular and feature-laden systems freely available online. Perhaps the best known one is called Smarty (see http://smarty.php.net). It has various advanced features, although I'll be sticking with my original goal — to create a system fully from scratch, so that I can understand every nook and cranny of its insides.
What additional features could be included in a full Content Management System? Read on...

Information:
	No Comments.