Healthcare Chat Support Center
The interface is well-organized with a clear three-column layout that separates conversations, chat details, and patient actions for efficient multitasking. However, the user experience could improve by enhancing visual contrast for better readability and streamlining some interface elements to reduce cognitive load.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast2
Content Readability & Clarity4
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
6Major
15Moderate
5Minor
Search input missing visible label
Major
Accessibility & Input Ergonomics
The Problem
The search input field on the left side only uses a placeholder ('Procurar em todo o histórico') without a visible label describing its purpose.
Why it Matters
Placeholders alone are not reliable accessible labels and can disappear when users type, which negatively affects accessibility and usability.
How to Fix
Add a visible label for the search input or use an aria-label accessible to screen readers.
Issue Highlights
Cluttered Conversation List with Multiple Action Elements
Major
Navigation & Structure
The Problem
The left sidebar 'Conversas' panel combines multiple clickable elements such as search inputs, filter tabs (Minhas, Sem agente, Retornar, Todas), and additional dropdown filters densely stacked in a narrow vertical space. This concentration creates visual noise and can overwhelm users.
Why it Matters
Users may find it difficult to quickly locate and select relevant conversations or apply filters, leading to slower task completion or accidental clicks.
How to Fix
Simplify and group filter controls with clearer spacing, possibly using collapsible sections or prioritizing primary filters. Reduce the number of visible filter tabs or convert some filters into dropdown menus to reduce clutter.
Issue Highlights
Cancel scheduling lacks confirmation prompt
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The option to cancel an appointment (Cancelar agendamento) appears directly in the chatbot options without an explicit safeguard such as a confirmation or undo step visible in the UI.
Why it Matters
Users might accidentally cancel appointments without intending to, leading to confusion or frustration for both patients and service agents.
How to Fix
Add a confirmation dialog or undo feature when the user chooses the cancel appointment option to prevent accidental destructive actions.
Issue Highlights
Lack of trust reassurance for sensitive actions in chatbot menu
Major
Tone, Friendliness & Delight
The Problem
The chatbot menu lists sensitive actions such as scheduling, rescheduling, and canceling appointments without providing any trust signals or reassurances about data security or privacy.
Why it Matters
Users may hesitate or feel uncertain about sharing personal or medical information without clear trust signals, potentially reducing engagement or satisfaction.
How to Fix
Add clear trust signals or reassuring notes near these actions, such as statements about data confidentiality, encryption, or secure handling of user information.
Issue Highlights
Unclear status indicator for conversation availability
Major
Strategic Design
The Problem
The status control labeled 'Ficar disponível' with toggle and 'Bot ativo' might confuse users if it controls availability or bot activation. It's unclear what 0 disponíveis means in relation to the toggle and active bot state.
Why it Matters
Users may misunderstand whether they are marked available or not, leading to missed conversations or confusion about chat readiness.
How to Fix
Clarify the labels and visual relationship between availability count, the toggle, and 'Bot ativo' to clearly indicate what each controls and their current states.
Issue Highlights
No Clear Next Step After Virtual Assistant Message
Major
Flow & States Completeness
The Problem
The virtual assistant provides options to the user, but there is no button or clear action prompt to select or confirm a choice directly on the screen.
Why it Matters
Users may be confused about how to proceed or respond to the assistant's options, potentially causing delays or abandonment.
How to Fix
Add clear interactive buttons or a more prominent input method that guides users to choose or enter their option.
Issue Highlights
Unlabeled icons under 'Paciente' profile
Moderate
Visual Consistency, Imagery & Media
The Problem
Three circular icons are shown below the 'Paciente' heading with no textual labels or tooltips visible, making their function unclear.
Why it Matters
Users may not understand what actions the icons represent, increasing cognitive load and risking confusion.
How to Fix
Add descriptive tooltips, labels, or accessible names to clarify each icon’s purpose (e.g., chat, call, schedule).
Issue Highlights
Low contrast on placeholder text in search input
Moderate
Color & Contrast
The Problem
The placeholder text 'Procurar em todo o histórico' appears in a light gray color on a white background, resulting in low contrast likely below WCAG AA 4.5:1 for normal text.
Why it Matters
Low contrast placeholder text can be difficult to see for users with visual impairments or in low-light environments, reducing usability and accessibility of the search function.
How to Fix
Increase the contrast of the placeholder text by using a darker gray or near-black color to meet WCAG AA minimum contrast ratio of 4.5:1.
Issue Highlights
Low contrast on disabled dropdown label text
Moderate
Color & Contrast
The Problem
The label text 'Todos os canais' in the dropdown appears in a medium gray on a white background, resulting in insufficient contrast likely below WCAG AA 4.5:1.
Why it Matters
Low contrast text can be hard to read, making it difficult for users to interact with or understand the dropdown's content.
How to Fix
Use a darker text color with sufficient contrast against the white background to meet WCAG AA standards.
Issue Highlights
Unclear Time Reference for 'Última do paciente há 8 minutos'
Moderate
Ambiguous Date/Time/Timezone
The Problem
The phrase 'Última do paciente há 8 minutos' indicates a last patient activity 8 minutes ago but does not specify the timezone or exact reference time.
Why it Matters
Users may be unsure about the exact time of the last patient interaction, which can cause confusion or misinterpretation of recency.
How to Fix
Add a clear timezone or contextual time reference to the timestamp, e.g., 'há 8 minutos (GMT-3)'.
Issue Highlights
Search icons misaligned in header of conversations column
Moderate
Visual Consistency, Imagery & Media
The Problem
There are two search icons close to each other near the top of the left sidebar, but their vertical alignment is inconsistent. This creates visual clutter and imbalance.
Why it Matters
Misalignment in interactive elements may cause the interface to feel less polished and harder for users to quickly scan and use.
How to Fix
Align the two search icons on a consistent horizontal baseline or remove the duplicate icon if redundant.
Issue Highlights
Small icon buttons with insufficient touch target size
Moderate
Accessibility & Input Ergonomics
The Problem
The icon buttons (such as the magnifying glass icons next to the search input in the left panel and near 'Sessão #24fac9fb') appear smaller than recommended 44x44 pixels touch target size and might require precise tapping.
Why it Matters
Small tap targets can cause user frustration and increase error rates, especially on touch devices where finger precision is limited.
How to Fix
Increase the size of these icon buttons or add sufficient padding around them to ensure tap targets meet minimum recommended dimensions.
Issue Highlights
Multiple status filters compete for attention in conversation list
Moderate
Efficiency & Cognitive Load
The Problem
The left panel shows several filters (Minhas, Sem agente, Retornar, Todas) for conversations, requiring users to decide quickly which filter to use among overlapping categories.
Why it Matters
Too many overlapping or similar filters create unnecessary decision points and slow user navigation by forcing them to think about the filtering logic instead of focusing on conversations.
How to Fix
Simplify filters by combining similar categories or providing a clear default filter to reduce the number of immediate decisions.
Issue Highlights
Unlabeled Toggle Switch 'Ficar disponível'
Moderate
Content Readability & Clarity
The Problem
The toggle switch labeled 'Ficar disponível' does not clarify what exactly it controls, lacking additional context or tooltip to explain its function.
Why it Matters
Users may be uncertain about the effects of toggling it on or off, potentially causing mistakes or hesitance in using this feature.
How to Fix
Add a clear label or a tooltip icon next to the toggle that explains its purpose and impact.
Issue Highlights
Lack of Clear User Role or Context Indicator in Sidebar
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
Although there is a 'Paciente' label with an avatar on the right sidebar, the role or user mode (like agent, admin, or patient) is not clearly emphasized or visually separated from other elements, making it subtle and easy to overlook.
Why it Matters
Users may feel disoriented or unsure about their current operational context or role, especially in a multi-role system, causing confusion during task switching.
How to Fix
Add a prominent role badge or banner, distinct colors, or additional textual context clarifying the current environment or user role. Consider consistent placement across sessions.
Issue Highlights
Send button label 'Enviar' lacks emphasis as primary CTA
Moderate
Conversion & Actions
The Problem
The send button for chat responses is labeled 'Enviar' but is located away from the most prominent chat area and visually is less emphasized compared to the 'Resolver' button, which is green and prominent.
Why it Matters
Users may be unsure about the primary action for sending chat messages leading to slower interaction or hesitation.
How to Fix
Enhance the visual prominence of the 'Enviar' button to clearly indicate it as the primary action within the chat box area, possibly by increasing size, changing color, or positioning it closer to the text input area.
Issue Highlights
Use of ambiguous question mark avatar for patient
Moderate
Tone, Friendliness & Delight
The Problem
The patient avatar uses a simple question mark icon which may come across as impersonal or uncertain in a health-related context.
Why it Matters
This visual choice could reduce user trust or emotional connection with the interface, potentially decreasing comfort and engagement.
How to Fix
Replace the question mark with a more friendly, humanized avatar or a neutral placeholder with warmer tone to enhance trust and approachability.
Issue Highlights
Closely spaced conversation list entries and buttons
Moderate
Accessibility & Input Ergonomics
The Problem
In the left panel, the conversation list entries and the filtering buttons ('Minhas', 'Sem agente', 'Retornar', 'Todas') are placed closely, with less than recommended spacing between interactive elements.
Why it Matters
Insufficient spacing between clickable elements can cause accidental taps and increase user frustration.
How to Fix
Add more spacing/margin between clickable items to ensure users can reliably tap the intended target.
Issue Highlights
Expandable sections lack clear interactive affordance
Moderate
Accessibility & Input Ergonomics
The Problem
The expandable sections on the right side ('AGENDAMENTOS', 'NOTAS INTERNAS', 'CONVERSAS ANTERIORES') use only a plus icon without clear button styling, possibly making it unclear these are interactive controls.
Why it Matters
Lack of clear affordance may make users miss the expandable functionality or doubt if the control is clickable.
How to Fix
Use a clear button style with hover/focus states and distinct visual cues to indicate expandability.
Issue Highlights
Multiple expandable sections increase micro-steps
Moderate
Efficiency & Cognitive Load
The Problem
The right sidebar contains multiple expandable sections (Ações da Conversa, Agendamentos, Notas Internas, Conversas Anteriores), requiring users to click multiple times to access needed information.
Why it Matters
Having many expandable sections increases the number of clicks and micro-steps, adding to cognitive load and slowing down task completion.
How to Fix
Consolidate related information into fewer expandable sections or present the most commonly used content by default to reduce the number of clicks needed.
Issue Highlights
Conversation Actions Missing Confirmation or Progression
Moderate
Flow & States Completeness
The Problem
The conversation action pane shows the option to assign an agent, but the 'Solicitar dados de contato' button is disabled and no next step is evident after agent selection.
Why it Matters
User may be stuck without an obvious way to advance or complete the conversation management task, leading to frustration or incomplete handling.
How to Fix
Enable relevant action buttons or provide feedback and guidance on what steps to take after selecting an agent.
Issue Highlights
Chat message input toolbar icons not evenly spaced
Minor
Visual Consistency, Imagery & Media
The Problem
The icons for emoji, attachment, microphone, and lightning bolt appear unevenly spaced horizontally in the message input area, causing minor alignment inconsistency.
Why it Matters
Inconsistent spacing between interactive icons can increase cognitive load and reduce perceived UI quality.
How to Fix
Adjust horizontal spacing between toolbar icons to ensure consistent gaps and alignment.
Issue Highlights
Different background styles for message section and buttons
Minor
Visual Consistency, Imagery & Media
The Problem
The chat message bubble uses a soft rounded rectangle with a subtle border and background, whereas the 'Resolver' button uses a much darker solid green fill with sharp contrast, creating style inconsistency.
Why it Matters
Inconsistent visual styles between interactive components and content areas may distract users and reduce interface cohesion.
How to Fix
Unify style treatments by using a consistent approach for backgrounds and borders across related UI elements.
Issue Highlights
Flat Visual Hierarchy in Chat List Filters
Minor
Content Readability & Clarity
The Problem
Filter options such as 'Minhas 0', 'Sem agente 0', 'Retornar 1', and 'Todas 1' appear visually similar with minimal differentiation or emphasis, making it harder to distinguish filter states at a glance.
Why it Matters
Users might take longer to identify active filters or categories, reducing efficiency and increasing cognitive load.
How to Fix
Use stronger visual cues such as bold text, color highlights, or size differences to emphasize the currently active filter among the options.
Issue Highlights
List includes redundant icons and badges
Minor
Efficiency & Cognitive Load
The Problem
In the conversation list, each conversation entry shows multiple icons and badges (chat bubble, alert, headphone), some of which do not prompt direct action.
Why it Matters
Several visual indicators create noise and compete for user attention unnecessarily, causing mild distraction and slowing task recognition.
How to Fix
Reduce the number of non-action icons or combine status indicators into a single, clear status badge to simplify the interface.
Issue Highlights
Minimal branding or distinctive visual hierarchy in main chat area
Minor
Strategic Design
The Problem
The main chat interface uses a very soft color palette and small font sizes for key labels without strong emphasis or branding, which can make the interaction visually flat.
Why it Matters
This can reduce user engagement and recall, as the interface does not create a visually memorable or compelling moment to distinguish the service.
How to Fix
Use stronger typographic hierarchy, bolder colors for key titles, or incorporate logo or brand elements more prominently in the chat header or window.
Issue Highlights