Design für faltbare Smartphones: So schaffst du eine nahtlose UX

Faltbare Smartphones gewinnen rasch an Bedeutung und eröffnen aufregende neue Möglichkeiten, während sie gleichzeitig neue Herausforderungen für Designer:innen mit sich bringen. Im Gegensatz zu herkömmlichen Smartphones, die seit Jahren etablierten Designstandards folgen, bieten faltbare Geräte dynamische, flexible Erlebnisse, die die Grenzen der Kreativität erweitern. Mit dem erweiterten Bildschirmraum steigt auch die Komplexität, sodass Designer:innen die Benutzerfreundlichkeit, Benutzererfahrung und visuelle Ästhetik neu überdenken müssen, um nahtlose, intuitive Interaktionen zu schaffen. Da faltbare Technologien die Zukunft des mobilen Designs prägen, ist Innovation nicht mehr optional, sondern unerlässlich.

Aber was müssen Designer:innen beachten? Schauen wir uns zunächst die zwei Typen von faltbaren Smartphones an:

Faltbare Smartphones erklärt – Die zwei wesentlichen Typen

Faltbare Smartphones lassen sich in zwei Hauptkategorien unterteilen:

1. Vertikales Falten (Tablet-ähnliche Geräte): Geräte wie die Samsung Galaxy Z Fold-Serie entfalten sich von einem normalgroßen Smartphone zu einem größeren, tabletähnlichen Display. Diese Art erfordert ein nahtloses Erlebnis, das sich an die größere Bildschirmgröße anpasst.
2. Horizontales Falten (Klapphandys): Geräte wie das Samsung Galaxy Z Flip und das Motorola Razr nutzen ein vertikales Klappdesign, bei dem das Handy in ein Standard-Smartphone-Display entfaltet wird, aber im geschlossenen Zustand kompakter ist.

Jede dieser Formen bringt ihre eigenen Herausforderungen mit sich, wodurch Designer:innen den Fluss von Inhalten, Layouts und Interaktionsmuster neu überdenken müssen.

Nachdem wir die zwei Hauptkategorien von faltbaren Smartphones behandelt haben, werfen wir nun einen Blick auf verschiedene Aspekte, die Designer:innen weiter berücksichtigen müssen:

Vom gefalteten zum entfalteten Zustand: Fluidität im Design von faltbaren Smartphones erreichen

Einer der wichtigsten Aspekte beim Design für faltbare Smartphones ist die Kontinuität. Da diese Geräte häufig zwischen verschiedenen Bildschirmmodi wechseln, sollte der Übergang vom gefalteten zum entfalteten Zustand nahtlos verlaufen. Nutzer:innen sollten keine plötzlichen Unterbrechungen bemerken, wenn sie zwischen den Formfaktoren wechseln, wie z. B. bei einem Social-Media-Feed oder einem Videoplayer.

Designer:innen müssen sicherstellen, dass die Benutzeroberfläche an verschiedene Bildschirmgrößen anpassbar ist. Wenn die Nutzer:innen das Gerät entfalten, sollte sich der Inhalt automatisch anpassen und die Größe ändern. Dies erfordert ein flexibles Rastersystem, bei dem UI-Elemente basierend auf der Bildschirmgröße angepasst werden, ohne die Benutzerfreundlichkeit zu beeinträchtigen.

• Konsistente visuelle Hierarchie: Der entfaltete Zustand bietet oft deutlich mehr Bildschirmfläche, was es Designer:innen ermöglicht, Elemente neu zu organisieren und die zusätzliche Fläche zu nutzen. Allerdings ist es entscheidend, in beiden Zuständen eine konsistente Hierarchie beizubehalten, um Verwirrung bei den Nutzer:innen zu vermeiden.
• Intuitive Übergänge: Übergangsanimationen können eine Schlüsselrolle dabei spielen, den Wechsel zwischen gefaltetem und entfaltetem Zustand natürlich wirken zu lassen. Es sollten sanfte Übergänge verwendet werden, die den Wechsel von einem Formfaktor zum anderen klar anzeigen, damit die Benutzer:innen den Informationsfluss leicht verstehen können.

Müheloses Multitasking: Benutzeroberflächen für die Split-Screen-Nutzung von faltbaren Geräten gestalten

Faltbare Smartphones fördern Multitasking und machen Split-Screen-Funktionen attraktiver. Designer:innen müssen berücksichtigen, wie mehrere Apps oder Fenster gleichzeitig auf den größeren Bildschirmen verwendet werden können. Die Benutzeroberfläche muss effektiv neben anderen Anwendungen funktionieren, ohne dass Elemente zu überladen oder unübersichtlich werden.

