P1.1 Design concepts that have to be considered for designing a website of Zodiac College of Business and Computing
While designing of a website for Zodiac School for Business and Computing we need to consider certain factors which help us define its structure. The basic design of website is the complete personality of the website, it tells us what the website is all about. If someone makes the right first impression by looking at the website, then they will visit the website over and over again which will lead to website popularity and increase in business. Design is the entire experience from the moment user enters your website to the moment he leaves it.
Design tells us how and why people want to use our website, what is the need of various features over our website. The speed at which a page loads, the text that appears on mouse hover, the validations that appear while clicking some link, the validations for page not found, field left blank, wrong input, the pace at which you deliver new content and features, all these are part of website design and must be taken care of(Creative Bloq, 2013).
Users must be centric to every website design decision that is taken. Design must be such which enable users to work efficiently with fast speed, and most importantly users must feel happy in working on the website.
If we add some details to an already good design it will become better and will be able to cater to users requirements in a more refined manner. Proper attention to detail can help us retain our customers and can also help us gain new customers.
If we make a sketch of user experiences, it will help us design better website. Incorporation of user experiences will lead to more satisfied customers at later stage of website design.
In our Website of Zodiac College of Business and Computing, we have tried to incorporate user requirements, the expectations of target audience. The content of the website is such that it includes user requirements and expectations of target audience.
P2.1 Interactive website designing of ZCBC to meet the requirements
I’m presenting here the hierarchical structure of Zodiac College of Business and Computing, which explains the interaction of various modules and flow of data from page to page.
Here are some of the screen shots from the website of Zodiac College of Business and computing –
Figure: Home Page
Figure: About Us
Figure: Contact Us
Figure: Apply Now
Figure: Cost and Fees
P2.2 Website Evaluation of other Higher Institutions in UK and highlight some interesting features and functionalities on their websites
Studying about the websites of other top educational institutions in UK will help us in analysing the pros and cons of our own Website of Zodiac School of Business and Computing.
Moving forward I decided to evaluate the various websites based on following points –
- Availability of Information over the website and Coverage of content
- Images and Graphics over website
- Load Performance and Response time
- Ease of Navigation and flow from page to page
University of Cambridge, London
URL of website – http://www.cam.ac.uk/
- Availability of Information over the website and Coverage of content
The website of University of Cambridge has very less content and is predominant with images. There are information links available over the website for staff, students, alumni students, for business purposes, college and departments etc(Cam, 2014).
The search box must have been prominent but it is rather in dark colour which gives it an unattractive feel.
- Images and Graphics over website – The images keep rotating over the website home page, which looks annoying sometimes as for the user who is looking for some serious information, has to pause a little to search and look for the relevant content over the website.
- Load Performance and Response time – The response time of the website is normal, use of larger images makes it little slow.
- Ease of Navigation and flow from page to page – Navigation across the website takes time and is not as smooth. When we click on any of the links over the website, the image takes time to download and hence affects the performance of the entire website.
Figure: Home page of University of Cambridge
University of Manchester, London
URL of Website – http://www.manchester.ac.uk/
- Availability of Information over the website and Coverage of content – There is big search box available which gives an overall good appeal to the home page. Main page has less number of options available but when we hover on the various links on home page, then number of options appears.
- Images and Graphics over website – Whenever we look at a website we form the first impression of the website by looking at the images that get displayed over it. This website has just one image over the home page, but it looks appealing(Manchester AC UK, 2014).
- Load Performance and Response time – As the number of images over the website is very less, therefore load performance over the website is less and website runs faster.
- Ease of Navigation and flow from page to page – Navigation across the entire website is very quick and easy. Clicking on the link we are quickly redirected to other pages containing information.
Figure: Home page of University of Manchester
Imperial College of London
URL of website – http://www3.imperial.ac.uk/
- Availability of Information over the website and Coverage of content – There is lots of information available over the website for prospective students, alumni, staff, students, business, media etc.
- Images and Graphics over website – Use of less number of images gives it a professional feel. Use of nice images gives the user an enriching experience.
- Load Performance and Response time – as the number of images are less therefore the website loads up quickly and has less response time(Imperial AC UK, 2014).
- Ease of Navigation and flow from page to page – Navigation across the website is easy and smooth. User can easily switch among the pages and can get required information.
Figure: Home page of Imperial College of London
P3.1 ZCBC website Implementation
There are a number of web authoring tool software, mark-up and scripting languages available on web these days. These tools and languages not only make the task of web developers easy but also save lot of time and effort of developers. The use of such tools, gives a good appearance to the website and makes it professional looking. Most commonly used Mark-up languages are HTML, XML, and XHTML. Here in this project, I have used XHTML to build the interface of my website.
Web Authoring tools help us to develop website in desktop publishing format. We can build an attractive, interactive website development by help of various web authoring tools available to us like WYSIWYG (what you see is what you get) editor, Google Sites, HTML Editor, Macromedia Dreamweaver, Microsoft FrontPage, Net Objects Fusion etc. Here in this project, I have used Macromedia Dreamweaver for site design and animation effects. I have decided to use Macromedia Dreamweaver here as it has facility to use graphical tools or plain HTML coding Editor, without any difference in output. It can integrate multimedia format like flash, shockwave, real video and supports Java script, XML and DHTML.
In sequential manner – The tools that I used for building the website for ZCBC are:
Web Authoring Tools:Google Sites, Macromedia Dreamweaver
Database – MySQL
P4.1 Critically review and test the website
When a website becomes more interactive, complex and packed with features, the website’s ease of use or its usability becomes very imperative. Building such a user cantered design, which fulfils their needs and requirements and simultaneously entertainsthem with its features is very important and they must be able to interact with such a website very effectively.
To test website usability, we must consider following tasks:
- Analysis of User Task – Whether users are able to accomplish their tasks and goals is one of the major concerns while checking website usability. If the website is worth sing then only users will come over it, and vice versa. And users must be able to accomplish their goals in most efficient way, this is very important in order to maintain website traffic.
The first and foremost thing is to determine the core tasks, of website like what it does, what are the purpose of making this website, who are the users or target audience of this website etc. In order to check the navigation usability of the website, we must perform task analysis for each task.
Learnability – How easily can new users come over the website and can learn to perform any task over it? For the tasks which are little complex over the website are there sufficient tooltips and tutorials available?
Spontaneity–An important task in checking the usability of website is the intuitiveness or spontaneity. How easy or obvious is any task to be accomplished?
Efficiency–Are the users able to perform each task in a desirable way? Can we device the ways so that the tasks performed over the website can be accomplished in optimal time in efficient way?
Precision–How often do the error occur in the tasks in the website, what are the reasons for such errors, can we do something to reduce such errors, like improving the interface etc.
Fault Tolerance–How fast can a user recover from a self created mistake or error over the website.
Evaluation of User Task is little tricky as there are many different types of users who can require you to create your own criterion of success.
One of the best and efficient methods of doing usability testing is to perform remote user testing. We can test the application with such participants regardless of location, thus saving lot of money.
- Readability – The content of a website is very important in giving it a positive image. For the web apps which are not really content centric, like blogs or article, it is really important to read and understand the user interface, efficiently and accurately.
Here we list few important points on which readability hinges:
Ease of Comprehension– This comprises of ease of content, is the website content easy to understand and internalize? Are the words that we are using in our website, familiar with average internet user or are they too complex to comprehend? Are we using concise sentences and paragraphs?
Legibility – Are the font size and style big enough to be read? Is there enough contrast between the written text and the background of the page?
Reading enjoyment – Are the readers enjoying what they read? Is the content according to their expectations? Is the written information accurate and of high quality? Do the font size, spacing and colour make the reading of long passages easier or they strain your eyes?
- Website Navigability – It is very important that the user is able to move across the pages easily. While checking navigability of a website there are certain things that must be checked like search boxes, sidebar widgets, links etc.
Here are few points that must be considered while checking website’s navigability like:
Information Architecture:How well are the pages arranged, organised and categorised?
Findability of webpages – Are there sufficient site features, navigational items like, search boxes, archives, and links etc, that aid in finding web pages?
Navigational Efficiency – How quickly are we able to reach to the page of our choice? How many numbers of clicks are required to get to the required page?
There are many tools available in market that help us evaluate the usability of site navigation, most part of this evaluation must be done before our website is launched in the market.
There are various methods of checking site navigability like card sorting, tree testing etc.
- Accessibility –While considering the website accessibility it is very important to look at it from universal point of view. This includes all the issues that hinder a user from successful usage of the website such as with rapid adoption of mobile devices, notebooks, tablets, well enables TV’s and gaming console. Wide variety of web browsers like Internet explorer, opera, Firefox, safari etc. All these produce interaction challenges and render our work in different ways.
While performing web accessibility analysis, here are some points to ponder:
Cross Browsing Compatibility – Can the website work with multiple browsers? Is the website responsive, does it work if layout is changed?
Colour choice – Are the used colours of high contrast? The colours used are not hindrance to people with dim vision problem or colour blindness.
HTML Accessibility – Some features that aid the people with visual impairments, are these features and techniques used?
- Website Speed –There is need for the website to be speedy and responsive.
Here are few points that must be considered in reference to website speed:
Webpage response time – How much time does it take to load an entire webpage?
Webpage Size – How big is the web page in terms of size?
Code Quality – Does the web development team uses code development best practices to develop code of best quality?
All these factors are very essential in checking the navigation usability of a website.
P4.2 Analyse of testing results (actual test results v/s expected results)
Analysis of User Task – Users are able to get proper response from our website, for whatever reason they visit our website, they get proper and complete information.
Readability– With appropriate use of font size and style, the website is thoroughly readable. Usage of simple words that an average internet user is able to understand and use, readers are enjoying what they read over our website(Agnew, 2011).
Accessibility – Any information over the website can be found easily. There are links for every small information and detailed information is given, so that even new users are able to understand and comprehend.
Website Navigability – Navigating from one page to another is very simple and easy. All the links are appropriately placed. All the pages are arranged in categorized way and can easily be searched by using search facility provided over the website.
Website Speed – Our website of Zodiac College of Business and Computing runs well with fast speed. It takes less time to load as number of images used is less so it has faster response time. Essential coding best practices are used to develop and design the code of website.
P4.3 Feedback Evaluation
Zodiac College of Business and Computing website may contain more number of images and content can be made more colourful and attractive. It is developed and designed as per the design specifications. If we add subsequent modules and design structures at later stage of development, it will help in giving this website a good feel and improve its functionality.
Separate login for Staff and Students can be provided for clarity and ease of access. Students will have permission to read and view the content, as well as to apply for any courses(Nielsen and Loranger, 2006). They cannot edit or delete existing content.
We can include a section for alumni students, where they can catch up with their old buddies, get in touch with old staff and share memories.
Staff members can insert new content but they cannot delete existing content.
Only admin will have all the rights to insert, modify, and delete the content of the website.
News content and Upcoming college events section can be added for making this website more interactive.
Research impact and themes can be added up on our website, for ease of students and scholars. Different illustrative topics on research papers can be published over web for ease of students.
Alumni & Friends section can be added up in ZCBC website, to develop and maintain relationship between former students and ZCBC.
ZCBC website can be enhanced to incorporate student accommodation service.Placement Cell facilities can be provided on ZCBC website for ease of students.
P4.4 Create onscreen help to assist the users
All the modules over Zodiac College of Business and Computing are designed in such a way that they help in fulfilling the basic purpose of educational institution website. All the modules are named in such a manner that they are self explanatory. By having a look at each module, even the new users can easily navigate through the website easily without help of any online help. The website has good usage of onscreen help, tool tips and search facilities, which help the users in navigating across the web pages design (Mashable, 2011).
User can get details about all the courses provided by ZCBC by clicking on ‘Courses’ module.
User can get details about Fee Structure by clicking on Cost and fees.
User can get details about address and correspondence details by clicking on ‘Contact Us’
User can apply to any of the courses by clicking on ‘Apply Now’ link associated with each course.
User can get into discussions with faculty members and fellow students by clicking on ‘Click here to join the conversation’ link
User can have a look at the images of college life and campus etc. by clicking on ‘Gallery’ link
User can get to know about any new announcements by clicking over ‘Announcements’ link.
The website makes use of illustrative pictures, which in turn makes it easier for users to navigate through the website.
I have created a FAQ section which can help students to find out the answers of general queries. Below is the screenshot of FAQ page from the website for ZCBC:
Figure: FAQ link on all pages
Figure: FAQ page
In above picture we can see various modules of this website like Home, About, Contact us, courses, cost and fees, alumni, apply now and FAQ. A user can get desired information about the website by clicking on respective modules. All the names used are self explanatory which makes the website user friendly.
Also FAQ page help users to find out which section he/she should visit to get the required details. FAQ is divided into three main sections which are Admission, Fees and Contact. These can be updated as per university requirement.
The logo image of ZCBC is linked with home page, which makes entire website easily navigable. User can just click the logo image and get back to home page.
P4.5 Create documentation for the support and maintenance of the website
There are few essential factors to be considered for website maintenance and development :
Content Management – Regular updation of images and content of any website is very important. It keeps the look of the website fresh and also keeps its users entertained. Valuable content must be made available to the users while hosting a website online. In order to interact with the users the content of the website must be regularly updated.
Quality and Performance – It is very important for any website to follow international laws of coding standards, to avoid getting into any legal formalities later. ZCBC website complies with all web standards and follows all SEO guidelines.
Spyware and Protection – Each and every day our website is vulnerable to attacks against viruses, so it is very important for us to protect our website against such attacks(Thurow and Musica, 2009). ZCBC website has adequate protection against malwares and viruses. While there are many such computer programs available on internet that can protect our website, we must ensure that they are up to date.
Frequent Updates – We need to be aware with all latest trends in IT such as CMS, responsive web design etc. to keep pace with latest technology. Our website must make use of latest trends and technologies, so that it is liked by people of all ages. ZCBC website has scope of further enhancements, in future some CMS might be brought into use to build up web pages.
I have created FAQ web page in website later. Below are the list of steps followed to add new page and content in website:
- Added new link “FAQ” in menu.php so that it get added in all the pages.
Figure: Changes in Code
Figure: Updated menu items on website
- Then created a new page named “faq.php” in application directory.
Figure: New question addition in code
Figure: Changed contents on website
Agnew, A. (2011). How to Protect Your Website from Malware and Virus Attacks | Website Guardian | Protect Your Website From Hackers. [online] Website-guardian.com. Available at: http://www.website-guardian.com/how-to-protect-your-website-from-malware-and-virus-attacks-va-4.html [Accessed 29 Aug. 2014].
Cam, (2014). University of Cambridge. [online] Cam.ac.uk. Available at: http://www.cam.ac.uk/ [Accessed 29 Aug. 2014].
Creative Bloq, (2013). 10 design concepts that every web developer needs to know | Web design | Creative Bloq. [online] Creativebloq.com. Available at: http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255 [Accessed 29 Aug. 2014].
Imperial AC UK, (2014). Imperial College London. [online] Www3.imperial.ac.uk. Available at: http://www3.imperial.ac.uk/ [Accessed 29 Aug. 2014].
Manchester AC UK, (2014). The University of Manchester. [online] Manchester.ac.uk. Available at: http://www.manchester.ac.uk/ [Accessed 29 Aug. 2014].