Ein Rant gegen hübsche App-Designs

Veröffentlicht: 2022-03-11

„Hütet euch vor der Eitelkeit, die um ein Kompliment wirbt oder sich davon nährt.“ –Chalmers

Ich surfe mit meinen Hype-zerstörenden, kritischen UX-Ray-Augen auf einigen Design-Inspirationsseiten :) Ich komme oft mit Rauch aus meinen Ohren. Wie der Titel schon sagt, ist dies ein Rant, aber nimm es nicht zu ernst. Ich versuche, einen Punkt zu machen.

Ja, ich weiß, dass einige dieser Design-Präsentationsseiten nicht unbedingt für reale Produkte gedacht sind, aber ich sage trotzdem, dass sie einen durchdachten Designansatz widerspiegeln müssen, vor allem durch die Hauptfrage „Für wen ist das? “, „Wie werden die Leute mein Produkt nutzen“ und „Ist es tatsächlich nutzbar?“.

Oberflächliche App-Designs, die den neuesten Trends folgen und grundlegende Usability-Konventionen, UX-Best-Practices und grundlegende Prinzipien des Interaktionsdesigns eklatant ignorieren, würden in der realen Welt höchstwahrscheinlich scheitern! Glücklicherweise gehen sie normalerweise nicht über das allgemein lächerliche, sich selbst zur Schau stellende Fantasieland auf Dribbble und Behance hinaus.

Leider dienen diese „Konzeptdesigns“, ein einzelner Bildschirm in einer imaginären App, nur dazu, Designer als Künstler zu bezeichnen – als Heuchler, die sich nur um das Furnier, schöne Farben und Schriftarten kümmern. Heutzutage muss jedes App-Design weit darüber hinausgehen.

Ich rede von UX.

Wenn Menschen in der realen Welt versuchen würden, diese Apps tatsächlich zu nutzen, garantiere ich, dass mehr als 50 % Schwierigkeiten damit hätten und anschließend verwirrt aufgeben würden.

Wetter-App - schlechtes App-Design
Wer braucht nicht noch eine Wetter-App? Es gibt keine Hinweise für den Benutzer, wie er es verwenden soll. (Jona Dinges über Dribbble)

Digitale Produktdesigner, die ihr Geld wert sind und ihr Spiel verbessern wollen, wissen, dass es wichtig ist, ihr Ego vor der Tür zu lassen und sich von unnötigen Schnörkeln, eigennützigen öffentlichen Paraden und sinnloser Verführung des Publikums fernzuhalten. #UXFail!

Reise-App-Design - schlechtes App-Design
Keine noch so ausgefallene GIF-Animation kann ernsthafte Probleme mit der Benutzererfahrung mit einer schlecht gestalteten App beheben, wie z. B. versteckte gestische Interaktion, bedeutungslose Symbole oder kontrastarmer Text. (Reise-App von Arunraj auf Dribbble)

Aufgeben der Benutzerfreundlichkeit für Schmeichelei

Großartige Benutzererlebnisse sind ein Muss, wenn digitales Produktdesign auf dem Markt erfolgreich sein soll. Sicher, Ästhetik – gut aussehende und sich gut anfühlende Designs sind wichtig, aber sie sind nur der letzte Schliff, der ein brauchbares Produkt ergänzt, das auch Freude macht. Das Streben nach rein ästhetischer Perfektion bei Verzicht auf Usability ist letztlich ein Verliererspiel.

Wie Don Norman – der oft als „Guru der praktikablen Technologie“ bezeichnete – sagte: „Großartige Designer produzieren angenehme Erfahrungen.“

Angenehme Erfahrungen sind diejenigen, die am wenigsten Reibung verursachen und gleichzeitig flüssige, nahtlose Interaktionen und vorausschauende Erfahrungen liefern (dh Dinge wie durch Zauberei erscheinen lassen. Die richtigen Dinge, im richtigen Moment, auf die richtige Weise).

Der Weg dahin führt definitiv nicht dazu, etablierte Best Practices und Designkonventionen zu ignorieren und sich einfach auf die Fassade zu konzentrieren. Es ist offensichtlich, Dribbble stottert: 1) Sie verstehen Ihren Benutzer nicht und 2) Sie kopieren Modeerscheinungen.

