Ein starkes Konzept ist notwendig um den Erfolg einer neuen Mobilen Anwendung sicherzustellen. Was ist jedoch ein App Konzept? Es ist sicherlich nicht die richtige Definition, aber man kann ungefähr davon ausgehen, dass es die Phase zwischen der Idee zur der Anwendung und dem tatsächlichen Start der Programmierung ist. In dieser Phase wird unter anderem die Anwendung definiert, die Nutzergruppe bestimmt, die Funktionsliste erstellt, eine Roadmap festgelegt und das Design eruiert.

In diesem Beitrag erklären wir Ihnen wie Sie ein starkes Konzept für Ihr Vorhaben erstellen.

1) Definition der App

Eine App Definition ist eine kurze und schlüssige Erklärung des Hauptzweckes der App und deren angezieltes Publikum.

Ein Beispiel für solch eine Definition kann sein: „Eine Freundschafts-Anwendung, welche junge Leute unterstützt mit ihren Freunden und Bekannten in Kontakt zu bleiben“

Die Definition sollte sehr früh in der Entwicklungsphase erstellt werden. Diese wird dann wiederum hilfreich sein, eine Liste an Funktionalitäten zu eruieren, welche zur Anwendung passen und welche attraktiv für den Nutzer sind. Während der kompletten Entwicklung kann diese Definition genutzt werden, um zu entscheiden ob bestimmte Funktionalitäten und Vorgehensweisen Sinn machen.

2) Wer sind die Nutzer?

Es ist wichtig zu wissen wer die Nutzer sein werden. Sind das Jugendliche, Teenager oder ältere Leute? Welcher Typ von Mensch sind diese? Sind das eher Männer oder Frauen, welche die App verwenden werden? Mit der Beantwortung dieser und anderer Fragen kann man ein Profil des späteren Nutzers erstellen. Dies ist sehr wichtig, denn die ganze Farbwahl, die Nutzerführung etc. hängt davon ab. Denn ein Kind möchte ein ganz anderes Erlebnis haben, als ein Erwachsener.

3) Ideen Brainstorming

Da die Idee am Anfang sicherlich noch nicht ganz ausgereift ist, macht es Sinn ein Brainstorming anzusetzen. Hierbei schreibt man soviele Ideen zu der App in Wörtern oder Sätzen an ein Whiteboard (alternativ auf ein Blatt Papier). Dabei sollte es erst einmal unwichtig sein, ob diese Funktionalitäten umsetzbar sind oder nicht. Es geht darum soviele Stichworte und Denkansätze für die Anwendung zu bekommen wie möglich.

4) Erstellung einer Funktionalitäten-Liste

In dieser Phase schreiben Sie in einer Liste alle Funktionalitäten, welche eventuell für den Nutzer interessant sein könnten. Bei einer Kennenlern-Anwendung wäre das zum Beispiel eine Liste wie diese:

• Männer und Frauen kontaktieren
• Einen Chat mit diesen Personen starten
• Zur Freundesliste hinzufügen
• Push-Nachricht, wenn Bekannte in der Nähe
• Profile-Matching, wenn noch unbekannte aufeinander treffen, welche die gleiche Anwendung nutzen
• etc. etc.

5) Filterung der Funktionalitäten-Liste

Üblicherweise wird diese Liste sehr lang sein und es wird keinen Sinn machen alle Funktionalitäten in die Mobile App mit hineinzunehmen. Der Grund liegt darin, dass Mobile Applikationen am erfolgreichsten sind, wenn sie eine kleine Menge an Dingen sehr gut ausführen können (Ein gutes Beispiel dafür: Die Tankenstellen App Clever Tanken, mit welcher man die günstigsten Tankstellen in der Umgebung finden kann).

Mit Hilfe der am Anfang erstellten Definition und dem Wissen über den Nutzer, kann die Liste nun gefiltert werden. Man kann Funktionalitäten die nicht zu den Nutzern passen herausstreichen.

6) Erstellung eines Umsetzungsplans

Der Umsetzungsplan wird im Neudeutschen auch Roadmap genannt.

Oftmals werden nicht gleich alle Funktionalitäten, in der Version 1.0 der App, an die Öffentlichkeit gebracht. Funktionalitäten werden mit der Zeit hinzugeschaltet. Hierfür macht es Sinn, eine solche Roadmap niederzuschreiben, so dass man immer weiss, wo man sich befindet und welche Meilensteine noch zu erreichen sind.

