SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Downloaden Sie, um offline zu lesen
Produktentwicklung und -evaluation


Listenbasierte Navigation mit Widgets
– ein objektorientiertes Konzept zur
GUI-Gestaltung von eHealth-Anwendungen
Gunter Dubrau
User Interface Design-Team, InterComponentWare AG


1 Problemstellung
   Die MedTech-Welt ist
in Bewegung geraten. Der-
zeitige Herausforderungen
sind erhöhter Preis- und
Kostendruck in den Gesund-
heitsmärkten, international
verschärfter Wettbewerb so-
wie verstärkte regulatorische
Anforderungen. Speziell in
der Verbindung zwischen
MedTech-Industrie         und
Endkunde werden Soci-
al Media, Health Records,
Consumer Electronics und
Mobile Health eine zentrale
Bedeutung bekommen. Die-
se stellen die Trägermedien
                                Abb. 1: Ausgestaltung einer ICWLösung mit entsprechenden Benutzungsoberflächen für Portale
für den Austausch von Infor-
mationen dar.
   Gefragt sind dabei für die verschiedenen Nutzergruppen und innovatives Interaktionsdesign mit hohem qualitativen




                                                                                                                             Produktentwicklung und -evaluation
jeweils angepasste, aber dennoch konsistente und qualitativ Anspruch. Dass dieser Anspruch erfüllt wird, zeigt der große
hochwertige Sichten auf die vernetzten Datenbestände, um Erfolg dieser Produkte.
auf gesundheitsrelevante Daten und Informationen, z. B. von           Im Folgenden verwendete Begriffe wie Widget, Gadgets
medizinischen Geräten, bedarfsgerecht zugreifen zu können. oder Portlet stehen typischerweise im Bereich der programm-
Die damit einherghende Vielfalt der Zielgruppen, die sehr un- technischen Realisierung für ganz bestimmte Technologien.
terschiedlichen Anwendungsbereiche und die Forderung nach Es sei ausdrücklich darauf hingewiesen, dass die Verweise auf
einer Corporate Product Identity stellen weitere Herausforde- Google und andere keinerlei Implikationen auf eventuell zu
rungen dar.                                                        verwendende Technologien haben. Dieses Thema wird be-
   Das User Interface Design-Team von ICW hat sich der wusst ausgeklammert, ohne die Einschränkungen durch tech-
Herausforderung gestellt, eine moderne und anspruchsvol- nologische Rahmenbedingungen außer Acht lassen zu wollen.
le Benutzungsoberfläche zu konzipieren und zu entwickeln, Es geht hier ausschließlich um die Darstellung der dort ver-
die für die unterschiedlichen Zielgruppen gut verwendbar ist wendeten Interaktionskonzepte.
und gleichzeitig die geplante Einbindung von Medizinischen
Geräten, Social Media, Health Records und Mobile Health
ermöglicht.                                                            Autor: Dubrau, G.
                                                                  Titel: Listenbasierte Navigation mit Widgets – ein
2 Lösungsansatz                                                   objektorientiertes Konzept zur GUI-Gestaltung von
   Bei Recherchen zur Ausarbeitung des Interaktionskon-           eHealth-Anwendungen
zeptes haben wir uns an Marktführern, wie z. B. Google,           In: Duesberg, F. (Hrsg.) e-Health 2012,
Yahoo, Twitter, Facebook, LinkedIn und Microsoft orien-           Solingen (2011), Seiten: 309-315
tiert. Die Anwendungen dieser Firmen stehen für modernes



                                                                                                    e-Health 2012 |   309
Drei grundlegende Kon-
                                     zepte für die Interaktions-
                                     gestaltung wurden identi-
                                     fiziert.
                                         1. Left-Rail Naviga-
                                              tion (Navigations-
                                              baum links)
                                         2. L i s t e n b a s i e r t e
                                              Darstellung           der
                                              N u t z u n g s o b j e k-
                                              te (Short & Long
                                              Lists)
                                         3. Widgets als vari-
                                              abel       gestaltbare
                                              Sichten auf Listen
                                              und deren Einträge
                                              (Werte)
                                         Beispielhaft seien diese
                                         drei Interaktionskonzep-
                                         te anhand von iGoogle
                                         (siehe Abbildung 2) auf-
                                         gezeigt. Ordnet man sie
                                         dieser Anwendung zu,
                                         dann ergibt sich folgen- Abb. 2: iGoogle mit 1. Left-Rail Navigation (Navigationsbaum links), 2. Listenbasierter Darstellung der Nut-
                                         des Bild:                       zungsobjekte (Short List) und 3. Widgets (= Gadgets) als variabel gestaltbare Sichten

                                         1. Left-Rail Navigati-
                                              on (Navigationsbaum links) Startseite                             Interaktionsgestaltung dieser Anwendung zu, dann ergibt sich
                                              a) Google News                                                    folgendes Bild:
                                              b) Wetter                                                            1. Left-Rail Navigation (Navigationsbaum links)
                                              c) Spiegel Online                                                         a) Eigene Dateien
                                              d) ...                                                                        i) Dokumente
                                         2. Listenbasierte Darstellung der Nutzungsobjekte                                  ii) Fotos
                                              (Short & Long Lists)                                                      b) Schnellansichten
                                              a) Google News                                                                i) Neueste Dokumente
                                              b) Spiegel Online – Schlagzeilen                                              ii) Für Sie freigegebene Dokumente
                                         3. Widgets (= Gadgets) als variabel gestaltbare                           2. Listenbasierte Darstellung der Nutzungsobjekte
Produktentwicklung und -evaluation




                                              Sichten auf Listen und deren Einträge (Werte)                             (Long Lists)
                                              Alle Kästchen besitzen Widget-Charakteristika, wie                        a) Ordner
                                              a) Titel und Rahmung                                                      b) Dokumente
                                              b) Funktionen wie Minimierung, Ausblenden und                        3. Widgets werden nicht verwendet
                                                  Verschieben
                                              c) Teilweise mit
                                                  Grafiken, teilwei-
                                                  se mit Aufl istun-
                                                  gen (Short Lists)
                                              d) Option für Wech-
                                                  sel zur detailierte-
                                                  ren View
                                                  (z.B. „BILD.de
                                                  alle Artikel“ führt
                                                  zu einer Long
                                                  List)
                                        Als zweites Beispiel sei
                                     Microsoft SkyDrive aufge-
                                     zeigt (siehe Abbildung 3).
                                     Ordnet man die drei grund- Abb. 3: Microsoft SkyDrive mit 1. Left-Rail Navigation (Navigationsbaum links) und 2. Listenbasierter Darstel-
                                     legenden Konzepte für die lung der Nutzungsobjekte (Long List)



                                     310 | e-Health 2012
präsentiert werden. Achtet man genau auf die
                                                                                           verwendeten Bezeichner (Substantive mit-
                                                                                           schreiben!), lässt sich ein erstes Modell der
                                                                                           benötigten Nutzungsobjekte ableiten.
                                                                                              Die folgende Struktur zeigt beispielhaft
                                                                                           ein so abgeleitetes, sehr reduziertes und ledig-
                                                                                           lich eindimensionales Modell der Nutzungs-
                                                                                           objekte.
                                                                                              Patient:
                                                                                           f Demographische Angaben
                                                                                           f Medizinische Daten
                                                                                           f Aufgaben
                                                                                           f Ereignisse
                                                                                              Im Interesse einer einfachen Verständlich-
                                                                                           keit wurde auf eine vollständige Darstellung
                                                                                           verzichtet. „Patient“ muss nicht immer das zen-
