App-Schnittstellendesign-Prinzipien in Aktion: Tim Coreys Turnier-Tracker-UI

Das UI-Design starten

Tim beginnt, indem er sagt, dass der Benutzeroberflächen-Design-Schritt ein lustiger Teil der App-Entwicklung ist, weil man eine grobe Version dessen sehen kann, wie die App aussehen wird. Er weist darauf hin, dass er ein Whiteboard oder Notizblock benutzt, um die Formulare zu skizzieren, obwohl er zugibt, kein Künstler zu sein. Tim besteht darauf, dass die Zeichnungen nicht perfekt oder proportional sein müssen – sie müssen nur die Grundidee dessen zeigen, was die Formulare beinhalten und wie sie funktionieren sollen.

Tims Hauptpunkt hier ist, dass die UI-Design-Phase um Planung geht, nicht um Schönheit. Er betont, dass das Ziel darin besteht, zu identifizieren, welche Formen/Seiten benötigt werden und was jede enthalten sollte. Dieser Ansatz ist entscheidend für die Klarheit und hilft Entwicklern und Designern, während des Designprozesses im Einklang zu bleiben.

Wo soll man beim Design anfangen?

Tim geht einer häufigen Frage nach: "Wo soll ich anfangen?" Er erklärt, dass es egal ist, wo man anfängt. Wenn Sie sich über einen Teil der App unsicher sind, beginnen Sie mit dem Teil, bei dem Sie sich sicher sind. Sobald Sie die klaren Teile abgeschlossen haben, werden Sie oft eine bessere Vorstellung von den unsicheren Abschnitten haben.

Er merkt auch an, dass es hilft, Schwung aufzubauen – nachdem Sie ein paar Formulare entworfen haben, fühlen Sie sich sicher und bereit weiterzumachen. Mit dieser Denkweise entscheidet sich Tim, mit dem Turnier-Viewer-Formular zu beginnen.

Diese Methode unterstützt gute Benutzerflüsse, da sie Designer und Entwickler dazu ermutigt, sich darauf zu konzentrieren, wie Benutzer von einem Bildschirm zum nächsten gelangen.

Warum nicht zuerst in Visual Studio designen?

Tim erklärt, dass Sie nicht damit anfangen sollten, im Windows Form Builder innerhalb von Visual Studio zu designen. Er warnt davor, dass dies zwei Hauptprobleme verursacht:

1. Sie verschwenden Zeit damit, Layout und Steuerelemente zu optimieren, anstatt das Design zu planen.

2. Sie übergehen den Designprozess, was bedeutet, dass Sie bessere Optionen übersehen oder verborgene Probleme hinterlassen könnten, weil Sie Ihre Arbeit nicht neu machen möchten.

Tim sagt, dass das Design auf Papier es Ihnen ermöglicht zu radieren, neue Ideen auszuprobieren und sogar "verrückte" Konzepte zu testen, die großartige Lösungen werden könnten. Dies ist ein entscheidendes Prinzip im UI-Design, weil es den Fokus darauf hält, was die App tun soll, anstatt wie sie im ersten Entwurf aussieht.

Turnier-Viewer-Formular

Tim enthüllt sein erstes grobes UI: das Turnier-Viewer-Formular. Er erklärt, dass dieses Formular alle Informationen über ein bestimmtes Turnier anzeigen wird.

Turnier-Erstellungsformular

Tim bewegt sich dann zum Turnier-Erstellungsformular, das er laut ihm nach dem Turnier-Viewer benötigt.

Team-Formular erstellen

Tim entwirft dann das Team-Erstellungsformular, das Folgendes beinhaltet:

• Teamname

• Teammitglieder auswählen

• Neues Mitglied hinzufügen

Tim hebt die Bedeutung der Konsistenz zwischen den Formularen hervor. Er sagt, das Layout des Teamnamens sollte dem Turniernamen-Layout entsprechen, um ein einheitliches Design zu schaffen.

Er erklärt auch, dass dieses Formular es Benutzern erlaubt, bestehende Teammitglieder aus einer Liste hinzuzufügen oder neue Mitglieder direkt im Formular zu erstellen. Tim sagt, er ziehe es vor, die Mitgliedererstellung im selben Formular zu belassen, um tiefe Navigationsebenen (z. B. das Öffnen mehrerer Formulare) zu vermeiden.

Er erklärt, dass das Hinzufügen mehrerer Ebenen verwirrend und langsam wäre. Daher entscheidet er sich dafür, das Design kompakt und benutzerfreundlich zu halten. Dies unterstützt eine einfache und intuitive Benutzeroberfläche, die die Zeit reduziert, die Benutzer benötigen, um Aufgaben zu erledigen.

Preisformular erstellen

Tims Preisformular ist einfach. Es umfasst:

• Platznummer

• Platzname

• Preisbetrag

• Preisprozentsatz

Tim merkt an, dass jeweils nur eines der letzten beiden Felder verwendet werden sollte (entweder Betrag oder Prozentsatz). Er sagt, das Formular benötige später Validierungslogik, aber zu Designzwecken sei das Layout einfach. Dies ist ein gutes Beispiel dafür, wie Designprinzipien helfen, eine ansprechende und funktionale Benutzeroberfläche zu schaffen.

Turnier-Dashboard-Formular

Zum Schluss bespricht Tim das Turnier-Dashboard-Formular, mit dem er zugibt, nicht vollständig zufrieden zu sein. Er erklärt die Herausforderung: Windows Forms-Anwendungen haben typischerweise ein Hauptformular, das geöffnet bleibt. Wenn das Hauptformular geschlossen wird, endet die Anwendung.

Dies stellt ein Problem für einen Turnier-Tracker dar, da Benutzer möglicherweise mehrere Turniere gleichzeitig offen haben möchten. Tim erwog zunächst, das Turnier-Erstellungsformular automatisch zu öffnen, wenn keine Turniere vorhanden sind. Aber er erkannte, dass das Schließen des Turnier-Erstellungsformulars die Anwendung beenden würde.

Also entwirft Tim ein zentrales Dashboard-Formular, das immer geöffnet bleibt. Dieses Dashboard ermöglicht es Benutzern:

• Bestehende Turniere zu sehen

• Ein Turnier zu laden

• Ein neues Turnier zu erstellen

Tim erklärt, dass das Dashboard geöffnet bleibt, auch wenn andere Formulare geschlossen werden. Es dient als zentraler Navigationspunkt der App. Obwohl er zugibt, dass es "einfältig einfach" aussehen könnte, sagt er, dass es funktioniert, und er könnte später Designelemente oder Animationen hinzufügen, um es visuell ansprechender zu gestalten.

Abschluss

Tim beendet das Video, indem er betont, dass das Ziel einfach darin besteht, die benötigten Formulare zu identifizieren und zu entscheiden, was jedes Formular anzeigen sollte. Er sagt, sobald das UI entworfen ist, sei der nächste Schritt die Logikplanung, bei der er plant, wie die UI-Elemente mit dem Datenmodell und dem Backend verbunden werden.

Tims UI-Designprozess zeigt, dass das Entwerfen einer App-Oberfläche eine Frage von Planung, Konsistenz und Klarheit ist — nicht von der frühzeitigen Erstellung perfekter visueller Elemente. Dieser Ansatz hilft Entwicklern und Designern, sich abzustimmen, und stellt sicher, dass die endgültige Anwendung für Benutzer einfach zu navigieren und zu nutzen ist.