Interface. Interaktionsgestaltung 2. H f G Hochschule für Getsaltung Schwäbisch Gmünd. Dozent: Thomas Techert. Alexander Kodweiss Nadin Ciftci

Transkript

1 Interface Interaktionsgestaltung 2 H f G Hochschule für Getsaltung Schwäbisch Gmünd Dozent: Thomas Techert Alexander Kodweiss Nadin Ciftci

2

3 Inhalt Einleitung 4 Themenfindung 5 6 System Ist - Zustand Card - Sorting Personas Scribbles Wireframes Informationsarchitektur Erste Design-Prototypen Unsere Features Die Umsetzung Fazit 22 23

4 Einleitung Unsere Aufgabe dieses Semesters galt der Erstellung eines Interfaces aus dem Arbeitsfeld der Medizintechnik. Jede Gruppe durfte sich einen eigenen Themenbereich aus der Medizintechnik aussuchen und dafür, mit Hilfe aller gängigen Design-Methoden, eine Nutzeroberfläche entwerfen, designen und umsetzen. 4

5 Themenfindung Um ein geeigntetes Thema in der Medizintechnik zu bearbeiten, befragten wir einen Medizintechnick Studenten. Auf die Frage, in welchem Bereich es noch an Innovationen mangeln würde, empfiel er, uns die bisherigen Bildbetrachtungs-Software genauer anzuschauen. Bildbetrachtungsmittel kommen im Krankenhausalltag täglich zum Einsatz. Sie sind wichtig für das MRT, CT, US und sonstige Geräte, auf den man ein Bild des Patienten anschauen muss. Diese haben bis heute kein einheitliches Design und somit ist das sehr schwierig für die, die das bedienen. Folglich benötigen sie mehr Arbeitstunden, Einweisungen und es kommt häufig zu Fehlern. Dies galt es zu vermeiden uns zu optimieren. Bisheriges Interface. Hier wird der Patient vom Server geladen 5

6 Bisheriges Interface. Es ist unübersichtlich, hell und unverständlich. 6

7 System Wie der Datensatz Dicom gelesen wird. 7

8 Ist - Zustand Der bisherige Zustand der Bildbetrachtungsmittel ist sehr unübersichtilich und nicht benutzerfreundlich. Es gibt zu viele Buttons, die für den Nutzer nicht ersichtlich sind und es gibt auch keine Erläuterung dieser. Zu dem wird der User auch nicht durch das System geleitet, was zu einer unbefriedigenden Nutzung führt. Das heißt, für uns galt es, die Usability deutlich zu verbessern und das ganze System übersichtlicher und benutzerfreunldicher zu gestalten. Ist -Analyse stand März

9 Card - Sorting Durch das Card- Sorting wurde uns klar, welche Funktionen durch den Nutzer gewünscht waren. Durch das wiederholte Umtauschen und neue Anordnen der Karten, entwickelten wir verschiedene Varianten einer Art frühen Informationsstruktur. Die haptische Handhabung hilft dabei, ein Gefühl für die Funktionen unseres Programms zu bekommen. Card - Sorting 9

10 Personas Die Personas gaben uns einen reellen Bezug zu unserem Thema. Durch die erstellten fiktiven Personen, die unser Programm nutzen, kommen wir nicht von den eigentlichen Ideen ab, sondern bleiben bei den Endnutzern. In unserem Fall haben wir einen Arzt, eine Krankenschwester und einen Patienten genommen. Somit sind alle Endnutzer bei uns vertreten. Wie wir herausfanden, hat natrütlich der Arzt andere Ansprüche an das Programm, als ein Patient, oder eine Krankenschwester. Dabei fanden wir auch heraus, dass ein dunkles Interface gwünscht worden ist, da es auf dauer sehr anstrengend ist in einem dunklem Raum aauf einem hellen Bildschirm zu schauen. Personas von einem Arzt, einer Krankenschwester und einem Patienten. 10

