Waymaker
Taskboards

Understanding the Taskboard Interface

The Waymaker taskboard interface is designed to be intuitive and powerful. This guide provides a complete tour of every element, helping you navigate confidently and use the interface efficiently. You'll find everything you need to manage your work effectively.

InterfaceOverview
Last updated: October 6, 2025•10 minutes read

Understanding the Taskboard Interface

Difficulty: Beginner

Overview

The Waymaker taskboard interface is designed to be intuitive and powerful. This guide provides a complete tour of every element, helping you navigate confidently and use the interface efficiently. You'll find everything you need to manage your work effectively.

What You'll Learn

  • Navigate the taskboard interface components
  • Understand each UI element's purpose
  • Switch between different views (Kanban, List, Gantt, Calendar)
  • Customize the interface to your preferences

Prerequisites

The Complete Interface Tour

The taskboard interface has four main regions, each with specific functionality:

┌─────────────────────────────────────────────────────────┐
│           TOP NAVIGATION BAR                            │
├──────────┬──────────────────────────────┬───────────────┤
│   LEFT   │                              │     RIGHT     │
│  SIDEBAR │      MAIN WORKSPACE         │  PANEL (opt)  │
│          │                              │               │
│  Layers  │    Kanban Board View         │   Activity    │
│  Filters │    or List/Gantt/Calendar    │   (future)    │
│          │                              │               │
└──────────┴──────────────────────────────┴───────────────┘

Top Navigation Bar

The top bar provides board-level controls and information.

Screenshot: Top navigation bar with elements labeled

Components (Left to Right)

1. Back Button

  • Returns to taskboards list
  • Keyboard: Esc (when no modal is open)

2. Board Name

  • Displays current board title
  • Click to edit (if you have permissions)
  • Shows board icon (future: custom icons)

3. Board Description (Collapsed)

  • Hover or click to expand
  • Shows full board context
  • Edit in board settings

4. View Switcher

Toggle between different visualizations:

Available Views:

  • 📊 Board - Kanban view with sections as columns (default)
  • 📋 List - Hierarchical task list with sorting/filtering
  • 📅 Gantt - Timeline view with dependencies
  • 📆 Calendar - Tasks displayed by due date
  • 📈 Dashboard - Analytics and metrics (future)

Switch views with the view buttons in the board's top bar.

  • Filter tasks by name, description, or tags
  • Live search results
  • Click the Search tasks... box in the top bar to search

6. Member Avatars

  • Shows who has access to the board
  • Click to see full member list
  • Shows online status (green dot)
  • Click "+ avatar" to invite more members

7. Share Button

  • Invite team members
  • Invite external guests
  • Copy shareable link (future)
  • Manage permissions

8. Board Settings (⋮)

Click the Settings button (the vertical three dots) to open board settings, with tabs:

  • Overview (name, description, dates)
  • Members (manage access)
  • Files (board-level attachments)
  • Guests (external collaborators)
  • Connect (link a GitHub repository; see Connect a GitHub Repository)

The sidebar provides organizational and filtering tools.

Screenshot: Left sidebar expanded with options

Toggle Sidebar

  • Click the hamburger menu (≡) or layer icon
  • Keyboard: ⌘\ (Ctrl+\) shows or hides the sidebar
  • Width is resizable (drag the edge)

1. Layer Manager

Purpose: Organize tasks into hierarchical groups (epics, sprints, phases)

Components:

  • "+ Add Layer" button - Create new top-level layer
  • Layer tree - Hierarchical view of all layers
  • Layer counts - Number of tasks in each layer
  • Expand/collapse - Click arrow to show/hide sub-layers
  • Layer filters - Show tasks for selected layers only

Hover Actions on Layers:

  • Edit layer details
  • Add sub-layer
  • Delete layer

Learn more: Introduction to Layers

2. Filters

Quick Filters:

  • My Tasks - Tasks assigned to you
  • Unassigned - Tasks with no assignee
  • Due This Week - Upcoming deadlines
  • Overdue - Past due date
  • No Layer - Tasks not in any layer

