React Native Icons
In diesem Tutorial zeige ich wie man React Native Icons verwendet um die Usability der App zu erhöhen. Ein gutes Set von Vector Icons ist in nahezu jedem aktuellen Web oder App Projekt wichtig.
React Native Icons
Es gibt viele Einflußfaktoren für die Akzeptanz einer Software bei Usern. Eine der wichtigsten für die Usablity ist die Erkennbarkeit. Der Benutzer möchte mit der Applikation interagieren ohne zuvor ein Handbuch zu lesen. Seit den ersten Smartphones haben sich dafür für bekannte Funktionen die immer gleichen Icons etabliert. Diese Entwicklung lässt sich bis zu den ersten grafischen Desktops zurückverfolgen. Das beste Beispiel ist das Symbol einer Diskette für die Funktion Speichern. Das Icon ist ohne weitere Beschreibung aussagekräftig und das obwohl die meisten User noch nie eine Diskette verwendet haben.
Viele User würden diese Objekte als Speichern-Icons aus dem 3D Drucker bezeichnen.
React-native-vector-icons einbinden
Für meine aktuelle App verwende ich das react-native-vector-icons Paket, der Quasi Standard für React Native Apps. Das Paket bringt ein großes Set an fertigen Fonts mit jeweils einer großen Fülle von Icons. Für die meisten Aufgaben findet man das passende Icon. Die Einbindung funktioniert wie folgt:
npm install --save react-native-vector-icons
Nach der Installation findet man den node_modules/react-native-vector-icons Ordner. Im Code wird die Icon Komponente für die Font FontAwesome beispielsweise so eingebunden:
In einem Screen verwalte ich eine Liste aus Dokumenten. Diese kann der Benutzer ansehen, bearbeiten oder löschen. Diese 3 Funktionen lassen sich auf einem Smartphone nicht mit einem einzigen Klick aufrufen (woher soll die App wissen welche Funktion der Benutzer auslösen will?). Ein normaler Klick öffnet das Dokument, für editieren oder löschen habe ich mir mit Icons geholfen. Diese sind für jeden Benutzer sofort erkenntlich.
Mit den richtigen Farben verstärkt man die Wirkung der Icons. Der Code dazu sieht wie folgt aus:
Das passende Icon wird im Code über den Namen referenziert. Doch woher kennt man den? Eine Liste aller verfügbaren Icons mit deren Namen findet man über die verlinkte Seite.
Information als Bild
Ein Piktogramm ist eine als Bild dargestellte Information. Diese kann mit unter komplex sein, wird jedoch vereinfacht und im Kontext der jeweiligen Kultur verständlich dargestellt. Die besten Beispiele sind Verkehsschilder oder Icons aus einer App bzw. einem Desktopprogramm. Erstellt man beispielsweise ein Dokumentenmanagementsystem, dann möchte man das Menü übersichtlich und dem Benutzer klar verständlich präsentieren. Speichern unter, Speichern, Laden oder ähnliche Symbole wird man genau so wie bei anderen Programmen üblich verwenden. Spannender wird es bei weniger üblichen Funktionen wie: „zuletzt aktualisiert“, „Version unter Review“ oder „wird gerade bearbeitet“. Bevor man nun den Grafiker losschickt neue Icons zu designen sollte zuerst in Bibliotheken meist genutzte Icons durchforsten, oder einen guten UI/UX Designer konsultieren.
Fazit
In React Native dreht sich viel um Icons. Das passende Bild an der richtigen Stelle verbessert die Lesbarkeit einer App und steigert dessen Akzeptanz beim Benutzer. Gerade für komplexe Apps mit vielen unüblichen Funktionen bedarf es gut ausgeklügelter Icons die selbsterklärend oder zumindest wiedererkennbar sein.
