User Interface Redesign

[HellerDominik]

Ich arbeite seit einiger Zeit parallel an einem Redesign von IMIS und würde gerne Feedback dafür bekommen.

Patientenübersicht

1. Meine Patientenübersicht sieht oben links einen Button zum Anlegen eines neuen Patienten vor.

2. Es gibt keinen Suchen-Button, Erweiterte Suche klappt die Funktionen aus.

3. Bei den Inhalten der Tabelle und der Reihenfolge besteht auf jeden Fall noch Gesprächsbedarf und ich wüsste gerne von Menschen vom Gesundheitsamt was hier benötigen.

4. Als sinnvoll erachte ich die Checkboxen vor den einzelnen Einträgen und der All-Check. In Verbindung mit (CSV)-Export auf jeden Fall sinnvoll, evtl. auch für andere Bulk Operations.

5. Den Bereich unterhalb der Liste etwas aufgeräumt und Raum gegeben.

Neuer Eintrag

Erstellt man nun einen neuen Eintrag hat man nur die initialen Daten.

1. Mir ist es sehr wichtig, dass die Überschriften der Textboxen nicht davor stehen, wie jetzt, sondern darüber. Das fördert die Lese- und Bearbeitungsgeschwindigkeit.

2. Hat man alle Daten eingetragen kann den Patienten/die Patientin anlegen.
   

Patient angelegt 1

Nun gelangt man auf diese Seite. Das ist eine Übersicht über alle Daten die bis jetzt eingetragen wurden.

1. Da diese Übersicht über die Patienten-Daten sehr voll werden kann ist es sowohl möglich die einzelnen Handlungsbereiche über den Pen an der jeweiligen Box zu erreichen, als auch über die durchklickbaren Tabs oben. Diese Übersicht bleibt allerdings immer an Position 1.

2. Am unteren Ende befindet sich auch eine kurze Übersicht über die letzten 5 (tbd) Änderungen im Verlauf.

Beispiel: Symptome eintragen

Nun hat man auch die Möglichkeit alle Möglichen Einträge untereinander zu schreiben und auch hier die Lesbarkeit zu optimieren.

Patient angelegt 2

Es wurden einige Änderungen am Patienten gemacht, diese werden hier angezeigt.

[Jochen-Sch]

Generell gefallen mir viele Dinge ganz gut ... aber es muss bzgl. der Reduzierung der Applikationen auch daran gedacht werden dass alle Dialoge von verschiedenen Bereichen aus aufrufbar bzw verlinkbar sein müssen (ggf. auch ohne Patientenliste). Dies gilt insbesondere für andere Rollen als das GA.

Zu Applikationsmenü - Applikationsbereiche müssen linksbündig sei - sieht sonst echt sch... aus.
Zu Applikationsheader - Suche muss da weg - das mach überhaupt keine Sinn (was soll denn hier gesucht werden)
Zu Applikations-Frame - Farbgebung nicht geeignet sofern das logo angezeigt werden soll, weil das Logo so nicht lesbar ist.

Zu Patientenübersicht Punkt 1: ich vermute du meinst links (nicht rechts) - finde ich gut
Zu Patientenübersicht Punkt 2: wir brauchen das Auslösen der Suche - eine Suche die automatisch ausgeführt wird geht auf Dauer nicht (Performance) - ansonsten gut
Zu Patientenübersicht Punkt 3: Vorschlag find ich schon mal ganz gut (aber die letzten Änderungen die wir wg. Übersichtlichkeit und mehr Infos in der Liste bereits umgesetzt haben fehlen - darüber hinaus gehören Texte linksbündig)
Zu Patientenübersicht Punkt 4: Find ich sehr gut

Neuer Eintrag Punkt 1: Stimme ich voll zu und mach auch Übersetzungen einfacher
Neuer Eintrag Sonstiges: Strasse und Hausnummer in einem Feld (2 separate Felder machen nur Sinn wenn man eine Address-Verification dahinter hat - und eigentlich heutezutage auch dann nicht mehr)

Patient angelegt 1: Ist aus meiner Sicht das Gegenteil von Übersichtlich - was soll der Pen genau darstellen - normalerweise Ändern (hier wird aber soweit ich verstanden hab nix geändert wenn man draufklickt, sondern?)

Beispiel Symptome eintragen: Zur Pflege finde ich die Seite sehr gut

Patient angelegt 2: warum nur Änderungen? - macht aus meiner Sicht keinen Sinn und oben gibt es zu viele Bereiche was dazu führt dass der User potentiell mehr klicken muss um das zu sehen was er/sie will

Zitat des GA: "Übersichtlichkeit ist alles" (d.h. viel Info ohne Scrollen oder Screenwechsel)

[HellerDominik]

Hey, danke für das Feedback :)

Generell gefallen mir viele Dinge ganz gut ... aber es muss bzgl. der Reduzierung der Applikationen auch daran gedacht werden dass alle Dialoge von verschiedenen Bereichen aus aufrufbar bzw verlinkbar sein müssen (ggf. auch ohne Patientenliste). Dies gilt insbesondere für andere Rollen als das GA.

