Wer eine App designen möchte, der steht vor einer echten Herausforderung – umso mehr, wenn die mobile App nicht nur auf einem Gerät, sondern auf einer Vielzahl von Geräten laufen soll. Verschiedene Bildschirmgrößen, unterschiedliche Seitenverhältnisse und variierende Pixeldichten bereiten auch dem größten Dreisatz-Genie Kopfschmerzen. Wie soll man bloß ein gutes Interface für etwas entwerfen, das man gar nicht genau kennt? Unser Designer Johannes erklärt, wie er unsere App gestaltet hat:

Fokussieren

Genau darin besteht das Problem: Je mehr Geräte ich unterstützen möchte, desto mehr Kompromisse muss ich eingehen und desto schlechter wird letztendlich die User-Experience. Ein Interface, das zu viele Kompromisse eingeht, kann kein gutes Interface sein. design-apps Deshalb sollte die erste Frage lauten: Für welche Plattformen designe ich? Und für welche nicht? Ich persönlich beschränkte mich zunächst auf Smartphones, wie iPhone, Android und Windows Phone, da ich das Gefühl hatte, dass Tablets ein anderes Konzept benötigen.

App Skizzieren

Jetzt, nachdem der Kopf frei ist, lässt es sich unbeschwert kreativ gestalten. In dieser Phase geht es darum, diese diffuse Idee der App, die im Kopf herumgeistert, irgendwie auf Papier bzw. Pixel zu bannen. Als Werkzeug wählte ich Photoshop – Stift und Papier sind aber mindestens genauso gut. Hauptsache, man arbeitet mit einem Tool, das sich vertraut anfühlt und das die Kreativität anregt.

App Planen

Nun kommt es drauf an, die fixe Idee in ein schlüssiges Interface-Konzept zu gießen. Aus den ersten Skizzen werden Wireframes – also (im Idealfall) ein klickbares Storyboard, das die Geschichte dem Benutzer erzählt. Frei nach der Devise „Kill your Darlings“ überleben diesen Schritt allerdings nicht viele Ideen. Allzuoft entpuppt sich das „coole Feature“ als Usability-Katastrophe.

Vor allem klickbare Wireframes können dabei sehr behilflich sein, da sie den Designer nötigen, jede Interaktion zu durchdenken: Was passiert, wenn der Benutzer hier nichts eingibt? Wie sieht das Eingabefeld mit Inhalt aus? Wie lässt sich dieser Inhalt wieder löschen?

Web App DesignAls Werkzeug entschied ich mich für den WireframeSketcher. Wichtig finde ich in diesem Schritt, dass das Tool nicht zu viel Spielraum für Design-Schnickschnack zulässt. So kann man sich leichter auf das Funktionale konzentrieren und das Design vorerst ausblenden.

App Testen

Ziel der vorangegangenen Übung war es, all die Ideen auszusortieren, die zwar ganz nett, aber nicht wirklich brauchbar sind. Und genau diese Brauchbarkeit, also die Usability, soll nun auf Herz und Nieren getestet werden. Zu diesem Zweck dachte ich mir ein paar Userstories aus – etwa „Du möchtest ein spontanes Abendessen mit deinen Freunden organisieren“ – und ließ unsere Freunde auf die Wireframes los.

App Design LayoutDas daraus gewonnene Feedback ist immens wichtig für die Qualität des Interfaces. Denn je früher Probleme erkannt werden, desto leichter und kostengünstiger lassen sie sich korrigieren. Wichtig ist beim Testen, selbst nicht zu reden, sondern vielmehr den Benutzer erzählen zu lassen. Und ja nicht entmutigen lassen: Probleme gibt es immer!

App Gestalten

Nun werden aus den groben Wireframes echte Mocks, also Bilder, die so tun, als ob sie die fertige App wären. Endlich nach Herzenslust austoben! Als Rahmen wählte ich die großartige iPhone-Schablone von pixeden. Um Schaltflächen nicht zu klein zu machen, empfiehlt es sich, einen kleinen Testkreis zu verwenden, mit dem man immer wieder die Größe der Schaltflächen überprüft. Die kleinste Touchfläche sollte einen Durchmesser von 1 cm nicht unterschreiten. Bei doppelter Pixeldichte (wie etwa bei Retina-Displays) sind das also 128 Pixel.

Der aufmerksame Leser hat jedoch sicherlich das Problem erkannt: Das Design ist nun auf genau ein Gerät zugeschnitten. Das ist richtig, und leider zur Zeit nicht vermeidbar, denn es fehlt schlichtweg an guten Tools für Responsive Design. So griff ich zurück auf den guten alten Photoshop. Mir geht es in dieser Phase vor allem darum, eine Idee von der grafischen Oberfläche, von den Farben und dem Erscheinungsbild der App zu bekommen.

Um dir einen kleinen Einbilck in meinen Designworkflow zu geben, habe ich mit einem Programm alle 6 Sekunden einen Screenshot gemacht und diese zu einem kleinen Film zusammengefügt.

App Bauen

Jetzt soll also das fertige Design in die App eingebaut werden. Definitiv der schwierigste und anstrengenste Teil. Denn nicht selten muss das mühsam gestaltete Design nun Federn lassen – je nachdem, auf welchem Gerät es angezeigt wird. Nicht jedes Smartphone hat die notwendige Leistung, Farbverläufe oder Schatten ansprechend darzustellen. Des Weiteren muss der Designer auch seine Komfortzone verlassen und das Design auf verschiedenen Bildschirmgrößen und Geräten testen. Eine frustrierende und schweißtreibende Arbeit.

Doch die Mühe lohnt sich: Wer schließlich die ehemals flüchtigen Designskizzen in voller Aktion sieht und den starren Mocks Leben eingehaucht hat, der spürt, dass es die Anstrengung wert war.