Schnell mal ein paar Fotos bestellen

Fotobücher, Fotokalender, Fotogeschenke …. Das Schweizer Unternehmen Ifolor hat ein riesiges Sortiment an Fotoprodukten. Und natürlich Software, teils komplexe Software die Nutzer beim Erstellen von Fotobüchern und vielen anderen Fotoprodukten nutzen. Über die Windows Software sollten nun das Bestellen von Fotoabzügen möglich werden. Klingt einfach. War es aber nicht. Also von vorne…

Meine Rolle: UX / UI Designer
Arbeitgeber: ifolor
Arbeitsorganisation: Agil im Scrum Team
Arbeitsverhältnis: Angestellter
Jahr: 2017

Produktgruppe Fotoabzüge
Produktgruppe Fotoabzüge

Projektstart

Schon vor dem Projektstart konnten Fotoabzüge über die ifolor Webseite bestellt werden. Es gab also schon Erfahrungswerte die wir für die Windows Software nutzen konnten. Wir mussten zwei Nutzergruppen berücksichtigen. Die Erwartungshaltung der ersten Nutzergruppe war, möglichst schnell und einfach Fotos zu bestellen. Die zweite, wesentlich kleinere Nutzergruppe wollte natürlich auch Fotos bestellen :-). Jedoch nicht ohne die Fotos zuvor mithilfe der Software bearbeiten zu können.

Herausforderung

Der User Flow war eine logische, lineare Abfolge.

  1. Fotos hochladen
  2. Standardformat für alle Fotos festlegen z.B. 10x15cm
  3. Die Anzahl einzelner Fotos anpassen (optional)
  4. Weitere Formate hinzufügen z.B. 13x18cm (optional)
  5. Fotos zuschneiden, optimieren und beschriften (optional)
  6. In den Warenkorb legen und bestellen

Die Herausforderung lag im zweiten und dritten Schritt des User Flows. Der Anzahl und Format konnten in unserem Layout intuitiv an der Kachel des jeweiligen Fotos angepasst werden (Single Select). Doch wie sollten wir eine Stapelverarbeitung realisieren? Wollte der Nutzer Format und/oder die Anzahl mehreren Fotos gleichzeitig anpassen (Multi Select) funktionierte die Bearbeitung an der Kachel nicht mehr.

Single Select: Anzahl und Format können an der Kachel angepasst werden

Lösung

Wenn ein Nutzer von mehreren Fotos Anzahl und/oder Format ändern möchte, braucht es eine Multi Select Funktionalität. An den Kacheln auf der Bühne ließ sich die Funktionalität nicht abbilden. Die verbleibende Randspalte war somit gesetzt. Dort platzierte ich die gleichen Funktionselemente wie in einer einzelnen Kachel. Mit dem Unterschied, dass sich Änderungen bei der Anzahl und / oder dem Format auf alle zuvor selektierten Kacheln auswirkten. Ein intuitiver Multi Select war geboren.

Multi select: Anzahl und Format können in der Randspalte angepasst werden

Learning

Software ≠ Web Applikation. Software birgt gegenüber Web Applikationen viele Eigenschaften die mir erst im Projektverlauf bewußt wurden. Suchmaschinenoptimierung braucht es nicht, mobil wird die Software niemals genutzt werden, dafür mit Windows Shortcuts, AutoSave ist selbstverständlich und nicht die Ausnahme. Zu Nutze gemacht haben wir uns in diesem Beispiel die Latenzzeit, die bei Software quasi null ist. Änderungen in Anzahl und Format werden visuell unmittelbar in den Kacheln dargestellt. Perfekt um dem Nutzer das nötige Feedback zu geben.

Als Erfolg werte ich, dass die Funktionalität seit 2017 jeden Nutzertest überstanden hat :-) und immer noch unverändert im Einsatz ist.