Here's the screen layout and module context you'll be working with:
{{SCREEN_ASCII_MOCKUP}}
{{MODULE_FLOW_AND_SCREENS}}
You are an experienced UX designer and developer tasked with creating a comprehensive and highly detailed UX Implementation Guide for a specific screen within a module. Your guide will be based on the information provided above.
IMPORTANT: Provide your complete analysis and guide in a single, comprehensive response. Do not use continuation markers or ask if you should continue.
Your task is to analyze this information thoroughly and create a detailed UX Implementation Guide. This guide should be as comprehensive as possible, providing all necessary information for developers to implement the screen effectively.
First, conduct a detailed analysis of the provided information. Use tags for this step. For each of the following aspects:
a) List key observations
b) Summarize your findings
c) Consider how it relates to other aspects
Analyze these aspects:
1. Components: Identify and describe each UI component visible in the screen layout.
2. User Journey: Map out the typical user journey through this screen.
3. User Flow: Detail how users navigate to, through, and from this screen.
4. Pain Points: Identify potential user frustrations or difficulties.
5. Edge Cases: List unusual scenarios or extreme use cases.
6. Button Actions: Describe the function and expected behavior of each button.
7. Key Features: Highlight the main functionalities of this screen.
8. User Interactions: Detail all possible ways users can interact with the screen.
9. Business Logic: Identify any business rules or logic that need to be implemented.
10. Implementation Challenges: Note any foreseen difficulties in development.
11. Developer Information: List any specific information or resources developers might need.
12. User Scenarios: Create 2-3 potential user scenarios for this screen.
13. Display Order and Form Structure: Describe the logical order of information presentation.
14. User Personas: Identify and describe 2-3 potential user personas and their goals.
15. Accessibility Concerns: List potential accessibility issues and how to address them.
16. List View Check: Determine if the screen is a list view. If so, provide detailed information about necessary filters and corresponding API endpoints.
17. Component Usage: Identify which components are custom and which are from existing libraries.
18. Routing: Describe how the screen fits into the overall routing structure of the application.
19. Form Normalization: Explain how form data should be normalized for consistency.
20. Responsive Design: Detail how the Tailwind grid system should be used for responsive layout.
21. Localization: Describe how the form should be localized based on user settings.
22. Testing: Outline requirements for unit tests and end-to-end tests for the form.
23. API Integration: Check the API folder for corresponding modules and list relevant endpoints.
24. Code Generation: Explain how the code should be auto-generated based on the code template.
25. Role-Based Access: Describe how each action should be controlled based on user roles.
26. Empty State: Define how the screen should appear when there's no data to display.
27. Network Status: Explain how the UI should handle different network states (online, offline, slow connection).
28. Dialogs: Describe the implementation of confirmation and success dialogs.
29. View Page: In the Action Field, add a menu for viewing detailed information.
After your analysis, create a prioritized list of the 10 most important UX considerations based on your findings.
Important: The header is fixed for the module, so all functions you describe will be part of the body. Consider this when analyzing the screen layout and describing components.
Next, outline your guide's structure inside tags. Create a detailed outline of how you'll organize the information and what details to include in each section. Incorporate elements from the Comprehensive Functional Specification Document (FSD) Checklist, including document structure, general information, layout and design, functional requirements, validation framework, API specifications, state management, error handling, testing & validation, responsive behavior, performance optimization, accessibility considerations, edge cases, documentation and support, and an implementation checklist.
After your outline, list potential challenges in implementing each section of the guide.
Now, create the UX Implementation Guide as a descriptive document with the following structure. Present your complete guide inside tags, using appropriate subtags for each section:
1.
[Describe the screen's layout, components, entry/exit points, display order, form structure, etc.]
2.
[Detail user interactions, button actions, user flow, and their impact on user experience]
3.
[List and explain field validations and business rules]
4.
[Describe each UI component, including implementation details and custom behaviors]
5.
[Provide examples of success messages and error handling procedures]
6.
[Describe layout for different devices and guidelines for consistent user experience]
7.
[Create a comprehensive checklist for setup, development, and testing phases]
8.
[Include other relevant information, API endpoints, performance considerations, accessibility requirements, etc.]
If the screen is a list view, make sure to include a detailed section on the required filters and corresponding API endpoints within the appropriate sections (likely and ).
Ensure that your guide is comprehensive, well-structured, and provides clear instructions for implementing the screen's user experience. Use only descriptive text without including any code examples. Be thorough in your analysis and guide creation, including all necessary details while maintaining a concise and focused approach.
Add the following points as implementation guide :
- Custom component usage
- Routing implementation
- Form normalization
- Responsive design using Tailwind grid system
- Localization of the form
- Unit and end-to-end testing requirements
- API endpoint integration
- Code auto-generation based on templates
- Role-based access control
- Empty state handling
- Network status management
- Confirmation and success dialogs
- View page implementation in the Action Field menu
Your guide should be detailed enough that developers can implement the screen accurately and efficiently based on your instructions. Provide all information in a single, complete response.