Freitag, 22 Mai 2015 10:46

Marvin Dittrich

User Experience Designer

Marvin Dittrich

Marvin ist seit 2015 bei insertEFFECT. Er ist UX-Designer aus Überzeugung. Nach seinem Media Engineering Studium an der TH Nürnberg und einem Zwischenstopp in der UX Abteilung der adidas Group hat er sein Zuhause bei insertEFFECT gefunden.

Mit Human-Centered-Design und Design Thinking Know-How im Gepäck sind seine täglichen Herausforderung, die Anforderungen von Usern, Kunden, Technik und Design zu vereinen. Konzeption, Interaction Design, Usability-Engineering und Testing - vor Allem im Bereich Carsharing - sind dabei seine Aufgaben bei insertEffect.

Dabei sind ihm ein offener und ehrlicher Umgang, sowie das stetige Streben nach Neuem eine Herzensangelegenheit. Als Fahrrad-Enthusiast und Motorsportfan verbindet er die Welten der neuen Mobilität mit traditionellen Fortbewegungsmitteln, die keinesfalls Gegensätze sein müssen.

Seine 3 Schlagworte sind: #Design #Usability Engineering #Biking

Mail: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Phone: 0911 / 274487-163

Freigegeben in Team
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
Mittwoch, 07 März 2012 10:14

Nina Wieland

Lead User Experience Designerin

nw

Nina arbeitet seit 2008 bei insertEFFECT. Als Lead UX Designerin leitet die Diplom-Ingenieurin für Medientechnik das UXD-Team durch Projekte aller Art und Komplexität. Sie kümmert sich um Themen wie Agile UX, Lean UX oder Mobility Experience Design. In Projekten bringt sie ihre Expertise vor allem im Interaction Design und Usability Engineering ein, um den Nutzerinnen und Nutzern neue Mobilität wir Carsharing oder intermodale Mobilität einfach und intuitiv zugänglich zu machen.

Da sie gerne ihr Wissen teilt und junge UX Designerinnen und UX Designer fördert, trifft man sie als Sprecherin auf Konferenzen und Barcamps. Außerdem unterrichtet sie an der HS Ansbach als Dozentin die Fächer E-Publishing und Design Interactive.

Neue Inspiration holt sie sich auf Reisen über den gesamten Globus, bevorzugt in Städte wie zum Beispiel Valparaiso, die über eine bunte Streetart-Szene verfügen.

Ihre 3 Schlagworte sind: #interaction design #mobility experience #withoutarttheworldisjusteh

Mail: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Phone: 0911 / 274487-140

Freigegeben in Team