Information Architecture: Organization Structures

Last time, we have discussed organization schemes and all of its intricacies and how important it is for one to know what schemes are appropriate for what situations. For today, we will be dwelling on discussing the nitty-gritty of Organization Structures.

What are organization structures? If organization schemes define the shared characteristics of content items and influences the logical grouping of those items, organization structures, on the other hand, define the types of relationships between content items and groups.

Like schemes, we often interact with organization structures without us knowing it. For example, when we watch a television show, we watch it from the beginning to end- in a linear manner. However, the plots from which these shows are based maybe non-linear or may take a different manner.

The structure of information defines the basic ways in which users can traverse information. The three general structures that apply to web site and other web-based architectures include the hierarchy, database oriented and hypertext.

The Hierarchy Architecture. We have organized information in this world in this manner since time immemorial and therefore, man’s mental model regarding this architecture is very high already. It is considered as the simplest and most familiar structure of all making mutually exclusive subdivisions.

Hierarchy is omnipresent in this world and tells us information or meaning in a profound and organized way. Our family trees and organization charts are structured in this manner. The taxonomy of human life is likewise structured in this manner. This architecture of information is strong that it creates a strong mental model of a website’s structure and your relative location within that structure.

If you are unaware of the whole process of establishing organization structures for your website, it is suggested that one use this structure as the first structure because it is the simplest and most familiar. This architecture has a top down approach where you start with the more general categories and ends up creating and identifying the major content areas of the website.

Designing Hierarchies. There are very few rules and information architects should be able to stick with these rules very easily.

1. The developer should be aware of, but not bound by, the idea that categories in a hierarchy should be mutually exclusive. One should remember that within a single organization scheme, there is a need to balance between exclusivity and inclusivity. With ambiguous organization schemes, it will be hard to divide information into mutually exclusive categories that will not create confusion among the potential users. In these cases, the developer may placed a particular item into two or more items to make sure that the item/information will really be located. However, if many items will be cross-listed, that is, most items are listed in more than two categories; the hierarchy will lose its essence.
2. It is important to consider the balance between breadth and depth in the information hierarchy. When we talk about breadth, we are basically talking about the number of possible categories/number of possible options in each level of a category that compartmentalizes the entire structure. Of course, we would not want to have a structure that is too broad. On the other hand, when we talk about depth, we are talking about how deep a structure/the number of levels in a hierarchy can get. In layman’s explanation, it is the number of clicks that we have to go through before one can arrive at the particular page of a website. As much as possible, we would not want to make it too deep (which means a lot of clicks) for a user before he arrives at, let us just say, the Company Profile.Now, it is significant that there is a balance between breadth and depth because we want to create consistency and harmony among all the contents within the structure. If a hierarchy is too broad and shallow, users might be surprised of the many number of options and might be surprised to find lack of content at each particular option. Or if the hierarchy gets too deep, they might find it irritating to have to click ten times to just find what they are looking for.

   In considering the breadth of a website, one should be sensitive to the cognitive limits of the human mind. It is recommended that we follow the seven plus-or-minus two rule. Websites with more than ten options/items on their navigation menu can overwhelm users.

   For websites that one expects to grow in the future, one should go for the broad and shallow type of hierarchy for this kind of structure allows for addition of more content without the hassle of restructuring the entire framework. It is less problematic to add items to further levels of the hierarchy for some reasons.

   First, the main navigation menu serves as the most significant element of any website and therefore changing it after some time would surely hurt the mental model which has been already established and that is a big no no. Second, because it is of utmost prominence and importance, a lot of designers spend a huge deal of time creating prototypes for this and changing it suddenly might incur additional expenses. One has to realize, that in the field of software engineering, any efforts to change what has already been done is way too expensive.

3. Finally, the developer should not be trapped by this architecture.

The Hypertext Architecture. It is rather new, highly non-linear way, flexible and at the same time complex way of structuring information. It is being comprised of two components, the items to be linked and the link existing between the items. They can be connected hierarchically or not or even both. It is flexible because there are no fast rules, one just have to connect an item to another item. But because of this flexible nature, it is subject for complexity and confusion on the user’s part.

It becomes easy for a user to get confuse if he has no mental model of what he is navigating. Without context, a user can easily get frustrated and overwhelmed. Because of the aforementioned characteristics, this structure is not recommended to use as a primary navigation structure but rather as a complement only upon hierarchical or database architecture models.

