Navigation Changes

The most visible difference between desktop and mobile is how you navigate Kora.

Desktop Navigation:

• Side navigation bar (SideNav) appears on left side of screen
• Visible at all times (can be collapsed to save space)
• Shows icons and text labels
• Expandable App Launcher at top
• Organised into sections: modules, quick actions, footer (notifications, profile, settings)

Mobile Navigation:

• Bottom navigation bar replaces side navigation
• Fixed at bottom of screen (always accessible)
• Five items: Home, Tasks, App Launcher (centre), Maps, Field Observations
• Icons only (no text labels except on active page)
• App Launcher opens full-screen dropdown menu

Why the Change: Bottom navigation is easier to reach with your thumb when holding a phone, especially one-handed. Side navigation would require stretching across the screen or using two hands.

What Stays the Same:

• Same modules available (based on your user type and permissions)
• Same app structure and organisation
• Same features accessible (just presented differently)
• Same data and animal records

Switching Between Devices: Your navigation preference on desktop (expanded/collapsed sidebar) does not affect mobile. Each device type has its own optimised navigation. It appears automatically.

Hidden Features on Mobile

Some elements hide on mobile screens to prevent clutter and focus on essential content:

Breadcrumbs:

• Desktop: Breadcrumb navigation appears at top of pages showing path (e.g., "Home > Animal Management > Individual Animals > Daisy #A001")
• Mobile: Breadcrumbs hidden. Use back button or bottom navigation instead
• Why: Breadcrumbs consume vertical space on small screens. Navigation path less critical when you are focused on one task at a time

Map Controls:

• Desktop: Full Leaflet map toolbar with drawing tools, measurement tools, layer controls, editing features
• Mobile: Simplified controls. Zoom buttons, locate me, basic layer switcher
• Why: Complex map editing (drawing boundaries, creating subdivisions) requires mouse precision. Mobile focuses on viewing and navigation

Extended Filters:

• Desktop: All filter options visible simultaneously in data tables and lists
• Mobile: Filters appear in expandable menu or bottom sheet
• Why: Filter controls consume horizontal space. Mobile focuses on filtered results rather than filter configuration

Sidebar Panels:

• Desktop: Context panels appear as sidebars (e.g., location hierarchy while viewing map)
• Mobile: Context panels become bottom sheets or separate views
• Why: Side panels do not fit on narrow screens. Bottom sheets slide over content without permanent space consumption

Hover Tooltips:

• Desktop: Additional information appears when hovering over elements
• Mobile: Tap to expand or access detail view
• Why: Mobile devices do not have "hover" concept. Tap reveals information

Multi-Column Comparison Views:

• Desktop: Side-by-side comparisons (two animals, two time periods, data + map)
• Mobile: Stacked vertical layouts, switch between views with tabs or swipe gestures
• Why: Narrow screens do not accommodate side-by-side content. Vertical stacking works better

These features are not removed. They are adapted:

• Breadcrumbs → Back button + bottom navigation
• Map controls → Simplified touch-friendly controls + bottom sheets for details
• Filters → Expandable filter menus
• Sidebars → Bottom sheets or tabbed views
• Tooltips → Tap-to-expand
• Multi-column → Single column with navigation between sections

Mobile-Optimised Workflows

Some workflows change to match mobile interaction patterns:

Desktop Workflow vs. Mobile Workflow:

Example 1: Viewing Animal Records

Desktop:

1. Open Animal Management (side navigation)
2. View animal list in left column
3. Click animal in list
4. Detailed record appears in right column
5. Both list and details visible simultaneously
6. Click different animal to compare

Mobile:

1. Tap "App Launcher" in bottom navigation
2. Tap "Animal Management"
3. View animal cards (vertical scroll)
4. Tap animal card
5. Full-screen detail view opens
6. Back button returns to list
7. Tap different animal to view its details

Adaptation: Desktop shows list + detail simultaneously. Mobile shows one at a time (list OR detail).

Example 2: Creating Observations

Desktop:

1. Navigate to animal record
2. Click "Add Observation" button
3. Modal form opens
4. Fill form fields with keyboard
5. Optional: Add photos (upload from computer)
6. Save

Mobile:

1. Open Field Observations (bottom navigation)
2. Tap FAB (Floating Action Button)
3. GPS auto-captured
4. Optional: Scan QR code to link animal
5. Record details (voice-to-text supported)
6. Tap camera icon to take photo directly
7. Save

Adaptation: Mobile prioritises GPS, QR scanning, and camera. Desktop prioritises detailed text entry and photo uploads.

Example 3: Task Management

Desktop:

1. Open Tasks (side navigation)
2. View task list in left panel
3. Click task to see details in right panel
4. Edit task details
5. Assign to user (dropdown selection)
6. Set recurrence schedule (complex options)
7. Save

