Montag, 09 Februar 2015 16:01

Icondesign - Icon ist nicht gleich Icon

Gleich mal zu Beginn des Posts eine Frage: Für was könnten folgende vier Icons stehen?

icons 

Und im Kontext der mobilen Webseite des Videoportals Vimeo, der Gmail-App und der Fotoalbum-App?

Icons im App-Kontext

Bei Vimeo steht das Herz-Icon für “Like” und das Papierflieger-Icon für “Share”. In der Gmail-App hingegen wird das Papierfliger-Icon für “Senden” verwendet. Die Fotoalbum-App benutzt das ShareThis-Icon und ein Stern für Favoriten. Nicht selten sieht man allerdings das Herz auch als Symbol für Favoriten. Welches Icon soll man nun für welchen Begriff verwenden?

Gehen wir nochmal einen Schritt zurück. Ein Icon soll laut Definition “eine Information durch vereinfachte grafische Darstellung vermitteln”. Ein Herz, ein Papierflieger, ein Stern sind eine einfache Darstellung. Beim ShareThis-Icon ist es schon etwas schwieriger zu beschreiben, was es ausdrücken soll. Allerdings stellt man fest, dass die Icons, trotz anscheinend einfacher Darstellung, häufig unterschiedlich verwendet werden. Wie schafft man es nun, für den Nutzer Icons zu gestalten, die die Benutzbarkeit einer Anwendung unterstützen?

Tipps aus der Praxis

In einem vergangenen Projekt hatten wir die Aufgabe die Dashboard-Icons der bauen.de Android-App neu zu gestalten. Es galt jeweils ein Icon für folgende Begriffe zu gestalten:

  • Grundstücke

Funktion: Grundstücke suchen

  • Typenhäuser

Funktion: Typenhäuser suchen

  • Merkzettel

Funktion: Merkzettel anzeigen

  • Ratgeber

Funktion: Ratgeber für Hausbau, Ausbau & Renovierung, Neue Energien & Umwelt, … anzeigen

  • Musterhäuser

Funktion: Musterhäuser in einer Kartenansicht anzeigen

  • Hauskataloge

Funktion: Hauskataloge anzeigen

  • Prospekte

Funktion: Prospekte anzeigen

Hinzu kam, dass die alten Icons durch die neuen ersetzt werden sollen. Das heißt, es gibt Nutzer, die die Iconsprache bereits gelernt hatten.

Schritt 1 - Freie Recherche

In einer ersten Phase haben wir erstmal gängige Muster für Icons recherchiert. Also Haus, Lupe, Karten, usw. Ziel war es, für den Nutzer bekannte Icons zu finden. Außerdem gemeinsam mit dem Kunden entschieden, welchen Style die Icons haben sollen. Das heißt, sind die Icons zum Beispiel monochrom oder mehrfarbig, 2D oder 3D. Gepaart wurde diese Phase mit den Google-Vorgaben zu Icondesign. Entscheidend war noch, dass die Icons auf dem Dashboard nicht selbsterklärend sein müssen, da dieses aus Icon und Text besteht.

Schritt 2 - Scribblen

Nach der Recherchephase entschieden wir uns für mehrfarbige Icons in 2D. Die Icons sollten sowohl aus einer Aktion und der dazugehörigen Information bestehen. Wir suchten also Icons zum Beispiel für “Grundstück” und “suchen”. In einer gemeinsamen Scribble-Session entstanden dann erste Entwürfe. In der Phase war uns wichtig, dass wir erstmal nur die Iconsprache und nicht das Design diskutieren. Für die Trennung sprach, dass es oft schwierig ist, den Fokus auf die Iconsprache zu legen, sobald die Gestaltung mit ins Spiel kommt.

scribble icons

Schritt 3 - Iconsprache verfeinern

Die Entwürfe dienten als sehr gute Grundlage, um Nutzer- und Kundenfeedback einfließen zu lassen. Das heißt, wir haben diese unseren Kolleginnen und Kollegen gezeigt und gefragt, was sie darunter verstehen. Nachdem wir dieses Feedback eingearbeitet hatten, gingen die Entwürfe an den Kunden. Dieser gab nochmals Feedback aus Kundensicht:

