Usability and UI Designs should go hand in hand

(1) Ease of Use: The site should be easy to use even for a layman. One should be able to easily figure out what is present on the site and where he can find it.

(2) Effectiveness: It should present objects in an effective way so that it casts an image on the impressionable minds of the visitors. Simple words should be used that easily convey the message instead of incongruous or bombastic words.

(4) Engaging: The design and content should be engaging that keeps the interest of the visitors running and makes him to access various portions of the website. It can be through layout, designs, graphics, contents etc.

(7) Enjoyability: The site has to be enjoyable to surf through. It’s human tendency to come back to things that they find enjoyable.

Apart from these, other things that come into play include:

(1) Memorability: One should easily remember the path and sections/pages of the web so that they keep coming back again.

(2) Satisfaction: The most important- satisfaction. The user should feel satisfied at the end of the entire process. This satisfaction may come through quick page load time, providing relevant information or redirecting the user to the required page.

Web usability makes use of two things- the human science and User Interface design elements, and then mixing it with graphics and images in a creative, controlled way. When I say graphics, it does not include images only, but texts also. Web sites today are heavily packed with multimedia content like audio and video apart from Flash designs/images.

Attributes of a Website-
Text based: Text is the lingua franca of computer technologies because text can be read and “understood” by computers. In other words, software reads and performs actions based on text commands.

When Web content is presented as text, communication can occur.

Structured: Order is the shape upon which beauty rests.

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Software can read text but cannot attribute meaning without additional information. Document structure supplies meaning through tags that provide defining information for key document elements. Then, when reading, software can interpret certain aspects of a document.

When Web content is structured, meaningful communication can occur.

Operable: Web pages are not merely for consumption. People operate Web pages. For the Web to be Interactive, its functional parts must be in working order.

Clearly, operability is more than making sure all working parts are operable. They need to work properly and according to expectation. For instance, a link might be clickable, but if it leads to “Page not found,” it cannot be considered functional. A link that is embedded in an image may be operable, but if it cannot be seen and does not include alt-text that describes the target, then people who can’t see it won’t know where it leads.

When Web pages are operable and function according to expectations, interaction can occur.

Flexible: When creating a fixed object, such as a book, the designer must make decisions about format—size, typeface, line length, etc. Since the aim is to create something that is usable by the largest number of people, these decisions must be based on what works best for the “average” person. In the case of a book, type size is generally set at a size that is comfortable for people with 20/20 vision.

 The Human Science of Design
Let’s begin with the science of design. I promise you that you don’t need to be very good in science to be able to understand this piece or to be a good designer. It just needs a good understanding of what everyone likes and what aesthetes is all about. We all have a capacity to recognize and remember things. So the first in the order is the 7±2 Rule.

• 7±2 Rule
  
  According to this rule, the number of linked pages that a website displays should lie between 5 to 9 as the human brain has the capacity to remember about 5-9 things at one go. This was discovered by Professor George A Miller way back in 1954. However, the findings are still debated on whether it is applicable to Websites or not.
  
• 2 Seconds Rule:It says users need not wait for more than 2 seconds for certain kind of system response like application switching, application launch time.
  
• 3 Clicks Rule:According to this rule users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks. In other words, the rule emphasizes the importance of clear navigation, logical structure and easy-to-follow site hierarchy. In most situations the number of clicks is irrelevant; what is really important is that visitors always know where they are, where they were and where they can go next. Even 10 clicks are OK if users feel that they have a full understanding of how the system works.
  
• 80/20 Rule(the law of the vital few and the principle of factor sparsity)This is also known as Pareto Principle which was suggested by Joseph M Juran and named after Italian economist- Vilfredo Pareto. Originally, this principle was applied in the field of business only, but now it is finding wide applicability in Web sites also. It says 80 percent of the effects are from 20 percent of the causes. If you observe 20 percent of your visitors and make improvements to the design of your website, you can improve your profits by up to 80 percent. In other words, 20 percent of your visitors are responsible for contributing 80 percent of your profit.
  
• Fitts Law:This law was published by Paul Fitts in 1954 which is a model of human movement that predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target. The law is usually applied to the movement of the mouse visitors have to perform to get from point A to point B. For instance, the rule can be important to place the content areas in a more usable way to maximize their accessibility and improve click rates.
  