The Database Architecture. One of the major advantages of this structure is the power and flexibility it affords for the design of searching and browsing systems. Because all data is stored in a database, it brings greater efficiency and accuracy when it comes to data entry and management. Although one has to use a database management software to fully maximize this architecture, at least, the positive effects it can bring is enormous. One can integrate tools that perform syntax and link checking and can use templates to ensure standard formatting across all documents.

Information Architecture: Organization Schemes

Organization Systems, as defined, is the being comprised of organization schemes, which define the shared characteristics of content items and influences the logical grouping of those items) and Organization Structures which define the types of relationships between content items and groups.

We navigate through a lot of organization schemes in our daily life. Finding information in a phone directory may seem trivial because of its exact alphabetical organization scheme. However, finding a product inside a supermarket may seem to be a daunting task if you do not know what scheme that particular supermarket is using (supermarkets uses the hybrid scheme, imagine if it used the exact scheme?).

Organization Schemes are further classified into the following (1) Exact, (2) Ambiguous and (3) Hybrid.

Searching Exact. Let us first discuss the Exact Organization Scheme which categorically classifies information and this scheme into well defined and mutually exclusive sections. This scheme can be further divided into Alphabetical, Chronological and Geographical. A good example of an alphabetical organization scheme will be the white pages of your phone book or the index page of your encyclopedia and dictionary. If you know the last name of the person you are looking for, navigating the scheme is easy.

An archives section of a newspaper organization would be a good example for a chronological scheme. Most archives, history books, diaries and television guides are based on this organization scheme. Knowing the date of the article you want to look for, searching the archives section would again be relatively easy.

Finally, place is often an important characteristic of information. News is most often than not, location dependent. Of course, a map is a very good example for a Geographical organization scheme.

The exact organization scheme is also known as the “known-item” searching. You must know what you are looking for and finding it is obvious. No ambiguity is involved. The problem? It is required that the user know the specific name of resource they are looking for. The white pages won’t work very well if you are trying to find the number of the best web host provider in the Philippines today.

Are you really trying to find the number? Well, I can help you. Check it out here.

Examples:

• De La Salle University Faculty List, Exact Alphabetical
• Inquirer.Net Archives, Exact Chronological
• GeoHive Home, Exact Geographical

Moving Ambiguous
This organization scheme divide information into categories that defy exact definition and where it is mired in the ambiguity of the language, the organization and human subjectivity. Remember the example of a supermarket? Where do you think tomato would be found? Is it under fruits or vegetables?

In some scenarios, this scheme is considered the most useful. Imagine a typical library catalog. Although there are different organization schemes being followed, most patrons would opt to use the Dewey Decimal Classification System which uses ambiguous subject-based schemes.

There is a simple logic behind the ambiguous scheme being supported – we don’t always know what we are looking for. In some cases, you simply forgot the label of the resource you are looking for. Or for others they may only have some vague description or information regarding the resource that they can’t exactly articulate.

For these and other reasons, information seeking is often iterative and interactive. This kind of process involves an element of associative learning for what you find at the beginning of your search process may directly or indirectly influence what you will be looking for after. This is how a web directory is designed. Items are grouped into categories ambiguously defined by the organization through intellectual meaningful ways. Sometimes, a resource may be classified under several categories.

To contrast this with the alphabetical organization scheme, adjacent items organized using the latter do not have inter-relationships except for the fact that they begin with the same letter/s. In this scheme, someone has made an intellectual decision to classify items together deemed related. This grouping supports an associative learning and may enable the user fresh insight and thus, reach better conclusions. Although this scheme requires more elements of hard work and subjectivity, they often prove more valuable to the user.

The success of this scheme lies on the initial design of the over-all structure of the classification system and the painstaking process of ongoing indexing of content items. The structure container should be well-design with a hierarchy of categories and subcategories with scope notes that will define the content of each particular group of subgroup. After that, the painstaking process of indexing content items must be done accurately and consistently. There are several specific ambiguous schemes available:

Topical Scheme. One of the most challenging ambiguous schemes is the Topical Scheme. This scheme organizes information by subject or topic. Phone book yellow pages are organized this way that is why if you want to look for the number of Mabuhay Hosting Philippines, you have to look at the Web Hosting Providers section of phone book yellow pages.

Not all websites should be designed in this manner but most should provide some sort of this kind of access for their audience. In designing this kind of scheme, it is important to define the breadth of the information. Breadth is the number of categories/topics at each level of hierarchy. There could be situations that there is an extensive amount of breadth – such that of an encyclopedia or a small amount of breadth – such that of a corporate website. The main technique in using this specific ambiguous organization scheme is keeping in mind that the structure defines the universe of content that users will expect to find in the website.

