2009-05-31

Noch eine Datepicker-Komponente (diesmal von mir)

In einem Kommentar auf meinen letzten Eintrag wurde ja auf eine sehr schöne Datepicker-Komponente hingewiesen, die sich zum Beispiel in Vista findet. Ich bin schon vor geraumer Zeit über sie gestolpert und war von ihr recht angetan. Deshalb hatte ich beschlossen, sie sozusagen nach Java zu portieren. Auch wenn ich noch nicht ganz fertig bin, möchte ich doch – schon, um etwas Appetit zu machen – einen ersten Screenshot zeigen.
Screenshot von TKDatePicker
Das Ganze wird TKDatePicker heißen und selbstverständlich als open source veröffentlicht. Die Komponente wird unter der GNU Lesser General Public Licence version 3 zu haben sein. Demnächst mehr in diesem Theater… :-)

2009-05-30

Gestaltung für Smartphones und den Desktop (4)

In dieser Folge werfen wir einen Blick auf zwei ungewöhnliche oder experimentelle Kalenderanzeigen. Es geht also nicht in erster Linie um “Datepicker”, sondern ganz allgemein um Datumsein- und –ausgaben.
Die (leider schon sehr lange nicht mehr aktualisierten) Seiten User Interface Design Patterns von Sari A. Laakso stellen unter anderem den Calendar Strip vor.
Calendar Strip von Sari A. Laakso
Im Gegensatz zu den üblichen Kalendern, in denen aufeinander folgende Monate als abgesetzte Blöcke erkennbar sind, “kleben” sie im Kalenderstreifen aneinander. Die Zeit wird, vergeben Sie mir meinen pathetischen Ton, als Kontinuum greifbar. Allerdings ist der Streifen vergleichsweise ausladend. Auch bin ich nicht sicher, ob man sich nicht zu leicht im Wust der Zahlen verliert. Wie der Screenshot zeigt, gibt es aber Monatsabgrenzungen, die beim Lesen unterstützen.
Fibonacci Calendar UI ist ein weiterer Vorschlag für eine Kalenderansicht. Die ihr zugrunde liegende Idee ist, Informationen zu vier Tagen anzuzeigen. Der aktuelle Tag nimmt den größten Raum ein, jeder darauf folgende Tag erhält etwas weniger Platz.
Fibonacci Calendar UI
Auch diese Kalenderansicht braucht relativ viel Platz.Sie stellt den aktuellen Tag in den Mittelpunkt, erlaubt aber dennoch einen Blick in die nähere Zukunft.
Dieser Post hat uns ziemlich weit weg von mobilen Geräten geführt. Wir werden aber sehr schnell den weg zurück finden. :-) Bleiben Sie also dran. Zum Schluss noch ein Link: Im Calendar and Date Picker Design Showcase stellt Webentwickler Christian Watson eine ganzer Reihe Web-basierter Kalender vor. Die Sammlung ist in jedem Fall einen Blick wert.

2009-05-26

Gestaltung für Smartphones und den Desktop (3)