Advanced Filters:

  • By Assignee - Dropdown of all members
  • By Priority - High, Medium, Low
  • By Status - Filter by section
  • By Tags - Multi-select tags
  • By Date Range - Custom date filters

Clear Filters:

  • Click "Clear all filters" link at top of filter section

💡 Tip: Filters persist across view changes. Set them once, then switch between Board/List/Gantt with the same filter applied.

3. Board Navigation

Quick Links:

  • Board Settings
  • Activity Log (future)
  • Archived Tasks (future)
  • Export Board (future)

Keyboard: G + S for settings, G + A for activity

Main Workspace Area

The center area displays your selected view. Let's explore each:

Board View (Kanban)

The default and most popular view.

Screenshot: Kanban board with sections and tasks

Section Columns

Structure:

  • Each section = one vertical column
  • Sections ordered left to right by position
  • Section name at top with task count
  • Section color indicator (top border)

Section Header:

  • Section name - Click to rename (admin only)
  • Task count - Total tasks in section
  • + Add task button - Quick add new task
  • Section menu (⋮) - More options (collapse, settings)

Within Each Section:

  • Tasks displayed as cards (top to bottom)
  • Drag cards to reorder within section
  • Drag cards between sections to change status
  • Scroll if more tasks than fit on screen
  • Empty state message if no tasks

Task Cards

Each card shows key task information at a glance:

Card Layout:

┌─────────────────────────────────┐
│ [Priority] Task Name            │ ← Top: Name with priority indicator
│ #Layer Name (if any)            │ ← Layer tag (optional)
│ 📅 Due: Oct 15 | 👤 Avatar      │ ← Due date and assignee
│ ▓▓▓▓░░░░░░ 40% complete        │ ← Progress bar
│ 🏷️ Tag1, Tag2                   │ ← Tags (if any)
└─────────────────────────────────┘

Visual Indicators:

  • Red border - Overdue tasks
  • Orange border - Due within 24 hours
  • Priority badge - High (🔴), Medium (🟡), Low (🟢)
  • Checklist progress - ✓ 3/5 items complete
  • Comment count - 💬 5 comments
  • Attachment indicator - 📎 Has files

Card Interactions:

  • Click - Open task detail modal
  • Drag - Move between sections or reorder
  • Hover - Show quick action menu
  • Right-click - Context menu (future)

Quick Actions (Hover):

  • ✏️ Edit task
  • 👤 Change assignee
  • 🗑️ Delete task
  • ⋮ More options

List View

Hierarchical table view with advanced sorting and filtering.

Screenshot: List view with sortable columns

Column Headers

Standard Columns:

  1. Checkbox - Multi-select tasks
  2. Name - Task title (hierarchical with indentation)
  3. Status - Current section
  4. Assignee - Avatar and name
  5. Priority - Icon indicator
  6. Due Date - Formatted date
  7. Progress - Percentage bar
  8. Tags - Chip display

Click header to sort:

  • First click: Ascending (A→Z, ↑)
  • Second click: Descending (Z→A, ↓)
  • Third click: Clear sort

Column Options (⋮ menu):

  • Hide/show columns
  • Freeze columns (future)
  • Reorder columns (drag header)
  • Auto-size column width

List Features

Grouping:

  • Group by Layer (hierarchical)
  • Group by Status
  • Group by Assignee
  • Group by Priority
  • No grouping (flat list)

Inline Editing:

  • Click any cell to edit in place
  • Tab to next field
  • Enter to save
  • Esc to cancel

Bulk Operations:

  • Select multiple with checkboxes
  • Bulk edit status, assignee, tags, priority
  • Bulk delete (with confirmation)

Expand/Collapse:

  • Click arrow to expand layer or subtasks
  • Shift+Click to expand all nested items
  • Keyboard: → to expand, ← to collapse

💡 Tip: List view is perfect for planning sessions where you need to see all tasks at once with full details.

Gantt View

Timeline visualization showing task schedules and dependencies.

Screenshot: Gantt chart with timeline

Timeline Components

Left Panel: Task List

  • Same hierarchical list as List view
  • Shows task name, assignee, dates
  • Grouped by layers (optional)

