Usability Testing

User Experience
Accessibility
Nowadays
¡ The Web / mobile is replacing traditional resources
¡ government information and services
¡ education and training
¡ Commerce
¡ News …

¡ United Nations Convention on the Rights of Persons

with Disabilities (UN CRPD)
¡ Web / Mobile is accessible
¡ provide equal access and equal opportunity to people
with diverse abilities
Navigation without mouse
Interaction Keystrokes
Navigate to most elements • Tab
• Shift + Tab - navigate backward
Link Enter
Button Enter or Spacebar
Checkbox Spacebar - check/uncheck a checkbox
Radio buttons • ↑/↓ or ←/→ - select an option
• Tab - move to the next element
Navigation without mouse
(2)
Interaction Keystrokes
Select (dropdown) menu • ↑/↓ - navigate between menu options
• Spacebar - expand
Autocomplete • Type to begin filtering
• ↑/↓ - navigate to an option
• Enter - select an option
Dialog Esc - close
Slider • ↑/↓ or ←/→ - increase or decrease slider value
• Home/End - beginning or end
Menu bar • ↑/↓ - Previous/next menu option
• Enter - expand the menu (optional) and select an option.
• ←/→ - expand/collapse submenu
Navigation without mouse
(3)
Interaction Keystrokes
Tab panel • Tab - once to navigate into the group of tabs and once to
navigate out of the group of tabs
• ↑/↓ or ←/→ - previous/next tab.
'Tree' menu • ↑/↓ - Navigate Previous/next menu option
• ←/→ - expand/collapse submenu, move up/down one level
Scroll • ↑/↓ - scroll vertically
• ←/→ - scroll horizontally
• Spacebar/Shift + Spacebar - scroll by page
Navigation on mobile device
(with screen reader activated)
¡ Touch or move around the screen – speak and select the item under
your finger
¡ Swipe right or down – move to next item on screen
¡ Swipe left or up – move to the previous item on screen
¡ Double-tap – select focused item
¡ Swipe up then down – move to the first item on screen
¡ Swipe down then up – move to the last item on screen
¡ Swipe right then left – scroll forward on page or move slider
¡ Swipe left then right – scroll back on page or move slider
¡ Swipe up then left – Home button
¡ Swipe down then left – Back button
Font size
¡ 14px+ (0.875rem). —in fact, many publications use 20px or
larger for their body copy nowadays.

¡ Unit with a relative value (ex. %, rem, or em)

¡ Limit the use of font variations (italic, bold, ALL CAPS or

other styling methods)

¡ Do not use underlines for items that are not links

¡ Use markup instead of text on images. Screen readers
cannot read embedded text on images (without extra
code added) and embedded text can also become
pixelated when magnified by users with low vision.
Font face
¡ No conclusive on using serif or sans serif family font, but avoid specialty
display fonts

¡ Suggestion:
¡ Prominent ascenders (ex. the vertical line in d).
¡ Prominent descenders (ex. the down-pointing line in y).
¡ A d/b or p/q combination which are not an exact mirror image of one another.
¡ Uppercase I, lowercase l, and 1 must all have different characteristics from one
another.
¡ Avoid fonts that have tight letter spacing; these will be difficult for some users to
read.
¡ Kerning is also important, particularly between r and n. Otherwise, words like “barn”
could be read as “bam” or “modern” could change to “modem”.
Paragraph and Sentence
Spacing
¡ Whitespace is helpful to retain reading focus

¡ 1.5 - 2.0 relative to the line-height of your type

¡ Justified text is not advise (can cause “rives of space”)

Colour and Contrast
¡ At least 9% of the global population with some
variant of colour blindness, low vision or blind
¡ Small text – 4.5:1
¡ Large text (18pt+) – 3:1
¡ Use solid colour backgrounds
¡ Avoid using. Opposite ends of the colour
spectrum (red vs green; blue vs yellow
combinations)
¡ Beware of light shades of colour (especially
greys)
¡ Do not rely on color alone to convey info to
your users
Testing
Usability Testing
¡ A way to see how easy to use something is by
testing it with real users

¡ Users should:
¡ Complete tasks
¡ Work with researchers what problems encounter
¡ Explain experience confusion
¡ Provide recommendation (optional)
Evaluation
¡ Take place with real users

¡ Measure how ‘usable’ or ‘intuitive’ an app is

¡ Measure how easy it is for users to reach their

goals
Comparative Usability
Testing
¡ To compare an app against peer or competitor
app

¡ Also used to compare two designs to establish

which provides the best user experience
Explorative Usability Testing
¡ Establish content and functionality a new
product should include to meet the needs of its
users

¡ Test a range of different services where they are

given realistic scenarios to complete which helps
to highlight any gaps in the market
Advantages
¡ Feedback direct from the target audience to
focus the project team

¡ Internal debates can be resolved by testing the

issue to see how users react to the different
options being discussed

¡ Issues and potential problems are highlighted

before the product is launched
Disadvantages
¡ Testing is not 100% representative of the real life
scenario

¡ Does not provide the large samples of feedback

that a questionnaire might
Test Plan
A Good UI Test Plan …
¡ A formal document related to testing of your application.
(scope, testing approaches, activities, etc.)

¡ Always starts with identifying different resources available

for testing
¡ 1 - documentation.
¡ 2 - describes different requirements

¡ Need to prioritize different key areas that need to be

tested.
¡ Need to identify the resources

¡ Include responsive testing

Structural / Valuable
¡ Create Structural Map

¡ Estimate Total Time

¡ Detailed Guide For Testing

¡ Identify Resources

¡ Risk Mitigation
Writing a test plan
¡ Professionals Required (With their respective skills).

¡ Total time it would take for testing the web application.

¡ Different testing techniques the teams will be following.

¡ Resources required for testing such as tools, hardware,

documents etc.

¡ The target test environments such as OS, devices,

browsers etc. for cross browser testing.

¡ Final goals of the testing.

Testing scenarios
¡ help the customers and other business-related
teams understand the overview of what the testers
will be testing in the application

¡ cover the complete test cases

¡ help in prioritizing the different areas of the
application helping the testers in focussing those
areas specifically

¡ very important in studying the end-to-end flow of

the application.
Write A Test Scenario
¡ Go through the document, test plan, manuals etc. of the application to be
tested.

¡ Figure out different functionalities of the. application being in the shoes of

the end-user.

¡ Make a list of the test scenarios that you figured out after completing the
above two steps.

¡ Create a traceability matrix of the test scenarios you just listed to verify that
all the requirements have been satisfied.

¡ Get the scenarios reviewed by other management people or customers if

required.

¡ Include responsive testing scenarios in your plan to ensure seamless user

experience.
Test Cases
¡ provide greater control over the logic and flow of the
project.

¡ help in revealing the bug that was possible while being

operated by the end-user. Since test cases imitate the
end-user perspective, some hidden bugs are easily
discovered.

¡ provide a better flow for testing. A tester knows what to

test first and what to test after that and so on.

¡ bring you very close to satisfy the requirements of the

project/client.
Writing test cases
¡ Writing test cases under test scenarios only.
¡ Include the conditions required for the execution of the tests and the final
expected result.
¡ Do not focus on just positive cases only. Remember to jot down negative test
cases as well.
¡ Always use corner test cases or exception test cases. Such as “What if the user
enters a number as an email id” etc.
¡ Do not create dependent test cases. Since a user does not always follow a
specific order, your test cases also should not follow it. Create test cases to test
such scenarios also.
¡ Remember to include the following in the test case:
¡ Test Case ID
¡ Title of the test case
¡ Risk Level (High/Low)
¡ Type of testing used
Test Scripts
¡ help a new trainee/employee understand the
project and the functionalities in a deeper way.

¡ show a company’s seriousness towards the

quality control part of the web application.

¡ can look at the test scripts and understand

where the testing went wrong instead of
repeating the testing process again.
Write a Test Scripts
¡ Test Script ID – A unique ID defining the test script.

¡ Title – This is the title of the test script.

¡ Test Case ID- The ID of the test case on which you are writing the script.

¡ Requirements- The requirements to run the test cases such as web application and
hardware specifications.

¡ Procedure – This will include the step wise procedure for the tester to proceed for the testing.

¡ Result – The result of the test after being completed by the tester.

¡ Status – Status of the test script (Pass/Fail)

¡ Error Code- In case of failure, what error code was encountered.

Example
Test Script ID- 003
Title - Validate Login Functionality on Login Page
Test Case ID - TLO982
Requirements - Browser Compatible above Chrome 42, Firefox 52,
Safari 10, Edge 16, Opera 43
Procedure- Open the Login Page
Enter Valid Credentials
Click On The Login Button

Result - User has logged in successfully

Status - Pass
Error Code - None.
A/B Test
¡ also known as split testing

¡ a process of showing two variants of the same

application to different segments of visitors at the
same time and comparing which variant drives
more conversions
Adobe XD
Export your design
¡ For Development
¡ Share > View Setting (Development, and target
devices/browser) > Link Assets (Anyone with the link)

¡ For Testing
¡ Share > View Setting (Testing) > Link. Assets (Anyone
with the link)