Web Application GUI Checklist

Testing user interface of web application is to ensure that the task within the application is user-friendly for all users and that the application meets specific standards of graphical user-interface. In short, this is the area of testing that complies with standards and conventions. The checklist mentioned below, may be helpful or beneficial for software tester & testing team to perform UI testing as it comprises of some GUI components that can be used as reference while testing/checking in an systematic way.

CONTENT

• Make sure all the page title or page header content are correct and that they are left aligned.
• Verify all the error message on the screen and make sure it doesn't have any spelling mistake.
• Check to ensure that the fonts applied to the content should be same or match to the requirement specification.
• Check whether the page content are intact when you navigate to another page and move back.
• Verify all the contents and labels are properly aligned.
• Check & rectify the spelling errors in the content.
• Verify all the text or content present for the fields are correct and matches to the required specification.
• Check that all the screen prompts specified matches the correct screen font as specified in the specification.
• Check all the content for respective words to be in lower and upper case.

NAVIGATION

• Verify all the links given in the sitemap prompt to actual page/section as specified in the requirement specification and check for broken links (If any).
• Ensure all the screens which are accessible via buttons are accessed properly.
• Make sure the scroll bar appear when the page/dialog content are long.
• When an error message occurs in a new window, make sure the focus should prompt to the button in the error message which can be used by the user to cancel/close it?
• Make sure there should be a link to navigate to home page on every single page.
• Any operation that invokes or opens a page/section in another browser tab should move the focus to the first editable field.
• Verify whether the tab order specified on the screen move in sequence from Top Left to bottom right. [Note: This should be the default behavior unless otherwise if any other behavior is specified in the requirement specification.]
• Check all the disabled & read-only fields are avoided in the TAB sequence.

IMAGES

• Check whether all the image graphics are properly aligned or not.
• Make sure the text wraps properly around pictures/graphics.
• Verify there are no broken images all over the website.
• Check the size for the graphics used or uploaded.
• Make sure the buttons are all of similar size, shape and are off same font & font size.
• Check all the banners i.e. banner style, size & display exact same as existing window.
• Is it visually consistent even without graphics.

COLORS

• Check the color of the link & hyperlink are standard or not.
• Test the background color of all pages in the site.
• Does all the buttons available in the site are off standard format, color and size.
• Verify that the screen and field colors are being adjusted correctly for non-editable mode.
• Verify the color of the warning message should be appropriate as per specs.
• Make sure that any section/pages background (colors) is distraction free.

INSTRUCTIONS

• Make sure all the error message & tool tip text that display in the site doesn't have any spelling errors & are shown correctly on the screen.
• Verify all the content/text that is shown as tool tip for every enabled field & button match with the requirement specification.
• Check the progress messages on load of tabbed/active screen.

OTHER ITEMS RELATED TO USABILITY

• Verify whether the site is accessible and looks good in different screen resolutions - 640 x 480, 600 x 800, 1366 x 768 etc.
• Make sure the site have a consistent, clearly recognizable Look & Feel.
• Verify whether all the pages are printed legibly without cutting off text.
• Verify all the terminology used in the site are clearly understandable by all site users.
• Make sure the names specified in button & option box are not abbreviations unless if required/specified in specs.
• Assure that the fonts used in the site are not too large or small to read.
• Does the site convey a clear sense and meaningful info to its intended audience.
• Check whether the site provide or facilitate customer service (info, details etc) i.e. responsive, helpful, accurate for all site users.
• Check/verify the site accessibility in all supported devices and that it meets all the standard and convention there.  

Happy Testing !! :)