3.1 Methodisches Vorgehen

Autoren: Dennis Klein, Marius Schäfer

Screen-Design Grundideen (Mockup)

Autor: Marius Schäfer

Absprache mit Dennis! -> Wie in Konzeption und wie im Prototypen umgesetzt? z.B. Umschalten der Ansichten

Entsprechend der im Vorfeld erfassten User-Storys lassen sich in der Anwendung (mindestens) drei Anwendungsteile innerhalb der übergeordneten Gesamtanwendung benennen. Es handelt sich um die

• (2D-) Kartendarstellung,
• den interaktiven 3D-Viewer zur Darstellung der Gesteine (z. B. Handstücke oder Bohrkerne) und die
• Anzeige des zugehörigen "Steckbriefs".

Desktopanwendung (Vollbild)

1. Mit dem Aufruf der Webadresse soll beim Start der Anwendung die Karte in den Vordergrund gestellt werden. Über die räumliche Verortung der verschiedenen unüblichen Informationsträger (Handstücke/Bohrkerne) soll eine Auswahl getroffen werden. Über das ausgewählte Objekt sollen weiterführende Informationen im 3D-Viewer und in der Steckbriefanzeige abgebildet werden. Daraus erschließt sich, dass die Karte zunächst den Hauptanteil des Bildschirmes füllen wird. Ohne eine entsprechende Auswahl getroffen zu haben wäre es nicht praktikabel den 3D-Viewer oder die Steckbriefansicht in den Vordergrund zu stellen.

1.1 Auf der linken Seite der Karte wird über die komplette Höhe eine Leiste eingeblendet. Über diese kann das Menü zur Suche ein- und ausgeblendet werden. In den verschiedenen Feldern kann nach Kriterien gesucht werden, die in verschiedene Themen gegliedert sind.

Suchkriterien unklar (Fachleute / Interessierter / Student ...)

1.2 Nach einer durchgeführten Suche soll eine Ergebnistabelle angezeigt werden. Diese Tabelle enthält alle Objekte, die auf eines der Suchkriterien zutreffen. Alle aufgeführten Objekte sollen in der Karte markiert werden, um den räumlichen Überblick über die gefundenen Objekte zu erhalten.

Dabei sollen Häufungen der Suchergebnisse (Punkte) geclustert werden um die Übersichtlichkeit in der Karte zu erhalten. Einzelne Punkte können mit einem beliebigen Marker gekennzeichnet werden. Die Punkthäufungen (Cluster) werden mit der entsprechenden Punktanzahl beschrieben. Die Farbe des Clusterpunktes kann dabei durch die Anzahl der im Cluster enthaltenen Punkte bestimmt werden, sodass verdeutlicht wird an welcher Stelle sich die Suchergebnisse häufen. Das hellblaue Polygon veranschaulicht über welche Fläche die geclusterten Punkte verteilt sind. Vorschlag zur Implementierung

2. Wurde ein Objekt angewählt, sollen die weiterführenden Informationen über dieses Objekt auf einen Blick ersichtlich sein. Dies wird nicht über einen weitere Interaktionen realisiert, sondern die Steckbriefanzeige und der 3D-Viewer nehmen zusammen auf der rechten Seite ca. 1/3 des Bildschirms ein (jede Anzeige ca. 1/6 des Bildschirms). Diese können von Anfang an geöffnet und zunächst leer sein oder sich erst mit Klick auf ein Objekt öffnen. Gleichzeitig kann der Nutzer in dieser Ansicht noch leicht auf ein anderes Objekt wechseln, da die Karte noch im Vordergrund steht und die weiterführenden Informationen schnell überflogen werden können, ob dieses Objekt wirklich von Interesse ist.

3. Möchte der Nutzer die zusätzlichen Informationen zum Objekt intensiver betrachten, kann jede der Ansichten in das Hauptfenster verschoben werden. Dadurch wird die Karte an den rechten Rand verschoben und der Steckbrief oder der 3D-Viewer werden groß dargestellt (hier beispielsweise der 3D-Viewer vergrößert). Die Verschiebung wird durch einen Button realisiert, da dies für den Nutzer ersichtlicher ist, als eine Interaktion per Drag-and-Drop.

