ux-workflow-patterns

UX Workflow Patterns

🎯 USER EXPERIENCE PATTERNS (From Sprint 10 UX Lessons)

Based on critical UX discoveries, user feedback, and workflow improvements implemented during Sprint 10.

🚨 CRITICAL UX FLAW DISCOVERED & FIXED

The "Add Images" Workflow Disaster

// ❌ CRITICAL UX FLAW: Browser security violation
function AddImagesModal() {
  const [directoryPath, setDirectoryPath] = useState('')
  
  return (
    <Modal>
      <ModalBody>
        <Text>Enter the directory path containing your images:</Text>
        <Input 
          placeholder="C:\Users\username\Pictures\..." 
          value={directoryPath}
          onChange={(e) => setDirectoryPath(e.target.value)}
        />
        <Button onClick={() => processDirectory(directoryPath)}>
          Process Directory
        </Button>
      </ModalBody>
    </Modal>
  )
}

Why this was a disaster:

• Security Violation: Browsers cannot access local file system paths
• 100% Failure Rate: This workflow would fail for every user
• Confusing UX: Users don't understand why it doesn't work
• Backend Mismatch: Backend expects server paths, not client paths

✅ SOLUTION: Proper File Upload Workflow

// ✅ CORRECT: Browser-compatible file upload
function AddImagesModal() {
  const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  
  const handleFolderSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      setSelectedFiles(event.target.files)
    }
  }
  
  const handleUpload = async () => {
    if (!selectedFiles) return
    
    const formData = new FormData()
    Array.from(selectedFiles).forEach(file => {
      formData.append('files', file)
    })
    
    const response = await api.post('/api/v1/ingest/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    
    // Navigate to job tracking
    router.push(`/logs/${response.data.job_id}`)
  }
  
  return (
    <Modal>
      <ModalBody>
        <VStack spacing={4}>
          <Text>Select a folder containing your images:</Text>
          
          <Box
            p={6}
            border="2px dashed"
            borderColor="gray.300"
            borderRadius="md"
            cursor="pointer"
            onClick={() => fileInputRef.current?.click()}
            _hover={{ bg: 'gray.50' }}
          >
            <VStack>
              <Icon as={FiUploadCloud} boxSize={12} color="gray.500" />
              <Text fontWeight="medium">Click to select a folder</Text>
              <Text fontSize="sm" color="gray.500">
                Files will be uploaded to the server for processing
              </Text>
            </VStack>
          </Box>
          
          <Input
            type="file"
            ref={fileInputRef}
            onChange={handleFolderSelect}
            style={{ display: 'none' }}
            {...{ webkitdirectory: 'true', mozdirectory: 'true' }}
          />
          
          {selectedFiles && (
            <Alert status="success">
              <AlertIcon />
              <Text>{selectedFiles.length} files selected</Text>
            </Alert>
          )}
        </VStack>
      </ModalBody>
      
      <ModalFooter>
        <Button 
          colorScheme="blue" 
          onClick={handleUpload}
          isDisabled={!selectedFiles}
        >
          Upload and Process
        </Button>
      </ModalFooter>
    </Modal>
  )
}