11 Scribbles In unseren ersten Scribbels haben wir versucht alle Ansprüche unserer Personas zu integrieren. Dabei stellten wir fest, dass wir ein übersichtliches und klares Interface benötigen würden. Viele Dinge zuvor waren kompliziert zu verstehen und doppelt oder dreifach vorhanden. Diese kombinierten wir und lösten das Problem von zu vielen Balken und Klickfeldern. Da der Arzt auch genaue Zahlen eintippen muss, aber dennoch sehen sollte, wie weit er noch durch die Schichten gehen kann, waren ein Eingabefeld und eine Scrollbar unvermeidlich. Dafür fanden wir eine Lösung, indem wir eine Scroll- und Klickbar kreierten, die beides ermöglicht. Erste Scribbles, die eine unterschiedliche Anordnung unserer Schaltfächen zeigen. 11

12 Wireframes Nun ging es um die digitale Umsetzung unserer Skizzen. Wie wichtig es ist Pixel genau zu arbeiten, lernten wir dadurch. Unser angelegtes Format war 1920 x 1080px, was zeitgemäßem full HD entspricht, da die Ärtze keine Fehler machen dürfen, nur weil das Bild zu verpixelt ist. Wir überlegten ebenso, wie wir Anwendungen für den Nutzer verstecken können, oder eben erst sichbar machen, wenn sie benötigt werden. Dadurch wird der User nicht von einem Überfluss an Funktionen erschlagen und verwirrt werden. Dies versuchten wir mit einem Mouse-Over-State, dass nur, sobald sich die Maus über dem betroffenen Objekt befindet, etwas eingeblendet wird oder ähnliches. Sehr frühes Wireframe für das Interface des Hauptscreens

13 Dies war unser anfänglicher Login Screen Das Verstecken von Interface-Elementen sollte auch möglich sein 13

14 Diese Wireframes zeigen unsere Mouse over an. (Hier in blau dargestellt) 14

15 15 Durch ein rechtsklick, erscheinen die Tools, die der Arzt benötigt, um etwas in das Bild hinein zuzeichnen.

16 Informationsarchitektur Bei der Informationsarchitektur entschieden wir uns, möglichst auf Verschachtelungen zu verzichten und nur wenige Informationsebenen zu nutzen, auf denen alle relevanten Daten Platz finden sollten. Auf dem Hauptscreen sollten so z.b. alle Serien innerhalb der ausgewählten Studie, wichtige Daten zum Patienten selbst oder auch die selektierten Bild-Ebenen angezeigt werden. Neben dem Hauptscreen gibt es auch noch optionale Menüs für weitere Einstellungen, die nach Beendigung des jeweiligen Menü-Dialogs aber automatisch wieder auf den Hauptscreen leiten, sodass dieser immer das Hub unserer Anwendung bildet. Auch beim Weg in die Anwendung hinein entschieden wir uns dafür, dem Nutzer einen klaren Weg zu geben, damit dieser sich in der Anwendung nicht verläuft, oder bei der Anmeldung wichtige Punkte überspringt. Die grundlegende Informaionsarchitektur grob skizziert 16

17 Erste Design-Prototypen Auch, wenn die Ansätze für ein gutes Interface vorhanden waren, brauchte es noch ein passendes Design. Die Farbgebung sollte zurückhaltend sein, aber auch eine klare Hierarchisierung erlauben. Da nicht unser Design, sondern die Bildbetrachtung im Mittelpunkt unserer Anwendung stehen sollte, verzichteten wir darauf, zu viele helle Töne zu verwenden. Allgemein bewegten wir uns immer im dunklen Grau. Als Schmuckfarbe und für Highlights erlaubten wir uns auch Blautöne, für wichtige Buttons sehr helle Grautöne oder sogar Weiß, um sie hervorzuheben - natürlich nur in Maßen. Auf dieser Basis erstellten wir viele verschiedene Varianten unserer Login-Maske und des Hauptscreens, aus denen wir dann auswählen konnten. Ein früher Entwurf von der Patientenauswahl. Der Blaue Hintergrund wurde in späteren Designs wieder vorworfen. 17

18 Erste Design-Prototypen II Parallel zur Entwicklung eines Farbcodes, versuchten wir uns auch ein Form-Konzept für das Design unserer Buttons und Menü-Elemente festzulegen. Obwohl wir Anfangs noch von kantigen, rechteckigen Formen überzeugt waren, lockerten wir unser Design durch kleine runde Ecken auf und gaben der Anwendung mit Schatten mehr Plastizität. Die Entwicklung der Icons ging einen ähnlichen Weg. Die Anfangs noch sehr filigranen, modernen Icons, haben wir im Laufe des Projekts zu Gunsten der Zielgruppe durch stärker definierte Symbole ersetzt. Der Login-Screen in verschiedenen Varianten. 18

