Sales Order Creation Form
The interface is well-structured with clear segmentation of client and commercial configuration data, enhancing user comprehension. However, improving the visibility of input field labels and reducing text density would enhance usability and reduce cognitive load.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast2
Content Readability & Clarity4
Visual Consistency, Imagery & Media1
Navigation & Structure2
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load1
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
15Moderate
6Minor
Search button next to CNPJ input is too small
Major
Accessibility & Input Ergonomics
The Problem
The black search button to the right of the CNPJ input appears to be very small, likely less than the recommended 44x44 pixels for touch targets.
Why it Matters
Small touch targets can cause input errors and frustration as they require more precise taps, especially on touch devices.
How to Fix
Increase the size of the search button to at least 44 by 44 pixels or add more padding to make it easier to tap.
Issue Highlights
Duplicate selection controls for key commercial options
Major
Efficiency & Cognitive Load
The Problem
The same options such as Tipo, Frete, Pagamento, and Canal are present both in the top context bar and the Configuração Comercial panel, requiring users to make redundant selections.
Why it Matters
Users must make duplicate decisions, increasing cognitive load and the chance of inconsistent inputs which may frustrate users or lead to errors.
How to Fix
Consolidate these related controls into a single area, preferably the context bar or the commercial configuration panel, to reduce repeated decisions.
Issue Highlights
Next Step Button is Partially Obscured
Major
Flow & States Completeness
The Problem
The 'Próximo' (Next) button in the bottom right corner is partially obscured by a chatbot overlay, making it hard for users to clearly see or click.
Why it Matters
When the next step button is hard to access, users can get confused or frustrated about how to proceed, risking drop-off in the flow.
How to Fix
Move or allow users to minimize the chatbot so it doesn't overlap actionable buttons, ensuring the 'Próximo' button is fully visible and clickable.
Issue Highlights
No Feedback or Guidance for Invalid CNPJ Input
Major
Tone, Friendliness & Delight
The Problem
The CNPJ input includes a search button but no visible instruction or error message mechanism to handle failed or invalid searches.
Why it Matters
Users may be uncertain what happens if the CNPJ input is invalid or no data is found, leading to frustration or abandonment.
How to Fix
Provide inline feedback messages or helper text to guide users after search attempts, including recovery options or error explanations.
Issue Highlights
Low contrast placeholder text in input fields
Moderate
Color & Contrast
The Problem
Placeholder text such as 'Nome do contato', '(11) 99999-9999', and '[REDACTED]' is displayed in a light gray color with low contrast against the white input backgrounds, likely below WCAG AA standards.
Why it Matters
Low contrast placeholder text can be difficult to read and understand, especially for users with low vision or color blindness, impacting form completion accuracy.
How to Fix
Use a darker gray or higher contrast color for placeholder text or provide visible labels outside of the input fields.
Issue Highlights
Low contrast on inactive tab labels
Moderate
Color & Contrast
The Problem
The inactive tab labels 'Itens & Preços' and 'Revisão & Salvar' are in light gray on a nearly white background, likely failing WCAG AA contrast for normal text.
Why it Matters
Users with visual impairments or in bright environments may have difficulty reading the inactive tab labels, reducing usability and accessibility.
How to Fix
Increase the contrast by using a darker color for inactive tab labels or by adding a stronger background or underline highlight to differentiate them from the active tab.
Issue Highlights
Low contrast secondary labels
Moderate
Color & Contrast
The Problem
Secondary labels like 'Informe o CNPJ para buscar automaticamente os dados da empresa.' are in a very light gray color, blending with the white background, likely below WCAG recommended contrast levels.
Why it Matters
Users might miss important instructional information due to poor readability, hindering form usability.
How to Fix
Use a darker color for secondary text to ensure sufficient contrast against the background.
Issue Highlights
Ambiguous 'Pagamento' Selector Label
Moderate
Content Readability & Clarity
The Problem
The dropdown labeled 'Pagamento' shows '--' as a selected option without contextual clue or placeholder text to clarify its meaning.
Why it Matters
Users may be confused about what '--' signifies (e.g., no payment, not selected), which can lead to incorrect selections or incomplete form submission.
How to Fix
Replace '--' with a clearer placeholder such as 'Selecione pagamento' or 'Nenhum pagamento selecionado' to clarify intent.
Issue Highlights
Different vertical alignments among input fields in Dados do Cliente
Moderate
Visual Consistency, Imagery & Media
The Problem
The input fields under Dados do Cliente are not on a consistent vertical grid. For example, the CNPJ search button is noticeably lower than the adjacent input fields, and the Razão Social field is misaligned vertically compared to the CNPJ input.
Why it Matters
Inconsistent alignment causes visual clutter and makes scanning and filling out forms more difficult for users, reducing efficient data entry.
How to Fix
Adjust all input fields and buttons in Dados do Cliente to align vertically along a consistent grid line. Ensure button heights and input field heights match for uniformity.
Issue Highlights
Page Step Indicator Lacks Clear Highlight for Current Step
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The step navigation bar at the top (Cliente & Config, Itens & Preços, Revisão & Salvar) shows the current step but the highlight and contrast for the active step are subtle and might be hard to quickly discern.
Why it Matters
Users can feel uncertain about their current position in a multi-step process, increasing cognitive load and the chance of errors or frustration.
How to Fix
Enhance the contrast and visual prominence of the active step indicator using stronger colors, bold text, or a more distinct shape.
Issue Highlights
Save button style lacks emphasis in header
Moderate
Strategic Design
The Problem
The "Salvar" (Save) button in the top right uses a small blue button style that visually competes with the prominent blue header background, making it less distinguishable as a primary action.
Why it Matters
Users may overlook the save button, causing them to miss the primary saving action needed to complete this step.
How to Fix
Use a contrasting button style, such as a lighter background with a border or shadow, to make the save button stand out more from the header.
Issue Highlights
Inconsistent button styles in top bar actions
Moderate
Visual Consistency, Imagery & Media
The Problem
The top right buttons use multiple styles: the 'Salvar' button is blue with white text, the 'CRM' button is a greyish background with dark text, and the 'X' close button is a simple icon with no background fill. These inconsistency in color, shape, and visual weight is noticeable.
Why it Matters
Inconsistent button styling can confuse users about the relative importance and actions associated with each button, degrading visual coherence.
How to Fix
Use a consistent button style system for all top bar action buttons, differentiating only by color or iconography but maintaining consistent shape, padding, and typography.
Issue Highlights
Top Action Buttons Clustered Without Clear Prioritization
Moderate
Navigation & Structure
The Problem
The top right action buttons (Salvar, CRM, close 'X', and unsaved changes indicator) are closely grouped, visually competing and potentially confusing for quick action identification.
Why it Matters
Crowded or unclear action areas can cause users to hesitate or misclick, slowing task completion or causing frustration.
How to Fix
Add padding between buttons, use distinct colors for primary vs secondary actions, and separate the unsaved changes status visually from actionable buttons.
Issue Highlights
Vague label on primary next step button
Moderate
Conversion & Actions
The Problem
The primary button in the bottom right corner is labeled 'Próxi...' (likely 'Próximo' meaning 'Next'), which lacks specificity about the action it performs or what the user is progressing towards.
Why it Matters
Users may be uncertain about what will happen when they click this button, potentially reducing their confidence to proceed and causing hesitation or errors.
How to Fix
Use a clearer, more specific label for this primary action that describes the exact next step or outcome, such as 'Next: Add Items' or 'Next: Review Order'.
Issue Highlights
Top right save buttons placed too close together
Moderate
Accessibility & Input Ergonomics
The Problem
The three buttons on the top right (Salvar, CRM, and close 'X') are placed with minimal spacing, making it difficult to distinguish and tap the intended button accurately.
Why it Matters
Buttons placed too close can cause accidental taps on the wrong control, leading to user errors or unintended actions.
How to Fix
Increase horizontal spacing between the buttons to ensure at least 8-10 pixels margin between their touch areas.
Issue Highlights
Manual CNPJ input requires remembering format and data
Moderate
Efficiency & Cognitive Load
The Problem
Users must manually enter the complex CNPJ number format without in-line format guidance or autofill, relying on memory to enter it correctly before searching.
Why it Matters
Errors in CNPJ input can lead to failed searches or data retrieval issues, slowing user progress and causing frustration.
How to Fix
Implement input masks or format hints and inline error messages to guide correct CNPJ entry and reduce user memory burden.
Issue Highlights
Context toolbar filters visually duplicate section fields
Moderate
Strategic Design
The Problem
The filter bar below the step indicators repeats the same 'Tipo', 'Frete', 'Pagamento', and 'Canal' selectors that appear again inside the 'Configuração Comercial' form section, causing redundancy.
Why it Matters
This redundancy may confuse users about which set of controls to use or could cause errors if values are changed inconsistently between areas.
How to Fix
Remove duplication by consolidating these controls into one clearly defined area or visually distinguish the context bar controls from the form fields.
Issue Highlights
No Clear Sidebar or Persistent Navigation to Indicate Section
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The layout relies on a horizontal stepper without a visible sidebar or persistent vertical navigation, making the page feel less anchored in the overall app structure.
Why it Matters
Users may struggle to understand where the current form fits within the overall app context, increasing disorientation during multi-step processes.
How to Fix
Consider adding a sidebar or a breadcrumb to show overall navigation or the user’s location within the app more explicitly.
Issue Highlights
Lack of Trust Signal for Sensitive CNPJ Search
Moderate
Tone, Friendliness & Delight
The Problem
The CNPJ search field allows automatic retrieval of company data but lacks visible trust signals, disclaimers, or privacy reassurances about using sensitive company identifiers.
Why it Matters
Users may hesitate to input sensitive information like CNPJ without reassurance or information on data security and privacy, reducing trust and engagement.
How to Fix
Add clear trust signals near the CNPJ input, such as privacy assurances, data usage explanations, or a link to privacy policy.
Issue Highlights
Weak Hierarchy in Section Subtext
Minor
Content Readability & Clarity
The Problem
The instruction texts under 'Dados do Cliente' and 'Configuração Comercial' are the same font size and weight as other labels, appearing dim but not visually distinct enough from inputs.
Why it Matters
Users may not clearly associate instructional text with relevant sections which may reduce clarity and ease of form completion.
How to Fix
Use a smaller font size, lighter color, or italic style for instruction text to visually separate it from labels and inputs.
Issue Highlights
Unclear action of 'Salvar' button in top bar
Minor
Conversion & Actions
The Problem
The save button labeled 'Salvar' is visually distinct but lacks contextual hints or confirmation prompts about what exactly will be saved or when it should be used.
Why it Matters
Users may be unsure if pressing save will store the entire form or just part of it, potentially causing confusion or incomplete data submission.
How to Fix
Add a tooltip or helper text clarifying the save scope and trigger a confirmation after saving to reassure users.
Issue Highlights
Misalignment of form labels and inputs in Configuração Comercial section
Minor
Visual Consistency, Imagery & Media
The Problem
The labels and input fields in the Configuração Comercial section are not consistently aligned horizontally. For example, the label 'Tipo' and its input do not line up vertically well with other label-input pairs, breaking the expected form grid.
Why it Matters
Misalignment in form layouts can reduce readability and make it harder for users to associate labels with corresponding inputs quickly.
How to Fix
Align labels and inputs properly along consistent vertical grid columns to improve form clarity.
Issue Highlights
Ambiguous icon use for CNPJ search button
Minor
Visual Consistency, Imagery & Media
The Problem
The button to the right of the CNPJ input uses a magnifying glass icon without a label or tooltip visible, which might confuse some users about its specific function.
Why it Matters
Unlabeled icons, especially in forms, can lead to hesitation or errors if users are unclear about their purpose.
How to Fix
Add a tooltip or aria-label with a clear description such as 'Buscar CNPJ' to clarify the icon's function.
Issue Highlights
Navigation tabs are too close
Minor
Accessibility & Input Ergonomics
The Problem
The step navigation tabs at the top ('Cliente & Config', 'Itens & Preços', 'Revisão & Salvar') have small horizontal spacing, potentially causing imprecise taps.
Why it Matters
Close tabs can increase the difficulty for users to accurately select the intended tab, leading to frustration or misnavigation.
How to Fix
Add more horizontal spacing or padding between the tabs to improve target separation.
Issue Highlights
Redundant field groups increase visual complexity
Minor
Efficiency & Cognitive Load
The Problem
The interface shows multiple sections with overlapping content and labels (e.g., commercial configuration repeated in the top bar and panel) which contributes to visual clutter.
Why it Matters
This makes it harder for users to focus on relevant inputs and can slow decision-making by overwhelming visual attention.
How to Fix
Remove or collapse redundant sections or clearly differentiate related areas to reduce clutter and focus user attention.
Issue Highlights