This post was most recently updated on June 17th, 2019
• What is UI (User Interface)?
User Interface is way with which website and its users interacts. It is visual part of website which might include menus, links, images, content, designs and layouts. UI should be polished, simple but attractive to users’ eyes and importantly responsive these days.
• Why UI Testing is important?
1. To ensure that users of the website should have great user experience
2. The website should be simple to use, fast to load and easy to understand to its users.
3. The website should work on all type of up to date devices like desktops, mobiles, tabs and laptops
4. The UI should give same user experience in any browser or devices; that is to check the consistency of the UI
The most important part in UI design is software design specification.
• What is software design specification – A design specification is a detailed document providing information about the characteristics of a project to set criteria the developers will need to meet. A document which consist of quantitative details about what you want to design before actual design activity starts.
UI/UX team provides with a page wise design specification of the website which includes-
1. Capitalization of sentences (Sentence case or title case) to be checked as per requirement if provided or as per consistency.
2. Design details like –
a. Font type, Font size, Font weight and Font color of logo of the company, H1, H2, menu, titles, paragraph, button text, tag lines, or link text etc. can be specify in the design
b. Opacity of background of an element or image as per design
c. Margins- top- bottom, left and right side of the web page as well as for the web elements. And padding for each element of the web page.
d. Max and min body width of the web page
e. Spacing among the every elements on the web page e.g. spacing between H1 and H2, or between two social icons, header and footer section, logo and right hand side margin.
f. Links – targets of external and internal links, color, hover, broken links etc.
g. Social media icons and the respective links to related pages
3. Responsive design testing – The design details for responsive design should be mentioned in the design same like font type, font size, font weight, color, spacing etc.
Browser stack is good options to get different devices with different resolutions of –
a. Desktops – windows and iMac desktops
b. Mobiles – Android, iOS and Windows mobiles
c. Tabs – Android, iOS and Windows tabs
d. Check both portrait and landscape views of the mobile and tab devices
4. Compatibility on different browsers of the website
a. Chrome
b. IE11
c. Microsoft edge
d. Firefox
e. Safari
f. Opera
