Skip to content

Instantly share code, notes, and snippets.

@mcdurdin
Created July 19, 2021 20:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mcdurdin/9341d4a8fd628c6cfea095e9d52cf582 to your computer and use it in GitHub Desktop.
Save mcdurdin/9341d4a8fd628c6cfea095e9d52cf582 to your computer and use it in GitHub Desktop.
User Testing samples
@mcdurdin
Copy link
Author

mcdurdin commented Jul 19, 2021

This is a rewrite of keymanapp/keyman#5430 (comment) for experimental purposes.

User Testing

@keymanapp/testers

General Description

Plain-text description

Run the following tests, when possible, for the two following keyboards:

  • (LATIN) sil_euro_latin.
  • (KHMER) khmer_angkor. (Selected as a "control" / "more normal" keyboard.)

Loading test (LOAD): As this PR is centered around how the OSK is constructed within KMW, simply make sure that the keyboard loads as expected on each different device type.

Collateral prevention (ROBUST): Test a few keystrokes for good measure; I don't expect any collateral effects here, but it's good to be sure.

  1. = then e: should emit ə
  2. m: should emit m

Help text insertion (SHORTCUT): Click the desktop form-factor's "help page" link for ə and verify that it is properly output.

image - So, click the bottom-right part that displays the `ə`.

Windows / Firefox

  • TEST-WF.LATIN.LOAD: load the sil_euro_latin keyboard; verify everything looks correct
  • TEST-WF.LATIN.ROBUST.DESKTOP.1: physically type = then e.
    • Expected result: ə
  • TEST-WF.LATIN.ROBUST.DESKTOP.2: physically type m.
    • Expected result: m
  • TEST-WF.LATIN.SHORTCUT: click on the "help-text OSK"'s ə button
    • Expected result: ə
    • Refer to the following image for the "button":
      image
  • TEST-WF.KHMER.LOAD: load the khmer_angkor keyboard; verify everything looks correct.
  • TEST-WF.KHMER.ROBUST.1: physically type a .

Windows / Chrome

  • TEST-WC.LATIN.LOAD: load the sil_euro_latin keyboard; verify everything looks correct
  • TEST-WC.LATIN.ROBUST.DESKTOP.1: physically type = then e.
    • Expected result: ə
  • TEST-WC.LATIN.ROBUST.DESKTOP.2: physically type m.
    • Expected result: m
  • TEST-WC.LATIN.SHORTCUT: click on the "help-text OSK"'s ə button
    • Expected result: ə
    • Refer to the following image for the "button":
      image
  • TEST-WC.KHMER.LOAD: load the khmer_angkor keyboard; verify everything looks correct.
  • TEST-WC.KHMER.ROBUST.1: physically type a .

macOS / Safari

  • TEST-MS.LATIN.LOAD: load the sil_euro_latin keyboard; verify everything looks correct
  • TEST-MS.LATIN.ROBUST.DESKTOP.1: physically type = then e.
    • Expected result: ə
  • TEST-MS.LATIN.ROBUST.DESKTOP.2: physically type m.
    • Expected result: m
  • TEST-MS.LATIN.SHORTCUT: click on the "help-text OSK"'s ə button
    • Expected result: ə
    • Refer to the following image for the "button":
      image
  • TEST-MS.KHMER.LOAD: load the khmer_angkor keyboard; verify everything looks correct.
  • TEST-MS.KHMER.ROBUST.1: physically type a .

macOS / Chrome emulation / iPhone X

  • TEST-I.LATIN.LOAD: load the sil_euro_latin keyboard; verify everything looks correct
  • TEST-I.LATIN.ROBUST.MOBILE.1: use the OSK to type = (numeric layer) then e.
    • Expected result: =e
  • TEST-I.LATIN.ROBUST.MOBILE.2: use a longpress on e to type ə. (Second-to-last subkey)
    • Expected result: ə
  • TEST-I.KHMER.LOAD: load the khmer_angkor keyboard; verify everything looks correct.
  • TEST-I.KHMER.ROBUST.1: use the OSK to type a .

