UI (User Interface):- User Interface means testing the application that how easily an user can use/understand the application.
GUI (Graphical User Interface):- In GUI we test requirements like background color, button naming convention, drop down menus, Font of the text etc.
Basically there are no difference between UI and GUI except that in GUI we test for the graphics. In both types we test the look and feel of the application.
While testing web applications we should test following scenarios:-
Colors:-
1) Hyperlinks color should be standard
2) All buttons should be of standard format and size
3) Background color should be distraction free
4) Screen and field colors should be adjusted correctly for non-editable mode.
5) Fields should prompts correct color
Content:-
1) All fonts should be same
2) Text should properly aligned
3) Texts specified in all fields should be in correct screen font
3) All headings should be left aligned
4) First letter of second word should be in lower case
Images:-
1) All images should properly aligned
2) All command button should be of similar shape and size and same font size
3) Text should wrap properly around pictures
4) Images should visually consistent even without graphics
5) Graphics should optimized for quick downloads
Instructions:-
1) All error messages should spelt correctly
2) All tooltip should spelt correctly
3) Tooltip should be provided for every enabled field
Navigation:-
1) All disabled fields should be skipped in TAB sequence
2) All read only fields should skipped in TAB sequence
3) Scroll bar should appear if needed
4) On click of TAB focus should be on first editable field
5) Does home button is there on each page?