it-swarm.com.de

Wie kann ich Benutzern Feedback geben, dass die Site verarbeitet wird?

Ich entwerfe eine Website, die nur eine 16 x 16-Kachel mit Quadraten verschiedener Farben (kleine Quadrate) ist. -> Ein Benutzer kann auf eine Kachel klicken, um deren Farbe zu ändern.

Das Problem ist, dass das Berechnen der neuen Farbe für die Kachel 3 bis 5 Sekunden dauert (egal warum und es wird nicht schneller sein).

Wie kann ich dem Benutzer Feedback geben, dass seine Eingabe akzeptiert wurde, und er wartet nun darauf, dass die Farbe angezeigt wird? (Ohne jedoch den Eindruck zu erwecken, dass die Website langsam ist)

Ich habe an zwei Möglichkeiten gedacht:

  1. das übliche rotierende Ladezeichen in der Nähe der zu ladenden Fliese
  2. ändern Sie zuerst die Kachel in eine Standard-/neutrale Farbe und dann in die richtige (berechnete) Farbe

Gibt es bessere Möglichkeiten, dieses Warte-Feedback zu geben?

5
John Assymptoth

Am wichtigsten in Ihrer Aufgabe, eine Antwort des Systems auf die Aktion des Benutzers zu erstellen. Nicht wichtig, wie es aussehen wird: Kreis drehen oder ein anderer Fortschrittsbalken oder ist stilisiert wie in meinem Bild zum Beispiel. color_process

Die Hauptsache, dass der Benutzer den visuellen Hinweis erhielt, dass das System auf seine Anfrage nach oder nicht einfriert oder nicht vollständig funktioniert.

Auf diese Weise funktioniert der Indikator zum Senden an IOS).

iOS

Die Länge der Animationen für den Fortschrittsbalken beträgt standardmäßig 4 Sekunden. Selbst wenn Ihre Nachricht bereits gesendet wurde, sehen Sie eine Animation und wissen, dass sendind nicht einfriert. Falls das Senden länger dauert, stoppt die Anzeige vor dem Ende des Balkens und benachrichtigt Sie, wenn dies direkt durch das Senden von Daten erfolgt. In den meisten Fällen erfolgt das Senden schneller als 4 Sekunden, was für Benutzer, die einfach einen Fortschrittsbalken für das Senden anzeigen, nicht verdächtig aussieht.

Es gibt viele Möglichkeiten, diesen Prozess zu entwerfen. Die Visualisierung dieses Prozesses hängt jedoch von den ästhetischen Anforderungen Ihres Projekts ab.

Kann ein Hundemaskottchen mit einem Farbeimer & Pinsel sein, der Pixel malt, ist das Beste.

5
denis.efremov

Wenn jede Kachel asynchron geändert werden kann, möchten Sie wahrscheinlich eine subtile Animation auf der ausgewählten Kachel. Benutzer neigen dazu anzunehmen, dass Bewegung anzeigt, dass das System an etwas arbeitet, auch wenn diese Bewegung nur auf dem Client erzeugt wird und nicht mit dem Backend verbunden ist, das die eigentliche Arbeit ausführt.

Wenn Ihre Benutzer typische Webbenutzer sind, können Sie davon ausgehen, dass sie mit dem von Ihnen vorgeschlagenen rotierenden Symbol vertraut sind, insbesondere wenn es das Symbol IE Throbber oder Puffersymbol in Flash-Videos) nachahmt. Benutzer verknüpfen diese jedoch mit nervigen Verzögerungen, also möchten Sie vielleicht etwas unterhaltsameres und konsistenteres mit Ihrer Metapher. Vielleicht enden die ausgewählten Kachelflips über das Ende, wobei beim letzten Flip die Vorderseite die neue Farbe hat.

Im Idealfall liefert die Animation einen Hinweis auf den Fortschritt am hinteren Ende (z. B. zeigt die alte farbige Kachel, die synchron zum tatsächlichen Fortschritt herausgeschoben oder weggeschlagen wird), aber das ist wahrscheinlich zu viel, um in einer Web-App danach zu fragen, und nicht notwendig angesichts Ihrer relativ kurzen Bearbeitungszeiten.

Die Animation kann ablenken. Wenn Benutzertests ergeben, dass dies ein Problem ist, müssen Sie zu einer statischen Anzeige gehen, dass die Eingabe empfangen, aber nicht vollständig verarbeitet wurde. Sie möchten ein vorläufiges Erscheinungsbild, aber das Problem beim Wechsel zu einer neutralen Farbe besteht darin, dass Benutzer möglicherweise glauben, dass die App die Kachel in die falsche Farbe ändert. Vielleicht ist es besser, die aktuelle Farbe auszublenden oder zu schwanken, insbesondere wenn der Benutzer erst nach der ersten Änderung eine weitere Änderung an der Kachel befehlen kann (d. H. Sie ist im Wesentlichen deaktiviert). Das vielleicht einfachste und effektivste statische Feedback wäre der Text „Ändern…“, der über die Kachel gelegt wird.

Wenn jeder Kachelwechsel synchron ist, muss Ihr Feedback anzeigen, dass die gesamte 16x16-Matrix deaktiviert ist, Ablenkung weniger ein Problem darstellt (es gibt nichts, von dem der Benutzer abgelenkt werden kann), und es wird noch wichtiger, unterhaltsam und/oder informativ zu sein Anzeige des Prozesses. Sei kreativ und wild.

Abhängig von Ihren Benutzern und Ihrer Arbeitsumgebung möchten Sie möglicherweise auch die visuelle Anzeige durch eine Audioanzeige ergänzen, dass die Verarbeitung stattfindet. Dies kann besonders effektiv sein, wenn Sie keine Animation haben. Der Sound sollte eine leise angenehme Modulation sein, die im Hintergrund bleibt, vielleicht wie "Bip-Bip-Bip-Bip" oder etwas, das mit Ihrer Metapher übereinstimmt. Mit nur 256 Kacheln könnten Sie wahrscheinlich jeder Kachel einen einzigartigen Klang verleihen (z. B. ist jede eine andere Kombination von Frequenzen, die durch Zeile und Spalte bestimmt werden, wie z. B. Tastentöne in einem Telefon). Oder der Ton zeigt die alte Farbe und/oder bekannte Parameter für die neue Farbe an, je nachdem, wie viele Farben Sie haben. Fügen Sie einfach eine prominente Steuerung hinzu, mit der Benutzer den Ton stummschalten können, wenn sie möchten.

4

Ich würde eine Art animiertes GIF verwenden, das die Farben ändert und darauf wartet, dass die echte Farbe entsteht. Wenn die echte Farbe fertig ist, können Sie zur richtigen wechseln.

Benutzer "sehen" dann, dass tatsächlich etwas passiert, wenn sich die Farbe von einer zur anderen ändert.

Ein Beispiel:

Bild von http://waxinandmilkin.com

Ich würde allerdings etwas mit einem erhabeneren Farbwechseleffekt verwenden :-)

2
Benny Skogberg