Best Practices für das UX-Design mobiler Apps
Stellen Ihre Entwürfe diese Fragen?

Ignorieren Sie Konventionen auf eigene Gefahr

Designkonventionen, ob im digitalen Produktdesign oder im Industriedesign – zum Beispiel ein Auto oder Fahrrad – haben ihre Wurzeln im menschlichen Verhalten, in der Mechanik, der Physik, den Naturwissenschaften und umfangreicher Forschung. Sie folgen Best Practices und der menschlichen Erwartung, wie die Dinge funktionieren, weil wir an sie gewöhnt sind, weil wir diese Konventionen seit Äonen befolgt haben. Dies sind Konventionen, die durch Versuch und Irrtum erarbeitet wurden und sich im Laufe der Zeit als sehr effektiv erwiesen haben; ein bisschen wie Evolution.

Es ist tollkühn und etwas arrogant, Designkonventionen zu ignorieren oder zu verletzen. Sie sind grundlegend und dienen als Grundlage, von der aus wir dann innovativ sein können. Es geht darum, was erwartet wird. Ohne sie riskieren Sie, die Leute höllisch zu nerven. Stellen Sie sich vor, jedes Fahrrad, jeder Türgriff – oder die Pedale und das Lenkrad in jedem Auto – würden anders funktionieren, alles nur im Namen der „Innovation“.

Zwei Worte: totales Chaos.

Eine Benutzeroberfläche ist wie ein Witz. Wenn du es erklären musst, funktioniert es nicht.

Tipps und Tricks für das mobile UX-Design
Ein weiteres App-Design von Dribbble. (Aaron 1991 über Dribbble)

Beachten Sie die Heuristiken

Gut gestaltete Apps, die danach streben, benutzbare Produkte zu sein, folgen etablierten Designkonventionen, grundlegenden Usability-Richtlinien und Prinzipien des Interaktionsdesigns (unter anderem) und bestehen die heuristische Bewertung mit Bravour. („Heuristiken“, weil es sich um grobe Faustregeln handelt, nicht um spezifische Usability-Richtlinien.)

Damit App-Designs in der realen Welt gut funktionieren, sollten sie die 10 Usability-Heuristiken für das User Interface Design beachten, wie sie von der Nielsen Norman Group definiert wurden, einer führenden Stimme im Bereich User Experience seit 20 Jahren. Diese sind:

  1. Sichtbarkeit des Systemstatus
  2. Übereinstimmung zwischen System und realer Welt
  3. Benutzerkontrolle und Freiheit
  4. Konsistenz und Standards
  5. Fehlervermeidung
  6. Erkennen statt Erinnern
  7. Flexibilität und Effizienz der Nutzung
  8. Ästhetisches und minimalistisches Design
  9. Helfen Sie Benutzern, Fehler zu erkennen, zu diagnostizieren und zu beheben
  10. Verfügbarkeit von Hilfe (dies können „Quick Tours“ oder Walkthroughs sein)

Lesen Sie hier mehr über diese 10 allgemeinen Prinzipien für das Interaktionsdesign.

Verliebtheit im Namen der Innovation

Häufig werden App-Konzeptbildschirme von Designern entworfen, die nach vielen Likes auf Portfolio-Präsentationsseiten suchen, mit dem Ziel, sich ihren Weg in den Bereich der täglichen Hot Shots auf Dribbble zu bahnen. Ein paar ausgefallene, minimalistische UI-Designs sind nicht das Produkt. Es ist vergleichbar mit dem Entwerfen einer Autotür, ohne eine Vorstellung davon zu geben, wie der Rest des Autos aussieht oder wie es in einem realen Szenario funktioniert.

Best Practices für das Design mobiler Apps für das Design mobiler Benutzeroberflächen
Ein Trading-App-Design von Dribbble. Es bietet nicht nur ein, sondern zwei Menüs mit mysteriösen Symbolen und kontrastarmem Text.

