CSC/ECE 517 Fall 2024 - E2490.1 Improving Assignment Participants Management UI in Expertiza

From Expertiza_Wiki
Jump to navigation Jump to search

Introduction

The Assignment Participants Management UI in Expertiza is a tool for instructors and administrators to manage assignment participants. However, the current interface is cluttered with dense information, limited filtering options, and ambiguous/unnecessary labels, making it challenging to locate, filter, or modify participant data effectively. This redesign focuses on improving usability, clarity, and responsiveness.

Project Goals

This project aims to redesign and improve the Assignment Participants Management UI by creating a cleaner, more streamlined, and user-friendly interface. The key objectives include:

  • Enhancing readability and usability by restructuring the layout and adding more intuitive spacing.
  • Improving visual hierarchy with icons, badges, and role-based indicators to make information more accessible at a glance.
  • Ensuring responsiveness so that the interface adapts well across different screen sizes and devices.

Problem Statement

Issues with Current UI

  • Cluttered Layout: The current UI is dense, with little spacing between elements, making it hard to read and locate information.
  • Limited Filtering Options: Filtering capabilities are minimal, making it challenging to find participants based on specific criteria.
  • Inefficient User Actions: Actions like removing or updating participants must be done individually, resulting in repetitive tasks for instructors.
  • Confusing Labels: Certain labels (like "Handle") are unclear, leading to usability issues, creating confusion around functionality.
  • Lack of Responsive Design: The current design does not adapt well to different screen sizes, reducing usability on smaller devices.

This project will address these issues with a comprehensive redesign focused on improving the user experience for instructors and administrators managing assignments in Expertiza.

Proposed Solution