Task Oriented Scheme. If there is limited number of tasks that the user is to do upon visiting your website, you may opt to use the Task Oriented scheme. This scheme organizes content into a collection of processes and functions. Tutorial and Forum sites organize their information in this manner. Collections of individual and related actions are organized under task oriented menus.

Most websites today, do not use this kind of organization scheme basically because most websites are information oriented. But as a website gradually becomes functional oriented, this organization scheme is the best approach.

Audience Specific Scheme. For websites which target a multi-faceted audience, an Audience Specific Scheme may be the best scheme to use. This scheme breaks a website into small specific sub-sites which are audience specific. This scheme works well if there is value in customizing content for each audience. School portals are organized in this manner and so international corporate websites as well.

This scheme can have an open or closed version. An open scheme will allow members of one group of audience to access the content intended for other audiences while a closed scheme will prevent members from accessing content not related to theirs. Implementing a closed scheme might be through a form of membership of subscription fee.

Metaphor Scheme. People will tend to appreciate information if the way it was organized is something that is inherently familiar to them. Need an example? Look at your desktop, information is organized by using folders, files and recycle bin and because of the advent of this graphical user interface, users tend to quickly react on things organized in this way. These are metaphors which are commonly used to help users understand something new by relating it to the familiar.

Organizing the website of a computer store according to the architecture of a computer based system will only help users who are acquainted and already familiar with it. Those, who are still unfamiliar with the metaphor, might feel discriminated and lost and might just transfer to website of another computer shop. This leads us to the first major argument of this scheme- familiarity.

The second argument of this scheme is that it has the tendency to be limiting. For example, users might expect that a magnifying glass displayed at the top left of your webpage means search, when in fact, its not. Or you might want to introduce a new service to your website and you decided to create customized metaphors which lead you to breaking out of your metaphor, leading to inconsistency.

Again this particular scheme is very much filled with human subjectivity and might only be ineffective when not done right.

Examples:

• BNET Home, Topical Scheme
• Google Directory, Topical Scheme
• Jobstreet Philippines, Task Oriented Scheme
• Jobstreet International, Audience Specific
• X-Men: The Last Stand Website, Metaphor Based

Can I mix schemes? Yes. Go Hybrid. The significance of an organization scheme is to immediately tell the user and let him understand how information is organized and for them to create a mental model that will allow them to search and locate information in the fastest possible time.

When you start blending schemes together, confusion is absolutely guaranteed. Mental models are harder to identify thus, the probability of the users getting what they want from the website is far from high.

In the web development industry, hybrid schemes often happens when it is often difficult to agree upon any one scheme to use, so people throw elements from different schemes. In cases where there is really a need to use more than one scheme, make sure that the integrity of each scheme is retained and is distinct from the other schemes. The technique is to present the different schemes separately on the page and not mixed altogether.

If these schemes are separated and are completely distinct from one another, even on the same page, the powers of this scheme to create a mental model will not be diminished.

or the next dose, we’ll tackle Organization Structures.

Web Design Primer 3: Site Design

This is the third and final installment for our web design primer and now we are on last chunks of web development – the design of the structure of the website. On this primer we would realize that site design is indeed more difficult than the design of contents on page design. Although we have to be aware of two categorical imperatives: one, site design really depends on the site and second, there can be so many sites.

The reason why I decided to launch the Information Architecture primer (see prior post) is to further explain the methodologies and theories surrounding a good website structure. You have to realize that poor information architecture can lead to bad usability and we do not want that.

A lot of websites today have a linear structure but most sites are hierarchically organized. Whatever the structure is, we have to realize that the structure must always reflect the user’s tasks and not the developer or the provider’s structure or perception on this aspect.

When constructing the hierarchy, information architects suggest a seven plus or minus two rule for the elements in each hierarchy. Some even suggests not more than four level of depth. If you know Krug’s second law, “It does not matter how many times users click as long as each click is an unambiguous choice”, that is something we can use as a guide.

Home Page. It has to be designed differently than the other pages and must answer two questions: Where am I? and What does this site do?. The home page should also need to at least have an intuitive summary of the website’s purpose. Moreover, it must have a directory for the entire area and if possible, a principal search feature can be included, otherwise a link to a search page will do.

According to Jakob Nielsen, the following guidelines may be used for corporate homepages:

