Wednesday, May 30, 2012

Report - Assessment Item 3


Justification of Software Packages

  

NOTEPAD++

Different packages are used for different multimedia elements and building up the website. Initially, I used notepad as it comes with windows and helps to write the HTML and CSS code. Later I discovered NOTEPAD ++ software is available for same thing but one can open multiple documents. I used it and love the software. Once you have the file in HTML or CSS the text colour changed according to the extension and it helps me a lot for making fewer errors during coding. The best part of the software is it is free of charge.


Features: Light weight, support different languages, colour codes, supports multiple tabs

Ease of Use: Very easy to use.


Cost: Freeware


Licensing: Public


Help and support: Online documentation



ADOBE PHOTOSHOP

            It was not easy to use adobe Photoshop as it is complex software. The teacher taught us very briefly what are the functions of basic tools and how can we use it for the assessment of ITC-589. It was difficult to operate but once you are confident using basic tools you can do a lot. All the photos are created and edited on Photoshop.


Photo editing software


Features: Rich and enhanced options for photo editing, can work on different layers


Ease of use: Not really easy to use. Once you know the basic tools very easy to operate


Cost: Very expensive ($199)


License: One per customer


Help and Support: Available offline and online


Cons: very resource taking software, heavy



DREAMWEAVER


                Dreamweaver is one of the best software available in the market for designing the layout of your webpage. There are also other features available in Dreamweaver but they are highly advanced and are for professional use. I used this software to learn how to layout the page. The CSS and HTML file is created separately.



Features: Rich and enhanced options for website designing, great for designing layout, different languages support



Ease of use: Not really easy to use. Once you know the basic tools very easy to operate


Cost: Very expensive – Luckily installed in university computers


License: One per customer


Help and Support: Available offline and online


Cons: resource taking software


FLASH


                Flash is used for designing animations for the website. I used Flash MX for designing the simple animations for the website project. The requirement for the animations were simple so did not get much chance to learn in details. The animations are for advertisement banners. I have designed couple of animations for the website.



Features: Good for designing animations, create tweed motions, shape motions. Perfect so far for designing the advertising banner (Animated)


Ease of use: Once you know the basic tools very easy to operate. Works in different layers and frames,


Cost:  expensive – Luckily installed in university computers


License: One per customer


Help and Support: Available offline and online


Cons: Bigger file size

AUDIO/VIDEO


                I have used my IPOD touch to record audios and shoot videos. The IPOD built-in software was capable of compressing files. After I have finished recording I emailed to my email account and it compresses the file size. 


MP3 to FLV Converter

                I have used MP3 to FLV convertor to convert my MP3 files to FLV and vice versa with FLV to MP3 converter.

Features: Good for conversion, specify the bit rate, compress the file

Ease of use: Very easy to operate.

Cost:  Free

License: Public

Help and Support: Available online and on different forums





Friday, April 13, 2012

Assessment Item 2 - Report



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:

Tuesday, April 10, 2012

Design Phase Continue


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.

Thursday, April 5, 2012

Design Phase



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

Tuesday, April 3, 2012

Analysis Phase - Continue


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.