PhotoAIdent – UI Design
Am in Software Engineering | Keine Kommentare »
Tags: KI, OpenSource
Back to the basics… Ich habe ein paar Wireframes für die Oberfläche von PhotoAIdent erstellt. Und dies ganz ohne den Einsatz von KI – ehrlich! Vielleicht hat der geneigte Leser ja ein paar Verbesserungsvorschläge, bevor ich Claude mit der Umsetzung beauftrage…
Aufbau der Oberfläche
PhotoAIdent ist eine Desktopanwendung und soll mehrere Seiten haben:
- Suche – per KI, GPS oder Stichworten ein Foto finden
- Browse – manuell Verzeichnisse mit Fotos durchstöbern
- Personen – Verwaltung der Personen für die Gesichtersuche
- Labelling – unbekannte Gesichter einer Person zuordnen
Die Navigation zwischen diesen Hauptbereichen erfolgt über eine Leiste am linken Bildschirmrand. Ansonsten hat das Fenster immer eine Statusleiste mit einigen Infos zu gefunden Fotos und Gesichtern und ob gerade eine Indizierung läuft. Natürlich hat die Anwendung auch ein Hauptmenü entsprechend den Standards der jeweiligen Desktopumgebung.
Alle Wireframes habe ich übrigens mit dem wunderbaren OpenSource Wireframe Werkzeug mydraft.cc erstellt (Quelltext).
Die Suchseite
Die Suchseite ist das Haupt- und Startfenster von PhotoAIdent.

Ähnlich der Google Startseite soll am Anfang zunächst gar kein Foto angezeigt werden. Erst wenn man mindestens einen Filter setzt, werden Suchergebnisse in Form von Thumbnails angezeigt. Die Liste der gefundenen Fotos kann man scrollen und dabei werden immer weitere Fotos geladen.
In der Seitenleiste am rechten Bildschirmrand findet man die wichtigsten Suchfilter:
- Suche über einen geografischen Punkt
- Suche nach einer Person
Die Suche per GPS habe ich nur angedeutet. Vermutlich geht da ein größeres modales Fenster mit einer Karte auf, auf der man einen gewünschten Bereich auswählt.
Die Personen lassen sich per type-ahead schnell filtern. Eine Auswahl von mehreren Personen ist möglich. Irgendwie müsste noch ein „Auswahl aufheben“ Button untergebracht werden.
Mehrere Filter, egal ob Stichwort, Personen oder GPS Punkt, werden immer mit logischem UND verknüpft.
Später werde ich auch noch Stichworte zu den Bildern per KI extrahieren. Deshalb habe ich ein Suchfeld vorgesehen, in das man entsprechende Begriffe eingeben kann. Elegant wäre auch, wenn man in diesem Feld per @ Zeichen eine Person „erwähnen“ kann. Das hätte dann den gleichen Effekt wie die Auswahl von Personen in der Spalte am rechten Rand.
Ich könnte mir auch noch vorstellen, dass man das Suchergebnis irgendwie per Zeitfilter einschränken will. Vielleicht dazu dann auch ein Button in der Spalte rechts?
Was mir noch irgendwie fehlt sind ein paar Aktionen. Habe ich Bilder gefunden, möchte ich mir die vielleicht im Vollbild als Diashow anschauen. Oder ich will sie vielleicht nicht nach Relevanz sondern nach Zeit sortieren. Unendlich viele Aktionen möchte ich aber nicht vorsehen. PhotoAIdent soll keine Bildbearbeitung oder Dateiverwaltung werden.
Bewegt man die Maus über ein Thumbnail, sollen ein paar Buttons angezeigt werden. Das habe ich mir etwa so vorgestellt:

Ein Klick auf den großen Button führt zu einem Detaildialog. Der Button oben rechts öffnet den Dateibrowser des Betriebssystems. Und der Button unten rechts springt auf die Labelling Seite, damit man direkt noch unbekannte Gesichter in dem Foto den Personen zuordnen kann. Sind alle Gesichter bereits zugeordnet, ist der Button inaktiv.
Die Browse Seite
Die Browse Seite dient einzig dazu, dass man die Fotosammlung wie in einem Dateisystem durchsuchen kann.

Ich finde das MacOS Finder Pattern ganz nett, um sich durch die Ordner zu bewegen. Das könnte aber für Nutzer auf anderen Betriebssystemen ungewohnt sein. Im unteren Bereich werden immer die Bilder im aktuell ausgewählten Ordner angezeigt.
Die Personen Seite
Auf der Personen Seite verwaltet man die Personen und ihnen bereits zugeordnete Gesichter.

Man kann wiederum die Liste der Personen durchsuchen. Wählt man eine Person aus, sieht man auf der rechten Seite die bereits zugeordneten Gesichter. Die Gesichter sind in verschiedene Altersgruppen einsortiert. Es ist möglich ein Gesicht zu entfernen oder in eine andere Altersgruppe zu verschieben. Die Änderung muss bestätigt werden.
Die Labelling Seite
Die Labelling Seite dient dazu, ein bis jetzt unbekanntes Gesicht einer Person zuzuordnen.

Meine Vermutung ist, dass man am Ende mit sehr wenigen Bildern pro Person auskommt. Es ist überhaupt nicht notwendig, hunderte oder noch mehr Bilder zu labeln. Vermutlich sucht man eher konkrete Fotos mit aussagekräftigen Gesichtern auf der Browse Seite raus und springt dann auf diese Seite, um eines oder mehrere Gesichter Personen zuzuordnen.
Bei der Zuordnung zu einer Person muss auch die Altersgruppe ausgewählt werden. Aus technischer Sicht bildet PhotoAIdent einen gemittelten Vektor pro Altersgruppe.
Bitte um Feedback
Nicht gezeigt habe ich jetzt diverse kleinere Dialoge wie die Detailansicht eines Fotos, den Dialog zum Anlegen einer neuen Person, usw.
Ich würde mich auf alle Fälle freuen, wenn der geneigte Leser vielleicht den einen oder anderen Verbesserungsvorschlag oder Anregung hat!