UI Design Guidelines for Web Application

The primary focus on UI enables

Ease of development including:

Coding
Debugging

Unit testing

Cross-browser compatibility
Consistency and standards
Internationalization (i18n)
Accessibility
Performance
Scalability
Extendability
Sustainability
Help and documentation

Define the business objectives of the site (service provider requirements)

What are the main purposes of the site/application? These could include disseminating information, advertising services, selling products, positioning in the market or demonstrating competency.
Who do you want to visit the site, is it internet or intranet - what are the important user categories and what are their motivations and goals?
What type of pages and information will attract users and meet their needs? E.g. hierarchically structured information, a database, downloads of software/files, incentives to explore the site.
What are the quality and usability goals which can be evaluated? e.g. to demonstrate superiority of the organization to the competition, appropriateness of the web site to user's needs, professionalism of the web site, percentage of users who can find the information they need, ease with which users can locate information, number of accesses to key pages, percentage of users visiting the site who access key pages.
What is the budget for achieving these goals for different parts of the site?

Identify responsibilities for achieving quality and usability objectives, and estimate the resources and budget for these activities

Site structure

Structure information so that it is meaningful to the user.
Categorize information across overlapping audience needs.
A structure that makes sense to the user will often differ from the structure used internally by the data provider.
Different user groups may need different interfaces.

Site Content

Make text concise and objective.
Make the text scan able with bulleted lists, highlighted keywords, meaningful headings and short sections of text.
Headings and subheadings
Visual aids

Website Layout - general design rules

A website is in effect a folder or directory containing files (web pages, images, scripts) and other folders. Website layout is about creating a structure for these folders and files and how they are linked together.

Use page titles which make meaningful bookmarks
All pages should link back to the home page.
Any page should be a maximum of two clicks away i.e. 2 links. Or
Minimize the number of clicks needed to reach the point where users are confident they are on the right track: the more clicks the more users you lose.
Try not to have more than 20 links per page.
Highlight important links/text
Web Page names should be descriptive and contain keywords.
Links to Internal pages should obey normal linking practice and have descriptive anchor text. I.e. keywords should be used in the link name.
Every page should have at least one other page pointing to it (i.e. and incoming link).
A link to a site-map (large sites only) should be included on each page so as to aid user navigation and make indexing by search engines easier.
A link to a contact page should be included on each page.
No visitor likes to wait for web pages that take much time to load. To design website that loads quickly and does not take more than 15 seconds.
Do not expect users to read large amounts of text on-line: provide one large page for printing or a file to download.

Web Page Design

The important information should fit on one screen, as some users will not bother to scroll the home page
Search was always liked by users, and has now become mandatory for any large site since the amount of content keeps growing.
Animation is almost always annoying and should be avoided most of the time
Use the ALT tag to describe graphics, as many users do not wait for graphics to load
Provide search topics using the META tag in the page heading.

Designing Effective Website Navigation

To be effective Your Website Navigation design should allow visitors to quickly and easily reach the parts of the site that they are interested in

Make sure your links are well organized according to the order of importance.
Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence.
Design navigation on the top or on the left as these are the first places our eyes go to.
Meaning of link text is clear and each is unique.
Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links.

Web Page Fonts

The way in which you display the text on your web page will have a great impact for success.
Webpage text always consistent with your fonts.
The standard fonts used on the Internet are Arial and Verdana. (Simply because easiest to read on computer screen).
The standard text size is 2
Headlines, which require a larger font size, are a bit different. A popular headline font used is Georgia.

Selecting style/themes by user

Visitors switch between lists of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed.

Simply define on your page a list of selectable style sheets (using: ).
Persistent cookies are used to store the user's selection.
Permanent session information storage.

Internalization – W3C I18N

Encoding
Use character rather then escape
Language resource file, containing translated text strings.
Use style sheets for presentational information. Restrict markup to semantics.
Use an appropriate encoding on both form and server. Support local formats of names/addresses, times/dates, etc.
Consider a liquid flow of text to allow for differences in word length.

German text on average uses 1/3rd more characters per words than English and Asian languages often take up much less character space than English words

Consider using CSS positioning for text elements or use flexible relative table widths where the cells expand or contract depending on character layout.

Minimize text contained in graphic where possible.

Graphics or images containing text will takes longer to localize and are not as easy to translate as HTML text.
replacing text in a graphic with HTML text where possible

Technology

HTML
CSS
AJAX Technology
JavaScript Framework

Maintenance

Plan and review the site structure as it grows, review the user needs, and make sure the site continues to meet the needs.

Monitor feedback from users.
Monitor the words used when searching the site.
Monitor where people first arrive on the site, and support these pages as entry points.
Check for broken links.
Compare your site to other comparable sites as web browsers and web design evolve.

Few top web design mistakes

(Learn from mistakes)

Our site tries to tell you how wonderful we are as a company, but not how we're going to solve your problems.
We've designed our site to meet our organization's needs (more sales/contributions) rather than meeting the needs of our visitors.
We say "Welcome to..." on our home page.
It takes longer than four seconds for the "Man from Mars" to understand what our site is about.
Navigation graphics are not the same size and/or color.
Our site doesn't make us look like credible professionals.
Our home page — or any page — takes more than four seconds to load.
We never conduct user testing.
We don't analyze our log files.
We don't know which design items are not necessary.
Quickly scanning the page doesn't tell our visitors much about its purpose.
We have not eliminated unnecessary design items.
Our site has different looks on different pages or sections.
We don't know if our site looks the same in the major browsers.
Our pages have too much/too little white space.
Our site mixes text colors on the page.
We don’t put design elements where our visitors expect them.
Logo is not on the top of every page and clicking it doesn't lead to the home page.
Visited links don't change color.
Our site doesn't make visitors feel they can trust us.
We don't identify PDF files with an icon.
Our site uses divider bars.
Our logo does not look like it was professionally made.
No one has spent the time figuring out if our color scheme alienates our international users.
Our site breaks when visited with the JavaScript turned off.
Our site doesn't have a privacy or legal statement page.
Our site mixes and matches text sizes on the page.
We don't know what content is popular.
Our site's design was "borrowed" from another site.
The important content does not fit in the first screen.