Wireframe-Design für ein Prüfungs-Dashboard für Studierende

Ein KPI-zentriertes Studierenden-Dashboard

Zentou AI · Portal WIREFRAME v0.1 stellt ein Desktop-Studierendenportal als Low-Fidelity-Entwurf vor. Das ausgewählte Konzept ist „B · ダッシュボード“ mit dem Label DATA-FORWARD; seine erklärte Struktur stellt KPIs an den Anfang, damit Lernende ihre aktuelle Position erfassen, bevor sie in Details scrollen.

Das Dashboard begrüßt motoki.daisuke und zeigt drei statische Zeitraumlabels: 今週, 今月 und 通算, wobei 今月 hervorgehoben ist. Vier Karten zeigen 認定ランク A2 mit 基礎認定, 偏差値 39 mit +3.2 前回比, 次回まで 1日 mit 04/19 10:00 und 練習進捗 62%. Sie trennen Rang, Vergleich, Dringlichkeit und Aktivität; das HTML verknüpft die Zeitraumlabels nicht mit Datenänderungen.

Der Kompromiss ist eine bewusste Dichte. Vier Karten ermöglichen einen schnellen Vergleich, doch die Werte erklären weder ihre Berechnung noch ihre Beziehung zueinander. In diesem Artefakt sind sie Beispielinhalte in einem visuellen Entwurf und kein Beleg für Live-Prüfungsdaten oder angebundene Studierendendatensätze.

01

Rang

A2 und 基礎認定 vermitteln einen kategorialen Zertifizierungsstatus, getrennt vom numerischen 偏差値.

02

Veränderung

39 und ↑ +3.2 前回比 verbinden einen aktuellen Wert mit einem Vergleich und implizieren eine Entwicklung, ohne das Vergleichsfenster zu definieren.

03

Dringlichkeit

1日 und 04/19 10:00 machen die nächste Prüfung zu einem fristorientierten Status.

04

Aktivität

62% mit einem segmentierten Balken deutet Abschluss an, lässt die zugrunde liegende Definition der Aktivität aber offen.

Lernentscheidungen, die die Komposition unterstützt

Das Layout hilft Studierenden bei der Entscheidung, was sie nach dem Öffnen des Portals als Nächstes tun. Eine linke Navigationsspalte listet ダッシュボード, 試験日程, 成績一覧, 練習問題 und 学習計画, während der Hauptbereich von der Zusammenfassung über Belege zur Handlung führt. Diese Reihenfolge verringert die Notwendigkeit, ein Ziel zu wählen, bevor man den aktuellen Stand sieht.

CHART · 偏差値推移 verwendet eine rote Linie mit Datenpunkten, während SUBJECTS · 科目別 fünf schraffierte Balken unter den Originalbeschriftungen 開発 / 国 / 数 / 英 / 理 zeigt. Die Bereiche haben gezeichnete Achsenlinien, aber keine numerischen Skalen, Datumsangaben oder Werte pro Balken. Sie unterscheiden einen vorgeschlagenen Notenverlauf vom Fächervergleich, ohne gemessene Leistungsdaten zu liefern.

Der untere Bereich „NEXT STEP / 次にやること“ listet zwei konkrete Aktionen: die Prüfungsanmeldung abschließen und zehn Aufgaben im schwachen Bereich 論理 lösen. Das ist ein nützlicher Übergang von der Diagnose zum Handeln. Der Kompromiss: Der Entwurf schlägt Aktionsbezeichnungen vor, zeigt aber weder den Abschlussstatus noch Zuständigkeiten oder wie Empfehlungen entstehen.

Vom Portaleinstieg zum nächsten Schritt

Der sichtbare Lesefluss beginnt bei der Portalangabe „zentou-ai.jp / portal / dashboard“, führt über die Begrüßung der lernenden Person und die Zeitraumauswahl und erreicht dann die vier KPI-Karten. So entsteht eine Abfolge im Arbeitsbereich von Identität und Zeitrahmen zum aktuellen Status. Die Zeitraumauswahl hebt 今月 sichtbar hervor, doch die Aufnahme belegt nicht, dass das Steuerelement zur Laufzeit Daten ändert.

Unter den KPIs liefern das Diagramm und der Fächerbereich zwei verschiedene Formen von Kontext. Das Diagramm ist breiter als der Fächerbereich, entsprechend dem CSS-Verhältnis von 1.4fr zu 1fr im Panel-Raster. Diese Proportion gibt dem Verlauf mehr Raum und hält den Vergleichsbereich kompakt. Die Wahl unterstützt den Fokus des Dashboards auf Entwicklung, verleiht dem Diagramm aber auch mehr visuelles Gewicht, obwohl seine Skala nicht angegeben ist.

Hinweise folgen in einem gestrichelten Container mit der Beschriftung お知らせ（直近 3 件）, und der Bereich für nächste Schritte liegt darunter mit roter Umrandung. Die Abfolge stellt passive Informationen vor die ausdrückliche Handlung. Eine produktive Anpassung könnte testen, ob dringende Aufgaben über die Hinweise wandern sollten; das wäre jedoch eine vorgeschlagene Änderung und kein in diesem Beispiel gezeigtes Verhalten.

1. In die Übersicht einsteigen

   Portalpfad und Begrüßung etablieren das Dashboard als Startarbeitsbereich der lernenden Person, mit der Navigation links.

2. Aktuellen Status prüfen

   Die Zeitraumauswahl und die vier KPI-Karten rahmen die gewählte Zeitansicht, den Notenkontext, die Frist und den Übungsfortschritt.

3. Unterstützende Ansichten untersuchen

   Die Bereiche für Verlauf und Fächer liefern unterschiedlichen Kontext: Entwicklung über mehrere Beobachtungen und relative Verteilung der Fächer.

4. Der Empfehlung folgen

   Der NEXT-STEP-Block macht aus der Übersicht zwei vorgeschlagene Aufgaben: die Prüfungsanmeldung abschließen oder den schwachen Bereich 論理 üben.

Sichtbare Struktur und Funktionsgrenzen

Dieses offizielle, mit OpenDesign gebündelte Beispiel ist eine einzige statische Canvas des B-Dashboards. Die Konzept-Tabs A, C und D sowie der Haftzettel page-1 / 5 belegen keine weiteren gestalteten Screens; es gibt keine Click-Handler für Tabs, Zeiträume, Seitenleistenelemente oder nächste Schritte. Identität der Studierenden, Daten, Ränge und Fortschrittswerte sind illustrativ. Das Wireframe zeigt visuelle Hierarchie, kein Live-Portal, keine gespeicherten Datensätze, keine Prüfungsübermittlung und keine validierten Bildungsergebnisse.

Die stärkste wiederverwendbare Lehre des Designs ist strukturell: kategorialen Status, numerischen Vergleich, Frist und Übungsabschluss trennen, bevor Verlauf, Fächer, Hinweise und Aktionsbereiche folgen. Jede Anpassung sollte Bedeutung und Quelle jeder Kennzahl definieren, Diagrammeinheiten und Zeitspannen ergänzen und entscheiden, welche Steuerelemente und Empfehlungen real sind, bevor das Wireframe als operatives Dashboard behandelt wird.