EXECUTIVE SUMMARY PART A

The report files the findings of a usability test of the website http://www.nvi.com.au. On March 27 this usability test was performed by GRIDDEX Solutions. The intention behind this usability test was to access the usability for the users of NVI website.

There are some characteristics of the website which are positive

o The user thinks the picture with the text is nice and give the smooth effect

o The headline are big enough to catch attention

o The contrast for the navigation stands out on white background

o The Name of the website looks good in red colour.

Some areas required some enhancements

o Too much information on home page but still manageable

o News website should be updated frequently

o Links should be provided with news headlines

Areas need improvement [DialogDesign]

o Quality issue: the pages are too long to load, need to separate presentation layer. Using of CSS is better option

o Search problem: There is no search facility available on the website. Required a search option

o Broken links: Links for different pages need to be fixed.

Griddex Solutions reports based on the usability problems which were found during the test.

o Quality should be increase by limiting the size of the image.

o CSS should be used instead of JavaScript for getting similar results.

o HTML tags elements and attributes should be avoided to decrease load time

o Search option should be included fot customer need

o News should be break down in different sections.

Fahad MEMON

GRIDDEX Solutions

USABILITY SCRIPT

Testing Script:

Good day dear friend, my name is Fahad MEMON and I am going to walking you through this usability test session. Before we begin, I would like to read the information for you to make sure we don’t miss anything. You probably know why we have asked you to come but let me explain to you again, Kansas State University. We are working on design of a website and as a part of the process, what it is like to actual people or users and what elements of the design need to change or add.

If you find some options are not easy to use or you are facing difficulty in finding or performing particular task, so will other people and appropriate changes are required to make it improve and efficient and that is our job.

As you use the site, try to think out loud means to say what you are looking at, what you are thinking and what you are trying to do. I will ask you about this as much as possible this will be a big help for us (Krug S.).

Don’t be scared if you do something wrong as this test is not to test you and not a reflection of your abilities. The website is being tested here and this is important to improve the site, so we are expecting the honest reaction from users.

Do you have any questions before we start? Good! Thank you very much for your time in helping us to test this website. Your feedbacks are very important to us to make this website better.

TEST

The test has been carried out on different age group people with different task. The purpose of the test was to identify the problems with the usability. Everyone had series of task to complete during the test and the facilitator was taking notes of all their actions and behaviours. We used think out loud approach as it was very much related to our series of task. The facilitator then analyse the result after the end of the test. The users also been asked to answer few other questions about the website after finishing all the tasks.

The approach Griddex Solutions used for the test is open questions approach. We trim down the candidates list and asked few questions after all tasks have been completed. This approach helped me a lot to learn about people that I haven’t had thought before the test, Dana Chisnell. This also enriched my research and enhanced my designs. With this approach candidates were more interested in giving some useful information about the website features and draw backs. Once everything is completed we came up with few new and different ideas which will really help users to interact with the upcoming system/website/application.

User 1 Task:

Age group 20-35

· Find the latest news

· Go to article section and find out latest articles

· Find the information on how to submit article

· Find out weather report

User 1 test result

The user was asked to complete few task on the website. The visitor had some problems in finding the latest news. There was no heading or sections states latest news in-fact there was just the heading of news and headlines. It was very confusing for the user to get the latest news on home page or anywhere else on a website. User then jump to second task. The task was not complicated but a user was shocked to see there are no articles available on the website. There was article section and on that page said recent articles but nothing there to read or download. The screen shoot will give the good idea.

The user was so frustrated to find out that there is no information about the weather of local area or the city. Moreover if youngster wants to submit the article there is no information available on how to submit article or information. These test helped GRIDDEX solutions to come up with solutions and design the better webite.

User 2 Task:

Age group 35-45

· Find out upcoming events

· You want to call or email editor to make sure that they received your article. Is appropriate email id or phone number available to contact the person?

· Find latest sport news

· Search for particular article using search facility

User 2 test results

This user was in middle age group and use to read newspaper online and on the go to keep up to date. The mission of Independent newspaper was to provide information about local events in the community. We asked user to find the information about recent events but the user failed to do it. Unfortunately, there was no information existing on about events on a website.

The visitor was happy to find the information about the particular person to confirm about the article submission. Numbers and email address were available on website to contact for desired query. There were only heading of Sports and small news about it but the user was unable to find separate sports section or more news about sports. There was no search facility available on the website to search article.

User 3 Task:

Age group 45+

· Find out for the local festivals

· Find the links for different sections on website

· Find the national news from home page

· Look for local doctor in the town

User 3 test result

