Wie wir Software designen Design Design...

Bei der Gestaltung von User-Interfaces geht es nicht nur ums reine Aussehen, sondern insbesondere um einfache Bedienbarkeit, sinnvolle Strukturen und Umsetzbarkeit. Die Regeln dahinter sind mehr Wissenschaft als Kunst und wir begleiten Sie gerne beim Umsetzen dieser Prinzipien.

Dieser Artikel baut auf der erarbeiteten Struktur und den Wireframes aus “Wie wir Ideen konzeptionieren” auf und erklärt einige Prinzipien beim Design und unser spezifisches Vorgehen dabei.

Prinzipien Gedöns

1. Wo bin ich? Was soll ich hier?

Ein Nutzer muss verstehen worum es geht. Er muss es benutzen wollen, müssen ein Gefühl von Sicherheit haben und sich in Kontrolle fühlen. Interfaces dürfen nicht verwirren und unterschiedliche Botschaften senden. Viele einfache Seiten sind immer besser als Eine überladene.

2. Starke visuelle Hierarchien

Nutzer wollen durch Ihre Software geführt werden. Man muss auf den ersten Blick die Struktur einer Applikation erkennen und verstehen wie ein Layout aufgebaut ist. Dabei unterscheidet man meistens in Navigation, primäre und sekundäre Inhalte und Aktionen.

3. Weniger ist mehr

Reduzieren ist eine Kunst. Als das erste Macbook ohne CD-Laufwerk auf den Markt kam gab es große Aufruhr – “Wer würde jemals einen PC benutzen, der zum Datenaustausch nur einen USB-Anschluss anbietet??”. Ein anderes Beispiel: Yahoo versteht nicht, warum Google den Markt der Online-Suche beherrscht. Vergleichen Sie einfach mal die Startseiten…

Menschen sind glücklicher, wenn es Weniger zur Auswahl gibt. Nicht ohne Grund sagt man die Qual der Wahl. Machen Sie Ihren Kunden das Leben einfacher: Weniger ist mehr. Das Schöne an diesem Prinzip ist, dass auf einmal mehr Zeit und Raum da ist um das wesentliche wirklich gut zu machen.

4. Konsistenz ist essenziell

Man muss eine Sprache entwickeln, die Regeln für Farben, Typographie, Raum und Abstände, Raster und Layout, Fotos und Illustrationen festlegen. Selbst Animationen, Interaktionen und Seitenladezeiten müssen eine einheitliche Wirkung auf den Nutzer haben. Dabei muss man beachten, dass Konsistenz nicht Gleichheit in Allem bedeutet. Elemente, die Unterschiedliches machen, sollen auch unterschiedlich aussehen. Konsistenz bedeutet nicht, keine klare visuelle Sprache zu entwickeln.

5. Eine Haupt-Aktion pro Seite

Angenommen Sie haben einen Artikel. Dieser soll auf Facebook & co. geteilt werden. Dies aber doch erst nach Lesen des Artikels. Warum überladen die meisten News-Websites ihr Interface dann mit einer Sharing-Aktion neben der anderen, die eine lauter als die andere? Die primäre Aktion ist das Lesen des Artikels, erst dann macht ein Aufruf zum Teilen überhaupt Sinn.

6. Schrittweise Neues hinzufügen

Anknüpfend an den letzten Punkt: Wie kann man komplexe Interaktionen (z.B. lange Formulare) so unterteilen, dass sie nicht überwältigend wirken? Man muss schrittweise neue Informationen geben, dort wo sie am meisten Sinn machen. Es macht beispielsweise mehr Sinn einen Nutzer erst beim ersten Hochladen eines Fotos um Erlaubnis die Kamera zu benutzen zu bitten. Leider werden von Nutzern aber meistens direkt beim Installieren einer Applikation sämtliche Berechtigungen abgefragt – völlig ohne Kontext und den Nutzer überfordernd.

7. Hilfe dort wo sie gebraucht wird

In richtig guten Interfaces muss sich der Benutzer nie die Frage stellen, was wo und wie zu tun ist. Richtig gute Interfaces erklären sich von selbst und sind einfach zu erlernen.
Meistens muss man dennoch hier und da nachhelfen und einem Nutzer den Weg weisen. Beispielsweise ist das Beste Formular das, in welches man nichts falsch eingeben kann. Aber wenn fehlerhafte Eingabe möglich ist, braucht der Nutzer zur Orientierung interaktive Meldungen, die ihn darauf hinweisen. Diese sollten aber direkt dort angezeigt werden worauf sie sich beziehen, nicht gesammelt über dem Formular oder gar in einem neuen Fenster.

8. Interfaces müssen benutzt werden

Was bringt ein wunderschöner aber unbequemer Stuhl, der nicht benutzt wird? Interfaces sind nicht dazu da den Designer glücklich zu machen. Sie müssen nutzbar und nützlich sein. Und sie müssen benutzt werden.

Unser Vorgehen Wirklich sehr gut…

1. Bestehendes in einzelne Bestandteile zerlegen

Als erstes müssen wir Ihre Corporate Identity und Design-Sprache analysieren (falls es die schon gibt). Wir werden alle wichtigen Stilelemente wie Farmen, Schriftarten und Raster, aber auch Elemente wie Buttons sammeln und kategorisieren. Dies ist wichtig um konsequent entweder bestehende Standards weiter durchzuziehen oder – wo es Sinn macht – bewusst neue Wege zu gehen. Basierend auf dem “Interface Inventory”-Prinzip von Brad Frost haben wir eine Dokumentenvorlage die bei diesem Schritt unterstützt: Zur Interface-Inventar Vorlage.

2. Regelhaftigkeiten bestimmen

Sobald wir Ihre aktuelle Design-Sprache verstanden haben können wir Regeln für Farben, Typographie, Layout usw bestimmen. Diese werden wir beim Ausarbeiten späterer Module, Seiten und Interaktionen berücksichtigen.
Aus den erarbeiteten Regeln und Mustern werden wir einen Styleguide für die Software-Entwicklung aufsetzen.

Styleguide Beispiel

Einfaches Styleguide-Beispiel

3. Key-Seiten und Module entwickeln

Anhand der Elemente aus dem Styleguide können nun, falls gewünscht, die Hauptseiten der Applikation oder Website statisch designed werden. Zum Testen neuer Design-Richtungen ist das praktisch, wir empfehlen aber so bald als möglich in Code zu arbeiten und richtige Prototypen zu entwickeln.

Weiter lesen