Abb. 4: Generelles Layout-Konzept                                                          trale Nutzungsobjekt sein. Dies ist durch eine



   Zusätzlich interessant in
SkyDrive ist der Umgang mit
Funktionen. Es wird neben
der klassischen Toolbar oben
auch ein kontextspezifischer
Tool-Bereich rechts von der
Liste verwendet. Dadurch
wird eine Überfrachtung der
Toolbar vermieden. Die spe-
zifischen Funktionen können
textuell benannt werden, was
die Selbstbeschreibungsfä-
higkeit und damit die Usa-
bility erhöht. Auch ist eine
größere Menge an Funktio-
                                    Abb. 5: Integration von Listen in Navigation- und Content-Bereich
nen abbildbar.




                                                                                                                                              Produktentwicklung und -evaluation
3 Lösungsoption:                                                         Kontextanalyse mit dem Kunden zu verifizieren. Auch haben
Kombination der drei Interaktionskonzepte                                Objektmodelle in der Regel eine viel breitere und detailliertere
in einer eHealth-Anwendung                                               Ausprägung als das hier verwendete.
                                                                            Für das GUI-Konzept selbst ist es allerdings wichtig, dass
Erster Schritt: Modell der Nutzungsobjekte                               im Weiteren nicht nur von einem Patienten gesprochen wird,
pragmatisch ableiten                                                     sondern von mehreren. Solche Klassen von Objekten bilden
   In der Literatur finden sich viele, sehr gut durchdach-               auch die „Aufgaben“ und „Ereignisse“. Die beiden anderen
te Modelle, wie eine GUI entstehen sollte. Ohne weiter auf               Positionen „Demographische Angaben“ und „Medizinische
diese einzugehen, seien hier der „Prozess zur Gestaltung ge-             Daten“ dienen zur Beschreibung des Patienten und sind ab-
brauchstauglicher interaktiver System“ [DIN EN ISO 9241-                 strakterer Natur. Sie bilden keine Nutzungsobjekte im enge-
210], „User-Centered Design Process“ [Design@IBM 2011]                   ren Sinne. Alle Positionen sind dem Patienten untergeordnet
und „The Usability Engineering Lifecycle“ [Mayhew 1999]                  (Menschen denken zuerst an Menschen und dann an Dinge).
genannt. Zum Verständnis dieses Artikels sollte es aber nicht
nötig sein, sich vorher dieses Usability-Fachwissen aneignen             Zweiter Schritt: Einordnung der
zu müssen. Es wird bewusst pragmatisch und mit möglichst                 Nutzungsobjekte in das Layout
einfachen Mitteln vorgegangen.                                              Im zweiten Schritt wird ein Layout verwendet, das sowohl
   Eines der einfachsten Mittel im berufl ichen Alltag ist das           die Left-Rail Navigation (Navigationsbaum links) und die
Gespräch mit dem Kunden. Durch weitere Diskussionen mit                  Listenbasierte Darstellung der Nutzungsobjekte ermöglicht
Kollegen und Experten aus Vertrieb und Produktmanage-                    (siehe Abb. 4).
ment lassen sich relativ schnell erste Beispiel-Szenarien ablei-             Sowohl im Desktop als auch im Internet ist dieses Layout
ten, die mit dem Protoypen im Rahmen einer Konzeptstudie                 oft zu finden. Somit ist die Mehrzahl der Anwender gut damit



                                                                                                                    e-Health 2012 |   311
Da in den Listen gesucht
                                                                                                                                                 werden kann, sollten die Su-
                                                                                                                                                 chen auch als Filter speicher-
                                                                                                                                                 bar sein. Dazu wurde die
                                                                                                                                                 Navigation um den Eintrag
                                                                                                                                                „Search Folders“ erweitert.
                                                                                                                                                 Gelöschte      Listeneinträge
                                                                                                                                                 können ebenfalls über die
                                                                                                                                                 Navigation angezeigt werden,
                                                                                                                                                 wieder in Listenform.

                                                                                                                                                 Dritter Schritt: Inte-
                                                                                                                                                 gration von Widgets
                                                                                                                                                 in Übersichtsseiten
                                                                                                                                                     Als dritter Schritt werden
                                     Abb. 6: Integration von Widgets in den Arbeitsbereich                                                        Widgets integriert, vorerst
                                                                                                                                                  nur auf den Übersichtsseiten
                                     vertraut. Vor allem bei Anwendungen in der Arbeitswelt sollte              (1. Navigationsebene, z. B. in Workspace) (siehe Abb. 6).
                                     auf ungewöhnliche Layout-Entscheidungen verzichtet wer-                        Im Arbeitsbereich (Workspace) sind zwei verschiedene Ar-
                                     den. Die Aufl istung (un-)möglicher Layouts ließe sich zwar                ten von Widgets zu erkennen.
                                     mit „Navigation rechts“ sehr schnell und einfach beginnen,                     1. Short Previews
                                     wohl aber kaum vollenden.                                                      2. Short Lists
                                       Verzichtet wurde in diesem generellen Layout-Konzept auf                     In der Watchlist als „Short Preview“ können für einzelne
                                     die klassische Menu-Konstruktion aus dem Desktop-Bereich                   Patienten wichtige Informationen angezeigt werden. Im me-
                                                                                                                                                  dizinischen Umfeld können
                                                                                                                                                  das z. B. Patienten sein, auf
                                                                                                                                                  die der Nutzer besonders ach-
                                                                                                                                                  ten möchte. Im Widget „Last
                                                                                                                                                  Changes“ werden alle letzten
                                                                                                                                                  Änderungen als sogenannte
                                                                                                                                                 „Short List“ angezeigt. Die-
                                                                                                                                                  se „Short List“ ist wiederum
                                                                                                                                                  eine Vorschau auf eine der
                                                                                                                                                  Listen, die in ihrer komplet-
                                                                                                                                                  ten Form über die Navigation
                                                                                                                                                  erreichbar ist. Die Short List
