3.1 Methodisches Vorgehen

Autor: Dennis Klein, Marius Schäfer

Screen-Design Grundideen (Mockup) (MS)

Die erste und wichtigste Pahse 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)

Hin- und Herschalten der Bereiche, Aufteilung des Screens (warum 3 anstatt 2 o.ä.).

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 einfach 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)