Home

Leitfaden für Interface-Entwickler des Projektes Coma

1. urd HGKZ Studiengang Neue Medien Konstruksorsiehne HEN PU Damat Pret De ka H Bikini 22 Man nennt sie blicherweise Eye catcher und sie beruhen auf Mechanismen die man in der vergleichenden Verhaltensforschung als angeborene Ausl serreize bezeichnet Die folgende Aufstellung zeigt einige der wichtigsten COOL Bewegung hat immer die h chste Priorit t f r unsere Aufmerksamkeit Was sich bewegt ist immer von hoher Relevanz z B weil es potentiell gef hrlich sein k nnte oder weil es cool ist m Augen sind ebenfalls Reize auf die wir A gt unwillk rlich reagieren Dies zeigt sich z B darin dass wir auf parallel stehende Augen sog Drohstarren mit k rperlicher Erregung h herer Blutdruck etc reagieren Wahrscheinlich beruht diese Reaktion auf einer biologisch programmierten Furcht vor Raubtieren die im Gegensatz zu friedlichen Pflanzenfressern parallel stehende Augen haben Gro e Areale unserer rechten Hirnh lfte sind auf das Erkennen von Gesichtern spezialisiert Als soziale Wesen haben wir hierf r ein angeborene Aufmerksamkeit Besonders sensibel reagiert unsere Aufmerksamkeit auf Mimik Bereits wenige Stunden alte S uglinge k nnen ein l chelndes Geicht von einem neutralen oder unfreundlichen unterscheiden Die hohe Wirksamkeit warmer Farben f r unsere Aufmerksamkeit wurde weiter oben schon erw hnt Von allen reinen Farben ist hochges ttigtes rot diejenige mit der h chste
2. Forma vorlagen automatisch aktualisieren Global Dokumertworlagen und Add Ins Markierte Elemente sind derzeit gelacen IV FDFMaker dot Lokale Funktionen Yollst ndiger Pfad Ci OfficeSTARTUP gt DFMaker dot Abstand der Buttons Organisieren Abbrechen E Gleiche Gr sse Unterschiedliche Wortl nge Abbildung 9 Button Eigenschaften Es sollen nicht mehr als sechs Push Buttons in einem Fenster vorhanden sein 24 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung m und HGKZ Studiengang Neue Medien Aeri aA i Die Beschriftung soll kurz und pr gnant sein z B Drucken und nicht Dokument Drucken Wenn es m glich ist sollte das Button mit einem Verb beschrieben werden und nie mehr als drei W rter aufweisen Drucken Abbildung 10 gute und schlechte Beispiele bekungent Drscker Es soll nur der erste Buchstabe gross geschrieben werden Eine Ausnahme ist der Befehl OK Die Schriftgr sse sollte nicht all zu gross oder klein sein Ein blicher Wert ist die 12 Punkte Schriftgr sse Es gibt gewisse Buttons die berall anerkannt sind Es soll so weit es m glich ist mit diesen Befehlen gearbeitet werden Die Gr sse der Buttons selbst soll ausgewogen sein d h es sollen h chstens zwei verschiedene Gr ssen in Frage kommen kurze und lange Begriffe wobei sich der Button am l ngsten Begriff ausrichtet Es s
3. Sonderangebote Preisvorteile Ausf hrliche Produktinformationen Produktvielfalt Gebrauchsanweisungen Relevanz produkbezogener Auswahlkriterien 0 10 20 30 40 50 60 70 80 90 Leitfaden Interface Gestaltung 55 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung e eme EE und HGRZ Studiengang Neue Medien Prr riie Relevanz servicebezogener Auswahlkriterien 0 20 40 60 80 100 Bezahlung per Nachnahme Liefervorteile Sicherheit der Daten bermittlung Serviceleistungen Geld Zur ck Garantie bei Nichtgefallen Zusammenstellung von Warenk rben 56 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung m und HGKZ Studiengang Neue Medien rhin COMA gt Farben Die Farben lassen sich objektiv durch drei voneinander unabh ngigen Komponenten beschreiben HLS Farbraum Die Leuchtdichte oder Intensit t einer Farbe f hrt zur Helligkeitsempfindung Die Leuchtdichte wird durch die Amplitude der Lichtwellen bestimmt Die wird in Prozentschritten definiert 100 Leuchtintensit t ist weiss und 0 ist schwarz Der Farbton ist das Pigment rot gr n blau und wird durch die dominierende Wellenl nge der Strahlung bestimmt Die Entstehung eines Farbeindrucks setzt ein bestimmtes Helligkeitsniveau voraus Die Farbt ne k nnen je nach Modell bspw in Grad angege
4. Icons k nnen in dieser Hinsicht ebenfalls Aktionen ausl sen die mit einem Bild unterst tzt werden Die einzige jedoch wesentliche Bedingung ist dass das Bild die richtige Assoziation im gedanklichen Modell des Anwenders hervorruft Prinzipiell gibt es drei Anwendungsarten f r Icons Applikationsicons die auf dem Desktop eine Applikation starten bildliche Buttons die als Erkl rung f r eine Funktion dienen und Message Icons die Symbole darstellen welche die Art z B Gefahr von Informationen vermitteln Der Einsatz von Icons kann vorteilhaft sein wenn oft verwendete Befehle als Buttons benutzt werden und wenn eine Applikation in verschiedenen Sprachen implementiert wird Bilder k nnen auf verschiedene Arten dargestellt werden auf Photos Graphiken Cartoons usw Beim Entwurf einer Serie von Icons sollen diese vom gleichen Typ formale Konsistenz sein Die Bilder sollten den gleichen Inhalt ber die Kulturen hinaus vermitteln Der Inhalt sollte neutral sein ein Icon mit dem Stinkefinger ist nicht geeignet Wenn ein Icon an einem bestimmten Ort eine Aktion ausf hrt muss das gleiche Icon berall in der Applikation die gleiche Aktion t tigen inhaltliche Konsistenz Gut gezeichnete Icons brauchen keine beschreibenden W rter Icons die Aktionen im gleichen Kontext ausf hren sollen auch nebeneinander stehen Nicht standardisierte Objekte Die Verbreitung des www und dessen offener Sprache html hat dazu gef hrt dass
5. Die Pull Down Men s weisen mindestens drei Eintr ge auf sonst ist es sinnvoller diese in einem anderen Men zu integrieren Jeder Eintrag soll genau einmal vorkommen z B Buchung 1 und Buchung 2 ist ung nstig Bei Pull Downs kann keine Scroll Funktion angewendet werden alle Eintr ge m ssen auf dem Bildschirm sichtbar sein Wichtige oder oft ausgew hlte Funktionen werden zuoberst aufgef hrt Wie bei allen anderen Funktionen kann die Gruppierung die bersicht ber die einzelnen Eintr ge unterst tzen deswegen soll sie bei 5 und mehr Eintr gen angewendet werden Bei Pull Down Men s sollen nicht mehr als zwei Ebenen von Untermen s angezeigt werden Jeder Eintrag definiert einen Befehl und wenn dieser von drei Punkten am Schluss gefolgt wird 32 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung Ka Co urg E kl HGKI Studiengang Neue Medien nee TU Dammit Ps Dr ka H ole so bedeutet dies das Erscheinen eines weiteren Fensters welches das weitere Vorgehen beschreibt S CET E Qem pestetan gracht fyran Pomet Iwa E A8 all sl zl Wechsel zu softwarespezifische Men s Abbildung 21 Reihenfolge der Men s am Beispiel von MSWord 2000 oben und IE5 0 unten e Icons Gelegentlich k nnen Bilder mehr als tausend W rter aussagen und von verschiedenen Menschen aus unterschiedlichen Kulturen verstanden werden z B Verkehrsymbole
6. Maschinene Zr EI Leitfaden Interface Gestaltung ll BE Sk BL DL a i aa E R REKT Studiengang Neue Medien EE ES COMA D St Fokussierung der Teilaufgaben unterst tzen und nicht die Aufmerksamkeit auf das Interface selbst lenken Die Farben bestehen aus drei Komponenten der S ttigung die Menge an Weiss der Intensit t die Menge an Farbton und dem Farbton Diese drei Komponenten beeinflussen den RGB Wert Dieser kann das erscheinen der Farben auf dem Bildschirm steuern Abbildung 5 Komponenten einer Farbe Bei der Farbgebung m ssen alle drei Komponenten ber cksichtigt werden Gleichzeitig ist dem anzuf gen dass ein gut gestaltetes Interface gerade im schwarz weissen Ausdruck seine Qualit ten zum Vorschein bringt Denn wichtige Informationen sind hier nicht ber die Farbgebung sondern gerade ber ihre Redundanz z B fette Schrift Kontrast ersichtlich Die Wahl der Farben soll der CI Corporate Identity entsprechen ins Gesamtkonzept der Applikation passen die Farbe folgt der Funktion und wird koh rent gehandhabt und auf dem Bildschirm Kontrast gut sichtbar sein Falls die Farben eine funktionale Bedeutung haben sollte auf den sthetischen Einsatz derselben weitgehend verzichtet werden Farben erzielen die beste Wirkung auf einem hellgrauen Hintergrund Da das Auge wenig Rezeptoren f r die Farbe Blau besitzt sollte auf eine nahe Positionierung von hnlichen Blaut nen verzichtet werden weil das Auge sie
7. Studiengang Neue Medien An akesenpastespecetegemee richtige Format an Individualisierbarkeit Die Anpassungsf higkeit von Software sollte dem Anspruch individuell gestalteter Software entgegenkommen Bis zu einem gewissen Ausmass steht dieser Anspruch im Gegensatz zum Einsatz von Standard Software welche eine m glichst grosse Anzahl gleicher Funktionen f r m glichst viele Benutzer und Aufgaben vorsieht Dies ist ein typischer Fall von Zielkonflikt wie er im Rahmen ergonomisch orientierter Gestaltung vermehrt zu beobachten ist Der objektive Bedarf an individuellen L sungen und das subjektive Bed rfnis nach Ber cksichtigung pers nlicher Kenntnisse und Erfahrungen sind gegenl ufig In beiden F llen bedeutet jedoch die Zielvorstellung erh hte Effizienz Bsp Die pers nliche Anpassung der Symbolleisten siehe MSWord Erlernbarkeit Lernf rderlichkeit Die Bedienung eines Computersystems wird als erlernbar bezeichnet wenn es den Benutzern m glich ist die Aufgabenbew ltigung in einer angemessenen Zeitspanne zu erlernen Ein interaktives Softwaresystem wird als lernf rderlich bezeichnet wenn es den Benutzern w hrend des Lernens Unterst tzung und Anleitung gibt Bsp Nach einer gewissen Einarbeitungszeit sollte es dem Benutzer m glich sein das notwendige Funktionsspektrum der Software umfassend zu n tzen Kooperations und Kommunikationsf rderlichkeit Ein interaktives Software System wird als kooperationsf rderlich bezei
8. mit einer breiten Verflechtung benutzerfreundlicher ist als eine tiefe hierarchische Anordnung der Inhalte Larson and Czerwinski haben herausgefunden dass mit einer zwei Ebenen 18 Bernard M Mills M 2000 19 Larson K Czerwinski M 1998 Web Page Design Implications of Memory Structure and Scent for Information Retrieval 19 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Masctinensiemente Leitfaden Interface Gestaltung gt und HGKI Studiengang Neue Medien Bealak re Struktur mit 16 und 32 Links ein User schneller ist und weniger Fehler begeht als wenn eine drei Ebenen Struktur mit je 8 Links vorhanden ist Die Verfasser unterstreichen jedoch dass ein gut organisiertes Seitenlayout vorhanden sein muss Meistens findet man auf einer Homepage eine Mischung aus diesen drei Arten von Seitenvernetzung Grundlegend wichtig ist dass die Seitenvernetzung einer scharfen und leicht verst ndlichen Logik folgt sodass der Benutzer sie schnell durchschauen kann Abbildung 8 Drei Vernetzungsarten linear vernetzt und hierarchisch Seitenanordnung Darunter ist die Strukturierung einer Seite zu verstehen die ausser bei bestimmten Ausnahmen zur Anwendung kommt Die Seitenanordnung beschreibt die Position der Hauptelemente in einer Homepage oder in einer Applikation den Titel die Navigation Orientierung und den Inhalt Diese Elemente sollten immer in der gleichen Bildschirmposition erscheinen damit der Benutzer sein
9. r den Gestalter von Vorteil wenn er sich ein konzeptionelles Modell der Aufgabe bildet Dadurch analysiert er die Aufgabe und gleichzeitig ber cksichtigt er die Anforderungen der Benutzer Denn das konzeptionelle Modell muss f r den Benutzer angemessen sein und die wichtigsten Aspekte der Bedienung enthalten Im Idealfall sind das Designer und das Benutzermodell identisch Um Teilaufgaben zu beschreiben existieren eine Menge Interaktionselemente welche bestimmte Handlungen erm glichen bzw einschr nken In den n chsten Kapiteln werden zuerst allgemeine Aspekte der Interface Gestaltung vorgestellt und danach wird auf die einzelnen Interfacebausteine eingegangen Allgemeine Aspekte der Interfacegestaltung Bei der Interfacegestaltung gibt es gewisse Richtlinien die f r alle Arten von Interaktionen und Umgebungen gelten In diesem Kapitel werden diese allgemeing ltigen Aspekte vorgestellt und diskutiert Farben Nebst physiologischen und kulturellen Faktoren welche f r die Auswahl der Farben bestimmend sind spielen auch logische Faktoren eine Rolle Farben werden vor allem dann benutzt wenn ein Objekt hervorgehoben werden muss Damit dies im richtigen Mass gelingt soll mit Farben eher sparsam daf r effektiv umgegangen werden Die Farbe im Interface sollte den Benutzer bei der 17 Norman Donald A 1989 Dinge des Alltags gutes Design und Psychologie f r Gebrauchsgegenst nde 17 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG
10. Bausteine oder Interaktionsobjekte uunuuuuunnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn 24 standardisierte Interaktions bjekte u 02 0 He ek de AR ERCNNRE ensenen nennen 24 Nicht standardisierte Objekte en Kelle 33 Technische Aspekte der Interaktionsgestaltung uuursssssnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennn nn 36 Datei Formate f r 2 dimensionale Objekte AAA 36 Datei Formate f r 3 dimensionale Objekte ssssssssseserrnnrrsserrrnrrsstrrtrnrrnntrssternnrtssetnnnennnneseeennne 37 ANHANG a a re DE ee 41 Das zweigeteilte Gesichtsfeld urnm44nnnnnnnnnnnnnnnnannnnnnnnnnnannnnnnnnnnnnnnnnnnnnnnnnnnn nennen 42 Praktische Beispiele zur Aufmerksamket ANNE 44 Aufmerksamkeltsgeseize 2 2z 20 10 nnmnnn nnmnnn nnmnnn nna 46 ant Ee EE 46 NIC et fat a A E a a ER a T 47 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinene Zu EI Leitfaden Interface Gestaltung el ee ee i HGKL Studiengang Heue Medien Konsinik onsiehre MEER FU Dez ech Ps Dr ka H Becher Addition und Subtraktion von Eitekten kee 49 Das EE la EE 49 RRE Ee EE 50 Das Gew hnungsgesetzt u an 000 le 51 Eye catcher und biologische Gonale AAA 51 Online ur d GE 54 NAOS DEE 57 EE TE 59 UE DU UE EE 60 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung Oaea und e e 7 REI Studiengang Neue Medien Sepa Ei
11. Inhalte konzentrieren Ca 40 der Zeit verbringt man mit den ersten und den Rest der Zeit mit den inhaltlichen Informationen Dabei spielt der Text eine berragende Rolle ca 40 Gesamtanteil gefolgt von Headlines Bildern und am Schluss Animationen die keine grosse Aufmerksamkeit wecken Zu hnlichen Resultaten ist die Studie vom Pointer Institute gekommen Diese Studie unterstreicht dass Bilder und vor allem Banner erst beim zweiten oder sogar dritten Mal angeschaut werden Metainformationen Bei der Interaktion werden Metainformationen als Hilfefunktionen und als Feedback vom System eingesetzt e Die Hilfefunktion Die Hilfefunktion wird dann ben tigt wenn ein Fehler begangen worden ist oder wenn das Erreichen eines spezifischen Zieles durch mangelnde Kenntnisse behindert wird Falls eine solche Situation auftaucht soll das System Antworten zu folgenden Fragen liefern k nnen Wie kann etwas ausgef hrt werden Was passiert wenn der Benutzer etwas tut Warum passiert etwas Wie kann etwas r ckg ngig gemacht werden e Feedback Transparente Schnittstellen zwischen Mensch und Maschine erfordern ein Feedback an den Benutzer das best tigt dass der Befehl erfasst und ausgef hrt wird Der Benutzer sollte Informationen ber den Status des interaktiven Systems bekommen Die Gestaltung von Feedback Mechanismen h ngt sowohl von den Angaben ab welche das System zu erf llen hat als auch von den Interpretationen der Aufgaben und des
12. Intranet zur Anwendung kommt und vom Kunden alleine oder mit dem Verk ufer gehandhabt werden soll m ssen verschiedene Szenarien ausgedacht werden Aus der Sicht des Interfaces stellt der Internetkunde die limitierendsten Anforderungen an das System In diesem Abschnitt werden verschiedene Aspekte der K ufer im Bereich B2C Business to Customer und im Bereich B2B Business to Business sowie deren Anforderungen vorgestellt Eine Untersuchung der Deutschen Post ber die kritischen Erfolgsfaktoren eines e Commerce Auftritts hat folgende Grundanforderungen ergeben e Kurze Ladezeiten der Webseite e Ausf hrliche Textdarstellung e Detaillierte Bilddarstellung der Produkte e Suchfunktion auf der Webpage e berpr fung des Bestellstatus e Lieferzeit online abrufbar e Bestellbest tigung per E mail e Online Kontakt schneller E mail Kontakt e Verf gbarkeitspr fung online e Keine zus tzlichen Lieferkosten e Verschiedene Zahlungsarten w hlbar e Geld zur ck Garantie Eine weitere Untersuchung die im Anhang aufgef hrt ist siehe Online Auftritt best tigt diese Angaben In einer weiteren Untersuchung ber die Potenziale des elektronischen Handels in Europa wurden die Kaufkriterien des e Consumers eruiert Als aussagekr ftige Gruppe wurde die 14 69j hrige Bev lkerung Mitteleuropas Deutschland 55 1Mio UK 41 5Mio Frankreich 41 8Mio ausgew hlt und mit derjenigen in Kalifornien 23Mio verglichen Kalifornien wurde gew
13. Kompressionsschema ist verlustfrei Das bedeutet dass das komprimierte Bild genau wie das Original aussieht Die durchschnittliche Kompressionsrate betr gt 4 1 Vorteilhaft ist dessen Verwendung bei grossen zusammenh ngenden Farbfl chen einer Farbe Das gif Format eignet sich bei hochfrequenten Bildanteilen Kanten Schriften Interlace Bilder die Pixel des Bildes werden in nicht linearer Folge gespeichert Solche Bilder erreichen Ihren Browser in gleich grossen Bl cken Sobald der erste Block heruntergeladen P Frank Thissen 2000 Screen Design Handbuch Effektiv informieren und kommunizieren mit Multimedia Springer Verlag Berlin Heidelberg New York u a David Siegel 1998 Web Site Design Killer Web Sites der 3 Generation Markt und Technik Verlag M nchen 7 Frank Thissen 2000 Screen Design Handbuch Effektiv informieren und kommunizieren mit Multimedia Springer Verlag Berlin Heidelberg New York u a David Siegel 1998 Web Site Design Killer Web Sites der 3 Generation Markt und Technik Verlag M nchen 36 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung Me und HGKZ Studiengang Neue Medien eer TU Dese Pet Dr ko H hoer ist wiederholt der Browser die Daten des 1 Blocks und liefert eine Rohansicht des Originalbildes so dass der Benutzer eine Vorschau des Bildes bekommt Nachfolgende St cke vervollst ndigen dann das Bild in drei weiteren Durchg ngen Dieser Vorgan
14. aufweisen Wenn eine Liste mehr als 40 Eintr ge aufweist sollte diese in Gruppen mit Unterbegriffen eingeteilt werden 27 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiernene BINH Leitfaden Interface Gestaltung ne ia und a HGKZ Studiengang Neue Medien ARA A A a COMA D Ein Drop down Listenfenster oder Pop up Men hat den Vorteil platzsparend zu sein jedoch erfordert es einen zus tzlichen Schritt bei der Auswahl Solche Listenfenster sollten dann benutzt werden wenn die meisten Benutzer den ersten Eintrag w hlen bzw nicht verwendet werden wenn die Eintr ge wichtige Informationen f r den User beinhalten und wenn mehr als ein Eintrag ausgew hlt werden muss Dadurch wird der Funktionsumfang solcher Listenfenster um Funktionen erweitert woran der User nicht gew hnt ist und dadurch verunsichert wird September Oktober Ioverrber Dezember bnuar Februar h rz Abbildung 14 Beipiele von Drop down Listenfenstern Um sicherzustellen dass ein Drop down Listenfenster als solches wahrgenommen wird sollten folgende Richtlinien eingehalten werden die unsichtbaren Eintr ge sollen die gleiche Zeichengr sse wie der angezeigte Eintrag haben und die Breite des Fensters mit dem Default Eintrag soll genau so breit sein wie die anderen unsichtbaren Eintr ge Wird dies nicht ber cksichtigt wird der User das Listenfenster eher nicht als Einheit wahrnehmen was zu Verwirrungen f h
15. r komplexere Inhalte und auch f r alle hier aufgez hlten Aufmerksamkeitsgesetze Was beim ersten Sehen oder Wahrnehmen neu und spektakul r ist wird sp testens beim f nften Mal langweilig Die Ausnahme wird eben sehr schnell zur Regel und was der Regel entspricht versetzt uns definitionsgem nicht mehr in Erstaunen Gew hnungs bzw Abnutzungseffekte k nnen sich sogar ins Gegenteil verkehren so dass man schlie lich anstatt Aufmerksamkeit und Interesse negative Reaktionen n mlich Vermeidung und Ablehnung ausl sen kann Was zu oft wiederholt wird kann rgerlich und abgeschmackt sein wie ein Witz der zu oft erz hlt wird Diesen Aspekt muss man vor allem dann im Hinterkopf haben wenn man mit dem Dissonanzgesetz oder mit sehr intensiven Reizen arbeitet Wer sich also ohnehin an der Grenze des Ertr glichen bewegt oder sie schon berschritten hat wird bei seinem Publikum m glicherweise keine Langeweile sondern eine Sensibilisierung erreichen Und dieser Prozess ist genauso grundlegend in unser Gehirn bzw unser Nervensystem einprogrammiert wie die Gew hnung wenn auch weniger bekannt Eye catcher und biologische Signale Da wir schon beim Thema intensive Reize sind m chte ich zum Abschlu unseres Ausflugs durch die Gesetze der Aufmerksamkeit noch auf eine besondere Klasse von Reizen eingehen _ au a NME ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Masctinensiemene BENN Leitfaden Interface Gestaltung Oaea
16. richtige Information zum richtigen Zeitpunkt wahrgenommen werden kann soll diese grunds tzlich strukturiert werden sodass der Blick des Benutzers gef hrt werden kann Die Struktur wird durch die konsequente und konsistente Hervorhebung gewisser Informationen Titel Navigation wichtige Informationen News usw erzielt Die k rzesten Suchzeiten in Men s oder Texten erreicht man mit farbigen Hervorhebungen Fettdruck ist ebenfalls gut kursive Schrift ist eher ung nstig und bei blinkenden Elementen sind die Suchzeiten am l ngsten Unterstreichungen sind an sich ung nstig verboten weil man sie mit Hyperlinks verwechseln kann Men optionen die in Spalten angeordnet sind k nnen 20 bis 30 schneller verarbeitet werden als Optionen in Zeilen Andere Elemente welche die Seitenstrukturierung unterst tzen sind die Gruppierung von hnlichen Elementen z B Navigationsbuttons Listen die Ausrichtung von einzelnen Elementen und Gruppen und die funktionale und einfache Verwendung von Farben Graphische Darstellungen von Objekten sind f r den Menschen schneller fassbar als Text Dies ist darauf zur ckzuf hren dass Bewegungen und visuelle Elemente in der nat rlichen Entwicklung des Menschen fr her als Sprachen verwendet wurden Zeichen werden schneller und pr ziser als ein Text erfasst Die graphische Darstellung unterst tzt den Lernprozess und f hrt zu einer schnelleren und erfolgreicheren Probleml sung Wegen der geringeren Komple
17. schlecht voneinander unterscheiden bzw gleichzeitig fokussieren kann Es sollen keine gr ne und rote T ne mit wichtigem Inhalt miteinander kombiniert werden da 9 der M nner und 2 der Frauen farbenblind sind Weitere Informationen zu den Farben sind im Anhang Farben und Aufmerksamkeitsgesetze zu finden Zeichen Da der Mensch auf dem Bildschirm langsamer wie auch weniger gern liest und die Serifen dabei eine Hinderung darstellen sollten immer serifenlose Schriften am Bildschirm verwendet werden 18 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung meh En und j A Konstu k HGKZ Studiengang Neue Medien Npa Serifen sind jene F sschen die an den Extremit ten der Buchstaben bestimmter Schriften zu finden sind Serifen Schriften sind vorzugsweise f r gedrucktes zu verwenden weil sie das Lesen unterst tzen Serifenschrift Serifenlose Schrift Abbildung 6 Serifen und serifenlose Schriften Um gewisse Begriffe hervorzuheben sollen Farben und die Einstellung fett angewendet werden die Einstellung unterstrichen und kursiv eignen sich daf r nicht Die Zeichengr sse sollte mindestens 10 Punkte betragen Die Gr ssenvielfalt der Zeichen ist ebenfalls zu minimieren Jede Gr sse hat eine bestimmte Funktion und muss ber die ganze Applikation im Sinne einer Formatvorlage konsequent gehandhabt werden Nach einer Untersuchung von Bernard ist Arial 1
18. sich viele Personen mit der Gestaltung von Homepages auseinandergesetzt haben Da 1000 K pfe 1000 Ideen haben hat das Aussehen von Homepages eine enorme Vielfalt erreicht Leider hat man vielfach bei der Gestaltung der Seiten den Schwerpunkt auf das Aussehen gelegt und die Erwartungen der Besucher nicht beachtet Dies hat dazu gef hrt dass bei verschiedenen 33 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschineneiemenee BENN Leitfaden Interface Gestaltung HGKZ Studiengang Neue Medien And N Bausteinen das Mapping beim mentalen Userbild fehlgeschlagen hat Die Aspekte eines solchen Fehlschlages sind unterschiedlich die wichtigsten werden hier vorgestellt e Konsistenz Wenn ein bestimmtes Element eine gewisse Funktion bernimmt dann m ssen alle anderen gleichaussehenden Elemente diese Funktion ebenfalls inne haben Das ist auch f r die Gr sse der Elemente g ltig e Links in Graphiken Links sollten als solche ersichtlich sein und nicht in einer Graphik oder einer Photographie versteckt sein sodass der Anwender die ganze Seite mit der Maus abfahren muss um zu sehen ob sich was ndert e Text Hyperlink Wenn ein Hyperlink als Text angezeigt wird soll die Beschreibung des Zielobjektes m glichst genau sein Der Benutzer soll wissen was ihn erwartet Es sollen jedoch Beschreibungen neben dem Hyperlink vermieden werden e Unterstrichener Text Es hat sich eingeb rgert dass unterstrichene Texte einen Hyperlink im web darstellen Des
19. sind so selbstverst ndlich dass es sich verbietet sie umst ndlich zu erkl ren Im folgenden Abschnitt werden noch einige Intensit tsgesetze im Zusammenhang mit Farben erkl rt Es gibt allerdings Varianten bei denen es nicht um physikalische Intensit t sondern um Inhalte und sprachlichen Ausdruck also um die Beschreibung von Dingen geht Man kann dies leicht verdeutlichen wenn man einige W rter gegen berstellt die einen bestimmten Sachverhalt mehr oder weniger intensiv ausdr cken bzw beschreiben Lesen Sie einmal die W rter bzw Formulierungen in der folgenden Tabelle 7 Diese Informationen sind auf http www kommdesign de texte aufmerk4 htm vorhanden 28 02 01 46 ETHZENTRUM f r PRODUKTE ENTWICKLUNG Maschinene Ze EI Leitfaden Interface Gestaltung 8 eet Co uw REKT Studiengang Neue Medien E abgrundtiefer Ha ablehnende Haltung gigantisch gro brandaktuell neu absolut t dlich eher ungesund Nat rlich haben diese W rter bzw Formulierungen keine messbaren physikalischen Eigenschaften trotzdem unterscheiden sie sich ganz offensichtlich in ihrer Intensit t n mlich der St rke des Ausdrucks Und obwohl hier keine realen Dinge anwesend sind sondern nur Vorstellungen gilt auch hier die Gleichung intensiver interessanter und attraktiver f r die Aufmerksamkeit Die Farbgesetze Vielleicht haben Sie es schon bemerkt Seit Telefonzellen nicht mehr leuchtend gelb sondern in dezentem grausilber mit einig
20. 2 Punkte der beliebteste Zeichensatz auf dem Bildschirm gefolgt von Times New Roman 12 Punkte Metaphern Im User Interface Bereich kann unter einer Metapher ein graphisches Element verstanden werden welches ein Objekt eine Geometrie der realen Welt und dessen Funktion abbildet Die Wahl einer Metapher soll sorgf ltig erfolgen denn diese sollte dem User bekannt sein und deren Funktionen klar ins gedankliche Modell des Anwenders sowie ins Umfeld der Applikation passen Abbildung 7 Reiter als Beispiel einer Metapher Seitenvernetzung Es gibt an sich keine eindeutigen Richtlinien bez glich der Vernetzung von Seiten Im Grunde bestehen drei eindeutig erkennbare Arten um eine Vernetzung durchzuf hren e ber eine Sequenzierung das ist die einfachste Methode und zeichnet sich durch eine lineare Abfolge von Seiten aus Diese Art von Vernetzung eignet sich f r die Darstellung zeitlicher Abfolgen Erz hlungen Sequenzen von Handlungen und Indizes e mit Hilfe einer Netzstruktur dabei erfolgt die Vernetzung zwischen den Seiten auf gleichen bzw verschiedenen Hierarchiestufen Dieser Aufbau wird vor allem angewendet bei Themen die untereinander in Verbindung stehen e ber den hierarchischen Aufbau dieser ist f r das gedankliche Modell am einfachsten nachzuvollziehen und wird vor allem von unerfahrenen Usern gesch tzt Die Hierarchiestufen spielen dabei eine wichtige Rolle Generell kann gesagt werden dass eine Hierarchiestruktur
21. Buch Envisioning Information die folgenden einfachen und einleuchtenden Regeln f r die Verwendung von Farben auf Pastellfarben oder abgedunkelte Farben f r gr ere Fl chen bzw Hintergr nde Intensive Farben nur f r kleine Objekte oder Elemente die besonders betont werden sollen Die folgenden Abbildungen verdeutlichen dieses Prinzip Sie zeigen drei Varianten einer Instruktion f r eine nicht ganz allt gliche Aufgabe n mlich das Lenken von Flugzeugen auf dem Rollfeld Grafik Nr 1 arbeitet ausschlie lich mit Schwarz Weiss Kontrasten Grafik Nr 2 nach den eben aufgestellten Regeln also intensive Farben f r kleine wichtige Objekte Pastellfarben f r den Hintergrund und Unwichtiges Man kann unmittelbar erkennen wie die Farbe hier die Informationsdarstellung unterst tzt und die Aufmerksamkeit sinnvoll lenkt Die farbige L sung wirkt eleganter da sie die gleiche Information gewisserma en mit weniger Lautst rke Kontrasten transportiert und trotzdem besser artikuliert also Wichtiges von Unwichtigem trennt Grafik Nr 3 demonstriert dass intensive hoch ges ttigte Farben eher st ren wenn sie massiert und un berlegt eingesetzt werden Unwichtiges der Rahmen und das M nnlein tritt mit Wichtigem n mlich den auszuf hrenden Bewegungen in Konkurrenz PROCEED WATCH SIGNALS START ENGINES START ENGINES 1 teilweise modifizierte Abbildungen aus Edward Tufte 1999 Envisioning Information Graphics Press Es ist bri
22. DUKTE ENTWICKLUNG Z Baa ee HGKL Studiengang Heue Medien Korstrukbonslehne ken EN FU Data Pet De Leitfaden Interface Gestaltung effektive Auseinandersetzung mit der Umwelt und sind ausschlaggebend f r das Erreichen eines Zieles Bei der Entwicklung von interaktiven Systemen sollte das bereits bestehende Benutzerwissen unterst tzt werden Die Fertigkeiten des Users sollten bei der Konzipierung der zu l senden Aufgabe sowie der Interaktionsmittel ber cksichtigt werden Menschen interpretieren s mtliche wahrgenommenen Ereignisse und Objekte in einem bestimmten Kontext und zwar entsprechend ihres individuellen Wissens und ihrer Erfahrungen Deswegen sollte man grunds tzlich auf bekannten Konzepten aufbauen zum Beispiel auf den klassischen Interaktionsbausteinen welche sp ter vorgestellt werden Gleichzeitig sollte auf das Wissen des Benutzers eingegangen werden um die Interaktion zu optimieren In der folgenden Tabelle werden drei Arten von Anwender mit deren spezifischen Eigenschaften vorgestellt Benutzer Grundhaltung Fragen Bedarf Motivation Worum gehtes Hilfe f r den Attraktives Ausseres hier genau Einstieg Motivation Erschienungsbild K der Kann ich es zur weiteren zur Besch ftigung mit Anf nger Neugier gebrauchen Besch ftigung mit dem Produkt Wie funktioniert dem Produkt einen das roten Faden Guide Tour Wie ist das Klare Strukturen Ansprechende strukturiert Landkarten Navigationsm gl
23. ITOH H K ENT p unG Maschine a A Se ETH ZC NI f r PRODUKTE ENTWICKLUNG Fr Kl COMA HGKZ Studiengang Neue Medien Hike CS geet ER Leitfaden f r Interface Entwickler des Projektes Coma Version 2 0 Z rich 21 11 2001 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschineneiemente Leitfaden Interface Gestaltung Oaea E und z P Kons a N HGKI Studiengang Neue Medien aapna TU Damat Pret De ka H ho Einleitende Bemerkung a en a a nesre reenn 3 VORGEHENSWEISE Mm 2 01 lb ee ira NENG 4 Physiologische Faktoren veer kee ieee asana eaaa an 4 e E 5 LEBEN Ee e 6 SACHEN Se ee ee ee a en re ea 7 REH ett ee ee ee dE tee dE ee eege 8 Psychologische F ktoren 2 2uu 2 ae ee se 10 Vorgehensweise am Beispiel des Konfigurators uuuuunssssannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nn 11 BENUTZER u ee N Ee N as 12 Handlungsweise der Benutzer ee 12 Kundenspr che F chbegriffe u en ENEE EENS Ed E 13 BENUTZER UND RBEITSUMGEBUNG uuuuununssssnnnnnnnnnnnnnnnssnnnnnnnnnnnnnnnnnnannnnnnnnnnnnnnsssnnnnnnnnnnnnnnnnnnnnnnnnn 14 Anforderungen an E commerce Seiten im Bereich B2B und BC 14 INTERB GE ETETETT TEET EERTE Re ee RD Re TTT 17 Allgemeine Aspekte der Interfacegestaltung uussununsssnnnnnnnnnnnnnnnnnnnnannnnnnnnnnnnnnnnnnnnnnnnnnnnnnn 17 Metaphern ea ee EE EE dE e 19 EE e NEE 19 Seitenanordnung a a a ae a E ernn EEEE 20 Navigation uAd Orientierund re ee le een 21 EE geen EE 22 Der ErStK ntakt EE 23
24. Leitfaden Interface Gestaltung TE und HGKZ Studiengang Neue Medien ran joe rege TU Demma Pret Dr kan Sdre eine gew hlt werden kann Die Beschreibung soll auch hier kurz pr zis und konsistent sein Radio Buttons sollen gruppiert und mit einem Titel eingerahmt werden Radio Buttons sollen vorz glich vertikal plaziert werden Die maximale Zahl an Radio Buttons einer Gruppe ist sieben Wenn die Eintr ge es erlauben soll die Reihenfolge eindeutig sein nach Gebrauchsfrequenz nach Logik zeitliche spezifische nach Alphabet usw Es sollen keine bin ren ja nein Radio Buttons verwendet werden Gut Pad Apsal mer F Tau fo basa O D cutasknfezugps V Producta Besser Biren TEAGvECOTEC f ee D LBIMWESOTER 10550 DN IBDT IWEZITER TRN Diii ITIMWECOTEO Am besten Donau Abbildung 11 Beispiele von Radio Buttons Feedback mit Animation E i Sa schlecht mar ER Feedback mit Animation besser Abbildung 12 ja nein Operationen 26 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Masctinensiemente Leitfaden Interface Gestaltung mt und HGKZ Studiengang Neue Medien eiert Check Boxes Check Boxes werden benutzt wenn eine oder mehrere Optionen zur Verf gung stehen Check Boxes kommen auch bei bin ren Ausdr cken ja nein Entscheidungen zum Zug Die Auswahl der Begriffe soll hier ebenfalls kurz pr zis und konsistent sein Check Boxes sollen gruppiert mit einem Titel eingerahmt und vorz glich verti
25. Regeln zu gestalten Diese sind in den Styleguides der bedeutendsten Hersteller Apple Microsoft IBM u v a festgehalten Die wichtigste und vollst ndigste Norm im Bereich der Bildschirmarbeit ist die ISO Norm 9241 Die Teile 10 bis 17 derselben befassen sich mit den software ergonomischen Aspekten der Bildschirmarbeit Diese werden sp ter im Kapitel Normen kurz vorgestellt Aus ergonomischem Gesichtspunkt sind drei Aspekte wichtig die Funktionalit t die Attraktivit t und die Individualit t eines Produktes Bez glich der Funktionalit t wird auf die bereinstimmung der einzelnen Funktionen mit der zu erf llenden Aufgabe und auf die Einfachheit mit der die Aufgabe erf llt werden kann geachtet Unter Attraktivit t kann die spontane Gef lligkeit des Produktes verstanden werden Es ist davon auszugehen dass Kaufentscheidungen nicht allein von der Funktionalit t des Produktes bestimmt werden Das gew hlte Design macht nicht nur eine Aussage ber den Hersteller sondern auch ber den K ufer Es dient also in erheblichem Masse der Selbstdarstellung Individualit t steht f r die Tatsache dass die Schnittstelle zum Benutzer auf die F higkeiten die Vorbildung und die Einsatzbereitschaft des Benutzers R cksicht nehmen muss Deshalb m ssen einfache Handlungen als solche auch einfach gehandhabt werden sie d rfen nicht in beliebig viele Teilschritte zerlegt werden Um die richtigen Handlungen beschreiben zu k nnen ist es f
26. Systems durch die Benutzer Beim Umgang mit dem System erwartet der Benutzer dass ihm das System folgende Fragen beantwortet e Was kann ich tun e Was habe ich hier bereits getan e Hat der Computer die Anweisungen verstanden e Was tut der Computer zur Zeit e Ob oder wann eine Option selektiert werden kann e Welche andere Optionen k nnen ebenfalls zu einem bestimmten Zeitpunkt selektiert werden e Wann wird das Ende einer Selektionsoperation erreicht e Welche Operationen d rfen selektiert werden Durch die visuelle und akustische Signalisierung erh lt der Benutzer eine Antwort auf diese Fragen Tritt dies nicht ein wird der Benutzer verunsichert und verwirrt Gibt es keine R ckmeldung kann dies zu einer Schw chung des Vertrauens in das System f hren Jede vom 3 Erste Ergebnisse der Merian Forschung www marketing uni goettingen de forschung aktuelles merian erste ergebnisse htm 4 Poynter Institute 2000 22 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung m und HGKZ Studiengang Neue Medien Aeri aA i COMA gt Benutzer ausgehende Operation erfordert ein unmittelbares Feedback Da das Feedback nicht immer unmittelbar dargestellt werden kann empfiehlt es sich jede Art der Verz gerung unmittelbar mit dem Cursor verschl sselt mitzuteilen z B mit einer Sanduhr Worauf muss beim Feedback geachtet werden e Das Feedback des Systems sollte immer konsistent blei
27. UKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung EE und HGKL Studiengang Neue Medien Konsinik onsehre MEN TU Damma Pret Dr ka HL bhole Online Auftritt Die ComCult Studie Zielgruppen im Netz 2000 will eine empirische Grundlage f r die Planung und Realisierung der Online Auftritte von Anbietern im Internet schaffen Die Resultate werden in folgenden Graphiken veranschaulicht Relevanz inhaltlicher Auswahlkriterien 20 40 60 Qualit t der Inhalte Aktualit t der Update N tzliche Infos Tiefgehende Infos Unterhaltsamer Wert Relevanz formaler Kriterien gestalterischer Aufbau bersichtliches Angebot Links zu aktuellen Themen Suchfunktionen Nicht graphisch berladen Ansprechende Gestaltung Bannerw erbung auf der Seite 35 yww wuv de 54 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG ZZ Maschinenziemente P KEEN EBENE CHCHETEN TEE en urd HGKZ Studiengang Neue Medien R a i Archivkostenlose Recherche M glichkeit Anbieter zu kontaktieren Beratungsm glichkeiten Angebote zum Online Einkauf Kommunikations m glichkeiten Qualitativer kostenpflichtiger Datenbankzugriff Relevanz servicebezogener Auswahlkriterien 0 20 40 60 80 100 Seriosit t des Anbieters Bekanntheit des Anbieters Erfahrungen beim klassischen Einkaufen Relevanz von Auswahlkriterien bez des Anbieterimages
28. Waffen geht man vorsichtig um und man setzt sie eigentlich nur im Notfall ein jedenfalls nicht ohne einen triftigen Grund Zwei Eigenschaften von Eye catchern machen den Umgang mit ihnen im Web besonders schwierig Erstens kann man sich ihrer Wirkung nicht entziehen Dies ist besonders problematisch wenn die Empf nger der biologischen Signale wie im Web eigentlich anzunehmen ihre eigenen Ziele verfolgen und dabei eigentlich nicht unterbrochen oder gest rt werden m chten Ein Reiz der auf einer Werbeanzeige angenehm prickelt kann auf einer Website als st rend wirken Zweitens lenken Eye catcher von Inhalten ab wenn man nicht genau weiss was wo in welcher Dosis vertr glich ist Das klassische Beispiel hierf r sind sexuelle Reize in der Werbung die nach verschiedenen empirischen Tests die Ged chtnisleistung f r das pr sentierte Produkt negativ beeinflussen Bei 80 90 der Eye Catcher im Internet haben die Macher den Begriff der Verh ltnism igkeit der Mittel nicht ber cksichtigt Es kann durchaus sinnvoll sein einen besonderen Service oder ein neues Angebot in der Aufmerksamkeit des Publikums quasi mit biologischem Nachbrenner zu verankern Andererseits ist es v lliger Unsinn eine Animation einfach deshalb ablaufen zu lassen weil man gelernt hat wie animierte Gif Grafiken oder Flash Animationen gemacht werden Und bei vielem das uns im Web entgegenblinkert kann ich keinen anderen Grund entdecken 53 E H ZENTRUM f r PROD
29. alles andere als ein attraktives Angebot Die Benutzer innen werfen eine enorme Aufnahmekapazit t ins Rennen um sich mit allen Sinnen zu informieren und anregen zu lassen und laufen ins Messer der Langeweile Animationen oder coole Effekte retten da dann auch nichts mehr die machen in der Regel nur ihren Herstellern Spa Umgekehrt hat jemand mit festem Ziel und fokussierter Aufmerksamkeit aber kein Problem mit einem solchen Auftritt Alles sch n bersichtlich und geordnet keine Ablenker alles eindeutig alles textunterst tzt keine irrelevante Information prima 4 Beispiel Jemand mit einem Ziel und fokussierter Aufmerksamkeit wird gerne von einer gut funktionierenden Suchfunktion Gebrauch machen Sein Ziel ist ja nicht im Web herumzusurfen sondern ein Ziel zu erreichen und wenn ihn die Suche nach einem Schl sselwort mit einem Klick dort hinf hrt ist das genau das was er sie m chte Die Suchfunktion hat au erdem den Vorteil dass sie auf die Wahrnehmungs und Denkressourcen einer fokussierten Aufmerksamkeit abgestimmt ist Die Frage ist dann 33 Diese Beispiele stammen aus folgender Seite http www kommdesign de texte aufmerk3 htm 44 ETH ZC NI f r PRODUKTE ENTW reen TCKLUNMG ZZ Masztinenslemente a Leitfaden Interface Gestaltung COMA gt und a Konstrukbonslehre 3 TU Diesmal Pret Dr ko H hoier allerdings wie gut die Ergebnisse sind Wenn die Suche zu einem Mega Hit sagen wir 30 Dokumente f hrt ist d
30. amia Pet Dit ka H Bihler Bausteine oder Interaktionsobjekte Grunds tzlich werden zwei Arten von Interaktionsobjekten unterschieden einerseits die allgemein bekannten und vertrauten Elemente aus der Microsoft Welt und andererseits die frei gestalteten Objekte die in die HTML Sprache eingebunden werden und nach Lust und Laune des Homepagegestalters kreiert werden k nnen Im ersten Teil werden die standardisierten Interaktionsobjekte die in den Styleguides der Softwarehersteller zu finden sind diskutiert und im anschliessenden Kapitel erfolgt die Auff hrung der wichtigen Aspekte der Gestaltung von eigenen Interaktionsobjekten Standardisierte Interaktionsobjekte Push Buttons Push Buttons werden immer f r die Ausf hrung einer blichen oder kritischen Aktion verwendet Gew hnliche Aktionen sind zum Beispiel das Best tigen einer Auswahl mit dem OK Button Kritische Aktionen sind hingegen Befehle die gr ssere Auswirkungen auf das weitere Vorgehen oder auf die gespeicherten Daten und die Einstellungen einen Einfluss haben k nnten Wenn beispielsweise eine Arbeitssession beendet werden m chte muss der Benutzer dies mit dem OK Button best tigen Wenn Buttons keine unmittelbare Aktion ausf hren werden sie am rechten unteren Rand mit drei Punkten versehen um anzudeuten dass die Aktion weitere Parameter ben tigt siehe Abbildung Button Eigenschaften Dokumentrorlagen und Add Ins Or KE Dokumentvorlage I nk ngen
31. anning of Pages Designing for the Web Empirical Studies Human Factors and the Web HTML Conference Sandia National Laboratories Albuquerque 1996 Parkinson S R Sisson N Snowberry K 1985 Effect of breadth depth and number of responses on Computer menu search performance Journal of Man Machine Studies Bd 28 S 683 692 1985 Poynter Institute 2000 Definitely not your father s newspaper and surprise All eyes on test online www pointer org centerpiece 050300 htm Preece J ed 1993 A guide to usability human factors in computing Addison Wesley Publishing Company Reading Menlo Park New York u a 1993 59 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung b s ee und a HGKZ Studiengang Neue Medien iert SE Schulze Frank 1996 Software Ergonomie berblick Methodensammlung Band 5 Institut f r Arbeits und Organisationsphsychologie der TU Dresden August 1996 Siegel David 1998 Web Site Design Killer Web Sites der 3 Generation Markt und Technik Verlag M nchen 1998 Spain K 1999 What s the best way to wrap links Usability News online http wsupsy psy twsu edu surl usabilitynews 1w links htm Stary Christian 1996 Interaktive Systeme Software Entwicklung und Software Ergonomie Vierweg Verlag Braunschweig Wiesbaden 1996 Stary Ch Riesenecker Caba Th 1999 EU CON II Software ergonomische Bewertung und Gestaltung von Bildschirmarbeit Wir
32. arbeitung in einem Fenster abbrechen und in einem anderen fortsetzen um schliesslich zum Ausgangsfenster zur ckzukehren Erwartungskonformit t Ein interaktives Software System ist erwartungskonform wenn es Erwartungen von Benutzern erf llt Diese Erwartungen rekrutieren sich aus Kenntnissen bisheriger Arbeits Abl ufe der Ausbildung und Erfahrungen die Benutzer aufgrund der Systemtransparenz und konsistenz w hrend des Umgangs mit Computersystemen erwerben Bsp Weicht die Antwortzeit des Systems von der zu erwartenden Antwortzeit ab wird der Benutzer dar ber informiert Fehlerrobustheit toleranz Ein interaktives Software System ist fehlerrobust wenn trotz erkennbarer fehlerhafter Eingaben das beabsichtigte Arbeitsergebnis ohne oder mit minimalem Korrekturaufwand erreicht wird Dazu m ssen den Benutzern die Fehler zum Zwecke der Behebung verst ndlich gemacht werden Bsp Eine Telefonnummer wurde falsch eingegeben eine Zahl zu wenig das System gibt das 31 Aus Felix Daniel 2000 Methoden der benutzungsorientierten Software Evaluation S 50ff IIg Rolf 1999 Rechnergest tzte Gestaltungsvorgaben und Dialogbausteine f r grafische Benutzungsschnittstellen S 30ff Stary Ch Riesenecker Caba Th 1999 EU CON II Software ergonomische Bewertung und Gestaltung von Bildschirmarbeit S 139ff 39 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung meh En und E e e 7 REI
33. auch Anhang e Es stimmt nicht dass Internet Benutzer nur 3 Minuten in der Lage sind sich auf ein Thema zu konzentrieren e Ein h ufiger Fehler ist zu meinen dass alle Inhalte auf der eigenen Homepage wichtig sind und deswegen alles t chtig hervorgehoben wird Bevor irgend welche Massnahmen vorgestellt werden k nnen muss die Frage nach der physiologischen Funktionsweise der Aufmerksamkeit gestellt werden Im Modell wird gezeigt wie durch die Wahrnehmung sehr viele Informationen registriert werden und gleich eine sehr breite automatische Analyse stattfindet Der Engpass liegt an der Stelle an der unser Bewusstsein ins Spiel kommt also dort wo aus der riesigen Menge analysierter Informationen eine Auswahl getroffen werden muss automatische Analyse Registrieren Abbildung 3 das Modell pr attientiver Prozesse Solche pr attentiven Prozesse vor aufmerksame sind extrem schnell beginnen fast zeitgleich mit dem Registrieren der Informationen und sind nach ca 300 bis 500 Millisekunden abgeschlossen Sie arbeiten wie parallel geschaltete Prozessoren die alle wahrgenommenen Reize interpretieren und die Ergebnisse unserem Bewusstsein zur Verf gung stellen Solange keine signifikanten Bedeutungen erkannt werden bleibt die Kontrolle dem Bewusstsein berlassen Tritt ein signifikanter Reiz auf wird dieser von den pr attentiven Prozessen automatisch registriert sie bernehmen die Kontrolle unterbrechen das Denken und lenken d
34. ben e Aufjede Aktion des Benutzers sollte eine Reaktion des Systems erfolgen e Man sollte die interaktiven und statischen Elemente nicht vermischen e Man sollte versuchen die Erwartungen des potentiellen Besuchers zu erf llen Der Erstkontakt Bekanntlich kann jedermann innerhalb der ersten Sekunden wenn eine Person ein Objekt oder ein Sachverhalt wahrgenommen werden einen ersten intuitiven Eindruck gewinnen Zwar ist dieser Eindruck unvollst ndig z T ungenau jedoch spielt dieser erste Eindruck eine enorm wichtige Rolle Er pr gt die erste Meinung die sp ter nur mit verh ltnism ssig viel gr sseren Anstrengungen korrigiert werden kann Wie bereits erw hnt hat ein englischsprachiger Designer zum Thema gesagt You Cant impress twice F r den Internet Benutzer beginnt der Erstkontakt mit der Seite in dem Augenblick in dem der Browser die Informationen vom entsprechenden Server aufl dt Schon in diesen Momenten beginnt der Benutzer die Seite zu bewerten Alles was w hrend des Aufbaus der ersten Seite geschieht tr gt besonders zum Erlebniswert einer Homepage bei und sollte bei der Gestaltung ber cksichtigt werden Gute Ans tze f r die Gestaltung des Erstkontakts sind e Ein pr gnantes Logo e Angenehme Farben e Ein l chelndes Gesicht 23 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung und a COMA gt HGKL Studiengang Neue Medien Korretnkorhintune DEER U D
35. ben werden In diesem Fall entspricht 0 der roten Farbe 60 der gr nen Farbe 120 Cyan 240 Blau und 300 Magenta Die S ttigung der Farbe wird durch die Breite des reflektierten Spektrums bestimmt Je schmaler das Spektrum oder je weniger weisse Farbe vorhanden ist um so ges ttigter erscheint die Farbe Schwach ges ttigte Farben enthalten einen hohen Weissanteil und erscheinen blass Solche Farben eignen sich besonders gut f r die Hintergr nde da sie einen guten Kontrast mit kr ftigeren Farben bilden Somit kann gew hrleistet werden dass die Information im Vordergrund auch zuerst wahrgenommen werden kann Reine Spektralfarben besitzen den h chsten S ttigungsgrad 100 unges ttigte Farben 0 erscheinen als Graut ne In dieser Liste werden Beispiele angezeigt woran Objekte Gef hle Symbole usw Farben in der westlichen Welt assoziiert werden Rot Aktivit t Dynamik Vitalit t Energie Entschlossenheit Liebe Kraft Temperament Leidenschaft Feuer Gefahr Warnung Blut Zorn Orange W rme Lebhaftigkeit Ausgelassenheit Wildheit Aktivit t Aufmerksamkeit Mut Spass Gl ck Gelb Sonne W rme Helligkeit Heiterkeit Lebhaftigkeit Verspieltheit Gl ck Optimismus Freundlichkeit Hoffnung Wert Gold Gr n Natur Vegetation Wachstum ppigkeit Frische Ruhe Ausgelassenheit Entspannung Friedlichkeit Hoffnung Gift 3 Frank Thissen 2000 Screen Design Handbuch Effektiv informieren u
36. ch stellt an das Mensch Maschine System verschiedene Anforderungen die mit seinen physiologischen Grenzen und der eigenen Psychologie eng in Verbindung stehen Ausserdem spielen f r global einsetzbare Tools kulturelle Faktoren eine Rolle In den folgenden Unterkapiteln werden diese Aspekte einzeln diskutiert Physiologische Faktoren Die Person welche am Bildschirm arbeitet beansprucht bei der Interaktion mit der Software und nicht mit der Hardware das Sehverm gen zum Schauen und Lesen Informationswahrnehmung und das Gehirn zur Informationsspeicherung Die einzelnen Aspekte werden zuerst beschrieben und dann werden m gliche Richtlinien angegeben Die jeweiligen Aspekte sind in normaler Schrift aufgef hrt und die entsprechenden Richtlinien in kursiver Schrift dargelegt E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung nn urg s F tonsini K HGKZ Studiengang Neue Medien T as COMA Sehen Das Sehen am Bildschirm wird von diversen Aspekten beeinflusst die hier vorgestellt werden e Gr sse der Objekte Je gr sser die Objekte sind desto besser k nnen die Kontraste die Farben die Konturen und schliesslich das gesamte Objekt wahrgenommen werden Das gilt sowohl f r Graphiken und Icons als auch f r Schriften F r Graphiken existieren keine festen Richtlinien es ist jedoch festzuhalten dass deren Botschaft nur zur Geltung kommt wenn Konturen Farben und Kontraste eindeutig sind Di
37. chineneiemente A EE Zei HGKZ Studiengang Neue Medien T as COMA gt e Men s Men s spielen zwei bedeutende Rollen im Interface Design einerseits stellen sie die Hauptnavigation im Interface dar andererseits dienen sie dem User zur Bildung eines mentalen Modells der Software Auch aus diesen Gr nden sollten Men leisten an der Kopfzeile der Software immer sichtbar sein Die Wortwahl auf der Men liste soll sorgf ltig und allgemeinverst ndlich getroffen werden Einerseits soll man sich an die Standards halten andererseits sollen alleinstehende Begriffe die Eintr ge in der Men leiste beschreiben Diese sollen immer mit einem Grossbuchstaben beginnen Die Folge der oberen Men leiste sieht wie folgt aus auf der linken Seite sind immer Standard Men s angebracht in der Mitte die spezifischen Men s und am Schluss die Hilfefunktionen Zudem soll versucht werden dem Arbeitsablauf zu folgen und zu schauen dass diese Funktionen mit dem mentalen Modell der Benutzer bereinstimmen Die Men leiste soll nicht mehr als eine Zeile lang sein Men titel a Bearbeiten Ansicht Einf gen Format KI Riirkg ngg Fingahr UO wiederhoen Eingabe Strg Y schneien Sttat B5 Kopieren Stra C P Einf gen Strg Y Inhalte einf gen Als dyperink eint ger Markierung l schen Alles markieren d Sucen Ersetzen Gebe zu Verkn pfungen unterdr ckte S Befehle Abbildung 20 Bestandteile eines Men s
38. chnet wenn es den Benutzern m glich ist die Aufgaben gemeinsam zu bew ltigen Ein interaktives Software System wird als kommunikationsf rderlich bezeichnet wenn es den Benutzern m glich ist soziale Beziehungen untereinander zu entwickeln und zu pflegen Datensicherheit Ein interaktives Software System wird als sicher bezeichnet wenn es unbefugten Benutzern nicht m glich ist auf die Daten einzugreifen und diese zu manipulieren 40 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinene iik Leitfaden Interface Gestaltung elt BE Sie WE En a u HGKZ Studiengang Neue Medien kan jour gem TU Damma Pret Dr kan S rie Anhang 41 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung DH zz er nl urd f K HGKZ Studiengang Neue Medien T as COMA gt Das zweigeteilte Gesichtsfeld Als Gesichtsfeld bezeichnet man den Bereich der Umwelt der in einem gegebenen Moment in unseren Augen genauer auf der Netzhaut der lichtempfindlichen Zellschicht im Augenhintergrund abgebildet wird Unser Gesichtsfeld wirkt zwar glatt bergangslos und einheitlich es sei denn man tr gt eine klitzekleine Brille oder hat sagen wir 12 Tequila konsumiert dieser Eindruck ist jedoch falsch Tats chlich wird es von zwei getrennten Nervenbahnen und den daran angeschlossenen Hirnzentren mit v llig unterschiedlichen Eigenschaften versorgt Diese kooperieren allerdings normalerweise so unauff
39. d and Transient Channels for Theories of Visual Pattern Masking Saccadic Supression and Information Processing Psychological Review Bd 83 S 1 36 1976 Felix Daniel 2000 Methoden der benutzungsorientierten Software Evaluation Skript zur Vorlesung ETH Z rich SS00 Galitz Wilbert 1997 The essential guide to user interface design an introduction to GUI design principles and techniques New York etc Wiley cop 1997 llig Rolf 1999 Rechnergest tzte Gestaltungsvorgaben und Dialogbausteine f r grafische Benutzungsschnittstellen Springer cop Berlin etc 1999 Kr ger H 1998 provisorische Unterlagen zur Vorlesung Mensch Computer Interaktion ETH Z rich WS98 99 Larson K Czerwinski M 1998 Web Page Design Implications of Memory Structure and Scent for Information Retrieval online http www research microsoft com users marycz chi981 htm Macintosh Human Interface Guidelines 1992 Addison Wesley Publishing Company Reading Menlo Park New York u a 1992 Microsoft Press 1995 The Windows Interface Guidelines for Software Design One Microsoft Way Remond Washington 1995 Mills Z Prime M 1990 Are all menus the same Human Computer Interaction Oo Proceedings of the IFIP TC 13 S 423 427 1990 Norman Donald A 1989 Dinge des Alltags gutes Design und Psychologie f r Gebrauchs gegenst nde Frankfurt etc Campus cop 1989 Nygren E Allard A 1996 Between the Clicks Skilled Users Sc
40. edurales Lernen erfolgt meistens unbewusst Das deklarative Ged chtnis ist das Wissensged chtnis und erlaubt dem Menschen das Behalten und die bewusste Wiedergabe von Fakten und Ereignissen aus der Umwelt und in die Umwelt Dieses Ged chtnis kann in ein sensorisches Ged chtnis in ein Prim res Sekund res und Terti res Ged chtnis eingeteilt werden Die ersten zwei geh ren zum Kurzzeitged chtnis und die anderen zwei zum Langzeitged chtnis Das sensorische Ged chtnis hat eine Speicherzeit von weniger als einer Sekunde und das Vergessen entsteht durch das Verbleichen von Informationen Das Prim re Ged chtnis speichert die Informationen wenige Sekunden bis zu einigen Minuten Alte Informationen verschwinden bei gleichzeitigem Nachfolgen neuer Informationen Die Aufnahmekapazit t betr gt 7 2 Informationseinheiten Nicht verbal kodiertes Material wird vom prim ren Ged chtnis nicht gespeichert Die bertragung aus dem prim ren in das dauerhafte sekund re Ged chtnis wird durch das ben erleichtert Im sekund ren Ged chtnis werden die Informationen nach ihrer Bedeutung gespeichert und zur Wiedergabe muss das Ged chtnismaterial aus dem Langzeitged chtnis in das Kurzzeitged chtnis gebracht werden W hrend die Zugriffsschnelligkeit auf das prim re Ged chtnis sehr gross ist ist sie im sekund ren kleiner denn das Suchen im gr sseren Speicher ben tigt mehr Zeit Das Vergessen im sekund ren Ged chtnis erfolgt durch die Zunahme an Wis
41. eitswirkung absurder Information Von allen bisher besprochenen Gesetzen ist das Dissonanzgesetz am anspruchvollsten in der Anwendung Es ist eine hohe Kunst Informationen so zu pr sentieren dass sie einerseits Erwartungen erzeugen diese dann aber verletzen und dies dann noch so dosiert dass die Sache nicht einfach plump absurd wird Humor basiert oft auf Dissonanzgesetzen und wer einmal versucht hat ganz gezielt witzig zu sein wird wissen wie schwierig das ist Trotzdem ist es nach meinem Urteil das wirksamste Prinzip wenn man Informationen erfolgreich verkaufen m chte Es erzeugt nicht nur ein kurzes Aufmerken sondern Interesse und Neugier und damit also die Bereitschaft nachzudenken und sich mit einer Information zu besch ftigen Das Gew hnungsgesetzt Ein weiteres wichtiges Aufmerksamkeitsgesetz das man auf keinen Fall vergessen darf wenn Informationen gestaltet werden ist das Gew hnungsgesetz oder um es in der Sprache der Werbung zu sagen der Wear out Effekt Ein Reiz der einmal Aufmerksamkeit auf sich zieht tut dies vielleicht ein zweites und ein drittes Mal Bei Wiederholungen passt sich unsere Wahrnehmung aber sehr schnell an Reize an unser Auge adaptiert sich z B an helles Licht indem die Pupille durch einen entsprechenden Reflex verengt wird Dies ist ein primitiver Mechanismus der schon auf der Ebene einzelner Nervenzellen bzw impulse gemessen werden kann Allerdings funktioniert er in hnlicher Form f
42. en kleinen magentafarbenen Verzierungen eingef rbt sind ist es schwieriger geworden sie zu finden Man k nnte noch viele andere allt gliche Beispiele daf r anf hren dass Farbe unsere Aufmerksamkeit anzieht Wenn davon die Rede ist dass Farbe Dinge attraktiver also eben anziehender macht ist damit ja oft genau diese Wirkung gemeint Allerdings gibt es noch eine ganze Reihe spezieller Regeln welche die Wirkung von Farben auf uns genauer beschreiben und aufschl sseln Die wichtigsten sind in der folgenden Tabelle zusammengefasst Aufmerksamkeitswirkung hoch gering Farbe Grauwerte reine Farben Mischt ne hohe S ttigung geringe S ttigung bunt amp monochrom 47 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung mt und HGKZ Studiengang Neue Medien eiert warme Farben O O kalte Farben Man kann das S ttigungsgesetz ges ttigte Farben sind wirksamer als Farben mit geringer S ttigung oder das Reinheitsgesetz reine Farben sind wirksamer als Mischfarben brigens als Varianten des Intensit tsgesetzes aus dem vorausgegangenen Abschnitt verstehen Weil Farben eine sehr starke Wirkung auf die menschliche Aufmerksamkeit haben sollten sie im Informationsdesign immer sparsam und mit System niemals einfach so eingesetzt werden Vor allem beim Umgang mit intensiven hoch ges ttigten Farben ist Vorsicht geboten Edward Tufte stellt in seinem sehr empfehlenswerten und sch nen
43. en werden variieren je nach Situation Art der Information usw F r den Zweck dieses Leitfadens macht es Sinn zwischen schwebender und fokussierter Aufmerksamkeit zu unterscheiden e Schwebende Aufmerksamkeit Diese liegt vor wenn eine breite Menge an Informationen parallel aufgenommen und relativ oberfl chlich verarbeitet werden Das ziellose Scannen im Internet ist ein ausgezeichnetes Beispiel daf r Die schwebende Aufmerksamkeit charakterisiert sich durch einen grossen Informationsdurchfluss und eine hohe Verarbeitungskapazit t Sie funktioniert relativ unsystematisch und das Bewusstsein klinkt sich aus und l sst die Dinge laufen Die St rke dieses Zustandes ist die Wahrnehmung und Analyse uneindeutiger oder auch ungew hnlicher Informationen Die schwebende Aufmerksamkeit kann auf alle Arten von Informationen reagieren seien es Symbole Text Musik und diese miteinander in Beziehung zu setzen e Fokussierte Aufmerksamkeit Die fokussierte Aufmerksamkeit ist hierzu komplement r Sie tritt auf wenn wir mit einem bestimmten Ziel nach einer Information suchen oder eine geordnete Handlung ausf hren Diese Art von Aufmerksamkeit kann nur wenige Informationen gleichzeitig behandeln diese aber tiefgehend analysieren Sie ist mit seriellen Denk und Handlungsprozessen gekoppelt also Vorg ngen bei denen es eine systematische Folge von Schritten gibt die zu einem bestimmten Ziel f hren Wenn man das Gef hl hat konzentriert zu sein dann
44. er Eigenschaften die das Web von anderen Kommunikationsarten Buch Zeitung TV Software unterscheidet Die Navigation spielt eine zentrale Rolle im Web Sie gibt an wo man sich befindet und wohin man navigieren kann Neben der Navigation bernimmt die Orientierung innerhalb einer Seite die Rolle der Landkarte Eine gute Navigation und Orientierung vermeidet das Auftreten des LiH Ph nomens Lost im Hyperroom Folgende Informationen sollten helfen das Auftreten desselben zu vermeiden e Wer ist der Verfasser bzw um welche Institution handelt es sich e Was ist der Inhalt der Seite e Wann wurde die Seite zum letzten Mal ge ndert Aktualit t der Informationen e Wo befindet man sich Die Url unique resource locator gibt immer den eindeutigen Standort file Namen an e Wohin kann ich gehen e Wo bin ich schon gewesen e Wie komme ich zur ck Eine gute Navigation zeichnet sich durch folgende Merkmale aus e Die Navigationselemente sind nicht dominant e Die Navigation funktioniert intuitiv e Die Navigationselemente sind verst ndlich und begreifbar e Die Begriffe der Navigationsleiste sind konsistent d h sie zieht sich einheitlich durch das Produkt e Die Informationen sind nach Benutzeranforderungen gegliedert e Die Navigation bietet dem Benutzer alternative Wege um zum Ziel zu gelangen e Bei komplexeren Seiten sind zus tzliche Funktionen vorhanden welche die Navigationsleiste unterst tzen beispielswe
45. er Spa vorbei weil ein solcher Informationswust mit dem punktgenauen Verfolgen eines Ziels berhaupt nicht vereinbar ist F r den gelockerten Denk und Wahrnehmungsstil der schwebenden Aufmerksamkeit ist es andererseits nicht weiter schlimm eine Seite mit 30 Links scannen zu m ssen 45 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiernene BEINN Leitfaden Interface Gestaltung und a COMA gt HGKZ Studiengang Neue Medien Ria ara Aufmerksamkeltsgesetze Intensit tsgesetze Ein erstes Merkmal auf das unsere Aufmerksamkeit reagiert ist ganz einfach Intensit t Das ist trivial Intensive Kontraste laute Ger usche helles Licht schnelle Bewegungen etc ziehen die Aufmerksamkeit automatisch an Wenn ein intensiver und ein weniger intensiver Reiz gleichzeitig wahrgenommen werden reagieren wir also in der Regel auf den intensiveren Reagieren bedeutet Wir wenden uns der Information zu fixieren sie z B mit dem Blick und w hlen sie als Gegenstand f r weiterf hrende Denkprozesse Im Web kann man Reagieren wahlweise mit Lesen oder Klicken bersetzen In der folgenden Tabelle sind einige Beispiele f r Intensit tsgesetze in der visuellen Wahrnehmung dargestellt Aufmerksamkeitswirkung hoch gering hoher Kontrast geringer Kontrast gro klein komplex k b4 einfach scharfe Konturen unscharfe Konturen Intensit tsgesetze gelten in allen Sinnesmodalit ten also akustisch taktil und optisch Sie
46. es kann nur der Fall sein wenn das gew nschte Objekt eine vern nftige Gr sse aufweist F r Schriften gilt im allgemeinen eine normale Gr sse von 12 Punkte sie darf auf keinen Fall kleiner als 10 Punkte sein e Sehsch rfe Diese bezeichnet die F higkeit eng benachbarte und kleinste Sehobjekte getrennt wahrnehmen zu k nnen Sie wird durch das Alter beeinflusst wobei die Sehsch rfe mit zunehmendem Alter abnimmt e Kontrast F r die Unterscheidung von Objekten ist die relative Leuchtdichte oder der Farbunterschied zwischen benachbarten Objekten ausschlaggebend e Farbkontrast Farben mit grosser spektraler Distanz sollten nicht kombiniert werden da sie eine unterschiedliche Akkomodation des Auges erfordern D h das Auge kann nicht oder nur mit entsprechender M he diese Farben gleichzeitig fokussieren z B blau und rot Zudem sind die Farbdetektoren nicht f r alle Farben gleich gut Das Auge besitzt nur wenige Blaudetektoren was die Fokussierung von benachbarten Blauen ebenfalls erschwert In der Regel werden Farbkontraste durch die Kombination einer Prim rfarbe rot gelb und blau mit der im Farbkreis gegen berliegenden Komplement rfarbe gr n orange oder violett oder Erg nzungsfarbe generiert rot gr n blau orange gelb violett e Aufmerksamkeitswinkel Der Mensch besitzt nur einen sehr begrenzten Aufmerksamkeitswinkel vor dem Bildschirm Dieser betr gt nur wenige Sehgrade ca 5cm breite Das umliegende Se
47. ften einer Datei wiedergeben da sie eine begrenzte Aufl sung aufweisen Jedermann hat sicherlich die schlechte Erfahrung machen m ssen dass ein am Bildschirm gut aussehendes Bild auf dem Papier weit weniger scharf resultierte Der Grund liegt in der h heren Aufl sung von Druckern im Vergleich zu den Bildschirmen welche einen Wert von 75 dpi besitzen Deswegen macht es auch keinen Sinn hochaufgel ste Bilder am Bildschirm abzubilden Heutzutage existieren zwei Formate welche die Bildschirmanforderungen und die bertragungsanforderungen bestens erf llen k nnen das JPEG und das GIF Format Im Folgenden werden die wichtigsten Eigenschaften dieser zwei Formate erl utert JPG JPEG Beim JPEG Kompressionsprozess gehen immer Daten verloren auch wenn das Auge es nicht wahrnimmt Die Kompressionsverh ltnisse schwanken in der Regel zwischen 10 1 und 100 1 in Abh ngigkeit der Qualit tsstufe JPG sollte man vor allem bei der Darstellung von Farbverl ufen Fotografien benutzen JPG Komprimierungen bis 20 sind nicht sichtbar H here Komprimierungen sollen fallspezifisch gehandhabt werden Aufgrund der schlechten Kontrastierung bei hoher Komprimierung eignen sich JPGs eher weniger f r Hintergrundbilder ausser sie beinhalten einen Farbverlauf Progressive JPEG diese werden mittels eines Rasters in aufeinanderfolgenden Schritten aufgebaut wodurch die Qualit t des Bildes stetig erh ht wird GIF Grafics Interchange Format Das GIF
48. g erlaubt eine Vorschau und dadurch wirkt die Ladezeit k rzer Anti Aliasing ist ein Algorithmus f r Pixelgrafiken um sichtbare Treppeneffekte an harten Kanten oder Farb berg ngen in Grafiken auszuzeichnen Transparenz in GIF Bildern kann eine Farbe als transparent bestimmt werden ein Browser wird alle Pixel dieser Farbe als durchsichtig behandeln und den Hintergrund durchscheinen lassen Originaldatei Tiff Format Kopie jpg Kopie gif Aus der Tabelle ist ersichtlich dass JPEG besser f r Farbverl ufe und GIF besser f r scharfe Kanten Schrift geeignet sind Datei Formate f r 3 dimensionale Objekte Im Gegensatz zu den 2 dimensionalen Objekten haben sich im digitalen Bereich noch keine Formate global durchgesetzt auch weil die Anforderungen komplexer und vielf ltiger sind Es gibt grunds tzlich ein Format das jedoch kein Optimum f r den Coma Konfigurator darstellt und verbreitet ist das VRML Virtual Reality Modeling Language 37 ETH ZC f r PRODUKTE ENTWICKLUNG Maszhinensiemente eet Leitfaden Interface Gestaltung u HGKZ Studiengang Neue Medien m Konsrukionsdehra TU Damme Pet De ing H iin In der folgenden Tabelle werden die grunds tzlichen Eigenschaften von g ngigen 3D Formaten VRML STL Meta EAI JT Cultt3D 3DML Java 3D stream Verbreitung Anwendung im Gross Gross Wenig Mittel Wenig keine Wenig Masc
49. gemein Zusammenfsssung Statistik Inhalt Anpassen Titel DEn Thema Keen ube Borngulehni Mauer Firma ETH Zurich Kategorie ZKfewitter Hyperlink PE bais Worley Toma M worschsugrafik speichenn Les lege Abbildung 18 Fenster mit Eingabefeldern Quelle MSWord 2000 Fenster Auf Fenstern werden verschiedene Aktionen angezeigt die zum gleichen Ziel f hren und im gleichen Kontext stehen Die Angabe von Informationen auf Fenstern soll nicht zu dicht und die Gr sse der Fenster nicht gr sser als die Bildschirmfl che sein Dabei soll besonders beachtet werden dass keine horizontalen Scroll bars angewendet werden Falls die Menge an gezeigten Informationen umfangreich ist werden entweder mehrere Fenster angewendet oder eine Vergr sserung der Fenstergr sse mit Informationen erm glicht Die Fenster sollen in der Regel eine fixe Gr sse aufweisen die nicht vom Benutzer ver ndert werden kann Die Informationen werden von oben links nach unten rechts erfasst Dementsprechend sind die wichtigsten Informationen in der oberen linken Ecke abgebildet Die Gestaltung der Objekte im Fenster kann horizontal oder vertikal erfolgen Bei der horizontalen Anordnung werden die wichtigen Informationen oben gezeigt und die weniger kritischen Informationen weiter unten Die Buttons zur Steuerung des Fensters befinden sich auf der rechten Seite und sind vertikal angeordnet Um den horizontalen Informationsfluss zu un
50. gens kein Zufall dass die mittlere Grafik den anderen auch sthetisch berlegen ist Asthetik hat viel mit gezielter und gelungener Aufmerksamkeitslenkung zu tun Ein Gebilde das unsere Aufmerksamkeit aus welchen Gr nden auch immer nicht gut anspricht also Wichtiges und Unwichtiges nicht unterscheidet wirkt eher disharmonisch 48 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung Dr je nn urg f K HGKZ Studiengang Neue Medien Fair glei COMA D Addition und Subtraktion von Effekten Bei der bisherigen Darstellung habe ich der Einfachheit halber etwas unterschlagen das f r ein Verstehen von Aufmerksamkeit sehr wesentlich ist Die aufgef hrten Gesetze sind nur dann uneingeschr nkt g ltig wenn man sie isoliert betrachtet Nun gilt aber dass bei der Wahrnehmung von Informationen seien es Texte Filme Bilder gesprochene Sprache oder Farben in der Regel mehrere Gesetze gleichzeitig wirken Das Ergebnis die Wirkung auf den die Betrachter in ergibt sich dann aus einer Summierung aller Aspekte die wahrnehmbar sind Einzelwirkungen k nnen sich addieren oder subtrahieren und in manchen F llen kann das eine Gesetz die Wirkung eines anderen aufheben oder sogar ins Gegenteil wenden Die folgenden Grafiken verdeutlichen wie man sich dies vorstellen kann Hier die Ausgangssituation Drei einfache grau ausgef llte Kreise Der rechte Kreis wird farblich hervorgehoben Die Farbe
51. hfeld dient nur der Aufmerksamkeitslenkung wobei hierin vor allem Ver nderungen wahrgenommen werden Da dieses Spektrum nicht weniger sensibel ist kommt es oft vor dass die Aufmerksamkeit des Benutzers durch gewisse zweitgradige Informationen auf dem Bildschirm abgelenkt wird Dies ist darauf zur ckzuf hren dass Bewegung und Ver nderung in der Hierarchie der Reize die h chste Stellung einnimmt und auf deren Reaktion unser Gehirn biologisch programmiert ist Animationen und blinkende Elemente st ren den Benutzer beim Lesen ohne dass dieser die M glichkeit hat sich deren Wirkung zu entziehen Die Folge dieser Ablenkung ist die Verringerung der Aufnahmef higkeit f r die Verarbeitung erstgradiger Informationen bzw die www kommdesign de fakten index html aus Ungerleider G L amp Mishkin L 1982 Two visual cortical systems Breitmeyer B G amp Ganz L 1976 Implications of Sustained and Transient Channels for Theories of Visual Pattern Masking Saccadic Supression and Information Processing E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung E EE und HGKZ Studiengang Neue Medien AR ae A i schnellere Auslastung des Gehirnes Im Anhang 1 ist ein detaillierter Artikel ber dieses Thema vorhanden e Informationsaufnahme Die Menge an Informationen welche von der Netzhaut wahrgenommen wird ist gewaltig im Vergleich zur Verarbeitungs und Speicherkapazit t Damit die
52. hinenbau Direkter Export aus CAD Weit Weit z T sollte Je nach ber 3d Keine Nicht verbreitet verbreitet m glich sein Anbieter Studio Max bekannt m glich oder ber 3d m glich Studio Max Wirtschaftlichkeit Installation Gratis Auf Server KOsten Gratis Kosten Benutzung Gratis Betriebliche Kosten Keine Lizenz n tig Lizenz n tig Lizenz n tig Lizenz n tig Keine Offenheit Offenes Format Ja Ja beschr nkt nein beschr nkt beschr nkt Ja VRML ist importierbar Programmierschnittstelle ok Nein beschr nkt Ja beschr nkt beschr nkt ok Einflussnahme aufs Ja Nein beschr nkt Nein Ja Datenmodell Renderingm glichkeiten Lichtmodell Shading Ok Ok Ok Ok Ok Shadowing Schattenwurf Nicht Nein Ok Ok Nicht m glich m glich Texturen Ok Nein Ok Ok Internet Plug In n tig ja Nein weil Ja ja ja Ja JM nicht automatisch verbreitet Filegr sse gross mittel klein klein klein mittel Gross mit VRML Bin rformat Textformat Text Beide Text Komprimierbarkeit M glich aber M glich nicht verbreitet 8 Java 3D ist kein richtiges Format sondern eine Programmierumgebung 7 STL ist vor allem im Rapid Prototyping Bereich verbreitet 30 Java Virtual Machine 38 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung E EE und N f k HGKZ Studiengang Neue Medien a n E OMA 31 Normen Die wichtigste und volls
53. hlt weil es stark vernetzt ist und weil das e Commerce in Amerika verbreiteter ist als in Europa Aus dem Vergleich k nnen wertvolle Informationen ber m gliche Ver nderungen der Kaufkriterien in Europa eruiert werden 14 Deutsche Post Internet Marktplatz Marketing Hansestrasse 115 51149 K ln E Mail marketing evita de 14 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung ee und REKT Studiengang Neue Medien EE Kaufkriterien Bezahlungssicherheit Angemessener Preis Reklamationsm glichkeit EWert EU Flexible Lieferung E Wert Kalif Produktinformationen Einkaufen zu jeder Zeit Angebotsvielfalt Aus dieser Studie stellt sich heraus dass sich diejenigen Anbieter breite K uferschichten erschliessen werden welche die W nsche der Verbraucher ernst nehmen und nicht auf bew hrte L sungen setzen Auch ungew hnliche Produkte haben im Netz eine reelle Chance wenn sie nur zielgruppengem ss pr sentiert werden Im speziellen B2B Bereich werden folgende Kriterien sowohl vom Verkauf als auch von der Marketing Abteilung als wichtig betrachtet 0 50 100 150 Schnelligkeit beim Laden Sicherheit der Daten bertragung D Bedeutung f r das Webseite in Marketing Landessprache m Bedeutung f r den Bildliche Einkauf Darstellung der Produkte Bevorzugte Bedienung der Stammkunden Im folgenden D
54. i a A i gedruckte Dokument immer noch die vom Benutzer bevorzugte Weise des Lesens Die Texte auf dem Bildschirm sollen einen Titel haben kurz und pr gnant sein Bei l ngeren Texten sollte eine kurze Zusammenfassung unter dem Titel einen ersten Einblick ber den Inhalt verschaffen Zudem kann eine pdf Version eines l ngeren Dokumentes den meist gew nschten Druckvorgang einleiten und in einer Browser unabh ngigen Verfassung ver ffentlicht werden e Leserichtung Die Leserichtung erfolgt von links nach rechts bzw von oben nach unten Dieser Tatsache sollte Rechnung getragen werden Es folgt nicht nur die Leseart dieser Richtung sondern es wird auch die zeitliche Achse damit verkn pft Die Zukunft liegt sozusagen rechts e Lesbare Farbkombinationen Die am besten lesbaren Farbkombinationen zwischen Text und Hintergrund sind schwarz auf wei wei auf schwarz oder schwarz auf gelb e Gross und Kleinbuchstaben Grossbuchstaben werden deutlich langsamer verarbeitet als Texte mit Gross und Kleinbuchstaben Titel k nnen ausschlie lich Grossbuchstaben aufweisen jedoch sollte bei Texten die gew hnliche Schreibweise angewendet werden Ged chtnis Grunds tzlich werden zwei Arten von Ged chtnissystemen unterschieden das prozedurale und das deklarative Ged chtnis Ersteres entspricht dem Verhaltensged chtnis Dieses Ged chtnis ist f r die Wiedergabe von Fertigkeiten und Gewohnheiten Bewegungsabfolgen und Regeln zust ndig Proz
55. iagramm werden die Prognosen f r den Umsatzwachstum im B2B per Branche dargestellt Dargestellt sind nur Branchen die direkt mit dem Maschinenbau Automobilbau in 15 Quelle Forit GmbH Frankfurt a M 15 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinene Zur EI Leitfaden Interface Gestaltung elt EE ee H REKT Studiengang Neue Medien Korestkchoresichwe EN Verbindung stehen oder eine Vorreiterrolle im e Commerce Automobilbau Elektronikindustrie einnehmen B2B E Commerce Ums tze nach Branchen in Deutschland in Mrd DM o Maschinenbau 50 m Fahrzeugbau D 5 Elektronik Handel m Elektronik Handel 2S 5 Fahrzeugbau oi e N Maschinenbau No N Die durchschnittlich erwartete Preisreduktion bei Lieferanten durch K ufe ber das Internet betr gt in Deutschland 10 2 16 Quelle Forit GmbH Frankfurt 2000 16 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung med und HGKZ Studiengang Neue Medien Rra COMA Interface Durch die sich immer deutlicher abzeichnende Offenheit der Computer Systeme wird auch der Ruf nach einer weltweiten Vereinheitlichung der Mensch Rechner Schnittstellen und Interaktion lauter So sind in letzter Zeit Normen und Richtlinien entwickelt worden die dieser Forderung nachkommen Dar ber hinaus gibt es eine ganze Reihe von Bestrebungen seitens der Hersteller ihre Produkte benutzergerecht nach bestimmten Grunds tzen und
56. ichkeiten Ist das f r mich bersicht ber die wertvolle relevante Fortgeschrittene Interesse interessant und Bereiche des Informationen n tzlich Produktes Was gibt es hier alles Wo finde ich Suchinformationen Schneller Zugriff auf das Gezieltes Wo gibt es Index Gesuchte Experte Suchen wertvolle Informationen zum Thema Kundensprache Fachbegriffe Ein weiterer Punkt der bei der Applikationsgestaltung von Bedeutung ist ist die Wahl der Fachbegriffe f r die Objektbenennung Da das Zielpublikum und dessen individuelle Fachkenntnisse meistens nicht bekannt sind ist es von Vorteil m glichst einfache und allgemeinverst ndliche Begriffe zu verwenden Das ist haupts chlich eine Aufgabe der Verkauf und Marketing Abteilung jeder Firma und ist insbesondere f r Internetapplikationen ein nicht zu untersch tzendes Faktor das eine zentrale Rolle bei der Softwareakzeptanz spielt 13 Stary C 1996 Interaktive Systeme Software Entwicklung und Software Ergonomie S 44ff 13 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung meh En und ri F KI HGKI Studiengang Neue Medien Faaker Benutzer und Arbeitsumgebung Anforderungen an E commerce Seiten im Bereich B2B und B2C Die Umgebung in welcher der Benutzer interagiert ist ebenso wichtig wie die direkte Interaktion Mensch Maschine Da der Konfigurator firmenintern oder extern im Inter oder im
57. ie Aufmerksamkeit um Die Aufmerksamkeit wird teilweise von Prozessen gesteuert die nicht im Bewusstseinbereich liegen Die Ausl ser solcher Reize in der automatischen Analyse sind Gewohnheiten die sich nicht 10 in Anlehnung an www kommdesign de texte T Wirth hat auf seinen Seiten eine pr gnante und praxisorientierte Vorstellung der Aufmerksamkeit im Zusammenhang mit der Webgestaltung verf gbar gemacht ETHZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung m eaa a ng und HGKZ Studiengang Neue Medien i a i beliebig ver ndern und steuern lassen Im Internet ist das nicht anders wobei Gewohnheiten hier aus unterschiedlichen Zusammenh ngen stammen k nnen e Biologisch programmierte Gewohnheiten Ansprechen der Aufmerksamkeit durch Bewegungen oder intensive Farben e Gelernte Gewohnheiten Blickreihenfolge von links oben nach rechts unten e Internetspezifische Gewohnheiten das Querlesen Alle diese Komponenten wirken zusammen und bestimmen letztlich dar ber worauf sich die Aufmerksamkeit der Benutzer richtet Hieraus ergibt sich eine erste enorm wichtige Grundregel Je einfacher die Struktur der Seite ist je weniger Informationen gleichzeitig dargeboten werden und je deutlicher diese visuell artikuliert sind desto eher kann man die Aufmerksamkeit der Benutzer steuern und kontrollieren Aufmerksamkeit ist nicht immer gleich Aufmerksamkeit Die Art und Weise wie Informationen wahrgenomm
58. ie es an das Gehirn liefert Es scannt aber auch die Umwelt permanent auf Ver nderungen unterbricht gegebenenfalls laufende Handlungen und lenkt die Aufmerksamkeit und die Blickbewegungen entsprechend um Die Logik die hinter diesem sog Orientierungsreflex steckt ist ebenso einfach wie bestechend Was sich ver ndert bzw bewegt k nnte ja a uns fressen oder b uns verletzen oder aber c von uns gefressen werden Also schauen wir vorsichtshalber erst einmal nach bevor wir uns weiter mit unseren Handlungszielen besch ftigen Dieser biologischen Funktion entsprechend ist das zeitliche Aufl sungsverm gen des Systems also die F higkeit schnelle Bewegungen oder kurzdauernde Ver nderungen wahrzunehmen besonders hoch sehr viel gr sser als die des zentralen Da andererseits Formen und Farben f r seine Funktionen keine wesentliche Rolle spielen ist die Sehsch rfe und die Farbempfindlichkeit im peripheren Gesichtsfeld gering Sehr wichtig ist noch dass sich dieser Reflex berhaupt nicht f r Inhalte interessiert er wird durch alle Ver nderungen oder Bewegungen ausgel st sei es durch eine ins Blickfeld krabbelnde Spinne durch einen umfallenden Stuhl oder eben durch einen Ticker in der Statuszeile eines I ze iral 32 www kommdesign de fakten index html 42 ETH CT f r PRODUKTE ENTWICKLUNG Leitfaden Interface Gestaltung und FE HGKI Studiengang Neue Medien Browsers In der folgenden Tabelle sind die wesent
59. inneres Bild der Homepage bzw der Applikation bilden kann Nachdem das grobe Layout der Seitenvorlage bestimmt worden ist erfolgt die Aufteilung der Inhalte auf die Seiten Folgende Bestimmungen gelten im Allgemeinen f r die Seitenanordnung e Informationen k nnen auf kurzen Seiten schneller gefunden und behalten werden e Das Scrollen kann unter Umst nden Probleme bez glich der Orientierung und Aufnahmebereitschaft hervorrufen e Gleichzeitig ist es beim Scrollen tendenziell schwieriger Textstellen zu finden Tags k nnen dabei behilflich sein e Bei k rzeren Seiten ist der Wartungsaufwand kleiner und die Ladezeit geringer e Sofern eine Aufspaltung nicht m glich oder n tig ist sollen in der Kopfleiste l ngerer Seiten ein berblick der angebotenen Informationen mit Spr ngen zu den jeweiligen Stellen angeboten werden e Interessantes und Wichtiges sollte im oberen Teil der Seite ersichtlich sein e Das horizontale Scrollen sollte unbedingt vermieden werden da es sehr st rend ist e Sind Informationen auf mehrere Seiten verteilt sollte ein Link zu einem druckf higen Objekt mit dem vollst ndigen Inhalt z B pdf File vorhanden sein 20 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung meh En und E e e 7 REI Studiengang Neue Medien An akesenpastespecetegemee Navigation und Orientierung Das Besuchen einzelner nicht sequentiell angeordneter Seiten ist eine d
60. ise bersichten Landkarten Hyperbolic Trees oder Suchfunktionen Eine gute Orientierung zeichnet sich durch folgende Merkmale aus e Der Kopf der Seite gibt Auskunft ber die Informationen die auf der Seite zu finden sind e Die Seite hat einen eindeutigen und wiedererkennbaren Titel e Die lokale Position in der Hierarchie muss angezeigt werden Nach Nygren kann die Orientierung und die Navigation erheblich unterst tzt werden wenn die entsprechenden Bausteine in Spalten und nicht in Zeilen angeordnet werden Zudem sollten die Bausteine nach ihrem Inhalt und nicht alphabetisch gruppiert werden sowie immer sichtbar sein D h Submen s sollten immer selektierbar sein und nicht erst wenn der Cursor auf dem Hauptbegriff ist wird das entsprechende Men eingeblendet Listen von Textlinks sind am besten lesbar wenn diese mit Aufz hlungszeichen aufgelistet werden 20 Nygren E Allard A 1996 1 Bernard M 1999 7 Spain K 1999 21 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung meh En und E e e 7 REI Studiengang Neue Medien An akesenpasteepcetegemee Am Schluss dieses Abschnittes soll auf die Frage eingegangen werden wie Benutzer im Internet schauen und was sie genau betrachten Einige hilfsreiche Informationen werden vom Projekt Merian geliefert Aus ersten Ergebnissen kann gesagt werden dass Internet User sich sehr stark auf die Orientierung Navigation und auf die
61. ist man in einem Zustand der fokussierten Aufmerksamkeit Einige Beispiele wie diese Arten von Aufmerksamkeiten im Web vorkommen k nnen werden im Anhang vorgestellt Psychologische Faktoren Neben den physiologischen Faktoren spielen eine Menge psychologischer Faktoren eine Rolle In diesem Abschnitt wird jedoch nicht gross auf das Thema eingegangen weil dieser Aspekt sehr vom einzelnen Benutzer abh ngt und den Rahmen und die Bedeutung dieses Skriptes sprengen w rde Trotzdem sollte zum Thema folgendes bemerkt werden e Scheinbar besteht ein enger Zusammenhang zwischen der Beurteilung von sthetik und der Benutzerfreundlichkeit von Benutzerschnittstellen Ist sthetik ergonomisch oder macht Ergonomie sthetisch 10 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung elt EE AE gea Krsuk c ra x HGRZ Studiengang Neue Medien Henker feige e Der erste Eindruck ist massgebend f r die Meinungsbildung Danach wird es schwer diese zu ndern Ein ber hmter englischsprachiger Designer hat sich folgendermassen sinnverwandt ausgedr ckt You Cant impress twice Kulturelle Faktoren Einige Einflussfaktoren sind auf kulturelle Gegebenheiten zur ckzuf hren und m ssen bei international aufgeschalteten Seiten oder Applikationen ber cksichtigt werden Bei der Gestaltung soll beachtet werden dass Differenzen bei der Benutzung von Farben Graphiken Kalendarien Texten und Zeitangaben be
62. ist zwar warm allerdings wenig intensiv Nun kommt zur Farbe noch eine hohe Farbs ttigung Der Hervorhebungseffekt ist pr gnanter Der Hervorhebungseffekt ist noch weiter verst rkt Jetzt addieren sich drei Merkmale Farbe hohe S ttigung Gr e Das Beispiel zeigt wie sich verschiedene Merkmale bzw Prinzipien addieren Gutes Informationsdesign setzt nicht mehr Hervorhebungstechniken ein als erforderlich und m glichst nicht mehrere Techniken gleichzeitig um die gleiche Wirkung zu erzielen Starke Kontraste intensive Farben Gr e und Buntheit sollten also in der Regel nicht gleichzeitig verwendet werden Das Ausnahmegesetz Aber die Lage ist noch komplexer Nehmen wir z B einmal das Intensit tsgesetz In einer Variante besagt es dass starke Kontraste Helligkeitsunterschiede die Aufmerksamkeit st rker anziehen als geringe Kontraste Die folgende Abbildung zeigt dass dieses einfache Prinzip stimmt Das dunkle Quadrat hat einen h heren Kontrast als die umgebenden hellen Quadrate deshalb k nnen wir das Intensit tsgesetz anwenden um zu erkl ren dass es besonders hervorsticht 49 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung ee und HGKZ Studiengang Neue Medien EE COMA Ki ES Und diese Anordnung Sie will aus der Perspektive des Intensit tsgesetzes nicht mehr so recht funktionieren Das helle Quadrat ES zieht unsere Aufmerksamkeit an ha
63. kal plaziert werden Es sollen nicht mehr als 10 Optionen angezeigt werden ansonsten sollen Listenfelder verwendet werden Die Reihenfolge soll der Reihe nach eindeutig sein z B nach Gebrauchsfrequenz nach Logik zeitliche spezifische nach Alphabet Es soll kein Befehl implementiert werden der alle Optionen gleichzeitig ausw hlt Open E zjx Redhiachrabirgund G am ak Asderungen eroan Senutzennfornatioren Kerpsibil t Spsiehereel l r Dateien Ara ges 1 panbete Dmeken zeiten En T pikaa Hilary Feier vg Feecbacknik bound v Feedback nt anmai Konverkerung beim be en bert hgen T Aubomalisdhe Werkn geungen bein Cien akbualgknen w bechricht zk Ange senden Lebo abti offre Dateien E Entra Maierfset Mile Pio ale Standard f r HTPIL Sptionen versenden weboel ursen l Hghiptren CSC Abbildung 13 Beispiel eines Fensters mit Check Boxes Listenfenster Listenfenster bestehen aus der Kombination zweier Elemente einem Fenster f r die Selektion und Eintragung neuer Eintr ge und einer Scroll bar um unsichtbare Eintr ge einzusehen Listenfenster sollen vor allem verwendet werden wenn eine grosse Anzahl an Optionen zur Auswahl steht Listenfenster sollen bei dynamischen Inhalten bevorzugt werden da die Inhalte besser angepasst werden k nnen In einem Fenster sollen 3 bis 8 Eintr ge gleichzeitig angezeigt werden Falls mehr Eintr ge zur Auswahl stehen soll das Fenster eine Scroll bar
64. lichen Merkmale der beiden Systeme noch einmal im berblick dargestellt 43 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung meh En und i Konsin ao N HGKZ Studiengang Neue Medien An karriere Praktische Beispiele zur Aufmerksamkeit 1 Beispiel Es gibt Personen die eine Site mit einem festen Ziel erreichen z B m chten sie schnell via E Mail mit einer zust ndigen Person Kontakt aufnehmen Diese befinden sich in einem Zustand fokussierter Aufmerksamkeit und sie haben nat rlich und v llig zu Recht nur ihr eigenes Anliegen im Sinn Eine ideale Site bietet das Gesuchte nun gut sichtbar an und stellt innerhalb eines Mausklicks ein Formular zur Verf gung mit dessen Hilfe die Benutzer innen ihre Botschaft formulieren und absenden k nnen Sie vermeidet dabei allzuviel visuelles Tamtam da dieses nicht nur ablenkt sondern auch der sprachlichen Orientierung der fokussierten Aufmerksamkeit zuwiderl uft Eine schlechte Website l dt ihr verdutztes Publikum zuallererst dazu ein zwischen einer Flash animierten einer JAVA oder einer plain HTML Version zu w hlen packt das E Mail Link hinter eine coole Animation die wie ein Banner aussieht verlangt von den Benutzer innen eine Selbstklassifikation als Interessent Kunde Jobsuchender oder Lieferant brennt noch ein kleines Feuerwerk ab und fragt dann ob man Infomaterial bestellen m chte Schlecht ist das deshalb weil ein solche
65. llig und perfekt miteinander dass wir sie nicht ohne weiteres voneinander unterscheiden k nnen Zum wo Das eine System das wir zentrales System nennen ist f r die Stelle der Netzhaut zust ndig welche unser Blick Dinge fixiert was zugleich der Punkt mit der h chsten Sehsch frfe ist Bei einem Computermonitor w re das eine Zone etwa von der Gr sse eines Markst cks Beim Lesen springen wir mit diesem Fixationspunkt z B in mehreren Schritten ber eine Textzeile und picken uns dabei soviel Information heraus in der Absicht mehr oder weniger den Sinn des Ganzen zu verstehen Das andere periphere System ist sozusagen f r den Rest zust ndig also f r die Zone die vom Fixationspunkt bis zum ussersten Rand unseres Gesichtsfeldes reicht Auf der folgenden Grafik ist dies schematisch dargestellt te Zum wie und warum Das zentrale System fokussiert Informationen nimmt Dinge detailliert wahr analysiert sie inhaltlich und schickt die Ergebnisse dann gewissermassen an En E omg unser Bewusstsein Dieser Funktion entsprechend ist sein r umliches Aufl sungsverm gen also die F higkeit Gesehenes in Feindetails aufzul sen sehr hoch Gleichzeitig ist die Farbempfindlichkeit der Netzhaut in der Region um den Fixationspunkt maximal und nimmt nach aussen rasch ab Das periphere System hat andere nicht minder wichtige Funktionen Zun chst beruht die Steuerung der Blickbewegungen zu einem guten Teil auf den Informationen d
66. mentierung oder Umsetzung und der Verifizierung die wieder eine Analysephase einf hren kann Diese vier Phasen werden den Entwicklungsprozess von Coma begleiten und werden mehrmals durchlaufen werden In diesem Sinne ist dieser Leitfaden eine Bestandesaufnahme heutiger Interfacestandards und ist eindeutig in der Analysephase zu plazieren In Zukunft sollten die gewonnenen Erfahrungen mit dem Interface ebenfalls einfliessen und einen Katalog mit guten und schlechten Beispielen bilden Sp ter sollen auch Berichte ber die softergonomische Gestaltung von Coma erscheinen Der onthologische Ansatz beschreibt die Interaktion welche zwischen einem Objekt deren Aufgabe und dem Menschen besteht Diese wiederspiegelt sich im sogenannten Interface Das Interface sollte den Benutzer in die Lage versetzen das Objekt an sich zu erkennen und die Aufgabe die ausgef hrt werden kann zu er rtern Das gilt nicht nur f r das Design von Alltagsobjekten sondern auch im digitalen Bereich Das Programminterface erlaubt dem Anwender die Ausf hrung von verschiedenen Befehlen die schliesslich zur Erf llung einer Aufgabe f hren sollen Das Interface spielt hier eine noch zentralere Rolle es ist das look and feel eines Rechners bzw einer Software Die Aufgabe beh lt im digitalen Modell den gleichen Wert und die Software bleibt im Gegensatz zum Werkzeug das konkrete Objekt im Hintergrund und ist f r den gew hnlichen Benutzer nicht sichtbar Die Kombination des Was
67. n gibt es gewisse benutzerspezifische Anforderungen die zu ber cksichtigen sind Diese betreffen vor allem das Vorwissen und die Erfahrungen des Benutzers die er sowohl mit dem Konfigurator als auch mit dem Produkt gesammelt hat Handlungsweise der Benutzer Bei der Interaktion mit einer Software baut sich der Mensch eine interne Welt auf welche die Abbildung der digitalen Welt darstellt Je besser und klarer die abzubildende Welt ist desto einfacher wird der User mit dem System interagieren k nnen Einige typische Symptome einer gest rten Interaktion manifestieren sich wie folgt e eingeschr nkte Produktivit t e schlechte Arbeitsqualit t e Effizienzl cken bei der Ausf hrung von bestimmten Aufgaben e m hevolle Verwaltung und bersicht der Aufgaben Bei der Entwicklung von interaktiven Systemen ist zu ber cksichtigen dass der Benutzer nicht in Operationen sondern in Zielen handelt und denkt Steht er vor einer Aufgabe sind ihm die Werkzeuge Operationen gleichg ltig das einzige was z hlt ist das Ziel Operationen die nicht direkt zum Ziel f hren erfordern einen erheblichen Lernaufwand und werden schnell vergessen Ein wichtiger Aspekt f r den Aufbau einer internen Welt sind Konzepte Diese erlauben eine 11 J Preece ed 1993 A guide to usability human factors in computing 1993 12 H Kr ger provisorische Unterlagen zur Vorlesung Mensch Computer Interaktion WS98 99 S 3 12 ETH ZC f r PRO
68. n Alarmwirkung So genannte Warnf rbungen sind ein weiterer CAUTION Eye catcher der sogar in der Kommunikation READ DIRECTIONS zwischen verschiedenen Tierarten funktioniert BEFORE Gef hrliche Tiere sind oft extrem gef rbt z B halten sich Wespen mit ihrer schwarz gelben Warnf rbung Fressfeinde vom Leib Dementsprechend beliebt ist die Kombination schwarz gelb wenn Warnhinweise gestaltet werden OPERATING 52 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschineneiemenee BENN Leitfaden Interface Gestaltung rn und a COMA gt RER Studiengang Neue Medien Eu or a Das Kindchenschema ein rundes und verk rztes Kopfprofil mit grossen Augen und einer nach vorne gew lbten Stirn ist ebenfalls ein angeborenes Reizschema auf das wir unwillk rlich positiv reagieren Abbildung aus Eibl Eibelfeld 1980 Grundri der vergleichenden Verhaltensforschung Und nat rlich d rfen in einer Aufstellung von Eye catchern sexuelle Reize nicht fehlen Dieses Bild verf hrt z B zur Betrachtung einer Anzeige mit deren eyecatchender Hilfe Parf m verkauft werden soll Bei solchen Anzeigen wird angesichts des erotischen Geschehens das Produkt leicht zur Nebensache Eye catcher sind nicht irgendwelche beliebigen Informationen oder Techniken der Darstellung bzw Aufmerksamkeitslenkung sie sind quasi Waffen Diese Analogie klingt zwar eigentlich kriegerischer als mir lieb ist sie f hrt jedoch direkt zur richtigen Konsequenz Mit
69. nd kommunizieren mit Multimedia Springer Verlag Berlin Heidelberg New York u a 57 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiernene BEINN Leitfaden Interface Gestaltung Cen E AE und KI COMA gt i HGKI Studiengang Neue Medien Konstukionsiehre TU Diesmal Pret De Ing H hoier Blau Himmel Meer Unendlichkeit Weite Harmonie Intuition Ausgeglichenheit Glaubw rdigkeit K hle Passivit t Bewegungsarmut Schwarz Eleganz W rde Schwere Nacht Geheimnis Undurchdringlichkeit Schlechtes Negation Tod Trauer Melanchonie Grau Neutralit t N chternheit Theorie Nachdenklichkeit Eleganz Sachlichkeit Technologie Langweile Trostlosigkeit Elend Weiss Reinheit Klarheit Ordnung Vollkommenheit Authentizit t 58 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG ZZ re EI Leitfaden Interface Gestaltung DK zz ey uw REKT Studiengang Neue Medien ierra COMA gt Quellen Literatur Bernard M 1999 Sitemap Design Alphabetical or Cathegorical Usability News online http wsupsy psy twsu edu surl usabilitynews 1S sitemap htm Bernard M Mills M 2000 So What is the Most Legible Type Size and Format of Common Fonts to Use for Websides Usability News online http wsupsy psy twsu edu surl usabilitynews 2S font htm Bonsiepe Gui 1993 Dall oggetto all interfaccia mutazioni del design Feltrinelli editore Milano 1995 Breitmeyer B G Ganz L 1976 Implications of Sustaine
70. niger um formale Reizmerkmale als um Inhalte Es beruht darauf dass wir st ndig bestimmte Erwartungen an unsere Umwelt herantragen man k nnte auch etwas wissenschaftlicher von Hypothesen sprechen Wir erwarten dass sich alles so verh lt wie wir es gewohnt sind Dies ist eine Denkweise die Ressourcen spart Wenn Erwartungen verletzt werden bzw Hypothesen nicht eintreffen wundern wir uns Dinge die ungew hnlich erstaunlich extrem unerwartet absurd widerspr chlich eigenartig exotisch sind haben deshalb einen hohen Aufmerksamkeitswert sie sind interessant weil sie eine Dissonanz erzeugen und dadurch unser Denken herausfordern Es gibt keine blauen Kakteen deshalb hat das Bild eines blauen S f Kaktus einen h heren Aufmerksamkeitswert im Vergleich zu einem ganz gew hnlichen gr nen Exemplar oder haben Sie z B schon einmal eine lila Kuh gesehen 50 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung b s E und a COMA gt HGKZ Studiengang Neue Medien kreie T rme sind in der Regel gerade und eben deshalb ist der schiefe Turm von Pisa etwas Besonderes und interessanter als ein normaler Turm wie etwa der hier rechts zu sehende Der gerade Turm von Pisa w re immer noch sch n aber nicht so bekannt Diesen Gepardenelefant habe ich in einer Stellenanzeige des Computerherstellers DELL entdeckt Er ist ein besonders sch nes Beispiel f r die Aufmerksamk
71. nleitende Bemerkung Dieser Leitfaden ist f r die Entwickler der Interfaces von Coma als Nachschlagewerk gedacht Es handelt sich nicht um ein vollst ndiges Benutzerhandbuch ber Interfaceaspekte der Softwaregestaltung f r Entwickler sondern um einen Leitfaden der diejenigen Aspekte des User Interfaces beleuchtet welche im Projekt Coma relevant sind Vorgehensweise In einer ersten Phase der Analyse der Gesamtproblematik wird eruiert welche Faktoren wann und in welchem Masse einen Einfluss auf das Gesamtsystem aus ben Wie aus den Fragestellungen zu entnehmen ist ist eine inhaltliche was und in welchem Masse und eine zeitliche wann Komponente zu ber cksichtigen Um diesen Umst nden gerecht zu werden sind zwei Modelle f r die Beschreibung der Problematik herangezogen worden der onthologische Ansatz f r die Beschreibung des zu betrachtenden Systems in diesem Fall die Interaktion Benutzer Konfigurator und das Wasserfallmodell zur Beschreibung des Entwicklungsprozesses Die Methodik des vier Phasen Modells auch Wasserfallmodell genannt eignet sich besonders gut f r die Entwicklung von neuen Softwaren Denn der Entwicklungsprozess wird nicht stur in Phasen aufgeteilt sondern als geschlossene Sequenz von Aktivit ten dargestellt welche je nach Bedarf mehrmals durchlaufen werden k nnen Dies entspricht auch eher der Realit t der Softwareentwicklung Das Wasserfallmodell besteht aus der Analysephase der Konzeptphase der Imple
72. oll genug Platz zwischen den Auswahlkriterien und den Buttons im Fenster vorhanden sein Buttons sollen miteinander gruppiert werden wobei Gruppierungskriterien hnliche Funktionen oder Standard Funktionen siehe Tabelle sein k nnen Funktion Beschreibung OK Die Ver nderungen werden ausgef hrt und das Fenster falls vorhanden wird geschlossen Cancel Die Ver nderungen werden nicht ausgef hrt und das Fenster falls vorhanden wird geschlossen Close Schliesst das Fenster falls die nderungen nicht gel scht werden k nnen Reset Die Angaben werden gel scht und die default Werte wieder angezeigt Apply Die nderungen werden ausgef hrt die default Werte werden angezeigt und das Fenster bleibt offen Submit Die nderungen werden ausgef hrt die neuen Werte werden angezeigt und das Fenster bleibt offen Help Es wird das online Help Dokument aufgemacht Buttons die eine lokale Funktion aus ben sollen eindeutig plaziert werden und zwar in der N he des auszuf hrenden Parameters Die Reihenfolge von Buttons soll konsistent sein an erster Stelle sind ausf hrende Buttons zu plazieren dann l schende Buttons und schlie lich fenster spezifische Buttons Die umgekehrte Reihenfolge ist ebenfalls m glich e Radio Buttons Radio Buttons werden dann benutzt wenn aus einer Liste von Auswahlm glichkeiten genau 25 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente
73. ommdesign de galerie links kannsein htm 34 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Masctinersiemente Leitfaden Interface Gestaltung ell BE E FL EL BE i HGKZ Studiengang Neue Medien kan jour gem TU fee n Pei De ka H broter Flugreisen Europa amp ein Link Family All Inclusive D Partner L k Reiseb ros r l n Abbildung 23 Beispiel einer inkonsistenten Darstellung eines Links HotNews Hiring Hardware Software VadesMac Education Creative SmallBiz Developer Abbildung 24 gutes und eindeutiges Beispiel von Apple 35 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung meh En und ri F KI HGKI Studiengang Neue Medien Ea PAAA Ea riiin Technische Aspekte der Interaktionsgestaltung In der Gestaltung von Interaktionsdialogen werden verschiedene Hilfsmittel verwendet welche die Interaktion unterst tzen Wenn man davon ausgeht dass Text als 1 dimensionales Objekt die Basis jeder Interaktion ist dann k nnen 2 dimensionale Objekte in Form von Zeichnungen Bildern Skizzen oder Photos in verschiedenen Situationen behilflich sein sei es als direkte Unterst tzung f r die zu l sende Aufgabe oder aber auch als Metapher oder Icon Eine weitere Unterst tzungsm glichkeit sind die 3 dimensionalen Objekte in Form von Modellen innerhalb derer navigiert werden kann Datei Formate f r 2 dimensionale Objekte Bildschirme k nnen nur bedingt die Bildeigenscha
74. ren kann Spin boxes Spin Boxes werden verwendet um eine logische Sequenz darzustellen Bei der Anwendung von Spin Boxes soll wenn immer sinnvoll ein Eintragungsfeld hinzugef gt werden sodass der Benutzer direkt zum gew nschten Eintrag springen kann mine Einzug Links lo mm Rechts jo mm ES Abstand Vor 0 pt Nach 0 pt Abbildung 15 Beispiel von Spinboxes in MSWord2000 28 ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemene Gg Leitfaden Interface Gestaltung wmE ee und a COMA gt D Korstru ch 9 HGKI Studiengang Neue Medien Eaa AEAT OS ES e Balken Balken werden vor allem bei stetig steigenden oder sinkenden Werten eingesetzt Diese k nnen sehr effektiv werden wenn das numerische Resultat angezeigt wird und das gleiche Feld einen manuellen Eintrag erlaubt falls der User den genauen Wert kennt Gaussian Blur Cancel V Preview 100 D Radius pixels Ee Abbildung 16 Beispiel eines Balkens von Adobe Photoshop 5 5 Eine Variante dieser Balken sind die Indikatoren f r das Fortschreiten des Prozesses Diese geben an wieviel Prozent vom Gesamtprozess schon durchgef hrt worden sind Das ist an sich kein Interaktions sondern nur ein Informationselement das aber bei l ngeren Operationen sehr n tzlich sein kann Abbildung 17 Der Fortschreitungsbalken am unteren Rand des IE5 0 e Tabs Kartei Diese Art von Interaktionselementen e
75. rlauben eine mehrfache Unterteilung in einem Fenster Die Unterfenster k nnen sowohl Text als auch Grafiken beinhalten Der Inhalt in einem dieser Fenster soll nicht zu artikuliert sein da sonst das Interface zu komplex wird Die Bezeichnungen der einzelnen Karteien sollen ber alle Felder die gleiche Gr e aufweisen wie dies auch f r andere Titel und Bezeichnungen der Fall sein soll Ein Beispiel solcher Tabs ist in der Abbildung 13 Beispiel eines Fensters mit Check Boxes zu sehen e Eingabefelder Eingabefelder geh ren zu den wichtigsten Interaktionsobjekten im User Interface Die L nge eines Eingabefeldes verweist auf die L nge der einzutragenden Informationen Es soll beachtet werden dass so wenig wie m glich unterschiedliche L ngen angezeigt werden sollen Eingabefelder sollen immer umrahmt sein falls Eintr ge eingetippt oder ausgew hlt werden m ssen Hingegen sollen angezeigte Daten nicht eingerahmt werden Tempor r ausgeschaltete Eingabefelder sollen hellgrau umrahmt sein 29 E H ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung EE und REKT Studiengang Neue Medien EE Die Liste von Eingabefeldern ist links ausgerichtet so auch der zutreffende Text der sich ber oder vor dem Eingabefeld befindet und von einem Doppelpunkt gefolgt wird Wenn mehrere Eingabefelder vorkommen sollen diese wenn es die Eintr ge erlauben gruppiert werden Benutzerhandbuch Eigenschaften E All
76. s Design f r jemanden mit einem Ziel und einer fokussierten Aufmerksamkeit v llig ungeeignet ist Zu viel ablenkende Informationen zu komplex zu indirekt zu viele Schritte bis zum Ziel frustrierend schlecht 2 Beispiel Einige Web Sites z B Portalseiten zw ngen 40 Links auf die Startseite in dem gut gemeinten Bem hen dem Benutzer eine rasche Orientierung zu geben und unn tige Klicks zu ersparen Das Problem mit diesem Konzept ist dass es f r eine schwebende Aufmerksamkeit entworfen ist Dieser macht es weiter nichts aus 40 Links zu scannen und eines auszuw hlen das einigermassen interessant klingt Ein Besucher mit schwebender Aufmerksamkeit kann auf alles was man anbietet reagieren Eine Person mit einem Ziel und fokussierter Aufmerksamkeit ist davon glatt berfordert 30 Optionen passen nicht in ihren Arbeitsspeicher sehr viel irrelevante Information muss verarbeitet werden und da dieses Konzept dar ber hinaus h ufig dazu f hrt dass die einzelnen Links aus Raumgr nden wenig aussagef hig sind ist auch ein rasches Abgleichen mit den aktuellen Zielen oft schwierig 3 Beispiel Auf der Startseite einer neuen Visitenkarte im Netz Website wird ein betr chtlicher Anteil des Publikums eher eine schwebende Aufmerksamkeit mitbringen um einfach mal zu sehen was es da so zu tun gibt Die blichen Einheits Links Info News Produkte Kontakt Wir ber uns in Einheitsfarbe auf grauen Hintergrund bieten da
77. sen Im terti ren Ged chtnis gibt es kein Vergessen mehr Parkinson S R Sisson N A Snowberry K 1985 Effect of breadth depth and number of responses on Computer menu search performance Mills Z Prime M 1990 Are all menus the same K Kr ger H 1998 provisorische Unterlagen zur Vorlesung Mensch Computer Interaktion ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschineneiemente Leitfaden Interface Gestaltung b s E urd HGKZ Studiengang Neue Medien Konstruksorsiiehne HEEN Di Damme Pill Dr ka HL S teber Kurzzeit ged chtnis T Vergessen durch verblassen 7 Pri m res Ged chtnis Vergessen 2 ah SE Dauer Sekunden bis h ren Information 7 Vergessen durch proaktive Bauer Minuten be Jahre und reiroakthie a Interferenz Terti res Ged chtnis Dauer permanent Abbildung 2 Diagramm des Informationsflusses vom sensorischen ber das prim re in das sekund re Ged chtnis Ged chtnismaterial wird in das prim re Ged chtnis berf hrt wo es entweder wiederholt ge bt oder vergessen wird Ein Teil des ge bten Material gelangt in das sekund re Ged chtnis ben ist aber weder eine unabdingbare Voraussetzung dazu noch garantiert es die berf hrung Bei der Navigation in Informationsr umen wird vor allem das prim re Ged chtnis beansprucht Das Vergessen tritt hier durch neue Information ein Beim Navigieren im Internet betr gt die Ged chtnisspanne nur vier bis f nf Seitert Aufmerksamkei
78. serfallmodells und mit dem onthologischen Ansatz zeigt die gew nschte Vorgehensweise und gleichzeitig die Affinit ten im Gesamtsystem die zwischen den einzelnen Einflussfaktoren bestehen In diesem Leitfaden wird der Fokus auf den Menschen auf das Interface und sp ter auf die Umgebung gelegt da diese zum Gebiet des Interfaces geh ren 1 Auseinandersetzung mit den Fragen nach den formalen Gesetzen unseres Realit tsverst ndnisses und nach der relativen G ltigkeit des Seins in Ansehung seiner Abh ngigkeit vom erkennenden Subjekt Brockhaus Enzyklopedie 4 Bonsiepe Gui 1993 Dall oggetto all interfaccia 3 Stary Christan 1996 Interaktive Systeme Software Entwicklung und Software Ergonomie ETH ZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung EE und REKT Studiengang Neue Medien sanken Im ersten Teil wird auf die allgemeing ltigen Aspekte bez glich des Faktors Mensch eingegangen Dabei spielen die nat rlichen Grenzen des Menschen und die kulturellen Einfl sse eine zentrale Rolle Danach wird ein weiteres spezifischeres Modell die Problematik bei Coma umreissen Dabei werden benutzerspezifische sowie umgebungsspezifische Aspekte der Konfiguration dargelegt Im zweiten Teil werden dann die Richtlinien und die Interfaceanforderungen vorgestellt Mensch Interface Abbildung 1 der onthologische Ansatz im Zentrum und das Wasserfallmodell rund herum Mensch Der Mens
79. stehen Unterschiedliche Kulturen ben tzen unterschiedliche Symbole um bestimmte Werte darzustellen bzw gleiche Symbole k nnen einen anderen Aussagewert beinhalten Zu ber cksichtigen ist bei der Gestaltung von globalen Software Applikationen die kulturelle Abh ngigkeit von Farben In der folgenden Tabelle werden einige Farben und deren Bedeutung in verschiedenen Kulturen dargestellt Arab L nder Westeuropa Aggression Freude festliche Selen Stimmung Wohlstand Sicherheit Neid Zukunft Faena Fruchtbarkeit kologie Ruhe Energie St rke M nnlichkeit Tugend S a Vertrauen K lte Autorit t Wahrheit Vertiefte Hinweise bez glich der Bedeutung von Farben und deren Assoziationen in der westlichen Welt werden im Anhang Kapitel Farbe dargelegt Vorgehensweise am Beispiel des Konfigurators Der methodische Ansatz ben tigt einige Spezifikationen am konkreten Beispiel des Konfigurators Coma In erster Linie spielt die Umgebung die im generischen Fall nicht erw hnt werden konnte eine entscheidende Rolle Der Benutzer seinerseits stellt zus tzliche Anforderungen an das System 11 ETH ZENTRUM f r PAODUKTE ENTWICKLUNG Maschinensiemente S Leitfaden Interface Gestaltung SS und HGKI Studiengang Neue Medien RL sanken Abbildung 4 die Methodik am Beispiel von COMA Benutzer ber die soeben vorgestellten Eigenschaften die den Menschen betreffe
80. t Obwohl dem Aufmerksamkeitswinkel schon ein Abschnitt gewidmet wurde muss die Aufmerksamkeit f r sich behandelt werden Bekanntlich werden nur 10 der Informationen auf einer Homepage verarbeitet und die restlichen 90 werden kurzerhand weggefiltert Die Aufmerksamkeitsgewinnung der Leser wird somit zum zentralen Thema f r den Webgestalter wie dies in jedem anderen Kommunikationsprozess auch der Fall ist Im spezifischen Fall des Webs ist es jedoch usserst schwierig weil die usseren Umst nde hierf r schwierig sind e Grosse Informationsmengen e Dynamische Informationsinputs e Hohe Komplexit t und Vernetztheit der Informationen e Geringe Informationsqualit t e Hoher Anteil an irrelevanten und ablenkenden Inhalten Wandmacher J 1993 Software Ergonomie In Anlehnung an www kommdesign de texte E H ZENTRUM f r PRODUKTE ENTWICKLUNG ee Leitfaden Interface Gestaltung ll ME Sk LS SL a i aa E o HGKZ Studiengang Neue Medien e Di fee n Pei Dr ka H broter e Falsche Design Strategien z B bei der Hervorhebung der Informationen Andererseits muss auch festgehalten werden dass Webgestalter sich auf falsche Annahmen bez Leseraufmerksamkeit st tzen bei der Gestaltung von Seiten e Vielfach wird behauptet dass Animationen etwas dekoratives seien In der Tat ist die Bewegung aber kein beliebiges Stilmittel sondern ein biologischer Reiz der h chste Priorit t f r die menschliche Aufmerksamkeit hat siehe
81. t ndigste Norm im Bereich der Bildschirmarbeit ist die ISO Norm 9241 Die Teile 10 bis 17 befassen sich mit den software ergonomischen Aspekten der Bildschirmarbeit und sind im folgenden Abschnitt in den wesentlichen Aussagen zusammengefasst Aufgabenangemessenheit Ein interaktives Softwaresystem ist aufgabenangemessen wenn es die Benutzer bei der Durchf hrung ihrer Arbeitsaufgaben effektiv und effizient unterst tzt d h die Benutzer durch die Eigenschaften von Interaktionshilfsmitteln nicht unn tig belastet werden Bsp Der Cursor wandert vom einen zum anderen Eingabefeld und positioniert sich am richtigen Ort wie es dem Arbeitsablauf entspricht Selbstbeschreibungsf higkeit Ein interaktives Software System ist selbstbeschreibungsf hig wenn Benutzern auf Wunsch der Einsatzzweck sowie der Leistungsumfang des Computersystems erl utert werden k nnen und wenn jeder einzelne Interaktionsschritt durch R ckmeldung des Computersystems unmittelbar verst ndlich ist oder die Benutzer auf Wunsch dem jeweiligen Interaktionsschritt entsprechende Erl uterungen entnehmen k nnen Steuerbarkeit Ein interaktives System ist steuerbar wenn die Benutzer die Geschwindigkeit des Interaktionsablaufes die Auswahl und Reihenfolge von Arbeitsgegenst nden Interaktionshilfsmitteln und die Art und den Umfang von Ein und Ausgaben beeinflussen k nnen Bsp Die Benutzer k nnen mit Hilfe des Cursors Inhalte von Fenstern jederzeit aktivieren sowie die Be
82. t aber eine geringere Intensit t Das darf eigentlich nicht sein EE Tats chlich brauchen wir noch ein weiteres Gesetz um die Wirkung der unteren Grafik erkl ren zu k nnen Ich m chte es als das Ausnahmegesetz bezeichnen In seiner abstrakten Form besagt es folgendes Reize die anders sind Ausnahmen von der Regel also haben den h chsten Aufmerksamkeitswert Dies kann man an diesem Textabsatz erkennen der beidseitig einger ckt und im Unterschied zu dem restlichen Text auf dieser Seite blau gef rbt ist Obwohl die Schrift kleiner ist zieht er die Aufmerksamkeit st rker an Dies beschreibt ein sehr m chtiges Prinzip dass die meisten einfachen Gesetze die vorher besprochen wurden au er Kraft setzen kann In einer bunten Welt ist das Monochrome auff llig in einer monochromen Welt das Bunte Wenn sich alles andere bewegt wirkt ein statisches Bild besonders attraktiv obwohl wir auf Bewegungen eigentlich mit einem starken Aufmerksamkeitsreflex reagieren hierzu sp ter noch Genaueres Es handelt sich bei dem Ausnahmegesetz brigens um eine andere Qualit t von Information Es geht hierbei nicht mehr um absolute Gr en auch nicht um Wirkungsverh ltnisse sondern gewisserma en um Figur und Grund Unser Denken und Wahrnehmen funktioniert nach der Regel Das Seltenere ist das Wichtigere und damit kommen wir zu einem weiteren Gesetz das eng mit dem Ausnahmegesetz verwandt ist Das Dissonanzgesetz Bei diesem Gesetz geht es we
83. terstreichen soll der Abstand zwischen den Zeilen gut sichtbar sein Bei der vertikalen Anordnung beginnt der Inhalt oben links Die kritischen oder wichtigeren Informationen befinden sich immer in der linken Spalte Die rechte Spalte wird f r Spezifikationen oder f r weniger kritische Informationen benutzt Die Buttons befinden sich am 30 Leitfaden Interface Gestaltung unteren Rand des Fensters und sind in der Mitte zentriert Um den vertikalen Informationsfluss hervorzuheben soll der Abstand zwischen den Spalten gut sichtbar sein Inhaltlich hnliche Daten sollen miteinander gruppiert werden Ein zus tzlicher Abstand zwischen den Gruppen soll die Zugeh rigkeit hervorheben Diese Abst nde sollen immer eine zwei oder n Einheiten betragen Drucken NNN ajz Drucker hamac i Arbat betie ba Ekererhaten ETH ZC NI f r PRODUKTE ENTWICKLUNG gt i ur HGRZ Studiengang Neue Medien EE Top Adobe Acrobat Distler ont Enke POF Cut pi IT Ausgabe in Dabei Kommata i Seenbermch Eamnglann Fam set E S Ereeseten misrin Asch Samko arei Setarbesikhe durch Bindestriche getrennt werden mis z B 173 3412 Drucken Dokument Saken pro Hatt f Sata D Orucken ES Seen Fr Bereich Pagierlormak sakene frena Secher a Ggs ES Dr Abbildung 19 Druckfenster von MSWord 2000 L Aktuelle Seite E Matecureg e E r Zeen 31 Leitfaden Interface Gestaltung ETH ZC NI f r PRODUKTE ENTWICKLUNG Mas
84. tschaftsverlag NW Bremerhaven 1999 Thissen Frank 2000 Screen Design Handbuch Effektiv informieren und kommunizieren mit Multimedia Springer Verlag Berlin Heidelberg New York u a Ungerleider G L Mishkin L 1982 Two visual cortical systems Cambridge Mass MIT Press 1982 Wandmacher J 1993 Software Ergonomie Berlin New York DeGryter 1993 Weinschenk Susan Yeo Sarah C 1995 Enterprise wide Gui Design John Wiley Inc New York Toronto Singapore u a 1995 Internetquellen wsupsy psy twsu edu surl usabilitynews www gui design de www informatik uni hamburg de ergonomie html www killersites com www kommdesign de fakten www marketing uni goettingen de forschung aktuelles merian erste ergebnisse htm www med yale edu caim manual index html www patricklynch net www pointer org centerpiece 050300 htm www research microsoft com users www sozialnetz hessen de www sun com styleguide www uned uk org toolkits interfacedesign ifdchap1 htm www useit com www wuv de www w3 org Provider Style All html 60
85. wegen sollten f r die Hervorhebung von Text andere Mittel eingesetzt und Hyperlinks unterstrichen werden e Gr sse und Position Die Gr sse von Navigationselementen sollte so sein dass erkennbar ist um was es sich handelt und die Elemente sollten an einer Stelle stehen die gew hnlich f r die Navigation verwendet wird oben oder links e _Unerwartete Dokumenttypen angeben Damit der Benutzer keine schlechte berraschungen erlebt sollten die Links auch deren Format und inhaltliche Gr sse angeben Kilobyte Angabe e Hyperlink Ein Hyperlink kann als Br cke zwischen zwei Inhalten verstanden werden dies einen Bezug zueinander haben Diese M glichkeit kontextuelle Inhalte auf diese Art zu verbinden sollte nicht missbraucht werden Es soll keine Hyperlinkssucht werden da sonst das Kurzzeitged chtnis strapaziert wird Service f r ein ganzes Autoleber Regelm iger Service lohmt sich immer Te I Wer sich heute ot Ford entscheidet bekommt einfa as nur efte pertektes Autcmobil Dieses M ke n Li n k keueulel vor allem ts Servise nach Malt Dr Sie Cava Abbildung 22 Hier haben wir einen Ausschnitt auf dem Grafiken mit Links unterlegt sind Der Schraubenschl ssel f hrt zu einer Sektion Wartung und Reparatur Daran ist an sich nichts auszusetzen Zwei Klicks weiter gleiche Grafik fast gleiche Gr sse aber kein Link mehr Auch die anderen Grafiken sind jetzt nur noch schm ckendes Beiwerk http www k
86. xit t ist es f r gelegentliche Ben tzer auf diese Art einfacher sich einfache Operationen zu merken Lesen e Leseart Am Bildschirm wird im Gegensatz zum Lesen eines gedruckten Dokumentes nicht sequentiell entziffert Die Seiten werden von den meisten Benutzern zuerst gescannt und dabei wird nur etwa 50 der Informationen daf r in dreifacher Lesegeschwindigkeit wahrgenommen Beachtet werden in erster Linie berschriften Listen und Graphiken Es ist von zentraler Wichtigkeit dass die Seiten strukturiert werden damit der User darauf hin gesteuert werden kann was er in den ersten Augenblicken wahrnehmen und lesen soll Texte sollen kurz und pr gnant gehalten werden e Lesefeld Das Lesefeld soll eine angemessene Breite aufweisen es soll in keinem Fall das horizontale Scrolling n tig sein und h chstens so viele Zeichen pro Zeile wie eine gew hnliche A4 Seite haben Somit sieht das Dokument im gedruckten Format gleich wie am Bildschirm aus und wird als angenehm zum Lesen empfunden e Lesegeschwindigkeit Das Lesen von Texten auf dem Bildschirm wird als m hsam wahrgenommen Die Lesegeschwindigkeit ist um 25 30 langsamer als diejenige auf Papier Im Vergleich zu herk mmlichen Kathodenstrahlern verbessern LCD Bildschirme das Lesen jedoch bleibt das 5 Wandmacher J 1993 Software Ergonomie ETHZENTRUM f r PRODUKTE ENTWICKLUNG Maschinensiemente Leitfaden Interface Gestaltung m eaa a ng und HGKZ Studiengang Neue Medien

Leitfaden für Interface-Entwickler des Projektes Coma

Contents

Download Pdf Manuals

Related Search

Related Contents

Leitfaden f&uuml;r Interface-Entwickler des Projektes Coma

Contents

Download Pdf Manuals

Related Search

Related Contents

Leitfaden für Interface-Entwickler des Projektes Coma