1. Include a one sentence tag line
2. Write a page title with good visibility in search engines and bookmark lists
3. Group all corporate information in one distinct area
4. Emphasize the site’s top high-priority tasks
5. Include a search input box
6. Show examples of real site content.
7. Begin link names with the most important keyword.
8. Offer easy access to recent past features.
9. Don’t over-format critical content, such as navigation areas.
10. Use meaningful graphics.

The name of the site should be very prominent on the homepage, more so on the interior pages, where it should be also named and to avoid confusion on the part of your audience. And on the same manner, all interior pages should have a link back to the homepage.

The less famous a site is, the more it has to have information about the site on your interior pages. You have to remember that your users may not come on your interior pages through your homepage.

We’ll briefly discuss navigation systems but we’ll dwell on them more on our Information Architecture series. Anyway, people surf for many reasons but one thing is for sure: they all are thirsty for information and they are all trying to find something. Look at this, it is more difficult than in a shop or on the street if you have no sense of scale, no sense of direction or no sense of location. That pretty much explains the importance of navigation. Navigation can give users something to hold on to. It also tells the user what information is contained in your website and explains to users how to use the website.

Breadth is the number of options at each level of a hierarchy and depth is the number of levels in the hierarchy. Some websites list all the top categories on the side of a website because users are reminded of everything that a site has to offer. If you will decide to position on the side better put it in the right rather than the left because it takes scrolling user less mouse movement and it saves reading users the effort to skip over.

On the other hand, some websites have the navigation at the top of line. Combining both top and side navigation is possible. It can be done using the L shape but you to remember that this kind of navigation takes up a lot of shape. Therefore, it is only recommended for websites which have around 10,000 pages with heterogeneous components.

According to Jakob Nielsen in the year 2000, slightly more than 50% of the users are search dominant, meaning, they go straight to search. One in five users is link dominant. They will only use the search after extensive looking around the site through links. The rest have mixed behaviour.

When doing your search engine, you have to realize that the average query length is two words and that users rarely look beyond the first page of the results screen. Many information architects suggest that websites should encourage long queries and one trivial way to do that is to use wider text boxes. Information retrieval research has shown that users tend to enter more words in a wider text box.

According to Clement Mok, founder of the design firm Studio Archetype, navigation is about wayfinding. Moreover, he said that you can’t treat navigation as separate because many other things run parallel with it. Indeed, the structure of a website is something that we, as good web developers, can’t take for granted. Navigation is about creating a complete system. It is about looking at a whole. To conclude this article, we always have to realize that how we organize information is a balance between how information wants to be organized and how users want to find it.

This is the last installment of the Web Design Primer and next week, we are going to discuss more seriously the different concepts which have been introduced in the Series. It’s Christmas Day, take the time to relax first before applying the things that have been discussed here. From Mabuhay Hosting, we wish everyone a Happy Holidays and Merry Christmas! See you next week!

Color Theory: The Basics

In the field of web design, a lot of designers tend to use colors they find palatable only to their own taste and because of that, we see a lot of websites which we find not only pleasing to our eyes but are also distracting. Did you know that you can control the mood of your visitors just by using certain color choices.

Color is a very simple concept which is often very much ignored. You have to understand that human emotions are very often triggered by colors. Therefore, you need to know which colors would trigger the right emotions necessary for the information you are presenting in your website.

Colors can make the difference between buying and selling. You need to choose the right color combinations for your website. Everything that we buy, eat, wear and all of things that take up space (matter) where we live, work or play all have colors. These colors provide a psychological and emotional response in everyone and these responses reflect who we are and the things that we think and feel.

Reiterating, color is a very simple concept which is often very much ignored. But why? Because color is the first thing that we notice and at the same time, the last thing we forget. If used properly, it can be a powerful tool. It is considered as one of the doorways to our deepest thoughts and feelings and desires. Therefore, if we are able to use the right colors to hit the right audience, then our goals are achieved.

There is nothing wrong with choosing a color just because you like it, after all, this is your creation. However, when choosing a color, you still want to make sure that it does not conflict with what you are trying to say with your work. Proper use of the basics of color theory can help you decide what colors match, as well as what color makes other people tick.

We have three primary colors and they are the colors red, blue and yellow. They are called primary because you can’t mix other colors to have them and they serve as the base colors for a color wheel. These colors are useful for websites that needs to have a sense of urgency. They are the most vivid colors when placed next to each other, which is why you will notice that a lot of fast food joints use primary colors in their logo design.

