Wie designt man erfolgreiche Apps?

Dank der immer besseren Bandbreite im mobilen Netz ist heute eine dauerhafte Verbindung mit dem Internet möglich. Für viele Unternehmen ist dies ein Grund, eine App für die Kunden zu entwickeln.

Was macht eine gute App aus? Eine gute App muss zuerst einen bestimmten Zweck erfüllen. Eine einfache Bedienung bringt Geschwindigkeit und spart Zeit. Außerdem sieht eine gute App ansprechend aus und fühlt sich gut an. In dieser Arbeit werde ich das Thema, wie man erfolgreiche Apps designt, näher erläutern.

Details sind wichtig

Farben

Im App-Design spielen Farben eine große Rolle.  Jede Farbe besitzt eine eigene Wirkung und transportiert eine Botschaft.  Eine gute Farbkombination erleichtert nicht nur die Orientierung. Sie hilft auch den Nutzern, Entscheidungen zu treffen.

Im allgemein wählt man eine Schlüsselfarbe aus, um die Interaktivität der App anzuzeigen. Man muss sicherstellen, dass die anderen Farben nicht damit konkurrieren. Hier gebe ich einige Tipps für die Farbkombinationen, für solche User, die bisher noch keine oder wenige Erfahrungen mit Farben haben. Man soll am besten mit wenigen Farben beginnen und nicht mehr als zwei bunte Farben verwenden. Da man unbunte Farben wie Schwarz, Weiß oder Grau reibungslos mit allen bunten Farben kombinieren kann, ist es eine gute Idee, unbunte Farben in die Farbkombination zu integrieren.

Für die Zuteilung der Farben empfiehlt sich die 60-30-10-Regel (sieh Abbildung unten). Die Hauptfarbe erhält 60 Prozent der Gesamtfläche der App. Die zweite Farbe, die als Kontrast zur Primärfarbe dient, nimmt 30 Prozent Anteil ein. Die restlichen 10 Prozent Anteil sind für eine Farbe bestimmt, die Lebendigkeit in die App bringt und Akzente setzt.

Regel

Abb.: Ein Beispiel für die 60-30-10-Regel Quelle: App-Design

Manche Menschen sehen Farben anders. Bei der Verwendung von Farben muss man auf Farbenblinde achten. Jeder zehnte Mensch findet es schwierig, Rot von Grün oder Blau von Orange zu unterscheiden. Die Verwendung dieser Farbkombinationen sollte vermieden werden. Eine alternative Maßnahme kann etwa sein, dass neben Farben zusätzlich noch Symbole verwendet werden, wie  Abb. 3 zeigt.  Die Farben in eine Schwarz-Weiß-Version zu konvertieren ist eine Möglichkeit, um  zu überprüfen, ob sich das Design für Farbenblinde eignet.

Unterschiedliche Kulturen nehmen Farben unterschiedlich wahr. So signalisiert z.B. die Farbe Rot in manchen Kulturen eine Gefahr, aber in anderen hat Rot eine positive Bedeutung.  Wenn eine App sich an ein internationales Publikum richtet, muss man diesen Aspekt berücksichtigen.

Hier sind ein paar Links, die bei den Farben weiterhelfen:

Einsatz von Icons

Icons sind kleine Symbole, die unabhängig von Sprache und Kultur verständlich sind.  Sie lassen die App freundlich und professionell erscheinen. Wenn man einen Blick auf einen Bildschirm wirft, erkennt man Icons schneller als den umgebenden Text. Daher eignen sich Icons sehr gut für das App-Design.

Icons sollen einfach und schematisch gestaltet werden.  Durch viele Effekte für ein Icon benötigen die Nutzer mehr Zeit, um das Icon zu verstehen. Eine einheitliche Größe kann der Entwickler einfacher umsetzen. Es ist empfehlenswert, Icons zuerst in Schwarzweiß zu gestalten, um zu testen, ob es funktioniert. Funktioniert ein Icon in Schwarzweiß, funktioniert es auch in Farbe. Bei der Verwendung von Farben sollte man einen hohen Kontrast, am besten einen Hell-Dunkel-Kontrast verwenden. Wenn die Farbe des Hintergrunds und die des Icons nahe beieinanderliegen, kann der Nutzer das Icon schlecht  erkennen.

