Web Development Ethiopia

The primary objective of graphic design is effective visual communication. A properly designed page structure should enforce a consistent hierarchy of design elements where the relevant elements are emphasized and the content is displayed in a logical and orderly manner.

This doesn’t mean pages need to be humdrum and uninspiring. Aesthetics is an element of usability, and the overall design fails if the other objectives of visual communication are poorly served.

Good design may be aesthetically pleasing, but great design takes note of aesthetics in a usable context. The following goals will keep you on track to achieving usability at the individual page level: simplicity, consistency, and focus.

Keeping watch over these goals will allow you to creatively explore the design space while maintaining a highly usable page design. In a vast information space such as the Web, the user can be gone in the blink of an eye. Ease of use and relevance of information are critical to emerging a winner.

Simplicity
Keeping the page structure simple allows the page to support the content. A simple page ensures that page titles are recognized as page titles, that navigational elements are clearly for navigation, and that the information contained within the page is salient to the user. Additionally, a simple structure gives the designer control of the information presentation.

A truly elegant design reduces the page to its required elements. This allows each element to be intimately tied to its message and increases the page structure perceived by the user.

An elegant design also enhances the flexibility and adaptability of your site (i.e., it facilitates future additions and changes). In addition to supporting the structure of your page, this approach conserves screen space and bandwidth.

Consistency
A consistent layout aids user navigation and synthesizes the elements within your page. It also establishes unity across several pages. It should be immediately obvious to users that they are at the same site whether they are on the “About Our Company” page or the “Job Listings” page. Consistency increases ease of use, reinforces a sense of structure, an decreases learning time associated with navigating your site.

Consistency applies to the overall site, the distinct page structures, and the individual graphical elements. Having consistent elements within your page strengthens the structural relations among elements while reducing clutter and visual noise. Predictability and consistency allow a user to easily scan the display to find the relevant elements and information details.

Consistency should manifest itself throughout your page: aligning elements along common axes using consistent sizes and line strokes, repeating font styles for headings and navigation.

A consistent page layout establishes a framework for the user, and conscious manipulation of elements within this framework can have a strong impact on the user.

Focus
Once you’ve planned for a consistent and simplified layout, the third goal comes easily: place emphasis on the key elements of a page.

Focus is the process of ensuring that key elements are the center of attention. The element of emphasis – whether it be a label, title, or icon – should immediately communicate the information contained on that page.

While the page structure will provide visual emphasis and support, remember that your labeling scheme is essential for establishing meaning. Thus, the page structure can only support and reinforce whatever meaning.

Thus, the page structure can only support and reinforce whatever meaning is created through your initial choice of icon or label.

Focus enables you to control the user’s gaze, as well as establish key areas within the framework of the page.

By establishing a focal point, you can be sure to get the important information to the user right away. Increasing the size of specific elements, highlighting elements with color, increasing the stroke or size of a font – all these things can be used to make an element of the page stand out.

Why Do All of This?
By keeping the pages consistent, focused, and minimal, you retain control over the content of the page and facilitate user navigation and comprehension of the site structure.

At a more practical level, you minimize, development time and assist error detection prior to rolling out the product. In other words, having a consistent layout makes it much easier for your quality assurance team to find inconsistencies and errors in the layouts.

The following provide a set of suggestions for effective presentation of search results.
Use Domain – Specific Terminology

Use terminology, relevant to your domain. Avoid terms like “record,” “field,” or “database.” For instance, instead of saying “55 records found in the database,” specifically say “55 matching products found in the store.”

Repeat the Query
Your presentation should repeat the search query so people don’t have to remember exactly what they searched for as they evaluate the results (e.g., “Searching for: ‘cats and dogs’”). When possible, repeat the search query in another search box. This makes it easier for the user to refine and repeat the query.

Specify the Number of Results
Specify the number of matching results found. Sometimes it’s also useful to specify the total number of documents or database entries (e.g., “36 matches out of 10,000”).