Willkommen zum dritten Teil meiner losen Serie über die Gestaltung von Benutzeroberflächen für mobile Geräte sowie dem Desktop. Wie versprochen geht es diesmal um die Datumsauswahl. Werfen wir zunächst einen Blick auf ein paar gängige Realisierungsformen.
Screenshot: Widget der Windows Sidebar
Das erste Beispiel ist ein Widget der Windows Sidebar.
Screenshot: Dashboard-Widget unter Mac OS X2
Und hier das Pendant unter Mac OS X, also ein Dashboard-Widget.
Von gestalterischen Unterschieden abgesehen, ist der Aufbau gleich: eine Kopfzeile zeigt Monat und Jahr. Zwei Pfeile gestatten das monatsweise Blättern. Der eigentliche Datumsbereich zeigt 6 Wochen. Der aktuelle Tag ist hervorgehoben.
Nun ein kurzer Blick auf mobile Geräte. Der folgende Screenshot zeigt den Kalender des Palm Pre.
Kalender des Palm Pre
Das große Display des Geräts wird vollständig genutzt. Die Datumsauswahl wirkt elegant und ergonomisch. Ihre Realisierung orientiert sich eindeutig am Desktop.
Schließlich die Datumsauswahl der Android-Plattform:
Screenshot: Datumsauswahl der Android-Plattform 
Sie wirkt auf den ersten Blick spartanisch. Die Funktionsweise ist aber mit der Walzen-Metapher des iPhone, die wir bereits kennen gelernt haben, vergleichbar. Die drei Zahlen sind editierbar, das heißt, auch große Zeitsprünge sind schnell erledigt.
Fassen wir zusammen. Bisher sind wir zwei Ausprägungen der Datumseingabe begegnet. Zum einen die Auswahl durch Anklicken oder Antippen eines Datums aus einem Monatsbereich. Zum anderen die Eingabe durch drei unabhängige Felder. Werte dieser Felder werden durch Gesten (Blättern, Tippen) verändert. Nahe Termine lassen sich sicher mit beiden Varianten schnell und komfortabel selektieren. Wie aber sieht es mit länger zurück liegenden Jahren aus?
Nehmen Sie als Beispiel ein Programm, das Geburtstage verwaltet. Aus Rückmeldungen von Anwendern meines Programms TKBirthdayReminder schließe ich, dass hier die Android-Variante nicht optimal ist. Fairerweise muss man aber sagen, dass dies für alle Drei-Feld-Varianten zutreffen dürfte. Heißt dies im Umkehrschluss, dass die Desktop-übliche Darstellung besser geeignet ist?
Screenshot: Geburtstagseingabe in Apples Addressbuch
Dieser Screenshot zeigt, wie man in Apples Addressbuch Geburtstage einträgt. Erstaunlicherweise finden wir hier eine Variante der Drei-Felder-Eingabe. Ein weiteres Beispiel:
Screenshot: Auswählen eines Datums in iCal
Dieser Screenshot zeigt, wie man unter Mac OS X im Programm iCal zu einem Datum springt.
Was schließen wir daraus? Natürlich ist es nicht weiter verwunderlich, dass die Eingabe von Zahlen der schnellste Weg ist, um zu weit entfernten Datumswerten zu gelangen. Die eigentliche Erkenntnis ist die Bestätigung einer These aus der letzten Folge. Nämlich dass gute Bedienelemente die vorhandenen Ressourcen einer Plattform optimal nutzen. Auf dem Desktop ist eine Tastatur eben immer vorhanden. Auf dem Smartphone hingegen nicht.
Auch in der nächsten Folge bleib ich bei der Datumseingabe. Dann möchte ich Ihnen einige spannende Varianten vorstellen. Bleiben Sie dran. Und wie immer freue ich mich natürlich über Ihre Kommentare.

2009-05-24

Der Griff nach den Sternen

Das Spielzeugmuseum Nürnberg zeigt in der Sonderschau Der Griff nach den Sternen Weltraum- und Roboterspielzeug. Ich habe mir die kleine aber feine Ausstellung heute angesehen und kann sie jedem, der absichtlich oder zufällig nach Nürnberg kommt, nur ans Herz legen.
Homepage des Spielzeugmuseum Nürnbergs

2009-05-23

Gestaltung für Smartphones und den Desktop (2)

