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. Whether you prefer mouse navigation or keyboard shortcuts, 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)
• Use keyboard shortcuts for efficiency
• Customize the interface to your preferences

Prerequisites

• A created taskboard (Creating Your First Taskboard)
• Basic understanding of taskboards (Introduction to Taskboards)

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.

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)

Keyboard Shortcuts:

• 1 - Board view
• 2 - List view
• 3 - Gantt view
• 4 - Calendar view
• 5 - Dashboard view

5. Search Bar

• Filter tasks by name, description, or tags
• Live search results
• Keyboard: ⌘F or Ctrl+F to focus

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 (Gear Icon)

Opens board settings modal with tabs:

• Overview (name, description, dates)
• Members (manage access)
• Sections (customize workflow)
• Files (board-level attachments)
• Guests (external collaborators)

Keyboard: ⌘, or Ctrl+, to open settings

---

Left Sidebar

The sidebar provides organizational and filtering tools.

Toggle Sidebar

• Click the hamburger menu (≡) or layer icon
• Keyboard: B to toggle sidebar visibility
• Width is resizable (drag the edge)

Sidebar Sections

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.

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.

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.

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.

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

Master these shortcuts to navigate like a pro:

Navigation Shortcuts

Shortcut	Action
?	Show keyboard shortcuts help
Esc	Close modal or return to board list
B	Toggle left sidebar
F	Focus search/filter
⌘K or Ctrl+K	Command palette (future)

View Switching

Shortcut	Action
1	Switch to Board view
2	Switch to List view
3	Switch to Gantt view
4	Switch to Calendar view
5	Switch to Dashboard view

Task Operations

Shortcut	Action
C or N	Create new task in current section
E	Edit selected task
D or Del	Delete selected task
A	Assign task to user
P	Set priority
Enter	Open task detail
⌘Enter	Quick save and close

Bulk Selection (List View)

Shortcut	Action
⌘Click	Multi-select tasks
Shift+Click	Select range
⌘A	Select all visible
Esc	Deselect all

Board Operations

Shortcut	Action
⌘S or Ctrl+S	Save (usually auto-saves)
⌘, or Ctrl+,	Open board settings
⌘Shift+M	Show members
⌘Shift+L	Show layers

💡 Tip: Press ? anywhere in a taskboard to see the full keyboard shortcuts reference card.

---

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.

---

Sidebar Width

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

Shortcuts:

• All actions have keyboard equivalents
• Customizable shortcuts (future)

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 5 Core Shortcuts

You don't need to memorize all shortcuts. Master these 5:

1. 1 - Back to Board view
2. C - Create task
3. F - Focus search
4. B - Toggle sidebar
5. Esc - Close/back

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 with B 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: Best option: Export to PDF (Board Settings → Export). Print functionality coming soon.

---

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)

---

Sidebar won't open/close

Possible causes:

• JavaScript error
• Browser compatibility issue

Solutions:

• Refresh the page (⌘R or Ctrl+R)
• Try keyboard shortcut B
• 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

Related Articles

• Introduction to Taskboards
• Creating Your First Taskboard
• Keyboard Shortcuts Reference
• Mobile Experience

Quick Reference Card

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

---

Ready to start creating tasks? → Basic Task Management