Haben Sie ein mobiles App-Projekt in Arbeit? Was ist dein Designplan? Haben Sie direkt ins Boot gesprungen oder angehalten, um die Erfahrung des Endbenutzers beim ersten Öffnen der App zu berücksichtigen?
Es lohnt sich, über eine Ästhetik nachzudenken, die sorgfältig durchdachte Benutzererfahrungstechniken beinhaltet. Viele der Konzepte, die wir beim Website-Design sehen, gelten auch für mobile Apps. Sie können jedoch eine etwas andere Form oder Form annehmen, um sich besser an die kleinere Bildschirmgröße anzupassen. Hier werden wir uns sieben großartige Optionen und Beispiele anschauen, die Sie für Ihr eigenes App-Design anwenden können.
1. Mutige, starke Typografie
Der einfachere Typ ist auf einem kleinen Bildschirm besser lesbar, insbesondere bei Gegenlicht oder bei ungünstigen Umgebungsbedingungen. Diese Tatsache allein trägt dazu bei, warum einfache Sans Serif-Typografie die Option für mobile Apps ist.
Während vor einigen Jahren noch dünn war, hat sich das Pendel geschwenkt, sodass sich Konstrukteure für dickere Hubbreiten und mutigere Optionen entscheiden. Auch die Größe ist wichtig. Weitere Apps verwenden Begrüßungsbildschirme mit übergroßen Schriftarten oder Startbildschirme mit Fettdruck vor einem kontrastierenden Hintergrund, um Benutzern die Einbindung und Navigation durch die App zu erleichtern.
Das Schöne an diesem Trend ist, dass die Lesbarkeit im Vordergrund steht. (Was ist der Sinn des gesamten Textes, richtig?) Der eine Teil dieses Trends, vor dem man vorsichtig sein sollte, besteht darin, zu viele Großbuchstaben oder Phrasen zu verwenden. Während alle Großbuchstaben eine gute Option für ein einzelnes Wort sein können, z. B. "SONNIG"? In der obigen Weather Channel-App kann dies bei längeren Textblöcken mühsam werden.
Um diesen Trend zu nutzen, bedenken Sie zwei Dinge:
- Typografie und Sprache sollten einfach sein.
- Der Kontrast zwischen Hintergrund und Beschriftung sollte intensiv sein, um die Lesbarkeit zu verbessern.
2. Schichten und Tiefe
Material Design wurde in diesem Jahr immer wieder als einer der Top-Designtrends hervorgehoben. Und es gibt gute Gründe.
Erstens ist es die Design-Plattform, die Google übernommen hat. Wenn ein Riese mit etwas gefüllt ist, werden sicher viele andere folgen. (Und sie sind es.) Zweitens handelt es sich um ein äußerst intuitives Konzept mit einem einfach zu bedienenden Interface-Design, das auch für die Augen angenehm ist.
Einer der auffälligsten Teile von Material Design besteht in der Erstellung von Ebenen, die Benutzern die Interaktion mit dem Design erleichtern. Es ist das eine Material, das in Schnittstellen überall auftaucht, auch in Apple-Apps.
Der Trick, damit diese Schichten funktionieren, ist subtil. Layer stapeln sich mit kleinen (fast unsichtbaren, aber natürlich aussehenden) Schatten, um Elemente zu unterscheiden. Diese Schichten sind auch Interaktionshinweise. Die Basisebene oder der Hintergrund ist das Informationsportal und die obersten Ebenen enthalten Interaktionswerkzeuge.
Schauen Sie sich zum Beispiel Uber an. Die Karte befindet sich am unteren Rand des Bildschirms. Tippen Sie auf die Schaltfläche Abholort, um eine Adresse festzulegen, oder wechseln Sie zu den Adressebenen, um den Ort zu ändern. Jede Ebene bietet dem Benutzer mehrere Möglichkeiten, mit der App zu arbeiten.
3. Monotone Farbschemata
Die Verwendung einer einzelnen Farbe mit schwarzen und weißen Akzenten ist eine großartige Möglichkeit, um visuelles Interesse auf einem kleinen Bildschirm zu erzeugen. Entscheiden Sie sich für eine helle, gewagte oder ungewöhnliche Farboption, um sich besonders hervorzuheben. Oder bauen Sie mehrere solcher Optionen in die Benutzeroberfläche ein und geben Sie den Benutzern die Kontrolle über das Farbschema.
Genau das macht die oben beschriebene Streaks-App. Das Konzept ist so einfach: Setzen Sie sich Ziele und die App erinnert Sie daran, die Aufgaben abzuschließen. Der Benutzer kann eine Hintergrundfarbe basierend auf der Aufgabengruppe festlegen, und einfache Benachrichtigungen erinnern Sie an Dinge, die Sie tun sollten.
Die Farbe, die Ikonographie und der einfache Typ sind eine auffallende Kombination, die leicht zu lesen und zu bedienen ist. Das Design ist so elegant, dass Sie fast mehr Aufgaben in Ihre To-Do-Liste aufnehmen möchten.
4. Konzentrieren Sie sich auf Mikrointeraktionen
Apropos Interaktionen: Jede gute App beinhaltet nahtlose Mikrointeraktionen. Mikrointeraktionen sind kleine Hinweise, die möglicherweise unbemerkt bleiben, aber ein wesentlicher Bestandteil der Interaktion von Benutzern mit bestimmten Apps sind.
Mikrointeraktionen sollten so gestaltet werden, dass sie dem Benutzer helfen, etwas zu tun. Von einer SMS-Benachrichtigung über einen Alarm bis zu einem Social Media? Diese kleinen Dots sind überall. Und sie sollten eines tun: den Benutzer erfreuen.
In den einfachsten Ausdrücken neigen Mikrointeraktionen dazu, drei Dinge zu tun:
- Feedback mitteilen, wie etwas auf Instagram gefällt
- Sehen Sie eine Aktion, das gleiche? das Herz wird rot
- Hilft dem Benutzer, etwas zu sehen oder zu sehen, z. B. eine Benachrichtigung, dass Ihr Bild gefallen hat
5. Karten, Karten und mehr Karten
Während die Kartenrevolution mit Pinterest begonnen haben könnte, gewinnt die Ästhetik dank des Materialdesigns und der Übernahme durch massive Websites wie Facebook und SoundCloud (oben) weiter an Bedeutung.
Karten sind eine großartige Möglichkeit, große Mengen an Inhalten so zu organisieren und zu entwickeln, dass sie leicht verdaulich sind. Jedes Element ist eine Einheit, die im Entwurf ein einziges Element ausführt. Das Schöne an diesen Einheiten ist, dass jede einzelne etwas anderes machen kann.
Eine Karte kann es Ihnen also ermöglichen, ein Video anzusehen, und die nächste Karte in der Sequenz verweist auf eine andere App, und die Karte enthält danach einen langen Textblock, den Sie lesen können. Ein weiterer Vorteil von Karten, insbesondere in Apps, ist die einfache Handhabung. Bei den meisten Apps wird der Bildschirm für zwei Karten, z. B. SoundCloud, in zwei Hälften geteilt oder es wird eine Karte pro Bildschirmformat verwendet, sodass Sie durch Berührungen zum gewünschten Element gelangen. (Keine Sorge über "dicke Finger" hier!)
6. Einfache Navigation
Versteckte Menüs, Pop-Out-Navigation und große Tasten sind eine große Sache. Die Anzahl der Apps mit Home-Bildschirmnavigation nimmt ab. Fast jeder bewegt sich zu einem verborgenen Stil, um jeden Zentimeter wertvollen Platz auf dem Bildschirm zu nutzen.
Und die Benutzer scheinen nichts dagegen zu haben.Sie haben die Idee einer Schaltfläche übernommen, um die Navigation ziemlich einfach anzuzeigen. Der Trick besteht darin, sicherzustellen, dass dieses Navigationselement beim Anzeigen sehr funktionsfähig ist.
Slack ist eines der besten Beispiele dafür. Es hat tatsächlich eine Navigation, die links und rechts vom Bildschirm erscheint. Die Hauptfunktionen der App werden auf der rechten Seite (oben) angezeigt, die für Ihren Kanal spezifische Navigation befindet sich jedoch im linken Menü.
7. Berührungen der Animation
Animationsblitze sind die besondere Note, durch die sich Ihre App außergewöhnlich anfühlt. Animationen können die Benutzerfreundlichkeit erhöhen, den Benutzer in den Mittelpunkt stellen und sind ein Genuss.
Da Sie nicht unbedingt berücksichtigen können, wo Benutzer auf eine App zugreifen und welche Art von Internetverbindung sie möglicherweise haben, ist es wichtig, Animationen zu erstellen, die klein und leicht sind und nicht auf Konnektivität angewiesen sind.
Strava ist voller winziger Animationen. (So klein, dass Sie sie vermissen könnten, wenn Sie nicht aufpassen.) Zwischen den Bildschirmen gibt es coole Übergänge, z. B. die oben gezeigte Herausforderungsoption. Zu den Kartenpunkten gehört eine pulsierende Animation, und Sie können tatsächlich beobachten, wie sich Ihr Punkt auf Pfaden bewegt, während Sie die Aktivität nachverfolgen.
Fazit
Wenn Sie nach neuen Wegen suchen, um eine mobile App zum Leben zu erwecken, schauen Sie sich zuerst die digitalen Designtrends des Tages an und überlegen Sie, wie Sie sie in einem kleineren Maßstab anwenden können. Was Sie vielleicht überraschen könnte, ist, dass das Denken kleiner ist und das größere Design (in Bezug auf den Umfang) umfasst.
Welche Trends im App-Design sind Sie am meisten verliebt? Gibt es andere Trends, die Sie einfach weggehen möchten? Sag mir auf Twitter (Tag @carriecousins und @designshack), ich suche immer nach neuen Ideen, die ich ausprobieren kann? und vermeiden.