Im ersten Teil dieser kleinen, losen Folge von Einträgen habe ich darauf hingewiesen, dass unterschiedliche Geräteklassen Bedienelemente in der Regel unterschiedlich implementieren. Diese Aussage mag auf den ersten Blick banal klingen. “Natürlich muss eine Datumsauswahl auf dem Handy anders aussehen und anders funktionieren, als auf dem PC” werden Sie jetzt sehr wahrscheinlich denken. Aber ist dem wirklich so? Wer – wie ich – lange mit Windows Mobile gearbeitet hat, weiß, wie stark dieses System in seinen Metaphern und Mechanismen vom großen Bruder geprägt ist. Jeder neue Termin gerät da zu einem filigranen Stift-Getippe und Geschiebe. Nicht umsonst gibt es so viele Aufsätze, die den kleinen “Fenster”-Geräten etwas mehr Touch-Feeling beibringen.
Also: Hinter jedem Bedienelement (Schaltfläche, Tabelle, Datumsauswahl, …) steht eine abstrakte Idee oder Funktion. Bei Schaltflächen ist diese Funktion allgemeiner (ich möchte irgend eine Aktion auslösen) als bei einer Datumsauswahl. Beiden ist aber gemein, dass sie in unterschiedlichen Situationen wiederverwendet werden können. Mit Hilfe einer Datumsauswahl kann man beispielsweise den Geburtstag eines Kontakts festlegen, aber auch den Beginn des Urlaubs. Dasselbe gilt für die Schaltfläche. Sie kann Speichervorgänge auslösen oder den Abspielvorgang eines Musikstücks starten.
Die bisher beschriebene abstrakte Idee ist geräteunabhängig. Was ich gesagt habe, trifft auf mobile Geräte ebenso zu wie auf den heimischen Rechner. Anders die konkrete Implementierung: sie ist geräte- und systemabhängig. Jedes Bedienelement einer Plattform realisiert einen bestimmten Look und legt ein bestimmtes Feel an den Tag. Anders, weniger holprig formuliert: jede Oberflächenkomponente hat eine genau festgelegte visuelle Repräsentation und legt ein wohldefiniertes Verhalten an den Tag.
So, als Java-Programmierer werden Sie jetzt siegesgewiss sagen “klar, er meint Swing und sein pluggable Look and Feel”. Nein, liebe Leserin, nein, lieber Leser, nix isses mit dem Hauptgewinn. Auch das Konzept des Look und Feels findet auf mehreren Ebenen statt. Die eine, wenn Sie so wollen sehr konkrete Ebene ist tatsächlich diejenige, die auf der Ebene der Farben und Effekte (das visuelle Reindrücken der Schaltfläche) operiert. Die zweite Ebene beantwortet die Frage, wie die weiter oben angesprochenen abstrakten Ideen bzw. Funktionen umgesetzt werden. Ob also eine Datumsauswahl als Monatskalender oder Walze mit drei Scheiben implementiert wird. Erst wenn dieser Punkt geklärt ist, kann definiert werden, wie das “Ding” dann tatsächlich gerendert wird.
Wie stark die Plattform Einfluss auf die Ausgestaltung von Bedienelementen nimmt, zeigen die Kommentare zum ersten Teil, für die ich mich übrigens herzlich bedanke. Es ist selbstverständlich richtig, dass das Rollen von stilisierten Walzen mit der Maus am PC keinen Spaß macht. Insofern würde eine genaue Übertragung der iPhone-Implementierung höchstens “for fun” sinnvoll sein. Was wir noch sehen werden, ist, ob es aber vielleicht Adaptionen oder Variationen gibt, die der Plattform “PC” mehr gerecht werden. Eine letzte Anmerkung, ebenfalls zu einem Kommentar: der klassische “Datepicker” hat tatsächlich kein Texteingabefeld sondern verlässt sich auf Mausaktionen. Das auf dem Screenshot zu sehende Feld gehört nicht zur Komponente.
Im nächsten Teil werden wir uns etwas ausführlicher dem Thema Datumsauswahl widmen. Wir werden uns einige Konzepte gängiger Implementierungen ansehen. Ich hoffe, Sie bleiben dran…

2009-05-22

Gestaltung für Smartphones und den Desktop

