web site design

Document Sample
web site design Powered By Docstoc
					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
              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
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
     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
   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
      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


06                             05                             04

          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.

                                                Packages (sub system)

                        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.



                         Accounting                                                    Management

Maintaining     Handle    Update
                petty     creditors   Update     Prepare
                cash                  debtors    profit loss

                                                                     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.


       Menu               File       Edit   Format     Tools

Related groups         Open
  Tasks                Save
                       Save As

           Home Page


                       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

  Hyper link
  Hyper link

  Hyper link

  Hyper link

                                          Video clip

                                         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
       o The people who are responsible or involved with maintenance
       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
                           Testing                      Page




                                    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.


                   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

        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

            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

         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

          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.

      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

                                             Application Layer            Layer
    i.   Ms IE         Presentation          (web server)
   ii.   Netscape      Layer                                              1. Apache
         Navigator                                                        2. Web Server
                                                                          3. MS IE
                 (Web browser) Request (URL)


user                             Response (Html)                             Serve
          Html                                                               r
                                                                                      Ms access
          Displayed                                                                   Ms SQL
                                 Closer Connection
                                                          Server side
                  Client Side                                             Create an
                  Scripts                                                 Html Page
                                                            1.    JSP
                1. Html                                     2.    ASP
                2. Java Scripts/ VB Scripts                 3.    PHP
                3. Cascade Style Sheet (Css)                4.    Servl
                      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

                                                                  IP Address      URL
  i.   URI              IP Address                127.000.        281.001         WWW.IDM

 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
                 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.
      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.
      o MS Windows
      o Unix
      o Linux
      o Sun Solaris


        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
                        3) Wireless Markup Language (WML)
                        4) Extensible Hypertext Markup Language
                        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
              For example, HtML has been created by using SGML and
XHtML has been created by using XML.