Produktentwicklung und -evaluation




                                                                                                                                                  zeigt nur einige Spalten und
                                                                                                                                                  Listeneinträge an, die über
                                                                                                                                                  entsprechende Eigenschaften
                                                                                                                                                  des Widgets definiert werden.
                                     Abb. 7: Das zentrale Nutzungsobjekt „Patient“ als neuer Navigationsblock
                                                                                                                                                  Eine vollständige Aufl istung
                                                                                                                                                  aller Typen von Widgets
                                     (File – Edit – View – Insert – Format – Tools – Window –                   wird hier aber nicht versucht. Es sei lediglich noch auf die
                                     Help). Sie hat sich in Web-Anwendungen fast gar nicht etab-                Möglichkeit hingewiesen, Widgets auch als Grafiken zu rea-
                                     liert. Das Fehlen dieses eigentlich sinnvollen Konstrukts wird             lisieren, z.B. für die Anzeige statistischer Daten oder medizi-
                                     durch den Einsatz der Toolbar kompensiert.                                 nischer Indikatoren.
                                        Die listenbasierte Darstellung der Nutzungsobjekte erfolgt                  Damit auch ausgeblendete Widgets wiederhergestellt und
                                     im Content-Bereich. Diese Listen sind primär über die Na-                  weitere Widgets hinzugefügt werden können, wurde die Funk-
                                     vigation links erreichbar. Sie enthalten einen oder mehrere                tion „Add Widget“ in den Navigationsbereich eingeführt. Für
                                     Einträge und sind sortier- und fi lterbar. Mit den Funktionen              jedes eingeblendete Widget wird ein Eintrag in der Navigation
                                     in der Toolbar können die Listen-Einträge einzeln oder ge-                 angelegt. Wird ein Widget ausgeblendet, dann verschwindet
                                     meinsam bearbeitet werden (siehe Abb. 5).                                  der entsprechende Eintrag auch in der Navigation.
                                        Links in der Navigation finden sich die als Nutzungsob-
                                     jekte identifizierten Begriffe wieder: Patienten, Aufgaben und             Vierter Schritt: Anzeige des Patienten als
                                     Ereignisse. Sie stehen für Listen von Einträgen. Für jeden                 zentrales Nutzungsobjekt
                                     dieser Navigationspunkte wird im Content-Bereich eine Liste                  Da in diesem Beispiel der Patient als zentrales Nutzungs-
                                     von Einträgen angezeigt.                                                   objekt angesehen wird, werden die Attribute des Patienten



                                     312 | e-Health 2012
in den Arbeitsbereich).
                                                                                                              Alle Elemente und Listen
                                                                                                              beinhalten nur Angaben
                                                                                                              zu dem jeweils „geöff-
                                                                                                              neten“ Patienten. Durch
                                                                                                              die Nutzung der Widgets
                                                                                                              kann in Übersichtsseiten
                                                                                                              der einzelnen Patienten
                                                                                                              ein in sich konsistentes
                                                                                                              Interaktionskonzept ge-
                                                                                                              währleistet werden.
                                                                                                                 Als eine Variante wird
                                                                                                              hier ein nicht abschalt-
                                                                                                              bares Widget für die De-
                                                                                                              mographischen Angaben
                                                                                                              eingeführt, während die
                                                                                                              Medizinischen       Daten,
                                                                                                              ebenso wie die anderen
                                                                                                              Widgets, ab- und zuge-
                                                                                                              schaltet werden können.
                                                                                                              Dieser Umgang mit zen-
Abb. 8: Konzeptstudie des ICW Care Manager mit 1. Left-Rail Navigation (Navigationsbaum links), 2. Listenba-  tral wichtigen Informati-
sierter Darstellung der Nutzungsobjekte (Short List) und 3. Widgets als variabel gestaltbare Sichten          onen kann natürlich pro-
                                                                                                              jektabhängig konfiguriert
                                                                                                              werden.
                                                                                                                 Die Einträge in der
                                                                                                              zweiten Naviga-tionsebe-
                                                                                                              ne des Patienten können
                                                                                                              als Listen oder Grafiken
                                                                                                              dargestellt werden. Dies
                                                                                                              gilt ausschließlich für
                                                                                                              Einträge, die im Zusam-
                                                                                                              menhang mit dem ausge-
                                                                                                              wählten Patienten stehen.
                                                                                                              Werden diese unterge-
                                                                                                              ordneten Objekte editiert,




                                                                                                                                            Produktentwicklung und -evaluation
                                                                                                              dann kommen Property-
                                                                                                              Dialoge zum Einsatz (sie-
                                                                                                              he auch Abbildung 11).
                                                                                                                 Wird eine Patienten-
                                                                                                              sicht nicht mehr benötigt,
                                                                                                              dann kann sie über das
                                                                                                              Kreuz-Symbol rechts ne-
Abb. 9: Der Short List im Widget „Patient List“ zugrundeliegende Long List in der zweiten Navigationsebene
                                                                                                              ben dem Patientenamen
                                                                                                              im Navigationseintrag ge-
nicht in Eigenschaftsfenstern (Property Dialog, siehe auch schlossen werden. Werden mehrere Patienten geöffnet, dann
Abbildung 11) dargestellt. Stattdessen erscheint für jeden Pa- werden die entsprechenden Blöcke untereinander angeordnet.
tienten, der aus einem Widget oder einer Liste heraus „geöff- So kann beliebig zwischen den Patienten navigiert werden.
net“ wird, ein neuer Navigationsblock im Navigationsbereich
(siehe Abbildung 7). Hier wurde eine Kombination der beiden 4 Umsetzung als realitätsnaher
Interaktionskonzepte „Listenbasierte Darstellung“ und „Left- Produkt-Prototyp (Konzeptstudie)
Rail-Navigation“ als neues Element eingeführt. Das bietet den                  Mit Unterstützung des Kunden und der Fachleute aus Ver-
Vorteil, dass für jeden Patienten eine neue Übersichtsseite (be- trieb und Produktmanagement lässt sich basierend auf diesem
stehend aus Widgets) angeboten werden kann.                                 Interaktionskonzept innerhalb weniger Personentage ein reali-
    Gut zu erkennen ist hier, dass wieder das gleiche Konzept tätsgetreues Abbild der zu erstellenden Benutzungsoberfläche
genutzt wird, wie bereits in der Übersichtsseite des Arbeitsbe- (GUI) erstellen. Je nach Ausbaustufe können das Mockups, d.
reiches (siehe vorherige Abbildung 6: Integration von Widgets h. realitätsgetreue „gezeichnete“ Screens, bzw. auch interaktive



                                                                                                                e-Health 2012 |    313
Prototypen          (HTML
                                     Click Dummy) sein.
                                        Ordnet man die o.e.
                                     drei grundlegenden Kon-
                                     zepte für die Interakti-
                                     onsgestaltung der Kon-
                                     zeptstudie des ICW Care
                                     Manager zu (siehe Abbil-
                                     dung 8), dann ergibt sich
                                     folgendes Bild:
                                        1. Left-Rail Navi-
                                            gation (Navigati-
                                            onsbaum links)
                                            a) My Work-
                                                 space
                                                 i) Inbox
                                                 ii) Patient
                                                      List
                                                 iii) ...
                                            b) Debbie
                                                 Downing
                                                 i) Demogra- Abb. 10: Short List-basierte Widgets in der detaillierteren Sicht auf einzelne Patienten
                                                      phic Data
                                                 ii) Clinical
                                                      Data
                                                 iii) ...
                                        2. Listenbasierte
                                            Darstellung der
                                            Nutzungsobjekte
                                            (Short & Long
                                            Lists)
                                            a) Patient List
                                            b) Communica-
                                                 tion
                                        3. Widgets als vari-
                                            abel gestaltbare
