it-swarm.com.de

Wischen Sie, um die linke Navigation zu erweitern / zu reduzieren

Meine Android Anwendung hat ein Navigationsmenü auf der linken Seite ähnlich der linken Menüleiste von Google TV . Ich kann es programmgesteuert reduzieren und erweitern, um mehr oder weniger Platz auf dem zu schaffen Bildschirm. In der schmalen Ansicht gibt es nur Schaltflächen mit Symbolen und in der breiteren Ansicht gibt es auch Text mit jeder Schaltfläche.

Jetzt spiele ich damit, den Benutzer diese Navigation mit einer Geste nach links/rechts erweitern und reduzieren zu lassen. Es funktioniert alles gut, aber ich bezweifle, dass Benutzer die Funktion tatsächlich entdecken werden. Ich hatte ein ähnliches Problem mit dem langen Klick in der Vergangenheit und fügte schließlich Schaltflächen hinzu, die dasselbe tun wie der lange Klick.

Sollte ich das für diese Funktion zum Reduzieren/Erweitern und für die Wischgeste tun? Gibt es andere Optionen, die dem Benutzer helfen, diese Funktion zu entdecken? Ein Hilfetext oder ein Release-Hinweis für neue Funktionen oder so würde wahrscheinlich nie gelesen werden, nehme ich an.

4
Manfred Moser

Die Sache mit Gesten ist, dass sie über alle Apps auf einer Plattform hinweg ein konsistentes Verhalten aufweisen sollten. Andernfalls sind sie verwirrend und schwer zu entdecken.

Wie ich in meinem Kommentar zum OP erwähnt habe, verwendet das webOS von HP häufig Schiebefenster (es ist tatsächlich ein Teil des offiziellen Styleguides ). Hier sind einige Screenshots, die zeigen, wie das Layout in Apps implementiert ist (nativer E-Mail-Client und Twitter-Client eines Drittanbieters). Scrollen Sie unter den Bildern, um Empfehlungen zu erhalten.

E-Mail (native)

hp touchpad email app 3 panes vertical

Die Schiebeoption wird durch die 3 vertikalen Balken in der unteren linken Ecke jedes Fensters angezeigt, die verschoben werden können. Der Bereich ganz links hat keine speziellen Symbole und reagiert nicht auf die Ziehgeste. Beachten Sie auch, dass das am weitesten rechts stehende Bedienfeld nur teilweise angezeigt wird, um es zur Vollansicht herauszuziehen. In horizontaler Ausrichtung reicht die Bildschirmbreite aus, um alle Schaltflächen anzuzeigen, jedoch nicht, um eine E-Mail vollständig anzuzeigen.

hp touchpad email app 2 panes vertical

Jetzt ist der Bereich ganz links ausgeblendet. Es gibt jedoch keine visuelle Anzeige, wie viele Fenster ausgeblendet sind. Wir wissen nur, dass es mindestens einen weiteren Bereich gibt, da sich in der unteren linken Ecke das Schiebesymbol befindet. Wenn der Bereich ganz rechts im Vollbildmodus erweitert wird, gibt es auch keinen Hinweis darauf, wie viele Bereiche ausgeblendet sind.

TweetPad (Drittanbieter)

hp touchpad tweepad 2 panes vertical

Die erste Ansicht besteht nur aus 2 Fenstern: Navigation und Feed. Es gibt keinen Hinweis darauf, dass ein dritter Bereich angezeigt werden kann (dieser wird nur angezeigt, wenn Sie auf einen Tweet drücken, und enthält alle Steuerelemente für einzelne Tweets). Es gibt auch keinen Hinweis darauf, dass der Vorschub gleiten kann. Das Schieben erfolgt durch eine Geste von rechts nach links, die an einer beliebigen Stelle im Bereich beginnt.

hp touchpad tweetpad 2 panes vertical minimized navigation

Wenn wir den Feed-Bereich maximieren, verschwindet der Navigationsbereich nicht. Es gleitet gerade so weit, dass die Beschriftungen mit den Symbolen bedeckt sind, lässt sie jedoch voll funktionsfähig, ähnlich dem Muster, das das OP verwendet. Sie können eines der Symbole drücken und zum Ziel gelangen, ohne dass die Fenster ihr Layout ändern. Gleichzeitig gibt es immer noch keine Hinweise darauf, dass der Einzugsbereich nach rechts verschoben werden kann, um mehr Navigation freizulegen.

Empfehlungen

Diese beiden Anwendungen sowie die offiziellen Designrichtlinien decken alle Interaktionen mit Paned Layout ab. Die offensichtlichen Probleme bei diesem Ansatz sind 1) Angabe der Möglichkeit zum Erweitern und Zusammenklappen von Fenstern und 2) Angabe der Anzahl zusammengeklappter Fenster.

Angesichts der Tatsache, dass ein solches Layout unter Android noch nicht üblich) nicht üblich ist, ist das Erstellen einer gut bezeichneten Hot Zone oder einer Umschalttaste im Bereich ganz links (für ein Layout mit zwei Fenstern) besser als nur Aktivieren einer ungewöhnlichen Geste.

Wenn eines der Fenster mit anderen ausgeblendeten Fenstern im Vollbildmodus angezeigt wird, muss klar angezeigt werden, wie viele Fenster ausgeblendet sind und auf welche Weise der Benutzer wischen oder drücken sollte, um sie anzuzeigen.

4
dnbrv

Einige weitere Beispiele für dieses Muster in Touchscreen-Anwendungen:

Während in der iPad-Version die Navigationsseitenleiste immer sichtbar ist, zeigt die Google Mail-App für das iPhone die Navigation auf der linken Seite an, indem Sie über den gesamten Bildschirm wischen ( siehe Screenshot und Beschreibung ). Beachten Sie, dass es für dieselbe Aktion auch eine redundante Schaltfläche Menu gibt.

[Die App] schiebt Ihre Nachrichten nach rechts, um das darunter versteckte Google Mail-Menü anzuzeigen. Es ist ziemlich schick und macht die Navigation zwischen Ordnern oder Unterordnern schneller und effizienter.

gmail app for iphone


Es ist auch üblich, eine (oder mehrere) Seiten mit Ziehen von außen nach innen zu haben, um Benachrichtigungen oder ein Menü anzuzeigen: iOS und Android Oberseite für Benachrichtigungen, BBX-Unterseite für Menü.

1
Naoise Golden

Wischen von links nach rechts in Android wird im Allgemeinen für vorherige/nächste Elemente (wie in Google Reader oder Kalender) oder vorherige/nächste Registerkarte (wie in Android) verwendet Markt: http://www.pushing-pixels.org/2011/08/11/Android-tips-and-tricks-swipey-tabs.html ).

Beachten Sie, dass auf Tablets nur die Hälfte des Bildschirms mit Inhalten gefüllt werden kann, wenn Sie nach links wischen, um Unterkategorien des ersten ausgewählten Genres (Apps, Spiele, Bücher, Musik) anzuzeigen: Swipey tabs

Das aktuelle Android Muster zum Erweitern von Inhalten ist derzeit auch auf dem Markt verfügbar, aber es ist der nach unten zeigende Pfeil, den Sie in App-Beschreibungen und dergleichen sehen: Expanding area

Wenn Sie also Inhalte wirklich reduzieren und erweitern, möchten Sie möglicherweise das zweite Design hier verwenden. Wenn Sie jedoch die Navigation in die Ansicht a la Market-Kategorien streichen möchten, möchten Sie möglicherweise "Swipey-Registerkarten" implementieren, damit das Menü besser erkennbar ist an Benutzer.

1
Karen