Red. This is the color of fire and blood. It is also normally associated with energy, war, danger, passion, desire and love. It is considered as a very emotionally intense color because it enhances human metabolism, increases respiration rate and raises blood pressure. It has a very high visibility and therefore, it brings text and images to the foreground. If you want to stimulate your audience by making quick decisions, use it as an accent color. It is also the most common color being used for Buy Now and Click here buttons on a lot of internet banners.

Orange is a secondary color simply because you get orange when you mix red and yellow. It is a mixture of the happiness of yellow and the energy and aggressiveness of red. To the human eye, it has been said that orange gives us a sensation of heat and vitality. It increases oxygen supply to the brain and produces an invigorating effect, thereby stimulating mental activity. If your website targets people from the teenage bracket, orange is the perfect color for them.

Like red, it also has very high visibility, meaning, you can it to use to catch attention and highlight the most important elements of your website. It is also highly effective for promoting food products and toys. As a citrus color, is normally associated with healthy food and stimulates appetite, together with green on this manner of explanation.

Yellow. It produces a warming effect and arouses cheerfulness, stimulates mental activity and generates muscle energy. It is also commonly associated with food. Pure and bright yellow is an attention getter. According to studies, when the color yellow is overused, it can have a disturbing effect among babies.

Yellow is seen before other colors when placed against black and this color combination is often used to issue a warning.

Like orange, you can use this color to promote children’s products and anything that is related to leisure. It is also a very effective color when it comes to attracting attention, so you can use it to highlight some of the most important elements of your design.

Orange, Green and Purple are the color wheel’s secondary colors. They are called secondary because these three colors are what you get when you mix primary colors together. They are located in between the primary colors in the color wheel to indicate what colors they are made from.

Secondary colors are usually more interesting than primary colors, but they do not evoke speed and urgency.

Complementary colors are colors which are directly across from each other on the color wheel. Examples of these colors are red and green, blue and orange, and purple and yellow. Don’t let the name fool you, they rarely look good together, they are called complementary because when used together, they become extremely vibrant and have heavy contrast.

These colors are useful when you want to make something stand out. For example, if you use a green background and you have a red square on it, the red square will jump off the page and be almost blinding.

Analogous colors are colors which are right next to each other on the color wheel. Examples of these are red and orange, blue and green, yellow and orange, and blue green and green. They usually match extremely well, but they also create almost no contrast. So be very careful if you plan to use these kinds of colors. They are good for very serene feeling where you want your viewers to feel comfortable.

We’ll discuss more of Color Theory next week. For now, try to absorb everything that has been presented and take a look how you could apply color theory to your web designs.

Information Architecture: An Introduction

Generally speaking, when we talk about Information Architecture, this is the construction of a structure or the organization of information. Specifically and on the context of web design, this pertains to the organization of a web site’s content into categories and the creation of an interface to support those categories. It involves organization and navigation systems to help your audience find and manage information efficiently.

Let us first establish one major fact as a premise of this series: All websites have information architecture. It is actually an up-front work thought out before even creating the website.

Is it significant? Yes. It is, in fact, the number one factor in creating a simple website and it is the 80% of a product’s usability. As stated in previous articles, up-to-date content and ease of navigation are the most important elements in creating a satisfying user experience.

An effective Information Architecture is a method of organizing and connecting information that makes it possible for the user to accomplish his/her goals most effectively and efficiently. Furthermore, effective information architecture reflects the user’s perspective, supports both casual browsing and directed searching, and acknowledges human tendencies, human abilities and human limitations. If your website’s information architecture supports the aforementioned, congratulations, you have a great website!

As an Information Architect, his main task is to create the entire structure of the website and organize the positioning of pages within sections, developing a functional and intuitive plan to get the user from point A to point B on the path of least resistance. This task requires an understanding of what the website seeks from the user and what the user seeks from the task. Moreover, an Information Architect must be able to properly lay down the User Taskflow. For a website to be effective and usable, the workflow of the users and the pageflow must match properly.

According to Rosenfeld and Morville, there are six components that comprises information architecture and they are organization systems, navigation systems, labeling systems, indexing, searching methods and metaphors.

For the next component of this series, we are going to discuss Organization Systems on a deeper level. See you next week! Happy Holidays from Mabuhay Hosting!

Web Design Primer 2: Content Design

After almost three months of hiatus, the Web Design series is back. I would like to apologize for the delay before seeing the second part of the series. Anyway, for this week, our come-back week, we are featuring Content Design.

