2013-08-04

Ultimate Swing, Teil 27

Heute möchte ich nicht viel über Programmierung erzählen, sondern ein paar Worte zum Thema Ergonomie sagen. Bitte sehen Sie sich den folgenden Screenshot etwas genauer an:

Screenshot: TKNotesAndTasks
Screenshot: TKNotesAndTasks

Auf den ersten Blick scheinen nur ein paar Details zu stören:

  • Die Hintergrundfarbe der Registerkarte ist uneinheitlich.
  • Der als Hinweis (hint) gedachte Text in der Eingabezeile am oberen Rand sieht aus, als wäre er vom Benutzer eingegeben worden.
  • Die erste Schaltfläche im rechten Bereich schließt nicht bündig mit dem oberen Rand der Liste ab.

Sozusagen Peanuts, oder?

Wenn Sie sich Notes and Tasks schon einmal live angesehen haben, wissen Sie, dass die Eingabezeile auf beide Registerkarten wirkt. Mit ihr können also Aufgaben und Kategorien eingegeben werden. Beim Umschalten wurde der Hinweistext sogar getauscht, damit der Anwender sofort sieht, was er im Begriff ist, einzutippen. Die Erwartung war, auf diese Weise die Eingabe so effizient wie möglich zu gestalten. Clever, oder?

Nein, nicht clever. Mit meiner Implementierung zwinge ich den Anwender nicht nur, mit den Augen zwischen Eingabezeile und Registerkarten zu pendeln, sondern erwarte zudem, dass er den langen Hinweistext liest. Wenn er dann feststellt, sich auf der “falschen” Registerkarte befindet, muss er mit den Augen (und der Maus) wieder pendeln. Die Idee, eine Eingabezeile für alle Aspekte der Anwendung (Aufgaben, Kategorien und später noch Notizen) zu bieten, ist also nicht ausgereift. Das richtige Vorgehen ist, den Anwender zuerst entscheiden zu lassen, mit welchem Teil der Anwendung er arbeiten möchte. Deshalb müssen die Reiter der Registerkarten ganz oben erscheinen. Denn wie wir die Seite eines Buches von links oben nach rechts unten abarbeiten, so betrachten wir auch den Bildschirm und damit die Benutzeroberfläche eines Programms.

Screenshot: Notes and Tasks mit verbesserten Layout
Screenshot: Notes and Tasks mit verbesserten Layout

Das sieht doch schon besser aus, oder? Der Benutzer kann neue Aufgaben anlegen und sieht diese nach dem Drücken der Enter-Taste in der Liste. Also alles in Butter?

Nehmen wir an, Sie möchten den Text einer Aufgabe bearbeiten. Die Idee könnte sein, hierfür die Eingabezeile zu “recyclen”. Bloß dann haben Sie das Problem mit der Pendelei wieder. Außerdem ist es fraglich, ob man häufiger neue Aufgaben erfasst oder den Status bestehender Aufgaben ändert. Ich habe mich deshalb zu folgendem Layout entschlossen:

Screenshot: Eingabezeile im unteren Randbereich
Screenshot: Eingabezeile im unteren Randbereich

Durch das Verschieben in den unteren Bereich sorge ich nicht nur für eine leichte Auffindbarkeit der Eingabezeile, sondern schaffe auch die richtige Gewichtung der Teilbereiche. Damit “funktioniert” sogar das Bearbeiten eines Aufgabentextes in der Eingabezeile, nachdem der Benutzer den Eintrag in der Liste angeklickt hat.

Zum Schluss noch zwei technische Details. Die “falsche” Panelhintergrundfarbe kann ich korrigieren, indem ich für Panels, die auf Registerkarten liegen, mit setOpaque(false) das Zeichnen des Hintergrunds unterbinde. Das ist im folgenden Screenshot zu sehen. Der leichte Versatz der Schaltflächen scheint ein Mac OS X-spezifisches Verhalten von Swing zu sein.

Screenshot: Wo kommen die Ränder her?
Screenshot: Wo kommen die Ränder her?

Denn unter Windows tritt der Versatz nicht auf:

Screenshot: TKNotes unter Windows
Screenshot: TKNotes unter Windows

Blöd nur, dass jetzt der Hintergrund der Checkboxen und RadioButtons nicht passt.

Oh, ich liebe Swing…

Zwinkerndes Smiley

No comments:

Post a Comment