Eine Grundlage für Exzellenz schaffen: Die 9 Grundlagen von Intercom für großartiges Interaktionsdesign

Die Design-Community muss den Wert von Design nicht mehr beweisen, um einen Platz am Tisch zu bekommen. Designer haben bewiesen, dass Design eine zentrale Säule des Geschäftserfolgs sein kann. Aber sie haben auch etwas auf dem Weg verloren.

Designer haben ihre Insel verlassen, wo raffiniertes, aber ineffektives und unpraktisches Design gemacht wird. Sie haben funktionsübergreifende Beziehungen aufgebaut und arbeiten eng mit Partnern im gesamten Unternehmen zusammen. Sie verstehen mehr denn je, wer ihre Kunden sind und was ihnen wichtig ist. Sie entwerfen Systeme, keine Ziele. Und statt primär an Schnittstellen zu denken, denken sie an die Produktstrategie. Sie entwerfen für Geschäftsergebnisse.

Aber wenn Sie tief in all diese zusätzlichen Schichten von Bauprodukten eintauchen, vergisst man leicht, wie wichtig es ist, auch das festzunageln, worin Designer Experten sind: Interaktionsdesign, die Optimierung der Interaktionen zwischen Benutzer und Produkt.

Als wir dieses Problem in unserem eigenen Designteam erkannten, legten wir die Grundlagen für gutes Interaktionsdesign fest. Sie sind eine Erinnerung an die Dinge, die für uns zutiefst wichtig sind, aber manchmal vergessen werden.

Es handelt sich keineswegs um eine vollständige Liste, und da sie unsere Produktdesignprinzipien beinhalten, gelten sie nicht für alle Unternehmen. Dies sind Grundlagen, die uns bei Intercom am Herzen liegen. Aber hoffentlich können sie auch als Erinnerung für Sie dienen und Sie vielleicht sogar dazu anregen, über die Grundlagen des Interaktionsdesigns nachzudenken, die für Ihr Unternehmen wichtig sind.

1. Präsentieren Sie überall dasselbe Objekt in vertrauter Weise

Intercom kann sich mit seiner enormen Breite und Tiefe überwältigend anfühlen. Wir können es unseren Kunden erleichtern, indem wir die Kernobjekte im System (z. B. Konversationen, Benutzer, Nachrichten usw.) leicht erkennbar machen und dafür sorgen, dass sie sich überall gleich verhalten. Erkennen ist einfacher als Erinnern.

Tun
Standardmäßig wird ein Objekt überall gleich angezeigt. Wenn Sie einen starken Grund für eine Abweichung haben, sorgen Sie dafür, dass es sich vertraut anfühlt, und überlegen Sie, ob das Objekt an anderer Stelle im Produkt anders dargestellt werden muss.

Nicht
Nehmen Sie lokale Optimierungen vor, die sich an anderer Stelle nicht widerspiegeln oder mit anderen Kontexten inkonsistent sind. Erstellen Sie nicht mehrere ähnliche, aber leicht unterschiedliche Variationen desselben Objekts.

Fragen:

• Wie wird dieses Objekt an anderer Stelle im Produkt dargestellt?
• Können wir die gleiche Komponente hier wiederverwenden?
• Wenn nicht, wie können wir dafür sorgen, dass es sich vertraut anfühlt?
• Müssen wir es an anderer Stelle im Produkt aktualisieren?

2. Richten Sie eine Hierarchie in Ihrer Benutzeroberfläche ein

Durch die Einrichtung einer klaren visuellen Hierarchie können wir unseren Kunden helfen zu verstehen, wie das Produkt funktioniert, die Beziehungen zwischen verschiedenen Teilen, was wichtig ist und was nicht.

Tun
Verwenden Sie Platz, Typografie, Gruppierung und Einrückung, um die Hierarchie und die Beziehungen zwischen verschiedenen Teilen der Benutzeroberfläche klar zu kommunizieren.

Nicht
Verwischen Sie die Grenzen zwischen verschiedenen Hierarchieebenen, indem Sie keine unterscheidbaren Gruppen haben. Erstellen Sie nicht zu viele Boxen innerhalb von Boxen.

Fragen:

• Sind die Inhalte in klaren, unterscheidbaren Gruppen angeordnet?
• Gibt es genug Platz zwischen diesen Gruppen?
• Werden zusammengehörige Informationen gruppiert?
• Werden die richtigen Textstile verwendet, um die Informationshierarchie aufzubauen?