Beim Gestalten von Anwendungen bedienen wir uns aus einem Pool von Komponenten und kombinieren diese mehr oder weniger geschickt zur Benutzeroberfläche.Was uns an Bauelementen zur Verfügung steht, wird durch die verwendete Klassenbibliothek bestimmt.
Auch wenn ich kein iPhone, sondern ein G1 besitze, stöbere ich gerne durch die Weiten von Apples App-Laden. Dabei ist mir Woche Anwendung von Olivier Bernal aufgefallen, ein nützliches kleines Kalenderberechnungsprogramm.
image
Dessen Benutzeroberfläche sehen Sie im obigen Screenshot. Ein kurzer Blick genügt, um die Funktionsweise der Anwendung zu erfassen. Aber warum ist das so? Zum einen bildet der begrenzte Platz auf dem Bildschirm eine natürliche Obergrenze, was die Anzahl an Bedienelementen betrifft, zumal die einzelnen Komponenten eher groß gestaltet werden, um auf den kleinen Displays trotzdem gut erkenn- und bedienbar zu bleiben. Zum anderen sind natürlich die Bedienelemente selbst optimal auf das Gerät abgestimmt:
image
…ganz ehrlich… Haben Sie auf dem Desktop oder im Web schon einmal eine ähnlich elegante Datumsauswahl gesehen? Lassen Sie uns hierzu ein Blick auf einen alten Bekannten werfen:
image
Dieser Screenshot zeigt eine Datumsauswahl in Outlook 2007. Ohne Zweifel ist die Kalender-Metapher in diesem Zusammenhang naheliegend. Aber wollen wir wetten, mit welchem Ansatz Sie früher das Datum 24. Februar 1582 erreichen?
Wie würden Sie denn die Benutzeroberfläche der iPhone-Anwendung möglichst optimal in ein typisches Desktop-Programm umsetzen? Glauben Sie, die vorhanden Komponenten sind hierfür gut geeignet? Schreiben Sie mir, oder spekulieren Sie mit – in nächster Zeit möchte ich Ihnen ein solches Programm als Web Start-Anwendung vorstellen…

2009-05-21

Ein Laden für Java-Anwendungen?

Es scheint schon fast selbstverständlich, dass einige Kommentatoren die Ankündigung eines Ladens für Java-Anwendungen durch Jonathan Schwartz als bloße Kopie von Apples virtuellen Läden abstempeln. Aber ist dem wirklich so?
Freilich bleibt abzuwarten, was die Java-Erfinder in wenigen Tagen tatsächlich der Öffentlichkeit präsentieren werden. Dennoch: wenn die Zahlen, die genannt werden, tatsächlich realistisch sind (und es gibt keinen Grund, das zu bezwiefeln) ergäbe sich ein riesiges Potential - ein solcher Laden würde eine Zielgruppe erschließen, die weit größer ist als die, die Apple derzeit beispielsweise mit dem iPhone-AppStore anspricht. Schließlich geht es nicht nur um einen Gerätetyp oder eine Geräteklasse, sondern um alles, was Java an Bord hat.
Ein paar Fragen bleiben aber zunächst offen:
  1. Auf welchen Plattformen steht der Laden zur Verfügung?
  2. Welche Anwendungen oder Anwendungstypen sind für Nutzer so interessant, dass die sich tatsächlich für den Laden interessieren?
  3. Wie kommt der Laden zum Kunden?
  4. Sind die Kosten für Entwickler bzw. Anbieter akzeptabel?
Sun muss es vor allem aber gelingen, den Shop so zu gestalten, dass er optisch und technisch mit ähnlichen Angeboten konkurrieren kann. Anders formuliert: er muss letztlich so hipp aussehen wie iTunes. Ganz klar wurde mit JavaFX eine Technologie für RIAs geschaffen, insofern wird wohl auch der Laden auf JavaFX basieren.
Spannend wird aber vor allem sein, welche Angebote wir in dem Laden finden werden...

2009-05-03

Linktipp: Automatisch als Benutzer unter Vista anmelden

Heute möchte ich nur kurz einen Linktipp weitergeben... Automatisches Anmelden an Vista mit Autologon zeigt, wie man Vista gleich mi einem angemeldeten Benutzer starten kann. Das ist nichts Spektakuläres aber sehr nützlich, vor allem wenn man Windows virtualisiert betreibt. Immerhin habe ich mich an meinem Mac schon einmal angemeldet. :-)