WebsiteApplication Standards

In a website apart from the functionality which varies from application to application, every web site must meet some of the basic web standard.

And as a QA it is our responsibility to check whether they meet the standards. So this check list will help you test any website .This is the generic web check list which can be run on any web application

This Checklist

·         Usability

·         Compatibility and Portability

·         Functionality

·         Performance

·         Security

·         Tips and Tricks

Beginning with the Usability Testing,

Usability testing can be categorized into Navigation, Ease of Use, Presentation of Information, User Information, and Error Prevention.

In Navigation category, the first point to be checked is the

The navigation system should be in the same place on every page and have the same format. Visitors will get confused and frustrated if links appear and disappear unpredictably. For example footer links in all the pages should be consistently located in the same format.

1.      Terminology should be consistent, i.e. if short form for "for example" is written as e.g., then it should be written as same everywhere in site

2.      Navigation buttons should be consistently located.

I.e. Navigation button should have the same display position on all the screens in the site. For example Home link or button is generally present on all the screens.

So on all the screens its display position should be same

3.      Navigation should be to the correct/intended destination. i.e. the correct and intended page should open after clicking a link or tab or a button

For example clicking on Home link should open the home page only And not any other page

          The flow to destination (page to page) should be logical.

for example clicking Cancel or a back button on a child window should take the user back to its parent window and not to home page that is the navigation should be logical .

The tab sequence should be set correctly

i.e. The correct tab sequence is left to right and top to bottom.

And it should not skip any fields, buttons or links

4.      There should be a logical way to return, i.e. back button or in bread crumb link should be provided to return.

e.g. Link or button should be provided to navigate to the previous page.

5.      The Business steps should be within the process clear or mapped. e.g. In case of E-com site the checkout process should be properly followed.

e.g. The E-commerce application if user Adds a product in the Shopping cart then he should be able to move further to Checkout process to complete the purchase of the product.

6.      All major parts of the site should be accessible from the Home page.

Here the example of Gmail website will be given during the recording

7.      If necessary, a site map is available. If the site is complicated and there are many numbers of pages then site map gives the idea about the internal pages.

If the navigation in the site is too complicated then there should be a site map

Here the example of Gmail website will be given during the recording

8.      If required, easy-to-use search functionality should be provided.

The search functionality should be present in every website to help user find its desired record or page.

Let’s have a look at some of the Ease of Use category check points

1.      Help facilities provided should be appropriate. The text content should be clear and understandable, if required pictorial representation can be given.

2.      There should be minimal scrolling and resizable screens. If the scrolling is more then proper anchor should be given to, go to the top of the page.

E.g. in the Product list page for E-com site the “Back to top of the page” link is present to view the start of the page.

3.      Menus should be loaded first

When web site is opened it takes time to load completely so while the site is loading menus should be loaded first

Here the example of Gmail web site can be given

4.      Graphics should have reasonable load times

The images or multimedia files used on the pages should get downloaded within reasonable time. It should not take too long for loading otherwise user will get frustrated

5.      Messages should be understandable

i.e the error messages or confirmation messages should be very clear and understandable with no grammar and spelling mistakes

for e.g. on a registration form if user keeps any mandatory field blank and hit Save then the message should come like Please enter <Field name>

6.      Confirmation messages should be available as appropriate

For example if the user clicks Delete then there should be a confirmation message asking ‘Are you sure you want to delete this record’ and if user clicks yes then the records should get deleted

Default focus should be present on the first field in case of form

For example on login page the default focus should be on User name field e.g. here the example of BTT can be given during the recording

7.      In form if error message comes then the focus should get diverted to the field having error in it.

For example if on a registration form user enters an invalid email address and clicks save them error message box will pop up asking user to enter valid email address.

So clicking Ok on this message box should take the user to the Email field to make the data entry easy for the user

Example login page of PMT can be given Open the PMT enter correct name and incorrect password, and then the focus should be on the password field.

The Next category is Presentation of Information

1.      Fonts should be consistent within the site.

i.e fonts of the text used throughout the site should be same.

For example font and size of the text used for buttons throughout the site should be same

Example of Gmail website can be given during the recording.

