Interfacedesign I Browserproblematik

Fachbegriffe und Wortbedeutung

Interfacedesigner Nicht auf Medium beschrnkt konzeptionell und gestalterisch Screendesigner Nicht auf Medium beschrnkt Formalsthetische Gestaltung von Screens Webdesigner ausschlielich Medium Internet konzeptionell und gestalterisch Webentwickler konzipieren und programmieren Frontend/Backendprogrammierer Konzepte umsetzen, nur programmieren Homepage Website bei Start des Browsers Start/Index-Seite einer Website Persnliche (private, kleine) Website Webauftritt nicht mehr als Name, Adresse und Fakten Internetprsenz vielfltigere Information keine interaktive Funktionen Webseite/Webpage einzelnes Dokument Website Summe der Webseiten Web-Portal bietet bergeordnete Inhalte an leitet zu themenspezifischen Inhalten weiter Anlaufstelle fr Nutzer mit unterschiedlichsten Informationsbedrfnissen

Crossbrowserproblematik
1. mangelhafte Untersttzung und Einhaltung von Standards a. W3C Vorschlge bei Programmierung nicht eingehalten b. Unvollstndige Untersttzung der Standards durch Render Engines i. Rendering/Ausgabe interpretieren Quelltextes ii. Trident (IE), Gecko (FF), Presto (Opera)

c.

Aus Browserkrieg (Netscape vs IE) entstanden, rasante Eigenentwicklung von proprietren Funktionen ohne Rcksicht auf W3C

2. Quirksmodus a. Ermglicht Anzeige fehlerhaften Quellcodes b. Bei fehlender Dokumentendefinition automatisch aktiviert 3. Broken Box Model a. Falsche Implementierung des W3C Box-Models (CSS) durch IE 4. Fehler in der Programmierung a. Fehlende Qualittssicherung b. Veraltete Technik c. Fehlende Trennung Struktur / Inhalt 5. Falsche Interpretation von Statistiken a. Interpretation fhrt zum Schluss das Gruppen vernachlssigt werden knnten b. Unwissen welche Zielgruppe welche Konfiguration besitzt ->mindestens alle aktuellen Browser mssen untersttzt werden

Begriffe Multimedia, Hypermedia, Gestalt und Interface

Multimedia gleichzeitige Untersttzung von mindesten eines zeitkontinuierlichen und zeitdiskreten Mediums Problematik o Glckwunschkarte, Karaoke-DVD auch Multimedial

Hypertext/Hypermedia nicht-lineares Organisationskonzept fr Informationen Koordination zeitlich, rumlich und inhaltlicher Beziehung unterschiedlicher Medien Manipulierbarkeit des Mediums Zugang zur Information durch Navigation

Gestalt Gestaltpsychologie/Gestalttheorie als Teilgebiet der Psychologie Wahrnehmung immer ganzheitlich Gesetze o Nhe o hnlichkeit o Prgnanz (bessere Wahrnehmung von Gestalten die sich abheben) Gestaltung als visuelle Kommunikation o Bestmgliche bermittlung von Information durch Gestaltung von Medien Gui Bonsiepe Interface Tetragramm instrumentellen und kommunikativen Handelns 1. Nutzer/Sozialer Agent 2. Werkzeug 3. Aufgabe/Handlungsziel Interface als strukturelle Kopplung dieser 3 Komponenten Interfacedesign erklrt Funktionen Intelligenz der Lsung liegt in Verdeckung logischer Tiefe Benutzerfreundlichkeit wird im Zuge komplexerer Werkzeuge immer wichtiger

Interfacedesign ist ein Problemlsungsverhalten, das die Aufgabe, die Anwendung und den Nutzer im Fokus hat. Interface ist nicht auf ein bestimmtes Medium beschrnkt.
Herausforderungen und Chancen Konvergenz von Medien, Netzen und Gerte Steigende technologische Anforderungen Synchronisation medialer Kommunikationskanle (online / offline) Hohe Erwartungshaltung der User an Design und Usability

Media Management: Ganzheitliche Herangehensweise interdisziplinre Zusammenarbeit von Spezialisten durch Schnittstellenkompetenz komplexe Entwicklungsprozesse moderieren, managen, Lsungen hinterfragen und Impulse geben

Flash
Grundlegender Ansatz Werkzeug zur Entwicklung interaktiver Medien Heute weit ber reine Animationen hinaus, Datenbankfhiges Frontend In Flash Enwicklungsumgebung erstellt, dann in Flash Player/Plugin Laufzeitumgebung Vektororientierung o Vektorbasiert statt Pixelorientiert o Vektorisierung von Bitmaps o Vor/Nachteile Prinzip Zeitleiste o Bilder (frames) o Schlsselbilder (keyframes) o Zeitleiste in Zeitleiste (movieclip) Ebenen Interaktivitt durch Actionscript