• Flexibles Layout-Design: Es sollte sichergestellt werden, dass die App im Split-Screen-Modus funktioniert, indem Elemente und Layouts so angepasst werden, dass sie dem verfügbaren Platz entsprechen. Die Nutzer:innen sollten zwei Apps nebeneinander ausführen können, ohne dass Funktionalität oder Lesbarkeit verloren gehen.
• Interaktive Elemente: Schaltflächen, Navigationsleisten und andere interaktive Elemente sollten auch im Split-Screen-Modus leicht erreichbar bleiben. Die Benutzeroberfläche sollte nicht mit zu kleinen Touch-Targets überfrachtet werden, da diese im gefalteten oder im Split-Screen-Modus störend wirken.

Das Falt-Problem: Benutzeroberflächen gestalten, die visuelle Unterbrechungen umgehen

Der Faltmechanismus kann zu einer Falte oder Lücke in der Mitte des Bildschirms führen, was bei der Layoutgestaltung besondere Aufmerksamkeit erfordert. Wichtige visuelle oder interaktive Elemente sollten nicht direkt im Faltbereich platziert werden, da es für die Nutzer:innen schwierig sein kann, mit ihnen zu interagieren.

• Design für Split-Screen Ansichten: Es müssen Layouts entwickelt werden, die den Inhalt auf beide Bildschirmsegmente aufteilen, und die die Falte in der Mitte berücksichtigen. Texte oder Inhalte können so angepasst werden, dass sie nicht über die Falte verlaufen, da dies den visuellen Fluss unterbrechen könnte.
• Minimale Nutzung komplexer UI-Elemente im Faltbereich: Wichtige Schaltflächen, Textfelder oder interaktive Elemente sollten nicht im Falzbereich platziert werden, da dieser Bereich weniger reaktionsschnell oder ästhetisch ansprechend sein kann.

Dynamische Anpassungen: Responsive Layouts für jede Ausrichtung erstellen

Faltbare Geräte ermöglichen oft einen reibungslosen Wechsel zwischen Hoch- und Querformat. Als Designer:in ist es wichtig sicherzustellen, dass die App oder Website in beiden Ausrichtungen gut funktioniert. Dies erfordert die Erstellung responsiver Layouts, die unabhängig davon, wie der Nutzer das Gerät hält, visuell ansprechend und funktional bleiben.

• Anpassbare Raster: Die Verwendung eines flexiblen, responsiven Rastersystems ist unerlässlich, um Designs für verschiedene Ausrichtungen anzupassen. Im Hochformat kann ein Zwei-Spalten-Layout im Querformat in ein Drei- oder Vier-Spalten-Layout übergehen.
• Neuanordnung von Inhalten: Text, Bilder und andere Medien lassen sich nahtlos an verschiedene Modi anpassen und neu anordnen, ohne dass wichtige Informationen abgeschnitten oder wichtige UI-Elemente aus dem Blickfeld verdrängt werden.

Design für Bewegung: Gesten-Navigation und Leistung bei faltbaren Geräten

Faltbare Telefone betonen häufig die Gesten-Navigation. Designer:innen müssen berücksichtigen, wie Nutzer:innen durch Wischen, Zoomen und Tippen mit der App interagieren und das Erlebnis flüssig und intuitiv gestalten. Da sich der verfügbare Bildschirmraum zwischen gefaltetem und entfaltetem Zustand ändert, beeinflusst dies die Platzierung von Touch-Targets und Gestenzonen. Größere, leicht erreichbare Touch-Targets sind besonders im gefalteten Zustand notwendig, wenn der Bildschirm kleiner ist.

Obwohl es nicht direkt ein Design-Element ist, spielt die Leistung eine wichtige Rolle beim Design für faltbare Smartphones. Der Übergang zwischen gefaltetem und entfaltetem Zustand sollte keine Verzögerungen oder langsames Laden von Inhalten verursachen. Eine reibungslose Leistung ist entscheidend, um die Kontinuität und Fluidität der Benutzererfahrung zu erhalten.

Fazit

Das UI/UX Design für faltbare Smartphones ist eine spannende Herausforderung. Diese Geräte erfordern es, dass Designer:innen über statische Layouts hinausgehen und adaptive, dynamische Erlebnisse schaffen, die über verschiedene Formfaktoren hinweg funktionieren. Indem man sich auf Kontinuität, Flexibilität und Reaktionsfähigkeit konzentriert und die einzigartigen Aspekte faltbarer Geräte wie den Faltbereich und Multitasking-Funktionen berücksichtigt, können Designer:innen Erlebnisse schaffen, die das Potenzial dieser Technologie voll ausschöpfen. Derzeit machen faltbare Smartphones nur 1,5 % des Smartphone-Marktes aus, jedoch wird erwartet, dass dieser Anteil bis 2028 auf 4,8 % ansteigen wird (Quelle), was Chancen für zukünftiges Wachstum und Innovation bietet.