Android / Keyman app

  • TEST-A.LATIN.LOAD: load the sil_euro_latin keyboard; verify everything looks correct
  • TEST-A.LATIN.ROBUST.MOBILE.1: use the OSK to type = (numeric layer) then e.
    • Expected result: =e
  • TEST-A.LATIN.ROBUST.MOBILE.2: use a longpress on e to type ə. (Second-to-last subkey)
    • Expected result: ə
  • TEST-A.KHMER.LOAD: load the khmer_angkor keyboard; verify everything looks correct.
  • TEST-A.KHMER.ROBUST.1: use the OSK to type a .

@mcdurdin
Copy link
Author

This is a rewrite of keymanapp/keyman#5412 (comment) for experimental purposes.

User Testing

@keymanapp/testers

Instructions

As this PR is centered around how the OSK is constructed within KMW, simply make sure that the keyboard loads as expected on each different device type.

There's nothing particular to specific types of keyboards for this one, so just pick one or two. Test a few keystrokes for good measure; I don't expect any collateral effects here, but it's good to be sure.

Desktop instructions (important!)

The important part: pay extra attention to in-browser desktop form-factor tests, as those are the most likely to break. Make sure the UI modules load properly and allow keyboard-swapping as expected. Use the standard unminified test page:

image

In order to test compatibility with the different UI module types, you'll need to mildly edit the unminified test page's source:

https://github.com/keymanapp/keyman/blob/754430eff7e84ffa42c065bbba14bb7b170a42c0/web/testing/unminified.html#L35

The four UI modules use the following filenames:

  • kmwuibutton.js
    image
    • Note: the button will likely display above the first input element, rather than beside the current text input receiver. This is fine.
  • kmwuifloat.js
    image
  • kmwuitoggle.js (The default state for the "Unminified" test page.)
    image
  • kmwuitoolbar.js (This is also used by the "Toolbar UI" test page.)
    image

https://github.com/keymanapp/keyman/blob/754430eff7e84ffa42c065bbba14bb7b170a42c0/web/testing/unminified.html#L35

Simply swap out the filename at the line above within unminified.html and reload in order to test a different UI module.

Windows / Chrome

Using web/testing/unminified.html and the instructions above about swapping the UI modules out:

Button UI

  • TEST-CHROME.LOAD.BUTTON.1: Confirm that KMW loads properly and displays the Button UI (kmwuibutton.ts).
  • TEST-CHROME.LOAD.BUTTON.2: Use the Button UI to select sil_euro_latin and confirm the keyboard swaps properly.

Float UI

  • TEST-CHROME.LOAD.FLOAT.1: Confirm that KMW loads properly and displays the Float UI (kmwuifloat.ts) when the OSK is visible.
  • TEST-CHROME.LOAD.FLOAT.2: Use the Float UI to select sil_euro_latin and confirm the keyboard swaps properly.

Toggle UI

  • TEST-CHROME.LOAD.TOGGLE.1: Confirm that KMW loads properly and displays the Toggle UI (kmwuitoggle.ts) when the OSK is visible.
  • TEST-CHROME.LOAD.TOGGLE.2: Use the Toggle UI to select sil_euro_latin and confirm the keyboard swaps properly.

Toolbar UI

  • TEST-CHROME.LOAD.TOOLBAR.1: Confirm that KMW loads properly and displays the Toolbar UI (kmwuitoolbar.ts).
  • TEST-CHROME.LOAD.TOOLBAR.2: Use the Toolbar UI to select sil_euro_latin and confirm the keyboard swaps properly.
    • Most easily done through the "Europe" region, then the "English" language.

Windows / Firefox

Using web/testing/unminified.html and the instructions above about swapping the UI modules out:

Button UI

  • TEST-FIREFOX.LOAD.BUTTON.1: Confirm that KMW loads properly and displays the Button UI (kmwuibutton.ts).
  • TEST-FIREFOX.LOAD.BUTTON.2: Use the Button UI to select sil_euro_latin and confirm the keyboard swaps properly.

Float UI

  • TEST-FIREFOX.LOAD.FLOAT.1: Confirm that KMW loads properly and displays the Float UI (kmwuifloat.ts) when the OSK is visible.
  • TEST-FIREFOX.LOAD.FLOAT.2: Use the Float UI to select sil_euro_latin and confirm the keyboard swaps properly.

Toggle UI

  • TEST-FIREFOX.LOAD.TOGGLE.1: Confirm that KMW loads properly and displays the Toggle UI (kmwuitoggle.ts) when the OSK is visible.
  • TEST-FIREFOX.LOAD.TOGGLE.2: Use the Toggle UI to select sil_euro_latin and confirm the keyboard swaps properly.