19 Unsere Features I Auf dem Weg zu einem fertigen Interface versuchten wir immer, die Bedienung einfach zu halten und mit einem zurückhaltenden, aber klar hierarchisierten Design zu unterstützen. Unter Anderem trugen eine neue Scrollbar, ein Rechtsklickmenü und eine neue Farbgebung zur komfortablen Bedienung unserer Anwendung bei. Eine frühe Design-Variante unseres Haupt-Screens 19

20 Unsere Features II Vor Allem beim Scrollen durch die Bild-Ebenen hatten bisherige Programme große Schwächen. Um die Bedienung effizienter zu machen, entschieden wir uns die Ebenen-Navigation aus der unteren, linken Ecke zu lösen und stattdessen direkt in die Bildausschnitte zu integrieren. Mit einer kleinen Infobox, die sich immer auf Höhe der Scrollbar positioniert, sieht der User auf einen Blick, in welchen Bild-Ebenen er sich gerade befindet. Der Clou an der Infobox ist, dass man dort mit einem einfachen Mausklick auch einfach eine beliebige Layer eintippen kann, zu der die Scrollbar dann automatisch springt. Nach dem selben Prinzip haben wir auch den Regler für den Bild-Kontrast gestaltet. Da dieser aber zwei bewegliche Enden hat, gibt es hier auch zwei interaktive Infoboxen. Screenshots von der Scrollbar. Links normal und rechts während Mouse-Overs 20

21 Unsere Features III Die Werkzeuge waren ein weiteres Element, das in unseren Augen noch nicht optimal war. Statt, wie üblich, Buttons für den Maßstab, den Winkelmesser u.a. ins Interface einzubauen, platzierten wir die Tools direkt an der Maus. Die Fläche, die dadurch im Interface eingespart wurde, kam außerdem dem eigentlichen kern unserer Anwendung, der Bildbetrachtung, sehr zugute. Mit einem einfachen Rechtsklick sind die Werkzeuge jederzeit, auf Wunsch und unmittelbar verfügbar. Die Richtung, in welche man die Maus während des Rechtsklicks bewegt, wählt einem das gewünschte Tool aus. Die Werkzeugauswahl. Die helle Fläche stellt dabei den Mouse-Over-Effekt dar 21

22 Die Umsetzung Nachdem alle Entscheidungen zur Informationsarchitektur, der Farbgebung und dem Design getroffen waren, stand die Umsetzung unseres Projekts auf dem Plan. Gerne hätten wir unser Interface als interaktiven Prototypen programmiert. Mangels Zeit und Programmier-Kenntnissen entschieden wir uns aber dafür, unsere Anwendung als After-Effects Animation in Video-Form zu bauen. Auch, wenn die Interaktion dabei auf der Strecke bleibt, können bei After Effects Mouse-Over-States und Transitions sehr gut veranschaulicht werden. Die Transitions zwischen den verschiedenen Screens, die Mouse-Over-Effekte der Bildansichten, die Scrollbars und einiges mehr haben wir in After Effects umgesetzt. Nachdem wir allen zu animierenden Objekten einen eigene Ebene im Illustrator-Dokument gegeben haben, war es möglich, mit diesen Elementen und einem Cursor die Bedienung unseres Programms zu simulieren. 22

23 Fazit Wir denken, dass wir unser Projekt aber erfolgreich beendet haben und unser Programm viele hilfreiche Features bietet, welche die Bildbetrachtung in der Praxis um Einiges erleichtern würde. Features, wie die interaktive Scrollbar, das Rechtsklickmenü oder auch die nutzerfreundlichen Mouse-Over-Effekte, die aus dem langen Entwicklungsprozess hervorgingen, tragen zum Erfolg unserer Anwendung bei. Die Kritik die wir untereinander austauschten oder vom Dozenten bekommen haben, brachten wir gewinnbringend in die Entwicklung unseres Design ein. Die Erfahrung, die wir während dieses Projekts erlangt haben, nehmen wir gerne in die kommenden Semester mit. 23

24 24