Du hast einen neue super fancy App / Webseite programmiert.
Trotzdem sind die Nutzer nicht zufrieden.
Hier sind die besten Tipps, eine App für ALLE zu schaffen.
Starten wir!
Logik und Flow polieren
Klare Anweisungen finden
Eine gute Beschreibung für ein Programm oder den passenden Verwendungshinweis zu schreiben, ist gar nicht einfach.
Wir müssen davon ausgehen, dass wir nur Idioten vor dem Computer sitzen haben, welche einfache Anweisungen in 20 verschiedenen Varianten interpretieren.
Klare Aussagen, klare Referenzen, viele Beispiele und keine Uneindeutigkeiten sind hier Pflicht. Frage andere und teste, ob die Anweisung verständlich ist. Ist die Doku gut lesbar? Ist klar, wie die Software zu verwenden ist?
Fachbegriffe, die Du verwendest, solltest Du an Stelle und Ort erklären. Alternativ kannst Du (?)-Symbol-Icon mit einer Erklärung nach dem Fachwort einfügen. Ein Link zu einer guten FAQ ist Pflicht, außer Du überlastest gerne die Mitarbeiter im Support.
Eine unbeantwortete Frage des Kunden sollte zu einer Änderung in den Erklärungen führen und die FAQ erweitern. Vermeide zu lange Texte. Die Balance zwischen Ausführlichkeit und Knappheit ist nicht einfach.
Nutzerführung durch die Anwendung
Die gleiche Software nutzen verschiedene Nutzerrollen. Nutzerrollen können sein:
- Mitarbeiter
- Admins
- Kunden Produktgruppe A
- Kunden Dienstleistung B
- Gast usw.
Die Software sollte deshalb unterschiedliche Wege durch die Anwendung pro Nutzergruppe anbieten. Blende alle Schaltflächen aus, welche die Nutzergruppe nicht braucht. Füge Erklärungstexte hinzu, wenn die Nutzergruppe unerfahren ist.
Planung ist vor der Programmierung wichtig. Welche Schritte durchläuft Nutzergruppe A, B oder C? Welche Daten müssen diese eingeben, welche Informationen brauchen diese?
Mehr Sprachen unterstützen
Die häufigste Barriere von Software ist meistens die Sprache. Die meisten Hersteller stellen die Software in Englisch zur Verfügung, sodass viele Menschen in Asien und Südamerika die Software nicht verwenden können.
Die Open Source Entwicklung vereinfacht die Übersetzung, indem jeder Nicht-Programmierer Übersetzungen für jede Sprache vorschlagen kann. Englisch, Spanisch und Mandarin (Chinesisch) sind ein guter Anfang.
Icons und Texte uneindeutig
Wer sich nicht mit Sprachen auseinandersetzen will, kann Piktogramme und Icons verwenden.
Die korrekte Verwendung für gleiche Konzepte ist hier entscheidend. Kulturell haben Symbole unterschiedliche Bedeutungen und gleiche Icons nutzen die Tech-Konzerne häufig mit verschiedenen Funktionen.
Sei nicht kreativ und verwende die Icons wie Google und Apple es in ihren Apps machen. Ein Icon hat immer ein Konzept / Funktion.
Randfälle testen, Intensives Testen
Endnutzer verwenden die Software anders als die Entwickler. Außerdem muss der Entwickler mit jedem und alles rechnen: die Randfälle.
- Encodierung für exotische Name
- Lange Texteingaben
- Upload von Texten in Profilbildern
- Negative Zahlen bei Mengen …
Die Liste lässt sich unendlich fortsetzen. Die Software muss aber stabil bleiben und gute Anweisungen geben, wie es richtig geht.
Adressfelder International + Encoding
Vielleicht ist Dir schon mal aufgefallen, dass man nicht jeden Namen in Vor- und Nachnamen auftrennen kann.
In den östlichen Ländern beschreibt der Name einer Person seine Abstammung mit den Namen der Väter. Deshalb solltest Du international flexibel sein.
Erlaube eine Zeile für den Namen (z. B. 500 Zeichen) und erlaube das gleiche für die Adresse. International haben Adressen mit Postleitzahlen, Distrikte, Länder, Bundesländer viele verschiedene Formen.
Design Fehler verbessern
Responsive Design ist Pflicht
Deine Anwendung sollte auf möglichst vielen Plattformen verfügbar sein. Nicht jeder kann sich einen Laptop, Bildschirm oder ein Smartphone leisten oder hat nur das Gerät X zur Verfügung.
Statt einer Nutzergruppe die Bedienung zu erschweren, sollte sich das Design an das Gerät anpassen. Lesbare Schriften und brauchbare große Bedienelemente sind hier Pflicht.
Animationen und Fancy Webseiten
Wenn Du Dir einen (Horror) Film anschaust, wird vor dem Start davor gewarnt, das blinkende Lichter / Bilder manchen Menschen nicht gut bekommt.
Das Gleiche gilt für Webseiten. Die heutigen Browser ermöglichen Animationen, Filme, Farbwechsel und Interaktionen, welche eine Teilgruppe Deiner Kunden verwirren kann.
Gehe sparsam damit um, kann das Design mit anderen Stilelemente aufgepeppt werden?
Ladezeiten für mobile Anwendungen
Nicht jeder lebt in der Stadt und hat eine stabile Internetverbindung. Im Internet-Entwicklungsland Deutschland müssen wir besonders auf die Menschen am Smartphone oder mit einer DSL-Leitung Rücksicht nehmen.
Die Anwendung muss bezüglich der Ladezeiten optimiert sein. Die Chrome Developer Tools erlauben das künstliche Drosseln der Internetverbindung. Probiere eine 3G-Verbindung aus. Lädt die Webseite in einer akzeptablen Zeit noch? Reagiert die Anwendung noch ausreichend?
Schriftgrößen anpassen und Dark-Mode
Unsere heutigen Displays gibt es von ganz klein bis riesig. Der Entwickler weiß nicht, wer mit welcher Sehschwäche, auf welchen Display die Inhalte liest. Gebt den Menschen die Option, die Schriftgröße anzupassen (wenn auch über Zoom (Strg+Plus)).
Behinderungen auflösen
Farbe optional
Bunte Farbkonzepte schlagen um Langen ein Schwarzweiß-Design. Trotzdem überzeugen Farbkonzepte Personen nicht mit einer Farbenblindheit. Farben sind ein optionales Designelement, welche keine Information transferiert. Das heißt z.B. in einer Banking-App sind Abbuchung mit (-) gekennzeichnet und Guthaben mit (+). Diagramme mit roten und grünen Linien sind unlesbar. Farben sind optional.
Spracherkennung und Sprachsteuerung
Um die Sprachsteuerung zu ermöglichen, brauchen wir Zusatz-Beschriftungen. Diese sind unsichtbar im HTML-Code vermerkt, welche nur die Vorlese-Programme beachten. Beim Betrachten einer Webseite ist ein Button mit einem Senden-Symbol eindeutig, während die Sprachsteuerung, eine weitere Information braucht. Der Standard hierfür heißt WAI-ARIA (oder ARIA):
<button
aria-label="Schliessen"
aria-describedby="Schliessen des Popups"
onclick="popupDialog.close()"
>
X
</button>
Bilder mit alt-Attribut
Bilder sind eine schöne Auflockerung für den Text und veranschaulichen einen Sachverhalt.
Weil nicht jeder von uns Bilder sehen kann (Blinde, Farbenblinde), brauchen wir eine textuelle Beschreibung für jedes Bild. Blinde nutzen Textlesegeräte, um die Webseiten zu erfassen. Die Navigation erfolgt mit der Tastatur oder Sprache.
Bedingung nur mit Tastatur, nur mit Touchscreen
Der Tabbing-Manager im Browser ermöglicht die Navigation mit der Tastatur. Die Maus ist bei den meisten Anwendungen ein integraler Bestandteil geworden, aber Blinde und andere Gruppen haben keine Maus zur Verfügung.
Der Tabbing-Manager wählt das obere linke Element aus z.B. den Nutzernamen. Drucke auf Tab und der Cursor landet bei dem Passwort > Noch ein Tab > Link zum Shop. Mit der Enter-Taste bestätigt der Nutzer die Eingabe und landet auf der Shop Seite.
Kill Captcha
Die Captchas halten nicht alle Bots ab, sondern verärgern Kunden am laufenden Band. Jeder der die 157. Ampel in einem Captcha „nicht“ erkannt hat, hasst diese Schutzmaßnahme.
Vermeide Captchas und löse die Probleme mit Honeypots, Drosselungen, DDoS-Schutzschilde und Validierung. Captcha ist kein Allzweck-Mittel, sondern nur eine minimale Barriere für die immer intelligenteren Bots.