This user was of adult group and use internet every day. The person was asked to complete series of task. The user was happy to see the contrast on the website because it separates it menu bar from the main content. The user was happy to find the navigations and can easily navigate between pages on website. The other task was to find national news on home page. It took so long to user to find out the particular information as the home page was clutter and full of text and images. It was very difficult to find the information. The user’s next task was to find the doctor in the town but it was very unpleasant that no information was available on that and there was also no option of help in the entire website.

Questionaries:

Instead of using closed questions (MCQs), I have decided to ask series of open questions to get more clear view of the website.

· What did you like best about the website?

· What improvements you think would make the site better?

· What are the worst parts of the website?

· What do you think about the content of the website?

· Was it easy to find information on the website?

· Is there any option you like to be on website?

· How was your overall experience?

REPORT

The final step is to put the test result and recommendations in writing. The most important thing to keep in mind when organizing a report, think in terms of improvement ideas, not criticism [Tognazzini]. It is very important to arrange the report in this fashion because if the report will only indicate problems then the management will still have the list of unorganised information or problems and no solutions [McKraken]. I suggested solutions in the report about the problems which we found out during the usability testing.

Ø The heading was good in red colour it would be great if all the letters are big

Ø User thinks it is better to have company logo on each page.

Ø Consistency was not maintained, there should pictures on all the pages in the header or there should be none.

Ø There should be more section on the website including sports.

Ø Too much information on the homepage making it difficult to digest all the information it is better to organise it

Ø The links are broke on the pages that need to be fixed.

Ø Visitors would be happy if they can search something on website, the search option must be included.

Ø If there is no information available on the page it is better not to publish that page to publish it leads to frustration and users might not come back to visit the site.

Ø There should be hyperlink on heading/headlines of news.

Ø The section of recent news will make it easy for the user to get the latest news.

Ø Technology section should be added to help everyone learn about technology and new gadgets

Ø Picture size should be limited to 60K for faster loading

Ø CSS must be used to present the content and avoid HTML tag's attributes and elements.

Ø Weather report should be included for the local community.

Ø The news paper's important information should be available for download.

Ø Most users preferred to have music on the website and some free stuff for visitors to visit the site continuously.

Ø Add feedback pages that some actions has been performed or an error occurred.

Ø Must add adequate error messages and provide help to prevent this to happen again.

Griddex Solutions recommend all these solutions to make the website better and user friendly so users can interact with the website and visit constantly.

EXECUTIVE SUMMARY PART B

The report includes the analysis and design phase of the new proposed website. The whole process follows the Web Development Process and completed the analysis and design phase.

The analysis phase describes what the requirements of the client are and how it is going to be achieved. In this phase the document covered mission statements, objective and goals, target audience of the website. The analysis phase document ted all possible constraints for building the given websites and what technology is going to be used. The important thing COST is also determined in the document compare to all major competitors.

The planning part includes people, time and budgeting of the application/website. Allocation of personnel and equipment resources with estimating time, money and monitoring of budget also documented in the report. Next part of the report covers the design phase of the website. The visual design covers the story board which actually discuss the layout of the site, colour contrast, colour combination, navigational structure and the prototype design of a homepage. This part completes the template on which the entire site is going to be built.

Media section of this report covers what multimedia elements will be used and how well they indulge with the design of the website. the accessibility option follows the Web Content Accessibility Guideline. The web development process will follow the standards of W3C and maintain its standards while using naming conventions, file name and other software packages. Testing and maintenance will be an ongoing process and everything will be documented.

The whole project is well documented and can be used in future as a reference document.

Background/Introduction:

The website http://www.nvi.com.au contains the news of local community and some important national news. It also includes the sports section which holds the news about local sports and what is happening around the area. The upcoming events section shows forthcoming events in surroundings. There is a page or a link that says Article on the website which indicates there are different articles and another link about Advertisement. The target audience is local people living in that area. The age group I think is between 16 and 65 in other words according to website there is something about everyone.

MDLC – Web Development Life Cycle

According to Felki Morris following picture shows the Web development Life Cycle. The report outlines the analysis phase for building the Dudsville Online Community Newspaper website.

Analysis:

Dudsville Online Community Newspaper

Mission statement

Dudsville newspaper wants to provide local news and events information to the community in a cost effective manner which is an online weekly newspaper. They have decided to include images, text, videos, animation and audio commentary because of the popularity of online format. The best way of presenting the information in this internet era is an online format. The newspaper thinks it the best way because of the cheap broadband service available in the area. The local members can also contact to editor to share news which they feel may be of interest to the community.

Goals and Objectives

Ø Providing neutral and unbiased information/news to the local community of the area

