it-swarm.com.de

Auf der Hilfeseite nach Hilfe suchen!

Ich habe viele sehr ähnliche Dateneingabeformulare auf verschiedenen Registerkarten. Ich versuche, anständig aussehende und effektive Hilfebildschirme für die Daten zu erhalten. Auch irgendwelche Ideen zu den Formularen selbst. TIA Sie können es hier sehen: Hilfebild http://bit.ly/hAk5N5

2
Royce

Ehrlich gesagt denke ich, dass ein großes Ziel von gutem UX darin besteht, dass Sie Ihren Benutzern nicht erklären müssen, was diese Felder tun. Die Art und Weise, wie die Felder auf der Seite angeordnet sind, und die Beschriftungen für sie sollten es fast vollständig selbsterklärend machen.

(Joel Spolsky hat einen ausgezeichneten Artikel dazu, Entwerfen für Menschen, die bessere Dinge mit ihrem Leben zu tun haben - Ich empfehle dringend, ihn zu lesen.)

Sie möchten Ihren Benutzer durch die Anwendung führen - nicht nur eine Seite oder ein Formular anzeigen und hoffen/erwarten, dass er herausfindet, was zu tun ist.

Die kontextbezogene Hilfe ist meiner Meinung nach oft eine rote Fahne, dass die Anwendung dem Benutzer nicht genug hilft. Mit anderen Worten, wenn Sie kontextbezogene Hilfe benötigen, kann dies bedeuten, dass das UX-Design einen Fehler aufweist.

Anstatt beispielsweise das Textfeld "Verfügbare Zeiten" zusammen mit einem Kontrollkästchen "Weiß nicht" anzuzeigen, können Sie stattdessen Folgendes verwenden:

  • Eine Frage: "Weißt du, wann die Filme verfügbar sind?" mit einem Radio Ja/Nein
  • Wenn sie Ja auswählen, zeigen Sie das Textfeld an und fragen Sie nach den Zeiten
  • Wenn sie Nein auswählen, sind Sie fertig.

Der obige Wortlaut ist möglicherweise nicht ganz richtig für Ihre Situation, aber der Punkt ist, dass das Stellen der Fragen auf diese Weise für den Endbenutzer viel intuitiver ist und auch Formularfelder eliminiert, die ohnehin leer bleiben würden.

Davon abgesehen fand ich ein Beispiel für kontextbezogene Hilfe, die ich für ziemlich gut hielt. Es ist etwas anders, weil es keine Hilfe für Formularfelder ist, aber es könnte wahrscheinlich angepasst werden.

Das Beispiel ist die Seite Pläne für HootSuite . Wenn Sie mit der Maus über eines der Elemente fahren, wird ein kleines Feld angezeigt, in dem erläutert wird, um was es sich handelt, sowie ein Pfeil, damit Sie genau wissen, wofür das Feld bestimmt ist. Hier ist ein Bild:

HootSuite Registration Page

Sie können etwas Ähnliches tun, sodass beim Fokussieren des Formularfelds ein kleines Feld zur Seite erscheint und erklärt, wozu das Formularfeld dient.

Die Hauptmerkmale sind, dass die kontextbezogene Hilfe nur angezeigt wird, wenn sie relevant ist (damit die Seite nicht überladen wird), und der Benutzer nichts tun muss, damit sie angezeigt wird. Sie möchten dem Benutzer wahrscheinlich die Möglichkeit geben, die kontextbezogene Hilfe auszublenden, da es schnell ärgerlich werden kann, wenn er viele Daten eingibt. Auf diese Weise sehen die neuen Benutzer die Hilfemeldungen standardmäßig und können sie ausblenden, sobald sie sich wohl fühlen.

2
Ryan

Wow .. Danke für all die Antworten. Ich werde auf jeden Fall versuchen, einige von ihnen aufzunehmen. Ich hatte tatsächlich einen Link zu meinem Dropbox-Konto für das Bild eingefügt, bin mir aber nicht sicher, warum es in ein Inline-Bild gezwungen wurde. Vielleicht muss ich mich registrieren?

Nur ein Gedanke, gute UX-Designer sind rar gesät. Ich bin sicher, ihr seid verrückt beschäftigt, aber es wäre toll, eine Jobbörse auf der Website zu haben.

0
Royce

Wenn die Hilfebildschirme kontextbezogen sind, würde ich dringend einen Tooltip oder ein modales Fenster empfehlen.

0
S16

Wäre toll, wenn Sie mehr Infos oder einen größeren Screenshot zur Verfügung stellen würden, aber ein paar Dinge können bereits gesagt werden. Es sieht sehr nach einer App aus, aber ich nehme an, es ist immerhin eine Website. In diesem Fall:

  1. Stapeln Sie die Gruppen übereinander, nicht in zwei Spalten. Lassen Sie die rechte Spalte leer.
  2. Zeigen Sie die Hilfe in der rechten Spalte an - entweder immer oder wenn der Fokus das entsprechende Feld/die Feldgruppe erreicht. Verwenden Sie auch die rechte Spalte für Fehlermeldungen aus der Live-Validierung.
  3. Versuchen Sie, die ersten 6 Funkgeräte in drei Paaren und in zwei Dreien auszulegen, um die Höhe etwas zu verringern. Oder noch besser, verwandeln Sie sie entweder in ein Dropdown-Menü, in dem "anderes" das Textfeld aktiviert, oder in ein Kombinationsfeld, in dem Sie beide einen Wert auswählen oder einen eigenen eingeben können.
  4. Theateradresse - was bedeutet das Sternchen? Sind alle diese Felder erforderlich? Ich hoffe nicht. Prüfen Sie, ob Sie die automatische Vervollständigung der verschiedenen Felder, das automatische Ausfüllen der Adresse basierend auf der Postleitzahl oder zumindest das automatische Ausfüllen der Postleitzahl basierend auf der Adresse vorschlagen können. Überprüfen Sie, ob Sie den Benutzer geografisch lokalisieren und die Felder für ihn ausfüllen können.
  5. Sie können eine Datumsauswahl verwenden, mit der Sie eine Reihe von Daten auswählen können, anstatt zwei separate Datumsauswahl. Ich bin mir nicht sicher, ob es eine großartige Idee ist. Ich denke, sie sind möglicherweise schwieriger zu verwenden.
  6. Nehmen Sie die Aktionsschaltflächen aus diesem dunklen Rahmen heraus, sie fügen sich ein und werden praktisch unsichtbar. Fügen Sie am unteren Rand des Formulars einen großen, auffälligen SUBMIT-Button ein.
0

Wenn Sie der Meinung sind, dass der Text für jeden von Vorteil ist, der ständig Daten eingibt, anstatt nur beim ersten Mal, können Sie oben oder unten einen Bereich abspielen, in dem der Hilfetext angezeigt wird, wenn Sie zwischen den Feldern wechseln.

Wenn die Texthilfe nur dann nützlich ist, wenn sie Fragen hat, sind QuickInfos oder kleine (?) Symbole, die den Tooltip beim Hover anzeigen, die typische Route.

Das Wechseln zu einer anderen Seite ist ein störender Prozess, und Sie sollten dem Prozess Hilfe hinzufügen und nicht außerhalb.

0
databyte