Es ist gut, dass das Icon unförmig ist und nicht mehr wie ein DIN A4 Papier aussieht. Allerdings hat das Icon für uns zu sehr Ähnlichkeit zu einem Haus- oder Wohnungsgrundriss.

Wir würden uns wünschen, wenn das abgebildete Grundstück im Verhältnis zu weiteren Grundstücks-Parzellen stehen würde, eventuell sogar mit kleinen Details wie eingezeichneten Wegen und Bäumen etc

 

Das „i“ in dem Buchrücken ist ohne die dazu gelieferte Erklärung leider nicht bei jedem gleich ersichtlich gewesen. Eventuell wäre es besser, wenn man das „i“ als extra Icon darüberlegt (wie bei der Lupe). Alternative zum „i“ wäre z.B. auch das „?“.

Dieses nahmen wir auf und setzen es direkt beim Reinzeichnen in Illustrator um.

Schritt 4 - Reinzeichnen

Illustrator ist unser Tool der Wahl, wenn es um Icons geht. Im mobilen Umfeld benötigt man Grafiken für die verschiedenen Auflösungen. Bei iOS ist das eine einfache, doppelte und seit dem iPhone 6 Plus auch eine dreifache Auflösung. Für Android stellt man Grafiken in mdpi, hdpi, xhdpi und xxhdpi bereit. Deshalb haben wir diese als Vektorgrafik angelegt. Ein weiterer wichtiger Punkt ist der Icon-Status, also das Touch-Feedback. Tappt der Nutzer mit dem Finger auf das Display, kann man ihm eine Rückmeldung geben, dass er ein Element ausgewählt hat. Dies erfolgt durch das Anzeigen einer anderen Grafik. 

Touch Feedback

Fazit

Das passende Icon zu finden, ist nicht immer einfach. Vor allem, wenn das Icon selbsterklärend sein muss. Bei Apps und Webseiten für mobile Endgeräte haben Icons den Vorteil, dass man durch deren Verwendung Platz sparen kann. Wichtig ist für uns, dass man zwischen Scribble und Design trennt, um die jeweils richtigen Fragen, wie "Erkennt der Nutzer den Unterschied zwischen Musterhaus-Suche und Grundstück-Suche?" oder "Passen die Icons in die Corporate Identity des Kundes?" beantwortet zu bekommen. Für uns war die enge und konstruktive Zusammenarbeit mit dem Kunden sehr hilfreich, um zum einen an dessen Wissen über die Zielgruppe und zum anderen an den Funktionen hinter den Icons teilzuhaben.

Zum Abschluss noch ein Vorher-Nachher Vergleich des bauen.de Dashboards.

Nina

Vorher-Nachher-Vergleich

Freigegeben in Blog

Wer kennt es noch? Das Glücksrad? Lief früher auf Sat 1. Die Kandidaten haben das Glücksrad mit verschiedenen Geldsummen gedreht und konnten dann einen Konsonanten wählen. Abhängig davon, ob dieser in dem gesuchten Begriff vorkam, wurde dann die Geldsumme auf ihrem Konto gutgeschrieben. Vokale wurden meist mit "Ich kaufe ein E" gekauft. Wer das Rästel lösen konnte, konnte danach shoppen gehen.

 

Weshalb schafft es jetzt das Glücksrad auf unser Blog? Wir haben vor einiger Zeit die Buy-A-Feature-Methode erfolgreich in einem Kunden-Workshop durchgeführt. Vom Prinzip her ähnlich, allerdings kann man sich keine Waschmaschinen oder Staubsauger kaufen, sondern Features.

Um was geht's?

Die Buy-A-Feature-Methode hat das Ziel, Features zu priorisieren. Außerdem soll sie sichtbar machen, bei welchen Features es sich um "Monsterfeatures" aus Auftraggeber-, Entwicklung- oder Usabilitysicht handelt. Ein "Monsterfeature" kann für hohen Umsatz sorgen oder die Benutzbarkeit des Produkts erhöhen. Gleichzeitig kann es in der Umsetzung sehr aufwändig und somit teuer sein.

Wie funktioniert das?

