Thread: Manual UI Testing Criterias

What are the basic testing criterias for manual UI testing?

Many of the projects in real life scenarios do not contain major business rules. In that case, the client demands a mojor focus on the UI testing.
Sometimes when the client starts testing, it goes for pixel by pixel testing of a particular web part or picture quality of videos attached on any site.
In such cases, how can one make sure that UI Testing has been done enough? I mean, what are the major points taken into consideration while carrying out UI testing?

Testing user interface for web application is slightly different from testing user interface of traditional applications. Irrespective of the web application there are certain things which should be tested for every web application. Following checklist will give some information on items that should be tested to ensure quality of the user interface of your web application.



1.1 COLORS

1.1.1 Are hyperlink colors standard?
1.1.2 Are the field backgrounds the correct color?
1.1.3 Are the field prompts the correct color?
1.1.4 Are the screen and field colors adjusted correctly for non-editable mode?
1.1.5 Does the site use (approximately) standard link colors?
1.1.6 Are all the buttons are in standard format and size?
1.1.7 Is the general screen background the correct color?
1.1.8 Is the page background (color) distraction free?

1.2 CONTENT

1.2.1 All fonts to be the same
1.2.2 Are all the screen prompts specified in the correct screen font?
1.2.3 Does content remain if you need to go back to a previous page, or if you move forward to another new page?
1.2.4 Is all text properly aligned?
1.2.5 Is the text in all fields specified in the correct screen font?
1.2.6 Is all the heading are left aligned
1.2.7 Does the first letter of the second word appears in lowercase? Eg:

1.3 IMAGES

1.3.1 Are all graphics properly aligned?
1.3.2 Are graphics being used the most efficient use of file size?
1.3.3 Are graphics optimized for quick downloads?
1.3.4 Assure that command buttons are all of similar size and shape, and same font & font size.
1.3.5 Banner style & size & display exact same as existing windows
1.3.6 Does text wrap properly around pictures/graphics?
1.3.7 Is it visually consistent even without graphics?

1.4 INSTRUCTIONS

1.4.1 Is all the error message text spelt correctly on this screen?
1.4.2 Is all the micro-help text(i.e tool tip) spelt correctly on this screen?
1.4.3 Microhelp text(i.e tool tip) for every enabled field & button
1.4.4 Progress messages on load of tabbed(active screens) screens

1.5 NAVIGATION

1.5.1 Are all disabled fields avoided in the TAB sequence?
1.5.2 Are all read-only fields avoided in the TAB sequence?
1.5.3 Can all screens accessible via buttons on this screen be accessed correctly?
1.5.4 Does a scrollbar appear if required?
1.5.5 Does the Tab Order specified on the screen go in sequence from Top Left to bottom right? This is the default unless otherwise specified.
1.5.6 Is there a link to home on every single page?
1.5.7 On open of tab focus will be on first editable field
1.5.8 When an error message occurs does the focus return to the field in error when the user cancels it?

1.6 USABILITY

1.6.1 Are all the field prompts spelt correctly?
1.6.2 Are fonts too large or too small to read?
1.6.3 Are names in command button & option box names are not abbreviations.
1.6.4 Assure that option boxes, option buttons, and command buttons are logically grouped together in clearly demarcated areas "Group Box"
1.6.5 Can the typical user run the system without frustration?
1.6.6 Do pages print legibly without cutting off text?
1.6.7 Does the site convey a clear sense of its intended audience?
1.6.8 Does the site have a consistent, clearly recognizable "look-&-feel"?
1.6.9 Does User cab Login Member Area with both UserName/Email ID ?
1.6.9 Does the site look good on 640 x 480, 600x800 etc.?
1.6.10 Does the system provide or facilitate customer service? i.e. responsive, helpful, accurate?
1.6.11 Is all terminology understandable for all of the site’s intended users?

hey!!
thanks so much for this list.

It really is a very useful list.
But still there is a question for testing the Image sizes and Video display size - pixel by pixel.
I have heard about a tool called SCALE being used for the same.
But then again I dont know anything about the tool.

So please share with me anything you know about this tool or any other tool used for same purpose.

Thanks again for the shared information.

Cheers!!
Shweta

Hey Friend,

Thanks for the information...it is very useful ..

Originally Posted by sarvesh4u

Testing user interface for web application is slightly different from testing user interface of traditional applications. Irrespective of the web application there are certain things which should be tested for every web application. Following checklist will give some information on items that should be tested to ensure quality of the user interface of your web application.



1.1 COLORS

1.1.1 Are hyperlink colors standard?
1.1.2 Are the field backgrounds the correct color?
1.1.3 Are the field prompts the correct color?
1.1.4 Are the screen and field colors adjusted correctly for non-editable mode?
1.1.5 Does the site use (approximately) standard link colors?
1.1.6 Are all the buttons are in standard format and size?
1.1.7 Is the general screen background the correct color?
1.1.8 Is the page background (color) distraction free?