Produktentwicklung und -evaluation




                                            Sichten auf Lis-
                                            ten und deren
                                            Einträge (Werte)
                                            Alle        Kästchen
                                            besitzen Widget-
                                            Charakteristika,
                                            wie
                                            a) Titel und
                                                 Rahmung
                                            b) Funktionen          Abb. 11: Verwendung von Eigenschaftsdialogen für Sub-Objekte (dem zentralen Nutzungsobjekt „Patient“
                                                                   untergeordnetes Objekt „PAM“)
                                                 wie Mini-
                                                 mierung und
                                                Ausblenden                                               Konzeptstudie zu erstellen. Somit entsteht für alle Beteiligten
                                            c) Teilweise mit Grafiken, teilweise mit Aufl istungen bereits nach kurzer Zeit ein gemeinsames Bild. Dieses wichti-
                                                 (Short Lists)                                           ge, gemeinsame Verständnis entfaltet seine Synergien über das
                                            d) Option für Wechsel zur detaillierteren View („Ex- Produktmanagement hinein in die Entwicklerteams und die
                                                 pand…“ führt zu einer Long List)                        Qualitätssicherung. Unabhängig von der Spezialisierung ist es
                                                                                                         jedem Beteiligten möglich, einen solchen Prototyp sehr früh
                                     5 Nutzen des Konzepts                                               intern und extern zu testen (Experten-Review, User Tests,
                                        Mit Hilfe dieses Interaktionskonzeptes ist ICW dazu in der Barrierefreiheit) und mit einfachen Mitteln seine Vorstellun-
                                     Lage, bereits in der Voranalyse eine sehr realistisch anmutende gen zum realen Einsatz einzubringen.



                                     314 | e-Health 2012
Insgesamt bietet diese Herangehensweise eine große Ver-                  Funktionsumfanges befinden sich in den Listen der 2.
einfachung - insbesondere in der Phase der Vorarbeiten. Wie                 Navigationsebene (im Beispiel bereits realisiert).
angedeutet ist es recht einfach, durch Zuhören und Mit-                6.   Die Listeneinträge können aufgeklappt werden, um
schreiben die verwendeten Substantive (Objektbezeichner)                    eine Vorschau auf Inhalte und objekt-spezifische
abzuleiten, auf denen dieses Interaktionskonzept basiert. Das               Funktionen (Short Toolbar) effizient zur Verfügung
lässt sowohl dem Kunden als auch den internen Experten die                  zu stellen
Freiheit, die von ihnen verantworteten Konzepte flexibel und           7.   Gemeinsame Nutzung von Arbeitsbereichen (Shared
individuell zu bearbeiten.                                                  Workspaces), indem andere Kollegen des Nutzers
   Durch den mit diesem Interaktionskonzept schnell erreich-                ähnlich den Patienten als Navigationsblöcke angebo-
baren und hohen Detaillierungsgrad sind ca. 80 bis 90 % der                 ten werden. Durch den Einsatz von Drag-and-Drop
zur Bedienung nötigen Interaktionen bereits standardmäßig                   und das Ein- und Ausblenden der Navigationsblöcke
realisiert, zum Beispiel die Vorschau auf der Übersichtsseite,              ließe sich die klassische Rechteverwaltung stark ver-
Bearbeiten, Neu erstellen, Auflisten, Suchen, Drucken, Ex-                  einfachen.
port und andere. Auch die Einbindung in Workflows (Bear-               8.   Erweiterte Suche mit der Möglichkeit, individuelle
beitungsprozesse), die Verknüpfung mit sozialen Netzwerken                  Suchabfragen in Filtern zu speichern (ausklappbar di-
und die gemeinsame Bearbeitung von Objekten sind bereits in                 rekt unter der Toolbar).
diesem Baukasten für die zukünftige GUI enthalten. Somit
können sich externe GUI-Dienstleister der GUI-Qualität (z.          Dank
B. Usability-Tests) widmen, die Informationsarchitekten das            Eine solche Arbeit ist nicht der Erfolg eines Einzelkämp-
vollständige Informationsmodell der Nutzungsobjekte erstel-         fers, sondern eines Teams bestehend aus Kunden, Usability-
len und grafische Dienstleister sich auf das grafische Design (z.   Experten, Grafikern, Produktmanagern und Entwicklern.
B. Branding) konzentrieren.                                         Mit diesem kompetenten Team konnte konsequent eine click-
   Schlussendlich ist es möglich, den auf der HTML-Struk-           und damit bedien- und erlebbare Konzeptstudie umgesetzt
tur basierenden Click-Dummy, den JavaScript-Code und das            und als Basis für die weitere Entwicklung genutzt werden.
CSS der Entwicklung des eigentlichen Software-Produkts              Danke dafür an alle Beteiligten!
(inkl. Backend) zu Grunde zu legen. Hinzu kommt, dass in
den späteren Entwicklungsstadien nur noch wenige Ände-                Quellenangaben unter www.e-health-2012.de
rungen zu erwarten sind, da die Kundenwünsche bereits zuvor
berücksichtigt worden sind. Somit können spätere Umgestal-          Kontakt
tungen der GUI größtenteils vermieden werden, die sonst er-         Dr.-Ing. Gunter Dubrau
hebliche Änderungen im Backend nach sich ziehen könnten.            InterComponentWare AG Walldorf
                                                                    Tel.: +49 (0) 6227 385 173
6 Ausblick                                                          gunter.dubrau@icw.de
   Im Gespräch mit Kollegen und potentiellen Anwendern
sind Anregungen aufgetaucht, die in der oben aufgezeigten
Konzeptstudie teilweise schon eingearbeitet wurden




                                                                                                                                    Produktentwicklung und -evaluation
   1. Weitere, dem Nutzungsobjekt „Patient“ untergeordne-
       te Objekte, wie z. B. Medizinische Dokumente und
      Kontakt-Historie (sowohl für E-Mails als auch Tele-
       fonanrufe, Faxe, SMS, Chats und Briefe).
   2. Anzeige neuer und kritischer Dokumente ähnlich ei-
       nem E-Mail-Programm in der Navigation (Fettdruck
       mit 1. bzw. in Rot >1< bei kritischen Werten und Er-
       eignissen). Diese Anzeige kann zusätzlich auch im Ti-
       tel der einzelnen Widgets erfolgen (im Beispiel bereits
       realisiert).
   3. Ein- und Ausklappen der Navigation links und des
      Banners zur besseren Ausnutzung der Oberfläche.
       Somit kann den medizinischen Daten im Content-
      Bereich mehr Raum gegeben werden.
   4. Umgang mit den Eigenschaften eines Widgets durch
      Einstellungen im Kopf des Widgets (siehe iGoogle).
      Hier bietet sich auch die „Rückseite“ eines Widgets an.
      Durch eine grafische Drehung gewinnt man Platz für
       zusätzliche Interaktion.
   5. Reduzierte Toolbars in Widgets. Die ausführli-
       chen Toolbars zur Realisierung des vollständigen



                                                                                                           e-Health 2012 |   315

Weitere ähnliche Inhalte

Andere mochten auch

Tipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costaTipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costaalexismy
 
Indeca tweetakademie 120411
Indeca tweetakademie 120411Indeca tweetakademie 120411
Indeca tweetakademie 120411Michael Gebert
 
