Usability Testing Planing

Meeting Agenda

  1. New features review – a11yfirst checker, show block
  2. Known bugs – double scroll, anchor
  3. Next feature items – link, image
  4. Second round of usability testing goals –  See U of I box folder (Login required)
  5. Recruiting testers for usability testing (Jemma and Dena)
  6. A11yfirst Editor deployment process to Library CMS – meeting with Library IT/Training materials(ie. “getting started” video)/ collaboration with DRES accessibility Badging training system
  7. Go live target date to WordPress dev and stage sites – Nov 30, 2017
  8. Versioning strategy – current one is 0.5.0/ how to inform users that the editor was updated.
  9. Demo site maintenance and update –  “save” and “edit” functionality
  10. Review A11yfirst help file –

Block Format Change & Milestone Release


Conceptual Model for block format

  • Menubox with check box for block format is getting complicated.
  • Two main categories of conceptual model re “block”
    • simple block such as p, pre
    • complex block such as template, block quote
  • Implied conceptual model in ckeditor is that their block format menu is “simple block”, so it does not allow nesting.  In fact, block format is complex block
  • Bottom line is why don’t we simply use block quote menu button and use block format menu – advantage is using CKeditor way.

Block Format Implementation

block format menu – no gutter design next to menu items – used rich combo box instead of menu list

Next Milestone Release

Next milestone release will be on the week of September 25 and the project website demonstration page will be updated accordingly. This milestone will included complete heading plugin, link plugin, instyle plugin, blockformat and accessibility checker.


Nick Hoyt, JaEun Jemma Ku

A11yFirst Library Installation Meeting


  1. Deployment Schedule
    • we would need more time to deploy the editor to the library – changes some design for format plugin
  2. Library deployment issues – “source view” configuration
  3. “Getting started” material – notice on users when they are about to use A11yFirst editor
  4. Git repository restructuring for deployment
    • WordPress Plug-in – JaEun Jemma Ku needs to start working on the plugin.
    • Code dissemination
      • A plugins directory with only the plug-ins directory
      • A sample directory with sample implementations and installation and configuration options
  5. “Getting Started” Objectives
    • Communicate organization values accessibility
    • What is accessibility
    • Information access for people with any level of abilities, including people with disabilities
    • Support assistive technologies
    • Support operating system built-in accessibility features
    • Communicate that editor will help you achieve organizational goals for accessibility
    • Communicate that editor is different than other editors and what the differences are
    • Set the context
      • First time user of the editor should read this material
      • Unobtrusive for other sessions

For more info, please see “Getting Started” page


Jon Gunderson, Robert Slater and JaEun Jemma Ku

Accessibility Checker

Using the CKEditor Accessibility Checker

  • Provide a way to monitor or get the number of errors
  • Prevent publishing based while there are errors

Heading Plugin

  • Create a TOC based on headings
    • Creates a dialog box with links to headings or allow editing of heading text and levels
    • Insert a TOC into document
  • Highlight headings on that page (outline)

Getting started material

  • Help section for each plugin goest to central A11yFirst Help plugin.
  • Each A11yFirst plugin help contents are also part of global “Getting Started Material” material.

a11yfirst help plugin data flow and potential UI design

“Getting Started” Material


  • Getting started plug-in (dialog)
  • Getting started video
  • Web page with standard and a11yFirst editors
    • This would allow comparison of two editor features

Getting Started Topics

Purpose is to help orient people to accessible authoring and to the features of the A11yFirst plug-ins.

  • What is accessibility and why is it important
  • Heading structure
  • “Format” versus “Inline Style” menus
  • Why link text matters
  • How to create ALT text and long descriptions

Why the editor is different (constrained):

  • Improved compatibility with assistive technology (A11y)
  • Branding consistency through restrictions in format and inline style
  • Improved use of document structure for SEO compatibility
  • Improved document flow and organization for readability

Usability Testing Result Discussion


Dena Strong, Jon Gunderson, Nick Hoyt and JaEun Jemma Ku


  1. Usability Testing Report (Login Required)
    • Confusions by users
    • Standard mismatch
    • Functionality issue
    • Users’ preferences
  2. Orienting materials for text editor users : “Getting Started” -> Need to orient users regarding A11yFirst editor
    • Heading level
    • Format vs style
    • Text editor vs visual editor
    • Basic accessibility awareness – why link text matters
    • How to create ALT text

* Based on discussion today, all the design specification documentation was updated.

Ongoing Evolution

Meeting Agenda

Discussion Topics:

We talked about

  1. Specific design change for heading plugin, link plugin, in style plugin (all the change details were recorded in Design Resource documentation.
  2. Schedule for staged deployment and packaging for WordPress CMS
  3. Ongoing Evolution(Aka. future plans)
  4. Final innovation project report


Jon Gunderson, Nick Hoyt, JaEun Jemma Ku, Robert Slater

Action Items for Library CMS Deployment


Robert Slater, Jon Gunderson, and JaEun Jemma Ku


    1. Findings from usability testing
    2. Design scope for block format
    3. Action items for deployment: what should be done to deploy a11yfirst editor to library WordPress CMS?

3. 1 Must Have Features

      • Reduce special characters (Jemma will create a list)
      • Add paragraph justify
        • Left
        • Right
        • Center
      • Format Features
        • Blockquote
        • Pre-formatted (pre)
      • Image ALT text checking
        • Check document on insert for ALT text
        • This is a plug-in that only allows editing of ALT text
      • Accessibility Checker
      • special character options -reduce the number of chars

3.2 Nice To Have Features

    • List style options
      • No-bullet
      • Extra line spacing
      • Highlight (colors and border)
    • Paragraph
      • Hightlight (colors border options)

* Note: a11yfirst editor has two “find and replace” and we should keep only one.


Lessons Learned – Usability Testing


  • Nick Hoyt
  • Dena Strong
  • JaEun Jemma Ku

Discussion Topic

  1. Review/analyze three usability testing sessions – result patterns
  2. UX lunch club idea/feedback regarding UI design
  3. Block format discussion regarding Library requirements


  • Change/improve vague ” remove format” to specific ones such as “remove heading” or “remove style”
  • Change in tool bar configuration in the second row as the order of
    •  Bold button, Italic button, Inline style menu, remove format button, divider, Special character button, language button (see the attached image below)
  • Gather info about “review format/normal” from other editors such as google doc, MS word, Box) -> comparative analysis by Dena Strong
  • Next “lessons learned meeting from the rest of usability testing” will be on the week of August 14, in which all the usability testings are done.

Discussion and Suggestions from Usability testing

  • Users are confused how to remove “block quotation” style ->redundancy of ” “remove format” function throughout User interface such as “remove format button”, “T” with underline and x mark
  • “inline style” can become “menu” button” not “richcombo” button in CK source function for the consistency
  • Feedback to CKsource -> Language menu button is icon only label, which appears to be kanji character, user thinks that the icon
    • will translate the existing language, not tagging it
    • will add special characters
  • Discussed adding “Normal” menu option under “heading” menu. “Normal” menu is the same function as “remove format” under heading menu
  • Adding font size options such as ” larger” or “smaller” rather than pixel size would help to prevent the users using heading level as a visual style. -> need to confirm its implementation with the rest of group members
  • Trying to find a way to give users ability to remove specific formats in consistet and intuitive way