Toolbar UI

  • TEST-FIREFOX.LOAD.TOOLBAR.1: Confirm that KMW loads properly and displays the Toolbar UI (kmwuitoolbar.ts).
  • TEST-FIREFOX.LOAD.TOOLBAR.2: Use the Toolbar UI to select sil_euro_latin and confirm the keyboard swaps properly.
    • Most easily done through the "Europe" region, then the "English" language.

iOS / in-app keyboard

Mobile instructions

As the OSK will be loading at a later time than it used to, we need to ensure that this doesn't cause obvious blank-keyboard bugs.

It would be wise to ensure that the keyboard loads correctly and consistently in both portrait and landscape orientations (issue #5252 not withstanding) within the apps and as system keyboard.

Portrait

  • TEST-IOS-MOBILE.PORTRAIT.1: Verify that the keyboard loads correctly on the first attempt.
  • TEST-IOS-MOBILE.PORTRAIT.2: Swap to a different keyboard and verify that it, also, works correctly.

Landscape

  • TEST-IOS-MOBILE.LANDSCAPE.1: Verify that the keyboard loads correctly on the first attempt.
  • TEST-IOS-MOBILE.LANDSCAPE.2: Swap to a different keyboard and verify that it, also, works correctly.

Settings

  • TEST-IOS-MOBILE.APP.SETTINGS: Enter the settings menu and install a new keyboard, then return to the main app. Verify that the new keyboard has loaded properly.

Android / in-app keyboard

Mobile instructions

As the OSK will be loading at a later time than it used to, we need to ensure that this doesn't cause obvious blank-keyboard bugs.

It would be wise to ensure that the keyboard loads correctly and consistently in both portrait and landscape orientations (issue #5252 not withstanding) within the apps and as system keyboard.

Portrait

  • TEST-ANDROID-MOBILE.PORTRAIT.1: Verify that the keyboard loads correctly on the first attempt.
  • TEST-ANDROID-MOBILE.PORTRAIT.2: Swap to a different keyboard and verify that it, also, works correctly.

Landscape

  • TEST-ANDROID-MOBILE.LANDSCAPE.1: Verify that the keyboard loads correctly on the first attempt.
  • TEST-ANDROID-MOBILE.LANDSCAPE.2: Swap to a different keyboard and verify that it, also, works correctly.

Settings

  • TEST-ANDROID-MOBILE.APP.SETTINGS: Enter the settings menu and install a new keyboard, then return to the main app. Verify that the new keyboard has loaded properly.

Android / system keyboard

Mobile instructions

As the OSK will be loading at a later time than it used to, we need to ensure that this doesn't cause obvious blank-keyboard bugs.

It would be wise to ensure that the keyboard loads correctly and consistently in both portrait and landscape orientations (issue #5252 not withstanding) within the apps and as system keyboard.

Portrait

  • TEST-ANDROID-SYSTEM.MOBILE.PORTRAIT.1: Verify that the keyboard loads correctly on the first attempt.
  • TEST-ANDROID-SYSTEM.MOBILE.PORTRAIT.2: Swap to a different keyboard and verify that it, also, works correctly.

Landscape

  • TEST-ANDROID-SYSTEM.MOBILE.LANDSCAPE.1: Verify that the keyboard loads correctly on the first attempt.
  • TEST-ANDROID-SYSTEM.MOBILE.LANDSCAPE.2: Swap to a different keyboard and verify that it, also, works correctly.

It's mostly the same as the previous suite, just without the in-app-only test.

@MakaraSok
Copy link

This looks easier on the eyes. :)

@MakaraSok
Copy link

image size, click to enlarge:

<img width="139" alt="image" src="https://user-images.githubusercontent.com/28331388/126450063-a6e43461-2587-4c2d-a768-fd1a2066c23b.png">

image

@mcdurdin
Copy link
Author

@MakaraSok, did you mean to paste that image here? This is only an experiment area 😁

@MakaraSok
Copy link

Yes, it's actually for my own conveniences when needed to use the bit in the future. I don't want to retype it every time. :)

@mcdurdin
Copy link
Author

You might want to build your own gists for doing this (just go to gist.github.com) so that we don't get confused in the future!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment