After completing this chapter, students should be able to: State the design principles for the computer

medium Develop a standard look and feel for a Web site Properly utilize white space Understand the importance of active white space Focus design on the user Evaluate Web sites using screen-oriented design principles Find an appropriate balance of information for a Web site Understand the difference print media and information displayed on a computer screen

The look and feel is the way the Web site works and the personality that it conveys to the user. The web designer should test the design of a site in order to ensure that the greatest number of users can easily and reliably navigate within the site.

The loud colors and the text style used in the site are hurting to the eyes and do not imply what the site is all about. It will cause the users to navigate away from the website.

Web site should be consistently displayed as it was intended across different browsers, operating systems, and computer platforms. many designers make the mistake of testing their Web pages in only one environment, assuming that their pages will look the same to all of their users. It is a grave mistake, as different Web browsers decode the underlying HTML of a Web site differently, often with very noticeable changes. The way to avoid the problem is to make the Web site design portable. This can be done by viewing Web pages in the browsers that user are likely to have, using popular operating systems, and checking the site on more than one computer platform to ensure accessibility to the greatest number of potential users.

The user is watching serial on their new Internet TV and in addition decides to check his email which the user opens in a sidebar and views simultaneously with the program. The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad The user is on a clients website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed.

The website should be available to as wide an audience as possible; The website should contain the same content wherever it is viewed, where feasible; The websites structure should be the same wherever it is viewed; The content should be displayed in a manner that is appropriate to its environment.

YouTubes standard home page.

Understand Whats Important

There may not be room for complex navigation, especially on smaller screens, so keep it simple. Structuring our content is important, for readability. Provide as much content as is feasible. Remove Superfluous images Remove Unsupported file formats Remove Unnecessary text search engines are still a massive source of traffic. Keeping your content formatted for easy retrieval is a must.

Create a Solid Information Hierarchy

Keep Content Available

Make Your Content Search-Engine Friendly

Web pages need to be accessible to users with a variety of different connection speeds. The most important point to make in this subsection is that if a Web page is overloaded with graphics or contains large files or animations that need to load, users are likely to leave the site before they ever get to the content. Always design a site with consideration for users with lower bandwidth. The easiest way around this issue is to design pages that are less graphic intensive, containing graphics that will download quickly for all users regardless of connection speeds.

netrada-northamerica.blogspot.com

Slow load time Users are impatient Not all the images are available

An important point to make is that the presentation and organization of information in a Web site is the single most important factor determining the success. It is also important to point out that every visitor to a Web site is different. Some visitors will be randomly browsing while others are seeking specific information. A good designer must anticipate and plan for the actions of both types of visitor. Information must be easy to read and easy to find. The use of too many fonts, colors, and lengthy passages of text should be avoided at all costs since they are very distracting and confusing. Text should be broken into reasonable segments. A good suggestion from this subsection is that a viable alternative to providing endlessly scrolling pages is to break up information into smaller chunks and link them with bookmarks (hyperlinks within a Web page).

Overloading of information.

This section discusses the importance of consistency between Web pages within a Web site. A designers choice of colors, fonts, graphics, and page layout should create a visual theme to the user that gives them a general idea of the content of the site. The theme should be indicative of the impression that the designer or organization wants to portray. As the whole site is being designed, each individual page within the site must be considered.

illustrates the importance of having a unified look within a site and creating smooth transitions between pages. This will prevent the user from becoming lost in the site, wondering if they are still in the original site or accidentally clicked somewhere and left it. The company logos should remain in the same place on all pages for consistency.

using a grid, which is a conceptual layout device that organizes the page into columns and rows. In HTML, the best way to create a grid and a columnar format is to use tables. By using tables and turning the borders off, the visitor to a Web site will not see a table, but only a coherent, well-structured page.

white space is the spacing between different elements, whether it be between the actual sections of the page, or right down to the space between letters. In most cases, we use white space (also referred to as negative space) to space out content for easier, and ultimately faster, scanning of a page without the need to put in specific separating elements.

Google, as you can see, is a big advocate of white space in their designs. The search engine is widely regarded to have a clean design since the focus is on the main aim of the page, without massive dedication to other areas

A lack of active white space creates the impression of information overload and confuses content presentation. Too much white space, on the other hand, gives the impression that the site lacks content. It is also noted that the important, most current information should be presented in the center of a viewers attention.

The most obvious benefit of whitespace is that it increases legibility.

Believe it or not whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%.

Whitespace can also be a powerful way of drawing the users attention to a particular screen element. To a non designer the most obvious way to make something stand out is to make it bigger. However often surrounding the item with whitespace can be just as effective.

Finally the use of whitespace can be a powerful way to communicate elegance, openness and freshness. Obviously this isnt always the design look and feel you wish to communicate. However when it is, you cannot do better than having loads of whitespace.

Keep in mind the user Why has the user come to your Web site? What type of information does the user want? Is the site for information, entertainment, ..?

Think about how the user will interact with the Web page If the page is a collection of links, interaction will be clicking on the content and scrolling Pointing to graphics and clicking on images to reach another page. Design page into separate groups, e.g., links for pages of physics, maths, comp sc.,

One great way to do interaction with user is with animation. The human eye can notice movement fairly well, especially if the rest of the page is static. Animations can be implemented with JavaScript and are a nice way to provide visual feedback. adding too many animations could cause interface friction because the speed with which the user performs each action will be slowed down by the duration of the animation.

One of the techniques used to achieve this is the integration of keyboard shortcuts or navigation.

Most users like to try the basic version of an application first to get a better sense of what it offers and how it works. Its the designers task to make sure this transition is as simple as possible.

Many applications use color coding to help visually distinguish between different types of entries. This way, the list becomes easily scannable.

Many applications provide custom workspaces for people and businesses. Personalization can help make your users feel more at home. This can be done by giving users options to customize the look and feel of the application interface. Let them select the color theme, the link colors, the background and so on. Even a small amount of customization will allow your users to make their pages their own.

you can provide short help messages to get people started. One important thing to note is that you need to attract their attention to this message.

Pretty much every application has some form of feedback messages. These are little messages that pop out when there is an error or warning or perhaps when an action is completed successfully. Designing these messages correctly is important because you dont want to confuse your users. A good practice here is to do a couple of things. First, color code the different types of messages. Messages that notify users of successful actions are usually colored green. These employ the traffic-light analogy of green meaning Go. Warning and error messages are colored yellow. Same traffic-light analogy here: yellow means slow down and wait. You can also distinguish between warning messages and error messages by coloring errors red and warnings yellow.

The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To minimize the barrier, weve got to speed up the process. This means removing all optional elements from the form and leaving only the core essentials. The optional stuff can be filled in later.

talks about the relative areas of screen importance. The center of the screen is prime property and is the most important viewing area. The next most important area is the top of the screen, then the right edge of the screen, followed by the bottom of the screen and finally, the left edge of the screen.

Guide the Users Eye A user may scan a page in many ways. One of the ways is to scan a page from left to right, and then down to next line

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables for Web-page presentation. However, other fields of layout design work with grids, and these form the basis for the structure of page designs.

Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components.

Instead of arbitrarily picking column sizes, grids enable you to create a common visual language throughout an entire Web site, rather than deciding things on a page-by-page basis. Components relate to each other, which makes it easier for users to scan content and develop familiarity with it,