Number of Words. The general principle is that we have to write as short and succinct as possible. A website must always support both casual and hardcore browsing. Writing for the web is different as writing for a printed article. So, one must know the difference before going into the main bulk of any web content production – writing!

People scan. According to a research carried out by Jakob Nielsen, one of the most notable researchers and consultants on Web Usability, surfers rarely read a web page word by word, instead, they only scan a page, looking for some important words and phrases. Furthermore, the study found out that in every new page that came across their screens, 79% of people would only scan them and only 16% of them would read it word by word.

What’s the gist? Be brief. Be succinct.

We also have to consider those people with reading difficulties or those people reading using different medium. Because of that, it is imperative that the information one is presenting must be presented and formatted correctly. To ensure more people can accessed your material, use your HTML tags properly, or better yet, switch to newer technologies that are not only cross browser compatible but are also cross platform compatible like XHTML, CSS and XML.

Many surfers would access some of your web pages directly from a search engine results page, and therefore, every page must be written in such a way that the user has not seen the rest of the site. Therefore, good design, proper use of Information Architecture and a knack of the people’s intuition would definitely help you on this.

Writing for the web is a different skill. An editorial style guide will help one maintain target tones of voice. The bottom line of this is that you have to be able to write more direct and more understandable because reading the web is different from reading a printed article.

According to Jakob Nielsen, there are four ways in how to adapt existing text to make a website more usable:

1. Using objective language. The usability of the information on a site can be improved by 27 per cent by using neutral language —simply stating facts and drawing a conclusion —rather than boasting or using exaggerated language.
2. Making the text scannable. Modifying text to use bullet points, instead of lists within the body copy, improves usability by 47 per cent.
   • Tips on achieving scannable text:
     • Highlight important keywords and phrases but remember to contrast them visually with hyperlink.
     • However, too many type variations, can create confusion, so be mild with suggestion #1.
     • Your headings and sub-headings should be meaningful.
     • If it is a list, place them on a bullets list format.
     • Use one idea per paragraph.
     • Use the inverted pyramid style. Start with the most important points, like answering the 5 W’s (Who, What, Where, When and Why) with the following supporting points on.
3. Making the text concise. If the word count is cut by half, usability will be improved by 58 per cent.
4. Combining all three. Using all three techniques together in a fourth, master method of writing for the web leads to an overall improvement of usability of 124 per cent.

Crossing Cultures. Use simple short words. Avoid technical jargons (unless it is a niche website) because you don’t want your website to pose an inferiority complex on your audience. Use short sentences and common terms rather than made up words. While doing these, you are also improving on your visibility among search engines. Unless you are targeting a very specific segment of the mass, one has to avoid at all cost: humour, metaphors, and puns.

Bad Words.

1. stuff… and more – it is so vague and unclear. Be specific. Come to the point and let them see what they want to see. After all, they came to your website, for one thing, they want information.
2. Under Construction – if that is the only thing in the page, leave it out, unless it is dynamically generated.
3. View – are you asking the user to read?
4. Avoid the following meaningless buzzwords: award-winning, check it out, cutting edge, cool, hotlist of cool sites/links, neat, one stop-shop and avoid the following overused words: available, offered, current, currently, feel free, online, welcome to, note that… note how.
5. The word provide is redundant most of the time (eg. Provides a description – you can use the word describe here, provides an overview – you can use the word introduce here)

Visual Hierarchy. Create very clear visual hierarchy. You have to remember, the more important a piece of information is, therefore, the more prominent it should be. Therefore, things that relate logically should also relate visually and things that are a part of something else should be nested within it.

Do not create an extremely long page. Break pages into parts. While breaking pages into parts, each page should be structured with at least 2 to 3 levels of headings. Moreover, highlight keywords in some way, but not in any way that they could be perceived as hyperlinks.

Technically speaking, contents should be displayed in three levels: a succinct scannable headline, an intermediate outline/summary, and the full document. Jakob Nielsen further recommends this approach orients users to what is on the site quickly and efficiently. However, the first two levels should not replace the full document, no matter how long they are.

Up-to date Content. It is extremely useful to put dates on your content so as the viewer can have an idea whether the information is current or obsolete. Remember, one of the standards of a good website is having timely content.

Linking. Never link to a page which is Under Construction or worse that adds “come again soon”. If it is like that, why link to it in the first place?