Streamlined Layout and Spacing

  • Column Organization: Consolidate redundant columns (e.g., "Submit" and "Submission") and remove unnecessary ones (e.g., "Handle" and "Metareview").
  • Improved Spacing: Add padding and spacing between rows and columns to improve readability.
  • Properly handling edge cases: Error states are now properly displayed to the user under the conditions when they attempt to add a participant to the assignment with the same name as a pre-existing participant, or attempt to add a participant without a name.
  • Addition of Visual Cues: Add visual cues throughout the implementation such as various icons (for distinguishing between participants' roles, as well as performing actions), allowing users to focus on essential information and streamline overall look and feel.

Sequence Diagram for Layout Change

In the current implementation we use dummy data, but the frontend would eventually be wired up to a backend for real-world usage.


Note: The current implementation has all changes made to the participants list implemented via client side state. This means that after performing various additions of new participants as well as edits and deletions of participants, whenever the browser is refreshed, this state is wiped out, and we are back at the initial load of our dummy data.

UI Enhancements

UI with improvements to visual clarity, layout, and responsiveness

Visual Hierarchy and Icons

  • Icons for Actions: Standard icons for tasks like edit, delete, and add, using those from the previous implementation to maintain consistency.
  • Role-Based Badges: Color-coded badges (e.g., blue for "Student," green for "Instructor") with associated icons.
  • Status Indicators: Display indicators for participants properties, like a checkmark for "Review" or "Submit" or a cross instead.

Responsive Design

Adaptive Column Visibility: Implement a responsive design where columns adapt to screen size, incorporating side-scroll functionality, condensing the columns, and reducing the text size for smaller screens.

Tooltips and Help Icons

  • Tooltips: Add tooltips and icons for different kinds of participants when adding a new one (e.g., hovering over "reader") to provide brief explanations.

Implementation

Prior Implementation

The UI for participant management before the redesign is shown below for reference.


Participants List Component

Usage at the Call Site

<AssignmentParticipants assignmentProps={{ hasQuiz: false, hasMentor: false }} />

The main AssignmentParticipants component displays the page overall as well as contains props for the various properties an assignment might have which would affect the participants table, namely, having an associated quiz or a mentor. In the current implementation, this is done via the use of props, however future versions should have this properly linked to the implementation for the Assignment itself and passed through.

Snippet of the Implementation

    <div className="assignment-participants-container">
      <h1 className="assignment-participants-header">Assignment Participants: Program 1</h1>

      {/* Add User Section */}
      <label className="section-label">Add New Participant</label>
      {error && <div className="error-message">{error}</div>}
      <div className="add-user-section">
        <div className="add-user-input">
          <input
            type="text"
            placeholder="Enter a new username"
            className="username-input"
            value={newUserName}
            onChange={(e) => setNewUserName(e.target.value)}
          />
          <button className="add-user-button" onClick={handleAddUser}>Add User</button>
        </div>

        {/* Radio Group for Role Selection */}
        <div className="role-radio-group">
          {Object.values(ParticipantRole).map((role) => (
            <label key={role} className="role-radio-option">
              <input
                type="radio"
                value={role}
                checked={selectedRole === role}
                onChange={() => setSelectedRole(role as ParticipantRole)}
              />
              {role}
              <span className="info-icon" title={participantRoleInfo(role)}>i</span>
            </label>
          ))}
        </div>
      </div>

      {/* Participant Table */}
      <ParticipantTable
        participants={filteredParticipants}
        onSort={handleSort}
        assignmentProps={assignmentProps}
        openEditModal={openEditModal}
        openRemoveModal={openRemoveModal}
        numColumns={numColumns(assignmentProps)}
        sortConfig={sortConfig}
      />

      {/* Modals */}
      {selectedParticipant && (
        <EditParticipantModal
          show={modalShow.edit}
          participant={selectedParticipant}
          onHide={() => setModalShow({ ...modalShow, edit: false })}
          onSave={handleSave}
        />
      )}
      <ConfirmRemoveModal
        show={modalShow.remove}
        onHide={() => setModalShow({ ...modalShow, remove: false })}
        onConfirm={handleRemove}
      />
    </div>

Redesigned UI

Below is a screenshot displaying the component above which is the crux of the redesigned page for managing the participants associated with an assignment.


EditParticipantModal Component

Snippet of the Implementation

function EditParticipantModal({ participant, show, onHide, onSave }: EditParticipantModalProps) {
  const [updatedParticipant, setUpdatedParticipant] = useState<Participant>(participant);

  const handleChange = (field: keyof Participant, value: any) => {
    setUpdatedParticipant({ ...updatedParticipant, [field]: value });
  };

  const handlePermissionsToggle = (field: keyof ParticipantPermissions) => {
    setUpdatedParticipant({
      ...updatedParticipant,
      permissions: {
        ...updatedParticipant.permissions,
        [field]: updatedParticipant.permissions[field] === 'yes' ? 'no' : 'yes',
      },
    });
  };

  return (
    <Modal show={show} onHide={onHide} centered>
      <Modal.Header closeButton>
        <Modal.Title>Edit Participant</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form>
          <Form.Group controlId="formName" className="mb-3">
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="text"
              value={updatedParticipant.name}
              onChange={(e) => handleChange('name', e.target.value)}
            />
          </Form.Group>
          <Form.Group controlId="formEmail" className="mb-3">
            <Form.Label>Email</Form.Label>
            <Form.Control
              type="email"
              value={updatedParticipant.email}
              onChange={(e) => handleChange('email', e.target.value)}
            />
          </Form.Group>
          <Form.Group controlId="formRole" className="mb-3">
            <Form.Label>Role</Form.Label>
            <Form.Control
              as="select"
              value={updatedParticipant.role}
              onChange={(e) => handleChange('role', e.target.value)}
            >
              {Object.values(Role).map((role) => (
                <option key={role} value={role}>
                  {role}
                </option>
              ))}
            </Form.Control>
          </Form.Group>
          <Form.Group controlId="formParticipantRole" className="mb-3">
            <Form.Label>Participant Role</Form.Label>
            <Form.Control
              as="select"
              value={updatedParticipant.participantRole}
              onChange={(e) => handleChange('participantRole', e.target.value)}
            >
              {Object.values(ParticipantRole).map((role) => (
                <option key={role} value={role}>
                  {role}
                </option>
              ))}
            </Form.Control>
          </Form.Group>

          <div className="permissions-container">
            {Object.keys(permissionLabels).map((key) => (
              <Form.Check
                key={key}
                type="switch"
                id={`${key}-switch`}
                label={permissionLabels[key as keyof ParticipantPermissions]}
                checked={updatedParticipant.permissions[key as keyof ParticipantPermissions] === 'yes'}
                onChange={() => handlePermissionsToggle(key as keyof ParticipantPermissions)}
                className="permission-switch"
              />
            ))}
          </div>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onHide}>
          Cancel
        </Button>
        <Button variant="primary" onClick={() => onSave(updatedParticipant)}>
          Save Changes
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

Redesigned UI

Below is a screenshot displaying the EditParticipantModal component above which is used for managing the properties of a user in the assignment's participants list.


ConfirmRemoveModal Component

In a similar fashion to the modal for editing a participant, the UI also contains a modal associated with a confirmation for removing a participant from the assignment. This confirmation modal is presented to the user to prevent them from making an accidental deletion in the case when they didn't mean to press the removal button, and confirms they want to indeed perform the removal of the participant.

Snippet of the Implementation

function ConfirmRemoveModal({ show, onHide, onConfirm }: ConfirmRemoveModalProps) {
  return (
    <Modal show={show} onHide={onHide} centered>
      <Modal.Header closeButton>
        <Modal.Title>Confirm Removal</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        Are you sure you want to remove this participant?
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onHide}>
          Cancel
        </Button>
        <Button variant="danger" onClick={onConfirm}>
          Confirm
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

Redesigned UI

Below is a screenshot displaying the ConfirmRemoveModal component above which is used for ensuring deletion of participants only occurs when the operation is intended.


Responsive design

Finally, the overall UI was designed to be responsive for various screen sizes (i.e. maintains quality and visual consistency across mobile, tablet, and desktop screen sizes). This was done primarily through the usage of media queries as well as various modern CSS features.

Snippet of the Implementation

@media (max-width: 768px) {

    .add-user-section,
    .user-permissions {
        width: 100%;
        flex-direction: column;
    }

    .role-radio-group {
        margin-top: 1rem;
    }

    .user-input {
        margin-bottom: 0;
        width: 100%;
    }

    .assignment-participants-header {
        font-size: 1.25rem;
    }

    .add-user-button {
        width: 100%;
    }

    .assignment-participants-table th::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

Mobile Layout

Below is a screenshot displaying the UI when viewed from a mobile screen size. The use of side-scrolling functionality is used to make the table functional while still taking up the majority of the screen real estate available for mobile screens.


Design Patterns

The following design patterns we're used throughout the process of the UI redesign:

  • Single Responsibility Principle (SRP): Each UI component will be designed to handle a specific function, like adding a user, or editing their properties, to keep the interface modular.
  • Interface Segregation Principle (ISP): Each feature (e.g., modals for user actions, participants table) will be separated into separate, focused components, ensuring organized functionality and clear dependencies.
  • DRY Principle: Common features like icons, and styling will be centralized in reusable components to avoid redundancy in the UI code.

Test Plan

Manual UI Testing

The following step-by-step test cases were performed for manually verifying each UI component:

  • Adding a User: Enter username and click add user, showing the new user in the updated participants list.
  • Editing a User: Click the edit icon for the user in the participant list and edit the various properties associated with the user, then click confirm to save the changes and see them reflected in the participants list.
  • Deleting a User: Click the delete icon for the user in the participant list, then click confirm to delete the user and see them no longer in the participants list.
  • Responsiveness: Verify UI properly adapts across desktop, tablet, and mobile devices.

Future Enhancements

  • Detailed Statistics: Provide analytics on participation, submission rates, etc., to give instructors a quick overview of assignment engagement.

Conclusion

The redesign of the Assignment Participants Management UI significantly improves the usability, accessibility, and adaptability of the tool for instructors and administrators. Key improvements include a cleaner and more structured layout, enhanced filtering capabilities, and a responsive design that ensures seamless use across various devices. By introducing intuitive features like role-based badges, actionable icons, and tooltips, the interface provides a modern and user-friendly experience. These changes streamline participant management tasks, reducing repetitive work and improving overall efficiency for managing large classes. This redesign lays a solid foundation for future enhancements, such as detailed analytics and advanced filtering capabilities.

Team

Mentor
  • Chaitanya Srusti <crsrusti@ncsu.edu>
Members
  • Josh Kersey <jkersey@ncsu.edu>


Video Demo

The video demo highlights the redesigned UI in action, showcasing key features such as adding, editing, and deleting participants, the enhanced responsiveness on mobile and desktop, and improved usability with tooltips and badges and more.

Link to Demo: https://drive.google.com/file/d/1qiav8ZJoPRiT9r5b7sq-hF0glbLAYtHp/view?usp=sharing

PR Link

Link to PR: https://github.com/expertiza/reimplementation-front-end/pull/79

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza&oldid=160477"