Ø The aim of the website is to provide information with regards to what happened, what is happening and the coming activities specifically in that area and what are the chances of improvements in the local community. Moreover to provide articles and events details for everyone so more people can read and participate respectively.

Ø Inclusion of multimedia elements such as images, video, text, animations, audio and podcasts are considered the important part of the newspaper website.

Ø Provide breaking news via online format.

Ø End users should be able to contact newspaper in a timely efficient manner.

Ø Reporting of weather, sports, events and new talent in the community

Ø Making the best site of the town which can be become the medium of communication between local people and building a trustworthy name

Target Audience:

"The end user of the application/website is almost as important as the client." It is very important to know your intended audience. Dudsville community newspaper website falls in the category of special interest, public interest and non-profit organization. The purpose of these websites is to provide news and current information for volunteers, devotees, novices, a specific audience or general public.

The purpose of the website is to provide information.

Age: The age is important factor as different things appeal to different age group. The target age of audience is between 15 - 65 years. There is something for everyone and this website will be designed by keeping the age of target audience in mind. The articles in the website are appealing for older people, podcast for adults and sports and new talent for younger people.

Education: Education level varies but a person should understand English.

Computer literacy: Should have basic knowledge of computer and using of internet.

Nationality: Any nationality person living in the area is welcome to read, learn and share the knowledge/information.

Disability option is considered in designing the layout and content of the website.

In short all age groups are welcome to visit, learn, educate, listen and share the information available on the website.

Constraints and delivery platform

Constraints and delivery platform:

No application is a perfect application there are some problems with the application and at the time of development there must be some constraints which reduces the effectiveness of the project.

Ø One of the restrictions for building this website is client test environment is not available after office hours.

Ø There are limitations of broadband service or internet service. The newly broadband introduced is very expensive so the website is unable to use high quality images.

Ø HTML5 and CSS3 are new technologies and not every browser is supporting them.

Ø Currently, the website is available for Desktop and laptop users but soon will be upgraded for mobile devices or smart phones.

Ø Basic knowledge of Adobe Photoshop makes difficult to create good quality sharp images.

Ø Some systems are not capable of showing all fonts and this is one of the common hurdles.

Ø Another constraint for building this website is not using advanced technology for the application as browser compatibility is the issue.

The delivery of the application is so simple and it requires

Ø Internet connection (Broadband is better)

Ø Desktop computer (1.2 GHz minimum)

Ø 500 mb RAM recommended

Ø A well-known web browser i.e. IE 8.0 or greater, Google Chrome, Safari 3 or greater last but not least Opera browser 10 or later version.

Ø Medium of information is online.

Ø Any audio player for listening music/audio or podcast.

Ø VLC or windows media player for watching videos

User requirements specifications

Ø users should be able to visit website on a web browser which supports HTML5 and CSS 3

Ø clients must be able to register their email for newsletters

Ø Books, articles and other things must be there for users to buy

Ø Site visitors should be able to contact editor and administrator

Ø Users should be able to search from the site

Website development Budget

Allocation of Personnel and equipment resources

Who and what is involved in design, programming, testing and deployment of the project:	Personnel	Equipment
	Web designer All the design layout, themes, templates, multimedia components.	Web designer Different Software like notepad, MSWord, Dreamweaver, Photoshop, Media Player, Web browsers.
	Web developer and programmer The programmer is responsible for all the scripting involves in the WebPages, all coding related to present the content.	Web developer and programmer Notepad, HTML and CSS validation software.
	Professional and client Testing will be done by professionals for the best design. Testing will be conducted using clients for improvement in functionality of the site.	Different equipments are required to test the environment like audio/video devices, stationeries, computer lab and testing environment.
	Managers Managers are responsible for the deployment of the application on client side.	Computers, internet connections and web browsers.

Equipment	Cost
Logo Design	$ 300
Domain name	$ 200/Yr
Hosting	$ 1000
Server	$ 2500
Salaries	$ 5000 (app $ 25/hr)
Software	$ 2000
Development Life Cycle	$ 5000
Total	$ 16000

The total estimated cost for the project/website is $ 16000.

Standards

Software Packages	Name
	Notepad
	Photoshop
	Dreamweaver
	Flash
	Different Web Browsers
	Video Editing Software
	Audio recording software
	Media Player
	MS Word
	HTML and CSS validator
	PDF viewer (Cute PDF)
Languages	HTML5
	CSS3
	JavaScript
	AJAX
File formats	HTML file = .HTML
	PDF = .PDF
	Photoshop = .psd
	Images = .jpg, .gif, .png
	CSS file= .CSS