Provide the Title and Description of Each Result
List the title and description of each match. For instance, when listing matching web pages, provide the title, URL, and description:

“The Word’s Best Cat Nip, www.catnipfromheaven.com, ‘organic farm-grown catnip that will make your cat beg for more.’”

Help Users Find Similar Documents
As people refine their ideas about what they’re looking for, one common need is to find similar documents. Each result could contain a link such as “More like this …” Thus, when users find a match they’re happy with, they can easily find similar items without having to construct a good query to do so.

No Results
When too many matches are found, consider providing search tips to help refine the query, such as using more specific search terms. Categorize the results to help users narrow down their queries, as shown in the following example:
Search for: “pets” returns 500 matches (out of 10,000 documents).
Choose a category of interest:
Pet food (220)
Pet supplies (150)
Training and housebreaking pets (50)
Veterinarians (43)
Celebrity pets (37)

Multipage Results
When more results are available than can be listed on a single page, be sure to specify what set of results, within the entire list, is currently being shown (e.g., “items 11 20 of 55”).

Sorting Results Listings
Sort the results from most relevant. If you can’t gauge relevance well, use a logical order, such as alphabetical order.

Embedding Your Site within the Framework of the Rest of the Web
Your site must be effective within the framework of the entire Internet. This means people need to be able to find your site when they’re looking for it and be able to identify both that your site exists and that it contains pertinent content.

Your site will link to other sites and be linked from other sites, and you’ll want these links to be meaningful and reliable. In addition, your site should work well with automated tools, such as search engine spiders.

It’s a good practice to mark up your pages with information that helps automated tools understand your content. Pages can be designed to work effectively with other tools by following HTML standards as closely as possible.

Using style sheets or XML is helpful in separating content from formatting as much as possible. Use the <title> tag to label pages clearly and unambiguously, and use metatags to specify keywords, descriptions, and related information. See the sidebar “The Dublin Core Element Set” for more information on metatags.

Your site may have one or more gateway pages. These are pages intended to be entry points into your site. The home page is an obvious gateway page.

Other gateway pages may include pages that are targeted to specific user populations, interest areas, or pages that are simply expected to be extremely popular because of their valuable content.

Gateway pages may accidentally evolve (because of their popularity), or they may be designed as such, presenting themselves as a main page and often having their own domain name. These pages are convenient pages to advertise, so that specific target audiences can go directly to a view of the site intended for them.

Your site benefits from strong orientation cues, such as an obvious site logo, a large page title, and a distinctive page layout, which help new arrivals at you site by informing them where they are.

Very effective orientation cues also help people understand the relationship between your site and other external sites. For instance, if you are creating a site for a local city government, you might add to it a set of links to related governments, such a US Government Michigan Washtenaw Country Ann Arbor.

For those unfamiliar with your city, the type of breadcrumb trail gives them helpful context, and for those with an acute interest, it gives them easy access to related sites. In addition, if you can convince related sites to adopt the same convention, you can create a community of easy-to-navigate sites.

Similarly, you may want to add links to related external sites in other types of structures, such as linking to a web-ring about your topic area, providing links to general indexes related to your company or topic area, or providing quick links to search engines that automatically search for your topic.

The quality of search results is usually characterized by three factors: precision, recall, ad relevance.

Precise search results contain the fewest possible incorrect matches. If you search for “gravy,” you shouldn’t be getting documents about “gravity.”

Recall refers to the completeness of the search results. Complete search results include as many appropriate matches as possible, without missing anything that might be related. If you search for “dog,” you shouldn’t just find out about pets, you also want to find “Dog Star.”

“Three Dog night,” “Reservoir Dogs,” and references to someone’s chili tasting like dog food. Complete results should show every match, no matter how obscure.

Relevant search results put the best possible matches at the top of the search results. Relevance means that the result gives you information that is actually useful to your purpose as a searcher.

