1 Jahr mit Windows 8 und der Privatbilanz-App sowie mehrere Workshops haben zu Lerneffekten geführt, was vor allem das UI-Design von Windows Store Apps anbelangt. Dieser Artikel zeigt, wie sich diese Lerneffekte auf eine Neugestaltung der Detailansicht eines Bilanzpostens in der SDX Privatbilanz ausgewirkt haben. Auch diese Änderung ist unabhängig von den Neuerungen in Windows 8.1. Sie war allerdings längst überfällig, um eine optimale Benutzbarkeit zu gewährleisten.

Suboptimale 3 Spalten

In der ersten Version der Privatbilanz-App war die Bilanzposten-Detailansicht in 3 vertikale Spalten unterteilt. Die linke Spalte stellte die Bilanzposten der gleichen Kategorie dar und erlaubte einen Wechsel zwischen diesen, die mittlere Spalte beinhaltete die Eingabefelder zu dem Bilanzposten und die rechte Spalte stellte zusätzliche Informationen dar (berechnete Werte und eine Verwaltung von Dokumenten für den Bilanzposten):

Dieser Ansatz hatte mehrere entscheidende Nachteile:

• Die 3 Spalten verwirren den Nutzer. Sie sind per Scrollbalken unabhängig voneinander zu bedienen, wobei die 3 Scrollbereiche gerade bei Touchbedienung zunächst nicht erkennbar sind. Mit Touch muss zudem immer die Handposition gewechselt werden, um z.B. den mittleren Bereich scrollen zu können. Eine einfache Bedienung mit den Daumen ist nicht möglich. Microsoft definiert eine solche vertikale Spalte zwar in seinen Guidelines für Form-Layouts, im vorliegenden Fall war das aber nicht optimal.
• Die vertikal scrollenden Bereiche sind nicht “edge to edge”, d.h. sie nehmen nur einen Teil der Höhe der Seite ein. Das Benutzererlebnis wird dadurch geschmälert.
• Die Ansicht skaliert nicht gut auf großen hochauflösenden Monitoren. Denn die Breite der Seite ist fix. Das führt dazu, dass auf großen Displays rechts Platz verschwendet wird und dennoch die vertikalen Scrollbalken evtl. nicht ausreichen, um alle Inhalte auf einem Bildschirm darzustellen.
• Die Ansicht ist nicht für eine Hochformatdarstellung geeignet, auch die Side-by-Side-Ansicht mit einer anderen App ist nicht ohne Abstriche darstellbar.
• In der Verwaltung der Dokumente wird immer nur ein Dokument angezeigt, per FlipView kann zu anderen Dokumenten gewechselt werden. Auf größeren Displays steht allerdings genug Platz zur Verfügung, um alle Dokumente direkt anzuzeigen. Die Buttons auf dem Dokument sind zudem sehr klein und für Benutzer schlecht zu bedienen. Auch verletzen sie das “Content before Chrome”-Prinzip, da sie immer angezeigt werden und die UI belasten.

Gerade das Problem der schlechten Skalierbarkeit der Ansicht stellt für Benutzer einen echten Nachteil dar und wird z.B. deutlich, wenn man sich das folgende Bild der Darstellung auf einem 23”-Display ansieht:

Es ist erkennbar, dass trotz des nicht genutzten Platzes von ca. 1/3 der Bildschirmbreite die mittlere Spalte immer noch gescrollt werden muss, um alle Daten angezeigt zu bekommen – ein suboptimales Erlebnis.

Besser horizontal

Im Gegensatz z.B. zu iOS-Apps ist es bei Windows Store Apps und der Verwendung des Microsoft Designs (f.k.a. “Metro”) oftmals üblich, dass Ansichten horizontal statt vertikal ausgelegt werden. Denn die meisten Windows-Tablets wie das Surface, aber auch viele Convertibles/Detachables wie das Lenovo Helix oder das Dell XPS 12 haben ein 16:9-Bildschirmformat. Dadurch und durch ihre Eignung als produktives Arbeitsgerät und Notebook-Ersatz werden diese Geräte primär im Querformat statt im Hochformat genutzt. Entsprechend eignet sich hier auch die horizontale Aufbereitung von App-Inhalten besser als eine vertikale. Zu sehen ist dies in den meisten gängigen Apps auch von Microsoft, z.B. in der Finanzen-App, der Bing-News-App oder der eingebauten Store-App.