Versteh mich nicht falsch! Designinnovation ist notwendig. Es ist gesund und entscheidend für jede Disziplin oder jeden kreativen Bereich, um zu gedeihen. Aber es sollte nicht zu Lasten einer guten UX gehen. Lassen Sie uns hier einen Unterschied machen und es Design-Experimente nennen. Unter der Einbildung eines sauberen, minimalistischen Designs, das lediglich anders und cool sein möchte, opfern viele der sogenannten innovativen Designs, die auf diesen Seiten zur Schau gestellt werden, die grundlegende Benutzerfreundlichkeit.

Benutzerfreundlichkeit 101

Usability, eine Grundlage für großartige Benutzererlebnisse, ist ein Qualitätsmerkmal, das bewertet, wie einfach Benutzeroberflächen zu verwenden sind. Das Wort Benutzerfreundlichkeit bezieht sich auch auf die Praktiken zur Verbesserung der Benutzerfreundlichkeit während des Designprozesses.

Ob eine App nützlich ist, wird sowohl in Bezug auf den Nutzen als auch auf die Benutzerfreundlichkeit definiert. Utility bietet Benutzern die Funktionen, die sie benötigen; Benutzerfreundlichkeit ist, wie einfach und angenehm diese Funktionen zu verwenden sind. Ausgefallene App-Designs, die diese Grundprinzipien der Benutzerfreundlichkeit ignorieren, sind daher per Definition nutzlos.

Es ist verständlich, dass Designer nach innovativen und interessanten Wegen suchen, um die Navigation ihrer App zu gestalten. Aber es gibt einen schmalen Grat zwischen dem Unerwarteten und dem Unbrauchbaren. Drei Dinge, die beim Navigationsdesign zu berücksichtigen sind, sind Konsistenz, Benutzererwartungen und kontextbezogene Hinweise. Es spielt keine Rolle, wie ausgefallen Ihr eCommerce-z. B. App-Konzeptdesign ist. Wenn Benutzer das Produkt nicht finden können, können sie es nicht kaufen.

Nützliches Design

Wie Steve Jobs sagte: „Es geht nicht nur darum, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.“

Er sprach über nützliches Design .

Wenn ein Designer zu sehr mit dem mentalen Modell einer Person herumspielt, wie die Dinge funktionieren sollten, wird die App scheitern. Wenn es eine große Diskrepanz zwischen dem mentalen Modell des Benutzers und dem konzeptionellen Modell gibt, ist die App ein Toast. Mentale Modelle sind, wie der Name schon sagt, konzeptionelle Modelle in den Köpfen der Menschen, die ihr Verständnis davon darstellen, wie Dinge funktionieren.

Eines der grundlegendsten Prinzipien des Interaktionsdesigns ist, dass eine Benutzeroberfläche Signifikanten haben muss, wenn sie nützlich sein soll. Wenn Benutzer keine visuellen Hinweise in der Benutzeroberfläche haben, die verfügbare Aktionen oder Gesteninteraktionen signalisieren, die ihnen zur Verfügung stehen – Signifikanten genannt –, ist Ihr Produktdesign DOA.

So sehr Sie als Designer auch von Ihrem Produkt betört sein mögen, die Benutzer legen viel mehr Wert auf die Nützlichkeit. Sie wollen Ihre App nicht lernen und sich nicht auf eine Entdeckungs- oder Experimentierreise begeben, um zu sehen, was funktioniert, indem sie versuchen, Dinge in der Benutzeroberfläche zu wischen. Wie Steve Krug, seit mehr als 20 Jahren Usability-Berater, in seinem Buch „ Don’t Make Me Think “ sagte: „[Usability] ist das übergeordnete Prinzip, der ultimative Tiebreaker bei der Entscheidung, ob ein Design funktioniert oder nicht.“

Design der Astrologie-App für mobile Apps
Wie benutzt man diese App? (Astrologie-App von Brandon Termini auf Dribbble)

Um sicher zu sein, wie Dieter Rams, ein legendärer deutscher Designer bei Braun in den 70er Jahren und eine Inspiration für alles, was mit Apple zu tun hat, sagte:

Die ästhetische Qualität eines Produktes ist entscheidend für seinen Nutzen, denn Produkte, die wir täglich benutzen, beeinflussen unsere Person und unser Wohlbefinden. Aber nur gut ausgeführte Objekte können schön sein.

Das Design muss also auf allen Ebenen funktionieren.

Minimalistisches Design für mobile Apps
Ein Braun-Radio, entworfen von Dieter Rams. Wahrer funktionaler Minimalismus.