Naming convention	All files first letter small = test.html
	If two names first name alphabet small and second word alphabet Caps = sportsNews.html
	Same goes with image file
	Class and id names must make sense i.e. class heading

Maintaining web standards are very important now days. Stick around with standards help clients and developer to understand the development process. Moreover if someone else is looking after the website after it is deployed it is easy for that person to maintain the site, fix bugs and enhance the website according to business needs and demands.

The site will follow Web Content Accessibility Guideline (WCAG 2.0) and W3C standards. The website will be built using new version of HTML (HTML 5) to present the content and use of CSS 3 will make it easier how the content will be presented. There should be validated HTML and CSS coding and both can be validated using HTML and CSS validation software respectively to maintain W3C standards.

TESTING STRATEGY:

It is very important for the developer to test the website while in designing phase in fact the testing should be done after every component has been added. It is the responsibility of the project manager to get the reports of testing from developer and designer to make sure the quality is maintained. There are several ways of testing website and according to Felki-Morris “Test, Test and Test your website.”

Test the website

Ø On Different web browsers

Ø On Different versions of web browsers

Ø With different Screen resolutions (different resolution same device, same resolution different device)

Ø With different internet bandwidths

Ø From remote location

Ø From same location but remotely

Ø Automated testing (link checkers etc)

Ø Validation test of HTML and CSS

Ø Can also do usability check during development

Ø Test, test and test before finalizing it.

There should be a written approval from client for site launch after testing. After the approval the developer must upload all the files on server / web server. It is best to do create back-up copies of files before uploading it to web server to mitigate the risk of lost or damaged file. When everything is completed including sign-off form from client make sure you test the website again before it goes live.

The testing phase will help project manager and client with smooth transactions and things can be changed, fixed, update or redeveloped before the website is ready to publish.

Visual design

Story boards:

Designing the website is an art and to make it perfect, designer should create paper sketches or diagram or a model before implementing it. The visual design of the site, site map and the layout of the page/pages are important factors for building a successful website. Visual design or story board are important to show the designer how the website will look like and what elements are important. Consistency in a website makes it look better and appealing for the visitors. It is always better to sketch the home page and other page/pages of the website before developing it.

Home page layout

Justification:

Justification for Interface Design:

According to USERNOMICS, “Technology alone may not win user acceptance and subsequent marketability. The User Experience, or how the user experiences the end product, is the key to acceptance." Here comes the need of user interface where user can experience the real world application. The interface designed for the website will be very simple and attractive so clients can visit and play around on website with accuracy and efficiency. The UI is very much similar to newspaper and easy to find information. The idea behind designing this interface is that, different age and type of people can use it with ease and to make their experience worth. All the images have alt text in case if someone is using website without turn on the image options.

Colours and contrast:

Colour, contrast and colour theme of any system or any website is very important, GARYSIMON. There are several websites available with great colour theme, great colour combination but with unacceptable contrast and vice versa. In order to maintain the colour and contrast I designed it very simple with WHITE background and black text. The contrasts of Blue highlight and white text for main headings and Dark blue (Navy Blue) for other headings will be used to stand out from the rest of the content. The black and white colour and contrast is always appealing because of its simplicity. Felki-Morris also suggested using white background with black text for simple design. For some of the pages especially new talent and other technology pages the background may be light blue. The reason for choosing blue colour is that it is widely acceptable and white means peace in nature. People with some visibility problem (young or old) can take the advantage of this website with this simple colour and contrast and interact with system.

The normal font size chosen for the website is size 14 and type San-Serif for text and Serif style for headings. Fonts of size 14 with black background make words clearly visible and easy to read. The main heading font size will be larger around size 18-20 and normal heading size will be restricted to 16pt. The font will also make the website look beautiful and readable.

The texts do's and don'ts option was kept considered before choosing the font size and colour. According to Shneiderman, "Line-height, font size and spacing between the paragraphs must be kept accordingly."The spacing between the paragraphs and text is consistent. Colours and contrast is very much pleasing to make user's experience better.

Layout:

The layout of the website is very simple. I have used the DIV approach to set up the layout. This type of layout is very easy to manage. According to Felki-Morris, “The layout must be simple and appealing to the site visitors.” Company name and logo is at the top which divides the section with rest of the page. The footer section is added for foot notes and text menu navigations. The top second divider is used for navigation bar. The navigations bar will be an image so it was better to separate that layer from the main body content layer. Last but not least the middle section. The section for the body is aligned with the screen. The options and menus are large enough for everyone to focus on it easily. This makes users experience fruitful and also make sure these options are stand out in compare to normal content. The whole website will be very user friendly. There is a sufficient white space on the website for the content to look simple and consistent. The design technique used for page layout is Jello Design.