Familiengesundheitspflege (FGP) - Praxisfeld Krankenhaus Entlassungsmanagement
Familiengesundheitspflege (FGP) - Praxisfeld Krankenhaus EntlassungsmanagementFamiliengesundheitspflege (FGP) - Praxisfeld Krankenhaus Entlassungsmanagement
Familiengesundheitspflege (FGP) - Praxisfeld Krankenhaus EntlassungsmanagementNiederrheinischer Pflegekongress
 
Ley io c-ley de igualdad 2005-g.vasco
Ley io c-ley de igualdad  2005-g.vascoLey io c-ley de igualdad  2005-g.vasco
Ley io c-ley de igualdad 2005-g.vascokidetza1
 
Fabulas de colombia y japon
Fabulas de colombia y japonFabulas de colombia y japon
Fabulas de colombia y japonCamila111
 
Normar internacionales de informacion financiera (niif)
Normar internacionales de informacion financiera (niif)Normar internacionales de informacion financiera (niif)
Normar internacionales de informacion financiera (niif)fefi1508
 
Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...
Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...
Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...kidetza1
 
Fact Sheet Villas Salobre De
Fact Sheet Villas Salobre DeFact Sheet Villas Salobre De
Fact Sheet Villas Salobre DeThe Warm Side
 
Marzo 13 del 2012 juan felipe garcia duque 6 b
Marzo 13 del 2012 juan felipe garcia duque 6 bMarzo 13 del 2012 juan felipe garcia duque 6 b
Marzo 13 del 2012 juan felipe garcia duque 6 bjuanfelipegarcia
 
Tipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costaTipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costaalexismy
 
Comisión de justicia. registro entrada
Comisión de justicia.  registro entradaComisión de justicia.  registro entrada
Comisión de justicia. registro entradakidetza1
 
Software libre vs software propietario
Software libre vs software propietarioSoftware libre vs software propietario
Software libre vs software propietariomichaelsave
 

Andere mochten auch (20)

Mbi
MbiMbi
Mbi
 
NPK2015 - Z.Babagadi: Die süßen Türken
NPK2015 - Z.Babagadi: Die süßen TürkenNPK2015 - Z.Babagadi: Die süßen Türken
NPK2015 - Z.Babagadi: Die süßen Türken
 
Camila pc
Camila pcCamila pc
Camila pc
 
Sascha Rehag: "Tagespflege mit kultursensibler Öffnung"
Sascha Rehag: "Tagespflege mit kultursensibler Öffnung"Sascha Rehag: "Tagespflege mit kultursensibler Öffnung"
Sascha Rehag: "Tagespflege mit kultursensibler Öffnung"
 
Tipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costaTipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costa
 
Indeca tweetakademie 120411
Indeca tweetakademie 120411Indeca tweetakademie 120411
Indeca tweetakademie 120411
 
Android Studio und gradle
Android Studio und gradleAndroid Studio und gradle
Android Studio und gradle
 
Familiengesundheitspflege (FGP) - Praxisfeld Krankenhaus Entlassungsmanagement
Familiengesundheitspflege (FGP) - Praxisfeld Krankenhaus EntlassungsmanagementFamiliengesundheitspflege (FGP) - Praxisfeld Krankenhaus Entlassungsmanagement
Familiengesundheitspflege (FGP) - Praxisfeld Krankenhaus Entlassungsmanagement
 
Ley io c-ley de igualdad 2005-g.vasco
Ley io c-ley de igualdad  2005-g.vascoLey io c-ley de igualdad  2005-g.vasco
Ley io c-ley de igualdad 2005-g.vasco
 
Fabulas de colombia y japon
Fabulas de colombia y japonFabulas de colombia y japon
Fabulas de colombia y japon
 
Normar internacionales de informacion financiera (niif)
Normar internacionales de informacion financiera (niif)Normar internacionales de informacion financiera (niif)
Normar internacionales de informacion financiera (niif)
 
Ley del servicio profesional docente
Ley del servicio profesional docenteLey del servicio profesional docente
Ley del servicio profesional docente
 
Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...
Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...
Cusotdia compartida-no-vinculante-informe-ministerio-fisca-sentencia-constitu...
 
Camila pc
Camila pcCamila pc
Camila pc
 
Fact Sheet Villas Salobre De
Fact Sheet Villas Salobre DeFact Sheet Villas Salobre De
Fact Sheet Villas Salobre De
 
Marzo 13 del 2012 juan felipe garcia duque 6 b
Marzo 13 del 2012 juan felipe garcia duque 6 bMarzo 13 del 2012 juan felipe garcia duque 6 b
Marzo 13 del 2012 juan felipe garcia duque 6 b
 
Tipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costaTipo de hogar tradicional tercera edada costa
Tipo de hogar tradicional tercera edada costa
 
Teja duration
Teja durationTeja duration
Teja duration
 
Comisión de justicia. registro entrada
Comisión de justicia.  registro entradaComisión de justicia.  registro entrada
Comisión de justicia. registro entrada
 
Software libre vs software propietario
Software libre vs software propietarioSoftware libre vs software propietario
Software libre vs software propietario
 