In general, this is at best an educated guess. If you’re looking for “dog,” then a page called “Everything You Ever Wanted to Know About Dogs” is much more likely to be relevant than a page about bad chili.

When you’ve got your search engine working, you’ll want to test it and make sure it gives the kinds of results you would hope for. Test the search engine results, especially for the mot common queries, and verify that the results returned make sense. If not, fix the search engine.

When you test the search results, check that the results are precise, comprehensive, and relevant. Check that the presentation of results is comprehensible.

Keep a log of search queries that users enter, especially those that return to matches. Often this will indicate information that is missing from your system, or synonyms or keywords you need to add to your search engine.

Following are some advanced search engine capabilities that you’ll want to try to support.
Fuzzy matches are matches that don’t fit the search query exactly but would probably be interesting to the user to a certain extent.

For instance, if I look for “per food” and there are no matches at all, there’s a high probability I’ll be interested in documents about “dog food” or “cat food” or “feeding you furry companions.”

Spell-correction allows you to find matches even if the searcher spelled something wrong or the document spelled something wrong. If I search for “weird events” [sic], I want the search engine to find documents with the phrase “weird events.”

Alternate spellings refers to the ability to find permissible alternate spellings of terms, such as some very common British and American alternate spellings: “color” and “color,” “grey,” “organisation” and “organization.” When people search for one, they are usually interested in the other as well.

Synonyms are alternate terms with the same meaning. When someone searches for “dogs,” they would usually be interested in “canines” and “puppies,” although perhaps to a lesser extent. A smart search engine expands the scope of its search to recognize synonyms and related terms.

Stem words are root words, that is, versions of words without any prefixes or suffixes. When people search for “anarchist,” often they will also want to find “anarchy” or “anarchism,’ so the search engine needs to understand how to handle different word forms, how to strip prefixes and suffixes, and, more than anything, how to handle singular and plural forms of words. This can be extremely difficult in general because someone searching for “democrat” is not necessarily the least bit interested in documents about “democracy.”

Stop words are terms that are deliberately not indexed in the search engine. These typically include function words (determiners, conjunctions, prepositions) such as “the,” “and,” and “of,” and include terms that are so common as to be of limited use. For instance, the terms “web” or “home” don’t tend to contribute to a search of web pages because they are so common.

Most people are relatively poor at searching. They use terms that are too broad or too narrow.

They overconstrain the search. They don’t consider synonyms. They don’t know how to filter out documents that are irrelevant. As a result, we need to help out as much as much as we can.

Traditional information retrieval makes use of Boolean queries. Boolean searches rely on logical expressions of what constitutes a good result, where search terms are combined with AND, OR, and NOT. Boolean searches can sometimes be an effective query format for trained experts, but most people are highly unsuccessful with Boolean searches.