Right Panel: Timeline

  • Horizontal bars representing task duration
  • Start date → Due date span
  • Color-coded by layer or status
  • Dependency arrows between related tasks

Timeline Scale:

  • Zoom controls: Day / Week / Month view
  • Today marker: Vertical line showing current date
  • Scroll: Pan left/right through time
  • Fit to screen: Button to auto-zoom to active tasks

Dependency Visualization

Arrows show relationships:

  • Finish-to-Start (FS): → Most common (Task B starts when Task A ends)
  • Start-to-Start (SS): ⇉ Both tasks start together
  • Finish-to-Finish (FF): ⇄ Both tasks finish together
  • Start-to-Finish (SF): ⇇ Rare (Task B finishes when Task A starts)

Critical Path:

  • Highlighted in red (future feature)
  • Shows tasks that directly impact project completion
  • Any delay in critical path delays entire project

Hover on bars:

  • Task name and dates
  • Progress percentage
  • Dependencies (click to highlight related tasks)

Drag bars (future):

  • Adjust start/due dates visually
  • Auto-update dependent tasks

💡 Tip: Gantt view is essential for waterfall projects and understanding project timelines.

Calendar View

Tasks displayed on a calendar by due date.

Screenshot: Calendar month view with tasks

Calendar Controls

View Options:

  • Month - Full month grid
  • Week - 7-day detailed view
  • Day - Single day with hourly slots

Navigation:

  • < > arrows - Previous/next period
  • Today button - Jump to current date
  • Date picker - Select specific date

Task Display on Calendar

Month View:

  • Tasks shown as chips on due date
  • Color-coded by layer or priority
  • Click date to see all tasks for that day
  • Dot indicators if more tasks than fit

Week View:

  • Tasks with time slots (if due_time set)
  • All-day tasks at top
  • Hour-by-hour timeline for timed tasks

Day View:

  • Hourly timeline (8am - 6pm by default)
  • Tasks scheduled at specific times
  • Empty slots for scheduling new tasks

Interactions:

  • Click task - Open task detail
  • Drag task - Reschedule to different day (future)
  • Click empty date - Create task with that due date

Filters Work Here Too:

  • Filter by layer to see specific project timeline
  • Filter by assignee to see individual workload
  • Combined with calendar for powerful planning

💡 Tip: Calendar view helps identify overloaded days and gaps in the schedule.

Right Panel (Future Feature)

The right panel will provide contextual information and AI insights:

Planned Features:

  • Activity Feed - Recent changes to board
  • AI Insights - Bottleneck detection, predictions
  • Task Suggestions - Recommended next tasks
  • Progress Summary - Quick metrics

Current Status: Reserved for future use. Hide/show toggle in top-right.

Keyboard Shortcuts

Taskboards don't have their own single-key shortcuts. Commander's global shortcuts work on a taskboard too:

ShortcutAction
⌘K or Ctrl+KOpen quick search (the command palette)
⌘\ or Ctrl+\Show or hide the sidebar
Enter / EscapeSave or cancel when adding a task or section inline, renaming a section, or editing a field on a task card

See Keyboard Shortcuts for the full list.

Customizing the Interface

Adjust View Density

Compact View:

  • Smaller task cards
  • Less whitespace
  • More tasks visible on screen
  • Better for large boards

Comfortable View:

  • Larger task cards
  • More whitespace
  • Easier to read
  • Better for detailed work

Toggle: Board Settings → Display → Density

Default View Preference

Set which view loads by default when opening a board:

  1. Open board settings (⚘)
  2. Go to "Preferences" tab
  3. Select default view (Board/List/Gantt/Calendar)
  4. Choose default grouping (for List view)
  5. Save preferences

Per-user setting: Each team member can have their own default view.

Resize the left sidebar by dragging its right edge:

  • Narrow - Just icons and layer names
  • Medium - Default comfortable width
  • Wide - Show full layer descriptions

Width preference saves automatically.

Theme (Light/Dark)

Commander supports theme switching:

  1. Click theme toggle in top-right of Commander
  2. Choose Light, Dark, or System
  3. Taskboards respect your theme choice