Hier sind die 10 Gebote guter Gestaltung nach Dieter Rams:

Minimalismus im Design mobiler Apps

Denken wir daran, dass visuelles Design – die Ästhetik – nur ein Aspekt des UX-Designs ist. Es ist die letzte Schicht, die alles hervorheben sollte, was zuvor im UX-Designprozess stattgefunden hat, dh die Definition der Geschäftsziele, die Identifizierung des Kernbenutzers (Personas), Benutzerforschung, Skizzen, Ideenfindung, Wireframing, Mockups, Prototypen und Usability-Tests . Es ist das letzte Furnier, das die gesamte Benutzererfahrung in Einklang mit dem Design für Emotionen hebt.

Reduzieren Sie die geistige Anstrengung

Best Practices für das Design mobiler Apps
Die meisten Menschen hätten keine Ahnung, was die unbeschrifteten Symbole bedeuten, und der fehlende Kontrast in der Kopfzeile würde die Navigation für die meisten Benutzer unsichtbar machen. (E-Commerce-App Fancy)

Bei schlechtem Design in Aktion fordern Mr. und Ms. Designer die Menschen auf, vage Symbole und Symbolik zu entziffern und zu interpretieren, wodurch ihre kognitive Belastung (die Gesamtmenge an mentaler Anstrengung, die im Arbeitsgedächtnis verwendet wird) erhöht wird. Andererseits wird ein gutes User Experience Design die kognitive Belastung reduzieren. Diese Art von egoistischem Design – ja, ich war dort – wirft Straßensperren in den Weg der Menschen und erhöht Reibung und Frustration. Ist das wirklich das Ziel?

Design mobiler Apps mentale Modelle UI-Design
Was bedeutet „EIN und AUS“? Was machen die Symbole? Dieses Design fordert die Benutzer auf, zu viel zu interpretieren und zu lernen. (Stan Yakusevich auf Behance)

Designer müssen eine klare Kennzeichnung (Links und Schaltflächen) und offensichtliche Wegweiser (klare Navigation) bereitstellen, um den Benutzern zu helfen, eine mentale Karte der App zu erstellen und intuitiv zu erkennen, wo sich die Dinge befinden und wie sie zu verwenden sind. Die Navigation sollte klar, aufgabenorientiert und logisch sein (z. B. schlagen Bildschirmsteuerungen vor, wie sie zu verwenden ist), und ihre Position sollte durchgehend konsistent sein (z. B. in einer Menüleiste).

Machen Sie deutlich, wo Benutzer tippen sollten, wenn sie wischen können, und machen Sie die Ziele groß genug, um sie leicht antippen zu können. Fehler vermeiden. Lass die Leute nicht raten, was etwas bedeutet. Sei nicht faul. Vermeiden Sie Hamburger- und Kebab-Menüs (die drei Punkte), da sie die Navigation verdecken und Inhalte weniger auffindbar machen. Vermeiden Sie insbesondere Hamburger, die nicht einmal wie Hamburger-Menüs aussehen! Ja, der Platz ist begrenzt, aber es hat sich gezeigt, dass die Kombination aus Registerkarten (oben unten) und Hamburger-Menüs viel besser funktioniert als nur ein einzelner Hamburger.

Hamburger-Menü im Design der mobilen App
Hamburger-ähnliches Menü ganz oben. Unbeschriftete Symbole, die interpretiert werden müssen. (Buchhaltungs-App von xiaoniaojiu auf Dribbble)


beste mobile App-Designs
Sogar Uber ist ein großer UX-Täter in einer ansonsten gut gestalteten App. Kannst du das Hamburger-Menü sehen? Die meisten Leute würden es auch nicht.


Schlechtes Design der mobilen App
Turo ist ein weiterer großer Übeltäter mit seinen unbeschrifteten Symbolen in der Registerkartenleiste. Es gibt keinen Hinweis auf ihre Bedeutung.


Fehler beim Design mobiler Apps
Die meisten Menschen in der realen Welt hätten echte Schwierigkeiten, herauszufinden, wie man diese App benutzt. (Home Budgeting App von Tubik)

Es ist keine perfekte Welt

