Über die Wichtigkeit von Usability könnte viel geschrieben werden, wird es an anderen Stellen auch. Fakt ist, dass gerade bei mobilen Anwendungen eine intuitive und vor allem schnelle Bedienung unabdingbar ist. Zu diesem Zwecke überarbeite ich gerade meine Windows Phone App Working Hours Tracker um notwendige Verbesserungen zu schaffen.

Im ständigen Betrieb hat sich gezeigt, dass das verwendete Zeitauswahl-Steuerelement wenig praktikabel ist, um zahlreiche Einträge innerhalb kurzer Zeit zu erfassen. Zwar ist es schön anzusehen, die Eingabe ist dann aber doch sehr mühsam. Hier ein Screen:

Herkömmliche Datumsauswahl Windows Phone 7

Folgende Eigenschaften muss eine praktikable Zeiteingabe für mich erfüllen:

  • Anzeige einer bereits gesetzten Uhrzeit
  • Auswahl mit wenigen Klicks/Taps möglich
  • Kein langwieriges Scrollen
  • Animationen zwar erlaubt (teilweise sogar wünschenswert), jedoch sollten mich diese nicht bei der Eingabe aufhalten

Gesagt, getan und eine Umsetzung der ersten Idee fand statt:

Windows Phone 7: Überlegungen zur schnellen Zeiteingabe

Mit dieser Variante ist eine – im Vergleich – sehr schnelle Eingabe möglich. Allerdings kristallisiert sich hier ein kleines Problem heraus. Durch die Anordnung muss die gewünschte Stunde bzw. Minute aufwändig gesucht werden. Dies ist wenig intuitiv, da der Mensch an Uhren gewohnt ist und daher eine derartige Darstellung bevorzugt. Daraus wurde schlussendlich diese Darstellung.

Schnelle Zeiterfassung mit Windows Phone 7

Diese ist zwar nun noch nicht schön gestaltet, lässt aber schon erkennen, wie ich mir eine schnelle Uhrzeit-Eingabe vorstelle. An der Übersichtlichkeit muss definitiv noch gearbeitet werden, die ersten Tests sind allerdings vielversprechend, da ein Zeiteintrag nun innerhalb eines Bruchteils zur “alten” Variante gemacht werden kann.

Hier nun nochmals alle drei Screens nebeneinander:

Vergleich verschiedener Ansätze zur Zeiteingabe unter Windows Phone 7

Anmerkung

Ich muss hierbei noch anmerken, dass die hier vorgestellte Zeitauswahl auf die Bedürfnisse meiner Anwendung zugeschnitten ist (daher nur eine Auswahl der Minuten in 5er Schritten).

Feedback

Was hältst du von dieser Variante und was würdest du ändern? Über dein Feedback würde ich mich sehr freuen, um hier weiteren Input für meine Überlegungen zu erhalten. Und wer weiß, vielleicht entsteht dadurch ja ein neues Steuerelement für die Community.

Edit

Zwischenzeitlich habe ich versucht den Style ein wenig zu verbessern und ein wenig Feedback einfließen zu lassen. Das aktuelle Ergebnis sieht so aus (die Farbgebung wird von den Theme-Einstellungen übernommen):

Schnelle Datumsauswahl für Windows Phone Update

Über den Autor

Norbert Eder

Ich bin ein leidenschaftlicher Softwareentwickler und Fotograf. Mein Wissen und meine Gedanken teile ich nicht nur hier im Blog, sondern auch in Fachartikeln und Büchern.