Was meinst du damit konkret? Dass wir "Patient eintragen" ohne den "Umweg" über die Patientenliste auch links anbieten? Das halte ich auch für sinnvoll, ja.
Wäre zwar doppelt aber für alle die es an einem anderen Ort vermuten erreichbar.

Zu Applikationsmenü - Applikationsbereiche müssen linksbündig sei - sieht sonst echt sch... aus.

Ja, kein Problem.

Zu Applikationsheader - Suche muss da weg - das mach überhaupt keine Sinn (was soll denn hier gesucht werden)

Alles ;) Ich glaube hier wäre eine Treffersuche über alle Patienten, Tests, Proben etc. sehr gut, ist aber ein Nice-To-Have.

Zu Applikations-Frame - Farbgebung nicht geeignet sofern das logo angezeigt werden soll, weil das Logo so nicht lesbar ist.

Ja, ich finde es geht noch allerdings könnte es besser sein. Das stimmt.

Kleiner Vergleich hierzu: unser IMIS Twitter-Account benutzt das ursprüngliche Logo. Meine Version hat weiße Schrift und kommt damit auf dem grauen Hintergrund noch einigermaßen klar. Mal einheitlich machen.

Zu Patientenübersicht Punkt 1: ich vermute du meinst links (nicht rechts) - finde ich gut

fixed

Zu Patientenübersicht Punkt 2: wir brauchen das Auslösen der Suche - eine Suche die automatisch ausgeführt wird geht auf Dauer nicht (Performance) - ansonsten gut

Hab ich natürlich auch blöd formuliert 😁
Ich meinte Enter als Suche. Sorry

Zu Patientenübersicht Punkt 3: Vorschlag find ich schon mal ganz gut (aber die letzten Änderungen die wir wg. Übersichtlichkeit und mehr Infos in der Liste bereits umgesetzt haben fehlen - darüber hinaus gehören Texte linksbündig)

Aye

Neuer Eintrag Sonstiges: Strasse und Hausnummer in einem Feld (2 separate Felder machen nur Sinn wenn man eine Address-Verification dahinter hat - und eigentlich heutezutage auch dann nicht mehr)

Aye

Patient angelegt 1: Ist aus meiner Sicht das Gegenteil von Übersichtlich - was soll der Pen genau darstellen - normalerweise Ändern (hier wird aber soweit ich verstanden hab nix geändert wenn man draufklickt, sondern?)

Gut, dass du es so ansprichst. Dann hab ich es noch nicht gut genug erklärt.
Diese Seite ist eine Übersicht über alle Informationen, die bereits über den Patienten vorliegen. Klickt man entweder auf den Pen neben dem jeweiligen Segment oder wählt den Tab oben aus, gelangt man in die jeweilige Bearbeitungsansicht, wo man diese Änderungen eintragen kann.
Der Grund dafür ist, dass diese Liste von Informationen hier sehr lang werden kann, wenn erstmal Symptome, Exposition, Infektionskette etc. eingetragen sind. Dafür sind dann die Tabs oben wieder mein Mittel der Wahl.

[btobi]

Hey Dominik. Ich finde die Initiative für ein Frontend UI UX Konzept auf jeden Fall notwendig und richtig. Hier mal meine Perspektive:

Mir ist aktuell nicht ganz klar, ob wir hier über UX oder UI, oder beides sprechen. Deine Bilder sind mehr als das, was man normalerweise als Wireframe bezeichnen würde. Aber manche zu schematisch für einen Designentwurf (bspw. Formular "Neuer Eintrag").

Als Frontend UI Framework verwenden wir Ant Design. Es ist essentiell, dass wir, wo immer möglich, Design Elemente davon verwenden. Alles andere ist ein erheblicher Aufwand ohne Mehrwert.

Du gehst hier schon auf wichtige Punkte einzelner Komponenten und Views ein, bspw. Positionierung von Labels, Informationshandling bei viel Content usw. Anstatt aber hier einzelne Todos zu erstellen, wäre es sinnvoller, ein generelles Konzept für Seiten aufzubauen, um wiederkehrende Probleme anzugehen. Ein paar Beispiele:

• Wie stellen wir generell viel Content dar (Tabs, Scrolling)?
• Wie handlen wir große Formulare (Tabs, Wizards, Collapsibles)?
• Was sind die essentiellen Elemente und Bereiche einer Seite (Headline, Infosection, Actionbuttons, nur ein CTA pro Seite)?
• Guidelines für Formulardesign

Sobald wir ein Konzept haben, können wir auch daraus tatsächliche Issues für einzelne Seiten ableiten, nicht anders herum. Für jede Seite, die neu erstellt wird, kann sich ein Entwickler dann an den Vorgaben entlanghangeln.

Ich würde vorschlagen, dass wir hierfür für bessere Übersichtlichkeit ein geteiltes Dokument (oder mehrere) anlegen, und die Diskussion über Discord weiterführen.

