Traffic Signal Timing Editor
The interface effectively organizes complex data with a clear tabular layout complemented by a visual chart for better comprehension. However, the dense presentation and small input fields could challenge usability and accessibility, especially for users unfamiliar with the domain or those needing larger interactive elements.
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 & Structure0
Conversion & Actions2
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
1Critical
7Major
13Moderate
2Minor
Chart axes missing unit labels and unclear legend
Critical
Visual Consistency, Imagery & Media
The Problem
The x-axis and y-axis of the chart 'Phases et bandes passante' display numeric scales but lack unit labels, and the legend uses abbreviations that are not fully explained.
Why it Matters
Without units and clear legend explanations, users cannot accurately interpret data values, reducing the utility of the chart and increasing cognitive effort.
How to Fix
Add descriptive axis labels with units (e.g., meters, seconds) and clarify legend terms either with tooltips or a key.
Issue Highlights
No clear location or role indicator in the interface
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface lacks a clear header or breadcrumb navigation that indicates the user's current location, the role they are operating under, or the environment context within the application.
Why it Matters
Without clear orientation cues, users can feel lost or unsure about where they are in the application, reducing confidence and increasing cognitive load.
How to Fix
Add a consistent header or breadcrumb navigation showing current location and role/environment, such as page title, section labels, or user role indicator.
Issue Highlights
Delete icons lack confirmation prompt
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The red trash bin icons on the right side of each row appear to be used for deleting entries but show no visible confirmation or undo options.
Why it Matters
Accidental clicks on delete can lead to unintended data loss without a way to recover easily, causing user frustration.
How to Fix
Add a confirmation dialog or undo option when a user triggers delete to prevent accidental data removal.
Issue Highlights
No warning or undo option for delete icons
Major
Tone, Friendliness & Delight
The Problem
The red trash bin icons for deleting rows appear without visible warning or undo options, which could lead to user anxiety or accidental data loss.
Why it Matters
Accidental deletion without recovery options can frustrate users and harm trust in the system's reliability.
How to Fix
Include a confirmation dialog before deleting rows and/or an undo option to recover accidental deletions.
Issue Highlights
Small delete trash icons
Major
Accessibility & Input Ergonomics
The Problem
The red trash bin icons on the far right of each row appear to be quite small, likely below the recommended 44x44 pixels touch target size.
Why it Matters
Small tap targets can make it difficult for users, especially on touch devices, to hit the intended button precisely, increasing error rates and frustration.
How to Fix
Increase the size of the trash bin icons to at least 44x44 pixels or add padding around the icons to enlarge the touch target.
Issue Highlights
Too Many Individual Data Entry Fields in Table
Major
Efficiency & Cognitive Load
The Problem
The table requires input across many small fields, increasing micro-steps needed for data entry and editing.
Why it Matters
Each field demands user attention and action, fragmenting the task and increasing cognitive load and completion time.
How to Fix
Group related inputs or provide bulk editing tools to reduce the number of individual fields users must interact with.
Issue Highlights
Complex Chart with Dense Legend and Data
Major
Efficiency & Cognitive Load
The Problem
The chart section includes many colored lines, dots, labels, and a complex legend that may distract and overwhelm users.
Why it Matters
Visual complexity reduces users' ability to quickly interpret data, increasing cognitive load and lowering efficiency.
How to Fix
Simplify the chart by showing only key data or allowing toggling of layers. Reduce legend complexity or present it more clearly.
Issue Highlights
Unclear primary call to action for saving or submitting changes
Major
Flow & States Completeness
The Problem
While there is a 'Mettre à jour' (Update) button visible, it is not clear if this is the definitive call to action or if other steps must be taken first. The screen includes many editable fields and a dynamic table, but no visual hierarchy clearly directs the user to what should be done after editing.
Why it Matters
Users may be uncertain about how to finalize their changes, leading to hesitation or incomplete workflows.
How to Fix
Add clear labeling or affordances around the primary action, possibly using button prominence and instructional text. Provide visible cues or progressive disclosure that confirms what happens on update.
Issue Highlights
Header text 'Sens montant' and 'Sens descendant' have inconsistent font colors
Moderate
Visual Consistency, Imagery & Media
The Problem
The two headers above the data table use different colors (green and blue) for similar level headings, which could be confused with inconsistent styling.
Why it Matters
Inconsistent header styles may confuse users about categorization or grouping, increasing cognitive load and reducing trust.
How to Fix
Use a consistent color scheme or clearly differentiate headers with meaningful style differences supported by context.
Issue Highlights
Trash bin icons lack tooltips or labels
Moderate
Visual Consistency, Imagery & Media
The Problem
The red trash bin icons on the right side of each row in the table lack visible labels or tooltips, making their function unclear to some users.
Why it Matters
Users unfamiliar with the icon may hesitate or misinterpret its function, causing potential errors or frustration.
How to Fix
Add descriptive tooltips or text labels for the icons to clarify their purpose as delete/remove actions.
Issue Highlights
Low contrast for green header text 'Sens montant'
Moderate
Color & Contrast
The Problem
The green header text 'Sens montant' on a light gray background appears to have low contrast, likely below WCAG AA standards for normal text, making it harder to read.
Why it Matters
Users with low vision or color blindness may struggle to discern the green header text clearly, reducing usability and comprehension.
How to Fix
Increase the contrast by using a darker shade of green or a different color with higher contrast against the background.
Issue Highlights
Lack of clear visual hierarchy between section titles and table headers
Moderate
Content Readability & Clarity
The Problem
Section titles such as 'Sens montant' and 'Sens descendant' are in the same font size and weight as table headers, causing confusion in distinguishing important sections from column headers.
Why it Matters
Users may have difficulty quickly identifying distinct sections and understanding the structure of the data, leading to slower comprehension.
How to Fix
Use larger font size, bold weight, or color differentiation for section titles compared to table headers to create a clear hierarchy.
Issue Highlights
Buttons in top-right corner are visually misaligned
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Annuler' and 'Mettre à jour' buttons in the top-right corner are not perfectly aligned vertically, causing a disjointed appearance.
Why it Matters
Misalignment can make the interface appear less polished and harder to scan quickly, reducing the perception of professionalism.
How to Fix
Adjust the vertical positioning of the buttons so their top or center is aligned consistently.
Issue Highlights
Missing confirmation or reassurance on update action
Moderate
Tone, Friendliness & Delight
The Problem
The 'Mettre à jour' (Update) button is visible without any immediate context about confirmation, next steps, or data safety, which may leave users uncertain about the success or impact of their action.
Why it Matters
Without confirmation or reassurance, users might hesitate to update settings, fearing unintended consequences or data loss, which can reduce trust and completion rates.
How to Fix
Add a confirmation message or success feedback after the update button is pressed, explaining what will happen and ensuring the user that data is saved safely.
Issue Highlights
Low contrast for blue header text 'Sens descendant'
Moderate
Color & Contrast
The Problem
The blue header text 'Sens descendant' on a light gray background likely fails WCAG AA contrast standards for normal text, making it less readable.
Why it Matters
Users with vision impairments may have difficulty reading the blue header, detracting from the user experience.
How to Fix
Use a darker shade of blue or a different color that provides better contrast on the light background.
Issue Highlights
Crowded table interaction controls and delete icons
Moderate
Navigation & Structure
The Problem
The table includes numerous small input fields and radio buttons packed tightly along with visually similar delete icons on the right side, which may overwhelm users and increase risk of mis-clicks.
Why it Matters
Crowded interactive elements can cause user errors and slow down task completion due to difficulty distinguishing and interacting with controls.
How to Fix
Increase spacing between interactive elements, group related controls more clearly, and visually differentiate delete icons, possibly adding confirmation dialogs.
Issue Highlights
Close placement of radio buttons and corresponding numeric inputs
Moderate
Accessibility & Input Ergonomics
The Problem
Radio buttons in the 'Reference' column are placed near multiple small numeric input fields in the 'Point de Recalage' and 'Position (m)' columns, with minimal spacing potentially causing mis-taps.
Why it Matters
Tightly spaced interactive elements increase the risk of accidental presses on the wrong control, leading to user errors and frustration.
How to Fix
Increase horizontal spacing between radio buttons and adjacent input fields to maintain a minimum gap of 8-10 pixels.
Issue Highlights
No On-Screen Explanation for Data Relationships Between Sections
Moderate
Efficiency & Cognitive Load
The Problem
The relationship between the table inputs and the chart or the phase offsets on the right is not visually explained, requiring users to remember or infer how these data relate.
Why it Matters
Users must hold relationships between multiple UI elements in memory, increasing cognitive load and potential for errors.
How to Fix
Add contextual tooltips, links, or highlighting to connect related data across the table, chart, and phase offsets at glance.
Issue Highlights
No guidance for adding lines when table is empty
Moderate
Flow & States Completeness
The Problem
The table below 'Sens montant' and 'Sens descendant' contains an icon and text for adding a line ('Ajouter une ligne'), but there is no visible message or instruction guiding the user about what to do if the table was initially empty.
Why it Matters
Users who encounter an empty table may not realize how to start adding data or understand the expected inputs, potentially causing confusion or stagnation.
How to Fix
Provide explicit empty state messaging describing how to add the first row and what kind of data is expected.
Issue Highlights
Reference Radio Button Selection Adds Cognitive Load
Moderate
Efficiency & Cognitive Load
The Problem
Users must choose one reference radio button in the 'Reference' column per row, adding a non-obvious decision point that might not be required for all users.
Why it Matters
Extra decision points cause hesitation and cognitive load, potentially slowing task completion.
How to Fix
Consider automating the reference selection or explaining its purpose more clearly to reduce the mental load of this choice.
Issue Highlights
Lack of Visual Hierarchy and Emphasis on Main Actions
Moderate
Strategic Design
The Problem
The main action button 'Mettre à jour' and the cancel button 'Annuler' are visible but do not stand out strongly compared to the form fields and data table. The UI uses similar spacing and colors that blend the buttons with the rest of the input fields and table, leading to low emphasis on the core action of the screen.
Why it Matters
Users may struggle to quickly identify the primary action to take after editing the form, lowering task efficiency and increasing the chance of errors or confusion about how to save changes.
How to Fix
Increase contrast and size of the primary action button, use distinctive spacing and grouping to separate form input from actionable buttons, and consider a stronger visual style or placement for the save and cancel buttons.
Issue Highlights
No clear hierarchy between control buttons and form heading
Minor
Content Readability & Clarity
The Problem
Control buttons like 'Annuler' and 'Mettre à jour' have similar visual weight as the main form labels, reducing clarity on primary actions versus content areas.
Why it Matters
Users might hesitate or slow down in identifying interactive controls versus static content areas.
How to Fix
Differentiate buttons with consistent button styles, size, and placement away from main title areas for clearer action focus.
Issue Highlights
Redundant and Confusing Use of Color in Table Headers
Minor
Strategic Design
The Problem
The headers 'Sens montant' and 'Sens descendant' use faint green and blue colors that do not provide strong visual separation or hierarchical clarity between the two data groups in the table, making it visually difficult to scan and differentiate sections quickly.
Why it Matters
Users may spend more time parsing the table sections and risk misinterpreting data, slightly slowing down workflow and increasing cognitive load.
How to Fix
Use stronger contrast colors or distinct background shading for data groups, or add clear separators to visually separate the two sections.
Issue Highlights