In der Softwarebranche herrscht eine gefährliche Diskrepanz. Der „Schöpfer“ (Entwickler/Designer) lebt in einer Blase technologischer Privilegien.

Gerät: MacBook Pro M3 Max (\€4.000).
Verbindung: Glasfaser (1 Gbit/s).
Bildschirm: 32-Zoll-4K-Monitor.
Umgebung: Ruhiges, klimatisiertes Büro.

Der „Verbraucher“ (Benutzer) lebt in der Realität.

Gerät: 3 Jahre altes Samsung Galaxy A12 (\€200).
Verbindung: Spotty 4G in einem fahrenden Zug.
Bildschirm: 6-Zoll-Bildschirm mit Rissen und Blendung durch die Sonne.
Umgebung: Lebensmittel tragen, Ablenkung durch Kinder.

Wenn Sie für die Umgebung des Schöpfers entwerfen, beeinträchtigen Sie die Erfahrung des Verbrauchers. In diesem Artikel wird Empathy Engineering vorgestellt: Die Disziplin, für den Worst-Case-Szenario zu bauen, nicht für den Best-Case.

Warum Maison Code darüber spricht

Bei Maison Code Paris operieren wir an der Schnittstelle von Luxus und Technologie. Wir haben zu viele Marken gesehen, die Millionen in die „Digitale Transformation“ investiert haben, nur um ein flaches Wachstum zu sehen.

Wir diskutieren dies, weil der ROI dieser Strategie oft missverstanden wird. Es geht nicht nur um „Modernisierung“, sondern um die Maximierung des Lifetime Value (LTV) jeder digitalen Interaktion.

Warum Maison Code über Empathie spricht

Wir sind Entwickler. Wir lieben High-End-Ausrüstung. Aber wir zwingen uns zu leiden. Wir haben eine „Testgeräteschublade“ voller alter Androids (Moto G, Pixel 3). Wir sehen die Website, die auf einem iPhone 15 mit 60 fps läuft, auf einem Moto G mit 10 fps. Wir diskutieren darüber, denn Leistung ist Gerechtigkeit. Wenn Ihre Website nur auf teuren Mobiltelefonen funktioniert, schließen Sie 50 % des Marktes aus. Das ist ein schlechtes Geschäft.

1. Das „Slow 3G“-Protokoll

Jeder Entwickler bei Maison Code muss dies einmal pro Woche tun.

Öffnen Sie Chrome DevTools.
Gehen Sie zur Registerkarte „Netzwerk“.
Wählen Sie „Drosselung“ -> „Langsames 3G“.
Laden Sie die Homepage neu. Das Ergebnis: Schmerzen. Sie sehen, wie das 5-MB-Heldenvideo einfriert. Sie sehen, wie die Schriftarten flackern. Sie warten 15 Sekunden, bis die Schaltfläche „Kaufen“ anklickbar wird. Die Erkenntnis: „Wir müssen dieses Image optimieren.“ Ohne den Schmerz gibt es keine Motivation zur Optimierung.

2. Der Batterievampir (Energieempathie)

(Siehe Dark Mode Aesthetic). Benutzer machen sich Sorgen um die Akkulaufzeit. Es ist der moderne Überlebensinstinkt. Wenn auf Ihrer Website im Hintergrund umfangreiche JavaScript-Animationen ausgeführt werden, wird das Telefon heiß. Die Batterie entlädt sich. Die Reaktion: Sie schließen den Tab. Im Idealfall geben sie Ihrer Website die Schuld. Realistisch gesehen haben sie einfach das Gefühl: „Das Internet ist heute langsam.“ Die Lösung:

Verwenden Sie „IntersectionObserver“, um Animationen anzuhalten, wenn sie sich außerhalb des Bildschirms befinden.
Spielen Sie Videos nicht automatisch ab, es sei denn, der Benutzer interagiert.
Respektieren Sie „Prefers-Reduced-Motion“.

3. Datenarmut (Die Kosten von Megabyte)

