Unit 19 Website Design Learning Outcomes Assess the design and functionality of existing and established e-business sites. Examine a range of web authoring tools for creating multimedia websites. Develop and integrated set of web pages/frames. Develop interactive applications on a web server. Assess the design and functionality of existing and established e-business sites. The Users When we consider the users of a website they can belong to the following 3 main categories. Novice / casual users Experienced / Dedicated users Professional users Novice / Casual Users Novice users are the new users for a system. Casual users are those who do not use the system daily. They use the system once in a way. The users of this category have several different characteristics. They don’t have prior knowledge of what they expect from a system and they need to be given step by step instructions to complete a task. Ex : “ Please Enter PIN Number ! “ They need to be given a meaningful error messages explaining. What is the error, where it is and how they overcome it. Also they need to be given proper guidelines on completing the task. They expect user friendly interfaces and a higher usability of the system. Therefore graphical user interfaces (GUIS) can be used in developing such systems. As they are not familiar with information systems they will interact with the system slowly. Therefore the system needs not to be efficient. Experienced / Dedicated Users. These users use information system everyday and they operate information systems during most of their working hours. They are operational workers of a company who handle day-to-day transactions. As they have to complete lot of transactions within a day they expect the system to be efficient. They do not expect step by step instructions or lot of guidelines. They do expect on-line help facilities to get some support in case they want get more details on a particular task. Also they prefer GUIS but provide higher user friendliness and a higher usability. Hot keys and short cuts can be introduction to make the work of experienced users efficient. Professional Users This category of users include different IT Professionals e.g.: Programmers, Software engineers, Systems Analyst, Project managers, Database administrator and etc. Such people want to perform their IT jobs efficiently and they can use different commands in performing different computer operations. Therefore they prefer to use command line interfaces (Dos prompt in PCs and VI editor in unix platform, then using GUIS. Also they do not expect lot of step by step instruction and help facilities. Needs of users When you are going to develop a web based system we have to design and develop it to satisfy the needs of the users to make it an acceptable system. Following are different categories of user needs. Psychological needs. Cultural needs Social needs Environmental Considerations (Health & Safety) Psychological Needs These are different likes and dislike of the users. We need to Understand what the users like to get in their user interfaces and what they don’t like. Then we have to design the system according to those likes and dislikes. E.g. What coloures? What fonts? What order of inputting data? What order of transactions? Cultural Needs When a system is to be developed we need to understand where the system users are? And what is the cultural background of them? According to the culture the likes and dislikes vary. E.g. Coloures they like Believes Icons Different events Social needs People always like to have friend’s relations and participating different social activities. They like to meet others and communicate with others. These are coming under social needs. When we develop web based system we have to include facilities for the users to contact and communicate others and to get details of different social events. E.g. Chat rooms E-mail groups Computer games Environmental Considerations (health & safety) If the design of the computer systems is not done properly it can affect badly to the health & safety of the users. Due to some wrong design the user will have to take more time to complete a transaction. This can create some mental pressure (cognitive workload) to the user. In long term this can lead to headaches and high blood pressure to the user. If the colours used for the interfaces are too bright it can affect Eye-site of the user and can lead to headaches. Therefore web designers should design systems to keep health and safety problems of the users to a minimum. E.g. Good colour combinations Correct order of transactions in the menus. Reducing the no. of key strokes. Use of large font what is readable. Use of correct colour combinations (It is good to use dark characters in light background) Site Analysis When a new website is going to be developed the web site designer need to analyses the site to get some background understanding and to get the correct direction of site design development 1. Purpose Fist the web site designer should know the purpose of the website or why it is developed. Following are some of the purposes of developing web sites. o Educational o Promotional o Informative o Commercial 2. Educational websites These sites have been developed implemented to provide education to the users of it. They may include different courses. Different subject offered and different educational material. E.G. Website of a university Website of an educational institute 3. Promotional web sites Promotional web sites provide various details on companies and the products of them. E.g. In yahoo.com advertisements of so many other companies can be found. 4. Informative web sites. Website belong to this category provide various information on a particular subject or a topic. E.g. A travel guide website. A web site on cookery. 5. Commercial web sites Commercial web sites allow the users to perform various business transaction to purchase products and services. E.g. Ordering Invoicing On-line payment Tracking the delivery status of the product From the system domain. Storyboarding is useful even to get some feedback from potential users. Such feedback helps to identify any omissions inconsistencies and any mistakes. 01 02 03 Customer Registrations View Product Order Requesting News Address 06 05 04 06 Receipt Payment Invoice Grouping tasks in to logical sets A particular web site consists of lot of tasks and those tasks are related to each other. As web sites have lot of relationships between them, a web site becomes complex. This complexity can be reduced up to a certain extent by grouping logically related tasks together and creating sub systems. Grouping tasks together can be done in several ways. 1. One way of creating sub systems is to group related object Classes given in a class diagram in to packages. E.g. Packages (sub system) Classes 2. Another way to identify grouping of tasks is to first create a hierarchy of tasks, which arranges the tasks top to bottom from large functions to very small functions. Then logically related low level small functions can be grouped as a logical grouping. E.g. Accounting Financial Accounting Management Accounting Maintaining Handle Update petty creditors Update Prepare ledgers cash debtors profit loss account Prepare Prepare Prepare income sales expenditure for cast analysis Logically related groups of tasks 3. At user interface level tasks can be grouped together considering their logical relationships in to list of menu options. E.g. Menu File Edit Format Tools New Related groups Open Tasks Save Save As Exit Home Page Register Products Menu About us Contact us Hyper Media Linkage 6. Hyper Text Hyper Text is a text document which has hyper links to other text documents. 7. Hyper media Hyper media is web pages what have hyperlinks to various multimedia components, (Images, Audio, Video) Web Page Text Hyper link Hyper link Hyper link Hyper link Video clip Images Audio clip This sort of graphs can be generated Using different software tools. 8. Multimedia Data In addition to text data, data can be presented as multimedia data for easy and better understanding of users. They can be, o Images o Audio o Video When multimedia data is used, different software tools and devices have to be used to capture those data, edit them and to use them within web pages. Updating and Maintenance Plan Different details given in a web site or the contents of it need to be changed time to time. That is required because in the reality details of people and businesses change with time. For example, the address of a business may be changed if they would move to a new location. But this may happen in several years time. The currency exchange rate of a bank will have to be changed on daily basis. Therefore to make these changes in the web site a company which owns a web site need to keep a separate person to identify these changes and to make them. Generally this is a responsibility of a ‘web Master’ or ‘Web Administrator’. If a web site keeps its data up-to-date, then it will win the trust of the site users. 9. Maintenance Plan Any web site requires changes time to time. Some new Programs need to be added to the site, some programs need to be removed from the site also some pages need to be changed or the structure of the site need to be changed. Also some data given in the site will have to be changed when the system is in operational use. Therefore to do these changes we need to have a plan. Generally the site maintenance plan will include the following. o The people who are responsible or involved with maintenance work. o The components or parts of the site what need to be changed. o The time schedule including start date, end date and the frequency of doing these changes. o Different resources required (hard ware, software and other resources) for these maintenance works. o The procedures or steps to be followed in doing these changes. o The cost or the budget for these maintenance work 10.Testing Plan When a web site is developed we need to test different parts (web pages), sub systems and the whole system. This can be done successfully if we would follow a text plan. The test plan for a web site will include the following. o A list of web pages or programs to be tested. o The time schedule for testing. o The people who are responsible for testing. o Different types of testing to be done. o Different resources required for testing including Hardware and software. o The test procedures. o Test data and test cases. o Cost or the budget for testing. Types of Testing Acceptance Home Users Testing Page System Testing Integration Primary Testing Home Pages Developers Unit testing Detailed Pages In testing a web site specially we have to test the hyperlinks of the site. That is we have to click on each and every hyperlink and see whether all of them are connected to some other web pages and whether those web pages are correct and complete. If hyperlinks do not work the users of the site will get disappointed and they will not visit that web site again. Design 11.Rules and heuristics for good web site design When we design a web site we need follow some rules and heuristics, this leads to get a good web site. The following are 10 userbility heuristics proposed by Jakob Nielsen’s. 1) Visibility of system status : The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2) Match between system and the real world : The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system- oriented terms. Follow real-world conventions, making information appear in a natural and logical order. 3) User control and freedom : Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue support undo and redo. 4) Consistency and standards : Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 5) Error Prevention : Even better than good error messages is a careful design which prevents a problem from occurring in the first place. 6) Recognition rather than recall : Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 7) Flexibility and efficiency of use : Accelerators – unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 8) Aesthetic and minimalist design : Dialogues should not contain information which is ire levant or rarely needed. Every extra unit of information in a dialogue compete with the relevant units of information and diminishes their relative visibility. 9) Help users recognize, diagnose, and recover from errors : Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10) Help and documentation : Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. Following are five basic rules for web page design. 1) Your web site should be easy to read. 2) Your web site should be easy to navigate. 3) Your web site should be easy to find. 4) Your web page layout and design should be consistent through out the site. 5) Your web site should be quick to download. Protection and Infringement of Copyright Different intellectual properties, books, pictures, songs, articals, software and other items what have been created by using intellectual capabilities of people are considered as intellectual properties of the another of that item. 12.Proprietary Products: These are different products what are owned by a particular company. Therefore whenever ownership should be paid. Copyright refers to : Intellectual property of an item of information means that the owner has the right to say who may copy the item and who may not. Copyrights can be applied to the whole intellectual product or a part of it. 13.Types of copyright 1) Copy Left : That is an item can be copied as long as another’s notice remains attached and the conditions spelled out are add here to. (Ex. No selling possible) 2) Free Ware : This means that an item can be freely copied but copyright remains with the another. 3) Share ware : If a particular item is coming under share ware then it can be copied and distributed but each user should pay the anther as specified. 4) Public Domain : The items which are in public domain may be freely used by any one in any way they wish. 14.Copyright Statement When we develop a web site it is necessary to include a Copyright statement to inform the users of the web site what items they can copy, under what conditions they can copy and what items they cannot copy. The infringement of copyrights may result in taking legal actions and penalties according to the laws. Evaluating Functionality of Design When a web site is designed it is requires to check whether it is good or not based on different criteria. 1) Timings 2) Navigation of the site 3) Ease of use 4) Effort 5) User satisfaction 1. Timings : This is to check the time taken to complete different transactions and to shift between transactions. If a web site takes lot of time to give responses it will dis-satisfy the user 2. Navigation : That is the user should be given facilities to navigate or to go through different parts of the system. This can be done by using menus, buttons and hyperlinks. Also user should be given the facility to come back to home page from any other page. 3. Ease of use : A web site can be made easy to by including different features with what the user is familiar. Also using large font what is readable, good colour combinations, use of graphical user interfaces (GUIS), giving instructions, guidelines, help facilities, good messages will make the system easy to use. 4. Effort : Effort required performing different functions of the system need to be reduced. This can be done giving good instructions, arranging the items in user interface in the correct order, reducing the no. of keyboard inputs, allowing the user to select pre-defined options and etc… 5. User Satisfaction : User satisfaction depends on various other factors including ease of use, effort, navigation and etc…Also user satisfaction depends on the type of the user and of the system. User satisfaction can be checked correctly by getting feedback of the users. This can be done by interviewing the users or asking them to fill a questionnaire or a feedback form. Design tools and software for evaluating Design In the process of software design, different design tools are used. Also different software’s are available to evaluate the design. That is to check whether the website design is good or not. E.g. Web garage Tick IT Conformity with software standards : This is to check whether a particular web site has been designed and developed according to existing standards. An ISO 9001: 2000 publication tries to improve the quality of software systems developed. TickIT project has been started in 1991 with the intention of improving quality of software development, to explain how quality can be achieved and quality management systems can be used. TickIT provides guidance and certifications in relation ISO 9001: 2000. Environment The web development environment consists of various web technologies. The web development environment is based on the client server architecture. Client Server Architecture In the client server Architecture we can identify two different software’s as client and server. The client software is used to make some request for a resource kept in a server. Also when the resources what are wanted by many users. In a web server web pages or scripts what can create web pages are kept. When a user request for a resource available in the client with the resource. Generally web servers send HTML pages as responses. Some times server side scripts can access a database server to get some data and to be included in the HTML page before it is sent to the client. 3 tier architecture 2tier architecture Data Application Layer Layer i. Ms IE Presentation (web server) ii. Netscape Layer 1. Apache Navigator 2. Web Server 3. MS IE Connection Server Client (Web browser) Request (URL) Internet Db user Response (Html) Serve Html r Ms access Displayed Ms SQL Closer Connection Oracle Server side Client Side Create an Scripts Scripts Html Page 1. JSP 1. Html 2. ASP 2. Java Scripts/ VB Scripts 3. PHP 3. Cascade Style Sheet (Css) 4. Servl ets URI (unified Resource Identifier) To identify different resources available in the World Wide Web (WWW) each resource is given a unique identifier Generally URI is a number which is called ‘IP Address’. Each resource in the WWW has a unique identifier. (A unique IP Address) IP Addresses of different resources are difficult to be remembered. Therefore to make it easy Unified Resource Locators (URL) are used. They are meaningful and easy to remember than an IP Address. The relevant IP Address of each URL is kept in a domain name server (DNS) available at a internet service provider (ISP) E.G. Kept in Domain Name Server (DNS) IP Address URL i. URI IP Address 127.000. 281.001 WWW.IDM 1 ii. URL (Unified Resource WWW.IDM.lk/ Locator) server Web Browsers A web browser is a client software what is used in the internet. A browser can interpret HTML pages and display the contents of them. Addition to that a browser can process client side scripts such as Java scripts and VB scripts and it can interpret style sheet languages such cascade style sheet (CSS). As E.g. Netscape Navigator Microsoft Internet Explorer Web Servers In the client server architecture a web server is a software which can keep web pages or which can hold server side scripts to generate web pages (HTML Pages) A web server receives requests from web browsers and give HTML pages as responses. Following are some popular web server software’s. 1) Apache web server 2) MS TIS (MS Internet Information Server) Internet Protocols To transmit different data through the internet different communication protocols are used. The internet uses a collection of protocols or a protocol suite which is called as TCP/IP (Transmission control Protocol/Internet Protocol) Following are some of the protocols who come within this protocol suite. 1) HTTP(Hyper Text Transfer Protocol) 2) FTP(file Transfer Protocol) 3) Teinet HTTP (Hyper Text Transfer Protocol) This Protocol is specially used to send http pages between clients and servers. Following are some commands used in HTTP Protocol. 1) POST 2) HEAD 3) GET Markup Languages (MLs) All markup languages consist of different tags to mark different parts of fill. Generally markup languages have tag pairs, start tag and an end tag. A tag pair with the contents of it is called as an element. <Html > ← Start Tag < /- -Contents of ∕ ∕ Contents Element the file - - > < / Html / > ←End Tag Following are some popular markup languages available today . 1) Standard Generalized Markup Language(SGML) 2) Extensible Markup Language (XML) 3) Hypertext Markup Language (Html) 4) Dynamic Hyper Text Markup Language (DHTML) 5) Extensible Hyper Text Markup Language (XHtml) 6) Wireless Markup Language (WML) Out of these markup languages the first two, SGML and XML are used to define the structure of data and the other four, HTML, DHTML, XHTML and WML are used to define the presentation of data. Client Side Programming / Scripting This is to write scripts what can be executed by a web browser with no involvement of a web server. Client side scripting is mainly done with html or XHTML. Also it may include cascade style sheets (css) and Java scripts or VB scripts to handle some dynamic aspects or different changes to a web page at run time. Server side programming / scripting This is to write scripts to be executed in a web server. Server side scripts do more processing work on input data submitted using HTML form and generate outputs. Developing server side scripts require more effort and time. They are executed within the server and they may access databases during processing and generate HTML pages with those data. Following are some of the popular technologies or scripting languages available for server side scripting. o JSP o Serviettes o MS ASP o PHP A Free Software. Database servers Most web servers communicate with database servers, in the 3 tier architecture to store or obtain data when they generate web pages. A database server may use any matching DBMS to the web server. E.g. o MS Access o MS SQL Server o ORACLE o MYSQL Free o INGRESS o Informix Operating Systems / Environment Web based information systems are run operating systems. A web server can be run on a compatible operating system. E.g. o MS Windows o Unix o Linux o Sun Solaris Browsers Modern browsers have lot of in-built facilities to deal with modern technologies browser can locate internet sites according to the URL given early browsers could display only text based html pages. But modern browsers are capable of displaying multimedia components (Images, Audio and Video). They can be used to view applets also they can interpret cascade style sheets to control colours and fonts in web pages. Also browsers can run client side scripts such as, Java script and VB script for input validations, event handling and animations. With newer versions of browsers more and more facilities are added. Browsers can be added with other small software components to display some proprietary documents such as, PDF files, word files. Web Authoring Tools These are the different tools what can be used by a web developer to create web pages and to do related processing of them. Following are two main categories of web authoring tools. 1) Markup languages 2) Scripting languages Markup Languages. All markup languages used in web authoring consist of different markups. Markups are used to show different sections of document. Generally a markup has a tag pair (start tag and an end tag). Following are commonly used markup languages in web development. 1) Hypertext Markup Language (Html) 2) Dynamic Hypertext Markup Language (DHtML) 3) Wireless Markup Language (WML) 4) Extensible Hypertext Markup Language (XHtML) 5) Standard Generalized Markup Language(SGM) 6) Extensible Markup Language(XML) Out of these markup languages HTML,DHTML,WML and XHTML are used to present or display data on the screen. SGML and XML are used to define the structure of data or they can be used as meta tags and create our own markup languages using them. For example, HtML has been created by using SGML and XHtML has been created by using XML.