Wenn Ihr Produkt den Weg in die Hände der Benutzer finden würde, wären sie in der Lage, Dinge zu finden und es tatsächlich zu verwenden? Sie haben möglicherweise keinen Zugriff auf ein Super-Duper-Setup wie das, mit dem Sie diese Bildschirme entworfen haben. Denken Sie noch einmal über Benutzerfreundlichkeit und Zugänglichkeit nach (Sehbehinderung, körperliche Behinderung, kognitive Behinderung). Laut Volkszählungsdaten haben in den Vereinigten Staaten mindestens 19 % der Menschen eine Behinderung, und in weniger entwickelten Ländern ist der Prozentsatz wahrscheinlich höher. Wenn jemand mit weniger als perfektem Sehvermögen Ihre App in die Hand nimmt, könnte er sie verwenden?

Ist Ihr Design „fingerfreundlich“ oder buchstäblich umständlich zu bedienen? Wie sehr müssen sich Menschen anstrengen, um verschiedene Teile des App-Bildschirms zu erreichen? Ziehen Sie Benutzer-Task-Flows in Betracht, indem Sie umsetzbare Elemente unter die Fingerspitzen der Benutzer legen, anstatt sie um die vier Ecken des Bildschirms springen zu lassen? Ist das Design wirklich touchfähig? Haben Sie den verdeckten Bereich unter der Hand berücksichtigt, die das Handy hält?

Wie Luke Wroblewski in Designing for Large Screen Smartphones betont, haben Sie darüber nachgedacht, wie Ihre Designs auf größeren Bildschirmen funktionieren würden?

Besseres mobiles App-Design für bessere UX
Größere mobile Bildschirme erschweren das Erreichen bestimmter UI-Elemente.

Folgt Ihr Design wirklich den Empfehlungen der iPhone Human Interface Guidelines von Apple mit einer Mindestzielgröße von 44 Pixel Breite und 44 Pixel Höhe? Der Windows Phone UI Design and Interaction Guide von Microsoft schlägt eine Berührungszielgröße von 34 Pixel mit einer minimalen Berührungszielgröße von 26 Pixel vor.

Verlieben Sie sich nicht in den extrem minimalen Kontrast zwischen Text und Hintergrund oder winzigen unleserlichen Text, denn das macht Ihre Designs „angesagt, sauber und minimalistisch“.

UX-Design für mobile Apps
Aufgrund des fehlenden Kontrasts zwischen den Elementen fast nicht zu entziffern. Symbole an drei Stellen, einige unbeschriftet.


Mobiles App-Design schlechtes Design
Aufgrund des geringen Kontrasts ist die Navigation kaum lesbar. (Geschwindigkeitstracker-App von Rono auf Dribbble)


Bessere UX

Design der mobilen Spotify-App
Das App-Design von Spotify ist sauber und gut beschriftet. Seine Hauptfunktionen sind schnell verstanden. (Aber es gibt dieses lästige Kebab-Menü!)


UX-Design der mobilen Starbucks-App
Designer bei Starbucks werden nicht faul. Schau, kein Hamburger-Menü! Die Designer haben sogar auf Icons verzichtet und sich stattdessen für einfache Beschriftungen entschieden.


Gutes mobiles App-Design
Selbst wenn ein Designer mit Symbolen kreativ wird, gibt es kein Rätselraten, wenn sie klar gekennzeichnet sind. (App-Design von Toptal-Designer Mohammed Bilal)

Wir brauchen ein besseres Design

Was also ist gutes Design? Diese Diskussion könnte ein Buch füllen, aber im Allgemeinen ist „gutes Design“, wenn alles für den Benutzer dieses Designs zusammenkommt.

Das bedeutet, dass ein Design, um „gut“ und nützlich für die Benutzer zu sein, mehrere Ebenen und Faktoren berücksichtigen muss, auf denen es erfolgreich sein muss.

Designtrends kommen und gehen. Der durchschnittliche Designtrend bleibt nur ein oder zwei Jahre bestehen; Gute Usability, die Grundlage des UX-Designs, ist hier, um zu bleiben.

