Produktentwicklung und -evaluationListenbasierte Navigation mit Widgets– ein objektorientiertes Konzept zurGUI-Gestaltung ...
Drei grundlegende Kon-                                     zepte für die Interaktions-                                    ...
präsentiert werden. Achtet man genau auf die                                                                              ...
Da in den Listen gesucht                                                                                                  ...
in den Arbeitsbereich).                                                                                                   ...
Prototypen          (HTML                                     Click Dummy) sein.                                        Or...
Insgesamt bietet diese Herangehensweise eine große Ver-                  Funktionsumfanges befinden sich in den Listen der...
Nächste SlideShare
Wird geladen in …5
×

Listenbasierte Navigation mit Widgets

992 Aufrufe

Veröffentlicht am

Ein objektorientiertes Konzept zur
GUI-Gestaltung von eHealth-Anwendungen

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
992
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Listenbasierte Navigation mit Widgets

  1. 1. Produktentwicklung und -evaluationListenbasierte Navigation mit Widgets– ein objektorientiertes Konzept zurGUI-Gestaltung von eHealth-AnwendungenGunter DubrauUser Interface Design-Team, InterComponentWare AG1 Problemstellung Die MedTech-Welt istin Bewegung geraten. Der-zeitige Herausforderungensind erhöhter Preis- undKostendruck in den Gesund-heitsmärkten, internationalverschärfter Wettbewerb so-wie verstärkte regulatorischeAnforderungen. Speziell inder Verbindung zwischenMedTech-Industrie undEndkunde werden Soci-al Media, Health Records,Consumer Electronics undMobile Health eine zentraleBedeutung bekommen. Die-se stellen die Trägermedien Abb. 1: Ausgestaltung einer ICWLösung mit entsprechenden Benutzungsoberflächen für Portalefür den Austausch von Infor-mationen dar. Gefragt sind dabei für die verschiedenen Nutzergruppen und innovatives Interaktionsdesign mit hohem qualitativen Produktentwicklung und -evaluationjeweils angepasste, aber dennoch konsistente und qualitativ Anspruch. Dass dieser Anspruch erfüllt wird, zeigt der großehochwertige Sichten auf die vernetzten Datenbestände, um Erfolg dieser Produkte.auf gesundheitsrelevante Daten und Informationen, z. B. von Im Folgenden verwendete Begriffe wie Widget, Gadgetsmedizinischen 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 aufeiner Corporate Product Identity stellen weitere Herausforde- Google und andere keinerlei Implikationen auf eventuell zurungen 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 MedizinischenGeräten, Social Media, Health Records und Mobile Healthermöglicht. Autor: Dubrau, G. Titel: Listenbasierte Navigation mit Widgets – ein2 Lösungsansatz objektorientiertes Konzept zur GUI-Gestaltung von Bei Recherchen zur Ausarbeitung des Interaktionskon- eHealth-Anwendungenzeptes 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-315tiert. Die Anwendungen dieser Firmen stehen für modernes e-Health 2012 | 309
  2. 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 NutzungsobjekteProduktentwicklung 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. 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 inSkyDrive ist der Umgang mitFunktionen. Es wird nebender klassischen Toolbar obenauch ein kontextspezifischerTool-Bereich rechts von derListe verwendet. Dadurchwird eine Überfrachtung derToolbar vermieden. Die spe-zifischen Funktionen könnentextuell benannt werden, wasdie Selbstbeschreibungsfä-higkeit und damit die Usa-bility erhöht. Auch ist einegrößere Menge an Funktio- Abb. 5: Integration von Listen in Navigation- und Content-Bereichnen abbildbar. Produktentwicklung und -evaluation3 Lösungsoption: Kontextanalyse mit dem Kunden zu verifizieren. Auch habenKombination der drei Interaktionskonzepte Objektmodelle in der Regel eine viel breitere und detaillierterein einer eHealth-Anwendung Ausprägung als das hier verwendete. Für das GUI-Konzept selbst ist es allerdings wichtig, dassErster 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 anderente Modelle, wie eine GUI entstehen sollte. Ohne weiter auf Positionen „Demographische Angaben“ und „Medizinischediese 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 untergeordnetund „The Usability Engineering Lifecycle“ [Mayhew 1999] (Menschen denken zuerst an Menschen und dann an Dinge).genannt. Zum Verständnis dieses Artikels sollte es aber nichtnötig sein, sich vorher dieses Usability-Fachwissen aneignen Zweiter Schritt: Einordnung derzu müssen. Es wird bewusst pragmatisch und mit möglichst Nutzungsobjekte in das Layouteinfachen 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 dieGespräch mit dem Kunden. Durch weitere Diskussionen mit Listenbasierte Darstellung der Nutzungsobjekte ermöglichtKollegen 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 Layoutten, die mit dem Protoypen im Rahmen einer Konzeptstudie oft zu finden. Somit ist die Mehrzahl der Anwender gut damit e-Health 2012 | 311
  4. 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 ListProduktentwicklung 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. 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, dannAbbildung 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ätsnaherInteraktionskonzepte „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 diesemstehend 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ächegenutzt 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. 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 gestaltbareProduktentwicklung 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. 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, umschreiben die verwendeten Substantive (Objektbezeichner) eine Vorschau auf Inhalte und objekt-spezifischeabzuleiten, auf denen dieses Interaktionskonzept basiert. Das Funktionen (Short Toolbar) effizient zur Verfügunglässt sowohl dem Kunden als auch den internen Experten die zu stellenFreiheit, die von ihnen verantworteten Konzepte flexibel und 7. Gemeinsame Nutzung von Arbeitsbereichen (Sharedindividuell 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-Dropzur Bedienung nötigen Interaktionen bereits standardmäßig und das Ein- und Ausblenden der Navigationsblöckerealisiert, 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, individuellebeitungsprozesse), 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. Somitkönnen sich externe GUI-Dienstleister der GUI-Qualität (z. DankB. 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 umgesetzttur 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 inden späteren Entwicklungsstadien nur noch wenige Ände- Quellenangaben unter www.e-health-2012.derungen zu erwarten sind, da die Kundenwünsche bereits zuvorberücksichtigt worden sind. Somit können spätere Umgestal- Kontakttungen der GUI größtenteils vermieden werden, die sonst er- Dr.-Ing. Gunter Dubrauhebliche Änderungen im Backend nach sich ziehen könnten. InterComponentWare AG Walldorf Tel.: +49 (0) 6227 385 1736 Ausblick gunter.dubrau@icw.de Im Gespräch mit Kollegen und potentiellen Anwendernsind Anregungen aufgetaucht, die in der oben aufgezeigtenKonzeptstudie 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

×