Bei uns kam die Buy-A-Feature-Methode in einem Workshop mit FEGA & Schmitt zum Einsatz. Dieser fand nach einem ersten Kennenlernen statt und hatte unter anderem das Ziel, den Funktionsumfang der iOS- und Android-Apps festzulegen und zu priorisieren, da der Zeitplan eng war. Teilgenommen haben Stefanie Wegmann von FEGA & Schmitt, Caro aus dem Vertrieb, Roli und Martin stellvertretend für die Entwicklung und ich, verantwortlich für Usability, Konzept und Design. Zunächst erklärte Caro, die Moderatorin, die Spielregeln:

- Die Featureliste wird auf den Tisch gelegt und ggf. noch erweitert / erklärt.
- Jede/r bekommt Geld, mit dem Features gekauft werden.
- Es gibt keine Währung.
- Der Preis kann auf Geschäftswert / Entwicklungsaufwand / Nutzerwert etc. basieren.
- Jede/r hat 10 Minuten Zeit, die Features zu kaufen.
- Nach den 10 Minuten erklärt jede/r, weshalb und warum er/sie das Feature für den genannten Betrag kaufen würde.

Danach begann Stefanie, die Kundin, Features zu kaufen. Sie hatte dafür folgende Scheine zur Verfügung:

- 6 x Schein 1

- 3 x Schein 5

- 3 x Schein 10

- 2 x Schein 50

- 1 x Schein 500

Bei der Auswahl der Scheine haben wir darauf geachtet, dass man sich auf alle Fälle entscheiden muss, welches Feature man gerne hätte. Während des Verteilens hat sie bereits erklärt, warum sie sich für bzw. gegen ein Feature entschieden hat.

Den gleichen Durchlauf haben dann Roli und Martin gemacht, da es wichtig ist, Team-Mitglieder zu Wort kommenzulassen. Während sie ihre Scheine verteilt haben, konnten sie bereits kurz anschneiden, weshalb zum Beispiel der "Barcodescanner" oder "Filiale in der Nähe anzeigen" teuer ist, dagegen "Warenkorb speichern" eher günstig.

Last, but not least habe ich dann noch die Features aus Usability-Sicht gekauft. Den Barcodescanner habe ich mit dem 500-Schein gekauft, weil bekanntermaßen Texteingabe auf mobilen Endgeräten Zeit rauben kann und oft auch frustrierend ist.

Stefanies Fazit

"Es war eine spannende neue Erfahrung und besonders hilfreich, da man direkt vor Augen hatte wie unterschiedlich die Features von den verschiedenen Bereichen bewertet werden. Besonders wertvoll waren dabei auch die Erläuterung zu den Gründen für die Bewertung."

Unser Fazit

Erstmal Danke an Stefanie, dass sie bereit war, diese spielerische Methode zusammen mit uns durchzuführen.

Unser Eindruck von der Buy-A-Feature-Methode war sehr positiv. Mit einfachen Mitteln kann man den Kunden dazu anregen, sich Gedanken zu "Was will ich auf jeden Fall in der App haben" zu machen . Aber auch das Entwickler-Feedback ist sehr wertvoll, damit der Kunde versteht, weshalb die Umsetzung eines Features entsprechend teuer sein kann. Um letztendlich den Kreis zu schließen und auch die Nutzersicht zu berücksichtigen, sollte immer auch ein Usability-Experte an dem Workshop teilnehmen. Es ist auch möglich, das Ganze auszuweiten und mit realen Nutzern die Buy-A-Feature-Methode anzuwenden.

Zum Schluss muss ich einfach auch noch sagen, dass so ein Workshop mit spielerischen Elementen Spaß macht!

Übrigens die Apps sind mitterweile umgesetzt und in den jeweiligen Stores zu finden:

Link zur Android-App im Google Play Store: https://play.google.com/store/apps/details?id=de.fega.shop

Link zur iOS-App in Apples App Store: https://itunes.apple.com/de/app/fega-schmitt/id915746911?mt=8

Noch eine kleine Anmerkung dazu: Zielgruppe der App sind bereits registrierte Fega-&-Schmitt-Kunden/Händler.

Nina

Freigegeben in Blog