Accessibility: High contrast mode available in account settings.

Mobile & Responsive Behavior

The taskboard interface adapts to different screen sizes:

Desktop (1440px+)

  • Full three-column layout
  • All features accessible
  • Optimal drag-and-drop

Tablet (768px - 1440px)

  • Collapsible sidebar (auto-hides)
  • Simplified top bar
  • Touch-friendly task cards

Mobile (< 768px)

  • Single column view
  • Hamburger menu navigation
  • Swipe to move tasks between sections
  • Simplified task cards

💡 Tip: For serious taskboard work, use a desktop or laptop. Mobile is great for quick updates and checking status.

Accessibility Features

Waymaker taskboards are designed for accessibility:

Keyboard Navigation:

  • Full keyboard support (no mouse required)
  • Logical tab order
  • Focus indicators on all interactive elements

Screen Readers:

  • ARIA labels on all buttons and controls
  • Announced status changes
  • Descriptive link text

Visual:

  • High contrast mode
  • Resizable text (browser zoom)
  • Color is never the only indicator

Learn more: Accessibility Guide (coming soon)

Tips for Efficient Navigation

Use Filters Instead of Searching

Scenario: You want to see only high-priority tasks.

❌ Don't: Scan through all sections looking for red badges ✅ Do: Apply Priority filter → Select "High" → View focused list

Learn the Two Global Shortcuts

  1. ⌘K (Ctrl+K) - Quick search
  2. ⌘\ (Ctrl+\) - Show or hide the sidebar

These cover 80% of navigation needs.

Keep Sidebar Collapsed When Working

  • Sidebar open: Better for planning, creating layers, filtering
  • Sidebar closed: More screen space for task cards, less distraction

Toggle it with ⌘\ (Ctrl+\) based on your current activity.

Use the Right View for the Task

  • Daily work: Board view (Kanban)
  • Planning sessions: List view (see everything)
  • Timeline review: Gantt view (dependencies)
  • Scheduling: Calendar view (capacity planning)
  • Reports: Dashboard view (metrics)

Don't force one view for everything - switch based on what you need to accomplish.

Common Questions

Q: Can I customize the section colors?

A: Yes! Board Settings → Sections → Edit section → Choose color. Each section can have its own color for visual distinction.

Q: How do I hide completed tasks?

A: Apply the section filter and deselect the "Done" section. Or use the "Hide completed" toggle (future feature).

Q: Can I save custom filter presets?

A: Not yet, but coming soon! For now, you'll need to reapply filters each session.

Q: Is there a keyboard shortcut to move tasks between sections?

A: Not currently. Use drag-and-drop or open task detail and change status dropdown.

Q: Can I print my taskboard?

A: There's no print or PDF option yet. You can export the board's tasks to CSV with Export Tasks in the board's top bar. See Import & Export Tasks.

Troubleshooting

Interface feels slow or laggy

Possible causes:

  • Very large board (500+ tasks)
  • Many browser extensions
  • Slow network connection

Solutions:

  • Archive completed tasks to reduce board size
  • Disable unnecessary browser extensions
  • Check network connection
  • Use filters to show fewer tasks at once
  • Try List view (often faster than Kanban for large boards)

Possible causes:

  • JavaScript error
  • Browser compatibility issue

Solutions:

  • Refresh the page (⌘R or Ctrl+R)
  • Try the sidebar shortcut ⌘\ (Ctrl+\)
  • Clear browser cache
  • Update browser to latest version

Task cards look weird or cut off

Possible causes:

  • Browser zoom level
  • Custom CSS (if you have extensions)

Solutions:

  • Reset browser zoom to 100%
  • Disable custom CSS extensions
  • Try incognito mode to test

Next Steps

Now that you understand the interface, you're ready to:

  1. Basic Task Management - Create and manage tasks
  2. Inviting Team Members - Collaborate with your team
  3. Introduction to Layers - Organize tasks hierarchically
  4. Customizing Workflow Sections - Tailor your workflow

Quick Reference Card

Download and print: Taskboard Interface Cheat Sheet (PDF) (coming soon)

Ready to start creating tasks? → Basic Task Management