4. Für die Ansichten sollen Werkzeuge bereitgestellt werden, um einen unkomplizierten Umgang mit der Anwendung und weitere Interaktionen zu ermöglichen. Dazu gehören z.B. die Standardwerkzeuge einer Karte (Zoomen, Schieben, zur letzten Ansicht ...) oder auch die Werkzeuge für den 3D-Viewer (Ausdehnung auf Objekt setzten, Achsen anzeigen ...). Diese sollen allerdings nur im Hauptfenster zur Verfügung stehen, um eine Überladung der kleineren Fenster zu vermeiden (siehe linke obere Ecke im Screenshot mit vergrößertem 3D-Viewer).

5. Das Hauptfenster kann über die gesamte Seite vergrößert werden, sodass die an der Seite stehenden Ansichten eingeklappt werden und nicht mehr sichtbar sind. Dadurch kann der Fokus des Nutzers ganz auf eine der Ansichten gelegt werden, ohne dass die anderen Elemente störend wirken. Für Nutzer die auf einem Bildschirm arbeiten wird die Arbeit auf einem geteilten Bildschirm vereinfacht. Zum Beispiel wird auf der linken Hälfte die vergrößerte Ansicht des Steckbriefs angezeigt und auf der rechten Hälfte ein Word-Dokument in das einzelne Informationen des Steckbriefs übernommen werden sollen. Gleichzeitig sollen die kleineren Fenster auch eingeklappt, beziehungsweise ausgeklappt werden können, sodass das Hauptfenster wieder nur circa 2/3 der Seite einnimmt und auf der rechten Seite die Nebenansicht circa 1/3 der Seite belegt.

mobile Anwendung (Handy)

1. Es wird als Startanzeige die Karte in den Vordergrund gestellt. Über die räumliche Verortung der verschiedenen unüblichen Datenträger (Handstücke/Bohrkerne), soll eine Auswahl getroffen werden. Dabei ist auf dem Handy oft der Fall, dass eine Auswahl mit dem Finger nicht sehr präzise geschehen kann, wie durch den Cursor und Maus am Computer. Daher sollen die Objekte in der näheren Umgebung als Liste angezeigt werden. Mit einem Tippen in die Liste wird ein Objekt in der 3D-Ansicht geöffnet. Dort lassen sich dann über andere Icons der Steckbrief, die verschiedenen Schichten des Bohrkerns und weitere Optionen/Werkzeuge für die gerade geöffnete Ansicht einblenden.

2. Der eingeblendete Steckbrief beziehungsweise die Ansicht des Steckbriefs muss nicht die komplette Seite einnehmen. Denkbar wäre, dass diese nur ca. 1/3 der Seite einnimmt. Um alle Informationen einzusehen kann durch den Steckbrief gescrollt werden. Denkbar wäre eine Möglichkeit zur Maximierung der Steckbriefansicht über die ganze Seite.

Die mobile Anwendung soll nicht über nicht so viele Buttons verfügen, wie die Desktopanwendung. Diese nehmen viel vom Bildschirm ein, denn sie benötigen eine Mindestgröße von ca. 9 mm x 9 mm, um gut bedienbar zu sein.

3. In der Karte gibt es nur einen Layer-Button, mit dem sich eine Auswahl an Karten für die Kartenansicht ein-/ausblenden lässt.

4. Über ein "Burger-Menü" lassen sich andere Bereiche der Webseite erreichen. Beispielsweise zusätzliche Informationen über das HLNUG, das Impressum oder Kontaktdaten.

Das Mockup (Prototyp) wurde mit der Webanwendung "Figma" erstellt. Diese Webanwendung ermöglicht es kollaborativ und zur selben Zeit an einem Design zu arbeiten (vergleichbar zu Google Docs für Textdokumente). Figma lässt sich für ein Projekt mit bis zu drei Entwürfen kostenlos nutzen. Es können nicht nur Designelemente festgelegt werden, sondern auch Klickdummys erzeugt werden. Dafür lasen sich unter "Prototyp" Klickabfolgen umsetzen. Ein Klickdummy zeigt einige einfache Funktionen der Anwendung, ohne diese programmieren zu müssen. In dem vorliegenden Entwurf ist das Vertauschen der einzelnen Fenster beispielhaft realisiert. (Link Mockup)

Technische Umsetzung

Autor: Dennis Klein

CSS, JQuery .. ToDo

(Zurück zum Inhalt des Endberichts)