Auch in der Privatbilanz-App war die Startseite mit der Kategorien-Übersicht von Anfang an horizontal ausgelegt. Es war nur folgerichtig, diese horizontale Aufteilung auch für die Bilanzposten-Detailseite zu übernehmen. Das Formular-Layout im Falle der Privatbilanz horizontal anzulegen, war kein Problem. Die Eingabereihenfolge der jeweiligen Felder und Eingabeblöcke spielt keine Rolle, wodurch die horizontale Aufteilung den Design-Richtlinien von Microsoft für Formulare entspricht (“When to use three or more columns”):

“Use three or more columns to make the best use of visible screen real estate in landscape orientation. This layout works well in fixed or horizontally panning screens […]. Use this layout only when the input order is not important.”

Die neue Bilanzposten-Detailseite sieht in ihrer horizontalen Ausrichtung wie folgt aus:

Dabei sind folgende Unterschiede erkennbar:

• Die Liste der Bilanzposten der gleichen Kategorie (linke Spalte im alten Layout) ist weggefallen. Grund: Das Ziel der Ansicht ist die Detailanzeige eines Bilanzpostens. Eine Liste anderer Bilanzposten hat dabei eine untergeordnete Funktion, entsprechend muss sie nicht in der UI vorhanden sein. Eine Umschaltung zu anderen Bilanzposten ist allerdings weiterhin über den klickbaren Titel möglich. Dieser öffnet eine ComboBox zur Auswahl eines anderen Bilanzpostens, der dann in der Detailansicht angezeigt wird.
• Basisinformationen und berechnete Werte sind nun für einen schnelleren Überblick in einen Block auf die linke Seite gerückt.
• Statt 3 vertikaler Spalten gibt es nun nur noch eine einzige horizontal angelegte Ansicht. Dies führt zu einer konsistenten Bedienbarkeit.
• Die zuvor als vertikale Liste dargestellten Eingabefelder sind nun blockweise horizontal aufgeteilt. Sie werden dabei automatisch so angeordnet, dass sie zunächst den vertikal zur Verfügung stehenden Platz füllen und dann nach rechts umbrechen.
• Es werden alle Dokumente eines Bilanzpostens direkt in einem GridView dargestellt. Durch Klick auf ein Dokument öffnet sich die App Bar, in der die Aktionen zu dem Dokument ausgewählt werden können (Öffnen, Teilen, Speichern, Löschen). Mit einem Button neben der Überschrift “Dokumente” kann ein neues Dokument hinzugefügt werden. Die alten Buttons auf einem Dokument entfallen damit und wurden gegen kontextsensitive App-Bar-Kommandos ersetzt, was die UI säubert und angenehmer zu bedienen ist:
  

Neben einer deutlich aufgewerteten Benutzerfreundlichkeit spielt das neue Layout vor allem im Bereich der Skalierbarkeit seine Stärken aus. Dadurch, dass die Eingabefelder und die Dokumente zunächst den vorhandenen vertikalen Platz ausnutzen und dann automatisch umbrechen, wird der zur Verfügung stehende Bildschirmbereich optimal ausgenutzt. Dies wird vor allem dann deutlich, wenn man sich die Ansicht auf einem großen Display ansieht, wie z.B. auf dem folgenden 23”-Monitor.

Im Direktvergleich zur alten Variante (s.o.) werden die Vorteile direkt ersichtlich, alle Inhalte passen ohne zu scrollen auf die dargestellte Bildschirmseite.

Auch in der Side-by-Side-Ansicht mit weiteren Apps ist das neue Layout deutlich besser geeignet als die alte Variante, doch damit beschäftigt sich ein separater Flurfunkbeitrag.