Consistency:

Consistency was always first point for designing/sketching of any webpage for desired website. According to Jakob Nielson, "Consistency and standards must be there in any application to make easy for users to understand instead using different words for same actions."

The design of the website is very simple and easy to access. Pictures and texts are simply added for this project. Audio and video will be added soon with suitable quality and less in size. No blur or any other filters has been fitted for this. The usability of this website is really good one. This website design tried to avoid cluttering to much information on the page and kept the design and layout to simple. According to GRAYSIMONS, "Usability is all about making the visitor's experience a good one." Text is easy to read, easy to access and easy to understand.

Navigation Justification:

I have chosen Website Hierarchical Organization navigation layout or Hierarchical Navigational structure. According to Morris in Hierarchical Navigational structure

Ø A clearly defined home page

Ø Navigation links to major site sections

Ø Often used for commercial and corporate Web sites

Another reason for choosing this structure is that “Too many choices make it confusing and less usable web site. George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory. Three click rule indicates that “A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.”

The design of website navigation shows that the website is easy to navigate with clearly labelled navigation on each page at same location. The navigation options will be available on top of the website and text based at the bottom of the site. I have used Graphics based as well as text based navigations. Another approach might be added later in the website is to break long pages into several small pages using Linear Organization navigational structure.

MEDIA:

MULTIMEDIA ELEMENTS	Component	Description
	Text	Serif for all headings
		San-Serif for all the contents
		Font size 14 to 20
		Colour: Black, Blue and White
	Images	Small size up to 60K maximum
		JPG and GIF format
		Mostly on home page
		Rest all over the website
	Audio	Length maximum 2 min
		Maintain quality
		In audio/video section
		In news section
		In other pages if required
		.mp3 format
		Link provided to download
		Not embedded in the page
	Video	Length Maximum 2 min
		Used on different locations
		Small size for weather updates
		Also not embedded in page
		.avi, .flv and .mp3 format
		Link for download provided
		User control to watch videos
		Different topics videos
		Around 8 different types
	Animations	Flash animations
		Pictures animation using AJAX
		Not more than 30 sec
		File size should be smaller
		Not unnecessarily used
		User can skip it

Flash animations, audio files, music and video clips are good option to put on website but they can slow down the website dramatically, JUST DESIGNING. I am going to provide the link of these files to an online player or to download and avoid embedding the file on website. This will help creating quick loading pages and websites.

The using of CSS rather than JavaScript for similar functionality will decrease load time. I have decided to use templates for the websites as they cached in the system and if the entire website is using the same template style it will load the page quickly and efficiently. According to Morris, the image file size should be limited to 60K or less to increase the speed of page.

Accessibility:

Website developers/designers or content writer must consider accessibility options for the website. It is very important to design a website which also benefits several disability groups. There are number of situations which a content writer/creator or website developer/designer should think when designing a website for accessibility purpose. The Web content accessibility guideline version 1 is the best document to read, understand and design the website according to those standards.

According to WCAG the website should "provide equivalent alternatives to auditory and visual content." The proposed website design used videos and images for a webpage to look nice. There are alt texts available for all the images and some transcripts available for videos which help people with disability to use website and visit again. Moreover, captions/auditory descriptions are provided for movies. Another guideline states "Don't rely on colour alone", this is absolutely correct. Developers do design websites with nice colours and make website very colourful without keeping guideline 2 in mind. Content colour scheme should be chosen intelligently so the text and graphics are understandable when views without colour.

HTML is used to display the page contents but to control the presentation the CSS is going to be used. Most often content developers misuse mark-up and put everything in HTML tags the best thing is to use style sheets WCAG - guideline 3. CSS is used to control for presentation and control the layout.

Another guideline points out clear navigation mechanism should be used. The website will have consistent and clear navigation mechanism. Availability of links, navigation bar, site map, help section etc. will help visitors finding their desired information. "Clear and consistent navigation mechanisms are important to people with cognitive disabilities or blindness, and benefit all users."

Last but not the least the website design follows WCA guideline of ensuring that documents are clear and simple. The Website is simple on top of that there is consistency in page layout. The language going to be used for this website is very simple and understandable and this feature benefits all users.

Accessibility check list:
Reasonable load-time for site	Done
Colour Contrast (text-to-background)	Done
Readable content (Font size expandable)	Yes
Consistency in Layout	Complete
Animations/videos/audios used properly	Yes
Appropriate Alt Text for images	Done

All the requirements are completed and the analysis and design report needs approval from the client. Once the form will be signed by client and manager the website prototype will then be developed.