3. Erstellen Sie visuellen Rhythmus und Gleichgewicht

Machen Sie Ihre Benutzeroberfläche leicht scanbar, damit Kunden sie schnell verstehen können. Es ästhetisch ansprechend zu gestalten, kann ihre Wahrnehmung dessen, wie brauchbar es ist, verbessern.

Tun
Verankern Sie den wichtigsten Teil Ihrer Benutzeroberfläche und verwenden Sie unterschiedliche Stile und Layouts, um Ihr Design auszugleichen und das Scannen zu vereinfachen. Verwenden Sie ein Rastersystem und achten Sie genau auf die Ausrichtung.

Nicht
Legen Sie alles in einer flachen Liste an. Verwenden Sie keine zu langen Sätze oder Zeilen.

Fragen:

• Ist es einfach, das Design zu scannen und zu wissen, was der wichtigste Teil davon ist?
• Fühlt es sich optisch ausgeglichen an?
• Ist die Schnittstelle auf ein Grid-System ausgerichtet?

4. Verwenden Sie allgemein akzeptierte Muster und Interaktionen

Wir können unseren Kunden helfen, sich mit Intercom besser vertraut zu machen und es effizienter zu nutzen, indem wir die Menge an Interaktionsmustern begrenzen, die sie lernen müssen.

Tun
Verwenden Sie vorhandene Muster aus unserem Designsystem. Bevorzugen Sie gängige Designmuster für Interaktionen gegenüber cleveren, maßgeschneiderten Optimierungen. Befolgen Sie branchenübliche Interaktionsdesignprinzipien.

Nicht
Führen Sie ähnliche, aber unterschiedliche Variationen unserer bestehenden Designsystemmuster ein. Erstellen Sie keine benutzerdefinierten Muster, wenn es einen etablierten Industriestandard gibt. Missbrauchen Sie kein vorhandenes Muster.

Fragen:

• Kann hier ein bestehendes Designsystemmuster verwendet werden?
• Wenn nicht, wie sieht das branchenübliche Muster dafür aus?
• Wenn Sie denken, dass Sie ein neues Muster brauchen, haben Sie mit dem Design Systems Team und anderen Designern gesprochen? Kann dieses Muster in das Designsystem zurückgeführt werden, damit andere Designer es verwenden können?
• Ist klar, wie mit dem Muster interagiert werden kann?
• Gibt es ein klares Feedback, wenn Benutzer damit interagieren?

5. Verwenden Sie progressive Offenlegung

Durch die Verwendung von progressiver Offenlegung können wir Intercom für die Mehrheit unserer Kunden einfach machen und unseren fortgeschrittenen Kunden mehr Flexibilität ermöglichen.

Tun
Beginnen Sie mit einfachen Standardeinstellungen und offenbaren Sie nach und nach Flexibilität. Optimieren Sie für den häufigsten Anwendungsfall.

Nicht
Überwältigen Sie Kunden, indem Sie sofort volle Flexibilität zeigen. Gehen Sie keine Kompromisse beim häufigsten Anwendungsfall für Grenzfälle ein.

Fragen:

• Was ist der häufigste Anwendungsfall?
• Wie sollten die Standardeinstellungen lauten, damit die meisten Benutzer sie nicht ändern müssen?
• Wie können wir Informationen nach und nach offenlegen?
• Kompromittieren wir den häufigsten Anwendungsfall für einen Grenzfall?

6. Seien Sie klar und prägnant

Sprache ist der Schlüssel, um unseren Kunden zu helfen, zu verstehen, wie Intercom funktioniert. Zu viel Inhalt kann jedoch den gegenteiligen Effekt haben, da Kunden die Seite scannen, ohne sie zu lesen, und daher nicht das erreichen, was sie tun sollen.

Tun
Seien Sie klar und prägnant. Zeigen Sie bei Bedarf schrittweise Informationen an, indem Sie QuickInfos und Links zu Hilfedokumenten verwenden, um mehr zu erfahren. Verwenden Sie Illustrationen, um Ideen zu erklären. Bearbeiten Sie rücksichtslos.

Nicht
Verwenden Sie lange, detaillierte Inhalte, um zu erklären, wie etwas funktioniert. Überlegen Sie stattdessen, was es kompliziert macht, und beheben Sie das zugrunde liegende Problem. Vermeiden Sie es, in die Falle zu tappen, technisch korrekt, aber schwer verständlich zu sein.

