Windows 10 Apps gestalten

Dieser Blogpost beschäftigt sich mit der Windows 10 Preview und bezieht sich deshalb nur auf den aktuellen Stand.

Mit Windows 10 haben Entwickler die Möglichkeit, dieselbe Anwendung auf unterschiedlichen Geräte laufen zu lassen. Die Anwendung erreicht somit eine viel größere Anzahl an Nutzer mit sehr wenig zusätzlichem Programmieraufwand. Neben den vielen Vorteilen der Universal Windows Platform (UWP) muss aber auch mit der Herausforderung umgegangen werden, dass die Apps auf unterschiedlichen Bildschirmgrößen und in verschiedene Nutzungskontexte benutzerfreundlich und zugänglich bleiben.

Um die Benutzeroberfläche und die Funktionalitäten einer UWP Anwendung an die unterschiedlichen Geräte anzupassen, stellt Microsoft bestimmte Features zu Verfügung.  Entwickler werden mit integrierten Funktionen unterstützt, wie Effective Pixel, Plattformskalierung, universelle Eingabemethoden und Input Intelligence.

Effective Pixel und Plattformskalierung stellen sicher, dass die Größe der Anzeige- und Bedienelemente auf unterschiedlich großen Bildschirmen erhalten bleibt und dass Zeichensätze lesbar bleiben. Entwickler müssen sich daher keine Gedanken über die Pixeldichte oder den Abstand zum Bildschirm machen, da alles für sie automatisch geregelt wird.

Dank der universellen Eingabemethoden und des Input Intelligence-Features werden Eingabemethoden und Steuerelemente automatisch angepasst. Zum Beispiel passt sich ein Dropdown Menü automatisch an die Eingabemethode an (siehe Bild). Bei Verwendung einer Maus wird das Menü komprimiert dargestellt, während bei Toucheingabe der Inhalt auf einer größeren Fläche dargestellt wird. Somit kann man es immer bequem bedienen.

Um die beste User Experience zu erschaffen, sollten Designer und Entwickler trotzdem explizit für verschiedene Displaygrößen gestalten. Dafür gibt es drei unterschiedliche Design-Ansätze.

Responsive Design beschreibt die sukzessive Änderung der Größe und Anpassung des Inhalts. So wird zum Beispiel ein Textfeld immer an die aktuelle Größe des Bildschirms angepasst, ohne dadurch das Layout zu ändern.

Die weitere Optimierung der Darstellung wird als Adaptive Design bezeichnet. Durch die Neuanordnung des Inhalts oder Einfügen und Ersetzen von Bedienelemente kann der Bildschirm effektiver benutzt und die Navigation reduziert werden.

Natürlich haben Entwickler immer noch die Möglichkeit eigene, stark anders gestaltete User Interfaces zu implementieren. Diese Technik wird als Tailored Design bezeichnet. Ein Beispiel dafür wäre, die individuelle Gestaltung von Geräten, die mit einer Hand bedient werden können.

In dem nächsten Artikel werde ich mich hauptsächlich auf das Adaptive Design konzentrieren und erklären, wie man eine adaptive Benutzeroberfläche implementieren kann.

Comments

• Anonymous
  July 10, 2015
  ab wo ist nochmal die grenze? 7'?

• Anonymous
  July 27, 2015
  Hi Holger, ein Windows Gerät könnte auch nur einen 4'' Bildschirm haben.