Die Zufriedenheit, die Sie bei der Nutzung mobiler Geräte empfinden, hat manchmal ihren Ursprung in der Art und Weise, wie der Inhalt präsentiert wird.
Manchmal liegt die Ursache darin, wie die Benutzerschnittstelle gestaltet ist. Und gar nicht so selten ist die Quelle, die Ausrichtung und Position des Bildschirms selbst.
Filme ansehen und Chatten können Beispiele dafür sein.
Die meisten Benutzer bevorzugen es, Filme, insbesondere Spielfilme, im Querformat anzuschauen, was für diese Art von Aktivität natürlicher und bequemer ist.
Das Chatten wiederum, bei dem der Benutzer viel aktiver ist, ist im Hochformat bequemer.
Die Ausrichtung hat eine erhebliche Bedeutung für die Benutzererfahrung, insbesondere wenn sie auf mobilen Geräten so einfach zu ändern ist.
Der Hochformat-/Vertikalmodus und der Querformat-/Horizontalmodus werden auf mobilen Geräten als Standardfunktion angeboten.
Die Frage ist jedoch, ob alle mobilen Anwendungen so konzipiert sind, dass sie in beiden Modi bequem genutzt werden können.
Ist die Gestaltung für beide Modi und Ausrichtungen auch Standard?
Diese Fragen ziehen natürlich weitere nach sich. Sollten alle Anwendungen in beiden Modi entwickelt werden? Schließlich wissen Sie aus Erfahrung, dass nicht jede App vom Hochformat ins Querformat wechselt, wenn Sie Ihr Mobilgerät drehen. Wie kommt es dazu?
In welchen Situationen ist es ein gutes Designmuster, beide Modi anzubieten? Was sind die Vorteile der beiden Modi?
Kurzum, wenn Sie wissen wollen, wie Smartphone-Bildschirme und ihre Ausrichtung die UX von mobilen Anwendungen beeinflussen, dann lesen Sie unbedingt unseren Artikel.
Viel Spaß!
Wir erstellen Schnittstellen für Web- und mobile Anwendungen. GUI und sprachbasiert.
Was ist der Unterschied zwischen Hochformat und Querformat? Oder wie man Bildschirme gestaltet?
Es sollte sonnenklar sein. Jeder weiß, wie ein Bildschirm aussieht. Daher ist es nicht sinnvoll, die Modi Hoch- und Querformat zu definieren.
Vorab ist jedoch anzumerken, dass die Drehung des mobilen Geräts von einer vertikalen in eine horizontale Position, vom Hochformat in das Querformat, mindestens zwei Gründe haben kann.
Dazu gehören die folgenden:
- Engagement, das aus Neugier und Interesse am Inhalt, am Angebot und an den Funktionalitäten resultiert und aus dem Eintauchen in den Prozess.
- Frustration, die z. B. von Unvollkommenheiten des Fotos im Hochformat oder von überlappendem, mit dem Foto verschmelzendem Text herrührt.
Kommen wir nun zur Angabe der Unterschiede zwischen diesen Modi.
Vertikale und horizontale Ausrichtung, Proportionen zwischen Höhe und Breite machen die Bildschirme der mobilen Geräte zwingen die Anwendung Benutzer anders:
- Inhalte wahrnehmen (insbesondere bei Fotos, Infografiken und Texten)
- Interaktion mit der Schnittstelle, nicht nur in Bezug auf die Navigation, sondern auch auf Mikromomente und die Bedienung mit Gesten (insbesondere Multi-Touch-Gesten)
- Ziele verwirklichen
- Lernen Sie, wie man eine App benutzt
- Daten an eine App oder durch eine App präsentieren und eingeben
- Bedienen Sie das Telefon
Die aktivierte Funktion zum automatischen Drehen verursacht viele Probleme mit mobilen Anwendungen, wenn sie nicht so konzipiert sind, dass sie in beiden Modi bequem genutzt werden können.
Aus der Sicht des UX-Designers verursacht die Gestaltung von Bildschirmen in horizontaler und vertikaler Ausrichtung gleichermaßen grundlegende Probleme.
Die Gestaltung des Bildschirms betrifft in der Regel:
- Ob der Inhalt und die Daten in einer responsiven Art und Weise präsentiert werden — ob das Zeichen, die Form, der Inhalt, das Layout oder die Positionierung auf dem Bildschirm an die Möglichkeiten und Grenzen des jeweiligen Modus auf verschiedenen Geräten angepasst sind.
- Gestaltung der Schnittstelle, der Navigation, der Formulare und der Eingabe von Daten in diese Formulare.
- Gestaltung des Layouts, bei der sich Nutzbarkeit, Funktionalität, Zugänglichkeit und Lesbarkeit mit visueller Attraktivität und Flexibilität überschneiden müssen.
- Gestaltung von Benutzerfluss und Benutzerreise.
- Design der Benutzererfahrung — die Möglichkeit, nahtlos zwischen diesen Modi zu wechseln, ermöglicht es den Benutzern, den in einem bestimmten Kontext attraktiveren Modus zu wählen.
Eine tatsächliche Auswahl zu bieten, ist immer ein erstrebenswerter Wert.
Der Hochformatmodus scheint für den Benutzer eines mobilen Geräts natürlicher zu sein.
Es erlaubt ihnen zwar, das Gerät mit nur einer Hand zu bedienen, aber es ist jetzt immer eine ideale Lösung, um Inhalte zu präsentieren und Funktionen anzubieten.
Was sind die Unterschiede zwischen diesen beiden Modi? Nämlich:
- Der Hochformatmodus ist viel weniger geräumig und wird oft verwendet, um Details zu zeigen.
- Der Querformatmodus sorgt für eine größere Distanz und vermittelt ein Gefühl der Verfügbarkeit von Raum (daher der Name Querformat).
- Der Hochformatmodus hebt das Bild an, bietet aber weniger Kontext für den Inhalt.
- Das Querformat vermittelt viel mehr Informationen und eignet sich besser für die Darstellung von Inhalten, die sich mit der Zeit verändern (z. B. Animationen, Videos, Spiele).
- Der Hochformatmodus eignet sich besser für Situationen, in denen der Benutzer navigieren, Entfernungen bestimmen und Punkte angeben muss (z. B. in Google Maps).
- Der Querformatmodus eignet sich besser, wenn mehrere Funktionen oder Schaltflächen, die für den Benutzer von entscheidender Bedeutung sind (z. B. in Spielen), gleichzeitig verwendet werden müssen.
- Der Hochformatmodus bietet dem Benutzer ein besseres taktiles Erlebnis und eignet sich besser zum Lesen (die meisten Bücher werden in vertikaler Ausrichtung gedruckt).
- Der Querformatmodus sorgt für ein besseres visuelles Erlebnis und ist für die Verfolgung von Bewegungen besser geeignet (man kann davon ausgehen, dass fast 100 % der Kinoleinwände im Querformat sind).
Beide Modi sind verständlicherweise auch eine Quelle für viele Designprobleme. In erster Linie geht es um die Nutzbarkeit von Anwendungen und eine zufriedenstellende Benutzererfahrung.
In den Human Interface Guidelines finden Sie sehr praktische Hinweise zu Problemen, die bei der Änderung der Ausrichtung des mobilen Geräts auftreten.
Die von Apple (iOS) erstellten Richtlinien empfehlen Folgendes:
- Beibehaltung der Klarheit in jeder Bildschirmgröße — hauptsächlich geht es um die Lesbarkeit des Textes und die Schärfe der Bilder, die ohne zusätzliche Maßnahmen gewährleistet sein sollten.
- Bewahren Sie die Konsistenz — Schnittstellenelemente sollten in jedem Modus gleich aussehen.
- Platzieren Sie die wichtigsten Elemente in der oberen Hälfte des Bildschirms.
- Achten Sie auf die Änderung der Textgröße; sie sollte an den Modus, die Größe und die Diagonale des Geräts angepasst sein.
Eine sehr interessante und praktische Ergänzung zu diesen von Apple vorgeschlagenen Richtlinien finden Sie in zwei Artikeln von Amy Schade, einer mit der Nielsen Norman Group verbundenen Autorin: "Big Pictures on Small Screens: Remove, Resize or Reorganize" und "Small Pictures on Big Screens: Scaling Up from Mobile to Desktop".
In beiden Artikeln geht es allerdings um die Gestaltung von Bildern für mobile und Desktop-Geräte (für die iOS-Plattform und Android). Einige der Anmerkungen von Amy Schade können jedoch auch verwendet werden und eignen sich für Probleme, die bei der Gestaltung vertikaler und horizontaler Ausrichtungen auftreten.
Bei der Erstellung mobiler Anwendungen muss auch Folgendes beachtet werden:
- Bilder, die sich auf großen Bildschirmen gut darstellen lassen, müssen auf kleineren Bildschirmen möglicherweise gescrollt werden.
- Die Kombination von Bildern und Text führt je nach Maßstab zu Problemen bei der Lesbarkeit.
- Angemessenes Zuschneiden und Skalieren ist notwendig, wenn Sie die maximale Lesbarkeit von Bildern und Text gewährleisten wollen.
- Die Platzierung des Textes sollte jedes Mal individuell gestaltet werden, um seine maximale Lesbarkeit auf verschiedenen Bildschirmgrößen zu gewährleisten.
- Bilder, die auf kleine Bildschirme passen, lassen sich auf größeren Bildschirmen nicht immer gut darstellen.
- Bilder, die falsch beschnitten oder skaliert sind, können an Qualität, Lesbarkeit und Aussagekraft verlieren.
- Die Platzierung und die Beziehungen zu anderen Gestaltungselementen können je nach Größe des Bildschirms gestört werden.
Obwohl die Unterschiede zwischen Desktops und Mobiltelefonen am deutlichsten sind, sind die vom Forscher der NN Group erwähnten Probleme auch bei den Unterschieden zwischen Hoch- und Querformat zu beobachten —, und zwar in allen Größenordnungen.
Es geht um dasselbe — die Qualität, Funktionalität, Nutzbarkeit und Attraktivität des Designs in jeder Größe zu erhalten.
Wie der Nutzungskontext und die Benutzer die Gestaltung der Orientierung in mobilen Anwendungen beeinflussen
Die Ausrichtung des mobilen Geräts ist von erheblicher Bedeutung, insbesondere wenn man das Designproblem aus der Perspektive des Kontexts der Telefon- und App-Nutzung sowie der technischen Parameter eines bestimmten Geräts und der Benutzer der Anwendung, des Telefons oder des Bildschirms betrachtet.
Bei der Gestaltung von Anwendungen für Kinder müssen zum Beispiel die kognitiven und feinmotorischen Fähigkeiten berücksichtigt werden, die bei Kindern, insbesondere bei jüngeren, viel weniger entwickelt sind als bei Erwachsenen und Jugendlichen.
Bei der Gestaltung von Anwendungen für Senioren müssen altersbedingte Einschränkungen berücksichtigt werden. Für Kinder und Senioren sind Bildschirme in horizontaler Ausrichtung oft viel natürlicher und bequemer, weil sie ihnen mehr Stabilität und Kontrolle über das Gerät bieten.
Es sei auch daran erinnert, dass die Vorliebe für den Modus und die Ausrichtung des Geräts auch vom Kontext abhängt, d. h. von der Situation, in der der Benutzer das Smartphone oder die mobile Anwendung verwendet und auf die Bildschirme schaut.
Das Hochformat wird in der Bewegung viel häufiger bevorzugt. Große Textblöcke lassen sich im Querformat, also im Ruhezustand, definitiv schneller, einfacher und bequemer lesen.
Die Position der Tasten (z. B. zum Regeln der Lautstärke oder zum Aufnehmen eines Fotos) auf einem bestimmten mobilen Gerät ist eine Variable, die berücksichtigt werden sollte. Auch die Größe des Geräts, seine Handlichkeit und sein Gewicht spielen eine Rolle.
Das Engagement, die Rolle der zweiten Hand, die zur Bedienung des mobilen Geräts (z. B. zum Navigieren im M-Commerce) und zur Interaktion mit der Schnittstelle der mobilen Anwendung verwendet wird, wächst mit der Größe der Bildschirmdiagonale und dem Gewicht des mobilen Geräts.
Auch die technischen Parameter des Bildschirms (z. B. Lesbarkeit und Helligkeit des Bildschirms bei hellem Sonnenlicht) spielen eine wichtige Rolle.
Die Lesbarkeit des Bildschirms bei Sonnenlicht kann den Wunsch nach einem Wechsel des Anzeigemodus beeinflussen. Mobile Anwendungen sollten mit Blick auf solche Situationen und Bedürfnisse entwickelt werden.
Designmuster im Orientierungsdesign für mobile Anwendungen (Kategorien des Orientierungsdesigns)
In Avi Itzkovitchs Artikel "Designing For Device Orientation: From Portrait To Landscape" finden Sie eine Diskussion der vier wichtigsten Ausrichtungsmuster für mobile Anwendungen. Der Kommentar von Itzkovitch konzentriert sich hauptsächlich auf die Lage und das Layout der Anwendungsschnittstelle.
Itzkovitch unterscheidet die folgenden Varianten der Schnittstellenänderung beim Übergang vom Hoch- zum Querformat:
- Fluid, bei dem sich das Layout, die Platzierung und die Funktionsweise der Symbole nicht ändern; sie passen lediglich ihre Position und Größe an die neue Bildschirmgröße an.
- Erweitert, bei dem sich das Layout, die Platzierung und die Anzahl der Symbole je nach Bildschirmgröße ändern.
- Ergänzend werden nach einem Wechsel der Ausrichtung zusätzliche Daten und Funktionalitäten angezeigt, die im vorherigen Modus nicht zugänglich waren.
- Kontinuierlich, wobei der Zugang zu zusätzlichen Funktionen durch Drehen des Geräts ermöglicht wird.
Die Wahl eines bestimmten Musters hängt natürlich von der Plattform, der Art der Anwendung, der Funktionalität, den Aufgaben und den Benutzerpräferenzen ab.
Der Hinweis auf eine universelle Designlösung ist nicht unmöglich, sondern einfach falsch. Spezielle Designlösungen sollten aus UX-Forschung, Schnittstellen-Benchmarking oder Usability-Tests hervorgehen.
Die Zugänglichkeit von mobilen Anwendungen im Hoch- und Querformat
Die Gestaltung beider Modi — Hoch- und Querformat — ist ebenfalls von Bedeutung, wenn Sie die mobile Anwendung so zugänglich wie möglich gestalten wollen.
Denken Sie bei der Erstellung der Anwendung daran, dass Augenkrankheiten und Krankheiten, die das Sehvermögen beeinträchtigen, viele Benutzer ausschließen.
Sehbehinderungen machen es einfach notwendig, dass Designer sicherstellen, dass ihre Entwürfe auch für diese Benutzergruppe zugängliche Schnittstellen bieten.
Ähnlich sieht es bei den motorischen Fähigkeiten aus. Aufgrund der eingeschränkten manuellen Geschicklichkeit kann es auch vorkommen, dass ein Modus dem anderen vorgezogen wird.
Eine mobile Anwendung, die ein Höchstmaß an Zugänglichkeit bietet, ist eine Anwendung, bei der beide Modi hinsichtlich Lesbarkeit, reibungsloser Navigation und einfacher Nutzung aller für mobile Anwendungen typischen Gesten optimiert sind.
Auch wenn bei manchen Anwendungen ein bestimmter Modus natürlicher erscheint (z. B. der Querformatmodus auf Dampferzeugerplattformen), ist es ein offensichtlicher Designfehler, nur einen Modus anzubieten.
Es ist unmöglich, eine Anwendung nur in einem einzigen und standardmäßigen Querformatmodus zu erstellen.
Die Rechtfertigung für die Gestaltung beider Modi ist so offensichtlich, dass sie manchmal eine Quelle der Überraschung sein kann.
Beispielsweise ist es nicht nur für Unterhaltungsanwendungen, sondern auch für den M-Commerce sinnvoll, beide Modi anzubieten. Warum?
Hoch- und Querformat im M-Commerce
Edward Scott, Mitarbeiter des Baymard Institute, erörtert in seinem Artikel "Mobile UX: Scale Product Images Proportionally in Landscape Mode (52% of Sites Don't)" sehr ausführlich die Auswirkungen einer Änderung der Ausrichtung und Skalierung von Produktbildern auf den Umsatz und die Benutzererfahrung von M-Commerce Kunden.
Laut der Untersuchung des Instituts hat die Hälfte der Kunden, die die mobilen Versionen von Online-Shops nutzen, das Bedürfnis, vom Hoch- ins Querformat zu wechseln, wenn das Hochformat kein ausreichend gut sichtbares, klares und scharfes Produktfoto bietet.
Die Gestaltung von mobilen Geschäften berücksichtigt selten solche Bedürfnisse, die Notwendigkeit, mit ihrer Hilfe ein Ziel (einen Kauf) zu erreichen.
Es steht viel auf dem Spiel, denn laut Edward Scott zeigen 56 % der M-Commerce-Kunden die Produktkarte an, um sich die Bilder anzusehen.
Nach den Ergebnissen von Baymard haben Produktbilder im M-Commerce eine grundlegende Bedeutung für die Kaufentscheidung. Produktfotos gehören auch zu den am häufigsten verwendeten Inhalten auf Websites von Online-Shops.
In Anbetracht der Verhaltensweisen, Erwartungen, Gewohnheiten und Bedürfnisse sind die Skalierung von Fotos im Hoch- und Querformat ein äußerst wichtiges Thema im Zusammenhang mit der Gestaltung.
Leider bieten die mobilen Apps der Online-Shops nur selten Fotos an, die proportional zum Querformat und zur Bildschirmgröße skaliert sind.
Es ist offensichtlich schädlich, weil es nicht den erwarteten Nutzen der Bilder bietet. Und diese sind, wie wir bereits erwähnt haben, das Hauptargument, das bei der Kaufentscheidung berücksichtigt wird.
Fotos, die nicht auf den Bildschirm passen, sorgen für Frustration, z. B. wenn der Versuch, ein Bild im Hochformat zu vergrößern, die Lesbarkeit beeinträchtigt oder gar nicht möglich ist.
Lassen Sie uns ein weiteres Ergebnis des Baymard Institute erwähnen. Nicht weniger als 40 % der Apps in mobilen Online-Shops unterstützen keine Touch-Gesten. Das Anklicken führt nicht zu einer vergrößerten Produktabbildung.
Im Gegensatz dazu skalieren 52 % der Anwendungen die Bilder im Querformat nicht proportional. Sie machen keine Anstalten, den Bedürfnissen der Benutzer gerecht zu werden.
Und das bedeutet direkt Usability-Probleme mit der mobilen App und Probleme mit der Benutzererfahrung. Eine niedrige Konversionsrate und ein geringes Umsatzvolumen sollten nicht überraschen.
Die visuelle Bewertung des Produkts ist entscheidend (die Ausrichtung des Bildschirms spielt dabei eine wichtige Rolle). Ein Bild, das es den Benutzern ermöglicht, es auf einfache Weise zu erstellen, ist sehr wünschenswert.
Hochformat vs. Querformat im mobilen Design. Zusammenfassung
- Die Ausrichtung, d. h. die Gestaltung mobiler Anwendungen für beide Anzeigemodi — Hoch- und Querformat — ist für eine positive Benutzererfahrung von größter Bedeutung.
- Die Ausrichtung des Bildschirms in einer mobilen Anwendung beeinflusst auch die Konversionsrate und wirkt sich oft auf das Umsatzvolumen aus.
- Der Hochformat-/Vertikalmodus und der Querformat-/Horizontalmodus werden auf mobilen Geräten als Standardfunktion angeboten.
- Der Wechsel des Modus — von Hoch- zu Querformat und umgekehrt — hat oft zwei Ursachen. Positiv (Engagement) und negativ (Frustration der Benutzer).
- Die Ausrichtung im Hoch- und Querformat zwingt den Benutzer einer mobilen App dazu, Inhalte wahrzunehmen, mit der Schnittstelle zu interagieren und Ziele auf eine völlig andere Weise zu erreichen.
- In den Human Interface Guidelines finden Sie sehr praktische Hinweise zu Problemen, die bei der Änderung der Ausrichtung des mobilen Geräts auftreten.
- Apple (iOS) empfiehlt, die Klarheit in jeder Bildschirmgröße beizubehalten, Konsistenz zu wahren und auf Änderungen der Textgröße zu achten.
- Bei der Gestaltung der Ausrichtung einer mobilen Anwendung (Mobile UX Design) sollte man bedenken, dass Bilder, die auf großen Bildschirmen gut aussehen, auf kleinen Bildschirmen möglicherweise gescrollt werden müssen.
- Die Kombination von Bildern und Text führt je nach Maßstab zu Problemen bei der Lesbarkeit.
- Angemessenes Zuschneiden und Skalieren ist notwendig, wenn Sie die maximale Lesbarkeit von Bildern und Text gewährleisten wollen.
- Bilder, die auf kleine Bildschirme passen, lassen sich auf größeren Bildschirmen nicht immer gut darstellen.
- Die Ausrichtung eines mobilen Geräts ist äußerst wichtig, wenn man seine Designprobleme aus dem Blickwinkel des Kontexts der Nutzung des Telefons und der Apps und der Benutzer betrachtet.
- Die Präferenzen hinsichtlich des Modus und der Ausrichtung des Geräts (z. B. Querformat) werden auch durch den Kontext bestimmt, in dem der Benutzer das Telefon oder die mobile Anwendung verwendet.
- Das Engagement, d. h. die Rolle der zweiten Hand, die zur Interaktion mit der Schnittstelle der mobilen Anwendung verwendet wird, nimmt mit der Größe und dem Gewicht des Telefons zu.
- Die Lesbarkeit des Bildschirms bei Sonnenlicht kann den Wunsch nach einem Wechsel des Anzeigemodus beeinflussen.
- Die gleichzeitige Gestaltung für beide Modi ist auch wichtig, wenn Sie die mobile App so zugänglich wie möglich machen wollen.
- Die Gestaltung der Anwendung erfordert ein Verständnis der Gründe für die Änderung der Ausrichtung und der Vorteile, die sie dem Benutzer bringt.
- Die mobile App, die die größtmögliche Zugänglichkeit für jeden Benutzertyp gewährleistet, ist eine App, bei der beide Modi u. a. für die Lesbarkeit und die reibungslose Navigation optimiert sind.
- Bei der Entwicklung einer mobilen Anwendung muss die Benutzerfreundlichkeit aller für mobile Anwendungen typischen Gesten berücksichtigt werden.
- Bei der Entwicklung einer mobilen App sollten beide Modi angeboten werden. Die Bevorzugung nur eines Modus (in der Regel Hochformat) ist ein offensichtlicher Designfehler.
- Der Bildschirm in der mobilen Anwendung sollte in beiden Modi verwendet werden, damit die mobile Anwendung eine Vielzahl von Benutzererwartungen erfüllen kann.
- Laut einer Studie des Baymard Institute hat die Hälfte der Kunden, die mobile Online-Shops nutzen, das Bedürfnis, vom Hoch- ins Querformat zu wechseln.
- Der Grund dafür sind vor allem die unvollkommenen und unleserlichen Fotos des Produkts.
- Bilder von Produkten im M-Commerce haben eine grundlegende Bedeutung für die Kaufentscheidung.
- Produktfotos gehören auch zu den am häufigsten verwendeten Inhalten und Informationen auf Websites von Online-Shops.
- Die M-Commerce Mobile App sollte vor allem im Hinblick auf die Zugänglichkeit von nützlichen Produktbildern gestaltet werden. Ein Benutzer, der keinen nahtlosen Zugang zu diesen Informationen hat, entscheidet sich sehr oft gegen einen Kauf, selbst wenn er sich in einem fortgeschrittenen Stadium der Kaufentscheidung befindet.
- Die korrekte Anzeige auf allen mobilen Geräten verbessert die Konversionsraten und das Umsatzvolumen.