One key problem is that natural language usage doesn’t match logical expressions exactly. In English, when I say I want information about “cats and dogs,” [usually mea that I want information about “cats,” “dogs,” or “cats and dogs.”

However, in a Boolean query for “cats and dogs,” I wouldn’t find any information about “cats” alone.

This is an instance of a general problem: people generally assume that if they provide more information, they’ll get more and better results; however, most search engines are designed such that the more information that is provided, the further constrained the search and the fewer the results.

In practice, if someone starts describing a man they’ve met a “tall and dark-haired, with a scar on his cheek,” they usually assume you’ll also think of the not-so-tall person who is dark-haired with a scar.

They also assume that if they give you more information (e.g., that the person has a talking parrot and smells like sea salt), you’ll be more likely to correctly identify the person, even if they got one of the details wrong. However, traditional database searches are usually written such that a single incorrect search term will mean that you get no match.

Most traditional database searches suffer from being too rigid in their results. They include all matches and only exact matches. People are much more successful if they can also see near-matches, ordered by the closeness of the match.

Most traditional databases searches suffer from being too rigid in their results. They include all matches and only exact matches. People are much more successful if they can also see near-matches, ordered by the closeness of the match.

Another example of this problem is with parametric searches. This type of search provides a form with multiple options and is typical for database searches with multiple fields.

While this type of advanced search enables a more powerful search capability for skilled searches, many people will either assume they must fill out all from options (and thus overconstain the search) or that filling out an additional field will provide more opportunity for matches. Because of these assumptions, an implementation that ranks the degree of match will be more effective.

An advanced search option is a nice feature for experts, but most users will be most successful with a single text box in which to enter their keywords. Typical syntax for web searches is to support a plus sign (+) before required keywords, a minus sign or hyphen (-) before keywords that must not appear, and quotes around multiword phrases that must appear in the order presented, and to require that capitalization match if users enter uppercase or mixed-case search terms (lowercase terms should match any capitalization).

People have a variety of default assumptions about where a link leads, depending on how it’s presented.

In most cases, people assume a link will take them to another page on the same site unless something indicates otherwise.

Thus, if you have a link that goes to an external site, make sure the link label is very clear to that effect or that the link visually indicates this, such as by being grouped with other obviously external links.

See-Also Links
People also generally assume that a link will take them somewhere within the same branch of the hierarchy that they’re currently in, usually to a deeper level, unless something in the presentation clearly indicates otherwise.

Thus, if you display an expanded outline, users won’t be surprised if a link in the outline takes them to the appropriate other location in the hierarchy, but they’ll be quite surprised if they click on one of the subnav options and find themselves in a completely different branch of the hierarchy.

This problem presents itself when you have topics that naturally fall into more than one category.

In this case, one of the simplest solutions is to pick a “primary” category for that topic, and in any other category, omit it as a normal navigation option, but present it as a “See also” link, which alerts the user that the link will go elsewhere.

Scope and Scope Notes
When people come to a site, they want to know what they will be able to find on the site. This is the scope of the site.

What does the site cover? What is not included on the site? How much have I seen? What portion or how much remains to be viewed?

People can feel overwhelmed when they have no way to estimate how much information is available on a site.

They have trouble determining when to stop looking when they can’t gauge how much they’ve seen or how much more remains.

They can’t correctly evaluate whether to postpone the search until later if they believe they’ve already seen almost everything.

Provide a sense of the size and scope of your site. You can indicate this by presenting a clear explanation on your home page of what your site contains, by choosing clearly stated and comprehensive categories in your navbar, by ordering navigation options (so missing pieces are easily spotted), and by providing a site map or index.

One common technique used by databases to indicate scope is to show how many records are available in any given category.

For instance, in the following example we indicate how many products are available in each product category, which helps not only determine the number of selections for any particular type of product, but also signals what type of product emphasis this store has.

Products: Furniture (12) Appliances (12) Electronics (55) Home Décor (36)
Appliances: Ovens (2) Microwaves (5) – Toasters (3) – Blenders (7)

Scope notes provide information that clarify the range of topics encompassed by a category. Scope notes help provide the scent of information for what lies beneath by elaborating on the title of the link.

Scope notes may be representative subtopics under each link or brief descriptions of each link, as shown in the following example.

Orientation Cues
Pages need to be clearly identified so that users know where they are at all times. People can pop into any page from a search engine, so they need to be able to identify what site they’re on, what page they’re on, and how it relates to their information need. Use clear site titles, page titles, and tag lines.

Page Titles
Use page titles that are as close as possible to the link titles that users followed to get to the page. For instance, if a link says “Appliances,” be careful about naming the linked page “Kitchen Appliances” or, worse yet, “Kitchen Gear.”

While this may provide useful additional information, it is usually better for the link to be consistent with the page title.

Otherwise users may think they clicked the wrong link, especially if they were looking for nonkitchen appliances. On the other hand, some minor differences will rarely confuse people, such as a link called “Toasters” that goes to a page called “Our Toasters.”

Pages should be labeled both in the <title> tag in HTML and with a large, obvious title in the body of the page. While the <title> tag may seem sufficient, most users never seem to notice the title in the title bar of the window.

The title you provide in the <title> tag should be meaningful without any additional context, such as when it gets reported in a search engine. A common convention is to have the site name followed by the page name, as in “XYZ Corporation Toasters.”

Some people like to pad titles with keywords to improve their performance on search engines, but this usually undermines tradability. Of course, the portion of the title that names the page should exactly match the page title you show in the body of the page whenever possible.

Landmarks
Some degree of variety in page design helps the user to have a strong sense of the location within a web site. Consistency remains important, and certain features, like the site name, page title, and navbar, should be kept as regular as possible.

However, some simple changes can help users understand where they are in a site. Using colors or large symbols to identify major sections of a site helps users recognize when they’ve skipped from one section to another.

In addition, significant pages can be made unique by modifying the layout (as a regular variation on the layout themes of the site) or by using a particularly strong page element, such as a large table, image, or typographical element (such as a bulleted list).

Common and clearly identifiable pages can act as landmarks that help users ground themselves within a site, and help users avoid getting lost in a morass of same-old, same-old template pages.

Page links are links that, instead of taking you to another page, simply scroll you down to another location on the current page. When people see links, they typically assume that they’ll lead to a new page, so to avoid confusion, it’s a good idea to explicitly label such links, like this:

On This Page: Lions – Tigers – Bears
or
Scroll Down To: A B C D E F G H I J

These can be convenient shortcuts on long pages, but they can create some unusual navigation confusions.

Imagine clicking on Tigers in the previous example: you view the tigers, browse around the page, scroll back to the top, and then decide this page doesn’t have that what you want. So then you click the Back button on your browser – and it leaves you in the same spot!

You expected it to take you to the previous page, but it actually took you to the previous position on the same page when you last clicked a page link. For this reason, we recommend keeping links to the absolute minimal usage. Label the page links clearly and avoid linking back and forth all over the page.

Back to Top links are also fairly popular. The theory is that they save scrolling time, and when used in conjunction with page links at the top of a page, a user can jump down to a particular item and easily jump back up to the navigation options.

However, scrolling down to the exact spot is the hard part; scrolling back up to the top is fairly fast and easy, so this doesn’t buy you much time. After using a series of page links and Back to Top links, a user will find that the behavior of the Back and Forward buttons is very confusing. Consider this tradeoff before using Back to Top links.

Search engine development is much harder than most people realize. If you want a search engine for your site that works as well as Google or AltaVista, your best bet is probably to buy it, and expect to pay quite a bit.

On the other hand, if you can’t afford to build or buy a good search engine, you may be better off without one. A search engine that gives poor results will not do your users any favors.

Some search engines can be obtained for free, and some search engine software is available in the public domain. While these tools can be quite effective, be sure that they provide the search features that are needed for your application.

Traditional database searches work by comparing search strings to each record in the database, and they return a match if the keyword exactly matches the record (or is a substring of the item in the record).

Full-text retrieval systems try to address several problems with this approach. They speed things up by indexing the information, and they use several rules of thumb to estimate the degree of relevance of each match, based primarily on how many times the keyword appears in the matching document.

Indexing creates a list of all terms in the whole set of documents, with references back to the documents. Thus, at the time of the search, the search term is looked up in the index and the matching documents are immediately found. When more than one search term is used, the set of documents is combined from the list provided in the index for each term.
 

In a navigation bar, be sure to mark the current page viewed, and don’t link the current page. If the navigation bar shows several levels, mark the ancestors of the ancestors of the current page as needed to make the hierarchical position obvious.

“You are here” indicators include such simple techniques as marking the current location with a little arrow or triangle and coloring the name of the current page.

For instance, in this example, the current page is for the product called QuickCrisp Deluxe, so it is unlinked, it falls into the Toasters category, so the Toasters link is in bold. Toasters is still linked so that the use can easily navigate up a level.

Appliances: Ovens – Microwaves – Toasters – Blenders
Toasters: QuickCrisp Classic – QuickCrisp Deluxe – NoBurn Safety Toaster

Evaluation helps to ensure that the design on track to satisfy the goals of the design.  Evaluation may include usability evaluation, client review of the design, quality assurance, or technical feasibility evaluation. 

Evaluation is part of what makes usability pervasive, but usability is also fully integrated into every stage of the process.

This process is meant as a paradigm that any actual project should take as an ideal model, but it is not meant to be a inflexible prescription forced onto a project. 

This process handles multiple activities occurring in parallel.  Layout, content development, and technical proof-of-concept designs need to be explored simultaneously as you proceed in the process. 

They may follow separate timetables in larger projects, but the same overall process applies.

Iterative Design
Our design approach is to progressively refine the design through low-cost evaluation at early stages of design, building up to successively more usable designs at each stages of design. 

The most expensive stage is Production, where the final web site is produced.  We want the final design to be as usable as possible so that only minimal changes will be needed at completion. 

At each stage, we want to cycle between refining our design and evaluating our latest refinement, iterating until we’ve achieved a level of usability that we’re satisfied with before continuing to the next stage. 

Evaluation at each stage enables us to incorporate user and client feedback loops to optimize the design.

At each evaluation, we determine whether our design is adequate for continuing on.  We do this by establishing benchmarks, or target usability goals. 

The difficulty with the iterative design approach is that budget and deadlines are typically set before the process, and hence, we may not be able to afford to iterate until we meet our final criteria. 

As an alternative, we may only be able to iterate until our budget has been exhausted, which could be well before our goals are met. 

Of course, the critical questions to ask are: 

If we haven’t met our benchmarks, will the project be successful? 
And if not, should we extend the budget and deadline or should we cancel the project?
So how do we iterate appropriately given these constraints? 

We must:
(1) Plan which types of evaluation to do and how many cycles of iteration will be allotted for each step; and
(2) Leave some slack time in our original schedule to allow for unexpected iterations.

Stages of the Process
The following describes each segment of the Pervasive Usability Process, including the Evaluation component, which can take place throughout the process.

Stage 1.  Requirements Analysis
This is the stage at which you formulate the design problem.  At this stage you determine the target audience and target platforms, user goals, business goals, technical requirements, and so forth. 

This is where user needs and target usability requirements are determined.  Evaluation at this stage usually involves evaluating prior art – previous versions of the product being designed, competitive products, or how people have achieved the same goal without software. 

Common evaluation methods at this stage are competitive analysis, user interviews, and surveys. 

This is the most important step in the process because if you incorrectly identify the goals and parameters of the project, then everything you do after this stage is wasted.

Stage 2.  Conceptual Design
At the Conceptual Design stage, the functionality of the product is worked out.  The design is sketched out at an abstract level of specification that avoids committing to any specific layout or implementation. 

Typical design methods include use cases, task analyses, and information architecture (working out flowcharts and outlines of the system). 

Stage 3.  Mockups and Prototypes
At this stage, visual representations (mockups) or interactive representations (prototypes) of the final design are crated and refined. 

The sole purpose of creating these mockups is to get a chance to evaluate the design early, before the final system is produced. 

The goal is to produce these mockups rapidly and evaluate them efficiently so that they can be refined, elaborated, and reevaluated before you make the final product. 

This can save tremendous time and money by avoiding expensive changes later in the process. 

Stage 4.  Production
At the Production stage, the final product is created.  Final text and graphic content must be developed, and the site must be coded. 

Stage 5.  Launch
Finally, the product is launched and made available to the public.  Just before launch, a final quality testing phase must assure that everything is ready to go online; immediately after launch, the correctness of the site must again be verified. 

Later, a web site will continue to be maintained and refined, and the design process is repeated again from step 1. 

Evaluation
At every stage of development some types of feedback system is essential.  We want to discover as quickly as possible when the design process veers off track.