Um eine Roadmap zu erstellen, kann man seine Funktionalitätenliste im ersten Schritt in Gruppen einteilen. Eine Gruppierung kann in dem bisher genannten Beispiel sein: „alle Funktionalitäten welche das Kontaktieren von Freunden ermöglichen“. Eine weitere Gruppierung kann ein Backend sein, welches das Moderieren von Chateinträgen ermöglicht, usw.

Nach der Gruppierung, kann man wiederum eine Bewertung der Wichtigkeit der jeweiligen Gruppen vornehmen. Das Kontaktieren der Freunde mag in diesem Fall eine sehr wichtige Funktionalität sein, ohne welche die App nicht funktionieren wird. Das Backend kann, in manchen Fällen, eher unwichtig sein und kann zu einem späteren Zeitpunkt/ Release hinzugefügt werden.

Nach der Bewertung kann man zu den Gruppen noch Zeitpunkte festlegen, wann diese fertiggestellt sein sollen.

7) Zeichnungen der App

In dieser Phase werden Bleistift-Zeichnungen, Farmschema, Wireframes und sogenannte Mockups erstellt.

a) Bleistift-Zeichnungen

Hier zeichnet man mit Bleistift und Papier die grobe Skizzierung der App ein. Die wichtigsten Elemente der Anwendung werden hierin aufgezeigt. Dies sollte bereits von einem erfahrenen User Interface/ User Experience Designer (UI/ UX Designer) erstellt werden.

Es gibt auch Templates im Internet, welche die Arbeit für die Erstellung der Bleistift Zeichnungen vereinfachen.

Das gute an Bleistift-Zeichnungen ist, dass man diese schnell zeichnen und auch schnell wieder korrigieren kann. Auch die anderen Parteien können schnell ihr Feedback zu den Zeichnungen geben und eventuell auch Stellen markieren, an denen etwas hinzugefügt werden soll. Dafür müssen diese Teamkollegen auch keine Softwarekenntnisse haben, da man nur den Bleistift in die Hand nehmen muss.

b) Schema der Farben

Für das Thema Farben oder Farbschema bräuchte man einen eigenen Artikel, da es doch sehr viele Aspekte beinhaltet. Generell kann man jedoch sagen, dass es nicht zu viele Farben in der Anwendung geben sollte. Meistens langen 4 bis 5 verschiedene Farben. Diese sollte dann über das Logo, die Buttons und die anderen Elemente gleichmässig und passend verteilt werden. Auch die Webseite und die anderen Marketing-Massnahmen können diesem Farbschema angepasst werden.

c) Designvorschau

Im Englischen wird diese Designvorschau auch „Mockup“ genannt. Diese zeigt schon relativ genau auf, wie die App später aussehen wird.

Mockups lassen sich gut in Photoshop erstellen, vorausgesetzt man hat die notwendigen Fähigkeiten diese Grafiksoftware zu verwenden. Ansonsten gibt es Online auch Mockup-Erstellungsprogramme die auch von Laien genutzt werden können.

Beachten sollte man, dass Google und Apple und die anderen Betriebssystem-Hersteller, Vorgaben machen, wie das Design auszusehen hat. Bei Android sollte das Navigations-Menü zum Beispiel oben im Nutzerbildschirm sein, während es bei iOS unten im Bildschirm sein sollte.

8) Papier App Testing

Anstatt gleich eine App, nach der Design-Phase zu erstellen, kann man zuerst einmal eine Demo-App auf Basis von den Mockups erstellen. Wir nutzen hierfür zum Beispiel interaktive Adobe PDF Dateien. Wenn man auf der PDF auf einen Button Screen klickt, dann kommt man auf die Seite mit dem entsprechenden Screen, auf welchen man in der realen App gekommen wäre.

Somit bekommt man bereits eine erste Idee wie die Nutzerführung aussehen wird. Die Teammitglieder können sich so, ein relativ reales Bild machen und das Ergebnis im Team besprechen.

Auch macht es Sinn die verschiedenen Seiten auszudrucken und es Testpersonen zu zeigen und nach deren Meinung zu fragen.

Mit diesen Feedbacks kann man dann weitere Konzept-Revisionen beginnen, bis man dann eine, für den Nutzer aus der Zielgruppe, passende Anwendung hat.

Start

Im nächsten Schritt kann man dann diese Informationen (interaktive PDF, das erstellte Design etc.) an die Entwickler für die Umsetzung weitergeben.

Fazit

