VisualBoardUX - IEEE-Team-3/map GitHub Wiki

Overview

The visual UX of the Kanban board should be user-friendly, visually distinct, and intuitive. The board will be a drag-and-drop interface, where users can quickly move tasks between columns and interact with them.

Key Features

  • Drag-and-Drop: Users can drag tasks from one column to another.
  • Responsive Layout: The board will be fully responsive, adapting to different screen sizes.
  • Color-Coding: Tasks will be color-coded based on priority, completion status, or other factors.
  • Task Details: Hovering over a task will show brief details like title, assignee, and due date.

UX Design Principles

  1. Simplicity: The board should have a clean design with minimal distractions.
  2. Feedback: Users should receive visual feedback when interacting with tasks (e.g., task moves, completion).
  3. Intuitiveness: The layout should be easy to understand, even for new users.

Example UI Mockup

+-------------------------------------------+
| To Do      | In Progress  | Review     | Done   |
+-------------------------------------------+
| Task 1     | Task 4       | Task 5     | Task 6 |
| Task 2     | Task 7       | Task 8     | Task 9 |
+-------------------------------------------+

Example Backend Logic for UX

function updateTaskStatus(taskId, newStatus) {
  const task = Task.findById(taskId);
  task.status = newStatus;
  task.save();
}

Example Frontend Code

// Frontend logic to move task in the UI
function onDragEnd(result) {
  const { destination, source } = result;
  if (destination.droppableId !== source.droppableId) {
    updateTaskStatus(result.draggableId, destination.droppableId);
  }
}
⚠️ **GitHub.com Fallback** ⚠️