Never ever link a page back to it. It defeats the purpose of the meaning of the hypertext. The word, by the way, literally means text with links to other text and not text with links to the text itself. It was coined by Ted Nelson in the year 1963 and was first found in print in a college newspaper article about a lecture he gave called “Computers, Creativity and the Nature of the Written Word”.

Your links should look like links. They must be obvious and must be usable. Moreover, visited links and non-visted links should also contrast visually. It is hard to maintain a multitude number of links, so I suggest, do not include too many outside links (unless you have an automated plug-in for that). If they disappear it looks bad on you, rather than the outside site.

You also need to check your links. There are many available tools for that. You don’t want your links going nowhere. Avoid linkrots. 6% of the links on the web are dead according to a recent survey by Terry Sullivan’s All Things Web. Linkrot is one of the main culprits of the decreased usability of the Web and was cited as one the biggest problems in using the Web. It also contributes to the unprecedented dissolution of the very fabric of the web: hypertext. There is a forthcoming danger that the Web might stop being an interconnected universal hypertext system and might just turn into isolated and individual data islands. We do not want to attack the founding principle of Web – interconnection.

When writing anchors it is particularly tempting to deviate from the subject. Anchor text should make sense out contents. It should not be a verb phrase. If possible, the anchor should be the natural title of the next page.

The Mail To Links. The last thing we want to happen when we click on a link is to our email client firing up in our screen. Make sure that your mailto links are used on anchors that clearly states they are e-mail addresses. Do not place these links on names of people. The normal tendency of people is to expect a biography when they click on a name of person.

Good design must always meet user’s expectations. Violated expectations can create a sense of oppression, where technology dominates the game and humans are reduced with their ability to steer the interaction.

However, using these links can often, if not, lead to spam. Many spam programs scattered on the Web today surf for websites harvesting e-mail addresses. In fact, that is one of the most common ways that spammers get their e-mail address bank filled up.

In this situation, it can be helpful to pre-sort the email with a Web form. Using a form also has the advantage of not (always) printing an email address on the Web page for spammers to harvest.

To the left, to the left. Early studies showed 10% of users would scroll. However, present studies indicate otherwise. Today, users hate scrolling left to right. Vertical scrolling seems alright because it is common but to do horizontal scrolling can make a lot of persons irritated and annoyed.

Do not even bother to feature both horizontal and vertical scrolling; users have to move their viewport in two dimensions, which makes it extremely difficult to cover the entire space. For people with poor spatial visualization skills, this is challenging – to plan movements along two axes across an invisible plane. You don’t want your audience to be challenged and get out of your page when they surrender.

The TITLE page. Every page needs some sort of a name as humans do. The page title, found in the head element of all web pages, is one of the most important ways users find their way around individual websites. It is also your main tool to attract new visitors from search listings and help your existing users re-located you.

Search engines typically show the first 66 characters or so of the title. So, make sure that your title has around 66 characters or so to be truly effective.

Page titles are also used as the default entry names on all bookmarks application. Make sure that each page of your site possess a descriptive title and a prominent one, something that match the information within the document.

Web Design Primer 1: Page Design

Now, the first post seemed to be too serious for some. For those itching to know more about the real web design techniques. I am proud to present to you our Web Design Primer Series. For this week, I am featuring Page Design which will tackle the web design basics regarding a general web page.

WYSIWYG IS DEAD. LONG DEAD. The internet is no place for control freaks and therefore, expect that there will be a wide variety of browsers in the future. it is impossible to test all the pages on all user agents. All you can do is use technical standards: For HTML, I recommend XHTML 1.0 strict and in CSS I recommend CSS level 2.1.

Therefore, it is inevitable that your web site would have an absolute look on all browsers. With that, one has to remember to avoid resolution dependent design unless the situation needs to. One has to also make sure that design looks good either with small or large fonts in the browser.

LEGIBILITY. Use high color contrast for text legibility. When it comes to background images, use plain or those very subtle ones. Make the text stand still and definitely avoid zooming, blinking and moving text unless it is a game site. Also, avoid all uppercase letters, it reads 10% slower.

ANIMATION AND SHING SHING!. Animation has already been proven that can draw human attention, however, one must be a bit tolerant in using it. A moving image is already a killer for reading, but if you really must have it, as in really need it, have it spinned only a couple of times, no more, no less. According to studies, most users associate moving content with useless contents (unless you’re website is a news website)