• Gestalt principles of form perception:The Gestalt approach can be said to be a "bottom-up" theory as it starts from the bottom (the aspects of the stimuli that influence perception) and work its way up to higher-order cognitive processes
  
  The law of proximity posits that when we perceive a collection of objects, we will see objects close to each other as forming a group.
  
  The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other.
  
  The Law of Prägnanz (figure-ground) captures the idea that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground).
  
  The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their centre.
  
  The law of closure posits that we perceptually close up, or complete, objects that are not, in fact, complete.

• Shneiderman’s Design Rules
  Ben Shneiderman proposed his 8 rules from user experiences which are applicable in wide range of interactive systems.
  
  (1) Consistency: The entire page has to be consistent in terms of layout, font used, images, colours and content. If consistency is missed then it leaves the user perplexed.
  
  (2) Shortcuts: Once people start using the website, they should be able to use the shortcuts. Many sites offer keyboard shortcuts to surf through the page. Google is a good example in his case.
  
  (3) Informative Feedback: For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
  
  For example whenever we click the send mail icon on the Yahoo! mail or any other, a message is displayed that says ”sending mail” before it is finally sent.
  

  

  (4) Closure: Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.
  
  (5) Error handling: If an error is made by the user, the site should offer simple comprehensible mechanisms for handling the error.
  
  (6)Easy reversal actions: This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.
  
  (7) Control: Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions.
  
  Design the system to make users the initiators of actions rather than the responders.
  
  (8) Reducing short term memory Load: The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

• What is your site all about
  This is the most critical part of any website. It has to be presented in such a way that it neither looks like advertising nor boisterous. When users have needs, they typically query search engines and allocate only a few seconds to scan each of the sites that the search engine drags up.
  
  The homepage is the most important page on most websites, and gets more page views than any other page. Of course, users don't always enter a website from the homepage. A website is like a house in which every window is also a door: People can follow links from search engines and other websites that reach deep inside your site.
  
• Content
  Content is critically the most important part of UI designs which may surprise many. Yes you got it right! Content is the most influential part of any website. Images can only convey something, but it’s through the content that you can express what your business is all about.
  
  The general way of writing content is in Inverted Pyramid style. As human beings want instant gratification, the conclusion is written at the top followed by description and then other concerned items.
  
  Never use pop-ups as the user often comes with a disgusting look on his face as something severely bad has popped up on his screen.
  
• Cross Browser Compatibility
  Growth in the number of Internet users has led to an important development in the field of browsing softwares. Various surveys have found that people people are using diffrent browsers to view different pages. This should be taken as a serious drawback on the part of web designers.Nobody likes using n different browsers for downloading different sites as it is best supported on X,Y or Z browser.The onus lies on Web Designers and Developers to develop applications that are supported by different browsers like Safari, Mozilla Firefox, Internet Explorer, Safari, Opera etc.
  
• Visual Noise Vs Visual Treat
  Very often we come across sites cluttered with images and text all over. The web owner may think that he is presenting plenty of options and loads of information at one place. But sorry Sir, you are mistaken. Cluttering the space with too many images and texts is known as visual noise. It turns off the visitors. So try to use only that much images which are necessary and that support the content.
  
  Using too many texts does not help the website either. The user is never interested in reading everything present on the web. They generally skim and scan through the content. We will be discussing content in the Content section of UI Designs.
  
  Avoid using moving or blinking texts as they more act as a distractor instead of attracting attention. We all need peace of mind to go through something easily.
  
  Images should be used to support or suffice the website and not for decorative purposes. Remember heavy use of images increases the page load time, and the users don’t have the patience to sit for that long.
  
