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.

Die Vision dahinter: Durch zwei unabhängig voneinander bedienbare Screens können Nutzer mehrere Applikationen beziehungsweise Funk­tionen einer App gleichzeitig verwenden, ohne dabei die Ansicht wechseln zu müssen. Etwa, indem sie ihren Terminkalender durchsuchen, während sie eine E-Mail schreiben. 
 

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

 
Durch zwei nebeneinander funktionierende Bildschirme kann ein Flow-Erleben entstehen, welches die Produktivität erheblich steigern kann. Oder, wie es Panos Panay ausdrückt: „We absolutely know scientifically that you will be more productive on two screens – much ­more than one screen ever could do.“ [1]
 
Unsere Kollegin Miriam hat im Rahmen ihrer Abschlussarbeit einen Leitfaden entwickelt, durch den bisherige One-Screen Apps auf Dual-Screen Geräte angepasst werden können. Wie genau das funktioniert und welche Vorteile das für den Anwender mit sich bringt, zeigt sie in diesem Video:
Hochschule Karlsruhe, HKA-Award für Miriam Alber
 
Doch was bedeutet das für die App-Entwicklung? Wie können Anwendungen so gestaltet werden, dass sie möglichst große Produktivitätspotenziale für die User freisetzen?
 
Zur Beantwortung dieser Fragen beschreibt der folgende Blogartikel zunächst die Möglichkeiten der Android-Entwicklung für Dual-Screen-Geräte, bevor anschließend zentrale Erkenntnisse aus der Anpassung einer App für das Surface Duo zusammengefasst werden (siehe hierzu Bild 1).
Mit seinem sichtbaren Scharnier bildet es einen wesentlichen Kontrast zu bereits am Markt verfügbaren Foldables, wie dem Samsung Galaxy Z Fold 3 [2]. Die Bildschirme selbst können um 360 Grad gedreht und damit in jedem Winkel betrachtet werden [3].
 
Als Referenz diente dabei die interne Mitarbeiter-App ­eines Großkonzerns, die Funktionalitäten wie Zeiterfassung, das Einsehen von Gehaltsnachweisen oder digitale Krankmeldungen umfasst.
 

 

Dual-Screen-Frameworks

 
DualScreenPostures
Abbildung 1: Mögliche Positionen des Surface Duo
 

 

Native Anwendungen, welche mithilfe des Android-Frameworks entwickelt wurden, können unter Verwendung des Surface Duo SDK von Microsoft [4] oder des Window Manager API von Android [5] an Dual-Screen-Geräte angepasst werden.
 
Zusätzlich existiert für folgende weitere Frameworks Dual-Screen-Unterstützung:
  • React Native [6],
  • Flutter [7],
  • Xamarin [8],
  • CSS-Media-Queries zur Erkennung des zweiten Bildschirms und des Scharniers [9],
  • Unity [10].
 
Die Funktionen der oben genannten Frameworks ermöglichen es, Anwendungen so anzupassen, dass sie für Dual-Screen-Geräte optimiert sind und gleichzeitig weiterhin auf Single-Screen-Geräten nutzbar bleiben. Eine zweite Codebasis ist nicht notwendig.
 

 

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).

 

Bild_2_PhasenmodellKomplett_w915_h434

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

Vor dem Start der Entwicklung sollten die vorhandene Codebasis und die Dual-­Screen-Unterstützung der verwendeten Frameworks analysiert werden. Dies dient als Grundlage für die Aufwandsschätzung von Phase 1.
 
Dokumentationen von Android [11] und die Anpassung der Anwendung haben gezeigt, dass folgende Punkte beim Sicherstellen der Kompatibilität berücksichtigt werden sollten:
  • Erlauben aller Gerätepositionen: Sind Orientierungsänderungen (screen­Orientation auf portrait oder land­scape fixiert) und / oder Größenänderungen (resizeableActivity auf false) nicht erlaubt, dann können sich Anwendungen bei Auf- und Zuklappen des Geräts nicht anpassen. Den entsprechenden Ausschnitt aus dem Android-Manifest zeigt Bild 3.
manifest

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].

SurfaceDuoFrameLayout

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
Zur Umsetzung der beschriebenen Anpassungen wurden im aktuellen Beispiel das Surface Duo Layout [14] und das Surface Duo Frame Layout [15] verwendet.
Diese Layoutbibliotheken aus dem Surface Duo SDK bilden Wrapper um bestehende Ansichten, weshalb nur geringfügige Anpassungen von Oberflächenkomponenten und Quellcode erforderlich sind (Bild 5). Für Fallunterscheidungen im Quellcode wurden Funktionen des Screen-Manager-Objekts genutzt [16].
 
SurfaceDuoLayout
Abbildung 5: Surface Duo Layout – Wrapper um die Homepage
 
Zur Anpassung des UI bietet es sich an, bestehende Patterns zu identifizieren und diese entsprechend auf zwei Bildschirme aufzuteilen.
 
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.
 
