„There’s an app for that“ – Apple’s Werbeslogan zum Trotz werden Woche für Woche neue Smartphone-Applikationen publiziert. Die großen Stores von Google und Apple veröffentlichen monatlich im Schnitt über 40.000 neue Apps. Ganz so schwierig kann es also nicht sein, eine eigene App zu entwickeln, oder? Nicht unbedingt, denn App ist nicht gleich App. Schon mal frustriert das Smartphone hingeschmissen, weil irgendwie nichts so funktionierte, wie es sollte? Daran ist in der Regel eine schlechte sog. “User Experience” schuld. User Experience beschreibt – wie der Name schon sagt – die Erfahrung des Endnutzers beim Umgang mit der App. Designer_innen und Konzepter_innen fassen unter dem Überberiff alle Elemente zusammen, die die Erfahrung des Nutzers prägen. Vom Design der Buttons oder der Farbgebung bis hin zur kleinsten Überschrift.

Um die User Experience so gut wie möglich auszugestalten, ohne dabei zu viel Zeit zu verlieren, entwickeln Online-Konzepter_innen neben dem inhaltlichen auch ein technisches und gestalterisches Konzept. Um in iterativen Prozessen eine anfängliche Idee zur Konzeptstufe auszubauen, nutzen sie dafür unterschiedliche Werkzeuge:

Von der Bierdeckel-Skizze zum Grobkonzept
Ausgangspunkt ist die eigene Idee: Was soll meine App leisten? Wobei soll sie Nutzer_innen unterstützen? Welches Problem löst sie? Welche Daten und Informationen werden hierfür benötigt? Wer steuert diese bei? Ein formuliertes Exposé bzw. eine Projektbeschreibung hilft, sich im Team über die Ziele und Anforderungen und damit schließlich das inhaltliche Konzept zu verständigen.

Technische Anforderungen spielen dabei eine zentrale Rolle. App ist wie gesagt nicht gleich App. Soll es beispielsweise eine native – also über einen Appstore vertriebene – App oder eine Web-App sein? Für welche Plattformen wird entwickelt? Welche Betriebssysteme sollen unterstützt werden? Benötigt die Wunsch-App eine Datenbank oder ein redaktionelles Backend? Zum Teil können die Antworten auf solche Fragen einen erheblichen Einfluss auf die inhaltliche und gestalterische Umsetzung ausüben. Technisches Hintergrundwissen ist also unbedingt vonnöten, um vorab keine falschen Weichen zu stellen.

Ziemlich schnell stellt sich dann die Frage, wo all die Inhalte und Funktionen, die ich gerne in meiner App haben möchte, auf dem Bildschirm versammelt sein sollen. Unweigerlich kommt man so zu gestalterischen Überlegungen, namentlich zum Interface und zur Usability (Bedienbarkeit).

Werkzeuge und Best Practices

1. Paper Prototyping

7984455872_3bce6aca98_k

Samuel Mann via Flickr Lizenz: CC BY 2.0

Ein kleiner Dämpfer vorneweg: Gerade bei größeren App-Projekten kommt es (wie so oft) vor, dass Ziele in der Konzeptphase immer wieder umgeworfen, angepasst und erweitert werden. Das einzige Gegenmittel lautet hier: Testen, testen, testen! In der Konzeptphase steht dafür jedoch noch keine programmierte App-Version zur Verfügung – die gilt es ja gerade zu entwerfen.

Da Programmierung teuer und zeitaufwendig ist, behilft man sich ganz klassisch mit Stift und Papier, um erstmal einen sogenannten „Paper Prototype“ zu zeichnen. Solche gezeichneten Skizzen oder „Wireframes“ (Drahtgitternetzmodell) sollen die Funktionen und Interaktionen mit der App skizzieren. Bei Wireframes steht also die User Experience im Vordergrund, während ästhetische Fragen zur Farbgebung, Typo etc. noch keine Rolle spielen. So lässt sich schnell entscheiden, wie viel Platz man etwa dem Textbereich lassen möchte oder ob der Button für die App-Einstellungen lieber oben links oder oben rechts stehen sollte. Hierfür gibt es kostenlose druckbare A4-Vorlagen für gängige Mobiltelefone. Für App-Designer gibt es mittlerweile sogar Notizbücher, deren Seiten ein Punktraster für iPhone-Sketches bieten.