Mobile:

1. Tap "Tasks" in bottom navigation
2. View tasks as vertical cards
3. Tap task card to expand
4. Tap "Complete" for simple completion
5. Or tap "Edit" for full-screen edit view
6. Simplified assignment and scheduling
7. Save

Adaptation: Desktop offers complex task configuration. Mobile focuses on task completion and simple edits.

Example 4: Map Interaction

Desktop:

1. Open Maps (side navigation)
2. Full-screen map with toolbar
3. Select drawing tool from toolbar
4. Click points on map to draw boundary
5. Right-click to complete polygon
6. Enter location details in form
7. Save new location

Mobile:

1. Tap "Maps" in bottom navigation
2. View map (pinch to zoom, drag to pan)
3. Tap location marker
4. Bottom sheet shows location details
5. Tap "View Details" for full location record
6. Complex editing not available. Use desktop for boundary drawing

Adaptation: Desktop creates and edits locations. Mobile views locations and navigates.

Touch Targets and Accessibility

Mobile interface elements are designed for finger interaction:

Touch Targets:

• Buttons, links, and controls are larger on mobile (minimum 44x44 pixels)
• Adequate spacing prevents accidental taps on adjacent elements
• Touch feedback confirms when you have tapped successfully

Form Controls:

• Larger input fields
• Bigger checkboxes and radio buttons
• Expanded dropdown menus
• Date pickers optimised for touch selection
• Appropriate mobile keyboards (numeric keypad for numbers, email keyboard for email fields)

Gestures:

• Swipe to dismiss notifications
• Pinch to zoom on maps
• Long-press for context menus (where implemented)
• Pull-down to refresh lists

Visual Feedback:

• Elements highlight when touched
• Loading indicators show progress
• Success/error messages confirm actions
• Disabled buttons clearly distinguishable

Features That Work the Same

Many features function identically on mobile and desktop. Just presented differently:

Same Functionality, Different Presentation:

• Animal records - Same information, card layout vs. tabbed layout
• Observations - Same data fields, optimised input methods
• Tasks - Same task management, simplified interface
• Treatments - Same treatment recording, touch-friendly controls
• Health certificates - Same generation process, adapted forms
• Traceability - Same event logging, mobile-friendly views
• Knowledge Hub - Same disease information, optimised reading experience
• Biosecurity - Same protocols and assessments, touch controls

Data Integrity: Whether you create a record on desktop or mobile, the data is identical. Mobile does not create "mobile-only" records or limited versions. Every record created on mobile is complete and fully accessible on desktop (and vice versa).

User Permissions: Your user type and permission level work the same on mobile and desktop. If you have Advanced permissions on desktop, you have Advanced permissions on mobile. Feature access adapts to screen size, not permission level.

Switching Between Devices Mid-Workflow

You can start work on one device and finish on another:

Scenario 1: Field Observation → Desktop Analysis

1. Morning (Mobile): Walk paddocks, create 15 health observations with GPS and photos
2. Afternoon (Desktop): Review all 15 observations on large screen, identify patterns, create treatment plan
3. Both devices contributed - Mobile captured field data, desktop synthesised it into action plan

Scenario 2: Desktop Planning → Mobile Execution

1. Planning (Desktop): Create detailed task list for week (feeding schedules, health checks, maintenance)
2. Daily (Mobile): Complete tasks in field, check off as done, add notes
3. Both devices contributed - Desktop organised work, mobile executed it

Scenario 3: Mobile Emergency → Desktop Follow-Up

1. Emergency (Mobile): Discover injured animal in field, record observation with photos, flag for immediate veterinary attention
2. Response (Desktop): Veterinarian reviews observation, creates treatment plan, schedules follow-up
3. Both devices contributed - Mobile captured urgent issue immediately, desktop coordinated professional response

No Synchronisation Delay: Changes made on mobile appear instantly on desktop. Changes made on desktop appear instantly on mobile. There is no "sync" button or waiting period. Devices share the same live data.

Use Desktop When:

• Creating complex records requiring extensive typing
• Drawing map boundaries or subdivisions
• Analysing data across multiple animals
• Generating detailed reports
• Configuring system settings
• Planning long-term workflows
• Comparing multiple records side-by-side

Use Mobile When:

• In the field observing animals
• Recording events as they happen
• Scanning QR codes for identification
• Taking photos for documentation
• Capturing GPS-based observations
• Completing assigned tasks
• Quick lookups while away from office

Use Either When:

• Viewing animal records
• Checking task lists
• Reviewing health histories
• Accessing Knowledge Hub
• Reading observation summaries
• Checking biosecurity status