Home

Interaktionsdesign in Webapplikationen

1. It is this human element that differentiates interaction design patterns from engineering design patterns whose sole concern is efficient reuse of code Wie schon bei den Principles teilt er auch die Patterns nach der Applikationsebene in der sie angewendet werden ein e Postural diese Muster arbeiten auf dem Conceptual level und besch ftigen sich mit dem Gesamteindruck den die Applikation auf die User machen will Dazu geh ren z B Eindr cke wie unscheinbar fordernd grell sanft etc e Structural diese Muster besch ftigen sich mit der Struktur der Kommunikation zwischen User und Applikation Das beeinhaltet sowohl den Informationsfluss an sich als auch die visuelle Aufbereitung in unterschiedliche Ansichten Dialogfelder etc e Behavioral diese Muster besch ftigen sich mit dem Verhalten der Applikation das bestm glich auf die Anforderungen der User abgestimmt sein soll Je klarer die Arbeitsweise der Applikation sichtbar ist desto leichter k nnen die User sie verwenden 3 4 Shneiderman Guidelines Principles Theories Shneiderman systematisiert in SPO4 das vorhandene Wissen nach dem Grad der Ab straktion in Guidelines Principles und Theories Guidelines sind spezifische und praxisorientierte Richtlininen die das Design der Appli kation konsistent und fiir alle DesignerInnen verstandlich festhalten Sie sind das direkte 20 Ergebnis aus den Erfahrungen von schon abgeschlossenen erfolgreiche
2. interaction a cyclic process in which two actors alternately listen think and speak Die Interaktion zwischen BenutzerInnen und Applikation entsteht also durch die wechsel seitige Kommunikation und ist ein permanenter Dialog mit Feedback und Kontrollm g lichkeiten Die Kommunikation findet dabei ber alle vorhandenen und verwendbaren Kan le statt wie z B Bildschirm Lautsprecher Tastatur Maus Der Dialog besteht aus der wechselseitigen Abfolge von Aktion und Reaktion der HandlungspartnerInnen die ein bestimmtes Ziel verfolgen Das Feedback w hrend des Dialoges erlaubt den Usern stetig neue Entscheidungen zu treffen mit denen sie gegebenenfalls ber die vorhande nen Kontrollm glichkeiten den Ablauf der Applikation beeinflussen 14 Durch das bedachte und userzentrierte Design dieser Interaktion entsteht eine hohe Usability da das Verhalten der Applikation an die Bed rfnisse und Anforderungen der User angepa t wird In CR03 S xxxix wird Interaction Design definiert als Interaction Design is the definition and design of the behavior of artifacts environments and systems as well as the formal elements that communicate that behavior Das Verhalten der Applikation sowie die Teile des Interface die dieses Verhalten an die User kommunizieren stehen im Zentrum des Interaktionsdesign Die DesignerInnen ver suchen die Interaktion vorherzusehen und zu planen um die Applikation bestm glich auf den Dialog mit d
3. TECHNISCHE UNIVERSIT T WIEN VIENNA UNIVERSITY OF TECHNOLOGY Diplomarbeit Interaktionsdesign in Webapplikationen ausgef hrt am Institut f r Gestaltungs und Wirkungsforschung unter der Betreuung von Ao Univ Prof Dr Gerald Steinhardt Univ Ass Dipl Ing Dr Hilda Tellioglu eingereicht an der Technischen Universit t Wien Fakult t f r Informatik von Marius Lessiak Matrikelnummer 9926236 Wien im Mai 2007 Inhaltsverzeichnis Abstract Kurzfassung 1 2 Einleitung Usability 2 1 Anforderungen A a 2 2 Messbarkeit von Usability oak 8 22 di 2 3 Fokus auf die User Bra ae ee a Interface amp Interaktion Sch reet seg Ma ar Ae wl ech ch ee See tae a ee ee 3 2 Beaudouin Lafon Paradigms Models 3 3 Coopers Principles Pates aia A e ad a a 3 4 Shneiderman Guidelines Principles Theories Entwicklung des Interaktionsmodells Ad Visual Interface a Bene 4 2 Content Organization ee RATE AR A Navigation sri g ee aa a a a 4 4 Direct Manipulation Objects ia it TE ner AN o A a u bee a ae a E RE Implementierung des Interaktionsmodells 5 1 Modellierung tl a ea a be ah be sb es 5 2 Gestaltung des User Interface 5 3 Softwarearchitektur e fs Ka age ae ea ts oe A 5 4 Applikationslogik dt td bh Wee dt ee a ee eS ed vi 10 13 14 16 19 20 22 24 26 27 29 32 6 Evaluierung der technischen Umsetzung 6 1 Interaktionstechniken x 4 4 33
4. berlappen die Inaktiven Durch Setzen des title Attributes f r beliebige XHTML Elemente sollen Tooltips eingeblendet werden Von der Verwendung von Breadcrumbs zur Navigation wird abgeraten da empirische Studien gezeigt haben dass diese nicht von allen Usern effektiv verwendet werden Cooper betont dass die Notwendigkeit einer Navigation f r die User prim r eine Belas tung darstellt Daher ist der einfachste Weg die Navigation zu verbessern die Anzahl der ansteuerbaren Seiten zu reduzieren Als permanente Orientierungsm glichkeit sollen Si gnposts verwendet werden eine prim re applikationsweite Navigationsgruppe wie z B Karteikartenreiter Zwischen der Repr sentierung eines Navigationselementes und seiner Funktion soll eine klare Verkn pfung erkennbar sein wenn beispielsweise eine Karteikar te namens Kontakt angeklickt wird soll auch tats chlich auf eine Webseite mit dieser 28 amazonde _ gt gt gt ayy ee WILLKOMMEN ADRESSE ARTIKEL GESCHENKPAPIER VERSCHICKEN BEZAHLEN Abbildung 4 3 Die prim re Navigation auf Amazon de Information navigiert werden Wichtige und haufig genutzte Funktionen sollen an die Oberfl che der Navigation w hrend Expertenfunktionen in das Innere platziert wer den k nnen Generell sollen zu tiefe und komplizierte Navigationshierarchien vermieden werden z B durch eine Beschr nkung auf 2 bis 3 Ebenen 4 4 Direct Manipulation Objects Nach Shneiderman Shn97 besitzen Di
5. BL98 BLOO BL04 BMRS96 Boe76 Bor03 European Computer Manufacturers Association Standard ecma 262 ec mascript language specification online 1999 cited 20061202 Available from lt http www ecma international org publications standards Ecma 262 htm gt Definition of the ECMAScript scripting language Time Berners Lee The world wide web A very short personal history on line 1998 cited 20061130 Available from lt http www w3 org People Berners Lee ShortHistory html gt Michel Beaudouin Lafon Instrumental interaction an interaction model for designing post wimp user interfaces In CHI 00 Proceedings of the SIGC HI conference on Human factors in computing systems pages 446 453 New York NY USA 2000 ACM Press Michel Beaudouin Lafon Designing interaction not interfaces In AVI 04 Proceedings of the working conference on Advanced visual interfaces pages 15 22 New York NY USA 2004 ACM Press Frank Buschmann Regine Meunier Hans Rohnert and Peter Som merlad A System of Patterns Pattern Oriented Software Archi tecture 1 Wiley and Sons July 1996 Available from lt http www amazon de System Patterns Pattern Oriented Software Architecture dp 0471958697 ref pd_bxgy_ text_b 303 8002154 4485040 gt B W Boehm Software engineering In JEEE Transactions on Computers pages 1226 1241 1976 John Borland Browser wars High price huge rewards online
6. Das La defach gleicht in seiner Form und visuellen Repr sentierung den Kassetten Abb 5 7b und enth lt zus tzlich einen kurzen textbasierten Hilfehinweis zur Handhabung sofern nichts eingelegt ist Die Zeitanzeige sowie die Visualisierung des Abspielvorganges sind animierte Objekte Ersteres enth lt eine fortlaufende Zeit ab dem Bet tigen des Abspiel Knopfes Abb 5 7c Zweiteres zeigt den laufenden Abspielvorgang mit einem gr nen Rechteck welches sich von links nach rechts bewegt Abb 5 7d und den gestoppten Abspielvorgang durch ein rotes Rechteck Die Kn pfe f r das Starten Pausieren Stop pen und Auswerfen der Arbeitsaufgabe sind mit den von Kassettenrecordern bekannten Symbolen versehen Abb 5 7e Eine Picklist erm glicht die Anzeige von Arbeitsaufga ben durch Auswahl des bergeordneten Projektes Abb 5 7f Zus tzlich zu diesen Elementen ben tigt das User Interface gem dem Interaktions modell auch eine Navigation sowie eine Anzeigefl che f r textbasierte Information Die Navigation Abb 5 7h besteht aus textbasierten Hyperlinks welche sich durch die im Web blichen Unterstriche sowie ihre Zeichengr e von anderen Textstellen abheben 41 Zeitspur gt Aufwandserfassung Verwaltung Logout marius h Aufgaben fir Bei 180 Grad 15 Minuten b Saibling kochen 1 backen Bei 180 Grad 15 Minuten 00 00 20 c aser i may o Filets in Kasserolle geben d Filets mit Knoblauch und S
7. In CRO3 wird eine effiziente Verwendung der Maus vor allem in Abh ngigkeit der Einschr nkungen des menschlichen Bewegungsapparates dar gestellt Die Maus wird entweder feinmotorisch mit den Fingermuskeln f r kurze pr zise Bewegungen oder grobmotorisch mit der Armmuskulatur f r lange Bewegungen bewegt Das Umschalten zwischen diesen Bewegungsmodi erfordert Konzentration und erzeugt Ablenkung Als Beispiel wird der in Webapplikationen fast immer vorhandene Scrollbalken angef hrt wenn die Scrollrichtung gewechseln werden soll muss zuerst ei ne grobmotorische Bewegung an das andere Ende des Balken durchgef hrt werden um den dort positionierten kleinen Knopf feinmotorisch bet tigen zu k nnen Dies erfordert Konzentration und lenkt von der eigentlich durchgef hrten T tigkeit einen Text lesen Daten eingeben etc ab Das Wahrnehmungs und Erkenntnisverm gen Die Bedienung einer Applikation erfolgt ber den Austausch von sensorischen Daten Die User verarbeiten die unter anderem ber Bildschirm und Lautsprecher gelieferten audiovisuellen Reize und senden mittels Tastatur und Maus Steuersignale zur ck Die Interpretation der Daten sowie die darauf basierenden Entscheidungen sind von User zu User unterschiedlich Ein Beispiel f r das Anpassen des Informationsflusses an das Wahrnehmungs und Erkenntnisverm gen der User ist die Verwendung von speziellen Visualisierungstechniken Durch eine derartige Aufbereitung von gro en und
8. May 1998 Available from lt http www amazon com Please Understand Temperament Character Intelligence dp 1885705026 gt A Knapp N Koch F Moser and G Zhang Argouwe A case tool for web applications First Int Workshop on Engineering Methods to Support Information Systems Evolution EMSISE 2003 September 2003 Nora Koch Transformation techniques in the model driven development process of uwe In ICWE 06 Workshop proceedings of the sixth international conference on Web engineering page 3 New York NY USA 2006 ACM Press Gerti Kappel Birgit Pr ll Siegfried Reich and Werner Retschitzegger edi tors Web Engineering Systematische Entwicklung von Web Anwendungen dpunkt 2003 68 Lim07 MAC 00 McL05 MFO7 MHC 96 Mic07a Mic07b Mus07 Pun06 Acegi Technology Pty Limited Acegi security online 2007 cited 20070416 Available from lt http acegisecurity org downloads html gt Homepage of the Spring Acegi Subproject Aaron Marcus Nuray Aykin Apala Lahiri Chavan Donald L Day Emi lie West Gould Pia Honold and Masaaki Kurosu Cross cultural user interface design what so what now what In CHI 00 CHI 00 exten ded abstracts on Human factors in computing systems pages 299 299 New York NY USA 2000 ACM Press Available from lt http www amanda com resources hfweb2000 hfweb00 marcus html gt cited 20061228 Drew McLellan Very dynamic web int
9. SJKO04 Som82 SP04 W3C99 W3C02 W3C04 W3C06 Wag05 Ben Shneiderman Direct manipulation for comprehensible predictable and controllable user interfaces In JUI 97 Proceedings of the 2nd international conference on Intelligent user interfaces pages 33 39 New York NY USA 1997 ACM Press Janice R Nall Sanjay J Koyani Robert W Bailey Research Based Web Design amp Usability Guidelines Computer Psycho logy August 2004 Available from lt http www amazon com Research Based Web Design Usability Guidelines dp 0974996904 gt Ian Sommerville Software Engineering Addison Wesley Pub Co London 1982 Available from lt http www amazon de Software Engineering lan Sommerville dp 3827370019 gt Ben Shneiderman and Catherine Plaisant Designing the User In terface Addison Wesley Longman Mai 2004 Available from lt http www amazon de Designing User Interface Ben Shneiderman dp 0321269780 sr 8 1 qid 1162727263 ref sr 1 1 303 8002154 4485040 ie UTF8 amp s books intl de gt WSC Xsl transformations xslt version 1 0 online 1999 cited 20070413 Available from lt http www w3 org TR xslt gt W3C Recommendation of XSL Transformations XSLT Version 1 0 Standard W3C Xhtml 1 0 the extensible hypertext markup language second edition online 2002 cited 20070413 Available from lt http www w3 org TR xhtml1 gt W3C Recommendation of XHTML 1 0 Standard W3C Extensibl
10. Wie gut hilft es neue Designs zu erstel len Der Abstraktionsgrad und die Zusammensetzung eines konkreten Interaktionsmodells sind variabel sie wirken sich allerdings auf diese 3 Eigenschaften aus Modelle mit hohem Abstraktionsgrad wie z B Direct Manipulation Shn97 haben eine hohe Aussagekraft und leiden unter niederiger Evaluierungs und Gestaltungsst rke Praxisnahe Modelle wie z B die Apple Human Interface Guidelines Con06a verlieren an Aussagekraft und Evaluierungsst rke weisen aber eine hohe Gestaltungsst rke auf Ein optimales Inter action Model zeichnet sich demnach durch die Balance zwischen den 3 Eigenschaften aus Veranschaulichen l sst sich dieses Konzept an einem von Beaudouin Lafon erstellten Interaktionsmodell der Instrumental Interaction BL00 Das Modell beschreibt auf der Grundlage von Direct Manipulation die Gestaltung von Instrumenten als Media toren zwischen User und Computer Der Scrollbalken ist z B ein Instrument mit dem die User den Bildschirminhalt bewegen k nnen es vermittelt damit wie ein Mediator die Interaktion Diese Definition erlaubt das Beschreiben einer gro en Menge an In terfaces und gibt dem Modell eine hohe Aussagekraft Es evaluiert Instrumente anhand dreier Eigenschaften der degree of indirection degree of integration und degree of conformance und sorgt damit f r die n tige Evaluierungsst rke Schlie lich erh lt das Modell durch die Betrachtung von Int
11. f hrt der Kon kurrenzkampf zu einer problematischen Situation f r die EntwicklerInnen Die Produkte m ssen mehrfach geplant implementiert und getestet werden Au erdem ndern sich die Browser Implementierungen laufend was wiederum die Funktionalit t von schon erfolg reich abgeschlossenen Projekten beeinflussen kann Diese Rahmenbedingungen schr n ken den erfolgreichen Einsatz von Interaktion und Interfaces zu Gunsten einer erh hten Usability stark ein Wo in Desktopapplikationen Konzepte wie z B kontextsensitive Hil fe oder objektabh ngige Men s schon angewendet werden k mpfen Webapplikationen mit Kinderkrankheiten wie z B der korrekten browser bergreifenden Darstellung von Text und Bildern Abb 1 3 Mit dem Verkauf von Netscape und der Einstellung der Weiterentwicklung des Netsca pe Navigator ist 1998 das Ende der Konfliktsituation mit Microsoft erreicht Bis 2003 steigt der Marktanteil des Internet Explorers auf 95 Bor03 Ab 2004 wenden sich die User jedoch wieder verst rkt alternativen Browsern zu Mozilla Firefox Opera oder Sa fari Diese Entwicklung beruht auf dem regelm igen Auftauchen von Sicherheitsl cken im Internet Explorer der zunehmenden Verwendung alternativer Betriebssysteme so wie neuer internetf higer Ger te PDA Mobiltelefon Der Konkurrenzkampf am Welt markt ist diesmal allerdings von der korrekten Umsetzung verf gbarer Web Standards des World Wide Web Consortiums Con06b kurz W3C gep
12. hrt sein Siehe Abbildung 4 5d Display Controls werden verwendet um visuelle Elemente der Applikation zu mani pulieren Dazu geh ren Text Controls Beschriftungen Textanzeigen berschriften Scrollbars Splitters Begrenzungen und Drawers ein und ausblendbare Oberfl chen Nach Cooper soll die Handhabung einer Imperative Control wie z B das Dr cken ei nes Button durch eine entsprechend grafische Repr sentation intuitiv erfassbar sein Welche Applikationsfunktion damit ausgel st wird ergibt sich aus dem Applikations 32 zustand der den Usern wohlbekannt sein muss Falls ein derartiges Steuerungselement seine Handhabung und die daraus resultierende Applikationsfunktion nicht ausreichend kommunizieren kann wie z B ein schlecht gew hltes Icon auf einem Butcon werden die User es nicht verwenden Sowohl Buttons als auch Butcons sind als XHTML Elemente vorhanden In XHTML sind nur folgende Selection Controls per W3 Standard definiert W3C02 Checkboxes Radio Buttons und Picklists Andere Steuerungselemente m ssen erst mit JavaScript implementiert werden und werden daher aufgrund der angestrebten prak tischen Umsetzbarkeit des Interaktionsmodells nicht behandelt Nach Cooper brauchen Checkboxes immer einen eindeutig assoziierten Text der kurz und verst ndlich am bes ten ein Wort die Auswahl beschreibt Die Handhabung der Checkbox Klicken f r Ak tiviern und erneutes Klicken f r Deaktivieren ist ein wohlbeka
13. 2003 cited 20061202 Available from lt http news zdnet com 2100 3513_22 996866 html gt Article on zdnet com explaining the fight between Microsoft and Netscape for browser market shares 65 Car03 CFB 02 Che76 Con05 Con06a Con06b CROS Cra02 Cro06 John Carroll HCI Models Theories and Frameworks Toward a Multi disciplinary Science Elsevier Books May 2003 Available from lt http www amazon de Models Theories Frameworks Multidisciplinary Science dp 1558608087 gt Stefano Ceri Piero Fraternali Aldo Bongio Marco Brambilla Sara Comai and Maristella Matera Designing Data Intensive Web Applicati ons Morgan Kaufmann December 2002 Available from lt http www amazon com Designing Data Intensive Applications Kaufmann Management dp 1558608435 gt Peter Pin Shan Chen The entity relationship model toward a unified view of data ACM Trans Database Syst 1 1 9 36 1976 World Wide Web Consortium Document object model dom online 2005 cited 20061202 Available from lt http www w3 org DOM gt Definition of the Document Object Model Apple Developer Connection Introduction to apple human inter face guidelines online 2006 cited 20070125 Available from lt http developer apple com documentation UserExperience Conceptual OSXHIGuidelines XHIGIntro chapter_1 section 1 html gt Apple Human Interface Guidelines World Wide Web Consortium
14. Ausf hrung des Anwendungsfalles einflie en sollte aber auf jeden Fall auch separat betrachtet werden 4 Erhaltung des Erlernten Wie gut behalten die User das Erlernte im Ged chtnis Die Zeitspanne Stunden Tage Wochen sowie die H ufigkeit der Nutzung sollen mit einbezogen werden 5 Subjektive Zufriedenheit Wie ist die Einstellung der User zu der Applikation bzw ihrer Handhabung Die Betrachtung derartiger subjektiver Merkmale erfordert den Einsatz von qualitativen Methoden wie z B Interviews oder Beobachtungen Die Kriterien beeinflussen sich in ihrer Umsetzbarkeit wechselseitig so dass z B die schnelle Durchf hrbarkeit von Anwendungsf llen mit Hilfe komplexer Macros zu Lasten des Lernaufwandes geht Daher sollte die Betrachtung der Ergebnisse auf Basis der Anforderungsanalyse durchgef hrt werden damit der spezielle Kontext der Applikation in die Evaluation einflie en kann Es ist z B in medizinischen Applikationen durchaus w nschenswert die Fehlerrate auf Kosten der Geschwindigkeit zu minimieren Eine derartige Evaluation soll noch vor der Implementierung idealerweise w hrend des Designprozesses durchgef hrt werden Dazu werden Prototypen unterschiedlicher De tailtreue erstellt und mit den Usern erprobt Gerade bei Webapplikationen ist die Her stellung von realistischen Prototypen mit detailgetreuer Interaktion bei niedrigem Res sourcenaufwand gut m glich Nach der Fertigstellung des finalen Designs eve
15. Die Informationen sind mit dem ebenfalls ver ffentlichten Browser WorldWideWeb der HTML Seiten anzeigt und per Maus bedient werden kann abrufbar In den darauffolgenden Jahren erweckt das Projekt Internet die Aufmerksam keit von Firmen die die kommerziellen M glichkeiten erkennen 1993 wird der NCSA Mosaic ver ffentlicht der erste Browser mit grafischer Benutzeroberfl che f r Unix Mac und Windows Basierend auf Mosaic stellt die Firma Netscape 1994 die erste Version des Netscape Navigator vor ein Jahr sp ter bringt Microsoft den Internet Explorer auf den Markt Sp testens 1995 mit Erscheinen des neuen Microsoft Betriebssystems Windows95 das den Internet Explorer sowie die technischen Vorraussetzungen f r eine E Control Panel ol x Si SS ik File Edit View Connections l J 3 Si Eile Edit View Help ep Help Accessibilty Add Heu Add Remove Date Time Display Antions H ard nara Prantams 2 Welcome to Dial Up Networking Make New Dial Up Networking enables you to connect one Le Connectior computer to another computer and to the network by using a modem hdems a StartUp T 3 Microsoft Exchange RB MS DOS Prompt A The Microsoft Network BX Windows Explorer bre Tools Windowso5 DEE Next gt Cancel G Giant Control Panel S21Dial Up Networking E Calculator Abbildung 1 2 Benutzeroberfl che von Windows95 1 47 PM Verbindung zum Internet TCP IP
16. World wide web consortium online 2006 cited 20061202 Available from lt http www w3 org gt Homepage of the World Wide Web Consortium Alan Cooper and Robert M Reimann About Face 2 0 The Essenti als of Interaction Design Wiley March 2003 Available from lt http www amazon co uk exec obidos ASIN 0764526413 citeulike 21 gt Chris Crawford The Art of Interactive Design A Euphonious and Illuminating Guide to Building Successful Software No Starch Press December 2002 Available from lt http www amazon com Art Interactive Design Euphonious llluminating dp 1886411840 gt D Crockfdord Javascript object notation json memo onlinel 2006 cited 20070413 Available from lt Hhttp www ietf org internet drafts draft crockford jsonorg json 04 txt gt Memo of JavaScript Object Notation JSON Standard 66 El105 FGH06 Fou07 Fuc07 Gar05 Get07 GGO1 GHJ95 Gro07 HH95 John Elliot The ibm 5271 aka 3270 pc online 2005 cited 20061122 Available from lt http www seasip info VintagePC 5271 html gt Descripti on and Images of an IBM 5271 computer Peter H Feiler David P Gluch and John J Hudak The architecture analysis amp design language aadl An introduction online 2006 ci ted 20070411 Available from lt http www sei cmu edu pub documents 06 reports pdf 06tn011 pdf gt Introduction to SAE s AADL Language The Apache Software Foundation
17. abgelehnt da dieser Begriff durch den Gebrauch seitens der Werbung im deutschen Sprachraum seiner inhaltlich ad quaten Bedeutung beraubt wurde Stattdessen wird die Verwendung des deutschen Terminus Technicus Gebrauchstauglichkeit empfohlen Eine etwas l n gere inhaltliche Definition gibt die internationalen Norm ISO IEC 9241 11 KPRRO3 9 267 Das Ausma in dem ein Produkt durch bestimmte Benutzer in einem be stimmten Nutzungskontext genutzt werden kann um bestimmte Ziele effek tiv effizient und zufrieden stellend zu erreichen Die h ufige Verwendung des Wortes bestimmt verdeutlicht dass es keine generell g l tigen Richtlinien gibt mit denen eine hohe Usability erzielt werden kann Viel mehr m ssen mit der Applikation verkn pfte Elemente sorgf ltig untersucht und analysiert werden um das bestm gliche Design erarbeiten zu k nnen Jene Elemente aus der obi gen Definition f hren zur Kl rung von wichtigen Aspekten der Entwicklung Wie alt sind die BenutzerInnen Welches Vorwissen haben die BenutzerInnen Wird die Applikation in einem B ro verwendet Wird die Applikation auf einem mobilen Ger t verwendet Wozu wird die Applikation verwendet Je genauer diese Fragen in einer fr hen Phase eines Entwicklungszyklus beantwortet wer den desto h her wird sp ter die Gebrauchstauglichkeit der fertigen Applikation sein Die Anworten sollen eben dazu f hren den Gebrauch effektiv effizient und zufrieden st
18. an den Mauszeiger angeheftet Dieses bewegt sich mit dem Mauszeiger ber das User Interface Bewegt sich der Mauszeiger mit dem Objekt ber den passenden Zielbereich das Ladefach erh lt dieser eine gel be Umrandung um zu signalisieren dass hier losgelassen werden kann Nach Loslassen der Aufgabe erscheint diese im Ladefach um das Resultat des Drag amp Drop Vorganges anzuzeigen Wird eine Aufgabe nicht im Ladefach sondern an einer anderen Stelle des User Interface abgelegt zeigt ein Verschwinden des transparenten Abbildes an dass eine 58 Aufgaben f r Klettern gehen Auto auftanken UU UU UU Auto auftanken gt Aal Expressschlingen einpacken Abbildung 6 5 Direct Manipulation in der Zeitspur Interaktion an dieser Stelle nicht m glich ist In der Zeitspur werden 2 Arten von Controls verwendet die Butcons in der Abspielkon trolle Imperative und die Picklist zur Projektauswahl Selection Die Funktionsweise der Butcons das Anklicken ist durch ihre grafische Repr sentation sie haben einen dimensionalen Kontrast zum Hintergrund intuitiv erfassbar Welche Funktion sie aus l sen wird mit dem auf ihrer Oberseite platzierten Symbol ausgedr ckt Wie in Kapitel 5 2 erl utert sind die Symbole von Kassettenrecordern und hnlichen Ger ten bekannt Falls die User die Bedeutung der Symbole nicht kennen wird ihre Funktionsweise ber andere im User Interface sichtbare Artefakte erschlossen bei Bet t
19. das 1995 unter dem Namen Windows95 Abb 1 2 ver ffentlicht wird Die M glichkeiten der Nutzung des Computers haben sich damit radikal ge ndert die einstige Maschine f r spezielle Aufgaben die nur von ausgebildetem Fachpersonal be dient werden konnte wird zu einer Plattform f r Anwendungen aller Art Besonders die Textverarbeitung WordStar MacWrite und Tabellenkalkulation Lotus 1 2 3 Excel sind Kaufargumente die den Apple Macintosh und hnliche Ger te nicht nur in viele B ros sondern auch private Haushalte bringen Der Personal Computer kurz PC wird zu einem kommerziellen Erfolg der 90er In der Softwareentwicklung spiegelt sich dies in einem Umdenken wider Der Computer wird zum universellem Werkzeug mit dem Aufgaben bew ltigt werden k nnen einen Brief schreiben ein Bild malen das Budget erstellen etc Der Lebenszyklus derartiger Anwendungen von ihrer Konzeption bis zur Verwendung wird Gegenstand einer neuen wissenschaftlichen Disziplin Software Engineering ist in Boe76 zit nach KPRRO3 S 4 definiert als the application of science and mathematics by which the capabilities of com puter equipment are made useful to man via computer programs procedures and associated documentation Da der PC mittlerweile zum Massenprodukt geworden ist gibt es auch keine berschau bare und homogene Usergruppe mehr Stattdessen will man die Applikationen f r so viele User wie m glich nutzbar machen nicht z
20. den clientseitigen Rechner durch den Browser gefiltert werden Im weiteren erfolgt die Evaluierung der technischen Umsetzung auf 2 Ebenen der In teraktion mit dem User sowie der Arbeit mit der verwendeten Softwarearchitektur In Ersterer wird die Umsetzung der Interaktionstechniken auf ihren Einklang mit den auf gestellten Richtlinien des Interaktionsmodells gepr ft Zweitere besch ftigt sich mit der Frage wie gut sich die verwendete Architektur in den Entwicklungsprozess einbinden l sst 6 1 Interaktionstechniken Das Visual Interface ist wie in Kapitel 4 1 definiert berall dort zu finden wo die Ap plikation ihren Zustand ber nicht textbasierte Elemente kommuniziert In der Zeitspur sind daher die Abspielkontrolle ein JavaScript Widget der Bereich mit den visuellen Repr sentationen der Aufgaben sowie das Seitenlayout dem Visual Interface zuzuordnen Abb 6 1 Die SP04 S 501 layout appropriateness also die angemessene Platzierung der Kontrollelemente geht aus Abbildung 6 2 hervor jeder rote Kreis markiert eine Station im Zeigeweg mit der Maus die n tig ist um das Abspielen von Zeit f r eine Aufgabe zu starten Die Verbindungen zwischen den Kreisen also der Zeigeweg den die User zur cklegen m ssen ist minimal Etwaige weitere Funktionen die mit der Maus angesteuert werden wie der Pause oder Stop Butcon befinden sich in direkter N he zur letzten Position des Mauszeigers Die Schaltfl chen wurden au
21. integriert wird die Welt ffentlichkeit aufmerksam Die Nutzung des stark wachsenden Internets mit seinen vielf ltigen Inhalten sorgt f r den Einzug des PCs in viele Lebensbereiche Der Softwaremarkt bietet mittlerweile eine gro e Anzahl von konkurrierenden Produk ten die um die Gunst der immer anspruchsvolleren User wetteifern In der Software Entwicklung ben tigt man daher etwas mit dem sich die Zufriedenheit der zuk nftigen User versichern l sst Das Konzept der Usability von Software in dessen Vordergrund das durchdachte und den Usern angemessene Design von Interaktion und Interfaces einer Applikation steht bietet die gew nschten Eigenschaften Der HCI Bereich wird somit in Industrie und ffentlichen Forschungseinrichtungen immer wichtiger In Desktopapplika tionen ist die Realisierung von Interfaces und Interaktionstechniken die bei den Usern die gr tm gliche Usability versichert technisch gut umsetzbar Die M glichkeiten un terliegen prinzipiell keinen Beschr nkungen abgesehen von der verwendeten Hardware und des Betriebssystems Dies zeigt sich in einer schnellen Entwicklung neuartiger M g lichkeiten wie z B dreidimensionaler Navigationsr ume oder drahtloser Eingabeger te Das Internet kurz das Web entwickelt sich jedoch hinsichtlich der Usability vorerst Mayer Hrsg Unive Datei Bearbeiten Ansicht Chronik Lesezeichen Extras Hilfe E 15 EI hetpsijugmarz atfhife best viewed html_ el E KS zech T
22. ist naheliegend nachdem sie dem Web jahrelang vorenthalten wurde Zeigt sich hier eine gute Umsetzbarkeit und breite Akzeptanz ebnet das m glicherweise auch den Weg f r zuk nftige und neuartige Interaktionsformen die speziell an das Internet angepasst sind 63 Problematisch f r die DesignerInnen sind hierbei die Einschr nkungen seitens der Brow ser welche die technischen M glichkeiten und damit auch das kreative Potential an sich beeinflussen Ein nach allen Seiten offener Designprozess muss ber die Grenzen des Browserfensters hinausgehen Zeigt sich dass ohne R cksicht auf die Browser noch bessere Interaktionsformen geschaffen werden k nnen muss ein Umdenken hin zu ei genst ndig internetbasierten Applikationen oder anderen Browser Implementierungen stattfinden Auch die Handhabung von Desktopapplikationen steht aktuell vor einem Umbruch der mit dem Fortschreiten der technischen Entwicklung immer n her kommt Konzepte wie Pervasive Computing oder Tangible Interfaces werden langfristig genauso selbstverst nd lich werden wie heutzutage die Verwendung der Maus Dies wird sich zwangsl ufig eben falls auf die Interaktionsformen der Browser und Webapplikationen auswirken Es kann also als sicher erachtet werden dass ein stetiger kreativer und ingenieurswissenschaftli cher Prozess notwendig ist um eine an Usability orientierte Interaktion zwischen User und Applikation zu erhalten 64 Literaturverzeichnis Ass99
23. lisiert wird z B das Abspielen einer Aufgabe gestoppt muss nicht die Seite neu geladen werden um die Arbeitszeit zu speichern Dies wird ber einen asynchronen Kommu nikationskanal zum Server durchgef hrt w hrend der User die Webapplikation fl ssig weiterverwendet 5 4 Applikationslogik Das Verhalten der Applikation also die Interaktion mit den Usern wird von der Appli kationslogik bestimmt Wie in Kapitel 5 3 beschrieben muss ein Teil dieser Logik auf der Clientseite implementiert werden um die in dem entwickelten Interaktionsmodell gefor derten Techniken umsetzen zu k nnen DWR erm glicht die asynchrone Verbindung der Applikationslogik auf Client und Server durch das Konvertieren und Exportieren von ausgew hlten Java Methoden und Objekten Die Vorgehensweise ist dabei in 2 Schritte gefasst zuerst werden die gew nschten Exporte in einer XML Datei konfiguriert danach kann der von DWR generierte JavaScript Code ber einen Link in die XHTML Seiten eingebunden werden Die Arbeitsweise von Spring vereinfacht diesen Vorgang noch weiter indem es die DWR Konfiguration einbindet Spring baut wie die meisten Frameworks auf dem Konzept der Inversion Of Control IOC um seine Funktionsweise zu realisieren Int07 das Fra mework stellt einen vordefinierten Kontrollfluss bereit der an bestimmten Stellen an die implementierten Objekte der EntwicklerInnen abgegeben wird Nicht das Haupt programm bestimmt also die Applikationslog
24. multidimensionalen Datenmengen sind die User bzw ihr Wahrnehmungs und Erkenntnisapparat imstande diese deutlich schneller zu analysie ren und bewerten 11 Die Pers nlichkeit Das Userverhalten variert infolge der individuellen Pers nlichkeit des Menschen Vorsichtige zur ckhaltende Charaktere profitieren gerne von einer umfassen den Hilfefunktion w hrend intuitive spontane Typen eine selbsterkl rende Bedienung bevorzugen Die Klassifizierung der Pers nlichkeitsmerkmale einer speziellen Usergruppe ist allerdings schwierig und umstritten Nennenswerte Methoden sind hier der Myers Briggs Type Indicator MBTI Kei98 oder der Big Five Test HH95 die beide der Pers nlichkeitspsychologie entstammen F r die EntwicklerInnen l sst sich jedoch fest halten dass eine Untersuchung des Userverhaltens Ergebnisse bringen kann die in Zu sammenhang mit bestimmten Pers nlichkeitsmerkmalen stehen Beispielsweise sortieren manche User ihre E Mails gerne in Ordner w hrend andere ordnerlos arbeiten aber die E Mails gefiltert anzeigen Kulturelle Besonderheiten Der Lebens und Arbeitsalltag der User ist gepr gt durch ih re kulturelle Identit t Multikulturelle Applikationen im speziellen Webapplikationen stehen damit vor der Herausforderung auf die kulturell bedingten individuellen Unter schiede der User R cksicht zu nehmen Ein oftgenanntes Beispiel ist die Leserichtung in Europa von links nach rechts in China und Japan umgek
25. r die asynchrone Verbindung zwischen Client und Server an Es wird seit 2004 entwickelt und hat einen dokumentierten Projektplan f r die Zukunft Au erdem stellt die Homepage des Projektes ausreichend Dokumentati onsmaterial Bedienungsanleitung API Demos Tutorials Mailingliste inklusive einer Integrationsanleitung in das Spring Framework zur Verf gung Uber DWR k nnen Client und Server zwar asynchron kommunizieren es bietet jedoch keine Funktionen f r die browser bergreifende Manipulation des Visual Interface In diesem Bereich findet sich das Scriptaculous Framework Fuc07 das seit 2005 entwi ckelt und ebenfalls regelm ig aktualisiert wird Die Dokumentation auf der Homepage Bedienungsanleitung API Demos Wiki erlaubt eine effiziente Verwendung in eigenen Projekten Es unterst tzt sowohl die Verwendung von Direct Manipulation als auch das abstrakte Manipulieren von DOM Objekten ber JavaScript In Abbildung 5 9 sind die beschriebenen Frameworks ihre Komponenten und ihr Zusam menspiel als Softwarearchitekturdiagramm Architecture Analysis and Design Langua ge FGH06 illustriert die Datenbasis wird innerhalb der Datenbankimplementierung MySQL abgebildet Hibernate bernimmt die Abbildung der relationalen Daten aus der Datenbank auf die objektorientierten Java Entit ten Die Kommunikation mit der Datenbank wird ber Transaktions und Ressourcenmanagement optimiert Die derart verf gbar gemachten Objekte werden
26. st tzt fehlerhafter JavaScript Code l sst sich effizient finden und korrigieren 61 7 Zusammenfassung amp Ausblick Usability ist in der aktuellen Softwareentwicklung eines der Schl sselkonzepte f r erfolg reiche Applikationen Das Erforschen und Miteinbeziehen spezifischer Charakteristika der User wie z B kognitiver F higkeiten kultureller Besonderheiten oder pers nlicher Eigenschaften in den Entwicklungsprozess resultiert in einer effizienten effektiven und zufriedenstellenden Handhabung Aufgrund ihres direkten Kontakts mit den Usern sind Interface und Interaktion zwei Schl sselkomponenten deren angemessenes Design die Usability stark positiv beeinflusst Interaktionsdesign umfasst sowohl die Gestaltung relevanter Teile des User Interface als auch das Konzipieren der Kommunikation zwischen den Usern und der Applikation Der junge Forschungszweig Human Computer Interaction HCI konzentriert sich seit un gef hr 25 Jahren auf die Erforschung und Entwicklung von Interaktionsformen welche die Nutzbarkeit von Computersystemen steigern Sie brachte Techniken hervor die in Desktopapplikationen heute allgegenw rtig sind z B Icons Men s oder Direct Mani pulation und bei der Entstehung des Internet um das Jahr 1995 bereits bekannt und verf gbar waren Die Usability von Webapplikationen welche die globale Plattform Internet und ihre Vor teile nutzen wollen leidet jedoch bisher unter dem harten Konkurrenzkampf zwisc
27. 4 2342 28 2 1 RA wi wos 6 2 Entwicklungsprozess meu a ara a ee Ba BE he Bi 7 Zusammenfassung amp Ausblick Literaturverzeichnis ill 52 54 60 62 65 Abbildungsverzeichnis 1 1 1 2 1 3 4 1 4 2 4 3 4 4 4 5 5 1 5 2 5 3 5 4 5 9 5 6 5 7 5 8 5 9 6 1 6 2 6 3 6 4 6 5 6 6 Bibliothekskatalog auf der Anzeige des IBM 5271 Benutzeroberfl che von Windows95 2 0 0 0 0000804 Browserspezifische Implementierungen infolge der Inkompatibilitaten Teile des Visual Interface auf Netvibes ccom Textbasierte Information auf Zimbra ccom 04 Die prim re Navigation auf Amazon de Direct Manipulation auf Netvibes com 4 Auswahl an Controls Anwendungsfalldiagramm f r das Aufnehmen von Arbeitsaufwand Zustandsdiagramm f r das Aufnehmen von Arbeitsaufwand Anwendungsfalldiagramm f r die Usergruppe Admin bersicht aller Anwendungsf lle UML Klassendiagramm der Zeibspur UWE Hypertext Strukturmodell f r die Usergruppe Admin User Interface der Zeitspur ra ee Area AJAX Kommunikation zwischen Client und Server Softwarearchitektur der Zeitspur o Visual Interface der Zeitspur Vocal AN EE A Layout Appropriateness des Visual Interface Content Organization in der Zeitspur 2 00 Navigation der Zeitspur gt 22 ur a
28. Aktionen bewirken Dies resultiert in einem starken Kontrollgef hl welches wiederum das Selbstvertrauen und damit das Anwen dungserlebnis im Allgemeinen positiv beeinflusst Nach CR03 S 264 formulieren dies die Apple Styleguides mit Users want to feel that they are in charge of the computer s activities Durch die Sichtbarkeit und leichte Reversierbarkeit der Aktionen haben die User zudem weniger Angst davor Fehler zu machen Direct Manipulation hat jedoch auch einige Nachteile SP04 das visuelle Manipulieren von Objekten ben tigt fast immer sehr viel Anzeigefl che was dazu f hren kann dass der Bildschirminhalt mit Hilfe der Scrollbar bewegt werden muss Sollten dabei wichtige Informationen verloren gehen r t Shneiderman auf die visuelle Repr sentation zu ver zichten und eine dichtere beispielsweise textbasierte Darstellung zu w hlen SP04 Das Erlernen der Bedienung ist anfangs zwar schnell und einfach allerdings nicht intuitiv die User ben tigen also jemanden der die Interaktionstechnik vorzeigt bzw beibringt Die Basis f r Direct Manipulation ist die Auswahl von geeigneten Metaphern und oder Idiomen um die Objekte visuell zu repr sentieren Ist diese Darstellung schlecht gew hlt wird die Usability stark in Mitleidenschaft gezogen Cooper teilt Direct Manipulation in 2 Unterkategorien CR03 Program Manipulation konzentriert sich auf die Steuerung der Applikation und des Interface und soll f r alle User
29. Apache tomcat online 2007 cited 20070416 Available from lt http tomcat apache org gt Homepage of the Apache Tomcat Project Thomas Fuchs script aculo us it s about the user interface baby online 2007 cited 20070411 Available from lt http script aculo us gt Homepage of the scriptaculous Framework Project Jesse James Garrett Ajax A new approach to web applications onli ne 2005 cited 20070416 Available from lt http www adaptivepath com publications essays archives 000385 php gt Jesse James Garrett s Article on AJAX Getahead Direct web remoting Dwr is easy ajax for java online 2007 cited 20070411 Available from lt http getahead org dwr gt Homepage of the DWR Framework Project Martin Gaedke and Guntram Gr amp 228 f Development and evolution of web applications using the webcomposition process model In Web Enginee ring Software Engineering and Web Application Development pages 58 76 London UK 2001 Springer Verlag Erich Gamma Richard Helm and Ralph E Johnson Design Patterns Elements of Reusable Object Oriented Software Addison Wesley Longman March 1995 Available from lt http www amazon de Patterns Elements Reusable Object Oriented Software dp 0201633612 gt Object Management Group Uml resource page online 2007 cited 20070414 Available from lt http www uml org gt Specification of the UML Language Pierce J Howard and Jane M Howard An in
30. B der Einsatz von Direct Manipulation m glich In der Vergangenheit ist dies h ufig an der nicht standard konformen und unzureichenden Implementierung dieser beiden Technologien in den Browsern gescheitert die clientseitige Applikationslo gik welche die Interaktion ausdr ckt musste f r jeden Browser in dem sie funktionieren sollte angepasst und getestet werden Die Architektur der zu entwickelnden Applikation wird mit Hilfe von so genannten Fra meworks realisiert In KPRRO03 S 82 wird der Begriff Framework wie folgt definiert Ein Softwaresystem das die Softwarearchitektur und teilweise Implementie rungen f r eine Familie von Anwendungen bereitstellt Durch Spezialisierung kann ein Framework in eine konkrete Anwendung berf hrt werden Unterst tzt von Frameworks k nnen also immer wiederkehrende Problemstellungen in der Softwareentwicklung durch die Verwendung von bereits konzipierten und implemen tierten Programmcode effizient und ressourcenschonend gel st werden Wie in Kapitel 2 1 erl utert ist die Verl sslichkeit und Verf gbarkeit von Funktionalit t und Daten der Applikation eine der Anforderungen f r eine an Usability orientierte Entwicklung Da her wird die Implementierung der Applikationslogik mit Frameworks realisiert die hin reichend erprobte Patterns zur Verf gung stellen Die verwendeten Frameworks sollen folgende Anforderungen erf llen 1 Abstraktion der Datenbasis mittels Object Relationa
31. Browser Programmes ausgef hrt und sind auf die permanente Kommunikation mit einem Applikationsserver angewiesen Nicht jede be kannte und bew hrte Interaktionstechnik eignet sich daher f r die Umsetzung in einer Webapplikation Das Ziel dieser Arbeit ist es ein Interaktionsmodell f r Webapplikatio nen zu entwickeln das sowohl die besonderen Anforderungen der User ber cksichtigt als auch die Usability durch tats chlich realisierbare Interaktionsformen steigert 2 Usability Die Entwicklung von Software beginnt mit der Idee einer neuen oder verbesserten An wendung welche die Menschen in einer schon bekannten T tigkeit unterst tzt oder ihnen neue M glichkeiten er ffnet Da der Computer mittlerweile in unz hligen Arbeits und Lebensbereichen eingesetzt wird sind der Anwendungsart theoretisch keine Grenzen gesetzt Dokumentenerstellung Visualisierung medizinischer Daten Bloggen E Mails schreiben Musik tauschen etc Inwiefern das entwickelte Produkt die Applikation ge brauchstauglich ist zeigt sich dabei vor allem an der Reaktion der User die erst in einer sp teren Phase des Entwicklungsprozesses bzw zyklus beobachtet und ausgewertet wer den kann Ist diese positiv z B infolge von intuitiver Bedienung guter Verst ndlichkeit und rascher Erlernbarkeit der Applikation spricht man von einer hohen Usability Doch was meint Usability eigentlich genau In KPRRO3 wird die bersetzung von Usability mit Benutzerfreundlichkeit
32. Menu WorkedTimeUnit Vv Query WorkedTimeUnits for Ta WokedTimeUnit Sat Date end Date hours double Abbildung 5 6 UWE Hypertext Strukturmodell f r die Usergruppe Admin 40 beitsaufgabe wird erfasst wenn der Aufnahme Button angeklickt wird Es erscheint dem Autor jedoch unpassend da mit diesem Vorgang auch das L schen bzw berspielen von Kassetten assoziert wird Au erdem ist das Dr cken der Aufnahmetaste eines Kasset tenrecorders mit dem Aufleuchten von Rot in der Anzeige verbunden was im Kontext einer Applikation jedoch eher einen Ruhe oder Ausgangszustand anzeigt Die Zust nde Stop Pause und Ausgeworfen werden daher mit Rot eine laufende Aufnahme mit Gr n visualisiert Basierend auf dieser Metapher ben tigt das Visual Interface folgende Elemente e Arbeitsaufgaben die wie Kassetten in die Zeitspur eingelegt werden k nnen e Ein Ladefach in das die Arbeitsaufgaben eingelegt werden e Eine Zeitanzeige f r Stunden Minuten und Sekunden in der die abgespielte Zeit visualisiert wird e Kn pfe f r das Abspielen Pausieren Stoppen und Auswerfen von Arbeitsaufga ben e Eine farbliche Visualisierung das Abspielvorganges Das Einlegen von Arbeitsaufgaben in die Zeitspur impliziert schon hier die Verwendung von Direct Manipulation wie in dem entwickelten Interaktionsmodell beschrieben Jede Aufgabe ist also als eigenst ndiges grafisches Element repr sentiert Abb 5 7a
33. a Hilfe rsitatsgesetz 2002 Mozilla Firefox Best viewed Hotline I Best viewed Bedienung Zitierweise Diese Anwendung ist optimiert fiir Windows Internet Explorer ab Version 5 5 und Netscape ab Version 6 2 Macintosh Internet Explorer ab Version 5 2 und Netscape ab Version 7 Javascript muss aktiviert sein einstellbar im Internet Explorer Men Extras Internetoptionen Registerkarte Sicherheit Standardstufe niedrig bzw im Netscape Navigator im Men Bearbeiten Einstellungen Registerkarte Erweitert Unterpunkt Scripts amp Plugins Eine Bildschirmaufl sung von mindestens 800 x 600 Bildpunkten 2003 2005 MANZ Abbildung 1 3 Browserspezifische Implementierungen infolge der Inkompatibilit ten zur ck Zwischen 1995 und 1998 entbrennt zwischen den Firmen Microsoft und Nets cape der so genannte Browserkrieg ein Ringen um die Marktvorherrschaft zwischen dem Internet Explorer und dem Netscape Navigator Diese Auseinandersetzung f hrt zu einer gravierenden Vernachl ssigung der standardisierten Implementierung von Web Technologien wie z B XHTML JavaScript oder CSS innerhalb der Browser Stattdes sen wollen die Firmen WebentwicklerInnen mit neuen aber propriet ren Erweiterungen f r das eigene Lager gewinnen Da sich die Entwicklung von Webapplikationen inner halb der Grenzen und M glichkeiten des verwendeten Browser bewegt
34. a he ere pe re Ai Direct Manipulation in der Zeitspur ooa a a a a Controle der Zets p r amp 5 2 400 re a EE a OS GSS iv Abstract Usability in modern web applications suffers from bad interaction With the advent of AJAX it seems possible to improve the user experience by implementing interaction techniques which have been used successfully in desktop applications Therefore this thesis focuses on interaction design as a strong concept to improve usability Based on the comprehensive knowledge in the research area Human Computer Interaction HCI an interaction model for web applications is developed it combines adequate interaction techniques for the different interactive components of a web application in order to ensure a high level of usability Using state of the art web technologies as defined by AJAX a web application is engineered to prove the real life applicability of the interaction model Following the development process a technical evaluation of the web application shows whether and how the interaction model can be used in practice Kurzfassung In der vorliegenden Arbeit werden Konzepte der Usability sowie deren Einbindung in den Softwareentwicklungsprozess erl utert Die mit Usability eng verbundenen Begrif fe Interface und Interaktion werden anhand wissenschaftlicher Arbeiten abgegrenzt und definiert Das reichhaltige Wissen welches aktuell im Forschungszweig der Human Com puter Interaction HCI vorhanden is
35. ace erweitert bersetzt spricht man von der Benutzeroberfl che Der im Internet verf gbare Thesaurus der Universit t Princeton MF07 definiert User Interface als n interface user interface computer science a program that controls a display for the user usually on a computer monitor and that allows the user to interact with the system Es ist also jener Teil einer Applikation der f r die Anzeige der unterschiedlichen gra fischen Elemente verantwortlich ist ber welche die Kommunikation mit den Usern stattfindet Als solches liegt das User Interface an der Oberfl che der Applikation und erlaubt die Benutzung derselben daher der deutsche Begriff Benutzeroberfl che Aus der Definition geht ebenfalls hervor dass jede Interaktion zwischen den Usern und der Applikation ber diese Komponente erfolgt Die Gestaltung des Interface gliedert Cooper CR03 in Graphical Design und Visual Interface Design Eines der Ziele des Graphical Designers ist ein Interface das die User auf einer visu ell sthetischen Ebene anspricht Darunter fallen Elemente wie Schriftgr e und art Farben Logos und vieles mehr Dar ber hinaus versucht er die Handhabung der Be nutzeroberfl che in die vorhandenen visuellen Objekte zu kodieren um so eine intuitive Verwendung zu erm glichen Zum Beispiel vermittelt die grafische Repr sentation eines Knopfes der sich in seiner H he von der des Hintergrundes abhebt die intuitiv erfassb
36. alz bestreuen x g Filets mit Rosmarin bedecken Filets mit Zitronenscheiben bedecken Saiblingfilets kaufen Abbildung 5 7 User Interface der Zeitspur Die Inhalte in der Anzeigefl che f r die textbasierte Kommunikation Abb 5 7g sind in der Schritfgr e etwas kleiner und in der Schriftfarbe schw cher kontrastiert Dadurch kann der Wahrnehmungsapparat der User die textbasierte Information besser ausblen den um sich auf die wichtigeren Elemente zu konzentrieren F r detaillierte Information kann die Aufmerksamkeit auf den Text fokussiert werden um den Ablauf der Interaktion anhand der Zeitstempel nachzuvollziehen 5 3 Softwarearchitektur Die Architektur von Webapplikationen ist nach KPRR03 auf mindestens 2 Schichten verteilt Server und Client In der Praxis bedeutet dies dass ein Gro teil der Appli kationslogik auf dem Server angesiedelt ist der Anfragen von den Clients bzw einem Browser auf einem Client Rechner entgegennimmt verarbeitet und die Antwort in Form von XHTML Seiten zur cksendet Dieser Kommunikationsvorgang erfolgt blicherweise synchron Der Client auf die Antwort des Servers bevor die User die Applikation er neut bedienen k nnen Das in Kapitel 5 2 vorgestellte Visual Interface ist mit Methoden der Implementierung von Webapplikationen die nur auf dieser synchronen Architektur aufbauen nicht realisierbar Die M glichkeit der Verwendung von Interaktionstechniken wie Direct Man
37. andet werden um den Zustand ungepr ft g ltig oder ung ltig zu signalisieren Die erwartete Eingabe kann seitens der Applikation mit Clue Boxes kommuniziert werden In XHTML ist dies durch Verwendung eines Attributes f r alle Elemente m glich Display Controls werden in XHTML Seiten haupts chlich dazu verwendet um Teile der Benutzeroberfl che abzugrenzen ein oder auszublenden Dazu eignen sich Iframe Tags sowie Div Tags und Span Tags Die Manipulationsm glichkeiten dieser Elemente verschieben einklappen ausklappen sollen durch ihre visuelle Repr sentation intuitiv erfassbar sein Ausgel ste nderungen an der Darstellung der Benutzeroberfl che sol len seitens der User nachvollziehbar und reversierbar sein Innerhalb von ausblendbaren Bereichen sollen sich keine wichtigen interaktiven Komponenten der Applikation befin den die die User bersehen k nnten Scrollbars sind ein Mechanismus der seitens des Browsers zur Verf gung gestellt wird und auf den die angezeigten Webseite wenig Ein fluss hat ber JavaScript Funktionen k nnen jedoch wichtige Bereiche einer Webseite mitscrollen und permanent sichtbar sein 34 5 Implementierung des Interaktionsmodells Das in Kapitel 4 entwickelte Interaktionsmodell soll mit dem aktuellen Stand der Technik im Rahmen einer Webapplikation umgesetzt werden Der Entwicklungsprozess ist das Thema dieses Kapitels von der Modellierung bis zur fertigen Webapplikation 5 1 Mod
38. are Anweisung diesen zu dr cken 13 Der Visual Interface Designer setzt sich hingegen mehr mit den dynamischen Aspek ten des Interface auseinander Was passiert wenn der eben erw hnte Knopf gedr ckt wird Wie wird die damit stattfindende Interaktion am besten visualisiert Wie k nnen die User die Reaktion der Applikation auf den Knopfdruck bestm glich erkennen Er sorgt damit daf r dass die visuelle Struktur des Interface die Interaktion also das wech selseitige Verhalten zwischen User und Applikation bestm glich repr sentiert Anders ausgedr ckt der Visual Interface Designer gestaltet jenen Teil der Schnittstelle ber den die Interaktion zwischen den Usern und der Applikation stattfindet Das Interesse dieser Arbeit gilt wie der Titel schon ausdr ckt dem Interaktionsdesign und nicht dem Interfacedesign Aus dem eben vorgestellten Aufgabenbereich des Vi sual Interface Designer geht allerdings hervor dass die Gestaltung des Interface eng mit der Interaktion einer Applikation zusammenh ngt Daher beinhaltet der Begriff In teraktionsdesign im weiteren auch immer das Design der relevanten Komponenten des Interface 3 1 Interaktion Die Handhabung der Applikation durch die User ist motiviert von der Erf llung einer Aufgabe wie z B das Schreiben einer E Mail Bis zu diesem definierten Ziel befinden sich User und Applikation in einem interaktiven Prozess Crawford erkl rt diese Interaktion in Cra02 S 5 als
39. at allow commu nication betweeen users and software Controls sind also all jene Objekte auf der Benutzeroberfl che die eigenst ndig mani pulierbar sind und der Kommunikation zwischen User und Webapplikation dienen Man bezeichnet sie auch als Widgets Gadgets oder Gizmos Controls erlauben den Usern mit der Applikation zu interagieren und ihren Ablauf zu steuern Cooper unterscheidet in CRO3 folgende Arten Imperative Controls werden verwendet um eine Funktion der Applikation auszul sen Dazu geh ren Buttons Kn pfe und Butcons halb Button halb Icon z B in der Tool bar des Browsers Siehe Abbildungen 4 5b und 4 5c Selection Controls werden verwendet um Men optionen oder Daten auszuw hlen Dazu geh ren Checkboxen Auswahlfelder mit Mehrfachselektion Butcons mit Zustandsin formationen z B gedr ckter Knopf mit Icon Flip Flop Buttons Kn pfe mit Zustand durch Beschriftung visualisiert Radio Buttons Auswahlfelder mit Einfachselektion Combutcons Butcons mit Zustand und Drop Down Men Picklists Auswahllisten Drop Down Men s Comboboxes Kombination zwischen Eingabefeld und Auswahllis te und Tree Controls hierarchische Baumlisten Siehe Abbildung 4 5a Entry Controls werden verwendet um Daten einzugeben Dazu geh ren Textedit Fields Texteingabefelder Spinners Schalter Gauges Messleisten Sliders Schieber Knobs Drehkn pfe Die Dateneingabe kann mit oder ohne Eingabebeschr nkung ausgef
40. auch mit Unterst tzung durch DWR und Scriptaculous anspruchsvoller aktuell g ngige Browser zeigen zwar deutliche Fort schritte in der standardgetreuen Umsetzung von Technologien wie JavaScript oder DOM es kommt jedoch immer wieder zu Inkompatibilit ten wie z B bei der Anzeige des Vi 60 sual Interface siehe Kapitel 6 1 Vom Zugriff auf DOM Objekte ohne die kapselnden Funktionen von Bibliotheken wie sie Scriptacolous anbietet wird abgeraten Versuche w hrend der Entwicklung haben gezeigt dass dies zu unerwartetem Verhalten seitens der Browser wie z B dem Verschwinden der Objekte f hren kann Das Einbinden der ber DWR bereitgestellten asynchronen Kommunikation hat sich als einfach und problemlos erwiesen Das Framework unterst tzt den Entwicklungspro zess hier zus tzlich mit der Verf gbarkeit einer Testumgebung in der alle exportierten Objekte und Methoden ber Aufrufe auf XHTML Seiten ausprobiert werden k nnen Das Verwenden der von Scriptaculous bereitgestellten Objekte f r die Realisierung des Drag amp Drop der Aufgaben hat gut funktioniert die speziellen Anforderungen des Inter aktionsmodells konnten durch Einbinden von eigenem Programmcode umgesetzt werden F r die Realisierung clientseitiger Applikationslogik wird die Verwendung des Browsers Mozilla Firefox empfohlen da dieser infolge der integrierten JavaScript Fehlerkonsole und gratis Erweiterungen wie z B WebDeveloper den Entwicklungsprozess aktiv unter
41. ava in Webapplikatio nen verwendet werden kann Von den Java basierten Frameworks werden weiters nur jene gew hlt die aufgrund ihrer Lizenzierung LGPL MIT GPL f r kommerzielle und nicht kommerzielle Projekte frei verf gbar sind F r die Abstraktion der Datenbasis wird das Framework Hibernate JBo07 gew hlt da es sowohl ORM als auch transaktionsbasiertes Datenmanagement anbietet Das Spring Framework Int07 verwaltet die Hibernate Konfiguration bietet einen Authentifizie rungsmechanismus an Lim07 und erlaubt das Einbinden von Programmcode in XHTML Vorlagen In Spring wird die f r die Zeitspur notwendige serverseitige Applikationslo gik in Form von Java Objekten integriert Hibernate und Spring werden seit Jahren entwickelt und bieten die klassische synchrone Client Server Architektur f r Webappli kationen Die Unterst tzung f r AJAX erfordert zus tzlich den Einsatz von j ngeren Projekten 45 Bei der Auswahl der AJAX Frameworks werden weitere Kriterien in Erw gung gezogen da die Geschwindigkeit mit der die Entwicklung in diesem neuen Bereich der Web Technologie vorangeht sehr hoch ist wie in der Informatik blich kommen nur solche Projekte in Frage die eine angemessene Dokumentation und Weiterentwicklungspoten tial besitzen Damit soll versichert werden dass ein gew hltes Framework in naher Zu kunft noch immer betreut und verbessert wird Hinsichtlich dieser Forderung bietet sich das DWR Framework Get07 f
42. ber Data Access Objects DAOs angesprochen Spring bindet die DAOs als JavaBeans Mic07a die ber das Bean Management kon figuriert werden ein Die Gesch ftslogik der Applikation wie z B das Editieren oder L schen von Datens tzen wird innerhalb selbst programmierter Business Objects rea lisiert Jene Java Objekte die ber Java Servlet Pages Mic07b manipuliert werden k nnen werden als Service Beans freigegeben Diese Service Interfaces bilden die zen trale Schnittstelle ber welche die Anwendungsm glichkeiten der Applikation realisiert werden Mit Java Servlet Pages werden aus Templates XHTML konforme Webseiten generiert auf denen die User mit der Applikation interagieren Eine Webseite wird da bei als View abgebildet Jene Views auf denen Objekte manipuliert werden enthalten 46 Backing Beans eben die manipulierbaren Objekte Nach einer Manipulation werden die Daten validiert und entsprechend konvertiert Validator Convertor damit sie an der Datenbasis wieder in die Datenbank gespeichert werden k nnen DWR bildet ausgew hlte Java Objekte und Methoden in die Skriptsprache JavaScript ab es agiert als JavaScript Proxy Im Browser k nnen derart exportierte Objekte und Methoden asynchron ausgef hrt werden ber Reverse AJAX kann au erdem zur Lauf zeit dynamisch vom Server ausgehend JavaScript Code auf den Browsern ausgef hrt werden ber Scriptaculous wird das Visual Interface dynamisch und asynchron aktua
43. bjektes sowie die des darin enthaltenen Textes ndern sich nach einem Schema das applikationsweit konsistent ist Wenn eine derartige farbliche Markierung nicht aus reicht k nnen selektierte Objekte auch mit zus tzlichen visuellen Merkmalen wie z B einem Rahmen versehen werden Drag amp Drop ist ein Idiom f r das Verschieben von Objekten auf der Benutzeroberfl che Dabei wird das Objekt selektiert bei gedr ckter Maustaste ber den Bildschirm bewegt und mit Loslassen der Maustaste abgesetzt Die Bewegung ist gleichbedeutend mit einer Transformation die auf das selektierte Objekt angewendet wird Dabei repr sentiert der Zielbereich auf der Benutzeroberfl che also der Bereich in dem das Objekt abgesetzt wird die Funktion Beispielsweise wird ein Objekt das auf dem Papierkorb abgesetzt wird gel scht Wichtig bei diesem Vorgang ist dass jeder Schritt entsprechend des Ap plikationsverhaltens visualisiert wird das Bewegen eines Objektes wird optimalerweise durch ein Anhaften desselben an dem Mauszeiger repr sentiert Wird der Mauszeiger mit dem Objekt ber einen passenden Zielbereich bewegt ndert dieser seine Darstellung Nach Loslassen des Objektes muss das Ergebnis der ausgef hrten Funktion ebenfalls visualisiert werden beispielsweise das Verschwinden des zu l schenden Objektes im Pa pierkorb 31 4 5 Controls In CRO03 S 337 sind Controls definiert als Controls are manipulable self contained screen objects th
44. bsichtlich vermieden obwohl es hnlich verwendet werden k nnte Zeit f r eine Ar 39 Project name String start Date end Dale status int istatus int lsetName name String IsetName name String getName String isetStart start Date getStark Date IsetStarkstart Date isetEnd end Date getNameQ String getStan Date getEndO Date isetStatus status int getStatusO int getProject Project IsetStatus status int getWorkedTimeUnitList List jsetEnd end Date getEndO Date getStatua int addWorkedTimeUnitiworkedTimeUnit WorkedTimeUnit getTaskList List wolkedtimeunits D WokedTimeUnit istart Date ZeitUser O 4 7 Jend Date minutes double login String Abbildung 5 5 UML Klassendiagramm der Zeitspur create project gt gt delete project gt gt Project name String start Date end Date lt lt process lin gt gt process link gt gt Menu Task status int Index Projects delete task gt lt lt process linh gt gt Index Task create task gt gt Tak aa name sting Rocca tino ytt Date end Date status int lt lt process link Menu Project process link Query WorkedTimeUnits for Project Pr lt lt process link create WorkedTimeUnit gt
45. chen der Benutzeroberfl che leidet die Usability Cooper erl utert in CR03 eine Reihe von Interaction Patterns deren Anwendung die Usability des Visual Interface positiv beeinflusst Vermeiden von Visual Noise Die grafischen Elemente des Visual Interface sollen auf das Notwendigste reduziert werden um die Kommunikation mit den Usern zu erleichtern Ein berfluss an Schaltfl chen Symbolen Grafiken etc mit denen die Applikation ihre Logik kommuniziert erh ht das Risiko dass die User etwas bersehen oder ausblenden 24 Kontrast amp Gruppen Durch wohl berlegtes Kontrastieren und Gruppieren von grafi schen interaktiven Elementen entstehen visuelle Muster die die User effizient erkennen und leicht im Ged chtnis behalten k nnen Durch Kontrast also spezifische Unterschei dungsmerkmale sollen sich nichtinteraktive Elemente der Benutzeroberfl che wie z B Logos von manipulierbaren interaktiven Elementen wie z B Buttons abheben Cooper unterscheidet 4 Arten von Kontrast Dimensional Contrast gibt ein dreidimensionales Aussehen welches gleichzeitig intuitiv die Handhabung vermittelt z B bei einem But ton Tonal Contrast hebt Elemente durch Ver nderungen ihrer farblichen Erscheinung Farbton S ttigung Helligkeit von anderen ab Spatial Contrast ver ndert die zwei dimensionale r umliche Anordnung z B von links nach rechts und u ere Form z B eckig oder rund von grafischen Elementen Layering bezi
46. d abheben und eine Schriftgr e von minimal 11 Punkt besitzen Shneiderman betont vor allem das effiziente Anordnen und Gruppieren von Textelementen auf der Benutzeroberfl che Er verweist auf die Studie IH02 derzufol ge die User eine spaltenorientierte Anordnung bevorzugen Au erdem sollen serifenlose Fonts sowie farblich markierten berschriften verwendet werden 4 3 Navigation Die User verwenden eine Webapplikation durch Interaktion mit unterschiedlichen Web seiten Auf diesen Seiten ist die gesamte Funktionalit t und entsprechende Informationen abgebildet Die Navigation durch diese Menge von Seiten ist ein kritisches Element das die Usability stark beeinflusst Die User m ssen effizient durch die Webapplikation na vigieren k nnen w hrend sie dabei die Orientierung behalten also was gerade passiert und wie anderen Seiten angesteuert werden k nnen Die Visualisierung der Navigations informationen erfolgt z B mittels Men s Breadcrumbs Hud04 oder Signposts CR03 Innerhalb dieser Visualisierungen verweisen Links auf die URL die eindeutige Adresse innerhalb des Internet der entsprechenden XHTML Seite Abb 4 3 Shneiderman verweist in SP04 auf die Interaction Principles aus SJK04 um die Usa 27 bility der Navigation zu verbessern In Webapplikationen verteilt sich die Interaktion mit den Usern h ufig auf mehrere nacheinander angezeigte Webseiten Innerhalb einer derartigen Sequenz sollen die User immer e
47. d simultan bedien und einstellbar wie es das Interaktionsmodell f r transaktionale Bereiche fordert Direct Manipulation wird in der Zeitspur verwendet um die Aufgaben aus dem Lis tenbereich in das Ladefach einzulegen Die User klicken eine Aufgabe an halten die Maustaste gedr ckt ziehen sie auf das Ladefach und lassen los Diese Verwendung er f llt die 3 Charakteristika von Shneiderman aus Kapitel 4 4 1 die Aufgaben sind als Rechtecke mit Beschriftung visuell repr sentiert und mani pulierbar 2 die Manipulation erfolgt durch physische Interaktion in diesem Fall mit der Maus 3 die Auswirkungen der Interaktion sind sofort sichtbar z B bewegt sich die Aufgabe ber die Anzeige und erscheint im Ladefach Die visuelle Repr sentierung der Aufgaben wurde sehr simpel gehalten um die ben tigte Anzeigefl che zu minimieren Damit soll auch bei Projekten mit einer gro en Anzahl an Aufgaben versichert werden dass nicht zu weit gescrollt werden muss um die Aufgabe auf die Ladefl che zu ziehen Das Bewegen von Aufgaben ber die sichtbare Anzeigefl che innerhalb des Browsers hinaus f hrt zu einem Mitscrollen des Fensters Cooper bezeichnet die in der Zeitspur verwendete Art der Direct Manipulation als Drag amp Drop CR03 5 289 Dabei erf llt die Implementierung die w hrend der Interak tion durchzuf hrenden visuellen nderungen in der Anzeige mit dem Aufnehmen einer Aufgabe wird ein transparentes Abbild derselben
48. den Problematisch ist die konsistente und browser bergreifende Darstellung des Visual In terface 2 unterschiedliche Browser Mozilla Firefox 2 und Microsoft Internet Explorer 7 zeigen kleiner Unterschiede in der Anzeige der grafischen Elemente Die Butcons der Abspielkontrolle werden im IE7 ohne in FF2 mit Abstand zu umliegenden Elemen ten dargestellt Au erdem wird die Box mit den textbasierten Informationen nicht an derselben Stelle des User Interface plaziert Dies verletzt klar die geforderte konsistente Ausrichtung von grafischen Elementen Ein Design in dem die Box mit den Textinforma tionen exakt unterhalb der Abspielkontrolle positioniert ist ist daher f r beide Browser aufgrund unterschiedlicher Implementierungen des Anzeigerendering nicht m glich Der Autor entscheidet sich f r die korrekte Ausrichtung in FF2 Content Organization also die Anzeige von textbasierte Information gibt es in der Zeitspur in allen 3 prim ren Elemente des User Interface In der Aufgabenbox ist je de Aufgabe als Rechteck symbolisiert das eine Kurzbeschreibung enth lt Dies folgt dem Leitsatz von Cooper CR03 S 242 visually show what textually show which In der Abspielkontrolle wird die verstrichene Zeit ebenfalls textbasiert in dem Format 59 Aufgaben f r Expressschlingen einpacken Auto auftanken Expressschlingen einpacken Gurt anziehen or Willkommen 2ur Zeitspur 21 45 07 gt Lade Proje
49. e etwas blas ser senken den Kontrast damit der Wahrnehmungsapparat der User die angezeigten Informationen bei Desinteresse leicht ausblenden kann Eine Ausnahme bilden Feh lermeldungen diese machen durch Verwendung roter Farbe auf sich aufmerksam Mit 11 Punkt hat der Text in diesem Bereich die nach Cooper minimal zu verwenden de Schriftgr sse Die Informationen sind per Zeitstempel von oben lter nach unten j nger sortiert wobei ltere Meldungen angescrollt werden m ssen Die Navigation der Zeitspur ist auf wenige Seiten begrenzt die Usergruppe User hat Zugriff auf die Aufwandserfassung sowie auf die Logout Seite w hrend die Usergruppe Admin zus tzlich den Verwaltungsbereich ansteuern darf Abb 6 4 Der Link in den Verwaltungsbereich wird also nur f r die User der Gruppe Admin eingeblendet Da die Navigation mit einer Ebene auskommt besteht kein Bedarf f r verschachtelte Men s oder hnliches Die Navigationsleiste wurde als Signpost entworfen enth lt Hyperlinks die sich durch ihre Darstellung von nicht interaktiven Textelementen abheben und ist applikationsweit sichtbar Sie ist am oberen und nicht am linken Rand des User Interface positioniert damit der Platz f r die Aufgabenliste der Aufwandserfassung frei bleibt Die 97 Zeitspur gt Aufwandserfassung Verwaltung Logout marius Abbildung 6 4 Navigation der Zeitspur Navigationselemente innerhalb der Aufwandserfassung also z B die Projekt Picklist sin
50. e markup language xml 1 0 third edition online 2004 cited 20070413 Available from lt http www w3 org TR 2004 REC xml 20040204 gt W3C Recommendation of Extensible Markup Lan guage XML 1 0 Standard W3C Cascading style sheets level 2 revision 1 online 2006 cited 20070413 Available from lt http www w3 org TR CSS21 gt W3C Wor king Draft of CSS Standard Ina Wagner Skriptum zu Experimentelle Gestaltung von Multimedia Anwendungen und Pr sentationsstrategien Technische Universit t Wien Institut f r Gestaltungs und Wirkungsforschung 2005 Available from lt http www media tuwien ac at i wagner lehre php gt 70
51. e und Zeilenanzahl ist variabel sowohl einfeld als auch mehrzei lige Varianten sind m glich Eine Beschr nkung der Eingabem glichkeiten ist nur durch die Gr e des Feldes m glich Ansonsten k nnen die User jedes beliebige Zeichen setzen Damit ist die Applikation gezwungen die Eingabe der User zu validieren bevor sie verar beitet wird Dies ist prinzipiell ein Dilemma die User k nnen hinweislos Daten eingeben 33 a O b Amazon de Amazon de B cher Google Suche c Englische Bucher Zeitschriften Popmusik Search d Abbildung 4 5 Auswahl an Controls die sich spater als ungiiltig erweisen und erneut eingegeben werden miissen Das erzeugt unweigerlich Unzufriedenheit mit der Handhabung Durch entsprechendes Design des Eingabefeldes und des Validierungsmechanismus kann dies jedoch vermieden werden Cooper unterscheidet 2 Arten von Validierung CR03 aktive Validierung erfolgt w h rend der Eingabe und l sst nur bestimmte Zeichen z B Zahlen zu Passive Validierung wartet bis die Eingabe beendet wurde und pr ft dann im Hintergrund die G ltigkeit Cooper empfiehlt die Verwendung der passiven Variante mit einer Wartezeit von 400 Millisekunden in denen keine Useraktivit t feststellbar ist Beide Validierungsmetho den m ssen ein ansprechendes visuelles Feedback liefern aufgrund dessen die User die G ltigkeit oder Ung ltigkeit der Daten erkennen k nnen Beispielsweise kann das Ein gabefeld farblich umr
52. ehrt welche die Wahrneh mung von Inhalten beeinflusst Dies stellt jedoch nur die Spitze des Eisberges dar in IMAC 00 werden Kriterien vorgestellt mit denen die Eigenarten einer Reihe von Kultu ren analysiert sowie deren Einfluss auf die Handhabung von Webapplikationen bewertet werden Die Betrachtung und R cksichtnahme dieser Faktoren ist vor allem bei jenen Kompo nenten der Applikation wichtig die in direktem Kontakt mit den Usern stehen Das Speichern von Informationen in eine Datenbank ist im Normalfall unabh ngig von den Pers nlichkeitsmerkmalen der User Im Gegensatz dazu stehen jedoch die Benutzerober fl che das Interface und das Applikationsverhalten die Interaktion die infolge ihrer direkten Kommunikation mit den Usern auf diese bestm glich eingehen sollen Das Ziel der EntwicklerInnen das Versichern eines hohen Ma es an Usability h ngt von einem optimalen Design dieser beiden Komponenten ab Interaktion und Interfaces bestimmen dabei nicht nur das Aussehen und das Verhalten einer Applikation sondern erzeugen bei den Usern ein komplexes Anwendungserlebnis Ist dieses positiv beweist das den Erfolg der Entwicklung 12 3 Interface amp Interaktion Der englische Begriff Interface l sst sich generell mit Schnittstelle in den deutschen Sprachraum bersetzen Im Kontext der Kommunikation zwischen User und Applikation bzw der Schnittstelle zwischen Mensch und Maschine wird dieser Begriff dann zu User Interf
53. eht sich ebenfalls auf die r um liche Anordung allerdings in der dritten Dimension durch Verwendung der z Achse und erlaubt damit das berlappen Hin und Wegschieben von grafischen Elementen Durch Kontrastierung entsteht in den meisten F llen ein gleichzeitiges Gruppieren diese Gruppen unterscheiden interaktive Elemente anhand ihrer Funktionen Konsistentes Ausrichten von Elementen einer Gruppe Innerhalb einer Gruppe sollen gleiche interaktiven Elemente dieselbe Ausrichtung z B linksb ndig besitzen Die Grup pen selbst sollen in Gitternetzstrukturen eingebettet werden geordnet nach ihrer Wich tigkeit Dies vermittelt den Usern eine aufger umte Benutzeroberfl che die sie besser verstehen k nnen Visualisieren von Applikationsverhalten Erg nzend zu der textuellen Beschreibung soll das Applikationsverhalten visualisiert werden um das Verstehen seitens der User zu erleichtern Verwenden von idiomatischen Interfaces Der im Internet verf gbare Thesaurus der Uni versit t Princeton MF07 definiert Idiom mit H n idiom idiomatic expression phrasal idiom set phrase phrase an expression whose meanings cannot be inferred from the meanings of the words that make it up Die Bedeutung eines Idiomes ergibt sich also nicht aus den Bestandteilen an sich sondern erst aus einer speziellen kulturellen Verwendung Die Bedeutung ist damit nicht intuitiv oder implizit erfassbar sondern muss erst erlernt werden Nach Co
54. eject stop eject Abbildung 5 2 Zustandsdiagramm f r das Aufnehmen von Arbeitsaufwand 37 delete project create project Sextend gt gt lt lt emtend gt gt Ki i update project list projects l lt lt extend gt gt I update task Admin list woke dtimeunits I create task lt lt extend gt gt 1 t delete task Abbildung 5 3 Anwendungsfalldiagramm f r die Usergruppe Admin modify workedtimeunit modify projects Admin modify tasks list workedtimeunits Abbildung 5 4 bersicht aller Anwendungsf lle 38 Basierend auf der objektorientierten Modellierungsmethode UML zeigt Abbildung 5 5 ein vereinfachtes Klassendiagramm der Zeitspur Es gibt Projekte Project denen meh rere Aufgaben Task zugeordnet sein k nnen Zu jeder Aufgabe gibt es eine Anzahl von aufgenommenen Arbeitszeiten WorkedTimeUnit Die Arbeitszeiten sind den Usern ber ihr eindeutiges Login aus dem User Objekt zugeordnet In Desktopapplikationen wird die Navigation aus den UML Anwendungsfalldiagrammen ersichtlich Die Nicht Linarit t von Hypertext wie in Webapplikationen verwendet erfordert jedoch zus tzli che Konzeptionsmethoden damit die User nicht kognitiv berlastet werden UWE be r cksichtigt dies mit dem Hypertext Strukturmodell welches die Hypertext Verkn p fungen Links in Webapplikationen visualisiert Daf r werden bestehende Ob
55. ellend zu gestalten Effektiv meint hier eine vollst ndige und genaue Ausf hrung effizient bezieht sich auf den Aufwand der in Relation zu den erzielten Ergebnissen stehen muss und zufrieden stellend bezeichnet eine Nutzung welche frei von Beeintr chtigungen erfolgt und bei den NutzernInnen positive Reaktionen ausl st 2 1 Anforderungen Bei der Planung von Softwareentwicklung st tzt man sich auf hinreichend erforschte und erprobte Prozessmodelle wie z B das klassische Wasserfallmodell Som82 oder j ngere objektorientierte Ans tze GG01 Innerhalb dieser Modelle werden die Arbeitsschrit te von der Idee bis zur fertigen Applikation auf einer allgemein anwendbaren Basis erl utert Einer dieser Arbeitsschritte ist die Anforderungsanalyse bei der die Entwick lerInnen Anforderungen bestimmen und formulieren welche die Applikation erf llen soll Darauf basierend k nnen dann z B Prototypen entwickelt und getestet werden Bezieht man nun Usability in diese Anforderungsanalyse die in einer fr hen Phase eines Ent wicklungszyklus durchgef hrt wird ein ergeben sich nach SP04 folgende Bereiche die zu kl ren sind Die Anwendung seitens der User also welche Aufgaben wie durchgef hrt werden sollen muss gekl rt sein Dies wirkt sich direkt auf die Funktionalit t der Applikation aus Dabei ist es vor allem wichtig jeden m glichen Anwendungsfall zu bestimmen egal ob er h ufig selten oder nur in kritischen S
56. ellierung Der Aufgabenbereich der zu implementierenden Webapplikation findet sich im Projekt management Speziell im universit ren Bereich ist eine genaue Zeiterfassung der Arbeits stunden bei Lehrveranstaltungen mit praktischem Charakter seitens der Studenten unabdingbar die LehrveranstaltungsleiterInnen ben tigen eine m glichst genaue Auf stellung der Arbeitsleistung f r die Beurteilung der Studierenden und Evaluation der Lehrveranstaltung blicherweise wird eine derartige Aufwandserfassung durch das in dividuelle Ausf llen von digitalen Dokumenten so genannten Stundenlisten realisiert Dieses System unterliegt jedoch gewissen Einschr nkungen die digitalen Stundenlisten liegen entweder auf dem privaten PC oder im Speicherbereich der Studierenden auf ei nem der Universit tsserver Wird die Arbeit an einem anderen Ort durchgef hrt z B eine Besprechung in einem Kaffeehaus kann der Aufwand nicht sofort eingetragen wer den Dies f hrt in der Regel zu vernachl ssigten Stundenlisten die bei Abschluss der Lehrveranstaltung nachtr glich und damit ungenau aktualisiert werden Die Informatio nen die hierbei verloren gehen fallen sowohl zu Lasten der Studierenden als auch der LehrveranstaltungsleiterInnen Erstere haben h ufig einen erh hten Arbeitsaufwand der jedoch in den Stundenlisten nicht aufscheint w hrend Zweitere die Angemessenheit der Inhalte der Lehrveranstaltung an den geplanten Arbeitsumfang nicht evaluieren k
57. en wie in Computer as Tool und Computer as Medium verwendet sowie die F higkeit zur Kommunikation mit Sprache wie in Computer as Partner und Computer as Medium verwendet Das f r ihn als HCI For scher relevante und interessante Paradigma ist Computer as Tool in dem er neue In teraktionsformen schaffen will die den Menschen mit seinen speziellen Eigenschaften bestm glich unterst tzen und verbessern In BL00 S 446 definiert Beaudouin Lafon den Begriff Interaction Model als An interaction model is a a set of principles rules and properties that guide the design of an interface It describes how to combine interaction techniques in a meaningful and consistent way and defines the look and feel of the interaction from the user s perspective Ein Interaktionsmodell enthalt demnach das praktisch anwendbare Wissen das die In 17 teraktionsdesignerInnen w hrend der Entwicklung einer Applikation ben tigen um Ent scheidungen zu treffen Verschiedene Interaktionstechniken werden kombiniert um den Usern ein optimales Anwendungserlebnis bieten zu k nnen Die InteraktionsdesignerInnen k nnen unterschiedliche Modelle anhand von 3 Eigen schaften evaluieren 1 Descriptive Power die Aussagekraft Wie gut kann es existierende Benutzerschnitt stellen beschreiben 2 Evaluative Power die Evaluierungsst rke Wie gut hilft es bei der Auswahl von Designalternativen 3 Generative Power die Gestaltungsst rke
58. en Usern vorzubereiten W hrend des Dialoges bzw der Interaktion sorgt das geplante Verhalten der Applikation daf r dass die User die erhaltenen Informa tionen bestm glich wahrnehmen und interpretieren k nnen Anhand der oben erw hnten Aufgabe das Schreiben einer E Mail l sst sich dies illustrieren wenn jeder Buchsta be nicht sofort nach dem entsprechenden Tastendruck sondern zuf llig auftaucht kann die Aufgabe kaum durchgef hrt werden Die Informationen werden zwar seitens der Applikation vollst ndig verarbeitet und wiedergegeben m glicherweise auch sthetisch ansprechend allerdings ohne eine f r die User nachvollziehbare logische Struktur Das Verhalten der Applikation w re somit unzumutbar Die Anwendungsm glichkeiten moderner Computersysteme sind so vielf ltig wie es die Vorstellung des Menschen der sie bedient zul sst Kombiniert man dies mit der F lle an menschlichen Eigenschaften wie in Kapitel 2 3 illustriert wird deutlich dass das De sign der Interaktion welche zwischen User und Applikation stattfindet eine komplexe und anspruchsvolle Aufgabe darstellt In der Praxis entstehen bei der Erf llung dieser Aufgabe neue Erkenntnisse die dokumentiert und publiziert werden Dieses aus der Em pirie kommende Wissen liegt z B in Form von Design Tipps wie in Joh03 vor Johnson beschreibt in diesem Werk 60 Probleme beim Design von Webseiten und Webapplika tionen sowie dazugeh rige L sungen Dieses sehr praxisna
59. erfaces online 2005 cited 20070413 Available from lt http www xml com pub a 2005 02 09 xml http request html gt Article on XmlHttpRequest Technology George Miller and Christiane Fellbaum Wordnet a lexical database for the english language online 2007 cited 20070118 Available from lt http wordnet princeton edu gt Wordnet lexical database search service from Princeton University Brad Myers Jim Hollan Isabel Cruz Steve Bryson Dick Bulterman Tiziana Catarci Wayne Citrin Ephraim Glinert Jonathan Grudin and Yannis lo annidis Strategic directions in human computer interaction ACM Comput Surv 28 4 794 809 1996 Sun Microsystems Javabeans spec online 2007 cited 20070411 Available from lt http java sun com products javabeans docs spec html gt Homepa ge of the JavaBeans Specification Sun Microsystems Javaserver pages technology online 2007 cited 20070411 Available from lt http java sun com products jsp index jsp gt Homepage of the JavaServer Pages Technology PC Museum Xerox alto online 2007 cited 20070417 Available from lt http members fortunecity com pcmuseum alto html gt Description of the Xerox Alto Franz Puntigam Skriptum zur Objektorientierte Programmierung Tech nische Universit t Wien Institut f r Computersprachen October 2006 Available from lt http www complang tuwien ac at franz objektorientiert skript06 buch pdf gt 69 Shn97
60. erfaces als Instrumente Gestaltungsst rke es wird z B die Verwendung von Dialogfenstern die per Definition keine Instrumente sind vermieden 18 3 3 Cooper Principles Patterns Cooper schreibt in CR03 ber Interaction Design Principles Interaction Design Pat terns und Design Imperatives Mit den Design Imperatives will Cooper dem Leser 4 generelle Richtlinien mitgeben die in jedem Design auffindbar sein sollen 1 Ethical considerate helpful das Wohlergehen der User ber cksichtigen 2 Purposeful useful usable die Ziele W nsche und Anforderungen der User ver wirklichen 3 Pragmatic viable feasible die technischen und systemischen Anforderungen be r cksichtigen 4 Elegant efficient artful affective die Gebrauchstauglichkeit optimieren Interaction Design Principles sind f r Cooper generell anwendbare Richtlininien die den EntwicklerInnen helfen Ziele W nsche und Einschr nkungen der User in formale und strukturelle Anforderungen an das Interaktionsdesign umzusetzen Sie sollen damit den Arbeitsaufwand f r die DesignerInnen reduzieren und die Usability f r die User optimieren Zielbereiche der Verbesserung der Usability sind das bessere Verst ndnis der Applikationslogik die visuelle Aufbereitung der Informationen die Erlernbarkeit und die physische Bedienbarkeit Interaction Design Principles werden nach jener Ebene der Applikationsentwicklung in der sie anwendbar sind kategoris
61. erlernbar und meisterbar sein Content Manipulation hingegen wird f r das direk te Erstellen Bearbeiten und Bewegen von Daten verwendet Letzteres kann zwar von allen Usern durchgef hrt werden allerdings ist das Ergebnis abh ngig von den indivi duellen F higkeiten wie z B beim direkten Zeichnen mit der Maus in einem Zeichenpro gramm In dieser Arbeit liegt der Fokus auf Program Manipulation mit der Maus welche wiederum von Cooper in Teilbereiche CR03 gegliedert wird F r das hier entwickelte Interaktionsmodell sind die beiden Bereiche Selection und Drag amp Drop von Interesse Selection bezeichnet die Auswahl von Objekten durch Hinzeigen und Anklicken mit der Maus F r die weitere Manipulation wird in Applikationen immer von einer Reihung Ob jekt Verb ausgegangen zuerst werden die Objekte gew hlt und dann die entsprechend anzuwendende Aktion Mehrfache Selektion von Objekten ist m glich durch Aufziehen eines Rahmens um mehrere zusammengeh rige Objekte oder durch schrittweises Kli cken auf Objekte mit gedr ckter Strg Taste die sich auf der Tastatur befindet Norma 30 Vienna Austria MittwochDonnerstag Fre E LEO Editieren Neue Aufgabe Abbildung 4 4 Direct Manipulation auf Netvibes com Geben Sie Ihren Text hier ein lerweise bei nicht gedr ckter Strg Taste deselektiert eine neue Auswahl ein eventuell bereits selektiertes Objekt Ausgew hlte Objekte sollen sich visuell abheben die Farbe des O
62. f das minimal notwendigste reduziert um eine kognitive 54 berlastung der User infolge zu viel visueller Information zu vermeiden Durch Ver wendung von unterschiedlichen Arten der Kontrastierung wird den Usern der Umgang mit den interaktiven Elementen erleichtert Die beiden prim ren grafischen Elemente die Box mit den Aufgaben sowie die Abspielkontrolle heben sich durch ihre Hinter grundfarbe und den Rahmen deutlich vom Hintergrund der restlichen Webseite ab Die Verwendung der Butcons durch Anklicken ist durch den dimensionalen Kontrast al so das r umliche Abheben vom Hintergrund intuitiv erfassbar Die gemeinsame u ere Form der Aufgaben und des Ladefachs kennzeichnen diese als zusammengeh rig Die den beiden Boxen innewohnenden Elemente sind konsistent linksb ndig ausgerichtet und in Gitternetzstrukturen eingebettet Wichtige Elemente befinden sich weiter oben wie z B die Picklist f r die Projekte Das Applikationsverhalten wird ber die Grafik in der Abspielkontrollbox visualisiert Vergleiche Abb 6 1 und Abb 6 2 Ein durchg ngiges rotes Rechteck kennzeichnet dass der Abspielvorgang gestoppt wurde w hrend ein sich bewegendes kleineres gr nes Rechteck das Abspielen symbolisiert Das Aufnehmen und Ziehen von Aufgaben in das Ladefach ist wie bei vielen Techniken die auf Direct Manipulation basieren idiomatisch Einmal erkl rt k nnen die User diesen Vorgang leicht im Ged chtnis behalten und wiederverwen
63. formationen in Tabellen Inlineelementen z B Span Tags und Blockelementen Div Tags organisiert Abb 4 2 Textelemente werden ebenso wie grafische Elemente von den Usern als visuelle Struk tur erkannt allerdings wird f r das Erkennen und Lesen der Bedeutung mehr Zeit be n tigt Daher ist es sinnvoll Objekte grafisch zu repr sentieren mit einer detailierten 26 3 Folders ala 83 From 9 Subject La Inbox P Zimbra Team Zimbra Demo Forward to Your Friends Forwe 3 Sent Fred Friend Skype Me and Map My Location Hey when y E gt Drafts a Sarah Soap Re Search Dan Two ways 1 Click on Searc ES Junk a Sarah Soap Zimbra APIs Dan Not sure if you knew about D Trash a Alan Ajax Mouse Overs and Drag Drop Dan Have you S Open Source a Laura Linux Zimbra Conversations Guys Have you seen h Stash a Alan Ajax Zimbra Downloads Forums Blogs Etc Hey C 3 Searches a Zimbra Team Welcome to the Zimbra Collaboration Suite We ES Follow up ES From External Dory Ea Unread Ea With attachments Abbildung 4 2 Textbasierte Information auf Zimbra com textuellen Beschreibung Cooper spricht von visually show what textually show which CRO3 5 242 Da vor allem des Lesen von Text langsam und anstrengend ist soll die Ausdrucksweise kurz und klar sein Au erdem wird von der Verwendung von Abk rzun gen ausgenommen der standardisierten abgeraten In grafischer Hinsicht soll sich der Text deutlich vom Hintergrun
64. he Wissen ist stark an den Kontext in diesem Fall die entsprechende Website bzw Webapplikation gebunden Das erleichtert zwar das Verst ndnis und gegebenfalls die Umsetzung es schr nkt jedoch die Wiederverwendbarkeit auf hnliche Problemsituationen ein In den Ingenieurswissenschaften versucht man daher L sungen f r Probleme so weit zu abstrahieren dass sie m glichst generell wiederverwendbar sind Im Software Engi 15 neering werden so genannte Entwurfsmuster GHJ95 im englischen Design Patterns erstellt die auf viele hnliche Problemstellungen anwendbar sind Bei der Entwick lung von Webapplikationen arbeitet man z B nach dem Model View Controller Pattern BMRS96 Im Interaktionsdesign kann ebenfalls auf derartige Entwurfsmuster zur ck gegriffen werden allerdings mit gewissen Einschr nkungen Michel Beaudouin Lafon kritisiert in BLO4 das Fehlen einer soliden und allgemein an erkannten theoretischen Basis als die Ursache f r die schleppende Entwicklung von In novationen im HCI Bereich hnlich dazu erkl rt Shneiderman in SP04 unter Verweis auf Car03 dass es in der HCI Forschung derzeit eine Vielzahl von unterschiedlichen Theorien gibt die gepr ft bearbeitet korrigiert und auch wieder verworfen werden Diese Problematik l sst sich auf das relative junge Alter ungef hr 25 Jahre des Wis senschaftszweiges sowie der Komplexit t des Forschungsbereiches zur ckf hren Die Verwendung von Entwurfsm
65. hen verschiedenen Browserherstellern Diese vernachl ssigen das standardkonforme Imple mentieren von Webtechnologien und verhindern damit ein Umsetzen von in Deskto papplikationen bereits erfolgreichen Interaktionstechniken Der Autor untersuchte da her die Fragestellung ob unter Verwendung aktueller Webtechnologien und Browser Implementierungen ein st rker an Usability orientertes Interaktionsdesign in Webappli kationen m glich ist Beaudouin Lafon Cooper und Shneiderman erkl ren und beschreiben in ihren Arbeiten das reichhaltige Wissen im Bereich der Human Computer Interaction Mit dem Begriff 62 des Interaktionsmodells nach Beaudouin Lafon wird eine theoretische Basis f r das Interaktionsdesign in Applikationen herausgearbeitet Darauf aufbauend werden inter aktive Komponenten von Webapplikationen beschrieben und definiert Das entwickelte Interaktionsmodell kombiniert dann geeignete bekannte und bew hrte Interaktionstech niken f r diese Komponenten um die Usability von Webapplikationen positiv zu beein flussen Basierend auf dem Interaktionsmodell wird die Webapplikation Zeitspur entwickelt welche die Aufwandserfassung im Anwendungsgebiet Projektmanagement erleichtert Im Entwicklungsprozess werden Modellierungstechniken verwendet die ein Abbilden der speziellen Charakteristika von Webapplikationen erlauben Die Gestaltung des User Interface bedient sich der Inspiration durch Metaphern Die gefordeten Interak
66. ie Aufgabenliste angefordert wird Mit der Anforderung wird gleichzeitig eine Funktion verkn pft die bei Erhalt der Daten auszuf hren ist Diese Funktion kann die erhaltenen Daten JavaScript Objekte vom Typ db Task allerdings nicht sofort im User Interface angezeigen da es sich nicht um XHTML Elemente handelt Daher erstellt die Applikationslogik auf dem Client basie rend auf den Daten der Aufgaben DOM Objekte die in das User Interface eingef gt werden Etwaig vorhandene grafische Elemente die Aufgaben eines anderen Projektes repr sentieren m ssen zuvor entfernt werden Das Umsetzen der Interaktionstechnik Direct Manipulation erfolgt durch Verwendung der in Scriptaculous enthaltenen Effekt Klassen Diese bieten eine solide Grundlage auf der Elemente des Visual Interface mit Interaktion versehen werden k nnen Die Umset zung von Drag amp Drop in der Zeitspur arbeitet mit den Aufgaben und dem Ladefach jene DOM Objekte welche die Aufgaben repr sentieren werden der Scriptaculous Klas se Draggable bergeben Dadurch k nnen diese mit der Maus aufgenommen bewegt und abgelegt werden Das DOM Objekt des Ladefachs wird ber Droppables add zur Zielablage der Aufgaben gemacht Die restliche Interaktion rund um die Abspielkontrolle der Zeitspur ist mit eigenst ndi 50 gem JavaScript Code implementiert e das Messen der Zeit e die Aktualisierung der textbasierten und grafischen Applikationsinformationen e das Speichern der Da
67. iert e Conceptual level was ist der Zweck der Applikation wer verwendet sie und warum e Interaction level wie verh lt sich die Applikation e Interface level wie ist die Benutzeroberfl che der Applikation In CRO3 finden sich Richtlinien f r alle 3 Ebenen der Fokus liegt jedoch auf der Interaktion Cooper grenzt den Abstraktionsgrad der Interaction Design Principles durch den Vergleich mit Style Guides ab Style Guides sind nach seiner Definition spezifische und detaillierte Anweisungen f r das Design einer Applikation wie z B die Anzahl der Schaltfl chen in einem Dialogfenster Interaction Design Principles sind dagegen abstrakter und adressieren komplexere Probleme 19 Nach Cooper formalisieren Interaction Design Patterns das Wissen aus Entscheidungen die w hrend des Design Prozesses getroffen werden zu allgemein anwendbaren L sungs mustern Diese Muster k nnen dann bei zuk nftigen hnlichen Problemstellungen wie derverwendet werden Das reduziert nicht nur den Aufwand sondern erlaubt auch den geplanten Einsatz von Interaktionstechniken deren Qualit t hinsichtlich der Usability schon bekannt ist Das Erzeugen von NutzerInnenzufriedenheit Cooper spricht vom well being der User muss auf jeden Fall das Ergebnis der Verwendung von Interacti on Design Patterns sein In CR03 S 93 definiert er dies als den Unterschied zu Patterns aus dem Software Engineering this human element meint well being
68. igen des Start Butcons Abb 6 6b oben links wird das Abspielen der Zeit aus dem wandernden gr nen Recht eck und der fortlaufenden Zeitanzeige ersichtlich Ist das Abspielen gestartet wird das Start Butcon zum Pause Butcon Abb 6 6b unten links Der Pause Butcon visualisiert das Pausieren der Zeit durch Einblenden des roten Rechteckes bei stehenbleibender Zeit anzeige Der Stop Butcon Abb 6 6b oben Mitte hingegen setzt die Zeitanzeige auf den Ausgangszustand 00 00 00 zur ck Mit dem Auswerfen Abb 6 6b oben rechts But con wird deutlich sichtbar die Aufgabe im Ladefach entfernt Sollten die eben skizzierten nderungen des User Interface das Applikationsverhalten bei Bet tigen der Imperative Controls nicht ausreichend kommunizieren kann auch die textbasierte Information in der Box unterhalb der Abspielkontrolle gelesen werden Die Picklist zur Auswahl eines Projektes dessen Aufgaben angezeigt werden sollen wird durch Anklicken des seitlich plazierten Butcons ge ffnet Abb 6 6a Die Kombination aus dem kurzen Hinweistext dar ber sowie im ersten im Anfangszustand immer sicht baren Eintrag innerhalb der Picklist verdeutlichen die Verwendung 59 Aufgaben f r Kletemgehen A Projekt selektieren gt Saibling kochen il b Winterreifen wechseln Y Abbildung 6 6 Controls der Zeitspur 6 2 Entwicklungsprozess Wie zu Anfang des Kapitels kurz beschrieben ist der Entwicklungsprozess bei Webappli katio
69. ik sondern die untergeordneten Objekte daher spricht man von einer Umkehr der Kontrolle Diese zu verwendenden Objek te und ihr Zusammenspiel werden in einer zentralen XML Datei konfiguriert in der 47 Presentation Tier Cross Browser JavaScript Libraries XHTML Scriptaculous Framework Browser JavaScript Proxy Backing Beans Validator Convertor Business Logic ice Tier Service Interfaces DWR Integration Business Objects Bean Management Decalarative Transaction Management Hibernate Integration Spring Framework a E f Integration Tier Data Access Objects Transaction Management Object Relational Mapping Resource Management Web Container Servlet EIS er Abbildung 5 9 Softwarearchitektur der Zeitspur 48 Webapplikation Zeitspur hei t diese beispielsweise servlet zeitspur xml In dieser Kon figurationsdatei sind dann auch die DWR Einstellungen integriert 01 lt dwr configuration gt 02 lt dwr convert class db Project type bean gt 03 lt dwr convert class db Task type bean gt 04 lt dwr convert class db WorkedTimeUnit type bean gt 05 lt dwr configuration gt 06 lt bean id zeitUser class db ZeitUser gt 07 lt dwr remote javascript zeitUser gt 08 lt bean gt In Zeilen 1 bis 5 werden Java Objekte angegeben die als Datentypen in den Client Browsern zur Verf gung stehen sollen Dies erm glicht z B dass ein clientseitiger Auf ruf de
70. in ihrer Sprache und ihrem Verhalten an den Computer anpassen m ssen um ihn bedienen zu k nnen Die Weiterentwicklung der Rechenleistung mit der M glichkeit komplexer grafischer Benutzeroberfl chen und die Verf gbarkeit neuer Ein und Ausgabeger te Maus und Farbbildschirm f hrt ab 1973 bis 1984 zu den Grundlagen moderner PCs Der erste Computer mit grafischer Benutzeroberfl che ist der 1973 im Forschungszentrum Xerox PARC Palo Alto Research Center entwickelte Xerox Alto Mus07 der jedoch nur in der Forschung eingesetzt wird Von den Konzepten des Xerox Alto inspiriert entwickelt die Firma Apple ihr grafisches Betriebssystem Mac OS das erstmals 1984 als Bestandteil des Apple Macintosh vorgestellt wird Es beinhaltet Features die in heutigen Applika tionen allgegenw rtig sind e Direct Manipulation Objects Direkte Manipulation von grafischen Elemente des User Interface durch z B Drag amp Drop e Maus Ein 2 dimensionales Eingabeger t mit mehreren Tasten e Windows Im User Interface erh lt jede Applikation ein Fenster mehrere parallel laufende Applikationen erzeugen berlappende Fenster LUIS Catalog Helcome to Clemson University s Library Catalog EXP HOURS Remote Users STOP Page I of 2 FORward NEXT COMMAND _ Abbildung 1 1 Bibliothekskatalog auf der Anzeige des IBM 5271 Die Firma Microsoft erkennt die Vorteile dieser Techniken und entwickelt wiederum ein derart inspiriertes Betriebssystem
71. ipulation wurde allerdings in den letzten 2 Jahren durch Verwendung von AJAX Asynchronous JavaScript and XML erm glicht Dabei beschreibt AJAX 42 weniger eine spezielle Technologie sondern viel mehr die koordinierte Verwendung von schon vorhandenen Web Technologien Gar05 e Standardisierte Darstellung im Browser mittels XHTML W3C02 und CSS W3C06 e Kommunikation der Daten mit XML W3C04 XSLT W3C99 oder JSON Cro06 e Asynchrone Kommunikation von Client und Server mittels XMLHttpRequest McL05 e Implementieren von Interaktionstechniken im Browser mit JavaScript 1 5 gleich wertig zu ECMA Script Spezifikation 262 Version 3 Ass99 und DOM Con05 Traditionelle Webapplikationen ohne AJAX sind in ihrer Interaktivit t durch die oben skizzierte synchrone Kommunikation zwischen Client und Server eingeschr nkt jede Manipulation der User an der Applikation muss explizit an den Server gesendet werden damit dieser sie verarbeiten und entsprechend beantworten kann Dies geschieht immer seitenweise i e m ssen die User auf das erneute Laden der kompletten Webseite warten um das Feedback der Applikation zu erhalten Der Browser auf der Clientseite agiert also gr tenteils passiv und rendert ausschlie lich das User Interface Einerseits verhindert dies den w nschenswerten fl ssigen Dialog zwischen User und Applikation anderer seits k nnen Interaktionstechniken nur seitenweise eingesetzt werden Da die komplette Applikationslogi
72. istens ebenfalls online Im Desktopbereich sind die User wenn dasselbe Szenario betrachtet wird zuerst gezwungen eine Testversion zu beschaffen diese dann zu instal lieren und eventuell die komplette Version in einem Gesch ft zu bestellen Frei verf gbare Webapplikationen profitieren gerade von eben dieser Unabh ngigkeit an die Installation auf dem Client Rechner der ben tigt nur einen installierten Web Brow ser der die Webapplikation l dt und ausf hrt Dies entlastet einerseits viele User die mit der Installation Wartung und Deinstallation von Software m glichst in Ruhe gelassen werden wollen andererseits steigert es die Verf gbarkeit enorm Wenn Studierende z B 53 die Zeitspur verwenden wollen m ssen Sie sich nur registrieren um die Zugangsdaten zu erhalten und danach die entsprechende URL ansurfen Die eben skizzierte direkte Verf gbarkeit von Webapplikationen liefert nun auch die Erkl rung f r die harten Einschr nkungen seitens der Browser Abseits von technisch bedingten Ursachen finden sich diese in sicherheitsrelevanten Aspekten Die User k nnen in ihrem Browser jede beliebige Webseite oder Webapplikation ffnen auch solche die sch dlichen Programmcode enthalten Das kann z B dazu missbraucht werden um pers nliche Informationen Kreditkartennummern Kennw rter oder Dokumente die auf dem Rechner gespeichert sind zu stehlen Damit dies nicht passieren kann muss der Zugriff einer Webapplikation auf
73. ituationen auftritt Ist die Menge der Anwendungsf lle unzureichend k nnen die User ihren gew nschten Arbeitsablauf nicht ausf hren und werden die Verwendung der Applikation einschr nken oder verweigern Verl sslichkeit und Verf gbarkeit von Funktionalit t und Daten Die Funktionen der Ap plikation sollen immer innerhalb der geplanten und gewohnten Verhaltensweise arbeiten und die Datenintegrit t soll jederzeit gew hrleistet sein Unerwartete Ereignisse w h rend eines Anwendungsfalles oder inkorrekte Daten f hren zu einem Vertrauensverlust bei den Usern und belasten die Verwendung der Applikation Standardisierung Integration Konsistenz und Plattformunabh ngigkeit erleichtern die Handhabung von Applikationen ber Produktgrenzen hinweg hnliche Verhaltenswei sen bei unterschiedlichen Applikationen erlauben den Usern eine intuitive und rasche Bedienung Die Belastung des Einarbeitens in unbekannte Anwendungen und die Feh leranfalligkeit der Bedienung wird reduziert Plangem e Durchf hrung des Projektes Der Zeit und Budgetrahmen der Entwick lung soll nicht berschritten werden damit die Applikation nach Plan eingesetzt werden kann Infolge eines nicht eingehaltenen Projektplanes fehlerhafte unvollst ndige oder versp tetet Applikationen verlieren das Vertrauen der User Das Auseinandersetzen und Erarbeiten der Inhalte dieser 4 Punkte bildet in einer fr hen Phase eines Entwicklungszyklus die Basis f r weite
74. jekte aus dem Klassendiagramm durch Men s Indexe und Queries verbunden e Men s agieren wie in Kapitel 4 3 beschrieben als permanente Steuerung durch die Applikation beispielsweise der Men punkt Verwaltung in der Zeitspur e Indexe sind Auflistungen von Objekten z B eine Liste aller Projekte e Jueries stehen f r die Auflistung einer speziellen Teilmenge von Objekten z B aller Arbeitszeiten eines Users f r eine Aufgabe F r die Webapplikation Zeitspur sind Hypertext Sichten f r die 2 Usergruppen User und Admin notwendig Abbildung 5 6 zeigt das Hypertext Strukturmodell aus der Sicht der Mitglieder der Usergruppe Admin Diese k nnen im Gegensatz zu der Usergruppe User auf alle Bereiche der Applikation zugreifen Das eingeschr nkte Modell f r die Usergruppe User wird hier nicht pr sentiert 5 2 Gestaltung des User Interface Wie in Kapitel 5 1 kurz erl utert ist die Gestaltung des User Interface der Zeitspur von der Metapher eines Kassettenrecorders inspiriert Das Arbeiten mit Metaphern im Designprozess wird in Wag05 n her beschrieben Ein Kassettenrecorder ist ein Ger t in den Kassetten eingelegt abgespielt und ausgeworfen werden k nnen In dem Design wird dieser Abspielvorgang von Musik mit dem Abspielen von Zeit f r eine bestimmte Arbeitsaufgabe verkn pft in der Zeitspur wird die Arbeitszeit von Aufgaben abgespielt und gespeichert Das Verwenden der Aufnahme Symbolik eines Kassettenrecorders wird a
75. k die das Verhalten definiert auf dem Server liegt kann das Visual Interface nur nach einem Kommunikationsvorgang mit demselben aktualisiert werden um den Usern das Verhalten der Webapplikation mitzuteilen Diese Kommunikation basierend auf der Webseite als kleinsten Einheit macht Interaktionstechniken wie Direct Manipulation unm glich AJAX hingegen bertr gt einen Teil der Applikationslogik auf den Client und verbindet diesen ber einen asynchronen Kommunikationskanal mit dem Server Abb 5 8 Da durch ensteht in der Benutzeroberfl che auf der Clientseite die M glichkeit zu granularen Interaktionsformen die nicht an das Absenden und erneute Laden einer Webseite gebun den sind Eingaben der User die die Applikationslogik auf dem Client nicht verarbeiten kann werden asynchron an den Server kommuniziert Aufgrund der Asynchronit t der Kommunikation erlaubt der Client auch weiterhin Usereingaben ohne den Interaktions prozess zu unterbrechen Sobald die Antwort vom Server eintrifft f hrt der Client die erhaltenen Anweisungen aus beispielsweise wird das Visual Interface aktualisiert Mit JavaScript und dem Document Object Model DOM k nnen au erdem Elemente des Visual Interface also die Elemente der XHTML Seite mit Interaktion versehen wer 43 Applikationslogik Applikationslogik Daten XMUJSON T E HTTP Anfrage asynchron Abbildung 5 8 AJAX Kommunikation zwischen Client und Server den Damit wird z
76. kte Gurt einpacken 21 45 07 gt Laden der Projekte erfolgreich 7 21 45 09 gt Hole Aufgaben f r Projekt Saibling kochen Helm einpacken 21 45 10 gt Laden der Aufgaben erfolgreich 21 45 11 gt Aufgabe Bei 180 Grad 15 Minuten backen eingelegt Kletterschuhe anziehen 21 46 01 gt Hole Aufgaben f r Projekt Klettern gehen 21 46 01 gt Laden der Aufgaben erfolgreich 21 46 02 gt Aufgabe Expressschlingen einpacken eingelegt Kletterschuhe einpacken Seil einpacken zur Wand fahren Abbildung 6 1 Visual Interface der Zeitspur Aufgaben f r Klettern gehen Expressschlingen einpacken Auto auftanken cken Expressschlingen einp Gurt anziehen Abbildung 6 2 Layout Appropriateness des Visual Interface 56 Bitte zuerst die aktuelle Aufgabe stoppen oder auswerfen Abbildung 6 3 Content Organization in der Zeitspur HH MM SS angezeigt Das Verwenden dieses weitverbreiteten Formates in dem auch einstellige Ziffern mit einer f hrenden 0 angezeigt werden erleichtert die Wahrnehmung seitens der User F r l ngere Nachrichten wird ein spezieller Bereich des User Interface verwendet Abb 6 3 Dieser Bereich enth lt alle Meldungen der Zeitspur seit Start der Webapplikation Je de Meldung befindet sich in einer Zeile und ist mit einem vorangestellten Zeitstempel versehen Die verwendete Schriftart etwas kleiner sowie die Schriftfarb
77. l Management ORM Die Datens tze aus der relationalen Datenbank sollen automatisiert als Objekte zur 44 Verf gung stehen 2 Transaktionsbasierter Umgang mit Datens tzen Unvollst ndige Datens tze also solche deren Transaktion in der Applikation nicht abgeschlossen wurde sollen nicht in die Datenbasis abgebildet werden 3 Template basierte Darstellung des User Interface Verwenden von XHTML Vorla gen in die mittels Programmcode Daten eingebunden werden 4 Authentifizierung von Clients mit Username und Password Die User der Webappli kation m ssen bekannt und authentifiziert sein um die Zeitspur zu verwenden 5 Verbinden der Client Server Applikationslogik ber asynchrone Kommunikation Clients sollen Zugriff auf ausgew hlten Programmcode der serverseitigen Applika tionslogik haben 6 Browser bergreifende JavaScript Funktionen f r die Manipulation des Visual In terface Clientseitiger Programmcode der die Interaktion zwischen Applikation und User steuert soll auf mehreren g ngigen Browsern funktionieren Die Auswahl der Frameworks wird auf solche eingeschr nkt die in der Programmierspra che Java verfasst sind im Gegensatz zu diversen Skriptsprachen wie PHP oder Ruby besitzt Java wesentlich bessere Spracheneigenschaften wie z B Typen und Datensicher heit oder Polymorphismus Pun06 Mit dem Apache Tomcat Servlet Container Fou07 existiert au erdem ein frei verwendbarer Webserver ber den J
78. lerem und ho hem Abstraktionsgrad Principles nach Shneiderman und Interaction Patterns nach Cooper Diese werden innerhalb eines Interaktionsmodells kombiniert und anhand des sen Eigenschaften Aussagekraft Evaluierungsst rke Gestaltungsst rke bewertet Das Internet wurde urspr nglich als dezentrale Wissensdatenbank entworfen User sol len jederzeit und von berall auf untereinander verkn pfte Dokumente zugreifen k nnen Diese Dokumente hei en im englischen Web Pages zu deutsch Webseiten und sind ber Links miteinander verkn pft Nach Cooper CR03 ist die Verwendung des Internet als Wissensdatenbank informationszentriert die User wollen haupts chlich Webseiten su chen diese anzeigen und Links verfolgen Mehrere Webseiten werden daher in einer so genannten Website organisiert z B in einer Hierarchie und durch ein Navigations modell miteinander verkn pft Suchmaschienen bieten die M glichkeit das Navigations modell zu umgehen indem Webseiten mit spezifischen Informationen direkt gefunden und angesteuert werden k nnen Bei der Entwicklung einer Website liegen die prim ren Anforderungen demzufolge in den Bereichen Information die Inhalte der Webseiten und Organisation die Struktur der Information Die Navigation ist das einzige m ig interaktive Element Webapplikationen weisen hingegen infolge ihrer transaktionsbasierten Arbeitsweise und der dynamischen Inhalte eine hohe Interaktivit t auf Da das Verhal
79. n Entwicklungs prozessen Dieser enge Bezug zur Praxis ist sowohl Nach als auch Vorteil weicht die Problemsituation leicht von jener aus der die Guideline entstanden ist ab ist die An wendung schwierig unm glich oder das Ergebnis unvorhersehbar Ist der Kontext jedoch ident kann das Expertenwissen rasch und sicher eingesetzt werden Guidelines helfen z B beim Design der Navigation der Anzeige oder der Dateneingabe Principles formalisieren das praktische Wissen der Guidelines um es aus dem spezi fischen Kontext herauszul sen und allgemein anwendbar zu machen Damit sind sie universeller einsetzbar und langlebiger erfordern jedoch ein erh htes Ma an Aufwand f r die Verwendung Als Beispiel bringt Shneiderman das Principle recognizing user diversity SP04 S 66 also die Anforderung an die DesignerInnen sich mit den spe ziellen Eigenschaften der User zu besch ftigen Die Erf llung dieses Principle in einem konkreten Design f hrt zuerst zu einem praktischen Mehraufwand allerdings mit der Aussicht auf eine verbesserte erfolgreichere Applikation Zu den Principles geh ren z B Interaktionsformen wie Direct Manipulation und Menu Selection Ausgehend von den Principles werden Theorien verfasst die den h chsten Abstraktions grad innehaben Shneiderman definiert die Anforderungen an eine Theorie mit SP04 S 86 However a good theory should at least be understandable produce similar conclusions for all who use i
80. n anerkannte Taxonomie die interak tive Elemente von Webapplikationen beschreibt Daher hat der Autor dieser Arbeit die Inhalte von SJK04 SP04 CR03 und KPRR03 studiert und auf Gemeinsamkei ten gepr ft Es stellt sich heraus dass jede dieser Arbeiten Webapplikationen in spezi fische Komponenten aufteilt die sinngem quivalent sind allerdings unterschiedlich bezeichnet werden Innerhalb dieser Schnittmenge gibt es wiederum 5 Komponenten die dem Interaktionsdesign per Definition aus Kapitel 3 1 zugeordnet werden k nnen Das entwickelte Interaktionsmodell f r Webapplikationen verwendet daher eine Taxonomie bestehend aus den im weiteren beschriebenen 5 Komponenten Per Definition nach Beaudouin Lafon besitzt ein Interaktionsmodell auch Evaluierungs und Gestaltungsst rke Evaluative Power und Generative Power Mit den in den 5 Kapiteln vorgestellten Interaktionstechniken wird aufgrund des gew hlten Abstrakti onsgrades beides erreicht sie bieten sowohl die M glichkeit Vor und Nachteile unter schiedlicher Designs zu vergleichen als auch die konkrete Gestaltung neuer Designs 23 4 1 Visual Interface Der Begriff Visual Interface Design wurde schon in Kapitel 3 kurz beschrieben um den Aufgabenbereich der InteraktionsdesignerInnen abzugrenzen Nach Cooper verf gt das menschliche Gehirn ber hochentwickelte Mechanismen um visuelle Muster rapide zu erkennen und zu verarbeiten Beispielsweise k nnen Gesichtsmerkmale i
81. nen von besonderen Anspr chen gepr gt Einerseits muss die Modellierung auf die spezielle Eigenschaft der Hypertexttechnologie eingehen andererseits wird die Appli kationslogik getrennt und auf eine 2schichtige Architektur verteilt Die Verwendung der Beschreibungssprache UML based Web Engineering UWE f r die Erstellung des Hypertext Strukturmodelles hat sich als sinnvoll erwiesen da die Zusammenh nge zwi schen einzelnen Webseiten klar abgebildet werden konnten Die anderen Vorg nge in nerhalb der Zeitspur wurden mit den bekannten Methoden der objektorientierten Ent wicklung Anwendungsfall und Zustandsdiagrammen beschrieben Die serverseitige Softwarearchitektur st tzt sich mit Spring und Hibernate auf reife und bew hrte Frameworks f r die Entwicklung von Webapplikationen Durch Verwendung der Programmiersprache Java lassen sich Fehler im Programmcode der Applikationslo gik auf ein Minimum reduzieren Im Gegensatz zu Skriptsprachen wird dieser bevor er ausf hrbar ist vom Compiler auf Fehler gepr ft Das Einbinden der eigenst ndig reali sierten Objekte als Beans wird durch die zentrale Konfiguration von Spring erleichtert Positiv anzumerken ist auch die semi automatisierte Einbindung von Hibernate Unklar heiten und Probleme w hrend der Entwicklung konnten stets mit Hilfe der im Internet verf gbaren Ressourcen Bedienungsanleitung API Forum erkl rt und gel st werden Die Entwicklung auf der Clientseite gestaltet sich
82. nnen 35 Die skizzierte Situation soll durch die Verwendung der Webapplikation Zeitspur ver bessert werden Die User also die Studierenden k nnen von jedem PC mit Internet Zugang ihren Arbeitsaufwand festhalten Dabei werden die angefallenen Arbeitszeiten nicht nachtr glich eingetragen sondern gleich w hrend der Arbeit mitgeschnitten Die Anwendung der Zeitspur kann in metaphorischer Anlehnung an einen Kassettenrecorder erkl rt werden die User w hlen eine Aufgabe eines Projektes aus und legen diese in die Zeitspur ein ber die Controls der Applikation kann die Aufnahme der Arbeitszeit f r die eingelegte Aufgabe gestartet pausiert und gestoppt werden Nach Beenden der Auf nahme kann die eingelegte Aufgabe au erdem ausgeworfen werden Ein Auswerfen oder Stoppen der Aufnahme f hrt immer zu einem Speichervorgang der mitgeschnittenen Arbeitszeit in Minuten wobei eine Arbeitszeit von geringer als einer Minute verworfen wird Das Pausieren der Aufnahme kann eingesetzt werden wenn zwischenzeitlich etwas anderes erledigt werden muss z B die Beantwortung eines Telefonanrufes Das Aufneh men von Arbeitsaufwand ist in Abbildung 5 1 als Anwendungsfalldiagramm sowie in Abbildung 5 2 als Zustandsdiagramm illustriert In Abbildung 5 2 inkludiert das Errei chen des Endzustandes ein Speichern der Arbeitszeit falls diese gr er als eine Minute ist F r das Anlegen und Modifizieren von Projekten und Aufgaben gibt es eine spezielle U
83. nnerhalb von Sekundenbruchteilen ausgewertet und mit einem Namen verkn pft werden Das Ziel des Visual Interface ist hnlich Applikationslogik und verhalten sollen f r die User rasch und leicht verst ndlich sein Dazu m ssen die relevanten Elemente der Benutzeroberfl che in ihrer Struktur und Form an die Wahrnehmung des Menschen angepasst werden Ist die Anpassung erfolgreich kann das menschliche Gehirn die wahrgenommenen Mus ter ebenso rasch und effizient verarbeiten wie die Gesichtsmerkmale aus dem obigen Beispiel Bereiche auf die sich das Visual Interface Design bezieht sind das Seitenlayout die Anordnung Organisation der Elemente darin und die klar struktierte Kommunikation des Applikationszustandes Die Information in diesen Bereichen ist nicht textbasiert i e geht es um die korrekte Anordung von Schaltfl chen Symbolen Grafiken etc In XHTML Seiten wird dies unter anderem mit Input Tags Image Tags Blockelementen Div Tags Tabellen oder speziell implementierten JavaScript Widgets umgesetzt Abb 4 1 In SP04 S 501 erkl rt Shneiderman das Konzept der layout appropriateness um her auszufinden ob die Anordnung der interaktiven Elemente die User in der Handhabung optimal unterst tzt Dabei wird der Weg den die User mit dem Mauszeiger zur cklegen m ssen um typische Anwendungsf lle durchzuf hren betrachtet Ist dieser Zeigeweg nicht minimal und erfordert h ufiges Springen zwischen weit entfernten Berei
84. nntes Idiom das schnell erlernbar ist Der Radio Button wird hnlich gehandhabt allerdings ausschlie lich in Gruppen verwendet in denen nur eine Einfachauswahl m glich ist Gruppen von Radio Buttons erlauben zwar die simultane Darstellung aller Auswahloptionen verbrauchen dabei aber sehr viel Platz Daher empfiehlt Cooper ihre Verwendung nur in Bereichen der Applikation in denen die Anzeige aller Auswahlm glichkeiten unbedingt notwendig ist Picklists erlauben die Auswahl einer endlichen Menge von Textelementen die wie derum ein Kommando ein Objekt oder ein Attribut repr sentieren Falls die H he der Picklist nicht alle darin enthaltenen Elemente aufnehmen kann wird ein horizontaler Scrollbalken angezeigt mit dem die unsichtbaren Elemente in den sichtbaren Bereich bewegt werden k nnen Ein Element in einer Picklist wird durch Mausklick selektiert und deselektiert Ist es eine Picklist mit Einfachauswahl wird bei Selektion eines neuen Elements ein bereits selektiertes Element deselektiert In einer Picklist mit Mehrfachaus wahl k nnen mehrere Elemente durch Anklicken mit gedr ckter Strg Taste ausgew hlt werden Cooper r t von der Verwendung der Mehrfachselektion bei Picklists mit Scroll bars ab entweder werden schon selektierte aber unsichtbare Elemente vergessen oder sie m ssen erst gesucht werden um sie zu deselektieren In XHTML ist nur eine Entry Control per W3 Standard definiert W3C02 das Textein gabefeld Dessen Gr
85. ntuell mit mehreren Redesign Zwischenschritten folgt dann die Implementierung 2 3 Fokus auf die User Die Planung von Produkten mit hoher Usability r ckt die User in den Fokus der Auf merksamkeit Bei der Entwicklung von Applikationen die auf die W nsche und Bed rf nisse von speziellen Usergruppen zugeschnitten sind spielt die Erforschung derselben eine zentrale Rolle Wenn man sich die zahlreichen unterschiedlichen Eigenschaften F higkeiten Kulturen und Pers nlichkeiten des Menschen vor Augen f hrt wird die Herausforderung dieser Aufgabe offensichtlich Zur Illustration ein Beispiel aus SP04 S 24 10 A right handed female designer in India with computer training and a desire for rapid interaction using densely packed screens may have a hard time developing a succesfull interface for left handed male artists in France with a more leisurely and freeform work style Dieser Fall mag extrem erscheinen ist jedoch in der modernen globalisierten Welt nicht undenkbar Und gerade Webapplikationen wollen und k nnen von ihrer globalen Ver f gbarkeit profitieren Das Internet bietet einen einfachen und kosteng nstigen Zugang zu einer der weltweit gr ten aber auch heterogensten Usergruppe Die Entwicklung von erfolgreichen Webapplikationen mit hoher Usability setzt also die Betrachtung der User vorraus Unterscheidungsmerkmale derer sich die EntwicklerInnen bewu t sein sollen inkludieren Physische Einschr nkungen
86. onzep 16 tionalisieren Interaction Models besch ftigen sich hingegen mit praxisnahen Entschei dungen ber den konkreten Ablauf der Interaktion Die Interaction Paradigms teilt er anhand des vorherrschenden Leitgedanken in 3 Ka tegorien die auch im Fokus unterschiedlicher Forschungsrichtungen liegen ein Computer as Tool betrachtet den Computer als hochentwickeltes Werkzeug mit dem der Mensch seine F higkeiten erweitern kann hnlich der Erfindung des Rades um schwe re Lasten besser transportieren zu k nnen Klassische Interaktionsformen wie WIMP Window Icon Menu Pointer und Direct Manipulation Drag amp Drop fallen in die se Kategorie Das Feld der Human Computer Interaction besch ftigt sich mit diesem Bereich Computer as Partner verfolgt die Verwirklichung einer anthropomorphen Kommunikati on zwischen Mensch und Computer wie z B bei der Spracherkennung oder in agentenba sierten Systemen Diese Kategorie liegt im Forschungsbereich der k nstlichen Intelligenz Computer as Medium sieht den Computer rein als bertragungsmedium f r zwischen menschliche Kommunikation wie z B bei E Mail Chat oder Videotelefonie Der For schungszweig Computer Supported Cooperative Work CSCW vertritt diesen Ansatz Beaudouin Lafon ist der Meinung dass diese 3 Paradigmen auf den beiden Eigenschaf ten die den Mensch von anderen Lebensformen abgrenzen aufbauen die F higkeit zur Herstellung und Verwendung von Artefakt
87. oper ist der Gro teil der heute verwendeteten User Interfaces idiomatisch wie z B Links in Webapplikatio 25 LEO Translation Vienna Austria MittwochDonnerstag Freitag Samstag E OOO 70 159 9 18 4 19 4 19 10 Day Weather Forecast English French Spanish p hilda ET P Webnote diplomarbeitsbesprechung Neue Aufgabe Geben Sie Ihren Text hier ein Abbildung 4 1 Teile des Visual Interface auf Netvibes com nen Die Verwendung eines Links ist nicht intuitiv oder implizit erfassbar au er die Bezeichnung des Links lautet Klick mich mit der Maus an sondern muss erst erlernt werden Ein gutes Idiom zeichnet sich dadurch aus dass es einmal erlernt sofort im Ged chtnis bleibt und wiederverwendet werden kann 4 2 Content Organization Ebenso wie die leicht verst ndliche Kommunikation der Applikationslogik durch grafi sche Platzhalter mu die Darstellung der textbasierten Information an die Wahrneh mung der User angepasst werden Oft ist es nicht m glich den Applikationszustand in Symbole oder Schaltfl chen zu kodieren dann bleibt die Ausgabe von Text Die Anzei ge von textbasierten Elementen soll klar strukturiert und organisiert sein Das Lesen und Verarbeiten von Textinformation ist zwar langsam und erfordert gezielte Aufmerk samkeit allerdings kann durch entsprechende Platzierung die Wahrnehmung der User gezielt auf den Text gelenkt werden In XHTML Seiten werden Textin
88. r gt und nicht durch laufen de propriet re Eigenentwicklungen Vor allem die standardgetreue Implementierung von JavaScript Ass99 und dem Document Object Model Con05 in den g ngigen Brow sern verbessern die Rahmenbedingungen f r die Entwicklung von Webapplikationen erheblich Die eben skizzierte Situation f hrte in den letzten 2 Jahren dazu dass gezielt neue Tech niken zur Verbesserung der Usability von Webapplikationen umgesetzt werden k nnen Dabei greifen die EntwicklerInnen auf Bibliotheken und Frameworks zur ck welche die plattform bergreifende Programmierung von Browsern auf einem erh hten Abstrak tionsniveau erlauben In Desktopapplikationen bekannte und bew hrte Konzepte von Interaktion und Interfaces wie z B Direct Manipulation sollen damit in Webapplika tionen realisierbar werden Das alleinige Umsetzen von Interaktionstechniken aus Desktopapplikationen reicht je doch nicht aus um die Anspr che einer hohen Usability in Webapplikationen zu erf llen Dies folgt aus der eigenst ndigen Entwicklung des Web und den zugeh rigen Techno logien und Standards Einerseits ist der Umgang der User mit Webapplikationen von eigenen Erwartungen und Anspr chen gepr gt wie z B der leicht verst ndlichen Navi gierbarkeit Andererseits unterliegen die EntwicklerInnen bei der Implementierung von Interaktionstechniken restriktiveren Einschr nkungen Webapplikationen werden inner halb der Grenzen und M glichkeiten eines
89. r Methode project getTaskList Abb 5 5 eine Liste von JavaScript Ob jekten vom Typ db Task zur ckgeben kann Aufgrund der Verwandtschaft von Java und JavaScript k nnen Java Datentypen wie Date oder int automatisch konvertiert werden und ben tigen keine explizite Zuordnung Nach dem Erhalt der Objekte kann die Applikationslogik auf dem Client diese normal manipulieren also z B den Wert Task name auslesen In Zeilen 6 bis 8 werden alle Methoden des Java Objektes vom Typ db ZeitUser in ein JavaScript Objekt mit Namen zeitUser exportiert Nach Einbinden der von DWR generierten JavaScript Codebibliothek kann z B clientseitig die Funktion zeitUser getLogin Abb 5 5 aufgerufen werden um den Login String der aktuell authentifizierten Sitzung zu erhalten Neben der asynchronen Anbindung an den Server muss das Visual Interface auf dem Client die konzipierten Interaktionstechniken umsetzen k nnen Im clientseitigen Brow ser wird das User Interface einer Webapplikation in Form von XHTML Seiten angezeigt diese enthalten eine von der Spezifikation definierte Menge an grafischen Elementen z B Bilder Text etc Das Document Object Model beschreibt wie diese grafischen Elemente von den Browsern als programmierbare Objekte interpretiert werden sollen Die Anzeige einer XHTML Seite l uft dann folgenderma en ab der Browser des Cli ents empf ngt eine Seite mit XHTML Code parst diesen und erstellt darauf basierende programmierbare Objekte Diese
90. rden kann muss die Applikationslogik darauf achten ob ein derart manipulierbares Objekt angeklickt wird In Webapplikationen funktioniert dies nicht direkt ber die Bibliotheken des Betriebsssystems sondern nur ber Verwendung der Funktionen die der Browser zur Verf gung stellt Die Verarbeitungskette wird also um eine Ebene erweitert Verbietet ein Browser diesen Zugriff ist eine Realisierung von Drag amp Drop unm glich Die 2 schichtige Architektur von Webapplikationen erfordert au erdem ein h heres Ma an Planung bei der Entwicklung der Applikationslogik Funktionen welche die Inter aktion auf der Clientseite implementieren m ssen ausgelagert und mit Kommunikati onskan len zum Server ausgestattet werden Dadurch sind die EntwicklerInnen auch gezwungen in unterschiedlichen Umgebungen zu arbeiten einerseits in jener Program miersprache die f r die serverseitige Logik verwendet wird andererseits in der Skript sprache JavaScript mit welcher die Funktionen innerhalb der Browser implementiert werden Nach Veranschaulichung der Einschr nkungen und Erschwernisse bei der Entwicklung von Webapplikationen stellte sich nat rlich die Frage nach den Vorteilen mit der Plat form Internet besitzen diese automatisch eine Reichweite die Desktopapplikationen erst durch Marketing und oder Vertriebsstrategien aufbauen m ssen Kommerzielle We bapplikationen k nnen einfach und schnell ausprobiert sowie bei Gefallen erworben wer den me
91. re Entscheidungen und Vorhergehens weisen Damit soll versichert werden dass das Design und die Implementierung der Ap plikation ein hohes Ma an Usability zur Verf gung stellen So stellt sich die Frage wie Usability analysiert und bewertet werden kann um festzustellen ob die erw nschten Ziele und Anforderungen erreicht worden sind 2 2 Messbarkeit von Usability Die Definition von Usability in der ISO Norm 9241 liefert keine direkten Kenngr en f r eine Evaluation Die 3 beschriebenen Qualit tsmerkmale effektiv effizient und zufrie den stellend sind daf r zu weitl ufig interpretierbar In SP04 werden daher 5 praktisch besser anwendbare Kriterien vorgestellt die sich vor allem auf Effizienz und NutzerInnen zufriedenheit der Applikation konzentrieren Vorraussetzung f r die Anwendung dieser Kriterien ist die Kenntnis der User sowie eine Menge von typischen Anwendungsf llen Dann k nnen die Kriterien f r jeden Anwendungsfall und f r jede Usergruppe m glichst objektiv und genau festgestellt werden 1 Lernaufwand Wie lange brauchen die User um die Bedienung der Applikation so zu erlernen dass die gestellten Aufgaben durchf hrbar sind 2 Geschwindigkeit Wie schnell f hren die User die typischen Anwendungsf lle aus 3 Fehlerrate der User Wie viele und was f r Fehler machen die User bei Ausf hrung der typischen Anwendungsf lle Dieser Punkt kann in die Geschwindigkeit bis zur erfolgreichen
92. rect Manipulation Objects 3 Charakteristika 1 visuell repr sentiert und manipulierbar das Objekt wird durch ein grafisches Ele ment visualisiert und kann ber dasselbe Element manipuliert werden Beispiels weise wird ein Dokument mit dem Idiom einer Papierrolle repr sentiert 2 manipulierbar durch eine physische Aktion das Objekt wird durch die physische Interaktion mit einem Eingabeger t manipuliert Beispielsweise wird das Doku ment gel scht indem die Papierrolle mit der Maus angeklickt wird 3 sofort sichtbare Auswirkungen die Auswirkungen einer Manipulation des Objektes werden sofort visualisiert Beispielsweise verschwindet die Papierrolle sofort nach dem L schen Nachdem aktuelle Browser die Standards Javascript und DOM standardkonform um setzen k nnen Direct Manipulation Objects in Webapplikationen eingesetzt werden In XHTML Seiten werden grafische Elemente durch Einsatz von JavaScript Programmcode zu Direct Manipulation Objects Abb 4 4 Shneiderman erkl rt in SP04 weiters folgende Vorteile von Direct Manipulation e Sichtbarkeit von Objekten und zugeh rigen Aktionen e Rapide reversible schrittweise Aktionen e Ersetzen von Textkommandos mit einer Zeigeaktion auf das Objekt 29 Durch diese ist die Interaktionstechnik f r Anf ngerInnen rasch und leicht erlernbar w hrend ExpertInnen dauerhaft effizient arbeiten k nnen Das permanente visuelle Feed back zeigt den Usern unmittelbar was ihre
93. rkennen k nnen wie weit sie schon gekommen sind und was noch auf sie zu kommt Dieses Feedback soll auf der Benutzeroberfl che immer gut sichtbar und leicht verst ndlich sein In Webapplikationen m ssen zudem die externen Navigationsfunktio nen des Browsers beachtet werden die User k nnen ber entsprechende Browserkn pfe in der Seitenhistorie vor und zur ck gehen und Lesezeichen setzen Diese Navigations m glichkeiten sollen erhalten bleiben was beispielsweise bei der Verwendung von Popup Fenstern nicht der Fall ist Die Navigationselemente sollen nach ihrer Funktion gruppiert und entsprechend ihrer Wichtigkeit grafisch aufbereitet werden Diese Gruppen sollen wie auch schon in Ka pitel 4 1 erl utert applikationsweit konsistent sein In empirischen Studien hat sich ge zeigt dass die User eine Positionierung der Navigationsgruppen auf der linke Seite der Benutzeroberfl che bevorzugen Ist die Navigation hierarchisch abgebildet soll f r infor mationszentrierte Bereiche ein verschachteltes Men verwendet werden Transaktionale Bereiche hingegen sollen mit nicht hierarchischen simultan einstellbaren Navigations elementen ansteuerbar sein Ein beliebtes Idiom in Webapplikationen ist die Verwendung von Karteikartenreitern zur Navigation diese sollen eine klar verst ndliche Beschriftung haben am oberen Ende der Webseiten positioniert werden und realistisch visualisiert werden i e sind aktive Karteikarten im Vordergrund und
94. sergruppe namens Admin Diese k nnen Projekte anlegen bearbeiten und l schen Zu jedem Projekt gibt es eine Liste mit Aufgaben die sie wiederum anlegen bearbeiten und l schen k nnen Die aufgenommenen Arbeitsstunden zu jeder Aufgabe sind ebenfalls in einer Listenansicht zug nglich Die Anwendungsf lle f r die Usergruppe Admin sind in Abbildung 5 3 als Anwendungsfalldiagramm illustriert Abbildung 5 4 gibt einen ber blick ber alle beschriebenen Anwendungsf lle und zeigt die Authentifizierung durch Login Logout Anwendungsfall und Zustandsdiagramme sind Methoden der Modellierung von Deskto papplikationen Wie in KPRRO3 erl utert wird ist dies jedoch h ufig unzureichend f r die speziellen Charakteristika von Webapplikationen Daher werden auf der Basis von klassischen Beschreibungssprachen wie UML Gro07 und ER Che76 neue ange passte Modellierungsmethoden wie WebML CFB 02 und UWE Koc06 entwickelt Der Autor dieser Arbeit hat sich bei der weiteren Modellierung der Webapplikation f r UWE UML based Web Engineering entschieden da mit ArgoUWE KKMZ03 ein frei verf gbares Werkzeug f r die Erstellung von Diagrammen existiert Die Idee und die Marke Zeitspur stammen von Mag Horst Tellioglu 36 create WorkedTimelnit User Abbildung 5 1 Anwendungsfalldiagramm fiir das Aufnehmen von Arbeitsaufwand insert task task inserted recording started recording paused gt stop
95. t and help to solve specific practical problems Sie soll also verst ndlich reproduzierbar und praktisch anwendbar sein Als Eigenschaf ten einer Theorie beschreibt Shneiderman SP04 S 82 descriptive explanatory oder predictive also beschreibend erkl rend oder vorhersagend Beschreibende und erkl rende Theorien helfen ein gemeinsames und konsistentes Verst ndnis f r die Terminolo gie also die verwendeten Elemente und ihre Relation zueinander einer Wissensbasis zu schaffen Vorhersagende Theorien erlauben Evaluation und Vergleich von alternativen Designs vor ihrer tats chlichen Umsetzung Er weist darauf hin dass im HCI Bereich derzeit eine Vielzahl von unterschiedlichen Theorien existieren die versuchen sich bei den AnwenderInnen ForscherInnen Ent wicklerInnen etc durchzusetzen Aufgrund der Gr e und Komplexit t des Wissens bereiches ist es f r ihn fraglich ob es jemals eine einheitliche solide und allgemein anerkannte Theorie geben wird 21 4 Entwicklung des Interaktionsmodells Anhand der in den vorherigen Kapiteln beschriebenen Arbeiten von Shneiderman und Cooper wird deutlich dass der Abstraktionsgrad einer Interaktionstechnik dar ber ent scheidet ob und wie gut sie wiederverwendet werden kann Das in diesem Kapitel ent wickelte Interaktionsmodell soll sowohl praktisch umsetzbar als auch wiederverwendbar sein Daher entscheidet sich der Autor f r Interaktionstechniken von mitt
96. t wird anhand der Arbeiten von Beaudouin Lafon Cooper und Shneiderman erkl rt und beschrieben Darauf aufbauend wird ein Interakti onsmodell f r Webapplikationen entwickelt in diesem werden geeignete Interaktionstech niken f r die verschiedenen interaktiven Komponenten einer Webapplikation kombiniert um ein hohes Ma an Usability zu versichern Die Umsetzbarkeit des entwickelten Model les mit aktuell verf gbaren Web Technologien wird anhand des Entwicklungsprozesses einer Webapplikation gepr ft Am Ende der Entwicklung folgt eine technische Evaluie rung der Implementierung die zeigt ob und wie das entwickelte Interaktionsmodell in der Praxis anwendbar ist vi 1 Einleitung In den Anf ngen der Software Entwicklung schenkt man dem Gedanken an die zuk nf tigen User wenig Aufmerksamkeit Dies passiert nicht etwa aufgrund von fehlerhaften Planungsmodellen oder ungen gendem Wissen sondern schlicht und einfach weil die technischen M glichkeiten ohnehin nur eine Usergruppe erlauben die ExpertInnen Die Ein und Ausgabeger te mit denen die Programme arbeiten k nnen beschr nken sich z B auf die Tastatur und einen 80 mal 24 Zeilen monochromen Bildschirm wie im IBM 5271 Ell05 aus dem Jahr 1970 Abb 1 1 Diese Ger te erlauben keine anderen Inter aktionsformen als eine Kommandozeilenein und ausgabe was ihre Bedienbarkeit auf eine kleine Gruppe von Menschen reduziert Das g ngige Paradigma damals war dass die User sich
97. ten e die Funktionen der Controls Die Zeitmessung erfolgt durch Verwendung des Date Objektes welches in JavaScript na tiv verf gbar ist Dieses repr sentiert einen Zeitpunkt durch Messen der seit 01 01 1970 vergangenen Millisekunden Bei Starten des Abspielvorganges wird der Startzeitpunkt gespeichert ber die Browserfunktion window setTimeout wird der Browser ange wiesen sek ndlich eine Funktion aufzurufen welche die seit dem Start vergangenen Sekunden speichert und die fortlaufende Zeitanzeige in der Abspielkontrolle aktualisiert Die textbasierten Informationen in dem Bereich unterhalb der Abspielkontrolle werden ber die Funktion info erstellt Diese generiert einen aktuellen Zeitstempel kom biniert diesen mit dem Text und f gt beides in das XHTML Element ein Die Infor mationen aus diesem Bereich sind vor allem deshalb wichtig weil hier das erfolgreiche oder nicht erfolgreiche Ausf hren von asynchronen Kommunikationsvorg ngen wie z B das Speichern von Arbeitsaufwand angezeigt wird Grafische Informationen wie der Wechsel der Visualisierung zwischen Abspielen und Pause sind durch Austausch der anzuzeigenden Bilder realisiert dies ist ein XHTML durch ein ndern der URL des Bild Elementes m glich Das Speichern von Daten wird von den mit DWR exportierten Funktionen bernom men Da diese Funktionen asynchron ablaufen erwarten sie als letzten bergabepa rameter eine so genannte Callback Funktion wenn der Komm
98. ten einer Webappli kation zur Laufzeit von den Usern dynamisch ver ndert werden kann spricht man von 22 der transaktionsbasierten Arbeitsweise jede Transaktion erzeugt eine Ver nderung im Programmablauf Mit dieser Ver nderbarkeit ergeben sich in weiterer Folge dynamische Inhalte die je nach Nutzungskontext unterschiedlich behandelt werden m ssen Das Ver halten die Interaktion mit den Usern steht daher im Vordergrund bei der Entwicklung von Webapplikationen Je besser die User die Arbeitsweise und Informationen das Ver halten der Webapplikation verstehen desto h her ist die Gebrauchstauglichkeit die Usability Nach Beaudouin Lafon kann ein Interaktionsmodell mit hoher Aussagekraft eine signi fikante Bandbreite von Interfaces bzw Interaktionselementen erfassen und beschreiben Eine Methode daf r ist das Verwenden einer Taxonomie die bei Shneiderman SP04 S 85 wie folgt definiert ist A taxonomy imposes order by classifying a complex set of phenomena into understandable categories Die Taxonomie ordnet also komplexe Objekte anhand von bestimmten definierten Kri terien in wohlunterscheidbare Kategorien Diese Einteilung soll gut verst ndlich und nachvollziehbar sein Da das Ziel dieser Arbeit ein Interaktionsmodell f r Webapplika tionen ist ben tigt es ausreichende Aussagekraft um typische Interaktionselemente in diesem Bereich beschreiben zu k nnen Es gibt jedoch noch keine fundierte und allgemei
99. tionstech niken sind nur unter Verwendung aktueller Webtechnologien wie sie von AJAX Asyn chronous JavaScript and XML beschrieben wird umsetzbar Basierend auf Frameworks wird eine Softwarearchitektur entwickelt die AJAX unterst tzt Die Umsetzbarkeit der im Interaktionsmodell geforderten Interaktionstechniken mit ak tuellen Webtechnologien wird anhand der Zeitspur evaluiert Dabei zeigt sich dass bei nahe alle Anforderungen umgesetzt werden konnten Im geringeren Ma e problematisch ist die konsistente und browser bergreifende Positionierung von grafischen Elementen Das erfolgreiche Umsetzen des Interaktionsmodells bedeutet nach den Erfahrungen die bei der Verwendung der darin enthaltenen Techniken in Desktopapplikationen gemacht wurden eine positive Beeinflussung der Usability Aufgrund der gew hlten Softwarear chitektur die auf einer Kombination von Frameworks basiert l sst sich das entwickelte Interaktionsmodell zudem effektiv in den Entwicklungsprozess integrieren und wieder verwenden Der Autor vertritt die Meinung dass die Verbreitung von Webapplikationen aufgrund ihrer gro en Reichweite und einfachen Verf gbarkeit in Zukunft weiter zunehmen wird Im Sinne einer userzentrierten Entwicklung ist daher eine Neuorientierung an Interak tionstechniken welche die Usability steigern unumg nglich Derzeit greift man hier auf jene zur ck welche bereits in Desktopapplikationen bekannt und erfolgreich sind Diese Entwicklung
100. troduction to the five factor 67 Hud04 1H02 Int07 J Bo07 Joh03 Kei98 KKMZ03 Koc06 KPRRO3 model of personality online 1995 cited 20061228 Available from lt http www centacs com quickstart htm gt The Big Five Personality Test William Hudson Breadcrumb navigation there s more to hansel and gretel than meets the eye interactions 11 5 79 80 2004 Melody Y Ivory and Marti A Hearst Statistical profiles of highly rated web sites In CHI 02 Proceedings of the SIGCHI conference on Human factors in computing systems pages 367 374 New York NY USA 2002 ACM Press Interface21 Spring framework the leading full stack java jee application framework online 2007 cited 20070411 Available from lt http www springframework org gt Homepage of the Spring Framework Project JBoss Hibernate Relational persistence for java and net online 2007 cited 20070411 Available from lt http www hibernate org gt Homepage of the Hibernate Framework Project Jeft Johnson Web Bloopers 60 Common Web Design Mistakes and How to Avoid Them Morgan Kaufmann Publishers Inc Mai 2003 Available from lt http www amazon de Bloopers Common Design Mistakes Avoid dp 1558608400 sr 1 3 qid 1163857690 ref sr_1 3 303 6156075 0689001 ie UTF8 amp s books intl de gt David Keirsey Please Understand Me Il Temperament Character Intelligence Prometheus Nemesis Book Compa ny
101. tungs haltung der User an Webapplikationen unterscheidet sich oft von der an Desktopappli kationen auf einer Webseite wird z B automatisch nach Hyperlinks und Navigations m glichkeiten gesucht Hinzu kommt dass die Charakteristika der User wie in Kapitel 2 3 erl utert aufgrund der globalen und dezentralen Verf gbarkeit stark heterogen sind Gerade aufgrund dieser extremen Unterschiede innerhalb der Usergruppe muss die Be dienung die Interaktion zwischen den Usern und der Applikation so intuitiv und einfach wie m glich sein Die Webtechnologien f r eine Realisierung von Interaktionstechniken welche die Usa bility positiv beeinflussen schr nken die EntwicklerInnen prinzipiell ein Desktopappli kationen bauen auf dem Betriebssystem auf und erhalten damit fast unbeschr nkten Zugriff auf die vorhandenen Ressourcen des Rechners eventuell sogar so weit dass die ser durch fehlerhaften Programmcode abst rzt Zus tzlich besitzen sie keine 2 schichtige 52 Client Server Architektur sondern greifen immer ohne Kommunikationsverz gerung auf die vollst ndige Applikationslogik zur ck Webapplikationen hingegen werden komplett innerhalb der Grenzen eines Browser Programmes ausgef hrt welches den Zugriff auf die Systemressourcen einschr nkt oder sogar unterbindet Dies l sst sich an dem Beispiel der Interaktionstechnik Direct Manipulation veranschau lichen damit ein grafisches Objekt per Mausklick aufgenommen und bewegt we
102. uletzt um die kommerzielle Reichweite zu steigern Die User sind nicht mehr die bekannten ExpertInnen sondern eine neue unbekannte aber wichtige Komponente in der Software Entwicklung Das verst rkte Interesse an der Rolle der User f hrt 1982 zu der ersten Konferenz der ACM s Special Interest Group on Computer Human Interaction einer weltweiten Orga nisation von ForscherInnen deren Interesse der Interaktion zwischen Mensch und Com puter gilt Um mehr ber die M glichkeiten Anforderungen und Einschr nkungen der User herauszufinden bedient man sich in den folgenden Jahren einer Kombination aus Methoden und Wissen der Informatik und anderer Disziplinen Psychologie Medizin Soziologie Damit formt sich der interdisziplin re Bereich der Human Computer Inter action kurz HCI In MHC 96 S 794 wird HCI wie folgt erkl rt Human computer interaction HCI is the study of how people design im plement and use interactive computer systems and how computers affect individuals organizations and society Die Erkenntnisse fiihren zu einer verbesserten Nutzbarkeit von Anwendungen sowie neu en Interaktions und Kommunikationsformen in Computersystemen 1989 schl gt Tim Berners Lee im CERN einer europ ischen Gro forschungseinrichtung die Umsetzung eines Global Hypertext Space BL98 vor um Informationen besser zu g nglich zu machen Das Projekt wird genehmigt und im Jahr darauf geht im CERN der erste HTTP Server ans Netz
103. unikationsvorgang mit dem Server abgeschlossen ist wird diese Funktion mit den erhaltenen Daten aufgeru fen und muss sich um deren Verarbeitung oder eventuell aufgetretene Fehler k mmern Beispielsweise wird bei der Initialisierung der Zeitspur die Projektliste durch Aufru fen von projectDAO getProjectList renderProjectSelect generiert Die Funktion renderProjectSelect ist also f r die finale Verarbeitung der erhaltenen Daten zu st ndig ol 6 Evaluierung der technischen Umsetzung Die vom Autor vertretene Ansicht dass durch die Verwendung von aktuellen Webtech nologien die Usability von Webapplikationen gesteigert werden kann wird in diesem Kapitel auf ihre Richtigkeit gepr ft Das in Kapitel 4 entwickelte Interaktionsmodell enth lt Interaktionstechniken welche nach dem aktuellen Stand der HCI Forschung die Usability von Applikationen steigern Dies wurde in der entsprechenden Literatur wie SP04 und CRO03 bereits ausf hrlich diskutiert und empirisch begr ndet Dabei darf allerdings nicht vergessen werden dass die vorgestellten Interaktionstechniken f r Desktopapplikationen entworfen wurden die auf g nzlich andere Technologien und Ge brauchsparadigmen zur ckgreifen Das Web und seine Applikationen haben wie in Kapitel 1 beschrieben eine eigenst ndige Entwicklung parallel zu der von Desktopapplikationen erlebt Dies beinflusst einerseits den Umgang der User andererseits die verwendbaren Technologien Die Erwar
104. ustern wird also erschwert da keine allgemeine theore tische Basis deren Wissen formalisiert verbindet und erkl rt Beaudouin Lafon definiert daher den Begriff des Interaktionsmodells das verschiedene Entwurfsmuster unterschied licher Abstraktionsgrade er spricht von Interaktionstechniken kombiniert Die Defi nition eines solchen Interaktionsmodells enth lt Eigenschaften welche ein Formalisieren des darin enthaltenen Wissens erlauben Dadurch k nnen die enthaltenen Interaktions techniken in Relation gesetzt und verglichen werden Im folgenden Kapitel 3 2 wird die Arbeit von Beaudouin Lafon erl utert und der Begriff des Interaktionsmodells erkl rt Damit stehen die InteraktionsdesignerInnen noch vor der Herausforderung aus der F l le an vorhandenem Wissen im HCI Bereich jene Entwurfsmuster auszuw hlen welche aufgrund ihrer Eigenschaften die Anforderungen der zu entwickelnden Applikation best m glich erf llen Dazu wird auf das Wissen in den Arbeiten von Cooper und Shnei derman zur ckgegriffen Kapitel 3 3 und 3 4 beschreiben deren Vorgehensweise bei der Kategorisierung und Klassifizierung von Entwurfsmustern f r Interaktionsdesign 3 2 Beaudouin Lafon Paradigms Models Beaudouin Lafon identifiziert in BL04 2 Ebenen auf denen Interaktion analysiert und gestaltet werden kann Interaction Paradigms arbeiten auf einer h heren Abstraktions ebene und wollen das Ph nomen der Interaktion zwischen User und Computer k
105. werden gerendert und schlie lich auf der Anzeige des Client Rechners angezeigt Mit der standardkonformen Verf gbarkeit dieser Objekte in g ngigen Browsern kann clientseitiger JavaScript Code diese DOM Objekte und damit 49 alle Elemente des User Interface dynamisch manipulieren Trotz der offenkundigen Bem hungen der Hersteller die Vorgaben der Standards des W3C zu erf llen gibt es h ufig Inkompatibilit ten zwischen unterschiedlichen Browser Implementierungen clientseitiger Programmcode der in einem Browser funktioniert wird von einem anderen Modell fehlerhaft oder gar nicht verarbeitet H ufig ist dies auf kleinere Abweichungen zur ckzuf hren die vorab erkannt und zur Laufzeit vermie den werden k nnen Scriptaculous kapselt daher jene Funktionen die Zugriff auf die DOM Objekte im Browser erlauben und erlaubt deren Verwendung auf einem erh hten Abstraktionsniveau Damit k nnen die EntwicklerInnen weitgehend browserunabh ngi gen Programmcode entwickeln Die Scritpaculous Biblioteken werden durch Links im XHTML Code der Webseiten eingebunden Da die Interaktion ohne ein erneutes Laden der Webseite auskommen soll muss die clientseitige Applikationslogik in der Lage sein Elemente des User Interface dynamisch zu erstellen zu bearbeiten und zu l schen Beispielsweise wird in der Zeitspur nach Selektion eines Projektes nicht die Seite neu geladen sondern ein asynchroner Kommu nikationskanal zum Server ge ffnet ber den d

Interaktionsdesign in Webapplikationen

Contents

Download Pdf Manuals

Related Search

Related Contents