A graphical user interface (GUI) is a type of user interface in which the interface elements (menus, buttons, icons, lists, etc.) presented to the user on the display are in the form of graphic images.

It verifies in general the overall view of the application and particularly the forms located on the page.

General checks:

• The appearance of the elements when reducing the browser window + the appearance of scrolling
• The spelling of the text + the text should be aligned
• The correctness of the focus in the window (Tab / Tab + Shift)
• Highlighting of selected items
• Fixed fields look the same and differ from editable
• It is advisable not to use a double click.
• Check the availability of the necessary notifications
• Design unification (color, font, size)
• If necessary, the presence of tooltips
• Change the type of item when it is hover
• If the forms are duplicated, then the names should be the same

Additional Checks for Web Forms

Text field

• Check text selection with Ctrl + A / Shift + arrow
• Verify long text entry

Radio button

• Location near the corresponding text
• Switching buttons using the keyboard

Check boxes

• Set checkbox by clicking and space
• Location near the corresponding text

Drop down lists

• There must be a scroll function
• Must alphabetically (if text), ascending (if numeric values)
• If an element has been selected, it must be on top or indicated that it is selected.

Pop Up

• Center location

A graphical user interface is an interface in which a user interacts with a computer using graphic images.

The main elements of the graphical interface:

• window (browser window, dialog box, modal window, floating window)
• menu (main, popup, contextual, system)
• widgets / controls / controls (accordion, button, radio button, check box, icon (icon), list, toolbar, tree, scroll bar, slider, status bar, tooltip (tooltip), etc.)
• tab
• interaction elements: mouse cursor, text cursor, pointer (palm), drag and drop cursor, etc.

Key points when checking a GUI:

• location, size, color, width, length of elements;
• the ability to enter letters or numbers
• Is the application functionality implemented using graphical elements?
• placement of all error messages, notifications (as well as the font, color, size, location and spelling of the text)
• Is the font readable?
• does the cursor move from text to pointer when you hover over active elements, are selected elements highlighted
• alignment of text and forms
• image quality
• check the location and display of all elements at different screen resolutions, as well as when resizing the browser window (check if the scroll appears)
• check text for spelling, punctuation errors
• whether there are tooltips (if necessary)
• design unification (colors, fonts, text messages, button names, etc.)

The most common bugs:

• the cursor does not go to the pointer when pointing to the active element
• spelling and grammatical errors
• uneven arrangement of input fields in the forms themselves
• incorrect display of elements when changing the browser window size and page scale
• change text size when changing language
• uneven arrangement of forms
• different fonts
• selected items do not differ from those not selected