Glas über Ihrer Farbe. Die neue Gestaltung der newways.suite

Eine Software, mit der Sie arbeiten, sehen Sie länger an als Ihre eigene Website. Seit der Fassung 1.22.0 hat die newways.suite eine neue Gestaltung. Wir nennen sie „Glas“. Geändert hat sich das Aussehen, bedient wird die Suite wie bisher. Bei der Arbeit haben wir uns gefragt, ob die Oberfläche ruhig wirkt, ob sie die Farben des Betriebs trägt, der sie benutzt, und ob sie zu dem Gerät passt, das Sie gerade in der Hand haben.

Am Anfang standen Entwürfe in mehreren Richtungen, jeder an echten Seiten der Software ausprobiert. Sie hießen „Glas“, „Klar“ und „Marke“. Wir haben uns für Glas entschieden. Dieser Bericht beschreibt, wie die Gestaltung aufgebaut ist und was wir an ihr gemessen haben.

Drei Ebenen statt einer Fläche

Von hinten nach vorn betrachtet liegt zuunterst der Grund, ein ruhiges Farbfeld, das aus der Akzentfarbe des Betriebs entsteht, mit einem zweiten Ton, der im Farbkreis ein Stück weitergedreht ist. Darauf liegt der Inhalt. Karten, Tabellen und Formulare sind deckend, und die Karten haben statt einer Randlinie einen weichen Schatten. Die Ecken sind großzügig gerundet, die Knöpfe haben die Form von Pillen. Ganz vorn schwebt die Navigation als Glas. Das sind die Kopfleiste und am Rechner die Seitenleiste, beide mit etwas Abstand zum Rand, dazu die Reiter, mit denen Sie innerhalb einer Seite umschalten, und auf kleinen Bildschirmen die untere Leiste.

Die Reihenfolge ist Absicht. Was Sie lesen und ausfüllen, etwa die Positionen eines Angebots, liegt auf deckenden Flächen und bleibt scharf. Glas tragen die Navigation und Flächen mit wenig Text, also die Kennzahlen der Übersicht mit ihren großen Ziffern, die Spalten des Aufgaben-Boards, Kopf und Fuß eines Dialogs und kurze Meldungen. Menüs klappen deckend auf, weil sie über solchen Flächen liegen können. Zwei durchscheinende Flächen übereinander ergeben Nebel.

Bei der Schrift gilt dieselbe Zurückhaltung. Überschriften und große Zahlen stehen in der Bricolage Grotesque, die mit der Suite ausgeliefert wird. Der Fließtext nimmt die Schrift des Geräts, auf iPhone, iPad und Mac die Systemschrift von Apple, unter Windows Segoe UI, unter Android Roboto. Die Suite wirkt dadurch auf jedem Gerät vertraut, und keine Schrift wird von einem fremden Server geladen.

Hell und dunkel, beide gestaltet

Die dunkle Darstellung hat eigene Farbwerte statt umgedrehter Farben. Das Glas wird zu Rauchglas, die Karten bleiben deckend, der Hauptknopf wird hell. Welche der beiden Darstellungen erscheint, bestimmt die Einstellung Ihres Geräts, oder Sie wählen selbst in der Kopfleiste.

Die Suite nennt dem Browser außerdem die Farbe ihres Grundes, für hell und für dunkel. Browser, die diese Angabe auswerten, färben ihre Adressleiste danach.

Die Farben Ihres Betriebs

Die Oberfläche arbeitet mit den beiden Farben, die Sie in den Einstellungen hinterlegen, der Primärfarbe und der Akzentfarbe. Aus der Akzentfarbe entsteht der Farbgrund. In der hellen Darstellung ist der Hauptknopf dunkel und trägt einen Anteil der Primärfarbe, in der dunklen ist er hell. Damit das mit mehr als einer gefälligen Farbe aufgeht, haben wir die Gestaltung mit vier sehr verschiedenen Markenfarben durchgerechnet, einem Oliv, einem Blau, einem Gold und einer Koralle.

Im Kundenbereich, in dem Ihre Kunden Angebote freigeben und Rechnungen einsehen, geht die Suite einen Schritt weiter. Ist in der Akte eines Kunden dessen Markenfarbe hinterlegt, färbt sie seinen Bereich. Im Beispielbild sieht eine Kundin ihren Bereich im Blau ihres Unternehmens, während der Betrieb, der für sie arbeitet, in den übrigen Bildern dieses Berichts in Grün auftritt. Ganz oben steht, was von ihr erwartet wird, mit dem Knopf dazu. Ist keine Farbe hinterlegt, erscheint der Bereich in der Primärfarbe Ihres Betriebs.

Gebaut für die Hand