Company display standards maintain, e.g. Logos, font size, colors, scrolling

E.g. The Colors and logos if used are standard on all pages

Here the example of website can be given.

2.      Legal requirements should be met, i.e. the logo size, if site is diverting to other site, copyright laws and license

3.      Content sequence should be proper.

i.e most frequently used control or tab should come first

Or in some cases sequence should be according to the work flow of the application

E.g. like on Zeon solution site COMPANY is followed by SERVICES then PORTFOLIO, RESOURCES, CAREERS, CONTACT US are displayed in proper sequence. So the here the sequence is according to the frequency of use

4.      Proper web-based colors should be used. The colors should not be too dull or too dark.

e.g colors used should be decent suiting to the type of website

5.      White space surrounding the images should be proper.

e.g. There should not be unnecessary blank spaces in between the images and text.

6.      Tool tip for all images should be provided and they should be proper.

e.g. like on website the Tool tip is present for home image. Each image should have a descriptive ALT attribute and TITLE attribute associated with it - particularly images that are also links to other pages. That way, they can quickly jump to the page they're interested in without having to wait for the entire page to load.

7.      Attachments should be provided in Read Only format. All the attachments e.g. PDF, word doc, Excel etc should open in a new window

8.      Spelling and grammar should be correct.

9.      Jargon should be avoided i.e. more use of technical words should not be there English should be simple , understandable and user friendly language

10.  Language should be present as per the class of audience e.g. US and UK standards should be followed. Remember Visitors can't buy your products if they can't read the content.

11.  Print functions should work correctly.

For e.g. the Print preview should be displayed to verify the page length and contain of the page

The User Information category includes

1.      Users should receive email feedback if necessary. All feedbacks should be prompt

E.g. if salary is credited to your Bank Account, the feedback mail should be received within particular hrs

2.      Users should be informed if a plug-in or browser version is required for a particular part of application. E.g. To View any flash object on the website flash player is required

3.      Users should be able to give feedback via email or a feedback form. Feedback form should be available for the users to share the experience the while using the site.

The Next category is Error Prevention

1.      Errors should not come unnecessarily e.g. if user is trying to login the banking site with valid credential he should be able to login successfully.

2.      Error messages should be in plain language. E.g. error message displayed should be simple and understandable

For e.g in Ecom Seton UK site if the user does not provided the email id and password,then the error message displayed if “Email id is required field”, “Password is a required field”

3.      Error messages should describe what action is necessary. E.g

The error message saying Login is mandatory field instead we can use Please enter user name

This message clearly tells what action he needs to do

4.      Error messages should provide a clear exit point

e.g. message should be clear, relevant and complete.

Example if mandatory fields are left blank the record will not get saved .So it should be stated in the message what action user needs to take in order to save the record

Compatibility & Portability

The Audience category define community of people for whom the website is going to be usable and handy

1. Audience class should be defined properly.

If the target audiences are common people with no technical back ground then the site should be work flow and messages in the site should be such that they can understand it clearly

e.g. The terminology used should be according to US and UK English

Operating Systems Environment/Platform category is

2.      Operating environments and platforms should be defined, e.g. Application should be tested on different operating system windows XP, windows 2000, windows Vista as per the requirement from the client

   Various browsers should be specified for testing an application, e.g. Testing the      

   web application on different Browsers like IE 6, IE 7, Mozilla firefox, Opera etc

Web page display often varies widely between browsers. Page display may look different in different versions of the same browser!

Functionality

Validation message should be clear and concise.

i.e they should be in simple language with no grammar and spelling mistakes

and it should clearly tell user what action he needs to take

for example Validation of Numeric field category included the following

1.      Valid numeric characters in range of 0-9 should be allowed

2.      Invalid characters i.e. alphabets, special character should not be allowed in

numeric fields. Proper error message should be provide.

e.g. 'Quantity' must be numeric.

3.      For all numeric fields the boundary values and also mid-range values should be allowed

e.g Maximum length of field is " 30 " characters.

Validation of alphabetic field

For example name fields

1.      Valid alphabets from A-Z and a-z should be allowed