Websitekonzeption und Browser

Monitorauflsung o 38% 1024x768 o 19% 1280x800 o 13% 1280x1024 Nettoflche o Flche des Browsers die zur Darstellung ein Website zur Verfgung steht o Gre Browserfenster Elemente des Browsers (Navigationsleiste etc.) und vertikal Scrollbar Zu Projektbeginn Einigung auf Zielkonfiguration (Plattform, Browser (-Version), Auflsung) -> Safest Recommendation, kleinste gemeinsame Nenner der Nettoflchen Bei unvermeidlichen Darstellungsproblemen o Browsersniffing (JavaScript Useragent des Client ermittelt -> Stylesheet) o CSS Hacking (nutzt Unterschiede in Verarbeitung/Parsing durch verschiedene Browser) o Conditional Comments (browserspezifisches Stylesheet verlinken)

Flexible Layouts o Website kann zentriert werden o Minimale und maximale Breite definieren o Realtive Schriftgre verwenden

Gestaltungsraster (1,618)
Gibt formalen Halt/Struktur, erleichtert Umgang mit Gestaltungsmitteln Visuelle Klarheit, Konsistenz, effizientes Arbeiten Ordnung und Orientierung schaffen

Systematische Gestaltung Gestaltungsraster/Design Grid ist ein Ordnungsprinzip fr 2D/3D Flche durch horizontale/vertikale Linien unterteilt Aufteilung basiert auf berlegungen zur formalen sthetik Erleichtert o Sachlichen Aufbau der Argumentation o Systematischen und logischen Aufbau o Rhythmische, in sich geschlossene Organisation o Transparenter, spannungsvoller Wird eingesetzt in o 2D: Corporate Design, Magazine/Bcher, User Interfaces o 3D: Architektur, Plastik, Ausstellung

Weshalb ist der Einsatz eines Gestaltungsrasters sinnvoll? Reduktion gestaltersicher Alternativen Gestalterische Konsistenz Garantiert gestalterische Grundqualitt Macht gestalterische Entscheidungen nachvollziehbar Vereinfacht Arbeit im Team Erleichtert die Abstimmung mit dem Kunden Erleichtert Orientierung fr den Nutzer

Proportion und Harmonie symmetrische Gestaltung wird statisch und langweilig empfunden Harmonische analoge Proportionen nach Aicher o 10er-System hat keine ganzzahligen harmonische Verhltnisse durch Verwenden gerader Zahlen -> disharmonische Zahlenverhltnisse o Analoge Masysteme (Elle, Fu, Tag, Stunde, Akkorde) Digital (10er-System) Syrien o Idealisierung der Verhltnisse von Krperteilen menschlicher Gottheiten Polyket/Platon o Gttliches Ma der Dinge (groe zum kleinen wie ganzes zu groem) Euklid o Stetige Teilung o Auch in Natur zu finden (Blumen etc.) Vitruv o Homo bene figuratus Fibonacci o Fibonacci-Folge (durch Teilung Nherung an goldenen Schnitt) o In Natur wiederzufinden (Blten, Vermehrung Kaninchen etc.) Le Corbusier

o Architektur nach menschlichen Proportionsverhltnissen (Modulor-System) Josef Mller-Brockmann o Grid Systems in graphic design

Konzeptionelle Rahmenbedingungen Blickhhe des Betrachters Daumenbreite bei Satzspiegel Zielkonfiguration

Probleme Raster kein Garant fr gute Gesamtlsung Methodische Vorgehensweise ersetzt nicht Intuition Gestalterische Systeme werden schnell zur Ideologie/Dogma Bewut eingesetzte Disharmonie/Strungen des Systems sorgen fr Lebendigkeit

Information Architecture
hufig verwendeter Begriff um Anforderungen an die inhaltliche Gestaltung des Interface zusammenzufassen dient einfacher Orientierung und kurzen Wegen Strukturieren und Klassifizieren von Interfaces um Informationen sinnvoll erreichbar zu machen

The structural design of an information space to facilitate task completion and intuitive access to content
nach Schwarz o strukturelle Organisation von Inhalten (Unterteilung nach logischen Einheiten, Alphabet...) o Navigationssysteme o Klassifizierung, Bezeichnungssystematik o Aufbereitung der Inhalte (Stil, Art der Darstellung, Medium) o Such-, Sortier- und Filtersysteme (fr zustzliche Angebote/Informationen) o Zugangskonzept (Zugriffsrechte)