• Design Conventions
  Creativity is allowing oneself to make mistakes. Art is knowing which one’s to keep. Designing a website involves both.
  
  Design is a means to an end. We build Web sites so people can use them. There are certain design conventions that are followed widely. However these are not established conventions. Widespread changes should not be made to lay out designs.
  

  

  Creativity in advertisement and creativity in websites is somewhat different. Ads are meant to have an element of shock or surprise so that they can impregnate into the minds of the audiences. But if a website tries to adhere to the same guidelines, it will turn out to be loser in most cases.
  
  It’s really hard to underestimate the importance of whitespace. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.
  
  Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.
  

  

  
  For example- logos are generally placed on the top left hand side of websites. However, BMW motors broke this tradition by placing it logo on the top right hand side of the page.
  
  Whenever you are planning of redesigning your webpage, be careful as the users are already acquainted with the existing flow of the web. If you make any noticeable changes, it may disappoint or disinterest your existing user base.
  
  HTML is always preferred over other languages as it is search engine friendly and loads up quickly.
  
• Using CSS
  CSS, popularly known as Cascading Style Sheets, allows the user to separate Content and Layout, thus, enabling faster page download.It also provides flexibility to the design and is adaptable to diverese formats. It also makes the site more search engine friendly by allowing the designer to arrange the content in such a manner that is more appealing to search engines.
  
• Colour and Contrast
  Colour is a very powerful instrument that applies personality to your site. You just can not imagine what power a colour has to make or break something. Just search for the keyword “Pink locker-room”, and you will be surprised with the results.
  
  A significant number of people are unable to differentiate between colours or they are colour blind or have low-vision deficiencies. There are many people who cannot differentiate between green and red when they're right next to each other.As such care should be taken while using colours. The texts should be separated from the background and should be easily readable. Dull and gloomy colours should never be used as they cast a negative effect on the visitor/reader. A good example in this case is of Cuil.com. The site has just been
  

  

  launched by announcing itself to be the “World’s biggest search engine”, however it has been gaining popularity because of all the wrong reasons. One of them is poor background color selection. The following question answer session will help you undersatnad what's hot and what's not for the UI design for your website:
  
  (1) What colour will your audience expect to see? A site about gardening would probably use greens and brown, a site for Manchester
  

  

  
  United Fans would probably use red, yellow and white and a site about sailing would probably use blue to create the association with water.
  
  (2) What is the tone of the site? Serious and professional, then blue and grey, fun and energetic, then red and yellow.
  

  

  
  (3) What age group are you aiming at? Teenagers? Then blue, black and grey will probably not excite them.

  Text should have high contrast to be easily readable. This means that the color or brightness of the text should be as different as possible to the background it is placed upon. Black text on a white background is the best option.
  
  Be sensitive to the commonly accepted rules of the Web. If you're offering professional services you shouldn't really use a light colored text on a dark background. For example, white on black. This is really only suitable for entertainment Web sites that want look trendy or cool.
  
• Fonts
  The fonts should complement the overall purpose of the site. Take this example-You have to attend a board meeting and you enter into the room in a boxer short and Hawaiian tee with fancy flip-flops. What kind of impression it is going to create on your seniors? Definitely you are in a mood of vacation. Jokes apart, this may jeopardize your future. In the same way, font has to be in-sync with the target audiences and the aim of the website.
  

  

  NamitaKulkarni.com is a good example in this case where artistic fonts have been used as it is a painter’s website.
  
• Readability Vs Legibility
  Readability and legibility are often confused. Readability is most often and more properly used to describe the ease with which written language is read and understood–it concerns the difficulty of the language itself, not its appearance. Factors that affect readability include sentence and word length, and the frequency of uncommon words.
  

  

  In contrast, legibility describes how easily or comfortably a typeset text can be read. It is not connected with content or language, but rather with the size and appearance of the printed or displayed text.
  
  Avoid adding PDF documents for reading live as users simply hate it to read a PDF file online. Worst of all, PDF is an undifferentiated blob of content that's hard to navigate. PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.
  
• Navigation Support
  Structure and Order- these are two very sensitive issues. The interface design has to be very accessible with out any trouble or hindrance. It would be foolish to imagine all the visitors of the site are aware with what is present on your site. Please include a site map that showcases everything present on your site in a
  

  

  structured manner. Also, if possible include a good search feature as even the best navigation support might not turn to be good enough.
  
• Liquid Layout
  Liquid layout is defined as the property by which a webpage can be adjusted on different screen sizes without any distortion. Liquid layouts are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the