Unserer Erfahrung nach ist in vielen Mobile App Projekten, die Zeit für die Konzeption zu kurz angesetzt. Eine längere Phase in diesem Bereich kann nicht schaden, denn es macht mehr als Sinn, die Nutzerwünsche in der zu erstellenden Anwendung zu berücksichtigen. Auch ist es sinnvoll das erstellte Design mit dem Team und den Anwendern zu besprechen.

Welche Erfahrungen haben Sie in diesem Bereich gesammelt? Was können Sie empfehlen?

Interessante Artikel zum Thema:

In wenigen Schritten zum Konzept

Ein Leitfaden einer bekannten Agentur wie man Dienstleister und Partner begeistert

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen bei der Erstellung von einfachen und komplexen Mobile Apps. YUHIRO ist ein deutsch-indisches Unternehmen das unter anderem Mobile Apps auf Basis von Android und iOS erstellt.

Es gibt unterschiedlichste Ansätze wie man eine Website umsetzen kann.

Der einfachste Weg wäre es ein Template in WordPress oder in einem anderen Content Management System (CMS) zu nehmen und es dann mit Inhalten (Texte, Bilder, Videos, etc.) zu befüllen.

Es gibt einige Blogger und Unternehmer, die mit diesem Ansatz gut fahren.

In vielen Fällen benötigt es jedoch ein gut durchdachtes Design, welches die Besucher besonders anspricht.

Die Ziele der Erstellung eines Konzepts könnten wie folgt aussehen:

• Steigerung der Conversion Rate: Mehr Besucher sollen auch zu Kunden werden. Beispielsweise werden mit der derzeitigen Webpräsenz zirka 10 von 1000 Besuchern zu Käufern. Dies soll nun auf 50 Käufer pro 1000 Besucher gesteigert werden.
• Verbesserte Markenwahrnehmung: Bekannte Marken wollen ein bestimmtes Gefühl vermitteln. Hierfür braucht es ein spannendes Webdesign. Firmen wie Adidas oder Redbull sind natürlich die besten Beispiele. Es gibt jedoch genug kleine und mittlere Firmen, die von einer verbesserten Markendarstellung profitieren können.
• Wiederkehrende Besucher: Viele Webseiten werden einmal besucht und dann nicht mehr. Eine verbesserte Nutzerführung und auch interessante Inhalte können den Besucher zum wiederkommen animieren.

Es gibt sicherlich noch viele weitere Ziele welche man mit einem solchen Konzept erreichen  möchte. Dies ist nur eine kleine Auswahl.

Im Beitrag ein paar Informationen wie man bei der Konzept Erstellung vorgehen kann.

1) Ideen vom Kunden einsammeln

Im ersten Schritt macht es Sinn, Informationen vom Kunden selbst einzuholen. Dieser hat in den meisten Fällen bereits Ideen, wie das Webdesign aussehen kann.

Oftmals gibt es bereits die eine oder andere Website, von der man sich inspirieren lassen kann.

Klar ist auch, das der Designer höchstwahrscheinlich bereits eigene Ideen für die Umsetzung hat. Es geht jedoch nicht um den Designer, sondern um den Kunden.

Man könnte auch nach folgenden Dingen fragen:

• Wie soll sich der Nutzer fühlen, wenn er/ sie die Internetpräsenz besucht? (Beispiel: begeistert, zufrieden, interessiert, etc.)
• Welche Farben soll es hauptsächlich geben? (eher Grau, eher Bunt, etc.)

Mit diesen Informationen kann man zum Beispiel eine einfach Bildersuche auf Google starten. Einfach die jeweiligen Stichwörter in der Bildersuche eingeben (Begeisterung, etc.) und schon hat man erste Ideen in welche Richtung es gehen kann.

2) Anforderungen einholen

Wichtig ist natürlich auch zu erfahren, was die Website denn schlussendlich können muss. Geht es darum einen Onlineshop zu haben, ein Internetportal, eine Informations-Seite, eine Unternehmenswebsite, etc. Auch das hat einen Einfluss auf das Webdesign.

Auch Elemente wie ein eigener Produktkonfigurator (mit welchem sich der Besucher Produkte oder Dienstleistungen individuell zusammenstellen kann) können die Richtung beeinflussen.

3) Brainstorming

Nun könnte man zusammen mit dem Kunden und anderen Teammitgliedern (Entwickler, Projektleiter, etc.) ein Brainstorming machen.

Hier kann man seiner Kreativität freien Spielraum geben. In dieser Phase geht es nicht um konkrete Umsetzungs-Punkte, sondern einfach um viele Ideen zu haben, welche man später nutzen kann.

4) Trends berücksichtigen

