Was ist ein gutes verallgemeinertes „Navigieren zu“- oder „Öffnen“- oder „Mehr“- oder „Auswählen“- oder „Auswählen“-Symbol?

Stellen Sie sich eine Tabelle mit vielen Zeilen in einer Webanwendung vor. Die erste Spalte enthält nur ein Symbol, keinen Text. Wenn Sie einmal auf das Symbol klicken, muss es die Auswahl dieser Zeile darstellen und führt Sie zu einer neuen Seite. Welche Ikone würdest du wählen?

Update: In diesem speziellen Fall wählt es ein Programm aus. Kein Softwareprogramm, sondern ein Regierungsprogramm (dh die Regierung betreibt ein Programm, um Geld zu verschenken). Ich hatte auf ein kontextfreies Symbol gehofft und könnte mich für ein Handsymbol entscheiden Geben Sie hier die Bildbeschreibung ein, aber ein kontextsensitives Symbol, das ein Programm darstellt, würde auch funktionieren.

Dies hängt wirklich davon ab, was das Auswählen der Zeile und das Wechseln zur neuen Seite tatsächlich bedeutet . Wenn es sich um eine Tabelle mit zu kaufenden Produkten handelt und die nächste Seite zur Kasse geht, dann handelt es sich um etwas, das mit dem Einkaufswagen zu tun hat. Wenn es sich um eine Auswahltabelle in einem mehrstufigen Prozess handelt und die nächste Seite nur der nächste Schritt ist, so etwas wie ein nach rechts zeigender Pfeil. Wenn es sich um eine Speisekarte in einem Restaurant handelt und die nächste Seite Ihre Bestellung bestätigt, dann so etwas wie ein Messer-und-Gabel-Symbol. usw usw usw.

Antworten (4)

Es wählt und geht zu einer neuen Seite? Ohne jeden anderen Kontext klingt es wie eine seltsame Erfahrung.

Ein Kontrollkästchen würde wahrscheinlich die Arbeit erledigen.

Ohne Kontext könnte eine logischere Darstellung darin bestehen, die Auswahlspalte nach rechts zu verschieben und in irgendeiner Form einen Rechtspfeil zu verwenden. Das würde bedeuten, dass Sie sie zu einer Unterseite für diese Zeile weiterleiten.

Deshalb denke ich, dass es eine seltsame Erfahrung ist. Ich glaube nicht, dass ein "Auswählen" -Symbol "Wählen Sie dieses Element aus und verlassen Sie dann sofort die Seite" vermitteln wird.
stimme dem Kommentar oben zu. Verwenden Sie kein Kontrollkästchen als Schaltfläche!

Das allgemeine UI-Widget zum Auswählen eines Elements aus einer Liste ist ein Optionsfeld.

( ) Item 1
( ) Item 2
( ) Item 3

Natürlich führt Sie das Auswählen eines Optionsfelds selten zu einer anderen Seite, aber es ist sicherlich machbar.

Eine alternative Lösung wäre, sie einfach zu verlinken:

    Punkt 1
    Punkt 2
    Punkt 3

Und noch eine andere Lösung wäre, eine Interaktion zu übernehmen, die auf mobilen Geräten üblich wird, nämlich eine „Auswahlliste“ oder „ Miller Columns “.

------------------------------------------------------
Item 1                                              >
------------------------------------------------------
Item 2                                              >
------------------------------------------------------
Item 3                                              >
------------------------------------------------------

Letzteres bevorzuge ich aus zwei Gründen:

  1. Affordance: Es „fühlt“ sich anklickbar an und zeigt an, dass ich etwas anderes sehen werde, nachdem ich es ausgewählt habe.
  2. Es reagiert: Da es bereits einen mobilen UI-Standard ausleiht, ist es bereits für Mobilgeräte bereit!

Der Nachteil ist, dass es möglicherweise nicht für eine Datentabelle funktioniert. Dies ist möglich, aber möglicherweise nicht ideal, wenn viele zusätzliche Daten vorhanden sind.

AKTUALISIEREN:

Ich habe das Spezifische Ihrer Frage völlig übersehen: Sie möchten ein Symbol haben. Das ist eine schwierigere Frage. Ich bin mir nicht sicher, ob ich ein Symbol dafür empfehlen würde. Stattdessen würde ich sicherstellen, dass die gesamte Zeile auswählbar ist, und Sie geben dies auf eine bestimmte Weise an, wahrscheinlich über eine der oben beschriebenen Methoden.

Aber wenn es ein Symbol sein muss, würde ich vorschlagen, das Symbol nach rechts zu verschieben und einen Pfeil zu verwenden - vielleicht beim Hover (oder standardmäßig ausgegraut und beim Hover hervorheben). Der Pfeil sagt "wählen Sie dies und fahren Sie fort ..." ähnlich wie in der oben gezeigten Auswahlliste.

Ich würde wahrscheinlich eine Kombination verwenden aus:

Ändern/Invertieren der gesamten Zeilenfarbe, wenn Sie den Mauszeiger darüber bewegen – um anzuzeigen, dass Sie damit interagieren können

&

Ändern des Cursors in die PointerCSS-Eigenschaft, wenn Sie mit der Maus über die Schaltfläche fahren - ein sehr offensichtlicher Hinweis darauf, dass auf etwas geklickt werden kann.

In Ihrem speziellen Fall würde ich eher Text als ein Symbol verwenden, da Sie dies nicht einfach in einem Symbol darstellen können. Ich würde so etwas wie moreoder editim grundlegenden HTML-Link-Stil wie folgt verwenden:

Row 1 . Column . Column . Column Mehr/BearbeitenZeiger-Cursor

Row 2 . Column . Column . Column Mehr/Bearbeiten

Row 3 . Column . Column . Column Mehr/Bearbeiten

Ich würde die Steuerelemente auch nach dem Inhalt platzieren, da wir von links nach rechts lesen, sodass der Benutzer zumindest einen Teil der Zeile lesen muss , bevor er entscheidet, dass es das ist, was er möchte.

Ausgezeichnete Idee zum Ändern des Cursors. Tatsächlich ist das Symbol ein Link, sodass sich der Cursor automatisch ändert und der Alt-Text angezeigt wird, wenn Sie lange genug darüber schweben. Das sind meine Anforderungen, also habe ich hier keine Flexibilität. Nur um das Symbol zu wählen.

Wenn es zu einer neuen Seite geht, würde ich wahrscheinlich ein Symbol wählen, das die neue Seite symbolisiert, wenn die neue Seite eine Art Formular ist, würde ich ein Symbol wählen, das ein Formular darstellt.

Kontextsensitives Symbol ist eine gute Idee. In meinem Fall ist es die Auswahl eines Programms, wie in einem Regierungsprogramm, das $$$ austeilt.
( $.$) .... in diesem Fall würde ich wahrscheinlich entweder ein Schwarzweiß-Sparschwein-Symbol (eine Art Vektor-Symbol) oder glitzernde gelbe Münzen verwenden, aber das bin nur ich
Was ist ein gutes verallgemeinertes „Navigieren zu“- oder „Öffnen“- oder „Mehr“- oder „Auswählen“- oder „Auswählen“-Symbol?
AntwortenHierDatenschutz-Bestimmungen1y, 0v