In den USA/EU haben wir unbegrenzte Datentarife. In Brasilien, Indien oder Nigeria sind Daten teuer. 1 GB Daten könnten 5 % eines Monatsgehalts kosten. Wenn Ihre Homepage 10 MB groß ist, kosten Sie den Benutzer buchstäblich Geld, nur um „Hallo“ zu sagen. Die ethische Berechnung: Ist dieses 4-MB-Bild den Preis für den Benutzer wert? Wenn es nur dekorativ ist, löschen Sie es. Wenn es sich um das Produkt handelt, komprimieren Sie es (WebP/AVIF). Respektieren Sie den Geldbeutel des Benutzers.

4. Zugänglichkeit ist Empathie (nicht Compliance)

Die meisten Unternehmen betrachten Barrierefreiheit (A11y) als rechtliche Checkliste. „Haben wir Alt-Tags? Ja. Wir werden nicht verklagt.“ Das ist die falsche Einstellung. Bei Barrierefreiheit geht es um Inklusion.

Der blinde Benutzer: Verwendet einen Bildschirmleser.
Benutzer mit eingeschränkter Motorik: Verwendet nur eine Tastatur (keine Maus).
Der farbenblinde Benutzer: Rot (Fehler) kann nicht von Grün (Erfolg) unterschieden werden. Der Business Case: 15 % der Bevölkerung haben eine Behinderung. Wenn Ihre Website barrierefrei ist, gewinnen Sie 15 % mehr Marktanteile. (Siehe ROI der Barrierefreiheit).

5. Kulturelle Empathie (Lokalisierung)

Empathie erstreckt sich auch auf die Sprache. Sie übersetzen Ihre Website ins Französische. „Jetzt kaufen“ -> „Acheter maintenant“. Aber rechnet man die Währung um? Zeigen Sie den Preis in Euro an? Berechnen Sie Zölle? Die „faule“ Lokalisierung: Google Translate verwenden und USD beibehalten. The Empathic Localization: „Wir sehen, dass Sie sich in Frankreich befinden. Wir haben die Mehrwertsteuer berechnet. Der Preis ist endgültig. Wir versenden mit Colissimo.“ Dies sagt dem Benutzer: „Wir verstehen Ihre Realität.“ (Siehe Borderless Commerce).

6. Der „Abgelenkte Eltern“-Test (kognitive Belastung)

Designer gehen davon aus, dass der Benutzer jedes Wort liest. Realität: Der Benutzer kocht das Abendessen, hält ein Baby und blickt auf den Bildschirm. Der Test: Können Sie den Bezahlvorgang mit einer Hand in 30 Sekunden abschließen? Wenn Sie danach fragen:

„Konto erstellen“ (Regeln zur Passwortkomplexität).
„Mädchenname der Mutter“.
„Umfrage: Wie haben Sie von uns erfahren?“ Du hast sie verloren. Die Lösung: Gast-Checkout. Apple Pay (Gesichtserkennung). Reibungsverluste zu beseitigen erfordert Einfühlungsvermögen für den Kontext des Benutzers.

7. Die Angst vor Formularen (Formulardesign)

Formulare sind stressig. „Habe ich meine E-Mail-Adresse richtig eingegeben?“ „Werden sie mich anrufen?“ Anti-Muster:

Überall Sternchen: „Telefonnummer *“. Warum brauchst du mein Telefon?
Aggressive Validierung: „UNGÜLTIGES FORMAT“ in Rot, bevor ich mit der Eingabe fertig bin. Empathisches Design:
Optionale Felder: Markieren Sie Felder als „Optional“, anstatt sie als erforderlich zu markieren.
Inline-Validierung: „Sieht gut aus!“ (Grünes Häkchen).
Eingabemaskierung: Formatieren Sie die Telefonnummer „(555) 123-4567“ automatisch während der Eingabe.

8. Der Status „Keine Daten“.

Designer entwerfen Bildschirme mit „Perfect Data“.

