webentwicklung-frage-antwort-db.com.de

Ergonomisches Trackpad + Tastenlayout für die Smart TV-Fernbedienung

Ich entwickle eine ferngesteuerte iOS-App, mit der ein Webbrowser gesteuert werden kann, der in einem Smart-TV ausgeführt wird, und der Hilfe benötigt. Ich bin daran interessiert, wie ich Steuerelemente so platzieren kann, dass sie für den wiederholten Gebrauch sowohl intuitiv als auch ergonomisch sind.

Must-Have-Funktionalität:

  • Trackpad (wie Mac - Cursor bewegen, zum Klicken tippen, mit zwei Fingern scrollen)
  • Remote Tastatur - Verwenden Sie die Gerätetastatur, um Text in ein Remote-Feld einzugeben
  • Schließen Sie die Schaltfläche, um den Controller zu schließen

Schön zu haben:

  • Adressleiste mit Zurück und Nachladen
  • Möglichkeit zum Öffnen des Smart-TV auf dem Bildschirm Menü

Ich versuche, all diese Funktionen in einem variablen Raum darzustellen (iPhone-Familie von 5 bis 6 plus, Hoch- und Querformat).


Meine bisherigen Versuche:

  1. Das sauberste Design, aber die geringste Funktionalität und keine Möglichkeit, "zurück" zu gehen oder das Menü zu öffnen. Dies führte zur Entwurfssuche
  2. Volle Funktionalität, Layout ist intuitiv (imitiert Chrome Browser). Top-Steuerelemente sind sehr schwer zu erreichen
  3. Teilfunktionen wie # 2 werden zurückgesetzt und neu geladen
  4. Teilfunktionalität, keine Adressleiste, Benutzer verwechseln die Zurück-Schaltfläche des Browsers mit der X-Schaltfläche, um den Controller zu schließen.

Gibt es bessere Möglichkeiten, Tasten auf einem großen Telefonbildschirm ergonomisch und intuitiv anzuordnen?

Mockups 1–4


Einige Referenz-Heatmaps für die Ergonomie mobiler Touchscreens:

Thumb area, different holding positions

Thumb area, different device and screen sizes

7
Alex Stone

Schnelle Kritik:

  • Funktionsreichtum vs. ergonomischer Minimalismus ist hier ein wichtiger Kompromiss. Sie möchten, dass die Fernbedienung voll funktionsfähig ist, aber so einfach zu bedienen ist, dass sie nicht einschüchternd wirkt. Das ist ein Gleichgewicht, das die meisten Fernbedienungen NICHT richtig machen.

  • Kreisformen sind hier problematisch. Ich verstehe, warum Sie kreisförmige Formen verwenden würden, weil sie "freundlich" sind. Sobald Sie jedoch mehrere Kreise auf dem Bildschirm haben, fühlt es sich wirklich unübersichtlich an, es sei denn, die Kreise sind sehr sorgfältig angeordnet, normalerweise in einer regulären Gitterstruktur.

    • Ihr Layout enthält Kreise UND Viertelkreise unterschiedlicher Größe in einem Nicht-Raster-Layout, was zu einer verwirrenden Benutzeroberfläche führt. Schauen Sie sich zum Beispiel den negativen (weißen) Bereich in Ihrem Layout an. Auf diese Weise können Sie leicht feststellen, wie verwirrend das Layout ist.
  • Schaltflächen ein- oder ausblenden? Verschiedene Benutzer haben unterschiedliche Fachkenntnisse/Anforderungen, daher ist es schwierig herauszufinden, ob Schaltflächen angezeigt oder ausgeblendet werden sollen (z. B. Layout Nr. 1 oder Nr. 4).

  • Kontrastreiches Lila-auf-Weiß verursacht sehr starke Grenzen, sodass sich die Benutzeroberfläche etwas unangenehm anfühlt.


Ein entworfener Ansatz (zum Vergrößern anklicken):

(remote

Anmerkungen:

  • Verwendet rechteckige Schaltflächen für bessere Rasterausrichtung und bessere Raumnutzung. Vertikale Symmetrie und eine monotone Palette mit weniger Kontrast beruhigen die Schnittstelle weiter.
  • Erstellt ein großes, quadratisches Trackpad, das für Sie eine Designpriorität darstellt.
  • Ermöglicht dem Benutzer, zusätzliche Schaltflächen ein- oder auszublenden, abhängig von seinem Kenntnisstand. Dies ist ein Ansatz, der von der TouchWiz-Oberfläche von Samsung übernommen wurde.

    • Die Tasten sind "klebrig". Sobald der Benutzer sie erweitert oder ausblendet, bleiben sie beim nächsten Zugriff auf die Fernbedienung so. Auf diese Weise können Benutzer die Benutzeroberfläche auf einfache Weise anpassen.
  • Bietet eine vertraute Browserleiste, die idiomatisch den Browsern (Chrom, FF, Safari) folgt, mit denen Benutzer bereits vertraut sind.

  • Entspricht dem daumenfreundliches Layout, für das Sie zu entwerfen versucht haben.


Übrigens gefällt mir der linke Ansatz viel besser als der rechte (er ist weniger aufdringlich, respektiert den Trackpad-Bereich besser usw.), dachte aber, ich würde 2 Alternativen nennen.

2
tohster

Ich stimme den Kommentaren zu, in denen die Notwendigkeit erwähnt wird, häufig verwendete Browserfunktionen zu erfassen. Angesichts der in Ihrem Modell gezeigten Steuerelemente (7-8 Elemente) könnte sich eine mögliche Lösung jedoch auf Folgendes konzentrieren:

1. Gruppieren von Steuerelementen an einem Ort : Auf diese Weise können Sie Unordnung beseitigen, Raum für Skalierung bewahren, wenn Sie zusätzliche Funktionen hinzufügen müssen, und den Weg für Folgendes ebnen:

2. Übergabe der Steuerung an Benutzer : Mit Steuerelementen an einem Ort können Benutzer entscheiden, wie genau sie die Fernbedienung verwenden möchten, indem sie Artikel in der gewünschten Reihenfolge bestellen.

Das folgende Modell enthält die folgenden Gedanken:

enter image description here

3
Okavango