3.1 Methodisches Vorgehen

Autor: Dennis Klein, Marius Schäfer

Screen-Design Grundideen (Mockup) (MS)

Die erste und wichtigste Phase der Softwareentwicklung ist die Anforderungsanalyse. In dieser sollen möglichst alle Wünsche und Vorstellungen des Kunden erfasst werden, denn desto später sich diese bemerkbar machen, desto umständlicher (zeitlich/preislich) ist es, diese umzusetzen. Durch die schon erstellten User Stories, ergibt sich eine deutliche Vorstellung und Anfordeurngen an das System und die Benutzeroberfläche. (Siehe Methodik Anforderungsanalyse) Die Anwendung, egal ob mobil oder im Web, deckt mindestens drei Anwendungen ab. Dabei handelt es sich um die Kartendarstellung, den 3D-Viewer und die Anzeige eines Steckbriefs.

Webanwendung (Vollbild)

1. Wenn die Anwendung gestartet wird, steht die Karte im Vordergrund. Über die räumliche Verortung der verschiedenen unüblichen Datenträger (Handstücke/Bohrkerne), soll eine Auswahl getroffen werden, über welches Objekt Informationen im 3D-Viewer und in der Steckbriefanzeige angezeigt werden. Daraus erschließt sich, dass die Karte zunächst den Hauptanteil des Bildschirmes füllen wird.

1.1 Auf der linken Seite wird eine Leiste eingeblendet über die das Menü zur Suche aufgeklappt werden kann. In diesem kann nach verschiedenen Kriterien gesucht werden. Suchkriterien unklar (Fachleute / Interessierter / Student ...)

1.2 Aus der Suche soll eine Tabelle mit Ergebnissen angezeigt werden. Die Ergebnisse sollen in der Karte markiert werden.

2. Wurde ein Objekt gewä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 dann zusammen auf der rechten Seite ca. 1/3 des Bildschirms ein (jeder 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 weitergehend studieren, kann jede der Ansichten als Hauptfenster aufgerufen werden. Dadurch wird die Karte an den rechten Rand verschoben und der Steckbrief oder der 3D-Viewer werden groß dargestellt.

4. Für die Ansichten sollen Werkzeuge bereitgestellt werden, um einen unkomplizierten Umgang mit der Anwendung zu ermöglichen. Dazu gehören die z.B. 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.

5. Das Hauptfenster kann über die gesamte Seite vergrößert werden, sodass die an der Seite stehenden Ansichten eingeklappt werden. Dadurch kann der Fokus des Nutzers ganz auf eine der Ansichten gelegt werden, ohne das die anderen Elemente störend wirken. Gleichzeitig sollen die kleineren Fenster auch eingeklappt beziehungsweise ausgeklappt werden können, sodass das Hauptfenster circa 2/3 der Seite einnimmt und auf der rechten Seite die Nebenansicht circa 1/3 der Seite belegt.

mobile Anwendung (Handy)

1. Auch hier 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 so präzise geschieht, wie durch den Cursor am Bildschirm. 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 einblenden.

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

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

Das Mockup (Prototyp) wurde mit der Webanwendung "Figma" erstellt. Diese Webanwendung ermöglicht es kollaborativ und zu selben Zeit an einem Design zu arbeiten (ähnlich zu Google Docs). Figma lässt sich für bis zu drei Entwürfe, für ein Projekt kostenlos nutzen. Es können nicht nur Designelemente festgelegt werden, sondern unter "Prototyp", lassen sich auf Klickabfolgen umsetzen, sodass ein Klickdummy ensteht. 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 (DK)

CSS, JQuery ..

(Zurück zum Inhalt des Endberichts)