21 Kommentare

  • Daniel, danke für dein Feedback. In Anlehnung an eine Uhr (die auch nur 12 Stunden darstellt), statt AM/PM -> Vormittag/Nachmittag. Ebenso umschaltbar. So gesehen dieselbe Darstellung, nur in deutscher Sprache.

  • Schon ganz nett und auf jeden Fall schneller als die WP7 eigene Methode, aber optisch bin ich davon noch immer nicht so überzeugt. Auch wenn das uhrmäßig angeordnet ist, muss ich mich (vor allem da die Anordnung rechteckig ist) bei der Darstellung trotzdem erst zurecht finden. Das ist ähnlich wie bei der zweiten Variante, wenn auch ein wenig einfacher.

    Ich persönlich fände so eine Art Slider (ich kann jetzt nicht besser bechreiben ;-) gut. Also zwei Zeitstrahlen von oben nach unten, die von 0 – 23 und von 0 – 55 gehen. Alle Werte darin werden klein dargestellt und ich tatsche dann mal grob auf den richtigen Zeitbereich und mit einer leichten nach oben oder unten Bewegung wird dann die Feineinstellung vorgenommen. Ist jetzt ein wenig schwammig beschrieben.

    Am besten lässt es sich beschreiben, wenn ich ein Beispiel vom iPhone (bitte jetzt nicht schlagen) bringe. Dort ist sowas ähnliches bei den Kontakten (siehe http://www.tipps-tricks-kniffe.de/apple-iphone-tricks-schneller-durch-die-kontaktliste-scrollen/). Dort ist auf der rechten Seite eine Art Slider mit den Buchstaben A-Z und das funktioniert bei der Konatktliste sehr gut. Sowas könnte ich mir auch für die Eingabe von Zeiten vorstellen.

    Ist nur so eine Idee von mir.

  • Du hast absolut recht. Die Zeitauswahl ist fast das Einzige was mich derzeit an Metro stört.
    Deine Ideen gehen in die richtige Richtung finde ich. So ganz hundertprozentig ist es noch nicht, aber ich kann Dir nicht genau sagen was es ist, das noch nicht ganz passt.

    Eine Idee noch von mir: Die eingestellte Uhrzeit auch gleichzeitig in HH:MM Dartsellung unten anzeigen. Evtl. für die Intuitivität auch noch Uhrzeiger einblenden..?
    Wie gesagt, auf jeden Fall sehr viel besser als die original Zeitauswahl von Metro.

  • Hi Chrisu, danke für deinen Innput. An einen Slider hatte ich auch gedacht und steht als weitere Methode bei mir im Test, werde ich eventuell auch noch zur Diskussion aufbringen. Diese Darstellung wäre auf jeden Fall "cooler", bin mir jedoch nicht sicher, ob sie tatsächlich besser ist, zumal sie definitiv langsamer ist.

    Dass das Styling so wenig – wie soll ich sagen – hergibt, ja, daran muss noch gearbeitet werden. Ganz klar.

  • Hallo Patrick, danke für deine Idee. Die Anzeige der gewählten Uhrzeit ist grundsätzlich keine schlechte Idee, besser wäre es jedoch – aus meiner Sicht – würde die Uhrzeit sofort auf den ersten Blick erkannt werden können. Ich werde mich dennoch ein wenig mit deiner Idee spielen. Danke sehr :)

  • Hi Norbert,
    ich finde deine Überlegungen total sinnvoll und gut. Je weniger Klicks, Touches, etc. Desto besser. Optisch ist es nicht schlecht. Grüße Oliver

  • Wenn man an ein klassisches Uhr gewohnt bist, dann ist die darstellung sinnvoll (wobei ich hätte die AM/PM als erstes gestellt, nach der Top-Down Motto, und für 24Std. format könnte dann statt 12 + 1 bis 11 die 0 + 13 bis 23 angezeigt werden.)
    Die Frage ist aber, sind alle Leute heutzutage an ein klassisches Uhr gewohnt oder sind die neuen Generationen eher an der Digitale Anzeige gewohnt?

  • Mein Vorschlag wäre es, statt zwei "Zifferblättern" nur eines zu verwenden; beim 1. mal drauf tippen wird die Stunde ausgewählt, beim 2. mal die Minuten.
    Also Beispiel: man tippt auf die "3" – es wird Stunde 3 gewählt; danach tippt man auf "7" – es wird Minute 35 gewählt.
    Vorteil: Größeres Ziffernblatt => größere Tippfläche.

    Dazu sollte das Zifferblatt wirklich wie eine echte Uhr aussehen, mit Stunden- und Minutenzeiger, die sich entsprechend der Auswahl verstellen und 12 Ziffern. Evt. kann innerhalb des Zifferrings von 1-12 noch ein kleiner Ring dargestellt werden mit 0-55 für die Minuten (was aber für die Auswahl irrelevant ist) – ich denke die Bedienung wäre dadurch wirklich völlig intuitiv.

    Unterhalb der Uhr wird digital die ausgewählte Uhrzeit angezeigt, plus AM/PM, wobei man auf AM bz. PM tippen kann zur Umschaltung. Genau wie man bei AM/PM erkennen kann, was aktiv ist, sollte man auch bei Stunde:Minute erkennen können, wozu das nächste Tippen aufs Zifferblatt führt; ist (bei der digitalen Anzeige) die Stunde aktiv, führt das nächste Tippen aufs Zifferblatt zu einer Änderung der Stunde. Durch dieses Tippen wird dann in der Digitalanzeige die Minutenanzeige aktiv, weil ja das nächste Tippen dann die Minuten ändert.
    Und schließlich soll man noch in der Digitalanzeige auf Stunden oder Minuten tippen können, um damit zu ändern, ob das nächste Tippen auf das Ziffernblatt eben Stunde oder Minute auswählt.

  • Zusatz: Evt. könnte auch die Anzeige des Ziffernblatts zwischen 1-12 und 0-55 wechseln, je nachdem ob man im Stunden- oder Minuten-Auswahlmodus ist. Bin aber nicht sicher, ob das wirklich gut wäre, da es die Illusion einer "richtigen" Uhr zerstört…

  • Ich kann leider nicht ganz beurteilen, wie präzise man bei der aktuellen Version tippen muss. Im Screenshot sehen die Buttons allerdings etwas klein aus. Eine Möglichkeit wäre es vllt, die Auswahl von Stunden und Minuten (und evtl Sekunden) in einzelne Pivot-Seiten auszulagern. Den Seitenwechsel könnte man dan automatisch nach dem antippen einer Stunde oder Minute anstoßen.

  • Genial!

    Das hat mich auch schon lang gestört! Meine Lösung war weniger stylisch :) Ich habe das ganze einfach durch TextBox’es ersetzt, die automatisch ihren Fokus weiterreichen. Nicht so hübsch aber effizient. (WIP github.com:443/Hades32/Better-WP7-DateTime-Picker )

    Kritik:
    Am letzten Screenshot sieht man ganz deutlich, warum man die Akzent-Farbe nicht Flächenmäßig einsetzen sollte. Am besten solltest du die Farbe 50% durchsichtig machen, dann wird sie automatisch heller/dunkler.

    Es wird nicht ganz klar, aber ich hoffen, wenn man auf PM umschaltet und eine DE locale hat, dass dann z.B. 15 Uhr und nicht mehr 3 dran steht.

    Außerdem wäre es – glaube ich – besser, die Auswahl nicht über die ganze Breite gehen zu lassen sondern sie quadratisch zu machen. Dann sind die Fingerbewegungen gleichmäßiger und die Uhr-Analogie kommt besser rüber.

    Jetzt nur noch das selbe für das Datum :)

  • Klasse Idee und ein gutes Beispiel für einen iterativen (Überarbeitungs)Designprozess :)

    Die Idee, nur eine Wählscheibe zu nutzen, finde ich ganz praktisch. Wählscheibe 1: Stunde (in der Mitte ein Button "+12" zum switchen. Dann automatischer Wechsel auf die Minuten. Unten ggf. noch eine Leiste, in der die gewählte Zeit drinsteht und mit der man aktiv zwischen den Punkten wechseln kann.

    Eine anbmerkung noch zur Farbwahl: Rot ist in Verbindung mit Schriften keine gute Idee, Versuch lieber eine andere Farbe zu wählen. Usability und so ;)

  • Eine gute Frage. Eine Uhr sollte dennoch jeder kennen, ob "modern" oder nicht. Nichts desto trotz sicherlich eine berechtigte Fragestellung, die es zu bedenken gibt.

    Eine andere Darstellung von "AM/PM" habe ich mittlerweile bereits mehrfach als Rückmeldung erhalten und werde ich wohl berücksichtigen (inklusive deiner zusätzlichen Anmerkung).

    Danke.

  • Danke ;-)

    Beziehst du dich hier auf den gesamten Eingabebereich inklusive "Scrollauswahl"? Letztere gibt es in einer anderen Form ja auch unter Windows Phone und genau diese möchte ich für eine Schnelleingabe weg bekommen.

  • Eine echte Uhrdarstellung hatte ich bereits getestet. Im Sinne der Usability war ich nicht wirklich damit zufrieden, da die Wahrscheinlichkeit recht hoch ist, dass "irrtümlich" ein falscher Wert erwischt wird und somit Korrekturen notwendig sind. Dennoch werde ich diese Variante nochmals in meine Überlegungen einfließen lassen.

    Die Eingabe über mehrere "Views" hinweg ist ein guter Input, den ich mir auf jeden Fall ansehen werde. Danke.

  • Lokalisierung kommt auf jeden Fall noch rein. Bis dato – für die Tests – nur mal die englische Variante.

    Danke für den Link auf dein Repository. Muss ich mir gleich ansehen.

  • Als Farbe wurde hier die aktuell ausgewählte Theme-Farbe herangezogen. Damit der Benutzer durchgehend die selbst ausgewählte Farbe hat. Das hat den Nachteil, dass es bei bestimmten Farben schon recht "knallig" werden kann. Eventuell doch auf ein eigenes Farbspektrum zurück greifen.