Collaborative Writing Editor
The UI effectively balances a clean, minimalistic writing area with intuitive formatting options and a side panel for collaborative chat and tools, making it easy to focus while still accessing features. However, the interface could improve by enhancing contrast for readability and clarifying some interactive elements, such as the tool icons and quick prompt section, which seem under-emphasized or unclear in their current states.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast3
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions0
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
17Moderate
2Minor
Missing clear page and section orientation
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface lacks a clear, visible indicator to inform users about their current location or active section within the application beyond subtle color changes in tabs. There is no prominent breadcrumb or page title that explicitly describes the current environment or role context.
Why it Matters
Without clear orientation cues, users may become confused about where they are or what they are working on, leading to uncertainty and errors.
How to Fix
Add a prominent page title or breadcrumb trail showing current location or active area. Enhance visual states of active tabs or sections to make navigation context more obvious.
Issue Highlights
No clear primary call-to-action button present
Major
Conversion & Actions
The Problem
The interface lacks a distinct and visually prominent primary CTA button for users to complete an action, such as submitting or generating content. The only somewhat interactive elements are text input fields and a small button labeled 'Hent fra draftr', which is not prominently styled or positioned as a main action.
Why it Matters
Without a clear, visually prominent CTA, users may be uncertain how to proceed, causing confusion and reduced task completion rates.
How to Fix
Add a clearly labeled, visually distinct primary action button (e.g., 'Generate', 'Submit', or 'Create') that guides the user to the next step in the workflow.
Issue Highlights
Misalignment Between Left Editor and Right Sidebar
Major
Visual Consistency, Imagery & Media
The Problem
The vertical dividing line between the main editor area and the right sidebar is visually off-center and the padding/margins differ, causing a misaligned layout.
Why it Matters
Misalignment creates a less polished, less professional appearance and may distract users from content.
How to Fix
Adjust padding and margins so that the divider and content areas align on a consistent grid.
Issue Highlights
Delete action lacks confirm or undo safeguard
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
There is a trash bin icon next to the tabs (chat, obsi, haiku, sonnet) that likely functions as a delete or clear button, but no visible confirmation prompt or undo option is apparent to prevent accidental deletion.
Why it Matters
Accidental deletions without safeguard can cause loss of user-generated or important content, leading to frustration and potential user churn.
How to Fix
Implement a confirmation dialog and/or an undo option for destructive actions like delete to allow users to recover from mistakes.
Issue Highlights
Disabled quick prompts with no indication
Major
Flow & States Completeness
The Problem
The quick prompts on the right side are visible but appear to be disabled or inactive (grayed out), with no explanation or instructions on how to enable or use them.
Why it Matters
Users cannot take advantage of helper shortcuts and may feel stuck or unsure how to progress, leading to drop-off.
How to Fix
Provide clear instructions or state requirements to enable these quick prompts, or disable/hide them if they are not available.
Issue Highlights
Low contrast on placeholder text 'Begynn å skrive…'
Moderate
Color & Contrast
The Problem
The placeholder text 'Begynn å skrive…' in the left editor area appears as light grey on a white background, likely failing WCAG AA contrast ratio of 4.5:1 for normal text.
Why it Matters
Low contrast makes placeholder text difficult to read, especially for users with visual impairments or in bright environments, reducing usability.
How to Fix
Increase the contrast by using a darker grey or black color for the placeholder text to meet at least a 4.5:1 contrast ratio against the white background.
Issue Highlights
Low contrast on orange instruction text in chat panel
Moderate
Color & Contrast
The Problem
The orange instruction text 'Velg kunde og modell ovenfor, bruk hurtigpromptene eller skriv fritt.' on a light beige background likely fails WCAG AA contrast for normal text.
Why it Matters
Users may have difficulty reading instructions, which can reduce clarity and usability for people with color vision deficiencies or low vision.
How to Fix
Use a darker, more saturated orange or switch to a darker color to improve contrast against the beige background and meet minimum contrast ratios.
Issue Highlights
Insufficient contrast and weak emphasis on 'Tittel' heading
Moderate
Content Readability & Clarity
The Problem
'Tittel' heading appears in a very light gray color that is close in tone to the background, which reduces its visual prominence as a heading. The font weight and size do not create a strong visual hierarchy compared to placeholder text below it.
Why it Matters
Users may not easily distinguish the heading from other text, causing confusion about the structure and focus of the content area.
How to Fix
Increase the contrast by using a darker, more distinct text color for the heading and consider making it bolder or larger to improve hierarchy clarity.
Issue Highlights
Insufficient differentiation among tab labels and tab states
Moderate
Content Readability & Clarity
The Problem
The tab labels ('chat', 'obsi', 'haiku', 'sonnet') have similar font size and color, with only subtle orange underline for the active tab. The inactive tabs appear faint grey, but the difference is narrow and might not create strong separation for users.
Why it Matters
Users might struggle to quickly identify the active tab and navigate effectively between tabs, causing a potential drop in comprehension and workflow speed.
How to Fix
Increase contrast and weight difference between active and inactive tabs, use stronger visual indicators like bolder text or background shading with color.
Issue Highlights
Inconsistent Font Weight in Top Navigation Tabs
Moderate
Visual Consistency, Imagery & Media
The Problem
The top navigation tabs 'chat' and 'sonnet' are bolded while 'obsi' and 'haiku' are not, causing inconsistent emphasis.
Why it Matters
Inconsistent text emphasis can confuse users about which tabs are active or important, reducing UI clarity.
How to Fix
Apply consistent font weight styling across all tabs, using bold only to indicate the active tab.
Issue Highlights
Small icon buttons in toolbar
Moderate
Accessibility & Input Ergonomics
The Problem
The icon buttons in the top toolbar (undo, redo, search, etc.) appear quite small, likely smaller than the recommended 44x44 pixels touch target size.
Why it Matters
Small touch targets increase the chance of input errors and user frustration, especially on touch devices or for users with motor impairments.
How to Fix
Increase the size of these icon buttons or add adequate padding around them to ensure a minimum touch target size of 44x44 pixels.
Issue Highlights
Small icon buttons in right sidebar 'VERKTØY' section
Moderate
Accessibility & Input Ergonomics
The Problem
The small square icon buttons in the right sidebar under 'VERKTØY' appear to be smaller than recommended touch target size.
Why it Matters
Small buttons can be difficult to tap accurately, causing input errors and frustration, especially for users on mobile or with reduced dexterity.
How to Fix
Increase the size of these buttons or add padding to meet or exceed a 44x44 pixel touch target.
Issue Highlights
Unclear user guidance after initial input
Moderate
Flow & States Completeness
The Problem
The interface shows an empty text input for writing and a chat box with a prompt 'Hva trenger du hjelp med?' but it does not clearly indicate what the next step is after beginning to write or typing in the chat input. There is no visible button or call to action to submit or proceed.
Why it Matters
Users may be confused about how to proceed or how to trigger the next action, causing friction or abandonment.
How to Fix
Add a clear, visible action button or explicit instructions for what to do once the user starts writing or types a message, such as a 'Send' or 'Generate' button.
Issue Highlights
Lack of clear visual hierarchy between the editor and chat panel
Moderate
Strategic Design
The Problem
The left side editor and the right side chat panel share almost equal visual weight and similar muted colors with minimal contrast, making it hard for users to quickly identify the primary focus area upon loading the interface.
Why it Matters
Users may experience uncertainty about where to start or focus their attention, impacting their ability to efficiently use the writing and chat tools together.
How to Fix
Enhance visual differentiation by increasing contrast or applying a more distinct background or border to the primary area, or adjusting the size ratio to emphasize the main writing space.
Issue Highlights
Low contrast on disabled quick prompt labels
Moderate
Color & Contrast
The Problem
The greyed-out quick prompt text items on the right side panel appear low contrast against the light background, likely below WCAG AA 3:1 for disabled or non-interactive text.
Why it Matters
Users with visual impairments or in bright environments might struggle to read these disabled prompt options, reducing discoverability.
How to Fix
Increase contrast by using a darker shade of grey for disabled text, or use other indicators like opacity or style changes to distinguish disabled items effectively.
Issue Highlights
Placeholder text 'Begynn å skrive…' is too small and low contrast
Moderate
Content Readability & Clarity
The Problem
The placeholder text uses a small font size with low contrast against the background, likely below WCAG AA standards for body text readability.
Why it Matters
Users may have difficulty reading the placeholder, which can reduce clarity on where to start typing and overall usability.
How to Fix
Increase the font size modestly and use darker text color to meet contrast and legibility guidelines.
Issue Highlights
Sidebar Tool Icons Lack Labels or Tooltips
Moderate
Visual Consistency, Imagery & Media
The Problem
The 6 icons in the right sidebar's 'VERKTØY' section do not have visible labels or tooltips, making their functions unclear.
Why it Matters
Users unfamiliar with the iconography may hesitate or guess wrong, increasing cognitive load and reducing usability.
How to Fix
Add text labels or hover tooltips for each icon explaining their function.
Issue Highlights
Crowded sidebar with many small, similar buttons
Moderate
Navigation & Structure
The Problem
The rightmost sidebar contains a dense cluster of small icon buttons and dropdown controls packed closely together, which may cause confusion or difficulty in selecting the intended option.
Why it Matters
Users may misclick or struggle to find the appropriate tool or setting, degrading usability and slowing workflow.
How to Fix
Increase spacing around clickable elements and consider grouping tools logically with clearer labels or separators to reduce visual clutter.
Issue Highlights
Small gap between toolbar icon buttons
Moderate
Accessibility & Input Ergonomics
The Problem
The toolbar buttons at the top are close horizontally with minimal spacing, which could cause accidental taps on adjacent buttons.
Why it Matters
Insufficient spacing can lead to input errors and reduce overall usability and accuracy for all users.
How to Fix
Increase horizontal spacing between the toolbar icon buttons to allow comfortable and precise tapping.
Issue Highlights
Unclear instructions require recall of previous setup
Moderate
Efficiency & Cognitive Load
The Problem
The chat area message says: 'Velg kunde og modell ovenfor, bruk hurtigpromptene eller skriv fritt' which suggests users must remember or locate customer and model selections from outside the immediate view.
Why it Matters
Users may struggle if they do not remember earlier choices or where to find those controls, increasing cognitive load and potential errors.
How to Fix
Provide inline, contextual reminders or allow direct selection in the chat interface to reduce memory reliance.
Issue Highlights
Multiple dropdowns add extra decision steps
Moderate
Efficiency & Cognitive Load
The Problem
The interface includes multiple dropdown selection controls (e.g., 'Skriv på vegne av Utbrudd' and 'Ingen aktiv skill'), which require users to make several separate decisions before proceeding.
Why it Matters
Users must process and make multiple selections upfront, increasing time and cognitive load before starting their primary task.
How to Fix
Consider simplifying or reducing the number of dropdowns on the main screen or combine related options into fewer decision points.
Issue Highlights
Confusing tab options in chat panel
Moderate
Efficiency & Cognitive Load
The Problem
The chat panel includes multiple tabs (chat, obsi, haiku, sonnet) with unclear usage or relevance, which may force users to decide where to interact or look.
Why it Matters
Extra navigation choices can interfere with user's natural flow and increase mental effort when unsure which tab is needed.
How to Fix
Consolidate or clearly label tabs and reduce the number of visible options to only those that are critical at this step.
Issue Highlights
Dropdowns missing visible labels
Minor
Accessibility & Input Ergonomics
The Problem
The dropdown menus under 'SKRIVER FOR' and 'SKILL' have no visible labels directly above or next to them to clearly identify their purpose.
Why it Matters
Lack of visible labels may cause confusion and reduce form usability, especially for screen reader users or cognitive disabilities.
How to Fix
Add clear visible labels for each dropdown input to improve clarity and accessibility.
Issue Highlights
Inactive prompt buttons in the 'Hurtigprompts' panel reduce clarity
Minor
Strategic Design
The Problem
The list of quick prompts on the right panel is visible but all appear disabled or grayed out, which may confuse users about their availability or how to activate them.
Why it Matters
Users might not realize these features exist or how to use them, missing out on potentially helpful writing aids.
How to Fix
Provide clearer visual cues or instructions on how to activate or enable these quick prompts, or hide them until they are usable.
Issue Highlights