From f5e71f2f1cc558c1eff3d727fdca1214f3ead261 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 14 Sep 2025 01:50:59 +0200 Subject: [PATCH] UX: usertest + fix some surfaced issues, see #2108 --- Docs/UserTests/2025-09-12 Usertest Paul.md | 49 +++++++++++++++++++++ langs/en.json | 11 +++++ public/css/index-tailwind-output.css | 11 +++++ src/UI/Base/SidebarUnit.svelte | 6 ++- src/UI/BigComponents/CompassWidget.svelte | 42 +++++++++++++++++- src/UI/BigComponents/MenuDrawerIndex.svelte | 3 +- src/UI/Search/ActiveFilters.svelte | 3 +- src/UI/Search/SearchResults.svelte | 2 +- src/index.css | 6 +++ 9 files changed, 128 insertions(+), 5 deletions(-) create mode 100644 Docs/UserTests/2025-09-12 Usertest Paul.md diff --git a/Docs/UserTests/2025-09-12 Usertest Paul.md b/Docs/UserTests/2025-09-12 Usertest Paul.md new file mode 100644 index 000000000..9756619f1 --- /dev/null +++ b/Docs/UserTests/2025-09-12 Usertest Paul.md @@ -0,0 +1,49 @@ +User test Paul +Tech Skills: High, low OSM knowledge +Demography: M, ~22 +Language: NL +MapComplete App (Google-Play versie) + +No predetermined goal to achieve + +- Wilt taalfout fixen: ommetoer via 3 login systemen.... + Out of scope voor beginners + +- Loginscherm is wit: + Chrome openen ernaast + Technische bug, maar hoe te fixen? + +- Toiletten: vragen over databron + +- Hackerspace kaart: ik heb twee symbolen, wat is het verschil? Ik heb geen legende? + -> Achtergrondkaart selectie? Daar legende? + Aanklikken symbooltjes: softwaregericht / makerspace... Ooohhhh + - OK, is duidelijk + +- "Geen idee wat panoramax is" > Open Panoramax/Mapillary hier + Geen idee wat dit is + Heeft wat meer info nodig (!) + "Allemaal links naar andere maps..." + +- Zoekfunctie: de dingen staan in de weg + -> Ik kan op terug klikken. Ja nee, dat dacht ik al + -> Terug terug gaat niet terug + -> "Gouda". Ja nee, dat is niet handig... + Ik wil een ander thema... Ah ja + -> 'Active filters' staat in de weg - max height: 1/2 height + -> "Clear text"-knop staat permanent aan, opvolgtest: niet gevonden + +- Kompas: "ooh, het wijzertje is mijn kompas!" -> Popup tonen met "wijst nu naar je kompas" + Fixed by adding popovers + +- Trees: icoontje ontbreekt in app + Niemand heeft onze boom toegevoegd! Toevoegen + "Ja, het is een loofboom" + Locatie toevoegen gaat vlot + Voeg toe! Gaat vlot + Foto toevoegen: gaat ook vlot + Plantnet-detectie: gaat vlot, maar niet de juiste boomsoort + "Oh, ik kon er gewoon op klikken" -> duidelijk maken voor preview + +- Waarom staan restaurants los van cafés? + OSM-keuze diff --git a/langs/en.json b/langs/en.json index b2198110f..8878e0bc8 100644 --- a/langs/en.json +++ b/langs/en.json @@ -32,6 +32,17 @@ "intro": "Get in touch with other people to get to know them, learn from them, …", "title": "Get in touch with others" }, + "compass": { + "E": "Map has east pointing up", + "N": "Map has north pointing up", + "NE": "Map has northeast pointing up", + "NW": "Map has northwest pointing up", + "S": "Map has south pointing up", + "SE": "Map has southeast pointing up", + "SW": "Map has southwest pointing up", + "W": "Map has west pointing up", + "toCompass": "The map is now oriented to the device orientation" + }, "copy": { "button": "Create a copy", "confirm": "Create copy at the specified location", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 0e54a4fa9..ddc71d6b0 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -1970,6 +1970,10 @@ input[type="range"].range-lg::-moz-range-thumb { max-height: 16rem; } +.max-h-\[30vh\] { + max-height: 30vh; +} + .max-h-full { max-height: 100%; } @@ -5346,6 +5350,13 @@ input[type="text"] { * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + /* Disable the 'clear text field' button in chrome */ + -webkit-appearance: none; + appearance: none; +} + /********* BUTTONS ***********/ button, .button { diff --git a/src/UI/Base/SidebarUnit.svelte b/src/UI/Base/SidebarUnit.svelte index 589c18ee5..95a1042ca 100644 --- a/src/UI/Base/SidebarUnit.svelte +++ b/src/UI/Base/SidebarUnit.svelte @@ -1,4 +1,8 @@ -
+ + +
diff --git a/src/UI/BigComponents/CompassWidget.svelte b/src/UI/BigComponents/CompassWidget.svelte index 3e995f7f2..962674c6d 100644 --- a/src/UI/BigComponents/CompassWidget.svelte +++ b/src/UI/BigComponents/CompassWidget.svelte @@ -7,6 +7,12 @@ import Compass_back from "../../assets/svg/Compass_back.svelte" import Compass_needle from "../../assets/svg/Compass_needle.svelte" import North_arrow from "../../assets/svg/North_arrow.svelte" + import { Popover } from "flowbite-svelte" + import { Translation, TypedTranslation } from "../i18n/Translation" + import TrDyn from "../Base/TrDyn.svelte" + import Translations from "../i18n/Translations" + import Tr from "../Base/Tr.svelte" + import { GeoOperations } from "../../Logic/GeoOperations" export let mapProperties: { rotation: UIEventSource; allowRotating: Store } let orientation = Orientation.singleton.alpha @@ -17,24 +23,48 @@ } }) let mapRotation = mapProperties.rotation + let showHint = new UIEventSource(false) + showHint.stabilized(4000).addCallback(isShown => { + if (isShown) { + showHint.set(false) + } + }) + let hovered = new UIEventSource(false) + let focused = new UIEventSource(false) + + let hint: UIEventSource = new UIEventSource(undefined) export let size = "h-10 w-10" let wrapperClass = "absolute top-0 left-0 " + size let compassLoaded = Orientation.singleton.gotMeasurement let allowRotation = mapProperties.allowRotating function clicked() { + showHint.set(true) if (mapProperties.rotation.data === 0) { if (mapProperties.allowRotating.data && compassLoaded.data) { mapProperties.rotation.set(orientation.data) + hint.set(Translations.t.compass.toCompass) } } else { mapProperties.rotation.set(0) + hint.set(undefined) } } + + let orientationText = mapProperties.rotation.mapD(r => { + const key = GeoOperations.bearingToHuman(r) + return Translations.t.compass[key] + }) + + let deviceOrientation = Orientation.singleton.alpha + + Orientation.singleton.fakeMeasurements() // TODO Remove {#if $allowRotation || $gotNonZero} -