Fragen:

• Ist es einfach zu scannen und zu verstehen, was es ist, ohne den gesamten Inhalt von Anfang bis Ende lesen zu müssen?
• Was wäre, wenn Sie die Hälfte des Inhalts kürzen müssten? Kannst du das tun, ohne den Sinn zu verlieren?
• Ist das Wertversprechen klar?
• Ist klar, was der Benutzer tun muss?
• Wird dies jemandem ohne vorherige Kenntnis des Inhalts klar sein?
• Was können wir visuell veranschaulichen statt inhaltlich zu erklären?

7. Berücksichtigen Sie Reaktionsfähigkeit und Geschwindigkeit

Leistung ist ein Merkmal, das sorgfältig abgewogen werden muss. Wenn es ignoriert oder falsch verwaltet wird, führt dies zu Unsicherheit und einer fehlerhaften Benutzererfahrung.

Tun
Geben Sie Benutzern sofortiges Feedback, wenn sie mit dem Produkt interagieren, und legen Sie Erwartungen in Bezug auf Wartezeiten fest.

Nicht
Vergessen Sie die Ladezustände.

Fragen

• Was passiert direkt nach der Interaktion mit der Benutzeroberfläche?
• Ist klar, dass die Aktion empfangen wurde und derzeit verarbeitet wird?
• Ist klar, wann die Bearbeitung abgeschlossen sein wird?

8. Führen Sie die Benutzer dahin, was sie als Nächstes tun sollten

Normalerweise beginnen wir mit dem Entwerfen für den glücklichen Weg, aber so werden die meisten Kunden ihn nicht zuerst erleben. Ohne klare Führung erreichen sie vielleicht gar nicht den glücklichen Weg. Hier kommt großartiges Interaktionsdesign ins Spiel.

Tun
Machen Sie deutlich, was Benutzer als Nächstes tun sollten, und machen Sie es einfach, dies zu erreichen. Berücksichtigen Sie insbesondere leere Zustände, Fehlermeldungen und Endzustände.

Nicht
Schaffen Sie keine Sackgassen, in denen Benutzer selbst herausfinden müssen, was als nächstes zu tun ist.

Fragen

• Was passiert, wenn Sie keine Daten zum Anzeigen haben?
• Was passiert, wenn ein Fehler auftritt?
• Ist klar, was der Benutzer als Nächstes tun sollte?

9. Achten Sie auf Zugänglichkeit

Obwohl wir noch keine Standards für Barrierefreiheit festgelegt haben, gibt es viele Dinge, die Sie tun können, um Ihr Design barrierefreier zu gestalten.

Tun
Verwenden Sie vorhandene Designsystemkomponenten, da diese barrierefrei gemacht werden. Verwenden Sie gut lesbare Textstile und -größen. Fügen Sie genügend Farbkontrast hinzu. Verwenden Sie Farbe nicht allein, um Bedeutung zu vermitteln.

Nicht
Führen Sie neue Farben oder Textstile ein, ohne mit dem Team von Design Systems zu sprechen. Vermeiden Sie die Einführung benutzerdefinierter Komponenten, da diese möglicherweise nicht zugänglich sind.

Fragen:

• Gibt es eine vorhandene Komponente, Farbe oder einen Textstil des Designsystems, die Sie verwenden können?
• Ist der Text gut lesbar?
• Gibt es genug Kontrast?
• Gibt es mehr als nur Farbe, die verwendet wird, um Bedeutung zu vermitteln?

Konzentrieren Sie sich auf unser Kernhandwerk

Während die Disziplin des Produktdesigns im Laufe der Jahre stark gereift ist, ist es wichtig, dass wir unser Kernhandwerk nicht vergessen oder herabsetzen. Eine verstärkte Konzentration auf Kunden- und Geschäftsanforderungen sollte keine Entschuldigung für schlechtes Interaktionsdesign sein. Designgrundlagen wie diese helfen dabei, eine Basislinie für die Qualität des Interaktionsdesigns festzulegen, ungeheure Fehler zu vermeiden und dienen letztendlich als Grundlage für den Aufbau exzellenter kundenorientierter Software.

Dies wurde ursprünglich als internes Dokument für unser Designteam geschrieben. Wenn Sie an weiteren Inhalten wie diesen interessiert sind, besuchen Sie unsere Produktdesignseite für weitere Inhalte und unsere offenen Stellen.