2. Digitale Mockups

15-20-2015_06.20.09-Screenshot

„Digitale Mockups erweitern Wireframes um das geplante Look & Feel der App und können mithilfe von Tools wie POP oder Invision auch zu interaktiven Click-Dummys ausgebaut werden.“

App-Designer gehen danach einen Schritt weiter und übertragen ihre Ergebnisse auf den Rechner. Beliebte professionelle Wireframe-Tools sind Omnigraffle, Visio, Axure und Balsamiq. Für Auftraggeber werden öfters auch digitale Mockups erstellt, die einen pixelgenauen Eindruck der fertigen App bieten, samt Farbgestaltung und Grafiken. Da die Erstellung solcher Mockups für alle Bildschirmansichten sehr aufwendig sein kann, wird damit oftmals erst gegen Ende der Konzeptphase begonnen, um Korrekturen zu minimieren.

Eifrige Smartphone-Nutzer wissen Apps zu schätzen, die logisch aufgebaut und intuitiv bedienbar sind. Dahinter stecken oft Design-Konventionen, die zum Teil von den Betriebssystem-Entwicklern selbst proklamiert bzw. vorgegeben werden. Wer sich mit dem Thema Interfacegestaltung beschäftigt, kommt daher nicht darum herum, sich die Designrichtlinien für iOS- und Android-Apps von Apple und Google anzuschauen. Hier finden sich nicht nur Vorgaben, sondern auch nützliche Tipps und Hinweise.

3. Protoypen testen
Will man seinen Prototypen nun zum Leben erwecken, also die Interaktivität zwischen verschiedenen Bildschirmen testen, bieten sich Tools wie POP oder Invision an. Beide Tools ermöglichen es, aus den entworfenen Paper-Wireframes oder Pixel-Mockups interaktive Click-Dummys zu erstellen. Invision bietet sogar an, den Prototypen direkt auf dem Handy anzuschauen und zu testen, ganz wie eine fertige App. Dies lässt nicht nur ein richtiges App-Feeling aufkommen, sondern ermöglicht es Tester_innen, das Konzept auf Herz und Nieren zu prüfen. Denn egal ob man sich für ein einfaches Paper-Prototyping oder pixelgenaue Mockups entscheidet: das umfangreiche und gewissenhafte Testing lässt sich nicht vermeiden.

Das fertige Grobkonzept
Viele Korrekturschleifen später ist aus der vagen App-Idee am Konferenztisch ein strukturiertes Grobkonzept geworden, welches Inhalt, Technik und Design der App definiert. Dieses beinhaltet mitunter:

– eine klar formulierte inhaltliche Zielsetzung
– einen technischen Anforderungskatalog für die App
– (Interaktive) Wireframes plus optional Mockups, die die User Experience und Interaktionsmöglichkeiten der App definieren und strukturieren

Damit ist der Löwenanteil der konzeptionellen Arbeit eigentlich schon getan. In einem nachfolgenden Feinkonzept ließen sich nun alle Funktionen und Attribute haargenau festlegen und verschriftlichen: von der Schriftgröße für Tabellenelemente, der Farbe einzelner Buttons, Begrenzungen maximaler Textlängen, bis zu den Pixelmaßen von Profilfotos. Nicht immer machen Feinkonzepte Sinn, in mittelgroßen bis großen App-Projekten sind sie jedoch unerlässlich, um für alle beteiligten Produzenten (Entwickler, Designer, Redakteure) klare Vorgaben vorzugeben. Aber dazu vielleicht später einmal mehr.

Would you like to share your thoughts?

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© KOOPERATIVE BERLIN.  Jobs  Impressum  Datenschutzerklärung