10 Tipps für das User Interface Design mobiler Apps

10 Tipps für das User Interface Design mobiler Apps

Tipp 1: Konzentriert bleiben

Die besten mobilen Apps konzentrieren sich darauf, eine Sache sehr gut zu machen. Sie sollten in der Lage sein, den Zweck Ihrer Anwendung in einem Satz zu beschreiben, ohne auf „Details“ einzugehen. Benutzer sollten es starten, verwenden und dann damit innerhalb von Sekunden ihre Ziele erreichen können. Wenn Benutzer mehr als vier Menüebenen durchlaufen müssen, um eine App zu verwenden, wird sie schnell deinstalliert.

Tipp 2: Die Zurück-Taste sinnvoll nutzen

Unter Android sollte die vom System bereitgestellte Zurück-Schaltfläche es Benutzern ermöglichen, innerhalb der App zurückzukehren. Während die Zurück-Taste in iOS über die Software gesteuert wird, sollten Sie immer eine Zurück-Taste bereitstellen, und Benutzer sind grundsätzlich an die Zurück-Taste in der oberen linken Ecke gewöhnt. Wenn Ihre App die Erwartungen der Benutzer erfüllen soll, ist es wichtig, dass das herkömmliche Verhalten und die betriebssystemspezifische Platzierung der Zurück-Schaltfläche eingehalten werden.

Tipp 3: Berücksichtigen Sie das Verhalten von Soft-Tastaturen

Die meisten mobilen Anwendungen erfordern Tastatureingaben auf einem oder mehreren Bildschirmen. Leider berücksichtigen viele Designer nicht, wie die Benutzeroberfläche aussieht, wenn die Bildschirmtastatur aktiviert wird. Achten Sie beim Testen darauf, dass auf dem Bildschirm genügend Platz vorhanden ist, damit die Benutzer wissen, was sie tun, auch wenn die Bildschirmtastatur aktiviert ist.

Tipp 4: Durchdachte leere Platzhalter

Wenn Ihre Anwendung nur wenige Dateneingabefelder hat, ist die Anzeige einer leeren Eingabeaufforderung benutzerfreundlich und kann dazu beitragen, dass die Anwendung übersichtlicher aussieht. Wenn Ihre Anwendung über viele Dateneingabefelder verfügt, kann die Verwendung von Platzhaltern anstelle von Beschriftungen sehr unübersichtlich werden. Sobald der Benutzer Informationen in das Eingabefeld eingibt, muss er diese erraten, es sei denn, sie sind selbsterklärend.

Tipp 5: Neue Features herausfordern

Beim bisherigen Anwendungsdesign konzentrierten sich Softwareentwickler darauf, ihren Programmen so viele Funktionen wie möglich hinzuzufügen. Ihr Erfolg wird dadurch gemessen, dass sie über mehr Merkmale und Funktionen verfügen als die Konkurrenz. Die mobile Revolution hat das geändert.
In einer Desktop-Anwendung würde eine weniger häufig verwendete Funktion einem Untermenü hinzugefügt, für erfahrene Benutzer könnte diese Funktion jedoch eine gute Idee sein, da sie Ihre Anwendung von denen der Konkurrenz abhebt. In einer mobilen App kann eine nicht besonders nützliche Funktion dazu führen, dass die Benutzeroberfläche unübersichtlich und schwer zu verwenden ist.

Tipp 6: Platzieren Sie die Tabs an der richtigen Stelle

Unter iOS sieht die primäre Tab-Navigation nicht wie Tabs aus. Es handelt sich dabei um Symbole am unteren Bildschirmrand, mit denen Benutzer zwischen den Hauptfunktionen der App wechseln können. Die meisten iOS-Benutzer sind es nicht gewohnt, dass diese Funktion oben im Fenster angezeigt wird, Android-Benutzer sind jedoch daran gewöhnt. Unter Android werden Registerkarten normalerweise oben in der App angezeigt und können durch Wischen nach links oder rechts umgeschaltet werden.
Der entscheidende Punkt hierbei ist, dass Sie diese unter iOS und Android an unterschiedlichen Stellen platzieren müssen, wenn Ihre App für die Navigation zu den Hauptfunktionen Ihrer App auf eine einzige Registerkarte angewiesen ist.

Tipp 7: Auf die Buttongröße achten

Im einfachen Design besteht die Tendenz zu sagen, dass wir etwas hinzufügen können, indem wir die Größe der Schaltfläche oder der Schriftart geringfügig reduzieren. Das ist gefährlich und verheerend!!! Wer schon einmal auf seinem Smartphone eine Webseite geöffnet hat, die nicht für mobile Geräte optimiert war, weiß, wie frustrierend es ist, wenn man auf einen Hyperlink nicht klicken kann. In einer App ist es ein größeres Problem, wenn der Benutzer nicht die Möglichkeit zum Vergrößern hat.
Wählen Sie die Schaltflächen groß genug, damit sie bequem verwendet werden können, und testen Sie Ihre App auf Geräten mit kleinem Bildschirm wie dem iPhone 4, um sicherzustellen, dass sie bequem zu verwenden ist.

