Jedes Software-Produkt mit einer grafischen Benutzeroberfläche verwendet Icons. Ein Icon ist ein Piktogramm, die auf einen Blick und so eindeutig wie möglich eine Funktionen des Systems darstellt. Gerade im Hinblick auf die Akzeptanz durch einen großen Nutzerkreis haben Icons ein einheitliches Erscheinungsbild (englisch: look and feel). Viele Icons fassen wir zu einer Icon-Sammlung zusammen. Es ist die konkrete Umsetzung einer Medienbibliothek für Icon-Dateien.

Motivation

Allgemein bekannte Funktionen werden durch allgemein diesen Funktionen zugeordnete Symbole realisiert. Einen sehr schönen Einblick in die “Bildsprache” bekannter Benutzeroberflächen von Betriebssystemen gibt das GUIdebook.

Icon Speichern 120px Das Diskettensymbol ist ein sehr gebräuchliches Symbol für die Funktion “Speichern”. Bei dem Beispiel kann schnell die Anforderung entstehen, das Diskettensymbol durch ein neues Icon zu ersetzen, weil die ursprüngliche Bedeutung des Symbols, nämlich das Speichermedium Diskette (englisch: floppy disk), im Zeitalter der Cloud-Speicher für viele nicht mehr nachvollziehbar ist.

Schön gestaltete Icons vermitteln gute Qualität und Professionalität in der Realisierung. Die Erstellung einer Icon-Sammlung erfordert eine großes Maß an Kreativität. Im Zusammenhang mit Icons muss auch der urheberrechtliche Aspekt betrachtet werden. Wenn keine Vorgaben für Icons gibt, empfiehlt es sich, eine Sammlung professionell gestalteter Icons zu erwerben oder von einem Grafiker erstellen zu lassen.

Auch wenn unser Ziel ist, die Icons nur “an einer Stelle” abzulegen, bedeutet das trotzdem, dass die Icon-Sammlung für drei Zielgruppen unterschiedlich und getrennt voneinander gespeichert wird.

  • Wiki:
    Für die Layout-Beschreibungen gibt es einen speziellen Upload-Bereich im Wiki, wo alle Icon-Dateien der Icon-Sammlung als Anhänge gespeichert sind und für die Verwendung in Seiten zur Verfügung stehen.
  • Mockup:
    Für UX-Spezialisten werden die Icons in ihren speziellen Werkzeugen integriert.
  • Repository:
    Für Entwickler legen wir die Bilddateien im Code-Repository ab. Dort werden sie Teil der Lieferpakete des Software-Produktes.

Bei allen Änderungen an Icons muss sichergestellt werden, dass die geänderte Bilddatei im Wiki, Plugin und Repository aktualisiert wird.

Warum brauchen wir eine Icon-Sammlung - Bild3 Ein Wiki bietet in der Regel bereits eine Möglichkeit, Icons als Galerie darzustellen. Die Galerie ist hilfreich für die Orientierung und vermittelt einen vollständigen Überblick über die verfügbaren Icons.

Versionierung

Für Icons ist keine Versionierung vorgesehen. Darum werden einmal eingeführte Icons in ihrer Darstellung nicht mehr geändert. Nur sehr kleine Korrekturen sind erlaubt, die das Erscheinungsbild nicht oder nur minimal ändern. Diese Vorgabe schützt uns vor unbeabsichtigten Veränderungen in der Benutzeroberfläche, wenn ein Icon in verschiedenen Layouts verwendet wird – was ja ein Ziel ist. Die Gestaltung wird weiterhin professionell durch einen “Kreativen” im Projekt erledigt, um sicherzustellen, dass der einheitliche Stil der Icon-Sammlung erhalten bleibt. Durch eindeutige Namen für die Bilddateien stellen wir sicher, dass keine Fehler bei der Aktualisierung der Bilddateien passieren.

Fazit

Durch die Integration der Icon-Sammlung im Wiki kann ein UX-Spezialist bereits beim Entwurf der Mockups gleich die Icons erstellen. Dadurch erreichen wir auf der einen Seite einen bestmögliche, aber weitestgehend technologie-unabhängigen Entwurf des Layouts, zeigen aber bereits die Icons, die später auch in der Benutzeroberfläche des Produktes Verwendung finden. Ein Mockup in dieser Form stellt bereits ein vollständiges “visual design” dar, dass mit Stakeholdern besprochen werden kann. Es lässt aber noch genügend Freiraum für die effektive Umsetzung mit einer konkreten Technologie unter Berücksichtigung des “style guide”. Die Icon-Sammlung ist kein Ergebnis des Entwicklungsprozesses, sondern wird dem Scrum-Team bereits als Menge von Bilddateien in Formaten wie PNG oder JPG zur Verfügung gestellt.