Quy tắc hiển thị (cái gì trước, cái gì sau)

Tổng quan

Quy tắc hiển thị xác định cách thức trình bày kết quả tìm kiếm và câu trả lời AI cho người dùng, đảm bảo trải nghiệm trực quan và hiệu quả.

🎯 Mục đích

• User experience: Trình bày thông tin rõ ràng, dễ hiểu
• Information hierarchy: Ưu tiên thông tin quan trọng
• Context preservation: Giữ nguyên ngữ cảnh pháp luật
• Accessibility: Dễ tiếp cận cho tất cả người dùng

📋 Nguyên tắc hiển thị

Thứ tự ưu tiên kết quả

1. Độ liên quan (Relevance)

• Semantic similarity: Kết quả giống ý nghĩa nhất trước
• Keyword matching: Điểm số BM25 cao
• Recency: Văn bản mới cập nhật ưu tiên
• Authority: Nguồn chính thức (Trung ương > Tỉnh)

2. Loại văn bản

• Luật: Luôn hiển thị đầu tiên
• Nghị định: Ưu tiên cao
• Thông tư: Theo thứ tự thời gian
• Quyết định: Theo phạm vi ảnh hưởng

3. Cấu trúc hiển thị

• Title: Tiêu đề rõ ràng, đầy đủ
• Summary: Tóm tắt nội dung chính
• Metadata: Ngày ban hành, cơ quan ban hành
• Relevance score: Mức độ liên quan (ẩn)

Giao diện người dùng

Frontend Components

• Search interface: Ô tìm kiếm với autocomplete
• Results list: Danh sách kết quả có phân trang
• Document viewer: Hiển thị nội dung chi tiết
• Chat interface: Trao đổi với AI

Responsive Design

• Desktop: Layout đa cột, sidebar
• Mobile: Single column, touch-friendly
• Tablet: Adaptive layout

🔄 Logic hiển thị

Search Results Display

Document Display Priority

Primary Information (Luôn hiển thị)

• Document title: In đậm, clickable
• Issuing authority: Cơ quan ban hành
• Issue date: Ngày ban hành/có hiệu lực
• Document number: Số hiệu (nếu có)

Secondary Information (Expandable)

• Summary: Tóm tắt nội dung
• Key provisions: Điều khoản chính
• Related documents: Văn bản liên quan
• Full text: Nội dung đầy đủ

Tertiary Information (On demand)

• Metadata: Tất cả thông tin kỹ thuật
• Change history: Lịch sử sửa đổi
• Citations: Trích dẫn trong văn bản khác

AI Answer Display

Answer Structure

• Direct answer: Trả lời trực tiếp câu hỏi
• Evidence: Trích dẫn nguồn
• Confidence: Mức độ tin cậy
• Follow-up questions: Gợi ý câu hỏi tiếp theo

Citation System

• Source linking: Link đến văn bản gốc
• Highlighting: Tô sáng phần liên quan
• Reference numbering: Đánh số trích dẫn

📊 UI/UX Patterns

Information Architecture

Search Results Page

┌─────────────────────────────────────┐
│ 🔍 Search Query                      │
├─────────────────────────────────────┤
│ 📊 Filters & Sorting                 │
├─────────────────────────────────────┤
│ 📄 Result 1 (High relevance)         │
│     • Title                          │
│     • Authority & Date               │
│     • Summary                        │
├─────────────────────────────────────┤
│ 📄 Result 2                          │
│     • ...                            │
└─────────────────────────────────────┘

Document Detail Page

┌─────────────────────────────────────┐
│ 📄 Document Title                    │
├─────────────────────────────────────┤
│ 📋 Metadata                          │
├─────────────────────────────────────┤
│ 📖 Content                           │
│     • Section 1                      │
│     • Section 2                      │
│     • ...                            │
├─────────────────────────────────────┤
│ 🔗 Related Documents                 │
└─────────────────────────────────────┘

Interaction Patterns

Progressive Disclosure

• Initial view: Title, authority, date, short summary
• Expanded view: Full summary, key provisions
• Full view: Complete document content

Contextual Actions

• Download: PDF/DOC export
• Bookmark: Lưu cho sau
• Share: Chia sẻ link
• Cite: Sao chép trích dẫn

🚀 Performance Considerations

Loading Optimization

• Lazy loading: Load results progressively
• Caching: Cache frequent queries
• Pagination: Limit results per page
• Preloading: Anticipate user actions

Accessibility

• Keyboard navigation: Full keyboard support
• Screen readers: ARIA labels, semantic HTML
• High contrast: Readable text
• Font scaling: Responsive typography

📈 Analytics & Optimization

User Behavior Tracking

• Click-through rates: Which results clicked
• Dwell time: Time spent on documents
• Search refinements: Query modifications
• Conversion: Successful task completion

A/B Testing

• Layout variations: Test different arrangements
• Information density: Amount of info displayed
• Visual hierarchy: Element positioning
• Interaction flows: User journey optimization

🔧 Technical Implementation

Frontend Technologies

• React/TypeScript: Component-based UI
• Tailwind CSS: Utility-first styling
• Vite: Fast development build
• Responsive design: Mobile-first approach

State Management

• Search state: Query, filters, pagination
• Document state: Current view, bookmarks
• User preferences: Display settings

API Integration

• RESTful APIs: Data fetching
• Real-time updates: Live search suggestions
• Caching layer: Redis for performance

Quy tắc hiển thị đảm bảo người dùng có thể nhanh chóng tìm thấy thông tin cần thiết với trải nghiệm trực quan và hiệu quả.