Listenbasierte Navigation mit Widgets

  • 1. Produktentwicklung und -evaluation Listenbasierte Navigation mit Widgets – ein objektorientiertes Konzept zur GUI-Gestaltung von eHealth-Anwendungen Gunter Dubrau User Interface Design-Team, InterComponentWare AG 1 Problemstellung Die MedTech-Welt ist in Bewegung geraten. Der- zeitige Herausforderungen sind erhöhter Preis- und Kostendruck in den Gesund- heitsmärkten, international verschärfter Wettbewerb so- wie verstärkte regulatorische Anforderungen. Speziell in der Verbindung zwischen MedTech-Industrie und Endkunde werden Soci- al Media, Health Records, Consumer Electronics und Mobile Health eine zentrale Bedeutung bekommen. Die- se stellen die Trägermedien Abb. 1: Ausgestaltung einer ICWLösung mit entsprechenden Benutzungsoberflächen für Portale für den Austausch von Infor- mationen dar. Gefragt sind dabei für die verschiedenen Nutzergruppen und innovatives Interaktionsdesign mit hohem qualitativen Produktentwicklung und -evaluation jeweils angepasste, aber dennoch konsistente und qualitativ Anspruch. Dass dieser Anspruch erfüllt wird, zeigt der große hochwertige Sichten auf die vernetzten Datenbestände, um Erfolg dieser Produkte. auf gesundheitsrelevante Daten und Informationen, z. B. von Im Folgenden verwendete Begriffe wie Widget, Gadgets medizinischen Geräten, bedarfsgerecht zugreifen zu können. oder Portlet stehen typischerweise im Bereich der programm- Die damit einherghende Vielfalt der Zielgruppen, die sehr un- technischen Realisierung für ganz bestimmte Technologien. terschiedlichen Anwendungsbereiche und die Forderung nach Es sei ausdrücklich darauf hingewiesen, dass die Verweise auf einer Corporate Product Identity stellen weitere Herausforde- Google und andere keinerlei Implikationen auf eventuell zu rungen dar. verwendende Technologien haben. Dieses Thema wird be- Das User Interface Design-Team von ICW hat sich der wusst ausgeklammert, ohne die Einschränkungen durch tech- Herausforderung gestellt, eine moderne und anspruchsvol- nologische Rahmenbedingungen außer Acht lassen zu wollen. le Benutzungsoberfläche zu konzipieren und zu entwickeln, Es geht hier ausschließlich um die Darstellung der dort ver- die für die unterschiedlichen Zielgruppen gut verwendbar ist wendeten Interaktionskonzepte. und gleichzeitig die geplante Einbindung von Medizinischen Geräten, Social Media, Health Records und Mobile Health ermöglicht. Autor: Dubrau, G. Titel: Listenbasierte Navigation mit Widgets – ein 2 Lösungsansatz objektorientiertes Konzept zur GUI-Gestaltung von Bei Recherchen zur Ausarbeitung des Interaktionskon- eHealth-Anwendungen zeptes haben wir uns an Marktführern, wie z. B. Google, In: Duesberg, F. (Hrsg.) e-Health 2012, Yahoo, Twitter, Facebook, LinkedIn und Microsoft orien- Solingen (2011), Seiten: 309-315 tiert. Die Anwendungen dieser Firmen stehen für modernes e-Health 2012 | 309
  • 2. Drei grundlegende Kon- zepte für die Interaktions- gestaltung wurden identi- fiziert. 1. Left-Rail Naviga- tion (Navigations- baum links) 2. L i s t e n b a s i e r t e Darstellung der N u t z u n g s o b j e k- te (Short & Long Lists) 3. Widgets als vari- abel gestaltbare Sichten auf Listen und deren Einträge (Werte) Beispielhaft seien diese drei Interaktionskonzep- te anhand von iGoogle (siehe Abbildung 2) auf- gezeigt. Ordnet man sie dieser Anwendung zu, dann ergibt sich folgen- Abb. 2: iGoogle mit 1. Left-Rail Navigation (Navigationsbaum links), 2. Listenbasierter Darstellung der Nut- des Bild: zungsobjekte (Short List) und 3. Widgets (= Gadgets) als variabel gestaltbare Sichten 1. Left-Rail Navigati- on (Navigationsbaum links) Startseite Interaktionsgestaltung dieser Anwendung zu, dann ergibt sich a) Google News folgendes Bild: b) Wetter 1. Left-Rail Navigation (Navigationsbaum links) c) Spiegel Online a) Eigene Dateien d) ... i) Dokumente 2. Listenbasierte Darstellung der Nutzungsobjekte ii) Fotos (Short & Long Lists) b) Schnellansichten a) Google News i) Neueste Dokumente b) Spiegel Online – Schlagzeilen ii) Für Sie freigegebene Dokumente 3. Widgets (= Gadgets) als variabel gestaltbare 2. Listenbasierte Darstellung der Nutzungsobjekte Produktentwicklung und -evaluation Sichten auf Listen und deren Einträge (Werte) (Long Lists) Alle Kästchen besitzen Widget-Charakteristika, wie a) Ordner a) Titel und Rahmung b) Dokumente b) Funktionen wie Minimierung, Ausblenden und 3. Widgets werden nicht verwendet Verschieben c) Teilweise mit Grafiken, teilwei- se mit Aufl istun- gen (Short Lists) d) Option für Wech- sel zur detailierte- ren View (z.B. „BILD.de alle Artikel“ führt zu einer Long List) Als zweites Beispiel sei Microsoft SkyDrive aufge- zeigt (siehe Abbildung 3). Ordnet man die drei grund- Abb. 3: Microsoft SkyDrive mit 1. Left-Rail Navigation (Navigationsbaum links) und 2. Listenbasierter Darstel- legenden Konzepte für die lung der Nutzungsobjekte (Long List) 310 | e-Health 2012
  • 3. präsentiert werden. Achtet man genau auf die verwendeten Bezeichner (Substantive mit- schreiben!), lässt sich ein erstes Modell der benötigten Nutzungsobjekte ableiten. Die folgende Struktur zeigt beispielhaft ein so abgeleitetes, sehr reduziertes und ledig- lich eindimensionales Modell der Nutzungs- objekte. Patient: f Demographische Angaben f Medizinische Daten f Aufgaben f Ereignisse Im Interesse einer einfachen Verständlich- keit wurde auf eine vollständige Darstellung verzichtet. „Patient“ muss nicht immer das zen- Abb. 4: Generelles Layout-Konzept trale Nutzungsobjekt sein. Dies ist durch eine Zusätzlich interessant in SkyDrive ist der Umgang mit Funktionen. Es wird neben der klassischen Toolbar oben auch ein kontextspezifischer Tool-Bereich rechts von der Liste verwendet. Dadurch wird eine Überfrachtung der Toolbar vermieden. Die spe- zifischen Funktionen können textuell benannt werden, was die Selbstbeschreibungsfä- higkeit und damit die Usa- bility erhöht. Auch ist eine größere Menge an Funktio- Abb. 5: Integration von Listen in Navigation- und Content-Bereich nen abbildbar. Produktentwicklung und -evaluation 3 Lösungsoption: Kontextanalyse mit dem Kunden zu verifizieren. Auch haben Kombination der drei Interaktionskonzepte Objektmodelle in der Regel eine viel breitere und detailliertere in einer eHealth-Anwendung Ausprägung als das hier verwendete. Für das GUI-Konzept selbst ist es allerdings wichtig, dass Erster Schritt: Modell der Nutzungsobjekte im Weiteren nicht nur von einem Patienten gesprochen wird, pragmatisch ableiten sondern von mehreren. Solche Klassen von Objekten bilden In der Literatur finden sich viele, sehr gut durchdach- auch die „Aufgaben“ und „Ereignisse“. Die beiden anderen te Modelle, wie eine GUI entstehen sollte. Ohne weiter auf Positionen „Demographische Angaben“ und „Medizinische diese einzugehen, seien hier der „Prozess zur Gestaltung ge- Daten“ dienen zur Beschreibung des Patienten und sind ab- brauchstauglicher interaktiver System“ [DIN EN ISO 9241- strakterer Natur. Sie bilden keine Nutzungsobjekte im enge- 210], „User-Centered Design Process“ [Design@IBM 2011] ren Sinne. Alle Positionen sind dem Patienten untergeordnet und „The Usability Engineering Lifecycle“ [Mayhew 1999] (Menschen denken zuerst an Menschen und dann an Dinge). genannt. Zum Verständnis dieses Artikels sollte es aber nicht nötig sein, sich vorher dieses Usability-Fachwissen aneignen Zweiter Schritt: Einordnung der zu müssen. Es wird bewusst pragmatisch und mit möglichst Nutzungsobjekte in das Layout einfachen Mitteln vorgegangen. Im zweiten Schritt wird ein Layout verwendet, das sowohl Eines der einfachsten Mittel im berufl ichen Alltag ist das die Left-Rail Navigation (Navigationsbaum links) und die Gespräch mit dem Kunden. Durch weitere Diskussionen mit Listenbasierte Darstellung der Nutzungsobjekte ermöglicht Kollegen und Experten aus Vertrieb und Produktmanage- (siehe Abb. 4). ment lassen sich relativ schnell erste Beispiel-Szenarien ablei- Sowohl im Desktop als auch im Internet ist dieses Layout ten, die mit dem Protoypen im Rahmen einer Konzeptstudie oft zu finden. Somit ist die Mehrzahl der Anwender gut damit e-Health 2012 | 311
  • 4. Da in den Listen gesucht werden kann, sollten die Su- chen auch als Filter speicher- bar sein. Dazu wurde die Navigation um den Eintrag „Search Folders“ erweitert. Gelöschte Listeneinträge können ebenfalls über die Navigation angezeigt werden, wieder in Listenform. Dritter Schritt: Inte- gration von Widgets in Übersichtsseiten Als dritter Schritt werden Abb. 6: Integration von Widgets in den Arbeitsbereich Widgets integriert, vorerst nur auf den Übersichtsseiten vertraut. Vor allem bei Anwendungen in der Arbeitswelt sollte (1. Navigationsebene, z. B. in Workspace) (siehe Abb. 6). auf ungewöhnliche Layout-Entscheidungen verzichtet wer- Im Arbeitsbereich (Workspace) sind zwei verschiedene Ar- den. Die Aufl istung (un-)möglicher Layouts ließe sich zwar ten von Widgets zu erkennen. mit „Navigation rechts“ sehr schnell und einfach beginnen, 1. Short Previews wohl aber kaum vollenden. 2. Short Lists Verzichtet wurde in diesem generellen Layout-Konzept auf In der Watchlist als „Short Preview“ können für einzelne die klassische Menu-Konstruktion aus dem Desktop-Bereich Patienten wichtige Informationen angezeigt werden. Im me- dizinischen Umfeld können das z. B. Patienten sein, auf die der Nutzer besonders ach- ten möchte. Im Widget „Last Changes“ werden alle letzten Änderungen als sogenannte „Short List“ angezeigt. Die- se „Short List“ ist wiederum eine Vorschau auf eine der Listen, die in ihrer komplet- ten Form über die Navigation erreichbar ist. Die Short List Produktentwicklung und -evaluation zeigt nur einige Spalten und Listeneinträge an, die über entsprechende Eigenschaften des Widgets definiert werden. Abb. 7: Das zentrale Nutzungsobjekt „Patient“ als neuer Navigationsblock Eine vollständige Aufl istung aller Typen von Widgets (File – Edit – View – Insert – Format – Tools – Window – wird hier aber nicht versucht. Es sei lediglich noch auf die Help). Sie hat sich in Web-Anwendungen fast gar nicht etab- Möglichkeit hingewiesen, Widgets auch als Grafiken zu rea- liert. Das Fehlen dieses eigentlich sinnvollen Konstrukts wird lisieren, z.B. für die Anzeige statistischer Daten oder medizi- durch den Einsatz der Toolbar kompensiert. nischer Indikatoren. Die listenbasierte Darstellung der Nutzungsobjekte erfolgt Damit auch ausgeblendete Widgets wiederhergestellt und im Content-Bereich. Diese Listen sind primär über die Na- weitere Widgets hinzugefügt werden können, wurde die Funk- vigation links erreichbar. Sie enthalten einen oder mehrere tion „Add Widget“ in den Navigationsbereich eingeführt. Für Einträge und sind sortier- und fi lterbar. Mit den Funktionen jedes eingeblendete Widget wird ein Eintrag in der Navigation in der Toolbar können die Listen-Einträge einzeln oder ge- angelegt. Wird ein Widget ausgeblendet, dann verschwindet meinsam bearbeitet werden (siehe Abb. 5). der entsprechende Eintrag auch in der Navigation. Links in der Navigation finden sich die als Nutzungsob- jekte identifizierten Begriffe wieder: Patienten, Aufgaben und Vierter Schritt: Anzeige des Patienten als Ereignisse. Sie stehen für Listen von Einträgen. Für jeden zentrales Nutzungsobjekt dieser Navigationspunkte wird im Content-Bereich eine Liste Da in diesem Beispiel der Patient als zentrales Nutzungs- von Einträgen angezeigt. objekt angesehen wird, werden die Attribute des Patienten 312 | e-Health 2012
  • 5. in den Arbeitsbereich). Alle Elemente und Listen beinhalten nur Angaben zu dem jeweils „geöff- neten“ Patienten. Durch die Nutzung der Widgets kann in Übersichtsseiten der einzelnen Patienten ein in sich konsistentes Interaktionskonzept ge- währleistet werden. Als eine Variante wird hier ein nicht abschalt- bares Widget für die De- mographischen Angaben eingeführt, während die Medizinischen Daten, ebenso wie die anderen Widgets, ab- und zuge- schaltet werden können. Dieser Umgang mit zen- Abb. 8: Konzeptstudie des ICW Care Manager mit 1. Left-Rail Navigation (Navigationsbaum links), 2. Listenba- tral wichtigen Informati- sierter Darstellung der Nutzungsobjekte (Short List) und 3. Widgets als variabel gestaltbare Sichten onen kann natürlich pro- jektabhängig konfiguriert werden. Die Einträge in der zweiten Naviga-tionsebe- ne des Patienten können als Listen oder Grafiken dargestellt werden. Dies gilt ausschließlich für Einträge, die im Zusam- menhang mit dem ausge- wählten Patienten stehen. Werden diese unterge- ordneten Objekte editiert, Produktentwicklung und -evaluation dann kommen Property- Dialoge zum Einsatz (sie- he auch Abbildung 11). Wird eine Patienten- sicht nicht mehr benötigt, dann kann sie über das Kreuz-Symbol rechts ne- Abb. 9: Der Short List im Widget „Patient List“ zugrundeliegende Long List in der zweiten Navigationsebene ben dem Patientenamen im Navigationseintrag ge- nicht in Eigenschaftsfenstern (Property Dialog, siehe auch schlossen werden. Werden mehrere Patienten geöffnet, dann Abbildung 11) dargestellt. Stattdessen erscheint für jeden Pa- werden die entsprechenden Blöcke untereinander angeordnet. tienten, der aus einem Widget oder einer Liste heraus „geöff- So kann beliebig zwischen den Patienten navigiert werden. net“ wird, ein neuer Navigationsblock im Navigationsbereich (siehe Abbildung 7). Hier wurde eine Kombination der beiden 4 Umsetzung als realitätsnaher Interaktionskonzepte „Listenbasierte Darstellung“ und „Left- Produkt-Prototyp (Konzeptstudie) Rail-Navigation“ als neues Element eingeführt. Das bietet den Mit Unterstützung des Kunden und der Fachleute aus Ver- Vorteil, dass für jeden Patienten eine neue Übersichtsseite (be- trieb und Produktmanagement lässt sich basierend auf diesem stehend aus Widgets) angeboten werden kann. Interaktionskonzept innerhalb weniger Personentage ein reali- Gut zu erkennen ist hier, dass wieder das gleiche Konzept tätsgetreues Abbild der zu erstellenden Benutzungsoberfläche genutzt wird, wie bereits in der Übersichtsseite des Arbeitsbe- (GUI) erstellen. Je nach Ausbaustufe können das Mockups, d. reiches (siehe vorherige Abbildung 6: Integration von Widgets h. realitätsgetreue „gezeichnete“ Screens, bzw. auch interaktive e-Health 2012 | 313
  • 6. Prototypen (HTML Click Dummy) sein. Ordnet man die o.e. drei grundlegenden Kon- zepte für die Interakti- onsgestaltung der Kon- zeptstudie des ICW Care Manager zu (siehe Abbil- dung 8), dann ergibt sich folgendes Bild: 1. Left-Rail Navi- gation (Navigati- onsbaum links) a) My Work- space i) Inbox ii) Patient List iii) ... b) Debbie Downing i) Demogra- Abb. 10: Short List-basierte Widgets in der detaillierteren Sicht auf einzelne Patienten phic Data ii) Clinical Data iii) ... 2. Listenbasierte Darstellung der Nutzungsobjekte (Short & Long Lists) a) Patient List b) Communica- tion 3. Widgets als vari- abel gestaltbare Produktentwicklung und -evaluation Sichten auf Lis- ten und deren Einträge (Werte) Alle Kästchen besitzen Widget- Charakteristika, wie a) Titel und Rahmung b) Funktionen Abb. 11: Verwendung von Eigenschaftsdialogen für Sub-Objekte (dem zentralen Nutzungsobjekt „Patient“ untergeordnetes Objekt „PAM“) wie Mini- mierung und Ausblenden Konzeptstudie zu erstellen. Somit entsteht für alle Beteiligten c) Teilweise mit Grafiken, teilweise mit Aufl istungen bereits nach kurzer Zeit ein gemeinsames Bild. Dieses wichti- (Short Lists) ge, gemeinsame Verständnis entfaltet seine Synergien über das d) Option für Wechsel zur detaillierteren View („Ex- Produktmanagement hinein in die Entwicklerteams und die pand…“ führt zu einer Long List) Qualitätssicherung. Unabhängig von der Spezialisierung ist es jedem Beteiligten möglich, einen solchen Prototyp sehr früh 5 Nutzen des Konzepts intern und extern zu testen (Experten-Review, User Tests, Mit Hilfe dieses Interaktionskonzeptes ist ICW dazu in der Barrierefreiheit) und mit einfachen Mitteln seine Vorstellun- Lage, bereits in der Voranalyse eine sehr realistisch anmutende gen zum realen Einsatz einzubringen. 314 | e-Health 2012
  • 7. Insgesamt bietet diese Herangehensweise eine große Ver- Funktionsumfanges befinden sich in den Listen der 2. einfachung - insbesondere in der Phase der Vorarbeiten. Wie Navigationsebene (im Beispiel bereits realisiert). angedeutet ist es recht einfach, durch Zuhören und Mit- 6. Die Listeneinträge können aufgeklappt werden, um schreiben die verwendeten Substantive (Objektbezeichner) eine Vorschau auf Inhalte und objekt-spezifische abzuleiten, auf denen dieses Interaktionskonzept basiert. Das Funktionen (Short Toolbar) effizient zur Verfügung lässt sowohl dem Kunden als auch den internen Experten die zu stellen Freiheit, die von ihnen verantworteten Konzepte flexibel und 7. Gemeinsame Nutzung von Arbeitsbereichen (Shared individuell zu bearbeiten. Workspaces), indem andere Kollegen des Nutzers Durch den mit diesem Interaktionskonzept schnell erreich- ähnlich den Patienten als Navigationsblöcke angebo- baren und hohen Detaillierungsgrad sind ca. 80 bis 90 % der ten werden. Durch den Einsatz von Drag-and-Drop zur Bedienung nötigen Interaktionen bereits standardmäßig und das Ein- und Ausblenden der Navigationsblöcke realisiert, zum Beispiel die Vorschau auf der Übersichtsseite, ließe sich die klassische Rechteverwaltung stark ver- Bearbeiten, Neu erstellen, Auflisten, Suchen, Drucken, Ex- einfachen. port und andere. Auch die Einbindung in Workflows (Bear- 8. Erweiterte Suche mit der Möglichkeit, individuelle beitungsprozesse), die Verknüpfung mit sozialen Netzwerken Suchabfragen in Filtern zu speichern (ausklappbar di- und die gemeinsame Bearbeitung von Objekten sind bereits in rekt unter der Toolbar). diesem Baukasten für die zukünftige GUI enthalten. Somit können sich externe GUI-Dienstleister der GUI-Qualität (z. Dank B. Usability-Tests) widmen, die Informationsarchitekten das Eine solche Arbeit ist nicht der Erfolg eines Einzelkämp- vollständige Informationsmodell der Nutzungsobjekte erstel- fers, sondern eines Teams bestehend aus Kunden, Usability- len und grafische Dienstleister sich auf das grafische Design (z. Experten, Grafikern, Produktmanagern und Entwicklern. B. Branding) konzentrieren. Mit diesem kompetenten Team konnte konsequent eine click- Schlussendlich ist es möglich, den auf der HTML-Struk- und damit bedien- und erlebbare Konzeptstudie umgesetzt tur basierenden Click-Dummy, den JavaScript-Code und das und als Basis für die weitere Entwicklung genutzt werden. CSS der Entwicklung des eigentlichen Software-Produkts Danke dafür an alle Beteiligten! (inkl. Backend) zu Grunde zu legen. Hinzu kommt, dass in den späteren Entwicklungsstadien nur noch wenige Ände- Quellenangaben unter www.e-health-2012.de rungen zu erwarten sind, da die Kundenwünsche bereits zuvor berücksichtigt worden sind. Somit können spätere Umgestal- Kontakt tungen der GUI größtenteils vermieden werden, die sonst er- Dr.-Ing. Gunter Dubrau hebliche Änderungen im Backend nach sich ziehen könnten. InterComponentWare AG Walldorf Tel.: +49 (0) 6227 385 173 6 Ausblick gunter.dubrau@icw.de Im Gespräch mit Kollegen und potentiellen Anwendern sind Anregungen aufgetaucht, die in der oben aufgezeigten Konzeptstudie teilweise schon eingearbeitet wurden Produktentwicklung und -evaluation 1. Weitere, dem Nutzungsobjekt „Patient“ untergeordne- te Objekte, wie z. B. Medizinische Dokumente und Kontakt-Historie (sowohl für E-Mails als auch Tele- fonanrufe, Faxe, SMS, Chats und Briefe). 2. Anzeige neuer und kritischer Dokumente ähnlich ei- nem E-Mail-Programm in der Navigation (Fettdruck mit 1. bzw. in Rot >1< bei kritischen Werten und Er- eignissen). Diese Anzeige kann zusätzlich auch im Ti- tel der einzelnen Widgets erfolgen (im Beispiel bereits realisiert). 3. Ein- und Ausklappen der Navigation links und des Banners zur besseren Ausnutzung der Oberfläche. Somit kann den medizinischen Daten im Content- Bereich mehr Raum gegeben werden. 4. Umgang mit den Eigenschaften eines Widgets durch Einstellungen im Kopf des Widgets (siehe iGoogle). Hier bietet sich auch die „Rückseite“ eines Widgets an. Durch eine grafische Drehung gewinnt man Platz für zusätzliche Interaktion. 5. Reduzierte Toolbars in Widgets. Die ausführli- chen Toolbars zur Realisierung des vollständigen e-Health 2012 | 315