Begriffe fr Navigationsoptionen
Begriffe immer aus Nutzerperspektive whlen (statt Unternehmen) Abkrzungen, Fremdwrter, Fachbegriffe vermeiden Alternative Begriffssysteme whrend Entwicklung bilden Einheitlichkeit und Konsistenz in der Verwendung von Begriffen Im Zweifel neutrale, emotionslose Begriffe als interessante, individuelle Wortschpfungen

Strukturelle Organisation von Inhalten

Lineare Strukture linear vorwrts/rckwrts

jede Seite setzt Wissen der vorherigen voraus Anwendung: Lernsysteme, Tests, Anmeldungen, Bestellungen

Jumplineare Struktur Mglichkeit in linearer Struktur Seiten der Sequenz zu berspringen

Hierarchische Struktur (Baumstruktur) Inhalte in sinnvolle inhaltliche Einheiten (Rubriken) gegliedert Innerhalb der Rubriken werden Inhalte nach Navigationsebenen sortiert Je tiefer man in der Ebenenhierarchie ist umso detaillierter sind Inhalte Vorteile o groe Informationsmenge bersichtlich darstellbar o Nutzer kann Detaillierungsgrad selbst bestimmen

Netzstruktur vernetzte Informationseinheiten bilden Knoten von denen man an angrenzende Seiten gelangt Informationseinheiten sind zustzlich untereinander verbunden

Singleframe Struktur alle Seiten nach gleichem Schema aufgebaut -> Illusion einer einzigen Seite mit wechselndem Inhalt keine Hierarchie mit Haupt- oder Untermen sondern nur benachbarte Seiten

SeeAndPoint-Struktur Inhalte werden von einer zentralen Seite mit allen Links aus erschlossen Anklicken ffnet oft neues Fenster Anwendung: Informationselemente wie Sound, Video, Links und Animationen prsentieren

Nach Schtzungen werden 20 Prozent der am Computer verbrachten Arbeitszeit durch vermeidbare Probleme bei der Bedienung nicht sinnvoll genutzt
Grnde fr das Scheitern
Projektsteuerung Interfacedesign wird auf formalsthetische Gestaltung der Oberflche reduziert Entscheider fehlt Kompetenz Mensch, Maschine oder Aufgabe wird in Entwicklung vernachlssigt Mangelhafte Zeit- und Projektplanung (Interface als letzter Schritt)

Fehlerhafte Annahmen The designers clients may not be users o Entwickler entwickeln eine Anwendung die nicht vom Kunden sondern Nutzer bedient werden soll o Oft fehlt direkter Kontakt zu potentiellen Nutzern Designers are no typical users o Entwickler bertragen persnliche Erfahrungen auf die Zielgruppe o berschtzen eigenes Einschtzungsvermgen der Zielgruppe o Nutzerverhalten im stndigen Wandel o Designer haben mehr Vorwissen, kann grere Komplexitt zugetraut werden There is no such thing as the avarage person o fehlerhafte Annahmen

falsche Kompromisse

Interaktion, Navigation, Orientierung

Nutzer erschliet nicht-lineare Informationen im Hypermedium durch Interaktion Werkzeug zur Interaktion ins die Navigation Navigationssystem um Hypermedia-Medien zu erschlieen erfolgskritisch o Inhalte durch Navigationssysteme geeignet zugnglich machen o Scheitert Nutzer an Navigation bleiben Inhalte verborgen Viele Navigationsformen und Orientierungshilfen sind aus realen Welt abgeleitet

Nach Kappel, Prll, Reich und Retschizegger Nicht-Linearitt -> Desorientierung Mentales Modell der Navigationsstruktur vermitteln (Sitemap) Stndige Rckmeldung ber aktuelle Position Eindeutige Information ber Inhalt aktuelle und nchst-erreichbare Seite Zurckgreifen auf bekannte Systeme -> schnell verstanden/wiedererkannt Heterogene Navigationselemente problematisch o Mischformen aus horizontal/vertikalen Mens o Statische Aufklappmens/dynamische Pulldown-Mens

Navigation, Orientierung und Kontext Vorraussetzung fr Navigation ist Orientierung Orientierungsprobleme tauchen auf wenn Kontext ungeeignet ist den Standort zu bestimmen Ursachen o Zu wenig Merkmale zur Orientierung o berangebot on Orientierungsmerkmalen o Merkmale zur Orientierung unbekannt o Merkmale zur Orientierung verndern sich

Strategien zur Orientierung und Navigation in der realen Welt Standortbestimmung durch gelernte Merkmale Wegweiser, Markierungen Orientierung durch unvernderliche Konstanten (Sterne, Magnetische Pole...) berblick durch vergrerten Kontext Orientierung durch mentales Modell/Reprsentation der Wirklichkeit Man fragt jemanden der sich auskennt

Navigationsformen und techniken fr Hypermedien

