CSC/ECE517 Fall 2024-E2490 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 used by instructors and administrators to manage participants in assignments. Currently, this interface is cluttered, with dense information and limited filtering options, making it challenging to quickly locate, filter, or modify participant data. The current UI has issues with readability, confusing labels, and lacks efficient bulk action capabilities, which leads to repetitive tasks and hampers productivity.

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.
  • Extending functionality with advanced search and filtering options to allow multi-parameter searches, enabling instructors to locate specific participants more efficiently.
  • Introducing bulk actions to minimize repetitive tasks and improve productivity.
  • 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: Group related columns (e.g., "Review," "Submission") under common headers to reduce visual clutter.
  • Improved Spacing: Add padding and spacing between rows and columns to improve readability.
  • Collapsible Sections: Add collapsible sections for rarely-used columns, allowing users to focus on essential information.

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


UI Enhancements

UI with improvements to visual clarity, layout, and responsiveness

Visual Hierarchy and Icons

  • Icons for Actions: Use icons for common actions, such as a trash icon for "Remove."
  • Role-Based Badges: Show roles with color-coded badges (e.g., "Student" in blue, "Instructor" in green).
  • Status Indicators: Display indicators for completed actions, like a checkmark for "Review" or "Submission" status.

Responsive Design

Adaptive Column Visibility: Implement a responsive design where columns adapt based on screen size, hiding less essential columns on smaller screens.

Tooltips and Help Icons

  • Tooltips: Add tooltips next to complex or ambiguous fields (e.g., "Metareview and Handle") to provide brief explanations.
  • Help Icons: Include help icons for columns with complex functionality.

Implementation Plan

Frontend Modifications

  • List specific files to modify (e.g., ParticipantsTable.tsx, AssignmentParticipants.tsx) with high-level explanations of changes in each.
  • Detail CSS changes for improved spacing and responsiveness, including media queries for adaptive design.

Design Patterns

  • Single Responsibility Principle (SRP): Each UI component will be designed to handle a specific function, like filtering or bulk actions, to keep the interface modular.
  • Interface Segregation Principle (ISP): Each feature (e.g., filtering, user actions) will be separated into focused modules, ensuring organized functionality and clear dependencies.
  • DRY Principle: Common features like filters, icons, and spacing will be centralized in reusable components to avoid redundancy in the UI code.

Test Plan

Manual UI Testing

Outline step-by-step test cases for manually verifying each UI component:

  • User Search: Enter various criteria to check search functionality.
  • Role Filter: Select different roles and verify displayed results.
  • Bulk Actions: Select multiple users and apply actions to confirm functionality

Future Enhancements

  • Advanced Search Criteria: Introduce multi-parameter search for more complex filtering.
  • User-Specific Settings: Allow users to save preferred column visibility settings.
  • Detailed Statistics: Provide analytics on participation, submission rates, etc., to give instructors a quick overview of assignment engagement.

Conclusion

  • Summarize the improvements, emphasizing the cleaner design, enhanced filtering capabilities, and improved user experience.
  • Highlight the importance of responsive design and ease of use for instructors and administrators managing large classes.

Team

Mentor
  • Chaitanya Srusti <crsrusti@ncsu.edu>
Members
  • Josh Kersey <jkersey@ncsu.edu>
  • Kruthi Rajeshwar <krajesh@ncsu.edu>
  • Sphurthy Satish <sphurthy@ncsu.edu>
Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE517_Fall_2024-E2490_Improving_Assignment_Participants_Management_UI_in_Expertiza&oldid=159658"