1.2 CONTENT

1.2.1 All fonts to be the same
1.2.2 Are all the screen prompts specified in the correct screen font?
1.2.3 Does content remain if you need to go back to a previous page, or if you move forward to another new page?
1.2.4 Is all text properly aligned?
1.2.5 Is the text in all fields specified in the correct screen font?
1.2.6 Is all the heading are left aligned
1.2.7 Does the first letter of the second word appears in lowercase? Eg:

1.3 IMAGES

1.3.1 Are all graphics properly aligned?
1.3.2 Are graphics being used the most efficient use of file size?
1.3.3 Are graphics optimized for quick downloads?
1.3.4 Assure that command buttons are all of similar size and shape, and same font & font size.
1.3.5 Banner style & size & display exact same as existing windows
1.3.6 Does text wrap properly around pictures/graphics?
1.3.7 Is it visually consistent even without graphics?

1.4 INSTRUCTIONS

1.4.1 Is all the error message text spelt correctly on this screen?
1.4.2 Is all the micro-help text(i.e tool tip) spelt correctly on this screen?
1.4.3 Microhelp text(i.e tool tip) for every enabled field & button
1.4.4 Progress messages on load of tabbed(active screens) screens

1.5 NAVIGATION

1.5.1 Are all disabled fields avoided in the TAB sequence?
1.5.2 Are all read-only fields avoided in the TAB sequence?
1.5.3 Can all screens accessible via buttons on this screen be accessed correctly?
1.5.4 Does a scrollbar appear if required?
1.5.5 Does the Tab Order specified on the screen go in sequence from Top Left to bottom right? This is the default unless otherwise specified.
1.5.6 Is there a link to home on every single page?
1.5.7 On open of tab focus will be on first editable field
1.5.8 When an error message occurs does the focus return to the field in error when the user cancels it?

1.6 USABILITY

1.6.1 Are all the field prompts spelt correctly?
1.6.2 Are fonts too large or too small to read?
1.6.3 Are names in command button & option box names are not abbreviations.
1.6.4 Assure that option boxes, option buttons, and command buttons are logically grouped together in clearly demarcated areas "Group Box"
1.6.5 Can the typical user run the system without frustration?
1.6.6 Do pages print legibly without cutting off text?
1.6.7 Does the site convey a clear sense of its intended audience?
1.6.8 Does the site have a consistent, clearly recognizable "look-&-feel"?
1.6.9 Does User cab Login Member Area with both UserName/Email ID ?
1.6.9 Does the site look good on 640 x 480, 600x800 etc.?
1.6.10 Does the system provide or facilitate customer service? i.e. responsive, helpful, accurate?
1.6.11 Is all terminology understandable for all of the site’s intended users?

System Resolution Distorting free GUI should be displayed on increasing or decreasing the system resolution
Resize Window Distorting free GUI should be displayed on resizing the window
Tab Order - Tab Cusor should move through all the next fields, on placing the cursor on the first field of the screen and keep on pressing TAB multiple times until curson is on last field
Reverse Tab Order - Shift + Tab Cusor should move through all the previous fields, on placing the cursor on the last field of screen and keep on pressing Shift + TAB multiple times until curson is on first field
Move forward and back Appropriate page should be displayed on moving forward and backward using bread crumbs [Data should remain in the previous page]
Tool Tip & Help Text Appropriate help text should be displayed on placing the cursor over the web elements
Fields Validation All the fields should be validated correctly on entering valid and invalid data
Spelling & Grammar Text displayed in this page should be without spelling and gramatical mistakes
Mandatory Fields User should be informed to enter the mandatory fields if he/she misses any
Keyboard Shortcuts All the keyboard short cuts including 'Enter' key for 'Submiting/Saving' the page should work
Page Refresh Page should be refreshed successfully without any issues data loss or issues
Font Size Text should be displayed in corrent size, instead of displaying too large or too small
Page Heading Page heading should be displayed,it should be the correct heading and it should have heading properties
Header options All the header options in this page should work and navigate the User if required
Footer options All the footer options in this page should work and navigate the User if required
Left & Right Pane options All the pane options in this page should work and navigate the User if required
Logical Grouping All the Fields, Button and options which are logically related should be grouped
Look and Feel The look and feel of the page should be good without any issues [Alignment of all kinds of objects should be correct]
Scroll bar The scroll bar should be displayed if the page is too long
Button Properties All the buttons are of similar size, shape etc..
Color Standards All the hyeperlinks, Buttons, Fields, Field backgrounds, dialog boxes, page background etc.. Should have standard color properties
Incorrect URL Page Not found message should be displayed, instead of Server Error
Focus When a dialog box is opened from the page , the page should get greyed out and the dialog box should have focus
Dialog boxes All the dialog boxes displayed in this screen should pass Usability Testing