{ "scores": { "J1-desktop": { "hierarchy": 5, "density": 6, "alignment": 7, "contrast": 6, "discoverability": 6, "polish": 6 }, "J1-mobile": { "hierarchy": 5, "density": 4, "alignment": 7, "contrast": 6, "discoverability": 5, "polish": 6 }, "J2-desktop": { "hierarchy": 6, "density": 6, "alignment": 8, "contrast": 7, "discoverability": 6, "polish": 6 }, "J2-mobile": { "hierarchy": 4, "density": 4, "alignment": 7, "contrast": 7, "discoverability": 5, "polish": 6 }, "J3-desktop": { "hierarchy": 5, "density": 4, "alignment": 5, "contrast": 6, "discoverability": 4, "polish": 5 }, "J3-mobile": { "hierarchy": 3, "density": 3, "alignment": 5, "contrast": 6, "discoverability": 4, "polish": 4 }, "J4-desktop": { "hierarchy": 5, "density": 4, "alignment": 6, "contrast": 5, "discoverability": 4, "polish": 5 }, "J4-mobile": { "hierarchy": 4, "density": 4, "alignment": 5, "contrast": 6, "discoverability": 4, "polish": 5 }, "J5-desktop": { "hierarchy": 7, "density": 6, "alignment": 8, "contrast": 7, "discoverability": 4, "polish": 6 }, "J5-mobile": { "hierarchy": 4, "density": 3, "alignment": 7, "contrast": 5, "discoverability": 2, "polish": 4 }, "Q1-desktop": { "hierarchy": 5, "density": 5, "alignment": 7, "contrast": 6, "discoverability": 4, "polish": 5 }, "Q1-mobile": { "hierarchy": 3, "density": 3, "alignment": 5, "contrast": 4, "discoverability": 3, "polish": 3 }, "L1-desktop": { "hierarchy": 4, "density": 4, "alignment": 6, "contrast": 6, "discoverability": 4, "polish": 5 }, "L1-mobile": { "hierarchy": 3, "density": 4, "alignment": 5, "contrast": 5, "discoverability": 4, "polish": 4 }, "D1-desktop": { "hierarchy": 3, "density": 4, "alignment": 6, "contrast": 5, "discoverability": 4, "polish": 5 }, "D1-mobile": { "hierarchy": 3, "density": 3, "alignment": 5, "contrast": 4, "discoverability": 4, "polish": 4 }, "S1-desktop": { "hierarchy": 4, "density": 4, "alignment": 6, "contrast": 4, "discoverability": 4, "polish": 5 }, "S1-mobile": { "hierarchy": 4, "density": 4, "alignment": 7, "contrast": 5, "discoverability": 4, "polish": 5 } }, "worst": { "J1-desktop": "The action bar does not communicate readiness or priority: Print and Play look equally important and apparently available even though no category is selected.", "J1-mobile": "The initial state does not establish a dominant next action: category choices, 'Surprise me', and the premature Print/Play controls compete in nearly identical neutral styling.", "J2-desktop": "The quiz summary does not explain what Play will produce: “1304 questions match” describes an available pool, not the length or configuration of the quiz. A first-time user can find Play but cannot confidently predict its result.", "J2-mobile": "The primary task is buried beneath the category picker: Play appears around y=1135, after ten rows of options, so the first screen emphasizes configuration rather than starting a quiz.", "J3-desktop": "The bottom action bar overlays the quiz document, visibly obscuring the second question’s editing toolbar and answer area.", "J3-mobile": "The floating bottom action panel obscures the quiz it controls: at approximately y=759–884, it covers the first question’s answer area and much of the already-small content viewport.", "J4-desktop": "The fixed bottom action bar obscures the quiz editor: at this viewport, it covers the second question’s editing toolbar and answer area, interrupting the primary task.", "J4-mobile": "The bottom action panel covers the quiz preview, obscuring question content and making the core editing surface harder to use.", "J5-desktop": "The page never explains how to answer: the pale answer rectangles have no selection markers, and there is no instruction to click, circle, or check an option. A first-time user must infer whether this is an interactive quiz or a printable worksheet.", "J5-mobile": "The quiz is rendered at a miniature document scale: question and answer text is approximately 6–8 px tall, making the core content difficult to read at the supplied 390 px width.", "Q1-desktop": "The question-library search has no visible response to entered text: the focused “Add question” field contains “a”, but shows no results, loading state, minimum-character requirement, or empty-state feedback. A first-time user cannot tell how to complete the central add-question task.", "Q1-mobile": "The sticky save bar covers the question list, obscuring question 4 and nearby controls. A primary editing surface should never be hidden by its own save controls.", "L1-desktop": "The quiz list shows status without an obvious next step: rows simultaneously say “Draft”, “Review”, and “Prepared”, but expose no explicit review or readiness action. A first-time user must infer both what these states mean and which title to click.", "L1-mobile": "The mobile layout gives excessive space to administrative chrome while shrinking the actual quiz content: the first quiz starts around y=397, and titles are rendered at roughly 9–10 px.", "D1-desktop": "The dashboard gives the strongest visual emphasis to starting a quiz, even though setup shows quiz creation as done and placing a quiz block as the remaining task. A first-time user must discover the actual next step roughly 650 pixels down the page.", "D1-mobile": "The page offers several competing ways to start a quiz without establishing one clear next step: “Add New Quiz,” “Create a quiz,” “Import questions,” and a second creation action inside the setup checklist.", "S1-desktop": "The page lacks a clear primary workflow: configuration, player behavior, backups, imports, and diagnostics compete on one long canvas, while the strongest filled action—“Create draft”—appears near the bottom. A first-time user must scan almost the entire page to distinguish settings from content creation.", "S1-mobile": "The page mixes quiz configuration, feedback behavior, data management, and draft creation into one roughly 1,400-pixel-long settings flow, without a clear primary task or visible section navigation. A first-time user cannot confidently tell whether to configure the quiz, import questions, or create a draft next." }, "first5": { "J1-desktop": "This screen is for creating a quiz to play or print. The user should first choose a category, or use “Surprise me” to let the app choose. Yes—the subtitle “Choose a category, then play or print. Everything else is optional.”, the “Choose a category” heading, and “Choose a category to start” in the bottom bar explicitly tell them that.\n\nVisible elements competing with that first action:\n- **“Print” and “Play” buttons**—downstream actions already visible in the prominent, shadowed bottom bar.\n- **“Customize” accordion and chevron**—an optional detour before choosing a category.\n- **“YOUR QUIZ” summary bar and “Nothing selected yet” status**—additional attention targets, although their text supports the first step.\n- **Header branding/navigation:** “QuizWizz” and “Quiz Wizard”.\n- **Footer links:** “QuizWizz”, “Create a quiz”, “Mein QuizWizz”, “Privacy”, “Terms”, and “Operator & Contact”.\n- **Within the first action itself, competing choices:** “Surprise me” plus 20 similarly styled category buttons—Animals, Art, Celebrities, Board Games, Books, Cartoon & Animations, Comics, Film, Anime & Manga, Music, Television, Video Games, General Knowledge, Geography, History, Mythology, Nature, Computers, Sports, and Vehicles—with an icon on each; these support category selection rather than diverting away from it, but divide attention among many options.", "J1-mobile": "This screen is for creating a quiz to play or print, and the user should first choose a category. Yes: “Choose a category, then play or print. Everything else is optional.”, “Choose a category”, and “Choose a category to start” explicitly tell them that. The category grid supports that action, but its many equally weighted choices—and the surrounding controls—compete for attention rather than highlighting one obvious starting point.\n\n**Visible competing elements:**\n- **Header:** “QuizWizz” branding and hamburger menu.\n- **Intro/status:** decorative icon beside “Create a quiz” and “Nothing selected yet”.\n- **Alternative entry point:** “Surprise me” with a wand icon.\n- **Category choices competing with one another**, each with an icon: Animals; Art; Celebrities; Board Games; Books; Cartoon & Animations; Comics; Film; Anime & Manga; Music; Television; Video Games; General Knowledge; Geography; History; Mythology; Nature; Computers; Sports; Vehicles.\n- **Optional settings:** “Customize” row with a downward chevron.\n- **Output panel:** “YOUR QUIZ”, plus “Print” and “Play” buttons with icons; their muted appearance does not conclusively establish whether they are disabled.\n- **Footer links:** “QuizWizz”, “Create a quiz”, “Mein QuizWizz”, “Privacy”, “Terms”, and “Operator & Contact”.", "J2-desktop": "This screen is for creating a quiz to play or print. The intended first action is to choose a category, although “Surprise me” is already selected. Yes: “Choose a category, then play or print. Everything else is optional.” and the “Choose a category” heading explicitly tell users what to do first.\n\n**Visible elements competing with that first action:**\n- **“Play”** — a high-contrast black button offering an immediate next step.\n- **“Print”** — a second output action beside Play.\n- **“Customize”** and its disclosure chevron — an optional configuration path.\n- **“YOUR QUIZ” / “1304 questions match”** — a prominent summary panel drawing attention toward the output actions.\n- **“1 topic selected”** and the checked, heavily outlined **“Surprise me”** — signals that the first step is already complete.\n- **Twenty category tiles and their icons** — relevant to the first action, but competing with one another for attention: Animals, Art, Celebrities, Board Games, Books, Cartoon & Animations, Comics, Film, Anime & Manga, Music, Television, Video Games, General Knowledge, Geography, History, Mythology, Nature, Computers, Sports, Vehicles.\n- **“QuizWizz”** at top left and **“Quiz Wizard”** at top right — peripheral identity labels.\n- **The decorative icon beside “Create a quiz”** — a small non-action visual draw.\n- **Footer links:** QuizWizz, Create a quiz, Mein QuizWizz, Privacy, Terms, Operator & Contact.", "J2-mobile": "This screen is for creating a quiz to play or print. The user should first choose a category, although “Surprise me” is already selected. Yes—the instruction “Choose a category, then play or print. Everything else is optional.” and the heading “Choose a category” explicitly say what to do first.\n\nVisible elements competing with that category-choice action:\n- **QuizWizz** branding and hamburger menu.\n- **“Create a quiz”** title and its icon.\n- **“1 topic selected”** status, which may imply the first step is already complete.\n- **“Customize”** expandable section and chevron.\n- **“YOUR QUIZ”** summary card and **“1304 questions match”** status.\n- **“Print”** button with printer icon.\n- **“Play”** button with play icon—the strongest contrasting button.\n- Footer links: **QuizWizz**, **Create a quiz**, **Mein QuizWizz**, **Privacy**, **Terms**, and **Operator & Contact**.\n\nThe category tiles themselves support the first action rather than compete with it.", "J3-desktop": "This is a quiz-editing and print-preparation screen, showing a printable multiple-choice worksheet. The apparent primary action is **Print**, assuming the quiz is ready; the screen does not explicitly establish a different first step. The solid black **Print** button signals that priority visually, but there is no instruction telling the user to start there.\n\nVisible elements competing with that action:\n- **QuizWizz** branding and **Quiz Wizard** header.\n- The unlabeled book/page icon, **7 questions** count, and **+** button.\n- **Quiz kind** dropdown, showing **Multiple**.\n- **Theme** selector: **Site theme (prints light)**, **Dark**, and **Cyber**, with swatches and a selection checkmark.\n- Checked **Answer sheet preview** and **Header question count** controls.\n- Unchecked **Estimated page breaks (preview only)** control.\n- **3 pages** badge.\n- Instruction: “Original answer choices can be edited but not removed. You can add and remove your own extra choices.”\n- Large worksheet preview, including its title, question count, branding, purple divider, and Name/Date/Class lines.\n- Question text, question numbers, answer choices, and partially visible content below.\n- Question drag handles.\n- Repeated question toolbars: plus, up arrow, down arrow, paired-arrow icon, overlapping-squares icon, and trash icon.\n- Sticky footer status: **YOUR QUIZ** and **7 questions · No local changes**.\n- **Cancel** button.\n- **Preview PDF** button—the strongest alternative next action.\n- Right-hand scrollbar, indicating more content to inspect.", "J3-mobile": "This is a quiz-editing and print-preparation screen for a seven-question quiz. The user should first preview the PDF to check the layout before printing. “Preview PDF” offers that action, but nothing explicitly says to do it first, and the darker “Print” button draws more attention.\n\nVisible elements competing with that first action:\n- **QuizWizz** branding and hamburger menu.\n- Question-count controls: an icon button, **“7 questions,”** and **+**.\n- **“Quiz kind”** selector showing **“Multiple”** and a dropdown arrow.\n- **“Theme”** options: **“Site theme (prints light)”** with a selected checkmark, **“Dark,”** and **“Cyber,”** each with a Q icon.\n- Checked, greyed-out **“Answer sheet preview.”**\n- Checked **“Header question count.”**\n- Unchecked **“Estimated page breaks (preview only).”**\n- **“3 pages”** indicator.\n- Editing guidance: **“Original answer choices can be edited but not removed. You can add and remove your own extra choices.”**\n- Quiz title **“Surprise quiz · Sep 14.”**\n- **“7 questions · QuizWizz”** subtitle and purple divider.\n- **Name**, **Date**, and **Class** fields and their lines.\n- First question’s drag handle, number **1**, and text: **“Who is the armored titan in \"Attack on Titan\"?”**\n- A partially obscured answer row at the bottom.\n- Sticky footer labels **“YOUR QUIZ”** and **“7 questions · No local changes.”**\n- **“Cancel”** button with an X icon.\n- High-contrast **“Print”** button with a printer icon.\n- Right-edge scrollbar indicating more content below.", "J4-desktop": "This screen is for editing and printing a seven-question quiz. The apparent primary action is **Print**, assuming the quiz is ready. Its solid black button gives it visual priority, but nothing explicitly says to do that first, and the heavily outlined **Preview PDF** button competes for attention.\n\nVisible competitors:\n- **Preview PDF** and **Cancel** in the fixed bottom bar.\n- **YOUR QUIZ** and **7 questions · No local changes** beside those buttons.\n- The top question controls: an unlabeled document-like icon, **7 questions**, and a **+** button.\n- The **Quiz kind** dropdown showing **Multiple**.\n- The **Theme** selector: **Site theme (prints light)**, **Dark**, and **Cyber**, with thumbnails and a selected-state checkmark.\n- Checked **Answer sheet preview** (greyed out) and **Header question count**.\n- Unchecked **Estimated page breaks (preview only)**.\n- The **3 pages** badge.\n- The instruction: “Original answer choices can be edited but not removed. You can add and remove your own extra choices.”\n- The large quiz preview, including **Surprise quiz · Sep 14**, **7 questions · QuizWizz**, a purple divider, and **Name**, **Date**, and **Class** blanks.\n- The visible numbered questions about Marvel Comics and Toad, plus their drag handles.\n- Both visible question toolbars: plus, up arrow, down arrow, paired arrows, overlapping squares, and trash icons; some appear faded.\n- The first question’s four answer boxes, with letter badges, purple numbers, and year choices; additional answer content is partly visible at the bottom.\n- **QuizWizz** branding and the **Quiz Wizard** header label.\n- The right-side scrollbar, indicating more content below.", "J4-mobile": "This screen is for editing and formatting a quiz before previewing or printing it. The user should first review and edit the quiz questions, though that priority is inferred rather than clearly stated. Nothing explicitly directs them to start there: the editing note is muted, while the settings panel and sticky preview/print bar dominate.\n\nVisible elements competing with reviewing/editing the questions:\n- **QuizWizz** branding and hamburger menu.\n- Question-count controls: an icon button, **“7 questions”**, and **+**.\n- **“Quiz kind”** dropdown showing **“Multiple”**.\n- Theme controls: **“Site theme (prints light)”**, **“Dark”**, and **“Cyber”**, with icons and a selection checkmark.\n- Checked, greyed **“Answer sheet preview”** control.\n- Checked **“Header question count”** control.\n- Unchecked **“Estimated page breaks (preview only)”** control.\n- **“3 pages”** indicator.\n- Note: **“Original answer choices can be edited but not removed. You can add and remove your own extra choices.”**\n- Large **“Surprise quiz · Sep 14”** title.\n- **“7 questions · QuizWizz”** subtitle and purple divider.\n- **“Name”**, **“Date”**, and **“Class”** fields.\n- Sticky **“YOUR QUIZ”** panel showing **“7 questions · No local changes”**, which also obscures part of the quiz.\n- **“Cancel”**, **“Preview PDF”**, and **“Print”** buttons with icons.\n- Right-side scrollbar.", "J5-desktop": "This appears to be a printable multiple-choice quiz worksheet, rather than an interactive app screen. The user should first write their name on the “Name” line before answering the questions. The line’s position above the questions hints at that order, but no explicit instruction or visual emphasis says “start here,” and the title and bold questions attract more attention.\n\nVisible elements competing with that first action:\n- Colorful wizard-hat illustration.\n- Large “Surprise quiz · Sep 14” title.\n- “7 questions · QuizWizz” subtitle.\n- “Date” and “Class” labels and blank lines.\n- Horizontal divider beneath the identification fields.\n- Six bold question headings, each with a purple vertical accent:\n - “When was Marvel Comics founded?”\n - “In the Super Mario Bros. Movie (2023), who plays Toad?”\n - “Which student in Yandere Simulator is known for asking irritating and stupid questions?”\n - “Which group performs the song \"Crash into Me\"?”\n - “Which area of Eastern Europe is famous for its association with vampires?”\n - “What battle was the longest in World War I, lasting approximately 303 days?”\n- All 24 shaded, bordered answer boxes:\n - “1939”, “1932”, “1936”, “1951”\n - “Keegan-Michael Key”, “Seth Rogan”, “Jack Black”, “Charlie Day”\n - “Kokona Hruka”, “Midori Gurin”, “Oka Ruto”, “Pipi Osu”\n - “Destiny's Child”, “Phish”, “Dave Matthews Band”, “The Grateful Dead”\n - “Silesia”, “Slovakia”, “Macedonia”, “Transylvania”\n - “Battle of Stalingrad”, “Battle of Amiens”, “Battle of Passchendaele”, “Battle of Verdun”\n- Footer rule and “1 / 3 · Balli Dalli Quiz” footer.", "J5-mobile": "This is a worksheet-style multiple-choice quiz, titled “Surprise quiz · Sep 14”. The user should first fill in their name, though that priority is inferred rather than explicitly instructed. Only the small “Name” label and its line suggest this; there is no prominent instruction or highlighted starting point.\n\nVisible elements competing with that first action:\n- Colorful wizard-hat graphic.\n- Large “Surprise quiz · Sep 14” title.\n- “7 questions · QuizWiz” subtitle.\n- “Date” and “Class” fields.\n- Six bold question prompts, each with a purple vertical accent:\n - Who is the armored titan in \"Attack On Titan\"?\n - What was the official German currency until 2002?\n - What is widely considered to be the oldest civilization known to mankind?\n - What airline was the owner of the plane that crashed off the coast of Nova Scotia in 1998?\n - How many letters are in the English alphabet?\n - Which studio created Mickey Mouse?\n- Twenty-four shaded answer boxes:\n - Armin Arlelt; Mikasa Ackermann; Reiner Braun; Eren Jaeger.\n - Reichstoken; Pound sterling; Mark; Frank.\n - Sumeria; Babylon; Assyria; Phoenicia.\n - TWA; Air France; Swiss Air; British Airways.\n - 5; 17; 30; 26.\n - Disney; Warner Bros.; Universal Pictures; Paramount Pictures.\n- Footer divider and small page-count/quiz-branding text.", "Q1-desktop": "This screen is for editing an existing, published quiz—its questions, subjects, and answer settings. The most likely first action is to search the question library in “Add question” and select a result, although the screen does not establish a mandatory first step. Yes: the field is focused, contains “a,” and has the instruction “Type to search the question library; choose a result to add to this quiz,” but that guidance sits below numerous competing controls.\n\n**Visible elements competing with that action, grouped:**\n\n- **Top admin bar:** WordPress icon, QuizWizz site menu, updates indicator “2,” search / “Ctrl+K,” comments indicator “0,” “+ New,” “View Quiz,” account greeting and avatar.\n- **Summary cards:** “Quizzes” with “109” and “96 draft”; “Usable questions” with “9,073” and “0 need review”; “Subjects” with “483,” “449 short,” and “6 empty”; “Finished attempts” with “0,” “0 sheets printed,” and “2 quizzes”; “Ready languages” with “1 of 1” and “23 of 483 pools ready.”\n- **Left navigation:** Dashboard, Posts, Media, Pages, Comments, highlighted Qwizz section, its Dashboard / Quizzes / Questions / Subjects / Settings submenu, Appearance, Plugins, Users, Tools, Settings, and Collapse Menu.\n- **Editor header:** “Edit Quiz,” “Add New Quiz,” “Screen Options,” the “Geografie-Weltreise” title field, permalink link, and “Change Permalink Structure.”\n- **Question panel:** “Quiz questions” heading and panel-position/collapse controls; drag-and-keyboard reordering instructions; all ten numbered question texts; ten drag handles, ten edit pencils, twenty up/down arrows, and ten red delete icons.\n- **Publish panel:** heading and panel-position/collapse controls, “Preview Changes,” “Status: Published” and Edit, “Visibility: Public” and Edit, publication date/time and Edit, “Move to Trash,” and the prominent blue “Update” button.\n- **Subjects panel:** heading and panel-position/collapse controls, “All Subjects” and “Most Used” tabs, checked Geography, unchecked Abolition and Emancipation, Academy Award Design, Accessibility, Accessible Images, Achaemenid Persia, Acid-marinated Seafood Safety, and Acronyms; a further partially clipped checkbox row with an unreadable label; “+ Add New Subject.”\n- **Answer/output settings:** “Answers” heading, “Answer review for players” toggle, “Site policy forces the answer key,” “Answer sheet in PDF” toggle, “Per-quiz setting wins; site Forced only sets the default,” and “Download HTML.”\n- **Footer:** “Thank you for creating with WordPress.” link and “Version 7.1.”", "Q1-mobile": "This screen is for editing the “Geografie-Weltreise” quiz, including its questions, answer settings, and publication details. The user should first finish searching in “Add question” and select a result to add it to the quiz. The focused field and helper text—“Type to search the question library; choose a result to add it to this quiz.”—explain that action, but its low placement and the many surrounding controls weaken the cue.\n\nVisible elements competing with that action:\n- **Top navigation:** menu icon, site icon, search icon, plus icon, and profile icon.\n- **Dashboard counters:** “Quizzes,” “109,” “96 draft,” “Usable questions,” “9,073,” and “0 need review.”\n- **“Screen Options”** dropdown.\n- **Page heading and creation control:** “Edit Quiz” and “Add New Quiz.”\n- **Quiz title field:** “Geografie-Weltreise.”\n- **Permalink area:** linked URL and “Change Permalink Structure.”\n- **“Quiz questions” panel:** header controls and drag-to-reorder instructions.\n- **Existing question list:** question numbers, question text, drag handles, pencil icons, up/down arrows, and red trash icons; some content is obscured by the overlaid action bar.\n- **Prominent action bar:** “Move to Trash” and blue “Update” button.\n- **“Answers” settings:** “Answer review for players” and “Answer sheet in PDF” toggles, plus their explanatory text.\n- **“Download HTML”** button.\n- **“Publish” panel:** header controls, “Preview Changes,” “Status: Published,” “Visibility: Public,” publication date/time, and associated “Edit” links.\n- **“Subjects” panel:** header controls, “All Subjects” and “Most Used” tabs, checked “Geography,” unchecked “Abolition and Emancipation,” “Academy Award Design,” “Accessibility,” and “Accessible Images,” plus “+ Add New Subject.”", "L1-desktop": "This is a WordPress quiz-management screen for browsing, creating, and managing quizzes and their readiness. My recommended first action is to open an existing draft for review, rather than create another, because 96 of 109 quizzes are drafts and every visible row is marked “Review.” Those labels hint at the work needed, but nothing explicitly says “Start here,” identifies which draft matters most, or makes that next step prominent.\n\n**Visible elements competing with that action:**\n- **Summary cards:** Quizzes (109; 96 draft), Usable questions (9,073; 0 need review), Subjects (483; 449 short; 6 empty), Finished attempts (0; 0 sheets printed; 2 quizzes), Ready languages (1 of 1; 23 of 483 pools ready).\n- **Creation and view controls:** “Add New Quiz,” “Screen Options,” and “All (109) | Published (13) | Drafts (96).”\n- **Search:** empty search field and “Search Quizzes.”\n- **Filtering:** “All dates,” “All languages,” “All subjects,” “All sources,” and “Filter.”\n- **Bulk operations:** top and bottom “Bulk actions” menus and “Apply” buttons; header/footer select-all checkboxes and every row checkbox.\n- **Pagination:** top and bottom “109 items,” page indicators, and first/previous/next/last-page controls.\n- **Twenty equally presented quiz links:** “Auto Draft,” “QW Wave 8 zero-question control,” “Scale Wave 2026-08 harvest 1,” and “Legacy OpenTDB EN 042” through “Legacy OpenTDB EN 026”; none is singled out as the starting point.\n- **Table headings, repeated at the bottom:** “Title,” “Details,” “Questions,” “Status / readiness,” “Source,” and “Updated,” with sorting arrows.\n- **Repeated row metadata:** “Draft,” language flags, subject names or “Not set,” extra-subject count badges, difficulty labels, “Practice,” question counts, yellow-dot “Review” labels, green “Prepared” labels, and “Last Modified” dates/times.\n- **Main sidebar:** Dashboard, Posts, Media, Pages, Comments, Qwizz, Appearance, Plugins, Users, Tools, Settings, and Collapse Menu.\n- **Qwizz submenu:** Dashboard, Quizzes, Questions, Subjects, and Settings.\n- **Top admin bar:** WordPress logo, site icon and “QuizWizz,” updates indicator (2), search/“Ctrl+K,” comments indicator (0), “+ New,” and user greeting/avatar.\n- **Footer:** “Thank you for creating with WordPress.” link and “Version 7.1.”", "L1-mobile": "This is a quiz-management screen for browsing, searching, and managing quizzes. Assuming the goal is to create a quiz, the first action should be **“Add New Quiz.”** That button names the action, but nothing explicitly tells the user to start there or makes it a clear primary step.\n\nVisible elements competing with that action:\n- Top navigation: hamburger menu, site icon, search icon, plus icon, and profile icon.\n- Dashboard cards: **“Quizzes,” “109,” “96 draft,” “Usable questions,” “9,073,”** and **“0 need review.”**\n- **“Screen Options”** dropdown.\n- **“Quizzes”** page heading.\n- Status filters: **“All (109),” “Published (13),” “Drafts (96).”**\n- Empty search field and **“Search Quizzes”** button.\n- Upper pagination: first, previous, page **“1,”** next, and last controls, plus **“of 6.”**\n- Table select-all checkbox and sortable **“Title”** header.\n- Twenty visible quiz rows, each with a checkbox, linked title, **“Draft”** status, and dropdown arrow:\n - **“Auto Draft”**\n - **“QW Wave 8 zero-question control”**\n - **“Scale Wave 2026-08 harvest 1”**\n - **“Legacy OpenTDB EN 042”**\n - **“Legacy OpenTDB EN 041”**\n - **“Legacy OpenTDB EN 040”**\n - **“Legacy OpenTDB EN 039”**\n - **“Legacy OpenTDB EN 038”**\n - **“Legacy OpenTDB EN 037”**\n - **“Legacy OpenTDB EN 036”**\n - **“Legacy OpenTDB EN 035”**\n - **“Legacy OpenTDB EN 034”**\n - **“Legacy OpenTDB EN 033”**\n - **“Legacy OpenTDB EN 032”**\n - **“Legacy OpenTDB EN 031”**\n - **“Legacy OpenTDB EN 030”**\n - **“Legacy OpenTDB EN 029”**\n - **“Legacy OpenTDB EN 028”**\n - **“Legacy OpenTDB EN 027”**\n - **“Legacy OpenTDB EN 026”**\n- Repeated select-all checkbox and sortable **“Title”** footer.\n- **“Bulk actions”** dropdown and **“Apply”** button.\n- **“109 items”** count.\n- Lower pagination: first, previous, next, and last controls, plus **“1 of 6.”**", "D1-desktop": "This is the QuizWizz dashboard in WordPress, for creating, managing, and publishing quizzes on a website. Given that “Create or import questions” and “Assemble a quiz” are marked “Done,” the user should first click “Add a page or post” to place a Qwizz block and display a quiz on their site. Yes—the “Place a Qwizz block” step says “To do” and explains this, but it is buried below the much louder “Make your next quiz,” “Create a quiz,” and “Import questions” prompts.\n\n**Visible elements competing with that action:**\n\n- **Page header:** “Add New Quiz”; “Help.”\n- **Welcome panel:** illustration, “WELCOME TO QUIZWIZZ,” “Make your next quiz.”, explanatory text, large “Create a quiz” and “Import questions” buttons, “Open settings,” and “Dismiss Welcome.”\n- **Shortcode toolbox:** Individual quiz, Quiz library, Subject explorer, Quiz builder, My quizzes, and My statistics—each with explanatory text, a shortcode field, and a copy control.\n- **Statistics strip:** Quizzes, Usable questions, Subjects, Finished attempts, and Ready languages, including their counts and linked status details.\n- **Other setup content:** completed “Create or import questions” and “Assemble a quiz” steps; “Add question,” “All questions,” “Starter library ready,” “View starter quizzes,” “Create quiz,” and “All quizzes.”\n- **Setup escape routes:** “Mark complete — I already placed a Qwizz block” and “Dismiss setup steps.”\n- **Attention section:** draft-quiz warning and “Open drafts”; two subject-readiness warnings, each with “Open subjects.”\n- **Recent quizzes:** five quiz titles, draft/published and question/language/update metadata, five “Edit” links, five “Play” links, and “All quizzes.”\n- **Subjects section:** eight subject entries, their icons and usable-question counts, and “All subjects.”\n- **Language pools:** “English (en),” “4,715 usable questions,” and “Ready.”\n- **Next content ideas:** explanatory text, four subject-specific recommendations, and four “Add questions” links.\n- **Lower-page disclosures:** “Shortcodes,” “Tools and system state,” and “Get started” / “Setting up QuizWizz.”\n- **WordPress sidebar:** Dashboard, Posts, Media, Pages, Comments, Qwizz, its Dashboard/Quizzes/Questions/Subjects/Settings submenu, Appearance, Plugins, Users, Tools, Settings, and Collapse Menu.\n- **WordPress admin bar:** WordPress logo, site link, updates indicator, search/“Ctrl+K,” comments indicator, “+ New,” and account menu.\n- **Footer:** WordPress attribution link.", "D1-mobile": "This is the QuizWizz administration dashboard for creating, managing, and publishing quizzes. The user should first select **Create a quiz** to start the main task this screen promotes. Yes—the headline “Make your next quiz.” and prominent blue button say that, but the competing import button and a checklist that marks quiz assembly “Done” while placement is “To do” muddy the priority.\n\n**Visible elements competing with that action:**\n- **Top toolbar:** menu, site icon, search, plus icon, profile icon, and Help dropdown.\n- **Page header:** “Add New Quiz.”\n- **Welcome panel:** “Dismiss Welcome,” “Import questions” in an equally prominent blue button, and “Open settings.”\n- **Shortcode toolbox:** Individual quiz, Quiz library, Subject explorer, Quiz builder, My quizzes, and My statistics—each with explanatory text, a shortcode field, and a copy control.\n- **Statistics cards:** Quizzes count and draft count; Usable questions count and review count.\n- **Getting started checklist:**\n - “Create or import questions,” marked Done.\n - “Add question” and “All questions.”\n - “Starter library ready” status.\n - Full-width blue “View starter quizzes” button.\n - “Assemble a quiz,” marked Done.\n - Another “Create quiz” button and “All quizzes.”\n - “Place a Qwizz block,” marked To do.\n - “Add to page or post.”\n - “Mark complete — I already placed a Qwizz block.”\n - “Dismiss setup steps.”\n- **Attention section:** draft-quiz notice with “Open drafts”; two subject/question availability notices, each with “Open subjects.”\n- **Recent quizzes:** five quiz entries, their publication/language/update metadata, individual Edit and Play links, and “All quizzes.”\n- **Subjects:** eight subject entries with icons and usable-question counts, plus “All subjects.”\n- **Language pools:** “English (en),” a usable-question count link, and “Ready” status.\n- **Next content ideas:** five subject-specific question suggestions, each with an “Add questions” link.\n- **Bottom expandable sections:** “Shortcodes,” “Tools and system,” and “Setting up QuizWizz,” with a separate “Get started” heading.", "S1-desktop": "This is the QuizWizz settings screen in WordPress, used to set site-wide defaults for quiz sources, languages, size, player behavior, and data management. The user should first choose which quiz sources and visitor experiences to enable under “Available experiences”—the most logical starting point, not an explicitly required step. Nothing clearly says “start here”: the section’s instruction offers a hint, but there is no prominent first-action cue, and “All changes saved” only indicates save status.\n\n**Visible elements competing with that first action:**\n- **WordPress top bar:** WordPress icon, site name, update indicator, CritiK item, comments indicator, “New,” and account menu.\n- **Left navigation:** Dashboard, Posts, Media, Pages, Comments, QuizWizz and its Dashboard / Quizzes / Questions / Subjects / Settings submenu, Appearance, Plugins, Users, Tools, Settings, and Collapse Menu.\n- **Top summary cards:** Quizzes, Usable questions, Subjects, Finished attempts, and Ready languages, with counts and secondary status links.\n- **Page-level controls:** Screen Options; General, Player, Data, and Advanced tabs; search icon; eye icon; “All changes saved” status.\n- **Other general settings:** Default questions stepper, content-language choices (English, Deutsch, Français, Español), and interface-language dropdown.\n- **Player settings:** Immediate feedback toggle, Start quizzes immediately toggle, “Play quizzes on” dropdown, “Advance automatically” and “Wait for a button” options, feedback-delay field, and Play sound toggle.\n- **Data-management controls:** Create export, Import JSON, Download, and Cancel job.\n- **Question-import controls:** JSON drop zone, Choose file, disabled Import draft quiz button, Number of questions field, Question category / Question difficulty / Question language dropdowns, and the prominent blue Create draft button.\n- **Advanced controls:** Support diagnostics download and question-mark icon buttons.\n- **Additional visual competition:** Section icons, explanatory text, import-status notices, large section headings, and the WordPress footer/version text.", "S1-mobile": "This is the QuizWizz settings screen for configuring quiz sources, presentation, playback, and importing quiz content. The first thing the user should do is choose where quizzes will come from—“Generated” or “Quiz library”—although that is a recommended starting point, not an explicitly stated requirement. Nothing clearly tells them to start there: “QUIZ SOURCES” labels the options, but there is no prominent first-step instruction, and both appear enabled.\n\nVisible elements competing with that choice:\n- **Top navigation:** hamburger menu, app icon, search, plus icon, profile icon.\n- **Dashboard counters:** “Quizzes,” “109,” “96 draft,” “Usable questions,” “9,073,” “0 need review.”\n- **Page controls:** “Screen Options,” “QuizWizz Settings,” warning icon, “General” tab, “Player” tab, search button, eye-icon button, “Saved” indicator.\n- **Introductory content:** “General defaults,” “Available experiences,” and their explanatory text.\n- **Visitor outcomes:** “Play” and “Printable PDF” cards, each with an icon, description, and enabled indicator.\n- **Quiz size:** “Default questions,” the value “7,” and decrease/increase arrows.\n- **Content languages:** English, Deutsch, Français, and Español buttons with flags and explanatory text.\n- **Interface settings:** “QuizWizz interface,” explanatory text, “Interface language,” and “Automatic (WordPress locale)” dropdown.\n- **Online Player:** section heading, play icon, and explanatory text.\n- **Feedback settings:** “Immediate feedback” toggle, “Start quizzes immediately” toggle, and “Play quizzes on” dropdown showing “Quiz Wizard.”\n- **After-answer behavior:** “Advance automatically” and “Wait for a button” cards with icons and descriptions.\n- **Timing and sound:** “Feedback delay (milliseconds),” “2500” input, explanatory text, and “Play sound” toggle.\n- **Data management:** “Data & Lifecycle” heading and description.\n- **Portability tools:** “Full portability,” explanatory text, “Create export,” “Import JSON,” “Download,” and “Cancel job.”\n- **Import workflow:** “Question imports,” instructions, upload icon, file-drop area, file requirements, and “Choose file.”\n- **Draft creation:** publication reassurance, “Import draft quiz,” instructions, question-count input showing “5,” category dropdown showing “Any category,” difficulty dropdown showing “Any difficulty,” language dropdown showing “English,” private-draft reassurance, and the prominent blue “Create draft” button.\n- **Advanced tools:** “Advanced,” explanatory text, “Support diagnostics,” diagnostic description, download-icon button, and eye-icon button." }, "findings": [ { "id": "F-J1-desktop-1", "surface": "J1-desktop", "rank": 1, "severity": "P2", "element": "Bottom action bar, approximately x318–963, y850–917", "problem": "Print and Play have nearly identical outlined styling and roughly 81×48 px footprints. Neither is visually primary. The instruction 'Choose a category to start' indicates a prerequisite, but the buttons do not clearly communicate whether that prerequisite blocks them. A first-time user can identify category selection as the next step, but cannot confidently interpret action readiness.", "fix": "Make Play the filled primary action and Print secondary. Before selection, give both an unmistakable unavailable state with a nearby prerequisite explanation; enable them visibly once a category is chosen." }, { "id": "F-J1-desktop-2", "surface": "J1-desktop", "rank": 2, "severity": "P2", "element": "Category selector, approximately x318–963, y382–758", "problem": "Twenty category tiles compete at equal visual weight, with no visible indication of whether selection is single-choice or multiple-choice. The full-width 'Surprise me' tile uses a dashed outline unlike every other tile, making its role ambiguous: random selection, a separate mode, or a special action.", "fix": "State 'Choose one category' and use a clear single-select pattern with a persistent selected indicator. Label the random option 'Choose a random category' and style it as an explicit secondary action." }, { "id": "F-J1-desktop-3", "surface": "J1-desktop", "rank": 3, "severity": "P2", "element": "Collapsed Customize row, approximately y784–838", "problem": "The generic 'Customize' label and chevron reveal nothing about which settings are hidden. The introduction says everything else is optional, but users cannot evaluate whether opening this section matters without exploring it.", "fix": "Add a concise preview of the actual settings or their current values alongside the label. Preserve the collapsed state while making its contents predictable." }, { "id": "F-J1-desktop-4", "surface": "J1-desktop", "rank": 4, "severity": "P2", "element": "Selection guidance above the grid and in the action bar", "problem": "'Nothing selected yet', 'Choose a category', and 'Choose a category to start' repeat the same empty-state message across approximately 560 vertical pixels. The introduction repeats that instruction again. This adds reading without explaining selection behavior or what happens after selection.", "fix": "Keep one instruction above the selector. Remove 'Nothing selected yet' and reserve the action-bar summary for useful state after selection, such as the chosen category and actual quiz configuration." }, { "id": "F-J1-desktop-5", "surface": "J1-desktop", "rank": 5, "severity": "P3", "element": "Overall vertical layout", "problem": "The header text ends around y44, while the main heading begins around y242: nearly 200 px of empty vertical space before the task. Another roughly 190 px separates the action bar from the footer. The category grid itself is reasonably compact; excessive outer spacing makes the overall page inefficient.", "fix": "Start the main content approximately 64–96 px below the header and reduce the post-form gap. Use intentional page padding rather than distributing large blank bands around a compact form." }, { "id": "F-J1-desktop-6", "surface": "J1-desktop", "rank": 6, "severity": "P3", "element": "Footer, approximately y1107–1155", "problem": "The footer uses roughly 21 px underlined text, substantially larger than the 13–14 px category and action labels. 'Operator & Contact' wraps across two lines, leaving '& Contact' isolated. Repeating 'QuizWizz' and 'Create a quiz' adds navigation noise to an already self-explanatory page. Content dominates the central area, but this oversized chrome competes unnecessarily at the bottom.", "fix": "Reduce footer text to 12–14 px, use muted styling with sufficient contrast, and keep each link intact when wrapping. Remove redundant links if they do not serve distinct navigation needs." }, { "id": "F-J1-desktop-7", "surface": "J1-desktop", "rank": 7, "severity": "P3", "element": "Heading group, approximately x325–760, y242–292", "problem": "The heading and subtitle begin at x358, while the status, section label, grid, and action bar begin around x318. The small heading icon occupies the gutter but sits noticeably low relative to the title, creating two competing left edges and an awkward baseline relationship.", "fix": "Align the title and subtitle with the form's x318 edge, or use a deliberate icon column consistently. Vertically center the icon against the title rather than letting it hang near the title's lower edge." }, { "id": "F-J1-desktop-8", "surface": "J1-desktop", "rank": 8, "severity": "P3", "element": "Category tiles and action-bar surface", "problem": "Near-white fills, pale borders, and medium-gray icons make the selector visually subdued, while the action bar's broad shadow gives the container more emphasis than its buttons. Text appears readable in this screenshot, but clickable boundaries are subtle; exact contrast compliance cannot be established from visual inspection alone.", "fix": "Increase interactive boundary contrast, strengthen selected and focus states, and reduce the action-bar shadow. Put the strongest contrast on the primary action rather than its surrounding container." }, { "id": "F-J1-desktop-9", "surface": "J1-desktop", "rank": 9, "severity": "P3", "element": "Category grid labels and icons", "problem": "The approximately 155×56 px tiles have consistent geometry and 8 px gutters, but several labels wrap while neighboring labels remain single-line, interrupting scan rhythm. Reused book and television-like icons provide limited differentiation between related categories.", "fix": "Retain the consistent grid, but review label lengths and text-column width to reduce awkward wrapping. Use distinct icons where they meaningfully aid recognition; otherwise simplify the icon system rather than adding redundant visual detail." }, { "id": "F-J1-mobile-1", "surface": "J1-mobile", "rank": 1, "severity": "P2", "element": "Category selection and YOUR QUIZ action panel", "problem": "The page says 'Choose a category to start', but Print and Play already look like available outlined buttons. Their gray appearance does not clearly communicate whether they are disabled. Play has no stronger visual priority than Print or any category tile, so a first-time user must infer the workflow.", "fix": "Make category selection the unmistakable first step. Explicitly disable Print and Play until selection is valid, explain the requirement beside them, then give Play a filled primary treatment and keep Print secondary." }, { "id": "F-J1-mobile-2", "surface": "J1-mobile", "rank": 2, "severity": "P2", "element": "Category grid and downstream controls", "problem": "The category chooser occupies approximately y=297–993: nearly 700 px of equally weighted choices before Customize and the action panel. The primary workflow controls begin around y=1085, which would place them below the fold on many phone screens. The screenshot shows no faster way to find a known category.", "fix": "Reduce the initial chooser height with a compact category list, search, or a short initial set plus 'Show all categories'. Keep selection feedback and the next action close to the chooser rather than after the full inventory." }, { "id": "F-J1-mobile-3", "surface": "J1-mobile", "rank": 3, "severity": "P3", "element": "Header-to-content spacing and horizontal container", "problem": "The brand sits around y=26, while the page heading starts around y=151, leaving roughly 110 px of empty space below the header text. Content is constrained to about 330 px with 30 px side gutters on a 390 px-wide image. This wastes scarce mobile space while labels such as 'Cartoon & Animations' and 'General Knowledge' wrap.", "fix": "Reduce the header-to-heading gap to approximately 40–48 px and use 20–24 px mobile gutters. Spend the recovered space on readable labels and bringing the next step higher." }, { "id": "F-J1-mobile-4", "surface": "J1-mobile", "rank": 4, "severity": "P2", "element": "Unselected-state messaging", "problem": "'Choose a category, then play or print. Everything else is optional.', 'Nothing selected yet', 'Choose a category', and 'Choose a category to start' repeat essentially the same instruction in four locations. The isolated 'Nothing selected yet' at y≈246 consumes a line without helping the user act.", "fix": "Keep one concise instruction above the chooser and one meaningful selection summary near the actions. Remove the standalone unselected status; after selection, use that space for the chosen category or quiz details." }, { "id": "F-J1-mobile-5", "surface": "J1-mobile", "rank": 5, "severity": "P2", "element": "Surprise me tile", "problem": "The full-width 'Surprise me' tile is placed ahead of every category, but its dashed border gives it a different interaction language without explaining the difference. It is unclear whether it selects a random category, generates a mixed quiz, or immediately starts something.", "fix": "Use an explicit label such as 'Pick a random category' if that is the behavior. Give it standard button styling and reserve dashed borders for interactions where that convention is useful." }, { "id": "F-J1-mobile-6", "surface": "J1-mobile", "rank": 6, "severity": "P3", "element": "Category cards and quiz-panel shadow", "problem": "Twenty category tiles use individual pale fills, rounded borders, and large pictograms, followed by a heavily shadowed action container. These repeated containers dominate the page more than the category names. The action-panel shadow extends several dozen pixels below its bottom edge around y=1192, adding weight without clarifying priority.", "fix": "Simplify the category treatment with fewer borders or a compact divided list. Reduce the action-panel shadow to a subtle elevation and reserve strong visual weight for the actual primary action." }, { "id": "F-J1-mobile-7", "surface": "J1-mobile", "rank": 7, "severity": "P3", "element": "Text contrast and emphasis", "problem": "The introductory copy around y=181–210 is noticeably lighter than the heading and category labels despite carrying the workflow explanation. The green 'Choose a category to start' message introduces the only colored text but emphasizes an unselected state rather than an actionable control. Exact contrast compliance cannot be established from this screenshot alone.", "fix": "Use a darker secondary text token for instructional copy. Keep unselected guidance neutral and use the accent color consistently for actionable or selected states; verify text contrast against the actual background values." }, { "id": "F-J1-mobile-8", "surface": "J1-mobile", "rank": 8, "severity": "P3", "element": "Intro alignment and category iconography", "problem": "The page heading and description begin around x=65, whereas the status, section heading, and cards start at x=30. The small decorative heading icon creates an extra text axis used nowhere else. Category icons also reuse the same silhouettes for multiple unrelated choices, adding visual noise without much scanning value.", "fix": "Align the heading and supporting copy to the main x=30 content edge, or consistently apply the inset throughout the introduction. Remove redundant category icons or use a coherent set with distinct, equally sized silhouettes." }, { "id": "F-J1-mobile-9", "surface": "J1-mobile", "rank": 9, "severity": "P2", "element": "Collapsed Customize row", "problem": "'Customize' and a chevron communicate expansion, but not what settings are available. Nothing visible tells a first-time user whether this contains question count, difficulty, format, or something else.", "fix": "Add a brief summary of the actual available settings or current defaults below the label, while preserving the collapsed state." }, { "id": "F-J1-mobile-10", "surface": "J1-mobile", "rank": 10, "severity": "P3", "element": "Footer", "problem": "The footer repeats 'QuizWizz' and 'Create a quiz', introduces 'Mein QuizWizz' into an otherwise English interface, and uses large underlined text across two tightly packed lines near y=1330–1370. A leading separator on the second line exposes awkward wrapping. Roughly 135 px of blank space separates it from the action panel.", "fix": "Use smaller, muted footer links with explicit wrapping gaps instead of inline separators. Remove unnecessary repeated navigation, localize labels consistently, and reduce the oversized empty gap unless it serves a deliberate layout requirement." }, { "id": "F-J2-desktop-1", "surface": "J2-desktop", "rank": 1, "severity": "P2", "element": "Quiz summary and Play action", "problem": "The bottom summary shows “YOUR QUIZ” and “1304 questions match” without a visible quiz length. With “Customize” collapsed, the distinction between matching questions and questions actually played is unexplained.", "fix": "Show the actual session configuration beside Play, such as the configured question count and difficulty. Present the matching pool as secondary information and label the action “Play quiz”." }, { "id": "F-J2-desktop-2", "surface": "J2-desktop", "rank": 2, "severity": "P2", "element": "Category selection model", "problem": "“Choose a category” suggests a single choice, while “1 topic selected” suggests a multiselect and introduces a different noun. The selected item is “Surprise me”, which is not a topic. Only the selected tile has a selection indicator, so the screenshot does not communicate whether clicking another category replaces or adds to the selection.", "fix": "Use “category” consistently. If selection is multiple, say “Choose categories” and show checkbox affordances on every tile. If selection is single, use radio semantics. Describe the random-selection state explicitly rather than counting it as a topic." }, { "id": "F-J2-desktop-3", "surface": "J2-desktop", "rank": 3, "severity": "P2", "element": "Primary-action hierarchy", "problem": "The approximately 648 × 60 px “Surprise me” tile has the strongest outline and occupies the full form width, while Play is approximately 81 × 48 px near the bottom. The black fill makes Play findable, but the random-category option still receives disproportionate visual emphasis.", "fix": "Reduce the selected tile to a clean border plus checkmark. Give Play more width and a clearer action label while keeping Print visibly secondary." }, { "id": "F-J2-desktop-4", "surface": "J2-desktop", "rank": 4, "severity": "P2", "element": "Customize disclosure", "problem": "The approximately 53 px-high row says only “Customize” and shows a chevron at the far right. It does not reveal which settings are hidden or summarize their current values, making it hard to decide whether opening it is necessary before playing.", "fix": "Label the row with its purpose, such as “Quiz settings”, and add a compact summary of the actual configurable defaults. Keep the entire row clickable." }, { "id": "F-J2-desktop-5", "surface": "J2-desktop", "rank": 5, "severity": "P3", "element": "Page spacing and vertical placement", "problem": "The header text ends around y=44, but the main heading begins around y=242, leaving nearly 200 px of empty space. Another roughly 185 px separates the action panel from the footer. At 1265 × 1162, this makes a compact task feel unnecessarily stretched vertically.", "fix": "Move the main block upward by roughly 100–140 px and reduce the gap before the footer. Retain the approximately 646 px form width rather than stretching the controls to fill the page." }, { "id": "F-J2-desktop-6", "surface": "J2-desktop", "rank": 6, "severity": "P3", "element": "Footer typography and wrapping", "problem": "Footer links are approximately 21 px, noticeably larger than the 13–14 px category labels and action text. The link group wraps “& Contact” onto a centered second line, giving utility navigation excessive visual weight and an awkward ending.", "fix": "Use 13–14 px muted footer text, structured spacing instead of inline dot separators, and deliberate responsive wrapping. Keep “Operator & Contact” together." }, { "id": "F-J2-desktop-7", "surface": "J2-desktop", "rank": 7, "severity": "P3", "element": "Selected tile outline and action-panel shadow", "problem": "The “Surprise me” perimeter appears as multiple closely spaced dark and light contours around x=316–965 and y=380–440, creating a noisy edge. The bottom panel adds a broad shadow despite already having a border. These treatments give container chrome more emphasis than the explanatory content.", "fix": "Use one clean selected-state border and a separate, clearly spaced focus ring when keyboard focus is present. Reduce the action-panel shadow to a subtle elevation cue. The screenshot alone does not establish whether the current outline is selection styling, focus styling, or both." }, { "id": "F-J2-desktop-8", "surface": "J2-desktop", "rank": 8, "severity": "P3", "element": "Heading alignment and icon", "problem": "The category section aligns at x≈318, while the heading and subtitle begin at x≈358. A small icon around x≈326 occupies the resulting 40 px gutter but does not clearly communicate its purpose at this scale. This creates two competing text alignment lines.", "fix": "Remove the decorative icon and align the heading and subtitle with the form, or use an intentional icon column consistently across the section." }, { "id": "F-J2-desktop-9", "surface": "J2-desktop", "rank": 9, "severity": "P3", "element": "Secondary text and control boundaries", "problem": "The subtitle, selection count, and matching-question count are small and visually subdued. Unselected tiles have very pale fills and thin gray borders against white, so their boundaries are much weaker than the selected tile. Exact contrast compliance cannot be established from appearance alone.", "fix": "Increase important supporting text to approximately 14–15 px, strengthen secondary text color, and measure text and control-boundary contrast against their actual backgrounds." }, { "id": "F-J2-desktop-10", "surface": "J2-desktop", "rank": 10, "severity": "P3", "element": "Repeated naming and navigation chrome", "problem": "“QuizWizz” appears in both header and footer, “Create a quiz” appears as both the main heading and a footer link, and “Quiz Wizard” adds another similar phrase in the upper-right corner without an obvious visual role. None is broken, but together they add redundant naming to an otherwise focused single-task screen.", "fix": "Keep the brand and page title, give the upper-right item an explicit navigation role if it is interactive, and remove redundant current-page navigation from the prominent footer treatment." }, { "id": "F-J2-mobile-1", "surface": "J2-mobile", "rank": 1, "severity": "P2", "element": "Category picker and Play action", "problem": "The category controls occupy approximately y=296–993, while Play sits near y=1135. Although Play is visible in this tall capture, it would be below the fold in many shorter mobile viewports. A first-time user can identify categories but must scan or scroll substantially to find the task-completing action.", "fix": "Put a compact quiz summary and dominant Play button immediately after the selected category, or use a sticky bottom action bar with sufficient content clearance. Keep the full category list secondary." }, { "id": "F-J2-mobile-2", "surface": "J2-mobile", "rank": 2, "severity": "P2", "element": "Selection status and Surprise me option", "problem": "The status says \"1 topic selected\", the heading says \"Choose a category\", and the selected item is \"Surprise me\" rather than a named topic. These competing terms obscure what is selected and whether users can choose one category or several.", "fix": "Use one term consistently. Explicitly label the mode, such as \"Random category selected\", and state \"Choose one category\" or \"Choose one or more categories\" according to the actual behavior." }, { "id": "F-J2-mobile-3", "surface": "J2-mobile", "rank": 3, "severity": "P2", "element": "Collapsed Customize row", "problem": "\"Customize\" and a chevron are the only visible clues to the settings hidden inside. The summary shows \"1304 questions match\" but no visible quiz length or other defaults, so users cannot confidently predict what Play will produce.", "fix": "Show a concise summary of the actual defaults beside or beneath Customize. Name the settings available inside rather than relying on a generic label." }, { "id": "F-J2-mobile-4", "surface": "J2-mobile", "rank": 4, "severity": "P3", "element": "Header and introductory spacing", "problem": "The brand sits around y=26, but the main heading does not begin until y=151, leaving roughly 110 px of largely empty space below the header text. Another substantial gap separates the introduction from the selection status. This is expensive vertical space on a mobile task screen.", "fix": "Reduce the header-to-content gap to approximately 32–48 px and tighten the introduction-to-picker spacing to 20–24 px." }, { "id": "F-J2-mobile-5", "surface": "J2-mobile", "rank": 5, "severity": "P3", "element": "Category grid", "problem": "Twenty category tiles each use an approximately 56 px-tall bordered container, with 8–9 px gutters. Touch targets are generous, but repeated borders, pale fills, and icons dominate the page more than the quiz outcome. The 697 px picker feels like a wall of chrome.", "fix": "Preserve touch targets while reducing repeated decoration. Consider a compact initial selection with a clearly labeled expansion to all categories, or a searchable category picker if the complete list must remain available." }, { "id": "F-J2-mobile-6", "surface": "J2-mobile", "rank": 6, "severity": "P3", "element": "Selected Surprise me tile", "problem": "The selected tile has a heavy, visibly layered outline around x=28–361 and y=296–354, unlike the thin outlines on every other tile. Together with the dark checkmark, it attracts substantially more attention than the distant Play button. The screenshot cannot establish whether an additional focus ring is contributing.", "fix": "Use a clean 2 px selected border and restrained selected fill. If the extra outline is a keyboard-focus indicator, retain it but give it a deliberate offset so it does not visually merge with the selection border." }, { "id": "F-J2-mobile-7", "surface": "J2-mobile", "rank": 7, "severity": "P3", "element": "Introductory and summary typography", "problem": "The subtitle, \"1 topic selected\", and question count are approximately 12–13 px, while the footer links are around 18 px. Secondary navigation consequently has more typographic presence than useful task status. The small gray subtitle is readable in this capture but visually weak.", "fix": "Use approximately 14 px for helpful explanatory text, darken secondary text as needed, and reduce footer links to a quieter 13–14 px. Verify contrast ratios using the actual implementation colors." }, { "id": "F-J2-mobile-8", "surface": "J2-mobile", "rank": 8, "severity": "P3", "element": "Horizontal alignment and category labels", "problem": "The title and subtitle start around x=65, while the section heading, status, and cards start around x=30, producing a stepped opening. In the right column, \"Art\" begins around x=240 while \"Board Games\" begins around x=244. Several labels wrap to two lines, adding uneven visual rhythm.", "fix": "Establish explicit page and text alignment guides. Give every tile icon a fixed-width slot and identical gap, and define a consistent two-line label treatment rather than allowing icon dimensions to shift text." }, { "id": "F-J2-mobile-9", "surface": "J2-mobile", "rank": 9, "severity": "P3", "element": "Quiz summary card and action group", "problem": "The summary text occupies the upper-left of a roughly 107 px-tall card, while Print and Play sit at the lower-right, leaving an empty lower-left region. The broad shadow makes this small utility card feel heavier than necessary. Print and Play also receive nearly equal button footprints, despite Play being the stronger visual action.", "fix": "Use a tighter summary row followed by a clearly dominant Play button and a quieter Print alternative. Reduce the shadow and make the card's internal spacing deliberate." }, { "id": "F-J2-mobile-10", "surface": "J2-mobile", "rank": 10, "severity": "P3", "element": "Footer", "problem": "Approximately 135 px of blank space separates the quiz card from the footer. The large underlined footer repeats \"QuizWizz\" and \"Create a quiz\", already established above, and its wrapped second line begins with a separator dot. \"Mein QuizWizz\" also introduces a German label into an otherwise English interface.", "fix": "Reduce the gap unless required by an intentional viewport layout, remove redundant current-page navigation, use flex gaps rather than text separators, and apply a consistent locale." }, { "id": "F-J3-desktop-1", "surface": "J3-desktop", "rank": 1, "severity": "P1", "element": "Bottom action bar and quiz viewport", "problem": "At this 1280×900 viewport, the bar spans approximately x=123–1143 and y=805–884, covering document content. The second question’s toolbar runs behind it, leaving controls partially clipped. Persistent chrome competes with the content users are editing.", "fix": "Reserve a dedicated layout row for the action bar and place the document in a separate scroll region. Add sufficient bottom padding so every question, answer, and editing control can scroll completely above the bar." }, { "id": "F-J3-desktop-2", "surface": "J3-desktop", "rank": 2, "severity": "P2", "element": "Question editing toolbars", "problem": "Each question has six faint, icon-only controls. The plus and paired-arrow symbols do not clearly explain their effects or scope. These controls look disabled even where they may be actionable; the first question’s up arrow is even lighter, but the distinction is subtle.", "fix": "Label ambiguous actions such as adding an answer or shuffling choices. Give enabled icons stronger contrast and use a clearly distinct disabled treatment. Provide tooltips and accessible names for remaining icon-only actions." }, { "id": "F-J3-desktop-3", "surface": "J3-desktop", "rank": 3, "severity": "P2", "element": "Editor mode and first-time guidance", "problem": "The central surface resembles a finished print preview, but it also contains drag handles, answer boxes, and editing toolbars. The sentence above it explains restrictions rather than how to begin. A first-time user cannot confidently tell whether to click text, select answers, or simply print.", "fix": "Identify the surface as an editable quiz and provide a short instruction such as 'Click a question or answer to edit.' Visually separate editing controls from printable content, or offer explicit Edit and Preview modes." }, { "id": "F-J3-desktop-4", "surface": "J3-desktop", "rank": 4, "severity": "P2", "element": "Top-left question controls", "problem": "The boxed group at approximately x=133–319 combines an unlabeled document-like icon, '7 questions', and an unlabeled plus. Proximity suggests that plus adds a question, but neither icon communicates its exact action. The adjacent 'Quiz kind' value, 'Multiple', is also an incomplete description.", "fix": "Use a labeled 'Add question' action, name the document-icon action, and display a complete quiz-type label such as 'Multiple choice' if that is the intended mode." }, { "id": "F-J3-desktop-5", "surface": "J3-desktop", "rank": 5, "severity": "P2", "element": "Print and preview settings", "problem": "'Answer sheet preview' is checked but gray, while 'Header question count' is checked in black. The screenshot does not establish whether the former is disabled or merely styled differently. '3 pages' looks like a button despite appearing to be a status, and its relationship to 'Estimated page breaks (preview only)' is weak.", "fix": "Use consistent checkbox states and explain any disabled setting. Present page count as clearly noninteractive status beside the page-break option. Separate preview-only settings from settings that affect printed output." }, { "id": "F-J3-desktop-6", "surface": "J3-desktop", "rank": 6, "severity": "P3", "element": "Top settings panel", "problem": "The panel consumes roughly 155 px vertically before the document begins. Its 100 px-tall theme selector dominates simpler settings, with one long option above two smaller tiles. Other controls sit on mismatched vertical centers, and the second row is mostly empty between the page-break checkbox and page count.", "fix": "Use a consistent-height settings row, reduce theme selection to a compact control, and place related preview settings together on a deliberate second row. Align labels, inputs, and checkbox centers." }, { "id": "F-J3-desktop-7", "surface": "J3-desktop", "rank": 7, "severity": "P3", "element": "Document spacing and question layout", "problem": "The page begins around y=272, but the first question does not appear until y=480. Its answer choices start around y=590 because a separate 52 px-high toolbar sits between prompt and answers. Despite the large viewport, only one complete question is visible above the bottom bar.", "fix": "Keep necessary print margins in preview mode, but use a denser editor layout. Place question actions beside the prompt or in a compact secondary row, and reduce the gap before answer choices." }, { "id": "F-J3-desktop-8", "surface": "J3-desktop", "rank": 8, "severity": "P3", "element": "Horizontal alignment", "problem": "The helper sentence starts at approximately x=123, almost against the outer border, while settings begin at x=133 and document content at x=285. Inside each question, the toolbar starts around x=293, answer boxes at x=336, and prompt text at x=351. These competing edges make the structure feel incidental.", "fix": "Give the helper text the same inset as the settings. Define explicit columns for drag handle, question number, and question body; align the prompt, answers, and associated actions to that grid." }, { "id": "F-J3-desktop-9", "surface": "J3-desktop", "rank": 9, "severity": "P3", "element": "Repeated counts and answer identifiers", "problem": "'7 questions' appears in the top controls, document subtitle, and bottom status. Each answer also carries two identifiers, such as 'A' and '1.', adding visual noise without a visible distinction in meaning.", "fix": "Keep the count in the document when needed for printing and in one editor status location. Use either letters or numbers for answer choices unless the two systems serve explicitly different purposes." }, { "id": "F-J3-desktop-10", "surface": "J3-desktop", "rank": 10, "severity": "P3", "element": "Borders, shadows, and secondary text", "problem": "The nearly black outer frame at x≈121 and x≈1143 is more forceful than most internal controls. Nested rounded boxes and shadows around settings, theme options, toolbars, answer choices, and the footer make chrome visually busy. Meanwhile, small gray helper text and pale tool icons receive comparatively little emphasis.", "fix": "Soften the outer frame, remove redundant container outlines, and reserve elevation for the paper surface and persistent actions. Increase secondary-text and enabled-icon contrast, then verify actual contrast ratios from implementation colors." }, { "id": "F-J3-mobile-1", "surface": "J3-mobile", "rank": 1, "severity": "P1", "element": "Bottom “YOUR QUIZ” action panel", "problem": "The roughly 125px-tall panel overlays the quiz rather than occupying a clearly separate region. Answer content is visibly hidden behind it. Between the settings above and this panel below, only the quiz heading and first question stem remain unobstructed. Whether scrolling can fully expose every answer cannot be established from the screenshot.", "fix": "Reserve layout space for the action panel so it never covers quiz content. Reduce it to a compact action row, and move the status summary out of the overlay." }, { "id": "F-J3-mobile-2", "surface": "J3-mobile", "rank": 2, "severity": "P2", "element": "Settings-to-content hierarchy", "problem": "The settings occupy approximately y=75–488, over 410px, before the quiz even begins. The title appears around y=564 and the first question around y=714. Configuration chrome dominates the initial viewport instead of the document users are creating.", "fix": "Collapse secondary print settings into a disclosure or sheet. Keep only question count and quiz kind immediately visible, with the quiz preview directly beneath them." }, { "id": "F-J3-mobile-3", "surface": "J3-mobile", "rank": 3, "severity": "P2", "element": "Question-count controls and “3 pages” row", "problem": "The top row puts an unlabeled outline icon and a plus icon around “7 questions,” leaving their exact effects unclear. The full-width “3 pages” row has the same rounded, bordered treatment as interactive controls, although it reads like status information.", "fix": "Label the count action explicitly, such as “Add question,” and clarify the purpose of the outline-icon control. Render page count as compact status text, such as “Estimated length: 3 pages,” rather than a button-shaped box." }, { "id": "F-J3-mobile-4", "surface": "J3-mobile", "rank": 4, "severity": "P2", "element": "Editing guidance and next-step clarity", "problem": "The page says answer choices can be edited, but the visible preview does not clearly distinguish editable text from printed output. The six-dot handle suggests dragging, while the plus icon is remote from the question. Print is visually dominant, but a first-time user is not clearly shown how to prepare the quiz before printing.", "fix": "Add a concise instruction near the preview and visible editing affordances on questions or answers. Group “Add question” with the content, and make the workflow explicit: edit, preview, then print." }, { "id": "F-J3-mobile-5", "surface": "J3-mobile", "rank": 5, "severity": "P2", "element": "Repeated metadata", "problem": "“7 questions” appears in the top settings row, below the quiz title, and again in the bottom panel. “QuizWizz” also appears in both the app header and document subtitle. On this narrow screen, repeated metadata competes with actual questions; “YOUR QUIZ” adds another label without helping users act.", "fix": "Keep question count once in the editing interface and, if needed, once in the printable document. Remove the redundant bottom-panel heading and count. Separate document branding from application navigation." }, { "id": "F-J3-mobile-6", "surface": "J3-mobile", "rank": 6, "severity": "P3", "element": "Theme layout and checkbox alignment", "problem": "The Theme label sits at approximately x=45, y=247, beside the second row of theme choices rather than above or aligned with the group’s first row. The three checkbox rows begin at different x positions—approximately 113, 110, and 68—so they look individually centered rather than part of one settings list.", "fix": "Place “Theme” above its options and use a consistent left edge for all setting labels and checkboxes. Use a single-column settings grid with predictable row spacing." }, { "id": "F-J3-mobile-7", "surface": "J3-mobile", "rank": 7, "severity": "P3", "element": "Muted text and checkbox state", "problem": "The instructional copy around y=506–533 and the document metadata use small, light text. The checked “Answer sheet preview” box is pale gray, making its state look disabled, while “Header question count” uses a strong black check. The screenshot does not establish whether this difference is intentional.", "fix": "Increase secondary-text contrast and use consistent enabled checkbox styling. If answer-sheet preview is unavailable or locked on, explain that state rather than relying on a faint control. Verify contrast using the actual color values." }, { "id": "F-J3-mobile-8", "surface": "J3-mobile", "rank": 8, "severity": "P3", "element": "Borders, padding, and bottom action sizing", "problem": "A dark outer frame, inset rounded settings container, individually bordered rows, theme-option borders, and a bordered floating panel create excessive box-in-box chrome. The explanatory text begins almost flush against the outer frame at x≈30, whereas preview content begins around x≈40. In the footer, “Preview PDF” wraps onto two lines while Cancel and Print remain single-line.", "fix": "Remove redundant container borders, standardize inner padding to 12–16px, and use spacing rather than outlines to group settings. Shorten the footer label to “Preview” or adjust widths so action labels share a consistent baseline." }, { "id": "F-J4-desktop-1", "surface": "J4-desktop", "rank": 1, "severity": "P1", "element": "Bottom action bar overlapping quiz content", "problem": "The bar occupies approximately x123–1142, y805–884 and paints over the document. The second question’s toolbar begins around y765, so its lower portion and subsequent answer content are obscured. Users must reposition content to work around the overlay.", "fix": "Place actions in a reserved layout row with a separately scrolling editor, or add sufficient scroll padding and bottom clearance to keep focused controls above the bar. Verify that the final question and all its controls can scroll fully clear." }, { "id": "F-J4-desktop-2", "surface": "J4-desktop", "rank": 2, "severity": "P2", "element": "Question editing toolbars", "problem": "Each question has six small, pale, icon-only actions. The plus, paired arrows, and overlapping rectangles do not explain whether they affect questions or answers. These are essential editing controls, but the screenshot provides no visible labels or instructions.", "fix": "Expose labels for frequent actions such as 'Add choice' and 'Duplicate question'; group reorder actions separately. Provide tooltips and accessible names for remaining icons, without relying on tooltips as the only onboarding." }, { "id": "F-J4-desktop-3", "surface": "J4-desktop", "rank": 3, "severity": "P2", "element": "Editable quiz content", "problem": "Question text and the document title look like static print content, while answers look like selectable responses. The note says original answer choices can be edited, but nothing visibly explains how. A first-time user cannot confidently distinguish editing a quiz from taking or previewing it.", "fix": "Add a clear 'Edit quiz' context and a short instruction such as 'Select question or answer text to edit.' Give editable text a consistent affordance and distinguish editable fields from answer-selection controls." }, { "id": "F-J4-desktop-4", "surface": "J4-desktop", "rank": 4, "severity": "P2", "element": "Primary workflow and bottom actions", "problem": "'Print' is the strongest filled action, while 'Preview PDF' has a similarly prominent double-looking outline. 'Cancel' receives nearly the same footprint. The page does not establish whether the intended next step is editing, previewing, or printing; 'Cancel' also lacks a clear referent.", "fix": "Establish one primary next step, likely 'Preview PDF' for a review-before-print workflow, and demote the others. Rename 'Cancel' to describe its destination or effect. Use one consistent button border treatment." }, { "id": "F-J4-desktop-5", "surface": "J4-desktop", "rank": 5, "severity": "P2", "element": "Top question-count control", "problem": "The control at approximately x133–319 combines an unlabeled book-like icon, '7 questions', and a plus. The plus could mean adding a question, increasing a generated count, or opening a picker; the left icon’s purpose is also unclear.", "fix": "Separate the count from an explicitly labeled 'Add question' button. Label the left action according to its actual function rather than making users infer it from the icon." }, { "id": "F-J4-desktop-6", "surface": "J4-desktop", "rank": 6, "severity": "P2", "element": "Answer sheet preview checkbox", "problem": "'Answer sheet preview' appears checked but disabled in pale gray, unlike the black checked 'Header question count' control beside it. No explanation indicates whether this is mandatory, unavailable, or dependent on another setting.", "fix": "If unavailable, show the reason next to the control. If mandatory, present it as status rather than a disabled checkbox. If interactive, give it the same enabled styling as the adjacent checkbox." }, { "id": "F-J4-desktop-7", "surface": "J4-desktop", "rank": 7, "severity": "P2", "element": "Answer identifiers", "problem": "Every visible answer repeats its identifier in two schemes: 'A 1.', 'B 2.', 'C 3.', and 'D 4.'. This adds noise and creates ambiguity about which identifier users should reference.", "fix": "Use either letters or numbers consistently across the editor, printed quiz, and answer sheet. Remove the redundant identifier and reclaim its horizontal space." }, { "id": "F-J4-desktop-8", "surface": "J4-desktop", "rank": 8, "severity": "P3", "element": "Chrome-to-content balance and vertical density", "problem": "The settings panel consumes roughly 154 px of height, and the bottom bar another 79 px. The first question does not start until approximately y479; only one complete question is visible in a 900 px-tall viewport. The theme picker alone is about 100 px tall, giving appearance settings disproportionate prominence over editing.", "fix": "Collapse theme and print settings into a compact disclosure or side panel. Keep only frequent editing controls in the main toolbar, and reduce the document’s top whitespace in editing mode while preserving actual print margins in preview." }, { "id": "F-J4-desktop-9", "surface": "J4-desktop", "rank": 9, "severity": "P3", "element": "Question spacing and alignment", "problem": "The first question text starts near x351, its toolbar near x293, and its answer cards near x336. These competing left edges make the question group feel disconnected. Approximately 35 px separates the question text’s lower edge from the toolbar, and the 52 px-tall toolbar adds substantial repeated vertical overhead.", "fix": "Define a consistent grid with dedicated handle, number, and content columns. Align the toolbar and answers to the content column, reduce the question-to-toolbar gap to 12–16 px, and make the toolbar more compact." }, { "id": "F-J4-desktop-10", "surface": "J4-desktop", "rank": 10, "severity": "P3", "element": "Toolbar icon and secondary-text contrast", "problem": "Editing icons are light gray-lavender against white, and the toolbar border is barely visible. The up arrow in the first toolbar is even fainter, plausibly indicating a disabled state, but enabled actions also look subdued. Small metadata and the instructional note have similarly weak visual presence.", "fix": "Darken enabled icons and instructional text, reserving clearly lighter styling for genuinely disabled controls. Measure actual contrast values and target at least 3:1 for functional icons and 4.5:1 for small text." }, { "id": "F-J4-desktop-11", "surface": "J4-desktop", "rank": 11, "severity": "P3", "element": "Repeated status and inconsistent settings layout", "problem": "'7 questions' appears in the upper control, document subtitle, and bottom status. 'QuizWizz' also appears in the application header and document subtitle. Meanwhile, the top panel mixes nested cards, checkbox rows, and a detached '3 pages' badge at the lower right, producing several competing visual groupings.", "fix": "Keep one persistent editor count and retain the printed count only where needed in the document. Group page count with pagination settings, align settings to a shared row grid, and remove unnecessary nested borders." }, { "id": "F-J4-mobile-1", "surface": "J4-mobile", "rank": 1, "severity": "P1", "element": "Bottom “YOUR QUIZ” action panel", "problem": "At approximately x30–345, y759–885, the panel overlays the quiz document. Answer content is partially visible beneath it near the bottom edge, while a roughly 126px-high block of chrome interrupts reading immediately after the first question. The screenshot cannot establish whether scrolling can fully reveal the covered controls.", "fix": "Reserve layout space equal to the panel height plus the bottom safe-area inset. Reduce the panel to a compact action bar and verify that every question and answer can scroll completely above it." }, { "id": "F-J4-mobile-2", "surface": "J4-mobile", "rank": 2, "severity": "P2", "element": "Settings panel versus quiz content", "problem": "The settings card occupies approximately y76–488, while the quiz document does not begin until y543. More than half the viewport is spent on configuration before the user reaches the content. The nested boxes, theme choices, and preview settings visually dominate the actual quiz.", "fix": "Move the quiz preview directly below a compact summary row. Put theme, page-break, and header-count controls in a collapsed “Print settings” section." }, { "id": "F-J4-mobile-3", "surface": "J4-mobile", "rank": 3, "severity": "P2", "element": "Icon-only controls surrounding “7 questions”", "problem": "The two approximately 44px-square controls use a book-like icon and a plus sign without visible action labels. The plus could mean adding a question, creating a quiz, or increasing the count; the left icon is even less explicit. A first-time user cannot confidently identify the next editing action.", "fix": "Label the controls with their actual actions, especially “Add question” if that is what the plus does. Give the less common action a text label or place it in a clearly labeled menu." }, { "id": "F-J4-mobile-4", "surface": "J4-mobile", "rank": 4, "severity": "P2", "element": "“Cancel”, “Preview PDF”, and “Print” action hierarchy", "problem": "Three similarly sized buttons compete in the bottom panel. “Print” has a dominant black fill, but “Preview PDF” also attracts attention through a heavy dark outline. Meanwhile, “Cancel” consumes almost a third of the available action width. The interface does not clearly distinguish the recommended next step from optional or destructive exits.", "fix": "Choose one primary action based on the workflow. Render the other output action as a quieter secondary button and make “Cancel” a compact text action. Keep the primary label on one line." }, { "id": "F-J4-mobile-5", "surface": "J4-mobile", "rank": 5, "severity": "P2", "element": "Disabled-looking “Answer sheet preview” checkbox", "problem": "The checked checkbox near x113, y316 is pale gray while its label remains dark. It appears disabled, but no visible explanation says why it is checked, why it cannot be changed, or how to enable it.", "fix": "If disabled, provide a short explanation next to it or reveal the dependency that controls it. If interactive, use the same enabled checkbox styling as “Header question count”." }, { "id": "F-J4-mobile-6", "surface": "J4-mobile", "rank": 6, "severity": "P2", "element": "“3 pages” status and editing guidance", "problem": "The page count is enclosed in a full-width, approximately 32px-high rounded rectangle that resembles a button, despite reading like a status. The editing note below describes restrictions—“Original answer choices can be edited but not removed.”—but does not explain how to begin editing.", "fix": "Present the count as plain status text such as “Estimated print length: 3 pages”. Add a direct instruction near the document, such as “Select question or answer text to edit,” only if that interaction is supported." }, { "id": "F-J4-mobile-7", "surface": "J4-mobile", "rank": 7, "severity": "P3", "element": "Settings alignment and vertical rhythm", "problem": "The checkbox left edges shift from approximately x113 to x110 to x68 across the three rows. The “Theme” label sits to the left of a two-row option group rather than aligning with the other setting labels. Large gaps between checkbox rows contrast with tightly packed theme controls, making the card feel assembled from unrelated components.", "fix": "Use a shared left edge for all checkbox controls and a consistent 12–16px vertical rhythm. Place setting labels above their controls at this viewport width, with uniform internal padding." }, { "id": "F-J4-mobile-8", "surface": "J4-mobile", "rank": 8, "severity": "P3", "element": "Repeated counts, branding, and containers", "problem": "“7 questions” appears in the top controls, under the document title, and again in the bottom panel. “QuizWizz” also appears in both the header and document metadata. Combined with the outer card, bordered setting groups, bordered theme tiles, and bordered page count, repeated framing and text consume attention without adding much information.", "fix": "Keep the live question count in one editor summary. Retain document metadata only where it belongs to the printed output, remove redundant bottom-panel copy, and use spacing rather than borders for routine grouping." }, { "id": "F-J4-mobile-9", "surface": "J4-mobile", "rank": 9, "severity": "P3", "element": "Secondary copy and document form lines", "problem": "The small gray editing note and muted document metadata have substantially less visual contrast than the bold controls. The thin name/class rules and divider are also faint at this scale. Exact contrast compliance cannot be determined from the screenshot alone.", "fix": "Increase secondary-text contrast and keep instructional text comfortably readable at mobile size. Test the form rules at actual print scale rather than relying on their appearance in the reduced preview." }, { "id": "F-J5-desktop-1", "surface": "J5-desktop", "rank": 1, "severity": "P2", "element": "Answer choices and introductory guidance", "problem": "All visible options are plain, approximately 45 px-high rectangles without radio buttons, checkboxes, or answer letters. Nothing explicitly identifies the expected interaction. The Name, Date, and Class underlines suggest paper, while the answer tiles resemble digital controls.", "fix": "Make the intended medium explicit. For a worksheet, add 'Circle one answer per question' and A–D labels. For an interactive quiz, use labeled radio controls with clear selected states and add 'Select one answer per question.'" }, { "id": "F-J5-desktop-2", "surface": "J5-desktop", "rank": 2, "severity": "P2", "element": "Question count, question numbering, and footer pagination", "problem": "The subtitle says '7 questions', but six question blocks are visible and the footer says '1 / 3'. These may describe different scopes, but the page does not explain them. Unnumbered questions make it harder to understand progress or refer to a specific answer.", "fix": "Number the questions and distinguish question count from pagination: for example, 'Questions 1–6 of 7' and 'Page 1 of 3', if those are the intended scopes. For a digital experience, provide an explicit continuation action; none is visible in this image." }, { "id": "F-J5-desktop-3", "surface": "J5-desktop", "rank": 3, "severity": "P2", "element": "Header and footer naming", "problem": "The header identifies 'Surprise quiz · Sep 14' and 'QuizWizz', while the footer introduces 'Balli Dalli Quiz'. These competing identities are not explained. There is no exact duplicated title, but the additional footer name creates redundant, inconsistent branding.", "fix": "Use one quiz title and one clearly subordinate product or publisher name. Reserve the footer for pagination and, if necessary, a short version of the same title." }, { "id": "F-J5-desktop-4", "surface": "J5-desktop", "rank": 4, "severity": "P3", "element": "Top-of-page space allocation", "problem": "The first question begins around y=406 in a 1568 px-tall image. Approximately 90 px of blank space precedes the roughly 95 px-tall hat, and another approximately 60 px separates the subtitle from the identity fields. Content dominates overall, but decorative header space consumes about the first quarter of the page.", "fix": "Reduce the top margin to approximately 40–48 px, shrink the illustration to 48–64 px, and tighten the subtitle-to-fields gap to 24–32 px. Reallocate the recovered space to instructions and clearer question organization." }, { "id": "F-J5-desktop-5", "surface": "J5-desktop", "rank": 5, "severity": "P3", "element": "Answer tile boundaries and section divider", "problem": "The very pale lavender tile fills and thin gray borders barely separate from the white page. The divider around y=384 is similarly faint. Answer text itself is dark and readable; the weakness is structural contrast, not demonstrated text illegibility.", "fix": "Strengthen answer boundaries or use explicit selection circles so structure does not depend on near-white fills. If these are interactive controls, verify their identifying boundaries meet non-text contrast requirements." }, { "id": "F-J5-desktop-6", "surface": "J5-desktop", "rank": 6, "severity": "P3", "element": "Question headings, answer grids, and purple rails", "problem": "Each purple rail starts around x=69, headings around x=93, and answer rectangles around x=100. The approximately 7 px heading-to-grid offset looks accidental rather than like a deliberate indentation. Answer text begins another approximately 14 px inward, creating several nearby competing left edges.", "fix": "Use a consistent grid: align headings and answer rectangles to one content edge, retain a deliberate 12–16 px internal tile padding, and set one repeatable gap between the rail and content." }, { "id": "F-J5-desktop-7", "surface": "J5-desktop", "rank": 7, "severity": "P3", "element": "Repeated question-block decoration", "problem": "Six saturated purple rails, each approximately 6 px wide and 150–180 px tall, compete with the bold question headings. Their identical treatment adds considerable visual weight without communicating sequence, selection, or status.", "fix": "Replace the rails with useful question numbers, or reduce them to a thinner, quieter accent. Let question headings and answer controls carry the hierarchy." }, { "id": "F-J5-mobile-1", "surface": "J5-mobile", "rank": 1, "severity": "P1", "element": "Question text, answer cells, and metadata", "problem": "Most quiz text is approximately 6–8 px tall; metadata and the footer are smaller still. The title is readable, but the content needed to complete the quiz is not comfortably legible at this scale.", "fix": "Use a responsive screen layout with approximately 16 px answer text and 16–18 px question text. If this is a document preview, provide an obvious zoom or full-screen control rather than presenting the reduced page as the usable quiz." }, { "id": "F-J5-mobile-2", "surface": "J5-mobile", "rank": 2, "severity": "P2", "element": "Quiz instructions and primary action", "problem": "There is no visible instruction explaining whether to tap answers, print the sheet, or fill it out elsewhere. No Start, Submit, Print, or Download action is visible. A first-time user cannot confidently identify the next step.", "fix": "State the intended interaction immediately below the title and expose one dominant action appropriate to that mode, such as Start quiz or Print quiz." }, { "id": "F-J5-mobile-3", "surface": "J5-mobile", "rank": 3, "severity": "P2", "element": "Answer choices", "problem": "Choices appear as pale rectangular cells approximately 16 px high, separated by roughly 2 px. There are no visible radio indicators or selected states, so they read as document table cells rather than clearly selectable controls. Interactivity cannot be established from the screenshot.", "fix": "For an interactive quiz, use labeled radio controls with at least 44 px touch targets, clear selected states, and larger gaps. Stack choices when two columns would compress the text." }, { "id": "F-J5-mobile-4", "surface": "J5-mobile", "rank": 4, "severity": "P2", "element": "Question count and page footer", "problem": "The subtitle says \"7 questions\", but only six question blocks are visible. The tiny \"1 / 3\" footer suggests more pages without a visible way to reach them. The screenshot does not explain where the remaining content is.", "fix": "For a screen experience, show readable progress with a noun, such as Page 1 of 3, and visible navigation. Keep the total question count consistent with the accessible content." }, { "id": "F-J5-mobile-5", "surface": "J5-mobile", "rank": 5, "severity": "P2", "element": "Name, Date, and Class row", "problem": "The labels near y=125 are extremely small, and their associated entry areas are not clearly distinguishable. It is unclear whether these are editable fields or spaces intended for handwriting.", "fix": "Use explicit, readable form fields for digital entry. For a printable sheet, give each label a clearly visible writing line and enough vertical space." }, { "id": "F-J5-mobile-6", "surface": "J5-mobile", "rank": 6, "severity": "P3", "element": "Overall vertical composition", "problem": "The footer ends around y=534, leaving approximately 365 px—about 41% of the screenshot—blank below it, while six questions are compressed into roughly 370 px above. Space is available, but it is not supporting readability.", "fix": "Increase the content scale and let the quiz flow vertically. If the blank region is part of a fixed paper preview, distinguish the page from its surrounding canvas and provide fit-width viewing." }, { "id": "F-J5-mobile-7", "surface": "J5-mobile", "rank": 7, "severity": "P3", "element": "Header and content hierarchy", "problem": "The decorative hat and centered title receive substantially more visual emphasis than the answer text. There is little application chrome; the imbalance is between document branding and the actual task. Repeated purple rails mark each block but do not communicate question order or completion.", "fix": "Reduce the decorative header's relative prominence, enlarge the task content, and add clear question numbers. Reserve stronger accent treatment for selection, progress, or the primary action." }, { "id": "F-J5-mobile-8", "surface": "J5-mobile", "rank": 8, "severity": "P3", "element": "Answer borders, secondary labels, and footer", "problem": "The pale lavender cell fills and thin borders are barely differentiated from the white background at this scale. Secondary labels are similarly faint. Exact contrast ratios cannot be determined from the screenshot, but the combination of low emphasis and tiny type weakens readability.", "fix": "Darken secondary text and meaningful control boundaries, then verify contrast at the actual rendered size. Do not rely on a faint background tint alone to identify an interactive option." }, { "id": "F-J5-mobile-9", "surface": "J5-mobile", "rank": 9, "severity": "P3", "element": "Question-block alignment and spacing", "problem": "The repeated grid is reasonably consistent, but each question label starts around x=33 while answer cells start around x=35, with text inset again around x=40. These small staggered offsets look accidental at this scale, and roughly 8–10 px gaps between blocks make the page feel tightly packed.", "fix": "Use a deliberate shared text inset for question and answer content, and a consistent spacing system with more separation between questions than between answer choices." }, { "id": "F-Q1-desktop-1", "surface": "Q1-desktop", "rank": 1, "severity": "P2", "element": "Add question search, approximately x194–948, y912–958", "problem": "The helper text says to choose a result, but no results or search-status feedback appear beneath the populated field. The next visible section is “Answers”. This is an unexplained UI state, not proof that search is broken.", "fix": "Show an explicit response below the field: matching questions, a loading indicator, “Type at least N characters”, or “No matching questions”. Give each result a clearly labeled Add action." }, { "id": "F-Q1-desktop-2", "surface": "Q1-desktop", "rank": 2, "severity": "P2", "element": "Primary workflow: question editor and Publish panel", "problem": "“Update” is the only filled action, but it sits at approximately x1173, y424, far from the search and settings around y912–1227. “Add New Quiz” is instead positioned beside the page heading. Users can identify individual controls, but the intended edit → add → save sequence is weak.", "fix": "Keep “Save changes” persistently available beside the editor or in a sticky action bar. De-emphasize “Add New Quiz” on an existing quiz and show whether changes are saved." }, { "id": "F-Q1-desktop-3", "surface": "Q1-desktop", "rank": 3, "severity": "P2", "element": "Answers settings, approximately y1005–1170", "problem": "“Answer review for players” has a pale switch that appears enabled but possibly disabled, followed by “Site policy forces the answer key”. The next setting says “Per-quiz setting wins; site Forced only sets the default”. The scope of these rules is unclear, and color alone does not establish whether the first control is editable.", "fix": "Label the first setting explicitly, such as “On — locked by site policy”, if that is its actual state. Rewrite each explanation to identify exactly which setting the policy controls and which settings can be overridden." }, { "id": "F-Q1-desktop-4", "surface": "Q1-desktop", "rank": 4, "severity": "P2", "element": "Global statistics strip, approximately x182–1259, y42–116", "problem": "Five equally prominent cards precede the quiz title and devote the strongest large-number treatment to global metrics such as “9,073” and “483”. The strip is about 74 px tall, while the current quiz receives a 40 px title field. “1 of 1” beside “23 of 483 pools ready” also introduces competing denominators without explaining their relationship.", "fix": "Move global statistics to the dashboard or collapse them behind a summary control. Use the editor header for quiz-specific status and question count. Give every remaining metric an explicit unit and scope." }, { "id": "F-Q1-desktop-5", "surface": "Q1-desktop", "rank": 5, "severity": "P2", "element": "Question-row action cluster, approximately x774–940", "problem": "Every row repeats a pencil, up arrow, down arrow, and red trash icon without visible labels. Together with the drag handle, each question has two reordering mechanisms. The repeated red trash icons compete with the question text, while edit is only a small pencil affordance.", "fix": "Make the question text an obvious edit target or provide a labeled Edit action. Group secondary controls more quietly, retain keyboard-accessible reordering, and give destructive actions clear accessible names and confirmation or undo." }, { "id": "F-Q1-desktop-6", "surface": "Q1-desktop", "rank": 6, "severity": "P2", "element": "Subjects panel, approximately x980–1259, y495–821", "problem": "The panel offers a short viewport of checkboxes but no visible search. The global strip reports 483 subjects, so browsing this list is unlikely to scale. “Geography” appears checked above unrelated alphabetic entries without an explicit selected-subject grouping.", "fix": "Add subject search and a distinct Selected section. Keep the selected subject visible independently of the results list and clarify whether the list is scrollable." }, { "id": "F-Q1-desktop-7", "surface": "Q1-desktop", "rank": 7, "severity": "P3", "element": "Question-list width and row layout", "problem": "The editor is approximately 778 px wide, but the question text starts around x272 and ends before the action cluster around x774. Roughly 175 px of each row is reserved for actions. Questions 4 and 10 wrap while substantial horizontal space is committed to repeated controls.", "fix": "Reduce the action cluster width with a compact secondary menu or tighter grouping. Preserve visible editing access and let question text use more of the row." }, { "id": "F-Q1-desktop-8", "surface": "Q1-desktop", "rank": 8, "severity": "P3", "element": "Overall content-to-chrome balance", "problem": "The 160 px navigation rail, top admin bar, statistics strip, and 280 px right sidebar frame a comparatively narrow editing surface. Below the Subjects panel, approximately x980–1259, y822–1253 is empty while the main card continues through search, settings, and download controls. Content dominates the central card, but chrome determines too much of the page geometry.", "fix": "Remove the global statistics from this view and make secondary navigation collapsible. Consolidate publishing and taxonomy controls so the question editor can occupy a wider, more balanced workspace." }, { "id": "F-Q1-desktop-9", "surface": "Q1-desktop", "rank": 9, "severity": "P3", "element": "Publish panel date and panel-header controls", "problem": "The publication date occupies one line around y376, but its “Edit” link wraps onto a separate line at the far left around y395. This breaks the inline pattern used by Status and Visibility. Panel headers also repeat three small chevrons at the right edge, adding control noise with little visible explanation.", "fix": "Use consistent label/value/action rows, with Edit aligned in a dedicated column. Consolidate panel-management controls and distinguish collapse from panel-reordering actions." }, { "id": "F-Q1-desktop-10", "surface": "Q1-desktop", "rank": 10, "severity": "P3", "element": "Secondary text and state contrast", "problem": "Much of the metadata and helper copy is approximately 12 px gray text, including the statistics annotations, reorder instruction, and policy explanations. Thin borders and pale switch styling give state information less visual strength than decorative icons. The screenshot alone does not establish a contrast-ratio failure.", "fix": "Increase task-critical helper text to 13–14 px, darken secondary text, and verify contrast in the actual UI. Communicate disabled and policy-controlled states with text as well as color." }, { "id": "F-Q1-desktop-11", "surface": "Q1-desktop", "rank": 11, "severity": "P3", "element": "Repeated labels and page identity", "problem": "“Quizzes” appears in both the statistics strip and selected navigation, while “Edit Quiz” and “Add New Quiz” repeat the object type above the actual title. This is not a duplicated quiz title, but generic labels receive prominence that could identify the current quiz and its state.", "fix": "Use one compact context line, then prioritize the quiz title, Published status, question count, and save state. Remove redundant global labels from the editing header." }, { "id": "F-Q1-mobile-1", "surface": "Q1-mobile", "rank": 1, "severity": "P1", "element": "Sticky “Move to Trash” / “Update” bar", "problem": "At approximately y=482–521, the full-width bar overlays the question list. Question 4 is partially hidden, and a delete icon is visible only as a fragment below the bar. This interrupts reading and makes the covered controls unusable in the visible state.", "fix": "Anchor the save bar to the viewport bottom with matching content padding, or place it outside the scrolling list. Ensure no question text or action can sit beneath it." }, { "id": "F-Q1-mobile-2", "surface": "Q1-mobile", "rank": 2, "severity": "P1", "element": "Question text, helper text, and row controls", "problem": "At the supplied 217 px image width, much of the interface renders at roughly 6–8 px text height. Several icons occupy only about 10–14 px. Reading long questions and distinguishing adjacent reorder, edit, and delete actions is impractical at this rendered size.", "fix": "Use a responsive single-column layout with readable body text and at least 44 px touch targets. Reduce the number of simultaneously exposed row actions rather than shrinking them. Verify at the actual device scale; screenshot downscaling may contribute." }, { "id": "F-Q1-mobile-3", "surface": "Q1-mobile", "rank": 3, "severity": "P2", "element": "“Add question” search field", "problem": "The focused field contains “a,” but there are no visible results, loading indicator, or no-results message. The helper text promises a searchable question library without showing what happens next or how to create a question that is not already in it.", "fix": "Show explicit search feedback immediately beneath the field and provide a separate “Create question” action. Keep the next step visible in every search state." }, { "id": "F-Q1-mobile-4", "surface": "Q1-mobile", "rank": 4, "severity": "P2", "element": "Question-row action cluster", "problem": "Each row exposes a drag handle, up arrow, down arrow, pencil, and red trash icon. These largely unlabeled controls compete with the question text, and two reorder mechanisms repeat across all ten rows. Delete receives stronger color emphasis than edit.", "fix": "Make the question title the primary edit affordance, keep one clear reorder mechanism, and move deletion into a labeled secondary menu. Preserve an accessible keyboard reorder alternative." }, { "id": "F-Q1-mobile-5", "surface": "Q1-mobile", "rank": 5, "severity": "P2", "element": "Page-level visual hierarchy", "problem": "Global quiz statistics, the toolbar, “Screen Options,” and permalink controls consume much of the first roughly 250 px before the question editor begins. The page is an editing task, but administrative chrome receives early attention while “Update” is detached from the title and appears midway through the list.", "fix": "Lead with the quiz title and a stable save action, followed immediately by questions. Collapse permalink settings and move global statistics out of the editor’s primary flow." }, { "id": "F-Q1-mobile-6", "surface": "Q1-mobile", "rank": 6, "severity": "P2", "element": "“Answers” switches", "problem": "“Answer review for players” appears pale blue while “Answer sheet in PDF” appears gray, but neither has an explicit On/Off label. The policy notes imply site-level constraints without clearly saying whether either switch is locked. Enabled, disabled, and policy-controlled states are difficult to distinguish.", "fix": "Pair each switch with explicit state text. If policy prevents changes, show a lock indicator and “Managed by site policy” rather than relying on low-opacity styling." }, { "id": "F-Q1-mobile-7", "surface": "Q1-mobile", "rank": 7, "severity": "P3", "element": "Question-list density and alignment", "problem": "Most rows spend a separate lower line on reorder and delete controls, creating roughly 55–80 px rows despite tiny question text. Drag handles, numbers, text, and right-side icons form several narrow columns, leaving the actual content squeezed into the middle.", "fix": "Use a consistent row grid with a broad text column and one compact action area. Align controls to a predictable baseline and let row height follow readable content rather than scattered icons." }, { "id": "F-Q1-mobile-8", "surface": "Q1-mobile", "rank": 8, "severity": "P3", "element": "Secondary labels, links, and borders", "problem": "Small gray helper text, light row separators, pale panel borders, and underlined metadata links produce a low-contrast, visually noisy surface. The solid blue “Update” button stands out, but ordinary reading and secondary actions are much less clear. Exact contrast ratios cannot be established from this image alone.", "fix": "Increase secondary-text contrast, simplify border usage, and standardize action styling. Validate text and control contrast against WCAG requirements at native resolution." }, { "id": "F-Q1-mobile-9", "surface": "Q1-mobile", "rank": 9, "severity": "P3", "element": "Repeated labels and supporting panels", "problem": "“Quizzes,” “Edit Quiz,” “Add New Quiz,” and “Quiz questions” repeatedly establish the same context while the actual quiz name is visually modest. “Subjects” followed by “All Subjects” adds more framing. The Publish and Subjects panels extend the page substantially for relatively little task-critical information.", "fix": "Promote the quiz name as the main heading, shorten the list heading to “Questions,” and relocate “Add New Quiz” away from the current editing task. Collapse secondary publishing metadata and taxonomy controls when not needed." }, { "id": "F-L1-desktop-1", "surface": "L1-desktop", "rank": 1, "severity": "P2", "element": "Row statuses and next-step actions", "problem": "Each visible row combines “Draft” beside the title, a yellow “Review” indicator under “Status / readiness”, and green “Prepared” text under “Source”. These labels describe apparently different dimensions without explaining them. No explicit row-level review action is visible; only the blue title offers an obvious entry point.", "fix": "Separate publication state, readiness, and provenance with unambiguous labels. Replace generic readiness text with actionable language such as “Needs review”, explain the blocker, and expose a persistent “Review quiz” action where appropriate." }, { "id": "F-L1-desktop-2", "surface": "L1-desktop", "rank": 2, "severity": "P2", "element": "“Add New Quiz” and toolbar action hierarchy", "problem": "The approximately 84 × 25 px “Add New Quiz” button at x212, y119 has the same thin blue outline treatment as “Apply”, “Filter”, search, and pagination controls. The main creation action receives no meaningful visual priority over administrative controls.", "fix": "Give “Add New Quiz” a filled primary treatment and a larger hit area. Keep filtering and bulk operations visually secondary, with pagination quieter still." }, { "id": "F-L1-desktop-3", "surface": "L1-desktop", "rank": 3, "severity": "P2", "element": "Top summary cards", "problem": "Five cards consume almost the full 835 px content width before the page title. They mix quiz counts, question counts, subjects, printing, and language readiness. “Ready languages” combines “1 of 1” with “23 of 483 pools ready”, while “Finished attempts” shows 0 alongside “0 sheets printed · 2 quizzes”. The relationships are not self-explanatory, and this dashboard competes with the list task.", "fix": "Move cross-product metrics to the dashboard. Retain only actionable quiz-list summaries, with explicit nouns and denominators. Make each remaining summary apply a relevant list filter." }, { "id": "F-L1-desktop-4", "surface": "L1-desktop", "rank": 4, "severity": "P2", "element": "“Details” column", "problem": "The roughly 233 px column packs a flag, subject, optional “+1” or “+2”, difficulty, and “Practice” into a single small-text line. There are no visible sublabels, “Not set” does not identify what is missing, and a flag requires users to infer language. The compact count badges do not identify what they count.", "fix": "Expose the most useful fields with clear labels or dedicated columns. Use language codes or names alongside flags, replace “Not set” with a specific missing-field label, and expand badges to wording such as “+2 subjects”." }, { "id": "F-L1-desktop-5", "surface": "L1-desktop", "rank": 5, "severity": "P3", "element": "“Updated” column and table row height", "problem": "The approximately 105 px final column repeats “Last Modified” in every row and wraps each timestamp across multiple lines, often leaving “pm” or “am” alone. Rows are roughly 58 px tall despite most other cells using one line. Twenty rows extend the table from about y245 to y1481, creating substantial scrolling and blank cell space.", "fix": "Put the modification meaning in the column header once. Use a compact date format and a deliberate two-line date/time layout, then reduce row height to approximately 40–44 px while retaining comfortable interaction targets." }, { "id": "F-L1-desktop-6", "surface": "L1-desktop", "rank": 6, "severity": "P3", "element": "Table column sizing and header alignment", "problem": "The approximately 64 px “Questions” column wraps its sort indicator onto a second line, while “Title” and “Updated” keep their indicators alongside their labels. Titles have only about 180 px of usable width, causing draft labels to wrap, while the mostly short “Review” values occupy a roughly 118 px column.", "fix": "Reserve a single-line label-and-sort area for every sortable header. Reallocate width from short status values to titles and timestamps, and render publication state independently of title wrapping." }, { "id": "F-L1-desktop-7", "surface": "L1-desktop", "rank": 7, "severity": "P3", "element": "Search, filters, and pagination layout", "problem": "Controls occupy several staggered horizontal bands: title near y123, view links and search near y155, filters near y188, and pagination near y213. Search is detached from the other narrowing controls, and the title region leaves a broad empty center. The table does not begin until y245.", "fix": "Use a deliberate toolbar grid: page title and primary action first, search and view selection second, filters and result count third. Align control heights and baselines, and keep pagination in one predictable position." }, { "id": "F-L1-desktop-8", "surface": "L1-desktop", "rank": 8, "severity": "P3", "element": "Repeated low-value row text", "problem": "“Draft”, “Review”, “Prepared”, “Practice”, and “Last Modified” recur throughout the visible list. These repeated labels consume more attention and width than distinguishing information. The bottom header also repeats every column label immediately above the footer controls.", "fix": "Provide optional columns and emphasize exceptions rather than rendering every invariant with equal weight. Remove repeated timestamp prefixes, and consider a sticky header instead of a duplicated bottom header." }, { "id": "F-L1-desktop-9", "surface": "L1-desktop", "rank": 9, "severity": "P3", "element": "Secondary typography and status contrast", "problem": "Much of the metadata appears approximately 10–11 px at the supplied resolution. Gray dates and details are visually weak against white or very pale striped rows; the tiny yellow review dots are particularly subtle. Content remains visible, but scanning depends on fine text and small accents.", "fix": "Increase body metadata toward 12–14 px, strengthen secondary text contrast, and give status labels a consistent readable treatment. Measure contrast on the actual rendered interface rather than assuming this screenshot proves a compliance failure." }, { "id": "F-L1-desktop-10", "surface": "L1-desktop", "rank": 10, "severity": "P3", "element": "Navigation and content/chrome balance", "problem": "The 124 px left rail and 25 px admin bar are joined by summary cards, page controls, and repeated list controls. The table ultimately occupies most of the tall screenshot, but its initial viewport gives substantial prominence to administration rather than quiz content. “Quizzes” also appears in the summary card, page heading, and active navigation item, with the card adding little beyond the list count.", "fix": "Preserve the useful page title and navigation context, but remove redundant summary chrome from this task view. Bring the first rows higher and let quiz titles, readiness, and next actions dominate." }, { "id": "F-L1-mobile-1", "surface": "L1-mobile", "rank": 1, "severity": "P2", "element": "Overall mobile hierarchy", "problem": "In this 255 px-wide screenshot, the toolbar, summary cards, options, heading, filters, search, and pagination consume approximately the first 365 px before the table even begins. The content users came to manage is visually subordinate to its controls.", "fix": "Lead with the page heading and a prominent creation action, followed by compact search/filter controls and the list. Collapse summary metrics and secondary options on narrow screens; move initial pagination below the results." }, { "id": "F-L1-mobile-2", "surface": "L1-mobile", "rank": 2, "severity": "P2", "element": "Quiz titles and row typography", "problem": "Titles and draft statuses appear roughly 9–10 px tall, despite rows receiving about 46 px of vertical space. Long titles nearly fill the available width; the second visible title wraps its status onto another line. This combines low information legibility with generous row padding.", "fix": "Use a readable mobile type scale, approximately 14–16 CSS px, and allow deliberate two-line title layouts. Place status on a consistent secondary line or in a distinct badge. Verify sizing at the intended device scale." }, { "id": "F-L1-mobile-3", "surface": "L1-mobile", "rank": 3, "severity": "P2", "element": "Add New Quiz", "problem": "The creation action is a small outlined button, approximately 81 × 28 px, competing with similarly outlined Search Quizzes, Apply, and pagination buttons. It does not clearly establish what a first-time user should do next.", "fix": "Give Add New Quiz a filled primary treatment and a larger touch target. Keep search, bulk actions, and pagination visually secondary." }, { "id": "F-L1-mobile-4", "surface": "L1-mobile", "rank": 4, "severity": "P2", "element": "Per-row disclosure controls", "problem": "Each row ends with a tiny downward triangle near x=238. There is no visible label explaining whether it expands details or exposes actions, and no visible edit action beyond the linked title. The screenshot does not reveal the actual hit area.", "fix": "Use a recognizable, adequately sized action trigger with a clear accessible name. Make the title's editing behavior explicit, and expose the most common action rather than relying entirely on an ambiguous disclosure." }, { "id": "F-L1-mobile-5", "surface": "L1-mobile", "rank": 5, "severity": "P2", "element": "Search controls", "problem": "The empty input around y=217 has no visible label or placeholder; its purpose only becomes apparent from the separate Search Quizzes button below. The field reaches the right image edge while maintaining a left inset, making the layout look unfinished.", "fix": "Add a persistent Search quizzes label and consistent horizontal gutters. Use a compact, full-width search arrangement that does not require a separate row solely for a small submit button." }, { "id": "F-L1-mobile-6", "surface": "L1-mobile", "rank": 6, "severity": "P2", "element": "Pagination and result count", "problem": "The top pager separates the current page '1' from 'of 6' onto different lines. The bottom pager uses a different presentation, '1 of 6', while '109 items' sits separately at the far right. Users must assemble the pagination state from scattered fragments.", "fix": "Use one consistent pattern such as 'Page 1 of 6' beside previous/next controls, with '109 quizzes' nearby. Reduce the pager to essential controls on this narrow layout." }, { "id": "F-L1-mobile-7", "surface": "L1-mobile", "rank": 7, "severity": "P3", "element": "Spacing and alignment", "problem": "Several unrelated horizontal anchors compete: the main content starts near x=7, top pagination near x=52, bottom pagination near x=72, and Screen Options near x=160. A roughly 24 px gap separates the top pager's caption from the table, and substantial empty space follows the final pager.", "fix": "Apply a consistent 8 px spacing system, shared side gutters, and one pagination alignment. Tighten gaps between related controls and results. Distinguish intentional viewport fill from unnecessary content padding." }, { "id": "F-L1-mobile-8", "surface": "L1-mobile", "rank": 8, "severity": "P3", "element": "Repeated labels and table footer", "problem": "'Quizzes' appears in both the summary card and page heading; the draft count appears in both the card and filter tabs. The table repeats the Title header and select-all checkbox at the bottom, immediately before bulk actions. These repetitions add noticeable chrome on an already narrow screen.", "fix": "Remove the redundant quiz summary on mobile and retain counts in the filters. Replace the repeated footer header with a compact selection/action bar if bottom-of-list selection is necessary." }, { "id": "F-L1-mobile-9", "surface": "L1-mobile", "rank": 9, "severity": "P3", "element": "Contrast and surface definition", "problem": "Thin pale borders, faint alternating row fills, and light secondary text provide weak separation between controls and content. Disabled pagination arrows are especially faint, although their disabled appearance is appropriate. Exact contrast compliance cannot be established from this screenshot alone.", "fix": "Strengthen secondary text and essential input boundaries, while retaining a clear distinction between enabled and disabled controls. Use fewer pale boxes and stronger typography to establish grouping." }, { "id": "F-D1-desktop-1", "surface": "D1-desktop", "rank": 1, "severity": "P2", "element": "Welcome hero and Getting started checklist", "problem": "The two saturated blue buttons at approximately y=164–206 dominate the page, while the incomplete 'Place a QWizz block' step appears around y=655 with a small outlined action. Completed setup steps remain above it. The visual hierarchy contradicts the visible setup state.", "fix": "Promote the first incomplete setup step into the top card with one dominant action. Collapse completed steps and make quiz creation and importing secondary once those tasks are complete." }, { "id": "F-D1-desktop-2", "surface": "D1-desktop", "rank": 2, "severity": "P2", "element": "Above-the-fold content allocation", "problem": "The welcome/toolbox card occupies approximately 319 pixels of height, but 'Recent quizzes' does not begin until around y=884. On this populated account, introductory UI and setup dominate while actual quiz content is pushed far down the page.", "fix": "Replace the large welcome card with a compact, state-aware header. Place recent quizzes directly below a concise status summary and move instructional utilities into expandable sections." }, { "id": "F-D1-desktop-3", "surface": "D1-desktop", "rank": 3, "severity": "P2", "element": "Shortcode toolbox", "problem": "Six shortcode fields and six icon-only copy controls occupy the lower half of the hero. This gives implementation syntax premium placement before the user reaches their quizzes. A first-time user is not told whether copying a shortcode is necessary or an alternative to placing a block.", "fix": "Move the toolbox into the existing collapsed 'Shortcodes' section. Explain when shortcodes are needed and use visibly labeled copy actions with confirmation." }, { "id": "F-D1-desktop-4", "surface": "D1-desktop", "rank": 4, "severity": "P2", "element": "Statistics strip at approximately y=389–431", "problem": "Five metrics are squeezed into a strip only about 42 pixels tall. Large values share space with extremely small qualifiers. 'Ready languages' combines '1 of 1' with '23 of 483 pools ready', introducing two denominators without explaining their relationship. 'Finished attempts' also contains sheets-printed and quiz counts.", "fix": "Give each metric one clear noun, value, and supporting line. Separate attempts from print activity and separate language readiness from pool readiness. Allow more vertical room or show fewer metrics." }, { "id": "F-D1-desktop-5", "surface": "D1-desktop", "rank": 5, "severity": "P2", "element": "Repeated creation, navigation, and onboarding entry points", "problem": "'Add New Quiz', 'Create a quiz', and 'Create quiz' compete as differently styled entrances to apparently similar work. 'Getting started' is followed much later by 'Get started'; the expanded shortcode toolbox is followed by another 'Shortcodes' section. Repeated 'All quizzes' links add further navigation noise.", "fix": "Use one consistent creation label and one primary placement. Consolidate setup guidance and shortcode access, keeping repeated navigation only where it serves a distinct local context." }, { "id": "F-D1-desktop-6", "surface": "D1-desktop", "rank": 6, "severity": "P2", "element": "Attention and Next content ideas", "problem": "Warning text starts around x=105 while its action sits at the extreme right near x=729. Some rows leave more than 400 pixels between the statement and its link, without a strong row container to connect them. Identical 'Open subjects' and 'Add questions' labels make the destination difficult to distinguish while scanning.", "fix": "Place each action immediately after its issue summary or use clearly grouped rows with a consistent action column. Give repeated actions contextual labels or context-specific destinations." }, { "id": "F-D1-desktop-7", "surface": "D1-desktop", "rank": 7, "severity": "P2", "element": "Recent quizzes list", "problem": "Quiz names begin at x=105, metadata around x=341, and tiny 'Edit'/'Play' links around x=693–729. The five rows are only about 24 pixels apart, with no visible header or row boundaries. Editing—the likely core repeat action—has much less visual presence than the introductory controls.", "fix": "Use a structured list or table with clear status and action columns, larger row targets, and clickable quiz titles. Give Edit a reliably discoverable target rather than a tiny edge-aligned text link." }, { "id": "F-D1-desktop-8", "surface": "D1-desktop", "rank": 8, "severity": "P3", "element": "Supporting text, metadata, and low-emphasis links", "problem": "At the supplied 733-pixel image width, much of the secondary copy renders approximately 7–9 pixels tall. Gray descriptions and metadata sit on very pale gray surfaces, creating weak perceptual contrast. The headline is dramatically easier to read than the operational details users need.", "fix": "Increase supporting text size and weight at the actual CSS viewport, darken secondary text, and verify contrast ratios. Preserve hierarchy through spacing and weight rather than making useful information extremely faint and small." }, { "id": "F-D1-desktop-9", "surface": "D1-desktop", "rank": 9, "severity": "P3", "element": "Main-column spacing and density", "problem": "Density is inconsistent: the top metric strip is compressed, while lower sections stretch sparse content across approximately 623 pixels. The single-row 'Language pools' section consumes about 64 pixels, and repeated separators and section padding extend the page to roughly 1,568 pixels without a comparable increase in useful content.", "fix": "Use a consistent spacing scale and content-appropriate layouts. Combine related readiness sections, keep sparse summaries compact, and reserve larger spacing for meaningful changes of task." }, { "id": "F-D1-desktop-10", "surface": "D1-desktop", "rank": 10, "severity": "P3", "element": "Setup checklist alignment and control styling", "problem": "Checklist headings begin around x=120, nested status text around x=136, and 'View starter quizzes' floats separately around x=446. Across the page, outlined buttons, filled buttons, tiny underlined links, and icon controls communicate similar actions inconsistently.", "fix": "Align checklist content to a single text grid with a dedicated status-icon gutter and a consistent action position. Standardize primary, secondary, and tertiary action treatments across sections." }, { "id": "F-D1-mobile-1", "surface": "D1-mobile", "rank": 1, "severity": "P2", "element": "Header, welcome panel, and “Getting started” checklist", "problem": "A first-time user must choose between overlapping creation paths. The outlined “Add New Quiz” control sits above two equally prominent blue buttons, while the checklist introduces more creation controls much farther down. It is unclear whether importing questions is a prerequisite, an alternative, or an optional step.", "fix": "Define one primary onboarding path and place its next action directly beneath the page title. Make importing a secondary action, and explain whether users can create a quiz before adding questions. Remove redundant entry points from the onboarding view." }, { "id": "F-D1-mobile-2", "surface": "D1-mobile", "rank": 2, "severity": "P2", "element": "Welcome panel and shortcode toolbox, approximately y=66–462", "problem": "Introductory chrome and six shortcode rows consume roughly the first 400 pixels of the main page. “Getting started” does not appear until about y=512, and “Recent quizzes” begins around y=859. Implementation details dominate before the user reaches either the guided workflow or their existing content.", "fix": "Move recent quizzes and the next setup step immediately below the title. Collapse shortcodes into a contextual disclosure or separate tools page. Show each shortcode where its corresponding quiz or library is managed." }, { "id": "F-D1-mobile-3", "surface": "D1-mobile", "rank": 3, "severity": "P2", "element": "Typography across descriptions, metadata, and utility links", "problem": "At the supplied 200-pixel image width, much of the supporting text is only approximately 5–7 pixels high. Quiz metadata, shortcode descriptions, and small links are substantially harder to read than the welcome headline. The page fits information by shrinking its presentation rather than prioritizing it.", "fix": "Verify typography at the actual rendered viewport. Use a readable body-text baseline, preserve legible secondary text, and remove or disclose low-priority details instead of compressing them. Do not rely on this scaled screenshot to validate production font sizes." }, { "id": "F-D1-mobile-4", "surface": "D1-mobile", "rank": 4, "severity": "P2", "element": "Setup checklist and “Attention” section", "problem": "The checklist mixes completed steps that still contain buttons, an incomplete placement step, a full-width “View starter quizzes” button, and small dismissal links. Immediately below, “Attention” introduces additional draft and subject tasks. These sections do not clearly distinguish the next required action from optional maintenance.", "fix": "Show one explicit “Next step” with a dominant action. Collapse completed steps, label optional tasks, and move maintenance notices into a separate, lower-priority area." }, { "id": "F-D1-mobile-5", "surface": "D1-mobile", "rank": 5, "severity": "P2", "element": "“Subjects,” “Attention,” and “Next content ideas”", "problem": "The same subject shortages are surfaced repeatedly: subject rows show question counts, “Attention” links to subject problems, and “Next content ideas” repeats subjects with explanatory sentences and individual “Add questions” links. The repetition extends the page without adding equivalent decision value.", "fix": "Consolidate these into one subject-health list with counts, a clear shortage indicator, and an action per row. Surface only the highest-priority recommendations on the dashboard." }, { "id": "F-D1-mobile-6", "surface": "D1-mobile", "rank": 6, "severity": "P2", "element": "Small text actions and shortcode copy controls", "problem": "Actions such as “Edit,” “Play,” “Open settings,” and “Dismiss Welcome” have very small visible affordances. The shortcode copy controls use two overlapping rectangles without visible labels. Their purpose is inferable to experienced users, but not explicitly communicated to newcomers.", "fix": "Give frequent actions clearly padded controls and use a visible “Copy” label for shortcodes, followed by confirmation feedback. Keep dismissal actions secondary but readable. Verify actual hit areas; they cannot be established from the screenshot." }, { "id": "F-D1-mobile-7", "surface": "D1-mobile", "rank": 7, "severity": "P3", "element": "Content gutters and button alignment", "problem": "The page uses several competing horizontal anchors: section headings start around x=6, welcome content around x=16, and checklist controls around x=19. Most card buttons are inset, but “View starter quizzes” stretches almost edge to edge. This makes the checklist feel like several unrelated components rather than one system.", "fix": "Use a consistent outer gutter and one nested indentation for checklist content. Align button edges with their associated text, and reserve full-width treatment for the single primary action." }, { "id": "F-D1-mobile-8", "surface": "D1-mobile", "rank": 8, "severity": "P3", "element": "Secondary text, links, and shortcode fields", "problem": "Pale gray descriptions, lavender utility links, and lightly tinted shortcode fields produce weak visual separation on the near-white background. Several important secondary actions look more subdued than the decorative welcome treatment. Exact contrast ratios cannot be determined reliably from this screenshot.", "fix": "Darken secondary text and actionable links, strengthen field boundaries where needed, and test the actual color tokens against accessibility contrast requirements." }, { "id": "F-D1-mobile-9", "surface": "D1-mobile", "rank": 9, "severity": "P3", "element": "Overall density and bottom utility sections", "problem": "The page is simultaneously crowded and inefficient: it contains many tiny labels and repeated explanations, yet quiz and subject rows leave substantial unused horizontal space. Utility disclosures continue to roughly y=1510, producing a long scan with little distinction between primary content and occasional administration.", "fix": "Replace repeated prose with compact structured rows, group item actions consistently, and move rarely used settings into a dedicated destination. Shorten the page through subtraction, not tighter typography." }, { "id": "F-S1-desktop-1", "surface": "S1-desktop", "rank": 1, "severity": "P2", "element": "Page structure and action hierarchy", "problem": "The roughly 1,568-pixel-tall capture mixes several unrelated tasks under “QuizWizz Settings.” The top offers settings tabs and an “All changes saved” status, but the bottom introduces file import and draft creation. There is no clear explanation of the intended starting task or the relationship between these workflows.", "fix": "Keep defaults and player configuration in Settings. Move draft creation to Quizzes, and move backup/import utilities to a dedicated tools page. Add a short explanation that settings save automatically and identify which quizzes they affect." }, { "id": "F-S1-desktop-2", "surface": "S1-desktop", "rank": 2, "severity": "P2", "element": "General / Player / Data / Advanced navigation", "problem": "“General” appears selected near y=125, yet Online Player, Data & Lifecycle, and Advanced are all visible farther down the same page. The tab styling implies content switching, while the rendered page looks like an anchor-navigation document.", "fix": "Either show only the selected tab’s content or explicitly implement section navigation with anchor links and an active-section indicator. Use matching names in navigation and section headings." }, { "id": "F-S1-desktop-3", "surface": "S1-desktop", "rank": 3, "severity": "P2", "element": "Text scale and secondary-text contrast", "problem": "At the supplied 613-pixel image width, many descriptions and labels render only about 5–7 pixels tall. Pale gray helper text beneath cards, the top statistics, and the portability explanation are especially difficult to scan. Small type, thin strokes, and low contrast compound one another.", "fix": "Verify typography at native browser scale. Use approximately 14–16 CSS pixels for body text and at least 12–14 for secondary labels, with normal-text contrast of at least 4.5:1. Shorten descriptions instead of shrinking them." }, { "id": "F-S1-desktop-4", "surface": "S1-desktop", "rank": 4, "severity": "P2", "element": "Available experiences selection cards", "problem": "All four cards—Generated, Quiz library, Play, and Printable PDF—use strong blue outlines and small checked circles. The visual treatment does not clearly distinguish independent enable/disable controls from selectable navigation cards, and the category split between sources and outcomes is visually weak.", "fix": "Use explicit labeled switches or checkboxes for each capability. Make enabled state readable through both text and control shape, and give Quiz sources and Visitor outcomes clearer grouping." }, { "id": "F-S1-desktop-5", "surface": "S1-desktop", "rank": 5, "severity": "P2", "element": "Question imports and draft creation panel", "problem": "The panel combines a JSON drop zone, a disabled-looking “Import draft quiz” button, question filters, and an active “Create draft” button. A first-time user cannot readily tell whether uploading is required, whether these are alternative workflows, or why one action is unavailable.", "fix": "Split this into “Import from JSON” and “Create from question library.” Give each its own instructions and action. Place a prerequisite message beside the disabled import button." }, { "id": "F-S1-desktop-6", "surface": "S1-desktop", "rank": 6, "severity": "P2", "element": "Icon-only toolbar and diagnostics controls", "problem": "The two small square controls immediately before “All changes saved,” plus the download and question-mark controls under Support diagnostics, lack persistent text labels. Their purpose must be inferred from small glyphs. The Quiz size stepper also shows a bare value of 7 rather than a self-contained unit-bearing value.", "fix": "Add visible labels for utility actions, such as “Download diagnostics” and “Help,” after confirming their actual functions. Provide accessible names and tooltips. Present the size value as “7 questions.”" }, { "id": "F-S1-desktop-7", "surface": "S1-desktop", "rank": 7, "severity": "P3", "element": "Card grid and unused right column", "problem": "The content area is approximately 525 pixels wide, but QuizWizz interface, Feedback, Full portability, and Support diagnostics occupy only about 245 pixels on the left. The Feedback card alone leaves roughly 260 pixels of unused width across about 270 pixels of height. This produces a long page without useful visual breathing room.", "fix": "Use a consistent layout: full-width compact settings rows for single sections, or a deliberate two-column grid for related groups. Avoid leaving isolated half-width cards beneath full-width section banners." }, { "id": "F-S1-desktop-8", "surface": "S1-desktop", "rank": 8, "severity": "P3", "element": "Global statistics and section banners", "problem": "Five metric tiles occupy the top of a settings task, ahead of its title. Repeated full-width section banners add more framing while many actual settings remain confined to narrow cards. Dashboard chrome gets disproportionate prominence compared with editable content.", "fix": "Remove or collapse dashboard statistics on settings pages. Replace large section banners with compact headings and a restrained divider, preserving space for controls and explanations." }, { "id": "F-S1-desktop-9", "surface": "S1-desktop", "rank": 9, "severity": "P3", "element": "Grid alignment and language options", "problem": "Outer section blocks begin around x=88, many inner cards around x=95, and controls around x=101, creating several closely spaced left edges. In Content languages, three language pills fit on the first row while Español sits alone below, leaving an uneven block.", "fix": "Standardize outer and inner padding on a small spacing scale. Align section headings with their associated controls. Use a balanced two-by-two language grid or a compact checkbox list." }, { "id": "F-S1-desktop-10", "surface": "S1-desktop", "rank": 10, "severity": "P3", "element": "Repeated labels and icon collisions", "problem": "“General,” “General defaults,” and “Default questions” repeat similar language without clarifying scope. Several card headings, including Available experiences and QuizWizz interface, place icons so close to text that they visually run together at this capture size.", "fix": "Use distinct, task-specific labels such as “Quiz defaults” and “Questions per quiz.” Reserve a consistent icon box and an approximately 8-CSS-pixel gap before heading text." }, { "id": "F-S1-mobile-1", "surface": "S1-mobile", "rank": 1, "severity": "P2", "element": "Overall page structure", "problem": "“General defaults,” “Data & Lifecycle,” and “Advanced” introduce substantially different tasks, but all occupy the same narrow scrolling column. Draft creation appears near y=1360, far from the settings header near y=90. The strongest filled action belongs to this secondary workflow rather than the page’s main configuration task.", "fix": "Separate configuration from import/export and diagnostics using clearly labeled navigation. Keep quiz settings as the default view and give each secondary workflow its own entry point and primary action." }, { "id": "F-S1-mobile-2", "surface": "S1-mobile", "rank": 2, "severity": "P2", "element": "Settings header and action row, approximately y=81–119", "problem": "The title, “General,” “Player,” search icon, eye icon, and “Saved” status are crowded into about 40 pixels of height. The filled “General” tab attracts more attention than the page title. “Saved” suggests persistence but does not explain whether changes save automatically, leaving the completion model unclear.", "fix": "Give the title its own row, separate navigation from utilities, and explicitly show “Changes saved automatically” if that is the actual behavior. Use an active-tab treatment that does not resemble the primary action." }, { "id": "F-S1-mobile-3", "surface": "S1-mobile", "rank": 3, "severity": "P2", "element": "Typography and control sizing throughout", "problem": "At the supplied 200-pixel image width, many descriptions are only about 4–6 pixels tall, while several header controls are roughly 18 pixels high. Helper text, field labels, and secondary actions become difficult to scan before their meaning can be understood. The screenshot may be scaled down, so native CSS sizes cannot be established.", "fix": "Validate at the actual viewport and device scale. Use comfortably readable body and helper text, larger control heights, and fewer simultaneous details rather than shrinking an entire administrative interface into the available width." }, { "id": "F-S1-mobile-4", "surface": "S1-mobile", "rank": 4, "severity": "P2", "element": "Question Imports workflow, approximately y=1060–1373", "problem": "File selection, a gray “Import draft quiz” control, explanatory copy, and a separate draft-generation form are stacked inside one card. The disabled-looking import action has no adjacent, explicit requirement explaining how to enable it. “Create draft” is visually dominant, but its relationship to importing a JSON file is unclear.", "fix": "Split this card into “Import from file” and “Generate questions.” Put upload requirements directly beside the file action, explain the disabled state, and give each flow a distinct action label." }, { "id": "F-S1-mobile-5", "surface": "S1-mobile", "rank": 5, "severity": "P2", "element": "Icon-only controls in the header and Support diagnostics", "problem": "The search and eye controls near y=108 and the two diagnostic buttons near y=1480 lack visible text labels. An eye could mean preview, inspect, or show details; the diagnostic action cannot be confidently inferred from the icon alone.", "fix": "Add short visible labels such as “Preview” and task-specific diagnostic labels. Tooltips and accessible names should supplement, not replace, visible identification for unfamiliar actions." }, { "id": "F-S1-mobile-6", "surface": "S1-mobile", "rank": 6, "severity": "P2", "element": "Selection styling in Available experiences, Content languages, and Feedback", "problem": "Blue outlines indicate several different things: enabled experience cards, selected languages, selected feedback behavior, and ordinary action buttons. All four experience cards are outlined and checked, so their heavy borders contribute little differentiation while making the upper section visually noisy.", "fix": "Reserve button styling for actions. Use explicit checkboxes or switches for independently enabled experiences and radio controls for mutually exclusive behavior. Make selected states clear without outlining nearly every large surface." }, { "id": "F-S1-mobile-7", "surface": "S1-mobile", "rank": 7, "severity": "P3", "element": "Nested cards, borders, and spacing", "problem": "The narrow column repeatedly nests a section surface, an inner card, and another bordered control. For example, experience options occupy approximately x=24–189 inside a surrounding card beginning near x=18. Those small inset differences consume useful width while adding several competing edges. Overall density is high, yet much of the visual attention goes to containers rather than settings.", "fix": "Use one consistent content gutter and fewer nesting levels. Replace most enclosing cards with section headings, spacing, and occasional dividers; retain borders only where they clarify interaction." }, { "id": "F-S1-mobile-8", "surface": "S1-mobile", "rank": 8, "severity": "P3", "element": "Secondary text, disabled styling, and informational notes", "problem": "Small gray descriptions sit on white or near-white surfaces, with little visual separation between helper text and disabled-looking content. Repeated reassurance notes around draft creation add scanning weight without being consolidated into a clear workflow explanation. Exact contrast ratios cannot be measured reliably from this screenshot.", "fix": "Increase helper-text contrast, distinguish disabled controls through more than muted text, and consolidate draft/publication guidance into one concise note beside the relevant action." }, { "id": "F-S1-mobile-9", "surface": "S1-mobile", "rank": 9, "severity": "P3", "element": "Top administrative chrome, approximately y=0–73", "problem": "The dark toolbar, quiz counters, and “Screen Options” occupy roughly the first 73 pixels before the settings title. They introduce account-wide information before establishing the current task. Content dominates the full page, but chrome dominates the initial orientation area.", "fix": "Reduce or relocate global counters on this screen and bring the page title and purpose closer to the top. Keep secondary administrative controls visually subordinate." } ] }