Tipps und Tricks zur Entwicklung von Dual-Screen-Geräten

People need their phones to be productive – but phones have their limits“ – mit diesen Worten stellte der damalige Chief Product Officer der Microsoft Gerätesparte Panos Panay im Oktober 2019 erstmals das Surface Duo vor – ein faltbares Smartphone mit zwei getrennten Bildschirmen.

Inhalt:

1. Eine App, zwei Bildschirme
2. Hybrides Vorgehen für die Dual-Screen-Entwicklung
   2.1 Phase 1 – Kompatibilität bestehender Apps
   2.2 Phase 2 – Anpassungsvarianten
3. Fazit und Ausblick

1. Eine App, zwei Bildschirme

2. Hybrides Vorgehen für die Dual-Screen-Entwicklung

Aufgrund der spezifischen technischen Anforderungen von Dual-Screen-Apps erfordert deren Entwicklung ein angepasstes Entwicklungsmodell (vergleiche Bild 2). Hierbei muss zunächst die Kompatibilität der Anwendung mit Dual-Screen-Geräten sichergestellt werden (Phase 1, P1).

Abbildung 2: Modell zur Anpassung einer Anwendung

Während die Ergebnisse dieses Schritts nach außen hin kaum sichtbar sind, bilden sie dennoch die zentrale Basis für die weiteren Entwicklungsschritte. Deshalb muss Phase 1 vor Beginn von Phase 2 (P2) abgeschlossen sein, während die ­Unterschritte in Phase 2 nicht ihrer Reihenfolge nach abge­arbeitet werden müssen. Hier sind mehrere Iterationen oder Parallelisierung denkbar.

2.1 Phase 1 – Kompatibilität ­bestehender Apps

Abbildung 3: Auszug aus dem Android Manifest – Erlauben aller Gerätepositionen 

• Kontinuität der Anwendung: Orientierungs- und Größenänderungen sind bei Android Konfigurationsänderungen und haben deshalb einen Neustart der Activities zur Folge. Durch eine klare Trennung von Oberfläche und ­Datenhaltung muss dies ohne Datenverlust möglich sein (MVVM-Pattern). Der Zustand der Anwendung sollte nach einem Neustart noch derselbe wie davor sein. Standardbib­liotheken von Android, etwa Android ViewModels, bringen Funktionalitäten zur Erfüllung dieser Anforderung bereits mit [12].
• Lesbarkeit der Inhalte: Durch das Scharnier in der Mitte von Dual-Screen-Geräten können Elemente verdeckt werden. Damit eine Anwendung nutzbar ist, muss sichergestellt sein, dass interaktive Elemente sichtbar bleiben. Die naheliegende Möglichkeit wäre in solch einem Fall, das Spannen über beide Bildschirme zu verbieten. Da dies nicht möglich ist, kann die entsprechende Ansicht mithilfe des „Surface Duo Frame Layouts“ (Bild 4) im aufgespannten Zustand nur auf dem linken oder rechten Bildschirm angezeigt werden [13].

Abbildung 4: Surface Duo Frame Layout – Anzeige einer View auf dem linken Bildschirm 

• Parallelbetrieb von Anwendungen: Seit Android 10 befinden sich sämtliche angezeigten Activities im resumed-­State. Der gleichzeitige Zugriff auf geteilte Ressourcen muss abgesichert sein (zum Beispiel Zugriff auf die Kamera). Funktionen wie Drag-and-drop und das Öffnen mehrerer Instanzen einer Anwendung sollten ebenfalls betrachtet werden.
• Nach Anpassung der Anwendung darf die Nutzung auf herkömmlichen Smartphones nicht beeinträchtigt sein.

2.2 Phase 2 – Anpassungsvarianten

Neben der Anpassung des UI an zwei Bildschirme ergeben sich durch das Scharnier auch neue Anwendungsformen und Interaktionsmöglichkeiten.

Anpassung des UI

Die folgenden Szenarien eignen sich zur Ansicht auf einem Dual-­Screen-Gerät [17] [18]:

• Das klassische List-Detail Pattern (zum Beispiel Einstellungsseiten, Mails), eine beispielhafte Umsetzung sehen Sie in Bild 6.
  

 

Abbildung 6: List-Detail

 

Anwendungsformen

Folgende neuen Anwendungsformen sind durch verschiedene Formfaktoren denkbar:

• Tent Mode – Aufstellen des Smartphones wie ein Zelt, mit beiden Bildschirmen nach außen gerichtet [19] [20]. Dies bietet sich an zum Beispiel für die Präsentation von Inhalten und gleichzeitiges Ansehen privater Notizen (vergleiche Präsentationsansicht von PowerPoint). Ebenso aber auch für kompetitive Spiele auf Rundenbasis (wie zum Beispiel das altbekannte „Schiffe versenken“) oder für Multi-User-Modi.
• Aufklappen des Gerätes wie einen Laptop [21].
• 3D-Darstellungen [18].

 

Abbildung 8: Schiffe versenken(links), 3D Darstellung (rechts)

 

 

Interaktionsmöglichkeiten

Mit dem Sensor API bietet Android die Möglichkeit, den genauen Neigungswinkel des Scharniers abzugreifen [21]. Dies ermöglicht folgende Falt-Interaktionen [18] [22] [23]:

• Zoomen oder das Betätigen von Schiebereglern durch leichtes Falten. Hierbei ist zu beachten, dass dies beispielsweise mit Touch Input kombiniert werden sollte, um ungewollte Eingaben zu vermeiden.
• Ansichtswechsel beim Auf-, Zu- oder Umklappen des ­Geräts.
  
  

Unabhängig vom Scharniersensor ist auch eine Interaktion mit 3D-Elementen auf drei Achsen denkbar (Bild 9). Das Gerät kann hierzu im 90-Grad-Winkel nach außen aufgeklappt werden [24]

 

Abbildung 9: Zoomen mittels Touch und des Scharniers (links), Interaktion mit einem 3D-Element auf drei Achsen (rechts)

 

Testen

Mittlerweile ist das bereits im Herbst 2020 angekündigte Surface Duo 2 ebenfalls auf dem Markt erhältlich [4]. Wer kein solches Gerät besitzt kann sich mithilfe des Surface-Duo-Emulators von Microsoft trotzdem an die Softwareentwicklung wagen. Neben den zwei Bildschirmen simuliert der Emulator auch das Scharnier des Geräts sowie entsprechende Neigungsoperationen [25].

 

 

 

3. Fazit und Ausblick

 

WERDE DIGITAL CHAMPION

Wie können Sie die Chancen und Potenziale digitaler Technologien optimal ausschöpfen, um Ihr bestehendes Geschäftsmodell zu erweitern und z. B. mit kundenzentrierten digitalen Produkten und Services, einen echten Mehrwert für Ihre Kunden zu generieren? Erfahren Sie, wie wir Sie unterstützen können:

Miriam Alber - studiert Informatik im Master an der Hochschule Karlsruhe. Bei iteratec Stuttgart ist sie als Werkstudentin im Bereich Fullstack Softwareentwicklung tätig. In Ihrer Bachelorarbeit legte sie den Fokus auf die Entwicklung eines Leitfadens, mithilfe dessen das Design und die Implementierung bereits bestehender Anwendungen an Dual Screen Geräte angepasst werden kann.

Quellen und Fußnoten