| ... | ... | @@ -3,34 +3,51 @@ |
|
|
|
|
|
|
|
# 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](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/User%20Stories), ergibt sich eine deutliche Vorstellung und Anfordeurngen an das System und die Benutzeroberfläche. [(Siehe Methodik Anforderungsanalyse)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Methodik-Anforderungsanalyse)
|
|
|
|
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](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/User%20Stories), ergibt sich eine deutliche Vorstellung und Anforderungen an das System und die Benutzeroberfläche. [(Siehe Methodik Anforderungsanalyse)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/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.
|
|
|
|
|
|
|
|
<b>Webanwendung <b>(Vollbild)
|
|
|
|
<b>Desktopanwendung<b>(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. <i> Suchkriterien unklar (Fachleute / Interessierter / Student ...)</i>
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
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 (hier beispielsweise der 3D-Viewer vergrößert).
|
|
|
|
|
|
|
|
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.
|
|
|
|
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 (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. 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 wieder nur circa 2/3 der Seite einnimmt und auf der rechten Seite die Nebenansicht circa 1/3 der Seite belegt.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<b>mobile Anwendung (Handy)<b>
|
|
|
|
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
|
|
|
|
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.
|
|
|
|
4. Über ein "Burger-Menü" lassen sich andere Bereiche der Webseite erreichen. Beispielsweise zusätzliche Informationen über das HLNUG, das Impressum oder Kontaktdaten.
|
|
|
|
|
|
|
|
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)](https://www.figma.com/file/3NnKHJvSFiaYvfGqN9lWWF/BohrungenHessen?node-id=45%3A6)
|
|
|
|
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 unter "Prototyp", lassen sich 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)](https://www.figma.com/file/3NnKHJvSFiaYvfGqN9lWWF/BohrungenHessen?node-id=45%3A6)
|
|
|
|
|
|
|
|
# Technische Umsetzung *(DK)*
|
|
|
|
CSS, JQuery ..
|
| ... | ... | |