Um ein Icon intuitiv zu gestalten, greift man  am besten auf ein reales Objekt zurück und nutzt dies als Symbol für eine Aktion. Es ist darauf zu achten, dass dieses Objekt die gewünschte Botschaft vermittelt, damit der Nutzer diese Botschaft einfach wiedererkennt. Bei komplexen Icons ist ein zusätzliches  Text-Label notwendig.  Icons sollen nach Ähnlichkeit oder Funktionalität gruppiert werden. Je näher diese sich beieinander befinden, desto leichter fällt es dem Nutzer, die Zusammenhänge auf einen Blick zu erfassen und zu ordnen.

Die richtige Auflösung und Größe

Die Gestaltung einer App ist wegen des eingeschränkten Platzes auf einem mobilen Gerät schwieriger als Webdesign. Der erste Schritt ist, dass man mit der kleinstmöglichen Größe von einem Dokument bzw. Artboard anfängt. Dadurch kann man viel Zeit sparen.

Die Abb. zeigt die Dokument- bzw. Artboard-Größe für die jeweiligen Geräte.

Folie1

Tabelle: Dokumentgröße für Android und Apple Quelle: App-Design

Zum Aufbau und zu Strukturen von Apps findet man weitere Informationen auf folgendem Link: https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ .

Achte auf Usability

Usability ist ein Qualitätsmerkmal für eine gute App. Eine hohe Usability entspricht einer einfachen Bedienung der Benutzer­oberflächen. Je höher die Usability, desto höher die Kundenzufriedenheit. Die Nutzer sind begeistert, wenn sie die App nutzen und genießen das Produkt. Entwickler profitieren auch von einer guten Usability. Entwicklungszeit und Kosten können reduziert werden.

Eine klar beschriebene Zielgruppe zur Erhöhung der Usability

Eine App ist immer nur für einen bestimmten Personenkreis, niemals für alle Nutzer, gedacht. Ein Designer muss genau wissen, wer seine Zielgruppe ist und was die Nutzer von seiner App erwarten. Dies ist eine wichtige Voraussetzung für erfolgreiche Apps. Personas  sind praktische Helfer, um sich die Zielgruppe vorzustellen und die Bedürfnisse der Nutzer zu bestimmen, wie z.B. Altersklassen, Erfahrungen mit Apps, Interesse der Nutzer usw.

Effektivität der App für den User

Für den Nutzer ist es wichtig, zu wissen, dass er mit dieser App sein Ziel ohne großen Aufwand erreicht. Eine App soll so gestaltet werden, dass sie dem Nutzer intuitiv oder grafisch signalisiert, was er/sie als nächstes tun soll oder wo er/sie hingehen soll.

Prototyping

Beim  Prototyping werden folgende drei Phasen unterschieden:

  • Entwurfsskizzen

Die erste Konkretisierung findet idealerweise auf Papier statt, auch wenn man in einem Team arbeitet. Es gibt viele Apps, mit denen man einfache Layouts erstellen kann, wie   etwa Adobe Comp CC.

  • Wireframes

Die Skizzen werden durch Wireframes konkretisiert. Die Inhalte und die Funktionen werden hier beschrieben und miteinander verknüpft. Jedes Nutzerszenario sollte abgebildet werden, auch Sonderfälle wie Fehlermeldungen.

Hier ist eine tolle App zum Testen.  Der Link von POP: https://popapp.in .

  • Design-Mock-ups

Ein Mock-up wird basierend auf fertig ausgearbeiteten Wireframes erstellt. Designer benötigen dabei eine konzeptionelle Grundlage, um visuelle Konzepte zu liefern.

Wireframe- und Mock-up-Tools:

Fazit

Eine erfolgreiche App sollte ansprechend designt sein. Man sollte sich ausreichend Zeit nehmen, um Apps zu schaffen. Um eine erfolgreiche App zu designen und entwickeln, sollte man die Kundenbedürfnisse kennen und dafür Statistiken, Umfragen usw.  nutzen. Die Konkurrenzprodukte zu analysieren ist ebenso wichtig.

 

Quelle:

App-Design: alles zu Gestaltung, Usability und User Experience / Jan Semler , Bonn: Rheinwerk Computing, 2016, 1.Auflage

http://www.creativebloq.com/app-design/16-killer-design-tips-creating-mobile-apps-11513821  Letzte Abrufen: 18.06.2017

https://de.yeeply.com/blog/app-design-die-bedeutung-der-farben/  Letzte Abrufen: 18.06.2017

Abbildung Quelle:

App-Design: alles zu Gestaltung, Usability und User Experience / Jan Semler , Bonn: Rheinwerk Computing, 2016, 1.Auflage, S398

Tabelle Quelle:

App-Design: alles zu Gestaltung, Usability und User Experience / Jan Semler , Bonn: Rheinwerk Computing, 2016, 1.Auflage, S326

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s