2.      Invalid characters i.e. numbers, special character should not be allowed in

Alphabet fields. Proper error message should be provided

3.      For all alphabetic fields the boundary values and also mid-range values

Should be allowed.

For e.g. if the field length is 20 characters then user should be able to use 20 characters and less.

Validation of alpha-numeric field

It is similar to alphabetic characters only the difference is that here the numeric value is allowed with the alphabetic letters

For example address fields can have alphabets and numbers in it ,It should allow following characters

1.      Valid alphabets from A-Z and a-z, numbers from 0-9 should be allowed

2.      Invalid characters i.e. special character should not be allowed in

Fields. Proper error message should be provided

e.g. ‘’ field should contain alphanumeric characters.

3.      For all the boundary values and also some mid-range values

Should be allowed.

Validation of duplicate records

1.      Duplicate records should not be allowed unless and otherwise specified.

E.g. if user have a gmail account with name elvina.dave@gmail.com then the application should not allow any other user to register with the same user name

2.      User should not be allowed to edit the current user name and make it duplicate..

i.e. if user edits a record then it should not be considered as a new record

e.g.

If I edit my profile on a web site then it should not allow me to edit my user name Rest other information should be editable. If I edit otherwise what can happen that if I edit my profile and edit the select some existing user name then the user name will be duplicated

be considered as a new user In seton uk, ecom site the email address used while registration is not allowed to edit to avoid the duplicity.

In banking application if the transaction is recognized only by username then application should not allow the user to edit or duplicate it.

Other Validations of fields

1.      All the mandatory fields should be filled by user with valid data

While registering any ecommerce site the mandatory information has to be filled with valid data for successful registration.

2.      Only spaces should not be allowed

If any mandatory field is filled by entering spaces/tab then proper error message” 'First name' is a required field.” Should be displayed

3.      User should not be allowed to submit with blank data in mandatory field

If any mandatory field is filled by entering blank spaces then proper error message” 'First name' is a required field.” Should be displayed

Business Flow category

1.      For the e-commerce site checkout process and payment gateways should be

checked. Verify the complete flow of the site if related to online payment.

e.g As an example check process of set on UK will be explained here

2.      In the administration module the data entered/ altered should be reflected

Properly on user front.

i.e consider an example where website offers different services to its user .And admin has the right to add or edit those service in that case if admin adds a new service or updates the existing service then it should be correctly displayed at the user end

Performance checklist

Here we will have a check on the performance of the web site which depends mainly on the following 2 category

Number of Users category

1.      Application should support the numbers of users which are defined in the SRS

Ex: This feature is used to verify the load and stress on the application.

In the Ecommerce or any Web Application, application should run smoothly with the specified user without getting stuck any where. If application is made for 100 user then it should run smoothly for 100 users.

Time Frame category

1.      After entering the application URL in the browser with the application should start in reasonable time with all the ideal conditions i.e. Speed of internet

Ex: If user enters www.Gmails.com in the browser, then HOME of the application should get displayed in the reasonable time. Standard download time , Home page downloads within 10 seconds or less. Internal pages download within 15 seconds or less.

2.      The images present on the page should open in reasonable time. So the size of images should be moderate

Ex: Images in the application should get downloaded in the reasonable time when clicked. Size of the images are depends on the pixel size. So images with small pixel size should used wherever possible.

3.      If any flash application is present on the page then a loader symbol such as hour glass must be present on screen till the application gets loaded completely

Test Environment category

1.      The test environment should match the clients requirement

i.e the test environment that we select for testing should match the requirement mentioned by client in the SRS Ex: Test server configuration should match with the client's server configuration like the windows server or Linux server.

2.      The application should work more or less the same when run on maximum and minimum system configurations (e.g. RAM- 256- RAM 1GB)

There should not be any significant difference in the performance of the application if it is run on Minimum or Maximum RAM requiremt or other system configuration for example if minimum RAM requirement is 256 MB then it should work similar to how it runs on 1 GB .there should not be any major difference in the performance

Ex: Speed of accessing the application should work as per the system configuration.

If User gets registered with any of the side, then registration process response time should work as per the system configuration.

Database category

