it-swarm.com.de

Erschwinglichkeit für die Größenänderung eines Panels

Die Standardmethode zum Sinalisieren der Größenänderungsfähigkeit ist der Mauszeiger des Betriebssystems, der Doppelpfeil in die Richtung, in der Sie die Größe ändern möchten (horizontal, vertikal oder diagonal). Dies geschieht, wenn die Maus über der Kante schwebt.

Meine Anwendung, eine Google chrome -Erweiterung, besteht aus einem rechtshändigen Bedienfeld, das als Seitenleiste in eine bestimmte Webseite eingefügt wird. Wenn der Benutzer mit der Maus über die Kante fährt, wird ein Handle für das Bedienfeld angezeigt. In diesem Griff befindet sich ein Symbol zum Verriegeln des Bedienfelds. Durch Klicken auf den Griff wird das Bedienfeld ausgeblendet/angezeigt.

Der Edge ist also der einzige und damit notwendige Pfad zwischen dem Webinhalt und meiner App (dem Panel), da der Edge die beiden trennt. Wenn der Benutzer also mehrmals über dieser Kante schwebt, ist es ein gutes Interaktionsdesign, den Griff zu verbergen und nur beim Schweben anzuzeigen? Es würde die meiste Zeit unnötige Elemente verbergen, aber auch die Erschwinglichkeit verbergen in einer statischen Situation.

Sollte die Größe des Bedienfelds beim Ziehen die Größe des Handles insgesamt ändern, oder sollte ich sie auf Symbole oder visuelle Bereiche im Griff beschränken? Welche visuellen Hinweise funktionieren in dieser Situation am besten?

  • Sollten diese visuellen Hinweise beim Schweben aufleuchten?

  • Sollten diese visuellen Hinweise ihren Status ändern, wenn Sie sie "greifen" lassen?

  • Ist es auch ein gutes Interaktionsdesign, einen Handcursor (für 'greifen') anstelle des Standard-Doppelpfeilcursors zum Ändern der Größe zu verwenden?

7
Vic Goldfeld

Wenn ich Ihre Beschreibung richtig verstehe, sollten Sie eine normale vertikale geteilte Leiste verwenden, um Ihre App, die Seitenleiste, von der Webseite zu trennen.

Dieser geteilte Balken sollte immer sichtbar sein, nicht nur beim Schweben. Und die gesamte geteilte Leiste sollte beweglich sein, nicht auf einige Symbole beschränkt.

Sie sollten nicht einen Handcursor verwenden, sich aber an den Standard-Doppelpfeilcursor halten.

Ich glaube, dass der Benutzer mit dem Konzept der Größenänderung von Panels wie diesem vertraut ist (zumindest alle Benutzer, die die Größe ändern möchten). Wenn jedoch die vertikale geteilte Stange fehlt, glauben sie möglicherweise, dass die Breite der Seitenstange fest und nicht einstellbar ist.

enter image description here

8

Wenn Sie nach Erschwinglichkeit suchen, müssen Sie dem Benutzer etwas anzeigen, bevor er mit ihm interagiert. Wenn sich der Cursor nur in einen Doppelkopfpfeil verwandelt, wenn Sie mit der Maus über den Rand fahren, wissen sie nicht, dass dies sogar eine Option ist bis sie schweben tatsächlich über dem Rand.

Sie sollten im Fenster für alle erweiterbaren Bedienfelder etwas anzeigen, um anzuzeigen, dass auf diese Weise mit ihnen interagiert werden kann.

Ähnliche Dinge werden in verschiedenen Anwendungen gemacht, ich habe hier ein paar gepackt, um einige Beispiele zu zeigen.

enter image description here

5
JonW

In solchen Situationen gibt es viele Kontexte, auf die Sie sich verlassen können. Aus meiner Sicht gibt es einen Spielraum zwischen dem, was Sie immer als Best Practice tun sollten, und dem, worauf Sie sich aus der Erfahrung Ihres Publikums verlassen können.

Da die Benutzer dies als Erweiterung installieren und Sie möchten, dass es so aussieht und sich so anfühlt, als ob es Teil der Browseranwendung ist, ist es wahrscheinlich ein gewünschtes Ziel, keine Grab/Move-Symbole in der Benutzeroberfläche sichtbar zu haben. Ich sage nur, dass es unter der Annahme eine angemessene Breite haben wird (nicht das Fenster übernehmen) und mit einem Cursorwechsel als visuelle Verstärkung in der Größe veränderbar sein wird.

Ein weiterer Winkel, der Spielraum eröffnet, ist das Verständnis, wie problematisch es ist, das Grab/Move-Symbol nicht anzuzeigen. Wenn die meisten Ihrer Zielgruppen über breitere Bildschirme verfügen und es unwahrscheinlich ist, dass sie weniger Erfahrung beim Surfen auf Websites haben, wird das Nicht-Anzeigen der Tools nicht viel Kummer verursachen. Wenn Leute es aus Eitelkeitsgründen ändern wollen, können sie etwas härter arbeiten, ohne das Gefühl zu haben, ausgenutzt zu werden.

Evernote hat eine gute Lösung für etwas Ähnliches:

enter image description here

Es ist nur eine graue Linie, die die linke Spalte enthält. Wenn sich Ihr Cursor über einem 10-Pixel-Bereich rechts von der Spalte befindet, wird ein hellblaues Feld angezeigt und Ihr Cursor ändert sich in einen Pfeil nach links/rechts mit einem Balken in der Mitte (ich habe keine Ahnung, wie dieses Symbol heißt).

Wenn Sie etwas Ähnliches tun würden, würde ich mir ein paar Dinge Sorgen machen:

  • Platzieren Sie das Feld, dessen Größe die Spalte ändert, auf Ihrer Seite. Ich würde versuchen, andere Websites so wenig wie möglich zu stören.
  • Evernote tut dies nicht, aber es ist möglicherweise noch deutlicher, wenn Sie die Drag/Move-Symbole in das Feld einfügen, das beim Rollover angezeigt wird.
  • Testen Sie die responsive/adaptive Website mit installierter Erweiterung. Ich wäre sehr wütend, wenn ich viel Zeit damit verbringen würde, eine schöne Website zu erstellen, die in das Fenster passt, und jemandes Erweiterung mein Design überlappt.

Ich vermute, Sie kennen den letzten Teil bereits. Ich will nur sicher gehen. :) :)

1
Dan Ritz