• Using Hyperlinks and Breadcrumbs
  Hyperlinks should be placed properly and differentiated from the rest of the texts by using a different colour. In case the target audience consists of people having visibility problems, the hyperlinked texts can be underlined as well. But in normal circumstances avoid using underlines.
  
  
  It is a good practice to provide hyperlink to the homepage through image (generally on top –left, which may be the company logo).Avoid using an active link to the homepage from the homepage as it serves no purpose and often leaves the user flummoxed, beside being a wastage of time.
  
  Dead links should not be present on the site anytime. Dead links are those links which take us to page that existed previously and now they have been removed.Never never place a hidden link as it may annoy the visitor or he may feel cheated or betrayed.
  

  

  
  
  Breadcrumbs describe the path through which the visitor reaches a particular section of the website. It helps in navigating the website easily.For example- in the above diagram the breadcrumbs are represented as

Rediff Home >> India >> News >> PTI > Report

• Pagination
  Pagination is a portmanteau made of the words page and navigation. It means navigating through different pages of the website in a particular section.In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.
  
  A website may contain different number of pages in a particular section. It may become an arduous task for the visitor to remember each and every page number that he has navigated through if there is no distinction being made between visited and unvisited pages.
  

  

  
  The earlier practice was to use Previous and Next buttons. But now, this practice is avoided and page numbers are left at the bottom or top or both. Use different colours for distinguishing between the page that is being visited, already visited and those which have not been visited at all.
  
• Horizontal Vs Vertical movement or Scrolling Vs Dragging
  How does it feel when you have to drag the horizontal bar on your browser? If I am not mistaken then you are nodding your head in negative. It is really a bad user experience when you have to drag it instead of scroll it.
  

  

  
  So try to provide vertical navigation instead of horizontal or both. It’s easier for us to read on screen without having to move our mouse on a horizontal path.
  
• Visited Vs Not-visited Hyperlinks
  Knowing where you've been is one of the three basic features that all navigation designs should support. Always use colour differentiation between visited and not-visited hyperlinks. Navigational confusion results when designers disable one of the few useful features of a standard Web browser: having visited and unvisited links appear in different colors.
  

  

  Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is the key to teaching users what the link colors mean.
  
• Frames
  Frames are out of fashion and frameless is in. Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. Navigation does not work with frames since the unit of navigation is different from the unit of view. If users create a bookmark in their browser they may not get the same view back when they follow the bookmark at a later date since the bookmark doesn't include a representation of the state of the frames on the page.
  
  Apart from the above drawbacks, Search engines generally have problems with frames or Frames are not search engine friendly. Many browsers also have trouble in printing framed pages.
  
• Using Flash
  Flash content appear more attractive than other static content present on the web, but they slow the website drastically. Most of us use a 56K modem, and when we are downloading a Flash website, a lot of time is consumed. Use Flash only if it is necessary or you have to make some presentation.
  
• Orphan Pages
  Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space.
  
• Page Download
  Whenever you open a website, it is called webpage downloading or simply downloading. Different websites have varying download times, and in many case different sections of a website may have remarkably different page load times depending on the amount of content present on them.
  
  To make the users interested and keep them swaying away from the site one can to the follow things:
  
  (1) If the page load time is less but more than normal, one can use a hourglass icon or a sand clock icon.
  

  

  (2) If the page load time is more than above, one can use a bar that is changing its colour as the page is loading.
  

  

  (3) For longer page load times one can use graphics along with numeric characters showing what percent of the page has been loaded and what is still remaining.
  
• SOS from 404
  When users receive a 404 error message, they may be unclear as to what's happened and what they should do next. Some good 404 error page guidelines include:
  
  (1) Don't call it a 404 error –- Web users are unlikely to know what this means.
  
  (2) Communicate what has gone wrong -- Make sure users understand what's going on and that they haven't made a mistake or misused the site.
  
  (2) Provide a call to action -- Include a search function and links to the homepage, site map, and most popular pages.
  
• Visibility of Web site Status
  This principle states that your Web site should always keep users informed about what is going on at any given moment.
  
  For example, you could display a small animated hour-glass while the credit card is being processed. Yes, this is a cheap and simple trick. But it works! The user would get the impression that their transaction is being processed and the system hasn't stalled.