[HellerDominik]

Hey @btobi ,

danke für das Feedback.
Ich bediene grundsätzlich beides und die Wireframes sind nur eine Crunchtime davon entfernt auch tatsächliche Clickdummies zu sein ;)
Tatsächlich sind sie schon pixelgenau ausgearbeitet und ich müsste sie nur noch mit etwas Logik füllen, bis man zu dem Look auch ein Feel bekommt.

Als Frontend UI Framework verwenden wir Ant Design. Es ist essentiell, dass wir, wo immer möglich, Design Elemente davon verwenden. Alles andere ist ein erheblicher Aufwand ohne Mehrwert.

Das weiß ich und ich versuche mich an Ant zu orientiere, so war ich zumindest mit Jonathan so verblieben, dass ihr die Sachen mit Ant-Komponenten so nachbaut.
Hin und wieder, beispielsweise bei Titel über Input Fields, statt davor, bietet Ant eben keine State of the Art-Lösung an und ich wäre echt dankbar, wenn man da (vermutlich nur einmal?) einen Umbau machen könnte. Allerdings ist auch das Verhandlungssache. Nur wenn wir ein Produkt entwickeln, dass es sich auf die Fahnen schreibt schneller zu bedienen zu sein als die der Konkurrenz, sollten wir auch alles dafür tun und uns nicht auf einen limitierten Baukasten beschränken.

Anstatt aber hier einzelne Todos zu erstellen, wäre es sinnvoller, ein generelles Konzept für Seiten aufzubauen, um wiederkehrende Probleme anzugehen.

Todos habe ich noch gar keine erstellt. Die Anweisung im letzten Call war es das ganze nicht im Discord abzufrühstücken sondern hier eine Diskussion zu starten. Hier sind wir.

In meiner perfekten Welt entwickle ich mit Endanwendern (oder zumindest mit den Entwicklern) ein Design iterativ, basierend auf einem Prototypen, den es schon gibt und der weniger zeitaufwändig ist als jede geschriebene Zeile Code. Ich will meinen Aufwand nicht schmälern aber das Konzept ist in ca. 8 Arbeitsstunden entstanden. Ich halte gerne Rücksprache mit Projektleitung und Entwicklern lasse jedes Feedback einfließen und gehe grundsätzlich gerne die großen Themen als erstes an um davon am Ende abzuleiten wie der Rest aussehen kann. Und das ist auch hier passiert.

Wie stellen wir generell viel Content dar (Tabs, Scrolling)?
Wie handlen wir große Formulare (Tabs, Wizards, Collapsibles)?
Was sind die essentiellen Elemente und Bereiche einer Seite (Headline, Infosection, Actionbuttons, nur ein CTA pro Seite)?

Kommt drauf an ;)

Ich glaube es täte dem Design und auch meiner Arbeitszeit, gut wenn wir uns in einem Meeting zusammensetzen und das mal besprechen, ob und was wir von meinem Design umsetzen und wie wir da weitermachen.

[btobi]

Ich glaube es täte dem Design und auch meiner Arbeitszeit, gut wenn wir uns in einem Meeting zusammensetzen und das mal besprechen, ob und was wir von meinem Design umsetzen und wie wir da weitermachen.

Das denke ich auch. Lass uns da sehr gerne was ausmachen. :)

Titel über Input Fields, statt davor, bietet Ant eben keine State of the Art-Lösung an

Formlabels vertikal ausrichten ist auf jeden Fall ein wichtiger Punkt. Tatsächlich gibt es das, und ich habe das auch gestern in so gut wie allen Formularen umgesetzt. Ist auch auf staging schon deployed.

[btobi]

Was wir meiner Meinung nach benötigen, sind mehr schematische Wireframes, die wir dann über den User Flow miteinander verknüpfen.

Für mich würde so etwas so aussehen: Wireframe Flow oder Wireframe Flow Mobile

Die Seiten würde ich dann schematisch so darstellen:

• als Wireframe / Layout oder
• als Pencil Wireframe

Für mich geht hier Funktionalität vor Design. Warum? Weil das Design / die UI uns sowieso von Ant Design schon fertig geliefert wird, und wenn wir deren Komponenten verwenden, sieht das alles schon ganz gut aus.

[HellerDominik]

Nach Rücksprache mit dem Entwickler-Team möchte ich bis Mittwoch mit dem Redesign fertig sein und die Änderungsvorschläge von hier und vom Gesundheitsamt mit einfließen lassen. Das Ergebnis soll ein Clickdummy sein der die Bedienung gut darstellt und neben dem Look auch ein Feel liefert.

[HellerDominik]

Ich habe das Feedback aus dieser Runde und vom Gesundheitsamt einfließen lassen und den Prototypen noch einmal aktualisiert. Ich würde mich wieder sehr über Feedback freuen.

[HellerDominik]

Clickdummy aus der Präsentation hier:

https://ng1mrf.axshare.com/
SacredHeart2020

Folgt den gelben Pfeilen