it-swarm.com.de

Auswahl des Zeitfensters

Ich bin auf der Suche nach dem benutzerfreundlichsten Weg, eine Zeitfensterauswahl anzubieten, um einen Termin im Kalender/in der Agenda eines Unternehmens zu vereinbaren.

In Bezug auf die Benutzeroberfläche spielt es keine große Rolle, aber weil es geringfügige Einschränkungen schafft: Dies wird in ein Webformular integriert, das im Idealfall sowohl von Desktops als auch von Mobilgeräten verwendet werden kann (es muss auf JavaScript basieren).

Natürlich könnte könnte eine Datumsauswahl (Monatsansicht) darstellen und für jedes ausgewählte Datum könnten die verfügbaren Zeitfenster geladen werden, aber dies würde eine visuelle Übersicht über mehrere Tage verhindern.

Ziele, die ich für wichtig halte (einige davon offensichtlich):

  • So wenig klicken wie möglich, um das Ergebnis zu erreichen.
  • Behalten Sie den Überblick (mehrere Tage gleichzeitig sichtbar).
  • Das Bauteil sollte so kompakt wie möglich sein. Dies bedeutet, dass eine große Anzahl von Schaltflächen die Integration in ein Formular überladen erscheinen lässt.
  • Die Auswahl mehrerer benachbarter Slots sollte möglich sein (auch über Tage und damit Wochen).

Was ich bisher habe, ist dieses Modell:

calendar slot picker

Diese Lösung ist jedoch aufgrund dieser Einschränkungen alles andere als ideal:

  • Ich bin mir ziemlich sicher, dass dies auf Mobilgeräten gut aussehen würde (vorausgesetzt, Sie können mit Berührung scrollen), aber auf dem Desktop wären (imho hässliche) Links-Rechts-Tasten erforderlich, um horizontal durch die Wochen zu scrollen. Sie würden auch außerhalb des Designs fallen, was es weniger kompakt machen würde.
  • Wenn an einem Tag eine große Anzahl verfügbarer Optionen verfügbar ist (sehr häufig), ist ein vertikales Scrollen innerhalb der Komponente erforderlich. Zusammen mit der vorherigen Bemerkung würde dies ein Scrollen in beide Richtungen erzeugen, was mir einfach zu viel erscheint.
  • Es kann den ersten Eindruck erwecken, dass Slots auf derselben horizontalen Linie zur gleichen Zeit beginnen, was sie nicht tun. Das Hinzufügen von Leerzeichen zwischen den Slots im Verhältnis zur Zeit dazwischen würde zu noch mehr Bildlauf führen.

Ich bin mir also nicht sicher, ob das Modell in die richtige Richtung geht. Jede Hilfe wäre sehr dankbar. Ob es auf dem Modell oder einem völlig anderen Ansatz basiert.

7
smhg

Hmmm. Wenn ich Ihre Frage verstehe, möchten Sie, dass die Lösung auch so flexibel wie möglich ist - um mehrere aufeinanderfolgende Tage so einfach wie einige Stunden (oder sogar Minuten) auswählen zu können. Im Großen und Ganzen denke ich:

  • Zoomen und schwenken, um den breiten Zeitrahmen zu erhalten (z. B. verkleinern, um Jahre zu erhalten, schwenken, um 2015 auszuwählen, zoomen, um die erste Januarwoche auszuwählen (einfach mit dem Handy, etwas umständlicher, aber immer noch mit der Maus machbar)
  • Wählen Sie den allgemeinen Zeitrahmen (z. B. die wenigen erforderlichen Stunden) und geben Sie die Termindetails ein. Zu diesem Zeitpunkt kann eine weitere Verfeinerung des Zeitrahmens durchgeführt werden

Das allgemeine Prinzip besteht darin, den Benutzer so präzise zu lassen, wie er möchte - ein bisschen wie ein Gespräch, bei dem ich sagen könnte: "Wir sehen uns nächsten Dienstag", und wir beschränken es dann im Café auf 2:15.

4
Peter

Interessante Webanwendung. Etwas, das Sie vielleicht untersuchen möchten, ist Adam Shaws Full Calander jQuery-Plugin. Ich habe es für eine Weile benutzt und es ist ziemlich erweiterbar. Soweit das, was meine Unternehmensentwickler gesehen und verwendet haben, sind sie ziemlich beeindruckend. Es hat eine Erweiterung für Google Kalender und wir haben es auch als POC an Microsoft Exchange-Server angeschlossen.

Für Desktop-Benutzer ist die Benutzeroberfläche sehr intuitiv. Genau wie bei Microsoft Office und Google Calander. Für mobile Benutzer gibt es leider keine Unterstützung für Klicken und Ziehen. Das Plugin verfügt über eine vollständige API, mit der Sie auf dem Plugin aufbauen können. Keine Einheitslösung, bietet aber definitiv eine gute Grundlage.

3
JeffH