1.      All the records should get added properly in the database

Ex: In the web application, if any user is created then all the entries which belongs to that user should get inserted into the respective fields into the database like Username, First Name, Last Name etc.

2.      User should be able to fetch the records from the database

i.e after the records are inserted into the data base it should also be fetched correctly

i.e if we user name is fetched from the table then it should return it correctly

Ex: This is a part of database testing. The user's records which are present in the application should get fetched as per the queries fired by the user

3.      All the fields should save the information properly

Ex: In the web application, user registration form is there. If user registers himself or updates its existing profile then then that information should get saved into the respective fields correctly

The Security checklist the covers points like data security,privacy, unauthorised login

Access Control

1.      If user enters a wrong password many number of times then the account should get blocked e.g. in any banking site if the user enters invalid password for 3 times the User id gets blocked and the system does not allow the user to re-enter the password

2.      If user logs in the account and leaves the application in idle state for more time then the session should expire and also should not be allowed to work with browser back button.

i.e if user is logged into the site and is doing any action on a form or record then he leaves the system and does not perform any action then its session must expire after a certain specified period of time e.g 10 mins or 20 min depending on the type of site .

For example in banking sites the session expiry time is usually 5 min or less

Which means, if user performs any action after 5 min then he is asked to re-login

3.      If user is logged in to the application and copies the same URL in other browser window then login should be canceled and user should ask for login in the other window

e.g it happens for banking sites specially if the user is logged in and checking the account info, copies the URL and paste it in to another browser then the user is asked to login again to check the account info

4.      Unauthorized user should not be allowed to login i.e. without valid login credentials

e.g. if the user name and password provided are incorrect then, user should not be allowed to login

Privacy/ Data Security category

1.      Sensitive data should be visible to restricted users

i.e the data should be right protected.

And sensitive data should be visible only to admin or the user with the rights assigned to him

For example credit card details of customers should be shown to the credit card holder or the system administrator only and not to every user

2.      Restricted information about the company should not be shown publicly or it should not be leaked out in any way

i.e the restricted and private information about the company should not be displayed to user .I

3.      Sensitive information such as credit cards numbers etc should not be saved anywhere

i.e. the Credit card info should not be saved in the data base an y where by the website

if saved then it should be in encrypted form and displayed as masked

4.      The password should always come in encrypted formats.

The passwords should not be displayed it should be shown masked

e.g While login, when user enters the password in the Password text field in to be in encrypted form

5.      User should not be allowed to copy the password or if copied it should be in encrypted form

e.g. in previous example if we copy the entered the password ,on the notepad. The visible text is in encrypted form.

6.      The privileges given for data viewing should work properly

i.e. Add, update, edit, delete functionalities

7.      Cookies should be checked for changing data. This depends on the application and client requirement

Before testing the dynamic side we should first delete the cookies and then test

e.g. In IE browser the previous entered email address gets displayed they are co

Some time it is the requirement from the client.

8.      URL should not contain the private data related to the user like Credit Card details, User ID, etc.

When you navigate to different screens and perform different operation within the application then URL changes. We need to test that this url in the browser address should not display credit card number or other private data like password

Tips and Tricks additional information is given related to website

1.      For checking the spelling mistakes of contents in website, copy all the contents to word doc and press F7 or go to tools-> spellings and grammar

2.      For checking the layout of page by increasing or decreasing the font size "Press Control+ mouse scroll". By doing this font size gets increased/ decreased.

We need to check that the page layout does not get distorted if you press Control + mouse scroll

3.      In the word document words which are in all capital are not caught in spelling check in such case select the word and press "Shift + F3" to make the particular word or sentence in small case

And then we can check the spelling

4.      There are add-ones provided by Mozilla Firefox which can be downloaded from net in free. For these Add-ons go to "Tools-> Add-ons-> Get extension". Add on window will open user can select any Add-on from that window

5.      Web Developer is good Add-On for web testing. It has the facilities such as ruler, display lines to check the alignment properly

6.      User can also compare the two contents using Mozilla. Just press "control + F" find functionality opens on the bottom of the page.

