Wednesday, 9 May 2007

Website design patterns

Hey glad to be back, first of all thanks for all the comments.

This blog is aimed to explain and define my thoughts and understanding on website design patterns. Hey just to let you know, I am a freelance web designer. It sounds cool but to be honest I was not aware of website patterns before doing this module “design pattern”.

So far, we have had lots of examples of patterns being used in different aspects of life as well as computer industries to construct all these giants’ applications. Website is one of those trends which bought revolution in both in the internet as well as e-commerce.

Website patterns targeted to identify different elements and aspects of a general website where designer are vulnerable to make mistakes. Website is not like pure programming rather the exterior design as well as organizational aspects of computing is much more important to websites to make it appealing.

So my understanding of website patterns are a set of patterns deals with website related design and development issues from site types, user experiences, navigational and searching points of view.

Yes, the website patterns can be categorized into all these categories mentioned above and trust me each of the category can be extended further.

For example, according to welie.com, searching pattern for websites can be further extended into

· Advanced Search
· FAQ
· Help Wizard
· Search Area
· Search Tips
· Search Results
· Simple Search
· Site Index
· Site Map
· Topic Pages

Wow! That’s what I thought. It is interesting is not it?

Ok let’s look at the one of the pattern under searching category name as “Simple search”. I liked this pattern very much and thought illustrate it here the blog.
Simple search [1]

Problem
The users need to find an item or specific information.


Use when
Any web site that already has primary navigation. User may want to search for an item in a category. User might want to further specify a query


Solution
Offer a search * The search interfaceOffer search functionality consisting of a search label, a keyword field, a filter if applicable and a "go" button. Pressing the return key has the same function as selecting the "go" button. Also provide Search Tips and examples in a seperate page. A link to that page is placed next to the search functionality. The edit box for the search term is large enough to accomodate 3 typical user queries (typically around 20 characters). If the number of filters is more than 2, use a combobox for filterselection, otherwise a radiobutton. Search -- editbox -- for/in -- filter -- Go buttonor just...-- editbox -- Go button * Presenting search resultsThe search results are presented on a new page with clear label containing at least "Searchresults" or similar. The search function is repeated in the top-part of the page with the entered keywords, so that the users know what the keywords were. The number of "hits" is reported and the list of search results is organized; sorted or rated with the best matches at the top. When there are more than 10 results use a Paging mechanism. Each search result shows a link to the item itself and a snibbet of text to explain the item. Preferably that would a summary or abstract but can also be the first lines of text of the resulting item. The structure of a "result" typically shows: 1. Page Title2. Description3. Categorization4. URL, Size, Date * Keyword matchingIf more than one search term is used the search engine must handle them as follows: if no special separators are used (not including the space), the search is interpreted as an OR function, the results that match both terms are listed first. If special separators are used the search engine must be able to handle more than one convention. For example, sometimes the "AND/OR" separators are used but using a "+" or a "-", include and exclude, must also be handled correctly. The engine must also be able to handle spelling mistakes of at least one character.

Why
By using this setup the whole search becomes a sentence that reads like the search query.

Referenece

1. http://www.welie.com/patterns/showPattern.php?patternID=search