Website Design

The goal is to cater to the needs of all the potential users, adapt web technology to their expectations, and never require the reader to simply conform to an interface that puts unnecessary obstacles in their paths.

A ‘user‐centered’ approach to design leads to a general improvement in website interfaces and to an improved correlation between site features and functions and user’s needs and expectations. The following section provides a description of overall website design and related elements:

Website Navigation

The main interface problem in websites stems from the lack of sense of direction within the local information structure. The University and PEMSA’ sites strive to have a comprehensive and easy‐to‐use navigation structure.

The website is Logically Organized and Easy to Navigate

All the websites must be logically organized and designed. All the links should be at logical and intuitive places that users can reach to the links by using common sense. All the content should also be organized logically.

Navigation Bar (Breadcrumb Trail)

It is the row of links that shows the user’s navigation path to the current page and can bring a user back through the site. A navigation bar can provide readers with instantaneous knowledge of the depth of the visited website.

In general, the navigation bar or breadcrumb trail serves two purposes: 1) it provides information to users as to where they are located within the site, and 2) it offers shortcut links for users to “jump” to previously viewed pages without using the Back button or any other link. Navigation bars on the websites increase user’s efficiency and support site learning. The navigation bar must be available consistently throughout the website pages.

Site Map

A site map is a page which outlines the structure of the whole website. It helps the users understand the site structure and layout and thus, quickly gain access to what the site has to offer.

Page & Graphics Design

Without the visual impact of shape, color and contrast, pages are often graphically boring and will not motivate the viewer to investigate their contents. Dense text documents without the contrast and visual relief offered by graphics and page layout and typography are also more difficult to read. At the same time, with the implementation of the WCM, the use and versatility of design elements is limited by the pre-formatted templates that are used for the websites.

Image Size

The size of a single image should not be more than 20KB. It is important to resize images to 72dpi before placing them on a website page.  There are specific measurements for the dimensions of images so that they will fit on the page. (outlined in addendum)

Color Schemes

The main text area of the page should contrast sharply with a plain background. Color schemes should be in compliance with the Universities Style Guide.

Font Size and Style

Font size and style is pre-determined in the style sheets that are a part of the Universities Web Content Management System and Monet template.

Width of the Homepage and Subsequent Pages

The homepage and all other pages of a website must be resolution independent to allow for adaptation to different screen sizes which is predetermined by the Web Content Management system.

Consistent Format throughout the Website

The format of the website pages is pre-determined through the style sheets and templates that are used with the WCM system. Use of consistent website format is considered one of the most common traits of good websites. Users feel more comfortable if a website maintains a consistent look and feel throughout the site. Consistency throughout the website helps users familiarize with the website easily and make navigation easier.

Web Accessibility

The Universities website serves a large  population that comprises users with vastly different learning styles and capability levels. From conception to implementation, the website design must be mindful of possible access barriers if the desired goal is to create a website that is accessible to the widest possible audience.

This user base includes a widely diverse group of disabled individuals, which can be identified as having one or more of the following limitations:

  • Visual disabilities: blindness, low vision and loss of visual acuity;
  • Auditory disabilities: complete deafness or some levels of hearing loss;
  • Cognitive disabilities: speech, language and learning impairments;
  • Physical disabilities: impaired mobility or loss of fine motor control.

Web site content should be accessible not only to people with disabilities, but to all users of the Internet, irrespective of their chosen access device. This may include people who may have a text‐only screen, a small screen or a slow Internet connection. Also, users may be in a situation where they are unable to utilize certain functions, e.g. browsing without sound, or they may not have a current browser or a voice or Braille browser.

Use of Color

Do not convey information solely through color. Designers often use bright colors to call attention to certain areas of a web page or to things like required form fields. However, this emphasis is lost on the blind and those with limited vision or with color blindness. The use of bright colors needs to be accompanied with secondary emphasis using text or with the additionof asterisks (*). Many of the new devices which people shall be using to access pages will only have black and white displays.

Provide Alternate Text for all Images

The ALT attribute must be used in every image on a web page. Screen readers will read out the ALT text of the images that their users cannot see, and hence this text should describe the image comprehensively. The alternative text should serve the same purpose and convey the same meaning. Creating proper descriptions also assists users who browse with their images option turned off for faster downloading. An ALT attribute should be added to everyapplet and graphical form button too.

Provide Full Descriptions for Informational Images

Special graphics like charts, diagrams and graphs should be given more description than an ALT attribute. Add in a caption underneath the image for best results. The ALT text in this instance should be the title of the image.

Multiple Web Browser Compatibility

A key consideration in web design is to create pages that are browser independent ‐ in other words pages that work as they are supposed to regardless of the users’ choice of browser. Websites should be designed in a way that different web browsers display the same page and they should avoid promoting one particular browser.