Am Telefon zeigt die Suite keine verkleinerte Rechneransicht. Unter 1024 Pixel Fensterbreite ordnet sich die Navigation um. Die Seitenleiste wird zur Schublade, die Sie über den Menüknopf oben links aufziehen, und am unteren Rand steht eine Leiste mit den fünf Zielen Start, Kunden, Projekte, Belege und Kalender. Sie liegt in Reichweite des Daumens und hält Abstand zum unteren Bildschirmrand, an dem viele Telefone ihre eigene Wischgeste haben. Schublade und untere Leiste gab es schon vor dieser Fassung. Neu ist, dass beide mit etwas Abstand zum Rand schweben, die untere Leiste als Kapsel aus Glas, die Schublade gerundet und deckend.

Wir haben nachgemessen, auf der Übersicht und auf zwei Wegen: in Chrome am Rechner bei fest eingestellten Fensterbreiten und in Safari im Simulator von Apple, der iPhone und iPad am Rechner nachbildet. Die Maße sind CSS-Pixel, die Einheit, in der Browser rechnen. Ein Telefon mit sehr feinem Bildschirm ist darin trotzdem nur rund 400 Pixel breit.

Bei 390 Pixel in Chrome und bei 402 Pixel im simulierten iPhone ist jede sichtbare Tippfläche mindestens 44 Pixel groß, die Einträge der unteren Leiste sind 54 Pixel hoch, keine Schrift ist kleiner als 12 Pixel, und die Seite lässt sich nicht seitlich verschieben. Nur die Kennzahlen bilden eine Reihe zum Wischen. Dieselben Maße gelten bei 768 und 820 Pixel, den Breiten gängiger Tablets im Hochformat, bei 820 Pixel auch im simulierten iPad. Beim Bau der Fassung sind alle neun Bereiche der Software bei 390 Pixel Breite auf dieselben Punkte geprüft worden. Breite Berichtstabellen rollen dabei in ihrem eigenen Rahmen. An Geräten in der Hand haben wir nicht gemessen, und auch die Bilder dieses Berichts sind Aufnahmen aus dem Browser, in Geräterahmen gesetzt.

Das Tablet ist der interessante Fall, weil es sich je nach Haltung wie zwei Geräte verhält. Im Hochformat, bei 768 bis 820 Pixel, arbeitet die Suite wie am Telefon, nur mit mehr Raum. Schublade und untere Leiste bleiben, und die vier Kennzahlen der Übersicht stehen nebeneinander. Ab 1024 Pixel, bei den meisten Tablets im Querformat, steht die Seitenleiste wieder schwebend links, und die untere Leiste entfällt. Dort gelten die Maße des Rechners, die Einträge der Seitenleiste sind 40 Pixel hoch. Große Tablets erreichen diese Breite schon im Hochformat. Die Suite richtet sich nach dem Platz, den Sie ihr geben, gleich welches Gerät ihn liefert.

Lesbar für alle

Glas ist heikel, weil die Lesbarkeit der Schrift von dem abhängt, was dahinter liegt. Deshalb sind die Kontraste gerechnet, für 1.244 Paare aus Schrift oder Kante und ihrem Hintergrund, mit den vier Markenfarben, hell und dunkel, und jede Glasfläche einmal über weißem und einmal über schwarzem Untergrund. Keines dieser Paare liegt unter dem Mindestkontrast, den die Richtlinien für barrierefreie Webinhalte (WCAG, Stufe AA) nennen, 4,5 zu 1 für Text und 3 zu 1 für die Kanten von Feldern.

Ist am Gerät „Transparenz reduzieren“ eingeschaltet, zeigen Browser, die diese Einstellung weitergeben, dieselbe Gestaltung mit deckenden Flächen. Das gilt auch für Browser, die kein Glas darstellen können. Ist „Bewegung reduzieren“ eingeschaltet, erscheint die Oberfläche ohne Übergänge.

Was gleich geblieben ist

Alles, was Sie bedienen. Jeder Knopf, jeder Weg und jedes Formular ist, wo es war. Unverändert sind auch die Seiten, die Ihre Kunden ohne Anmeldung sehen, etwa die Belegseite und das Online-Exposé, sowie alle PDFs und E-Mails. Die Gestaltung liegt als eigene Schicht über dem Bestand, die Datenbank bleibt unberührt. Vor der Auslieferung dieser Fassung sind 9.156 automatische Prüfungen fehlerfrei durchgelaufen, auf zwei Datenbanksystemen und zwei Versionen der Programmiersprache PHP.

Die Suite gibt es weiterhin auf Deutsch, Spanisch und Englisch und in drei Tarifen. Sie buchen einen Tarif ab 19 € netto je Nutzer und Monat und testen 14 Tage kostenfrei. Zahlungsdaten brauchen Sie bei der Buchung nicht, und wer in den ersten 14 Tagen im Konto kündigt, bekommt keine Rechnung. Was die Software kann, steht auf der Seite zur newways.suite.