Eure Aufgaben: die Reihenfolge, in der man denkt
Filipe: "die seite eure aufgaben, ich will dass du die so krass perfektionierst, ich will dass du die so krass uebersichtlich machst." ERST GEMESSEN, DANN ANGEFASST. Mit sechs Leuten, so wie im echten Team: Handy, Person gewaehlt 8281 px = 10,6 Bildschirme Handy, Katalog offen 11636 px = 14,9 Bildschirme Und die Personenwahl -- der ERSTE Schritt -- begann am Handy bei Bildschirm 5,3. Man scrollte an allem vorbei, um anzufangen; und was man dabei ueberscrollte (Formular, Katalog), betraf genau die Person, die man noch gar nicht gewaehlt hatte. DER PLAN STAND SCHON DA. Im HTML steht seit dem 15.09. ein Kommentar: "1. Die Ampel. 2. Die Personen. 3. Die Karte." Genau so war es gedacht -- und genau so war es nicht mehr: Am 22.09. kam das Verteilen auf die Seite, am 23.09. der Katalog, und beide sind davor gerutscht. Der Kommentar beschrieb eine Ordnung, die es nicht mehr gab. Wieder eine Bestandsliste, die altert, waehrend jemand weiterarbeitet. Die Reihenfolge ist jetzt die, in der man denkt: Wie steht das Team? -> Wen nehme ich mir vor? -> Was gebe ich ihm? -> Was liegt schon bei ihm? -> Wie steht er da? Handy: Personenwahl beginnt bei Bildschirm 0,5 statt 5,3 Rechner: bei 0,4 statt 2,0 DIE KACHELN AM HANDY kosteten 1176 px fuer sechs Leute -- anderthalb Bildschirme nur fuer die Frage, wen man sich vornimmt. Grund war "min-width: 260px", und der Grund DAFUER steht daneben: Die drei Bilanz-Kaesten wurden sonst gequetscht. Das stimmt, solange sie NEBENEINANDER stehen. Am Handy stehen sie jetzt untereinander, jeder eine Zeile (Ziffer links, Wort rechts) -- so kommt die Kachel mit der halben Bildschirmbreite aus und zwei passen nebeneinander: 618 px. KEINE ZAHL FAELLT WEG. Wer verteilt, muss sehen, wer schon wie viel hat; das ist der Zweck dieser Kaesten. Sie werden kleiner, nicht weniger. Unter 380 px wieder eine Kachel je Zeile -- zwei haetten dort je 145 px, und "verschieden gesehen" waere nicht mehr zu lesen. DER SPRUNG BEIM KACHELKLICK IST WEG. Er war richtig, solange die Karte direkt unter der Auswahl stand. Jetzt liegen Formular, Katalog und ihre Aufgaben dazwischen -- ein Sprung zur Karte uebersaehe genau die drei Dinge, die man nach der Wahl zuerst braucht. (Filipe, 15.09.: "die seite soll sich nicht immer bewegen wenn ich auf was druecke.") Der Sprung von der Talentseite bleibt, dort ist er gemeint. UND DER CHAT KEHRT DAHIN ZURUECK, WO MAN AUFGEHOERT HAT. Die Linie "Ab hier neu" gibt es seit Tagen -- sie wurde gezeichnet und sofort ueberscrollt, weil der Verlauf beim Oeffnen ans Ende sprang. Wer nach zwei Tagen zurueckkam, landete unten und suchte die Stelle, indem er Uhrzeiten las. Jetzt springt er EINMAL beim Oeffnen dorthin, auf ein Viertel Hoehe: darueber der Zusammenhang, darunter das Neue. Danach gilt wieder die alte Regel, damit eine eintreffende Nachricht einen nicht aus dem Lesen reisst. Gemessen: entwicklung 48, entwicklung-kacheln 15, modi-katalog 133, bewerbung-aufgaben 101, chat-optik -- alle ohne Befund. NOCH NICHT FERTIG: Die Entwicklungskarte ist mit 5975 px weiterhin 72 % der Seite. Das ist der naechste Schritt. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
+58
-38
@@ -7,14 +7,14 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||||
<meta name="theme-color" content="#06090f" />
|
||||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609232255" />
|
||||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609232255" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609232255" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609232255" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609232255" />
|
||||
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609232255" />
|
||||
<link rel="stylesheet" href="assets/css/module.css?v=202609232255" />
|
||||
<link rel="stylesheet" href="assets/css/haus.css?v=202609232255" />
|
||||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609232306" />
|
||||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609232306" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609232306" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609232306" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609232306" />
|
||||
<link rel="stylesheet" href="assets/css/entwicklung.css?v=202609232306" />
|
||||
<link rel="stylesheet" href="assets/css/module.css?v=202609232306" />
|
||||
<link rel="stylesheet" href="assets/css/haus.css?v=202609232306" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -51,6 +51,47 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==================================================================
|
||||
DIE REIHENFOLGE AUF DIESER SEITE IST DAS EIGENTLICHE DESIGN
|
||||
|
||||
1. Die Ampel — sie betrifft Menschen, nicht Prozesse.
|
||||
2. Die Personen — wen gehe ich heute durch.
|
||||
3. Was er bekommt — das Formular und der Katalog.
|
||||
4. Was bei ihm liegt — seine Aufgaben.
|
||||
5. Die Karte — und darin die ABWEICHUNGEN zuerst.
|
||||
6. Ganz unten der Weg zu den eigenen sechs Fragen — sie haben
|
||||
seit dem 15.09.2026 eine eigene Seite.
|
||||
|
||||
Wer die Seite öffnet, soll die wichtigste Sache zuerst sehen, und
|
||||
das ist nicht die Liste. Eine Ampel unter 34 Beobachtungen hätte
|
||||
niemand je gelesen.
|
||||
|
||||
DIESE ORDNUNG WAR ZWISCHENZEITLICH VERLOREN (berichtigt
|
||||
23.09.2026). Die Punkte 1 bis 3 standen hier schon seit dem
|
||||
15.09. — nur nicht mehr in dieser Reihenfolge: Am 22.09. kam das
|
||||
Verteilen auf die Seite, am 23.09. der Katalog, und beide sind
|
||||
VOR die Ampel und die Personenwahl gerutscht.
|
||||
|
||||
Gemessen mit sechs Leuten und offenem Katalog: Am Handy begann
|
||||
die Personenwahl erst bei Bildschirm 5,3 von 14,9. Man scrollte
|
||||
also an allem vorbei, um überhaupt anzufangen — und das, was man
|
||||
dabei überscrollte (Formular, Katalog), betrifft genau die
|
||||
Person, die man noch gar nicht gewählt hatte.
|
||||
|
||||
Filipe: „ich will dass du die so krass übersichtlich machst."
|
||||
|
||||
Die Reihenfolge ist jetzt die, in der man denkt: Wie steht das
|
||||
Team? → Wen nehme ich mir vor? → Was gebe ich ihm? → Was liegt
|
||||
schon bei ihm? → Wie steht er da?
|
||||
============================================================== -->
|
||||
|
||||
<section id="ampel" class="e-ampel" hidden></section>
|
||||
|
||||
<section id="personen-block" hidden>
|
||||
<h2 class="e-abschnitt">Wen gehst du durch?</h2>
|
||||
<div id="personen" class="e-personen" role="group" aria-label="Person wählen" aria-busy="true"></div>
|
||||
</section>
|
||||
|
||||
<!-- VERTEILEN GEHOERT HIERHER (22.09.2026).
|
||||
|
||||
Filipe, zum wiederholten Mal: "ich will immer noch ... dass man
|
||||
@@ -224,27 +265,6 @@
|
||||
|
||||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||||
|
||||
<!-- ==================================================================
|
||||
DIE REIHENFOLGE AUF DIESER SEITE IST DAS EIGENTLICHE DESIGN
|
||||
|
||||
1. Die Ampel — sie betrifft Menschen, nicht Prozesse.
|
||||
2. Die Personen — wen gehe ich heute durch.
|
||||
3. Die Karte — und darin die ABWEICHUNGEN zuerst.
|
||||
4. Ganz unten der Weg zu den eigenen sechs Fragen — sie haben
|
||||
seit dem 15.09.2026 eine eigene Seite.
|
||||
|
||||
Wer die Seite öffnet, soll die wichtigste Sache zuerst sehen, und
|
||||
das ist nicht die Liste. Eine Ampel unter 34 Beobachtungen hätte
|
||||
niemand je gelesen.
|
||||
============================================================== -->
|
||||
|
||||
<section id="ampel" class="e-ampel" hidden></section>
|
||||
|
||||
<section id="personen-block" hidden>
|
||||
<h2 class="e-abschnitt">Wen gehst du durch?</h2>
|
||||
<div id="personen" class="e-personen" role="group" aria-label="Person wählen" aria-busy="true"></div>
|
||||
</section>
|
||||
|
||||
<section id="karte" class="e-karte" hidden></section>
|
||||
|
||||
<!-- DEINE EIGENE KARTE.
|
||||
@@ -277,19 +297,19 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/meldung.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/nachfrage.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/meldung.js?v=202609232306" defer></script>
|
||||
<script src="assets/js/nachfrage.js?v=202609232306" defer></script>
|
||||
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/installieren.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/holen.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609232306" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609232306" defer></script>
|
||||
<script src="assets/js/installieren.js?v=202609232306" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609232306" defer></script>
|
||||
<script src="assets/js/holen.js?v=202609232306" defer></script>
|
||||
<!-- VOR entwicklung.js: Die Seite richtet den Katalog beim Start ein,
|
||||
also muss es ihn zu dem Zeitpunkt geben. Mit "defer" laufen beide
|
||||
in Dokumentreihenfolge. -->
|
||||
<script src="assets/js/vorlagenbrett.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/entwicklung.js?v=202609232255" defer></script>
|
||||
<script src="assets/js/vorlagenbrett.js?v=202609232306" defer></script>
|
||||
<script src="assets/js/entwicklung.js?v=202609232306" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user