App Design: So erstellt Ihr ein tolles Design
Es gibt so viele Mobile Anwendungen auf dem Markt wie noch nie. Nur einige davon werden auch zum Erfolg. Dies liegt sicherlich auch daran, dass oftmals das Design der App vernachlässigt wird und relativ schnell mit der Programmierung angefangen wird.
Ein gutes App Design ist jedoch notwendig, um heutzutage mit eine Mobilen Anwendung erfolgreich zu sein. Der folgende Beitrag gibt ein paar Tipps und zeigt den Weg auf, wie man so eine Anwendung am besten designen kann.
Web versus Mobile
Viele App Entwickler kommen aus dem Webdesign Bereich. Im Bereich Web sind jedoch andere Punkte wichtig als im Bereich Mobile. Denn im Bereich Mobile sind die Bildschirme sehr viel kleiner und es kommen immer mehr Gerätetypen hinzu. Das beste Beispiel sind die neuen Smartwatches. Diese zeigen, um ein vielfaches weniger an Informationen an und müssen dennoch schön aussehen.
Den Nutzer verstehen
Es ist wichtig herauszufinden, welchen Vorteil der Nutzer von der Anwendung hat und warum er/ sie die Anwendung mehr als einmal nutzen sollte. Um das herauszufinden kann man die folgenden Dinge unternehmen
- Personas erstellen: Personas sind Beschreibungen von möglichen Nutzern. Beispielsweise: Nutzer ist zwischen 25 und 30 Jahren alt, betreibt regelmässig Yoga und arbeitet als Projektmanager in einem IT Unternehmen. Hier ein Beispiel, wie solch eine Persona erstellt werden kann.
- Nutzer Szenarien: Szenarios geben einen Einblick, wie sich eine Persona verhalten wird, um damit eine Nutzeroberfläche zu erstellen, welche für diese am besten passt und mit welcher sie ihre Ziele erreichen können. Hier mehr zu Nutzer Szenarien.
- Experience Map: Eine Experience Map ist eine genaue Beschreibung des Weges,welcher ein Besucher der App hinlegt. Hier etwas mehr dazu: Experience Maps.
Wettbewerb analysieren
Es ist immer gut zu schauen was der Wettbewerb macht. Jedoch sollte man sich davon nicht allzusehr beeinflussen lassen. Denn man möchte im Idealfall etwas anbieten, was um Längen besser ist, als was der potenzielle Kunde derzeit nutzt. Das beste Beispiel ist Whatsapp. Es hätte für die Entwickler der Anwendung Sinn gemacht, den Wettbewerb zu analysieren. Die Umsetzung von Whatsapp selbst war jedoch um Längen besser, als dass was man vom Wettbewerb bekam.
Ein weiteres Beispiel ist Quora (Web-basiert). Auch hier wäre eine Analyse von Plattformen wie gutefrage.net von Vorteil gewesen. Die finale Version von Quora ist jedoch bei weitem besser, als diese bei gutefrage.net der Fall ist.
Auch kann man sich unterschiedliche Apps herunterladen und diese mit den eigenen Funktionalitäten vergleichen. Dabei kann man auch die Aufmachung dieser Anwendungen vergleichen und schauen welche Unterschiedlichkeiten und Ähnlichkeiten es gibt.
Gerätevielfalt beachten
Es setzen sich immer mehr Geräte im Mobile Bereich ein. Sei es durch unterschiedlich grosse Geräte (Wearables, etc.) oder über neue erfolgreiche Anbieter, wie zum Beispiel Xiaomi, welche bereits den höchsten Anteil an Smartphone-Verkäufen in China hat.
Betriebssysteme berücksichtigen
Jedes der Betriebssysteme, wie zum Beispiel Android, iOS oder WindowsPhone haben deren eigenen Design Guidelines. Hier die Android Design Guideline.
Ein Kreativer sollte einen guten Überblick haben, wo was benötigt wird und worauf es zu achten gilt.
Mit Wireframe statt Photoshop starten
Viele Designer starten lieber mit Photoshop und erstellen gleich mal die ersten Seiten der neuen Anwendung.
Besser ist es auf Wireframes zu setzen, welche schnell erzeugt sind. Es gibt hier viele Online Tools, welche dabei unterstützen können. Wireframe|cc ist ein mögliches Tool dafür.
Diese lassen sich den Kunden, Teamkollegen und Managern schneller vorzeigen und es lassen sich auf dieses Feedback, schneller Änderungen vornehmen.
Bei einem fertiggestellten Photoshop Bild wird das bereits erheblich schwieriger und verbraucht viel Zeit.
Auf Papier zeichnen
Eine andere Möglichkeit ist es, die Wireframes auf Papier zu zeichnen und diese dann als Wireframes zu nutzen.
Prototyping
Mit den Wireframes oder den Papierzeichnungen lassen sich daraufhin erste klickbare Anwendungen erstellen. In manchen Online Werkzeugen, ist diese Funktion bereits erhalten. Zum Beispiel in Axure.
Wenn man auf Papier gezeichnet hat, dann kann man dieses Werkzeug nutzen: POP. Hier kann man Fotos von den Zeichnungen machen und mit diesem dann den interaktiven Prototyp erstellen.
Mobile First
Immer mehr setzt sich der Mobile First (Englisch für: Mobil zuerst) Gedanke durch. Man erzeugt das Design also für den kleinsten Bildschirm und arbeitet sich dann langsam zu den grösseren Bildschirmen hin.
Besonders für Anwendungen, welche auch auf Desktops und Laptops laufen, kann das sinnvoll sein. Denn oftmals startet man in der Web-Welt, um dann auf die Smartphones zu übersetzen. Wenn man jedoch von der Mobilen Version als Ausgangspunkt ausgeht, dann ist man bereits gezwungen, sich darüber Gedanken zu machen. Man wird dadurch andere Ansätze finden.
Mit Mobile First schafft man es auch, ein wenig weiter weg vom Webhintergrund zu kommen. Das ist gut so, denn immer mehr Menschen gehen Mobil ins Netz und nicht via Rechner, Laptop und anderen grösseren Geräten. Dies ist auch deshalb wichtig, weil die meisten Nutzer heutzutage Mobil ins Internet gehen und weniger über PC’s.
Beim Mobile First Ansatz kommt dem Content (den Inhalten wie, Buttons, Texte, Bilder, Videos, Grafiken, etc.) eine grosse Wichtigkeit zu. Denn je nachdem wie der Content aussieht, wird sich auch die Anwendung verändern. So ändert sich die Anwendung, wenn zum Beispiel überwiegend Bilder genutzt werden und weniger Text.
Dicke Finger
Nutzer haben in den meisten Fällen dicke Finger und auch eine unterschiedliche Weise ein Gerät in der Hand zu halten. Das muss berücksichtigt werden, wenn man die Interaktionselemente zeichnet.
Auch unterscheidet sich die Art und Weise wie man ein Smartphone oder ein Tablet hält. Hier spielt wiederum die Grösse des Gerätes eine Rolle. Bei einem Smartphone wird man höchstwahrscheinlich das Smartphone in einer Hand halten und mit dem Finger der anderen Hand die Befehle angeben. Während manche bei Tablets beide Hände und die Daumen für die Navigation nutzen.
Im ständigen Wandel
Wichtig ist für einen App Designer auch zu verstehen, dass sich Design Anforderungen ständig ändern. Heutzutage ist zum Beispiel das Flat Design eher gefragt. Auch das von Google eingeführte Material Design scheint immer mehr Anhänger zu finden.
Auch macht es Sinn ein erstes Modell zu erzeugen, und mögliche Nutzer dann nach Änderungswünschen oder Vorschlägen zu fragen, anstatt etwas Fertiges zu bauen.
Mobile Technologien ändern sich schnell, also Up-To-Date bleiben
Auch die Technologien hinter den Anwendungen ändern sich im Monatstakt. Auch hier sollte ein Kreativer up-to-date bleiben und dies in der Arbeit berücksichtigen. Besonders die Betriebssysteme Android und iOS ändern sich ständig.
Der Experte muss aus Sicht der Anwender handeln
Als Kreativer kann man schnell aus seinen eigenen Erfahrungen schöpfen, und wird oftmals den Nutzen für den Kunden nicht berücksichtigen. Der Experte weiss eventuell, das bei einer bestimmten Aktion, etwas auf dem Bildschirm passiert. Der normale Nutzer mag sich damit eventuell nicht auskennen.
Daher sollte man seine eigene Sichtweise zurückstellen und die Sichtweise des Nutzers in den Vordergrund stellen.
Branding
Wie im Web auch, muss im Bereich Mobile das Branding auch stimmig sein.
Für die gleichen Buttons (Tasten) sollte man also die gleiche Beschriftung und auch die gleichen Farben angeben.
Gemeinsame Sprache finden
Die Menschen die das Feedback geben werden, kennen viele Begriffe, die ein Kreativer verwendet nicht. Umgekehrt mag ein Entwickler andere Wörter nutzen, als ein Designer.
Man sollte sich also mit den Projektteilhabern auf einfache Begriffe einigen, welcher jeder mit der gleichen Sache assoziiert. Nicht jeder weiss was ein UI, UX, Material Design, Flat Design oder eine Customer Journey Map ist. Umgekehrt kann es sein, dass der Kreative nicht weiss, was eine API, ein Call-To-Action oder ein Sprint ist.
Durch Nutzung der gleichen Sprache, kann man die Zusammenarbeit vereinfachen und mögliche Missverständnisse vermeiden.
Teamarbeit wertschätzen
Eine gute Nutzeroberfläche kann nicht in Isolation entstehen. Verschiedenste Abteilungen, Test-Nutzergruppen, Entwickler und in manchen Fällen Mitarbeiter und Manager auf Kundenseite, müssen zusammenarbeiten, um ein gutes Ergebnis zu kommen.
Hier benötigt es sehr viel Interaktion mit diesen Gruppen/ Menschen. Dabei sollten jedoch immer die Wünsche und Bedürfnisse der Nutzer im Vordergrund stehen.
Testing nicht vernachlässigen
Im Bereich Web lassen sich Photoshop Designs schnell überprüfen. Da das Gerät auf welchem man zeichnet und das Gerät auf welchem das Bild angezeigt wird, in den meisten Fällen die Gleichen sind.
Mobile Anwendungen werden oftmals auch am PC erstellt. Hier benötigt es dann weitere Software, um diese auf dem Smartphone darzustellen. Hier eine solche Software: pixate.
Um hier nicht aus dem Konzept zu kommen, kann man die Bilder nacheinander für die verschiedenen Betriebssysteme erzeugen. Beispielsweise kann man mit Android oder iOS starten und nach der Fertigstellung der Bilder für das jeweilige Betriebssystem, geht man auf das nächste Betriebssystem über.
Fazit
Viele Kreative, welche in der Web Welt gross geworden sind, steigen in den Bereich Mobile ein. Wichtig ist jedoch zu verstehen, das die Ansätze unterschiedlich sind und sich daher auch die Arbeitsweise ändern muss.
Interessante Links:
So überzeugt Ihr Eure Nutzer
Bilder: Flickr.com/ Sonin/ gdsteam/ Wroblewski/ Mann/ Buttfield-Addison
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.
Schreibe einen Kommentar