Die Summe der Navigationsformen und techniken bildet das Navigationssystem

Browserfunktionen zur Navigation Features o URL o Page title o Browser History o Browser back

Nutzer weichen vor allem in kritischen Situationen auf Browsernavigation aus Verwendung von aussagekrftigen URLs notwendig Individuelle page titles um browser history zu erleichtern Nicht browser back button unterdrcken sonst Verirren/Desorientierung

Hyperlinks Wegweiser zu assoziierten Inhalten Weiterentwicklung von Seitenzahlen, Link als Grundelement hypermedialer Strukturen Sprnge in hypermedia Struktur verndert Inhalte und Umgebung -> Desorientierung o Hilfestellung: Kennzeichnung besuchter/aktiver Links Textanker = hyperlink innerhalb einer Seite Related topics / promotional links = zustzliche Inhaltsangebote, push-Information Quick Navigation = Zusammenfassung von Links zu einer Selectbox

Navigationsmens Zusammenfassen und hierarchisches Anordnen von Hyperlinks Orientierungsinformationen o Wo befinde ich mich? o Welche Inhalt auf gleicher hierarchischer Ebene? o Welche Inhalte auf bergeordneter hierarchischer Ebene? Auf ausgewogene Verteilung der Inhalte achten o Keine tiefen Hierarchien/Verschachtelungen o Keine dritte Navigationsebene o Erste Navigationsebene mit geringer Breite (8 Rubriken max.), folgende mit 3-15 Items Highlighting aktueller Position zur Orientierung vertikales Navigationsmen o Quasistandard o 2 Hierarchieebenen gleichzeitig darstellbar o Untergliederung druch Einrcken / Seperieren Horizintales Navigationsmen o Karteireiter als Metapher o Anzahl der Menpunkte muss berschaubar sein da schlecht skalierbar

Pulldown Men Selektion der Eintrge durch sukzessives Auswhlen der Untermens Zu Beachten o Tiefe Verschachtelung vermeiden o Submens als solche markieren o Inhaltlich zusammengehrige Links gruppieren o Nicht verfgbare Eintrge auslassen o Kombination mit breadcrumps Vorteile o Beansprucht wenig Platz -> grosse Anzahl an hyperlinks verfgbar o Ermglicht gut sortierte Prsentation von Inhalten Nachteile o Keine permanente bersicht ber benachbarte Navigationsoptionen o Fehlende bersicht, Handlingprobleme o Benutzer/Entwickler denken in unterschiedlichen Ordnungskategorien o Langsame Navigation

Breadcrumbs Nur Untersttzung hierarchischer Navigationsmens durch Orientierungserleichterung Zurckgelegter Pfad wird angezeigt

Generische Navigation Sitemap zustzliche Orientierung im Inhaltsangebot durch Vogelperspektive Inhaltsverzeichnis ber alle Inhalte einer Website Unter Mnemotechnische Gesichtspunkten ist sitemap > siteindex permanente, globale Navigation immer an gleicher Stelle / Reihenfolge Beispiel: Impressum, Warenkorb, Log In, Kontakt...

Siteindex smtliche Inhalte verschachtelte Liste Sortierung mglich

Metaphorische Navigation Suche Guided tour, site guide interaktive, animierte Vorstellung der Inhalt/Funktionen einer Website Untersttzung durch Sympathietrger Anwendung: als Lupeneffekt bertragene Bedeutung Vorteil: Funktionsweise kann bertragen werden Nachteil: Oft nur eingeschrnkt bertragbar Beispiel: Desktop, Ordner, Papierkorb...

Social Navigation finden relevanter Informationen die zentrale Herausforderung im berangebot Suchdienste funktionieren nur dann gut wenn richtige Suchbegriffe gewhlt wurden o Brauchbare Verweise zu inhaltlich hnlichen Informationen selten o Qualitt relevanter Informationen nicht erkennbar Collaborative Filtering Systems o Errechnen von hnlichkeiten zwischen Benutzerprofilen -> individuelle Empfehlungen o Passive social navigation: Nutzerverhalten wird protokolliert und als Hilfe fr andere zur Verfgung gestellt o Active social navigation: Nutzer bewertet und hinterlsst Spur mit Hinweisen/Mitteilungen Beispiel: Amazon o Aktiv: Bewerten, Kommentieren o Passiv: Erwerb hnlichen Produkts

Tagcloud bersicht von Inhalten die verschlagwortet / getagt wurden Stellen Beziehungen unter Tags dar o Wortgre, Farbe symbolisiert Hufigkeit

Virtueller Reprsentant / Avatar personifizierte Reprsentanten einer Website (Sympathietrger) mit knstlicher Intelligenz ausgestattet -> Eindruck der Interaktion mit realer Person