Tipp 8: Überlegen Sie sich die Platzierung der Schaltflächen

Hält ein Nutzer das Smartphone in der Hand, ist die untere Hälfte des Bildschirms bequem mit dem Daumen erreichbar. Rechtshänder können die untere rechte Ecke erreichen, während Linkshänder die untere rechte Ecke erreichen können.
Bedenken Sie dies, wenn Sie es mit einer Hand bedienen möchten.

Tipp 9: Geben Sie die erforderlichen Informationen zeitnah weiter

Überlegen Sie bei jeder Eingabeaufforderung an Ihre Benutzer, welche Informationen der Benutzer benötigt, um eine Entscheidung über die auszuführende Aktion zu treffen. Wenn Ihre Benutzeroberfläche diese Eingabefelder nicht an derselben Stelle bereitstellt, muss der Benutzer möglicherweise abbrechen und zur vorherigen Seite zurückkehren, um eine Entscheidung zu treffen.
Reduzieren Sie den Aufwand für den Benutzer und stellen Sie die erforderlichen Informationen an der richtigen Stelle bereit, wenn Benutzer Entscheidungen treffen müssen.

Tipp 10: Achten Sie auf Ihre Bildauflösung

Moderne Smartphones haben erstaunlich hohe Auflösungen und sehen einfach großartig aus. Wenn Sie für die Symbole weiterhin Bilder mit niedriger Auflösung verwenden, wird Ihre App leider zackig und verschwommen aussehen, insbesondere wenn das Betriebssystem Schriftarten und Farbverläufe rendert. Stellen Sie sicher, dass Sie eine Auflösung von 264 ppi oder höher verwenden. Das Bild sollte dann scharf und sauber aussehen. Auf Tablets mit höheren Auflösungen als dem Retina-iPad (wie dem Nexus 10 mit 300 ppi) sehen 264-ppi-Bilder immer noch scharf und klar aus.
Besser ist die Verwendung von Vektorgrafiken, die auf jede beliebige Auflösung skaliert werden können.

abschließend

Die Benutzeroberfläche kann über Erfolg oder Misserfolg einer mobilen App entscheiden. Es gibt viele Beispiele für mobile Apps mit gutem UI-Design, die schnellere Apps mit mehr Funktionen, aber durchschnittlichem UI-Design schlagen. Wenn Ihre App für die Benutzer leicht zu erlernen und schnell zu verwenden ist, hat sie größere Erfolgschancen auf dem überfüllten App-Markt.

Über den Autor:
David Talbot ist derzeit Chefarchitekt der EverBank. Mit über 15 Jahren Erfahrung in der Softwarebranche und Berufserfahrung im Erstellen von Rich-UI-Webanwendungen. Er ist außerdem Autor von Applied ADO.NET und einer großen Anzahl technischer Artikel. Die E-Mail-Adresse lautet [email protected]

<<:  So implementieren Sie die Eingabeaufforderung für das H5-Eingabefeld + die Eingabeaufforderung für das normale Textfeld

>>:  So verwenden Sie CSS, um ein kleines Bild herunterzuziehen und ein großes Bild und Informationen anzuzeigen

Artikel empfehlen

Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung

In unserem aktuellen Projekt müssen wir die Googl...

Grundlegende Referenztypen der erweiterten JavaScript-Programmierung

Inhaltsverzeichnis 1. Datum 2. RegExp 3. Original...

So verbinden Sie JDBC mit MySQL 5.7

1. Bereiten Sie zunächst die MySQL- und Eclipse-U...

Details zur Bündelung statischer Ressourcen ohne JavaScript

Inhaltsverzeichnis 1. Benutzerdefinierter Import ...

So konfigurieren Sie SSL für den Koa2-Dienst

I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...

Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls

Ich habe node.js zum Erstellen des Servers gewähl...

Praktische Aufzeichnung der MySQL 5.6 Master-Slave-Fehlerberichterstattung

1. Problemsymptome Version: MySQL 5.6, unter Verw...

So richten Sie Referer in Nginx ein, um Bilddiebstahl zu verhindern

Wenn die Bilder des Servers von anderen Websites ...

So verwenden Sie Nexus, um JAR-Pakete zu privaten Servern hinzuzufügen

Warum müssen wir einen privaten Nexus-Server erst...

Reflexion und Proxy in Front-End-JavaScript

Inhaltsverzeichnis 1. Was ist Reflexion? 2. Refle...

Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)

Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...