ListDetailAppExample
Abbildung 6: List-Detail

  • Bearbeitungswerkzeuge zu Grafiken oder Texten (zum Beispiel Bildbearbeitung in der Galerie).
  • Aufspannen des Inhalts für positionierbare Ansichten (zum Beispiel Kartenansichten).
  • Anzeige des Inhalts in textueller und grafischer Form (zum Beispiel Grafiken und Zahleninfos).
  • Leerlassen eines Bildschirms bei Ansichten mit wenig Inhalt (zum Beispiel Login-Seiten).
  • Unabhängige Inhalte (zum Beispiel verschiedene Karten, Seiten eines Buches) – Two-Page Pattern, siehe Bild 7.

TwoPageAppExampleAbbildung 7: Umsetzung Two-Page Pattern

 
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].

 

TentMode3DView

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]
 
Gestures
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

 
Dual-Screen-Geräte bieten hinsichtlich der App-Entwicklung interessante neue Möglichkeiten. Durch Bibliotheken wie die des Surface Duo SDK ist die Anpassung einer Anwendung mit geringem Aufwand möglich.
Dank der Option, die Bibliotheken des SDK mit den offi­ziellen APIs von Android zu verwenden, können auch Fol­dables wie das Samsung Galaxy Fold [3] oder das Huawei Mate Xs [26] von diesen Anpassungen profitieren.
 
Bildschirmfoto 2021-12-02 um 13.23.15

 

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:

 

 

MiriamAlber@iteratecMiriam 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

  1. CNET, Surface Duo reveal presentation 2019
  2. Samsung, Samsung Galaxy Z Fold3 5G
  3. News Center Microsoft Deutschland, Produktivität und Unterhaltung auf 2 Screens
  4. Microsoft, Abrufen des Surface Duo SDK
  5. Android Developers, WindowManager
  6. Microsoft, React Native für Surface Duo
  7. Microsoft, Get Started with Flutter on Surface Duo, Surface Duo Blog
  8. Microsoft, Xamarin für Surface Duo
  9. Microsoft, Bildschirm Aufteilungs Funktion für CSS-Medien für die Dual-Screen-Erkennung
  10. Microsoft, Unity-Spiele für Surface Duo
  11. Android Developers, Building apps for foldables
  12. Android Developers, ViewModel Overview
  13. Microsoft, Surface Duo – Rahmenlayout
  14. Microsoft, Surface Duo – Layout
  15. Microsoft, Surface Duo – Bildschirm-Manager
  16. Microsoft, Einführung in Doppelbildschirmgeräte
  17. Mohammadreza Khalilbeigi, Roman Lissermann, Wolfgang Kleine, Jürgen Steimle, FoldMe: Interacting with Double-sided Foldable Displays
  18. Gazelle Saniee-Monfared, Kevin Fan, Qianq Xu, Sachi Mizobuchi, Lewis Zhou, Pourang Polad Irani, Wei Li, Tent Mode Interactions: Exploring Collocated Multi-User Interaction on a Foldable Device
  19. Ken Hinckley, Morgan Dixon, Raman Sarin, Francois Guimbretiere, Ravin Balakrishnan, Codex: a dual screen tablet computer
  20. Android Developers, SensorEvent
  21. Nicholas Chen, Francois Guimbretiere, Cassandra Lewis, Maneesh Agrawala, Enhancing Document Navigation Tasks With a Dual Display Electronic Reader
  22. Antonio Gomes, Roel Vertegaal, PaperFold: ­Evaluating Shape Changes for Viewport Transformations in ­Foldable Thin-Film Display Devices
  23. Wolfgang Büschel, Patrick Reipschläger, Raimund Dachselt, Foldable3D, in ISS’16: Proceedings of the 2016 Conference on Interactive Surfaces and Spaces : November 6–9, 2016, Niagara Falls, Ontario, Canada, 2016, pp. 367–372
  24. Microsoft, Verwenden des Surface-Duo-Emulators
  25. Huawei, Huawei Mate Xs, Das faltbare Displaywunder der Zukunft
  26. Hochschule Karlsruhe, HKA-Award für Miriam Alber, unter https://www.youtube.com/watch?v=dxauu6MYPlI, aufgerufen am 01.12.2021

Tags: Software, Technology, Innovation

Verwandte Artikel

Nach mehr als einem Vierteljahrhundert erfolgreichem Unternehmertum übergibt Mark Goerke, einer der beiden Gründer der iteratec,...

Mehr erfahren

Topics: Software, Technology, Innovation

Wer bei NFTs nur an Bilder von gelangweilten Affen oder an spekulationsreiche Kunstobjekte denkt, der übersieht das Potenzial der...

Mehr erfahren

Topics: Software, Technology, Innovation

In einer komplexen IT-Systemlandschaft ist es unvermeidlich, dass es hin und wieder zu Störungen kommt. Das gilt besonders für...

Mehr erfahren

Topics: Software, Technology, Innovation