Profilfoto: Wunderschönes Model.
Dashboard: Voller Diagramme.
Rezension: 5 Sterne, langer Text. Realität: Der Benutzer hat sich gerade angemeldet.
Profil: Leerer grauer Kreis.
Dashboard: „Keine Daten gefunden“.
Rezension: Leer. Die Lösung: Entwerfen Sie den leeren Zustand. „Sie haben noch nicht bestellt. Hier ist eine Starteranleitung.“ Verwandeln Sie den leeren Zustand in eine Onboarding-Gelegenheit. Lassen Sie sie nicht in einem leeren Raum.

9. Der Fehlermeldungston

Wie sprechen Sie mit dem Benutzer, wenn etwas schief geht (404, 500, Zahlung fehlgeschlagen)? Technocrat: „Fehler 500: Datenbankverbindung abgelehnt.“ SQL-Ausnahme. **Empath**: „Ups!“ Bei uns ist etwas schief gelaufen. Wir wurden benachrichtigt. Bitte versuchen Sie es in 5 Minuten erneut. Beschuldigen Sie niemals den Benutzer („Ungültige Eingabe“). Nehmen Sie immer die Schuld auf sich („Das konnten wir nicht verstehen“). Sprache formt Emotionen.

10. Die „Falte“ ist tot (Scrolltiefe)

Kunden sagen oft: „Alles oberhalb der Falte platzieren!“ Empathie-Check: Auf Mobilgeräten ist die „Faltung“ winzig. 30 % des Bildschirms sind die URL-Leiste und die Softwareschlüssel. Wenn Sie ein Heldenbanner, einen Titel und einen Button in 400 Pixel stopfen, sieht es wie ein überfülltes Durcheinander aus. Empathieorientiertes Design: Lassen Sie den Benutzer scrollen. Scrollen ist natürlich. Es ist einfacher als Klicken. Fürchte dich nicht vor der Falte. Fürchte dich vor der Unordnung.

11. Ziele berühren (fette Finger)

Ich habe dicke Daumen. Die durchschnittliche Daumenberührungsfläche beträgt 44 x 44 Pixel. Wenn Sie einen winzigen „X“-Schließen-Button mit 20 x 20 Pixeln entwerfen, werde ich ihn vermissen. Ich werde auf die Anzeige dahinter klicken. Ich werde wütend. Die Regel: Mindestberührungsziel = 44 Pixel (Apple-Richtlinie). Fügen Sie anklickbaren Elementen Polsterung hinzu. Machen Sie es mir leicht, erfolgreich zu sein.

12. Der Farbenblindheitstest (Daltonisierung)

8 % der Männer sind farbenblind (Deuteranomalie). Wenn Ihr „Fehlerstatus“ nur roter Text ist, wird er möglicherweise nicht angezeigt. Wenn Ihr „Sonderangebotspreis“ nur roter Text ist, übersehen sie ihn möglicherweise. Die Lösung: Verwenden Sie redundante Codierung. Verwenden Sie nicht nur Farbe. Verwenden Sie Farbe + Symbol + Form.

Fehler: Roter Text + 🛑-Symbol.
Erfolg: Grüner Text + ✅ Symbol. Dadurch wird sichergestellt, dass jeder die Botschaft versteht, unabhängig von seiner Biologie.

13. Fazit: Empathie ist Profit

Empathie ist kein „Soft Skill“. Es handelt sich um eine „harte Anforderung“ für die Skalierung. Sie können nicht auf 1 Million Benutzer skalieren, wenn Sie nur für 1 % der Benutzer erstellen, die über das neueste iPhone verfügen. Sie müssen sich auf die chaotische, langsame und abgelenkte Realität der Welt einstellen. Wenn Sie dies tun, fühlt sich Ihre Software „robust“ an. Es funktioniert für jeden und überall. Das ist die Definition von Qualität. Und letztendlich ist es die Qualität, die den Umsatz steigert. Eine Website, die für alle funktioniert, verkauft sich an alle. Lassen Sie kein Geld auf dem Tisch, indem Sie die 99 % ignorieren.

Für die Blase bauen?

Wir führen Gerätelabortests und Barrierefreiheitsprüfungen durch, um sicherzustellen, dass Ihre Website zu 99 % funktioniert.

Meine UX prüfen. Beauftragen Sie unsere Architekten.