Produkte, die nach den sieben Faktoren einer großartigen UX entworfen wurden, werden garantiert jeden Designtrend überdauern. Designer, die auf hervorragende Benutzerfreundlichkeit, Best Practices für UX, Interaktionsdesignkonventionen und die Faktoren achten, die die Benutzererfahrung beeinflussen, werden eine größere Wirkung erzielen als diejenigen, die dies nicht tun. Am Ende des Tages werden sie belohnt und ihre digitalen Produkte werden auf dem Markt akzeptiert und erfolgreicher.

Interaktionsdesign für mobile Apps
Die sieben Faktoren, die die Benutzererfahrung beeinflussen. (von der Interaction Design Foundation)

Wenn Sie als Designer besser in UX werden wollen – um nützliche Mobil- und Desktop-Apps zu erstellen, nicht nur schöne –, investieren Sie etwas Zeit, um zumindest die Grundlagen von UX zu lernen. Beginnen Sie damit, UX-Blogs zu folgen, und abonnieren Sie Newsletter und Online-Publikationen wie Toptal Design Blog, UX Magazine, UX Matters, UserTesting, uxdesign.cc, UX Design Weekly oder die Interaction Design Foundation.

Lesen Sie Benutzerstudien, die mit lebenden, atmenden Teilnehmern – echten Menschen – durchgeführt wurden. Wie sie sagen, die Zahlen lügen nicht; alles andere sind Hypothesen und Annahmen.

Folgen Sie UX-Vordenkern auf Twitter. Lesen Sie UX-Artikel und Whitepaper, die Crème de la Crème sind The Nielsen Norman Group und Adaptive Path.

Medium ist eines meiner Lieblingsziele, um UX/UI-Designartikel online zu lesen. Designer auf der ganzen Welt nutzen es, um sich über Design, Benutzererfahrung, Benutzerfreundlichkeit und andere Themen im Zusammenhang mit der Erstellung und dem Bau großartiger digitaler Produkte zu informieren. Hier sind Designer, denen Sie auf Medium folgen können.

Lesen Sie einige der grundlegenden, klassischen Bücher, die jeder UXer, den ich kenne, in seinem Bücherregal hat, und behandeln Sie sie wie die heiligen Schriften.

  1. Don Normans wegweisendes Designbuch The Design of Everyday Things
  2. Don Normans emotionales Design: Warum wir alltägliche Dinge lieben (oder hassen).
  3. Don't Make Me Think von Steve Krug
  4. Lean UX von Jeff Gothelf: Anwendung von Lean-Prinzipien zur Verbesserung der Benutzererfahrung
  5. Usability Engineering von Jakob Nielsen
  6. Susan Weinschenks 100 Dinge, die jeder Designer über Menschen wissen muss

Lesen Sie informative Online-Ressourcen zu Usability-Richtlinien, Prinzipien des Interaktionsdesigns und Best Practices für UX: Studien, Whitepaper, Artikel usw.

  1. Erste Prinzipien des Interaktionsdesigns
  2. Vollständiger Satz von 2.397 Usability-Richtlinien (über mehrere Berichte hinweg) von der NNGroup
  3. 10 Usability Heuristiken für User Interface Design von der NNGroup
  4. Artikel des Baymard Institute: Baymard untersucht das Verhalten auf E-Commerce-Websites
  5. UX Mastery Artikel: Alles rund um UX

Und schließlich fügen Sie diese fünf UX-Podcasts zu Ihrer iTunes-Mediathek hinzu:

  1. UX Pod: Diskussionen mit UX-Designern und über Usability im Allgemeinen
  2. Inside Intercom: Interviews mit Top-Designern führender Unternehmen
  3. UX-Podcast für Menschen, die sich für die Balance zwischen Geschäft, Technologie und Benutzern begeistern
  4. UIE Podcast: Einblicke von User Interface Engineering in die Welt des Designs
  5. True North: Aufdecken von Designgeschichten mit Hervorhebung von Designtests und -forschung

• • •

Weiterführende Literatur im Toptal Design Blog:

  • UI-Design Best Practices und häufige Fehler
  • Leere Zustände – Der am meisten übersehene Aspekt von UX
  • Einfachheit ist der Schlüssel – Erforschung des minimalen Webdesigns
  • Heuristische Prinzipien für mobile Schnittstellen
  • Lesbares Design – Ein Leitfaden zur Web-Typografie