Drag-and-Drop/Ordered Response Questions
the ExamSoft team was getting a request from representatives of the National Council of State Boards for Nursing (NCSBN) for completed reordering, sorting, and matching questions in compliance with their next-gen NCLEX exam. Although ExamSoft did have a basic drag-and-drop question type, it was still in beta and lacked the functionality and accessibility features needed for the new NCLEX: numbered items, clear indicators that items can be dragged on screen, and usability on the iPad.
I knew I needed to not only showcase effective designs in Figma, but also use my extra front-end developer skills to show how the interaction would work. There was no effective way in Figma to create the same realistic demo I wanted to offer the UX team and engineers who would greatly benefit from workable prototypes. I chose to code these prototypes using jQuery, HTML, and CSS so anyone could use them without to install extra plugins and/or libraries on their system. These workable prototypes also needed to showcase the addition of a drag icon, as well as numbers for each item, to address concerns that users were not seeing the items as being able to be dragged on screen.
With these designs and fully functional prototypes, we were able to get 80% buy-in from fellow designers during our team’s UX Review critique session and full support from the project manager, acting on behalf of NCSBN, who recognized it as being exactly what the organization needed for the new NCLEX when our then drag & drop beta question type was not enough. Some designers were still concerned about the accessibility of the question types as touchscreens were not taken into account. Therefore, to address this concern, I added jQuery mobile to the prototypes and our product writer was gracious enough to upload them to the first address below so both other designers and our project manager could test them again on their own mobile devices and desktop. After the prototypes were changed to address the feedback received, both the ordering question type and version 2 of the drag and drop question type were developed and released to our customers for their included accessibility features and positive feedback from user testing. These question types are also documented in ExamSoft’s resources.