Client sends us the text contents to be displayed on a page. To check whether that text has been correctly included in the page we can copy that text from client’s doc and paste it in the find text box if the text is found in the page then it means that the contents has been incorporated correctly .If the search fails then it means that the text is either missing or may be not been included correctly.

This concludes the generic web check list.

  Mock-up Checklist

Here I am presenting the Mock-up Checklist which is used while testing the Mock-ups for the Website.

The QA Process which has been follow in Zeon has been explained in Brief:

1.      For creating any website, client sends the requirements first.

2.      Once requirement comes, according to them designer team creates the mock-ups which are mostly in JPG format.

3.      Once mock-ups are created it comes to QA for verification and once QA Approves, it is sent for Client Approval.

4.      If client approves, Html pages are created as per the approved mock-up templates and it is integrated with website on platform which will be used (Java, PHP, etc.)

For creating any website Designer Team first creates the Mock-up in JPG format and it is sent to Client for Approval. As these mock-ups come to QA we follow the generic checklist of the Mock-up.

We are now switching to different categories of the checklist in which different point has been distributed.

1.      Layout: In the Layout category there are different points which have been mentioned.

1.      Layout should be simple, consistent: Layout of the mock-ups should be consistent in all the templates. As there are number of mock-ups has been created for the single website, layout in all the mock-ups should be same.

2.      The color contrast should be maintained: The Color combination which has been used in the mock-ups, it should be maintained.

3.      The layout resolution should be proper: In every mock-up layout should be consistent, generally the layout should be 800 X 600 dimensions.

4.      Background color: Background color of the mock-up should be proper and prior to match with foreground color.

5.      Navigation parts: The navigation part of the mock-up should be properly highlighted.

6.      Page corners: The corners of the mock-up should be properly chopped. There should not be improper chopping.

7.      The elements such as buttons, links and bread Crum should stand out properly i.e. they should be highlighted properly.

2.      Images: In the Images category, we will discuss different points

1.      Cropped images: The images which have been used in the mock-up should be cropped in proper shape and size.

2.      Image Quality: Images which are used in the mock-up should have good quality, it should be clear and not blur.

3.      image background : It should match the page background color, images should not look distinctly or like a patch on the page.

4.      Image brightness: the brightness of the images should be proper in the mock-up.

5.      Message conveying images: the images which are displayed in the mock-up should have specific topic which relates to the information present in the mock-up.

6.      Image Corners: the corners of the images should be properly chopped and it should be sharp enough to view.

7.      Images alignment: Images should be properly aligned with the other information which is displayed in the mock-up.

3.      Text/ Font: In the Text/Font category, we will discuss different points

1.      Spellings and grammar: the information which is displayed in the mock-up should display correct spelling and grammar.

2.      English used: Text and English which is used in the mock-ups should be specific to the intended audience like US or CA, it means Canadian English should not be used on the mockups which will be used on US websites.

3.      Links: links which are displayed in the Text should be properly highlighted and more specifically in blue color.

4.      Menu Name: if the menus are present in the mock-up, the names in the menus should be consistently written.

5.      Client's requirements and their products. If the client’s current site is present then text matter should be taken from that site. ( Explain by indicating in the mock-up)

6.      Text should be readable in the mock-up.

4.      Color: This category includes different points which we are going to discuss now.

1.      Colors used should be appropriate (e.g. for grouping, pop-out effects, and so forth) (Will Explain by giving example in the mock-up)

2.      The background images color and the page color should be soothing. (Explain by giving example in the mock-up)

3.      The colors used on the entire page should be attractive and of proper shade (not too dark not too dull) : Color combination should be proper in the mock-up.

5.      Client Requirements: The points which are mentioned in this category are:

1.      Required logos, fonts, and colors should be included in the mockup: As per the client requirement there should be company logos and other information present on the mockup.

2.      Client address: if the address of the client is present in the mock-ups, it should be correct.

6.      Alignment and Stand of the Page: The category indicates several points:

1.      The Mock-up should be displayed in center.

2.      Try to open the mock-up in JPG format, page should be opened completely.

For any query or concern feel free to mail us at info@envissolutions.com
visit us @ www.envissolutions.com