LOADING TIME. A lot of people are fascinated to see flash animated websites and more often than not, business organizations wants to have the same piece of animation into their websites, but a lot of web developers would think otherwise. you see, users loath waiting for the entire page to download and a classic research by Mille in 1968 found out that delay below 0.1 second means instantaneous reaction to the user. One second is the limit for the user’s train of thought not to be disrupted and 10 seconds is the limit to keep the user interested, otherwise a new parallel task is what they are bound to do.

According to studies, the user’s perceived speed depends on the following: (1) the throughput of the server (in this case, bear with it or better yet, switch to a better server like Mabuhay Hosting), and the remaining factors are something that is beyond the scope of the developer and these are (2) the server’s connection to the internet, (3) the user’s connection to the internet, and (4) the rendering speed of the computer.

With those limitations mentioned, a good web developer should always keep in his mind that together with the design task is the task of making sure that the web site is being delivered properly to its target audience. Therefore, web site pages should always be relatively small, meaning one has to avoid the over-use of high quality graphics and multimedia. If one can’t avoid to use an image, use it several times.

If inevitable and the page does not load that fast as it was expected, a designer must always remember that what matters most is the time until the user sees something that makes sense. a lot of designers often forget to use the alt (alternate) attribute of the image tags. Use them, they are the first thing that the user sees if the image has not yet downloaded. Most of the time also, designers just like to grab and drag and drop the image onto the canvass of webpage and forget to explicitly code the intended height and width of the image. when this happens, you are actually putting the burden on the browser to think of the actual height and width that it would render the image. put them and the user agent would be able to see the page quickly.

THE KILLER TABLES. Use css for layouting and not tables. Large tables, unless specially and carefully constructed takes time to build because the browser has to read the whole table first before going onto the tables nested deep within it. meaning, if one has used a table for layouting and a lot of tables were nested, the browser has to load the innermost table before actually processing the tables above it, thereby, slowing the rendering of the web site.

THE TITLE. One of the things one has to check to know if a website was hurriedly done and uploaded is to check the title tag. This is the tag that one has to use to put title on the web page and the one that appears in the title bar on our browsers. The title must be something descriptive and something that has a relationship with the content of the website. It needs to be cleverly chosen to summarize the page in a contents of a web search engine. Normally its length is between 40 to 60 characters long and each different page of a website should have its own descriptive title.

FINALLY, NO FRAMES. They do add navigation or decoration to your web page but pages in frames are not bookmarked and people might actually get annoyed to realize that later on. there are well known issues regarding with indexing framed web pages in the search engine. Users would typically see the current frame without the surrounding frame and this is what we call the black hole page.

Does Good Web Site Design Matters?

Yep. It does. However, a lot of people do not think otherwise. They see web site design as another scheme employed by techie people to those techie-less people. But, its not. In an article published in NY Times on August 30,1999 it was said that most popular feature of the IBM website was the search feature simply because people did not know how to navigate around the site. It was also mentioned that the second most important feature was the help button, because the search technology was so ineffective. After that article, the website has been put in a redesign process and the use of help button in the aforementioned decreased by 84 percent and online sales skyrocketed at 400 percent.

Design Matters
Design may look like an another cliche in this field but it’s one hell of a science. Design is not just putting things together neatly and delivering, design is about finding solutions. Unfortunately, a lot of the designers of today often reinvent things done by other people. They seem to think when we talk about design, we’re just focused on design.

Design is simply not just design for art’s sake. A good design should aid a web site’s function. It is important for a web designer to know how to create navigation bars that will actually help people for finding relevant content, how to create a shopping cart that will actually support people in the check out process and how to make an e-commerce site where people would actually buy and return to buy again and not to create design for aesthetics purposes alone. Most of the time, everything goes over at the top and suddenly design becomes a killer-design (a literal one, giggles!). A designer must also know when does a design could harm the functionality of a web site. It is not just a pursuance of one particular value and simultaneously pinning down all of the other equally important values.

In the world of web site design, there have been a lot of cases where a truly sleek and elegant website does not really boast any functionality at all. Or an animation-packed website which only loads after five minutes. It seems that a lot of these designers do not try to stand back and consider the finished web site design and its implication on its target audience. A lot of designers are often please with those little techie things that makes the web site “cool” to see. It’s not about riding the culture of being “cool” but its about meeting the goal of a web site. At the end of the day, a web site has a purpose, has a goal and a web site design is only there to support it, not to be the focus of it. More often than not, the things that are easiest to do are also the things that are easiest to forget about. Sometimes, going back to the basics can be good web site design.