Derzeit gibt es auch einige wichtige Trends.

Ein Beispiel ist der Mobile First Ansatz, in welchem man vordergründig für mobile Endgeräte, wie Smartphones und Tablets entwickelt und nicht für den Desktop (wie das früher der Standard war).

Anstatt eines normalen Menüs würde man hier dann eine Art “Burger”-Menü nutzen, welchen man von mobilen Webseiten kennt.

Responsive Design ist zwar kein Trend mehr. Aber auch das beeinflusst die Technologieauswahl und das Aussehen der Internetseite.

5) Sketches

Im nächsten Schritt kann man sich dann daran machen einfache Zeichnungen auf Papier zu erstellen.

Damit lässt sich das Layout jeder einzelnen Seite einfach darstellen.

Zusammen mit den Teammitgliedern und dem Kunden kann man dann entscheiden, wie die Seiten schlussendlich aussehen sollen.

Die Zeichnung auf Papier geht noch einen Tick schneller (als zum Beispiel mit der Erstellung eines Software-Werkzeuges) und jeder kann es.

6) Wireframes

Wenn man die groben Zeichnungen fertig hat. Dann kann man das ganze noch verfeinern, in dem man Wireframes erstellt.

Heutzutage gibt es viele Online Tools die dabei unterstützen können.

Damit lassen sich relativ schnell unterschiedlichste Seiten (Homepage, Kontakt, Über uns, etc.) designen.

Auch kann man weitere Teammitglieder hinzufügen, die dann jeweils ihr Feedback geben können. Adobe XD, Invision, Indesign CC oder Photoshop CC sind Werkzeuge hierfür.

Es gibt jedoch noch einfachere Tools wie wireframe.cc, welche sich auch von Laien bedienen lassen.

7) White Space

Ein Trend der sich immer mehr durchsetzt ist, dass man “Weisse Flächen” nutzt, um das Webdesign sauberer erscheinen zu lassen.

Im Grund heisst das einfach, weniger Elemente auf der Seite, so dass es übersichtlicher wird.

8) Ideen sammeln

Ein guter Weg Ideen für ein Webdesign Konzept zu sammeln ist es, sich Architektur-Magazine anzuschauen. Dort findet man oftmals interessante Layouts (von Gebäuden, Häusern, etc.) welche man auch als Inspiration für eigene Designs nutzen kann.

9) Photoshop Dateien

Das schlussendliche Design wird nun in Photoshop erstellt. Hier sieht man sozusagen bereits die fertige Website. Ausser dass hier noch keine interaktiven Elemente zu sehen sind, welche dann auf der Internetpräsenz vorhanden sein werden.

10) Wichtig: Mit der Zeit einen Prozess entwerfen

Mit der Zeit sollte man einen Design Prozess entwerfen, welchen man verfolgen kann.

Dieser kann wie folgt aussehen:

• Workshop mit dem Kunden
  • Brainstorming Session
  • Fragen und Antworten Runde
  • Grobes Skizzieren des möglichen Layouts auf einem Whiteboard
• Skizzen auf Papier erstellen und diese mit dem Kunden teilen
• Layouts in einem Wireframing Tool erstellen
• Photoshop Dateien erzeugen

Beispiele

Ein paar spannende Seiten findet man hier: Webdesign Beispiele auf dem Wolkenhart Blog

Dort sieht man unterschiedlichste Ansätze, die man verfolgen kann.

Fazit

Content ist zwar immer noch King. Das Webdesign kann jedoch, besonders für mittlere und grosse Unternehmen wichtig sein. Oder für solche Firmen, die sehr viel  Kundenkontakt haben.

In den meisten Fällen schaut sich der Nutzer erst das äussere Erscheinungsbild an und wird sich dann erst mit den Details beschäftigen.

Es macht also Sinn, sich diesen Bereich genauer anzuschauen. Besonders wenn man eine eigene Corporate Identity (CI)/ Corporate Design (CD) hat, nach welchem man sich richtet und die über alle Marketing-Kanäle (Online- und Offline) passen müssen.

Eine kreative Auseinandersetzung mit dem Thema, kann trotz CI, CD wichtig sein.  Denn es ist eine weitere Möglichkeit, langfristig bei Kunden im Gespräch zu bleiben.

Welche Erfahrungen habt Ihr mit dem Thema Webdesign gemacht? Worauf gilt es zu achten?

Interessante Beitäge:
Oliver Schöndorfer schreibt über den Entstehungsprozess eines Webdesigns
Wie man in wenigen Schritten eine Website erstellt

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.