Christoph Becker – Universität Rostock - 1/21

Vortragsseminar Medien und GestaltungVortragsseminar Medien und Gestaltung

Screendesign und Webdesign

Christoph Becker

Christoph Becker – Universität Rostock - 2/21

GliederungGliederung

(1) Screendesign

(1) Definition

(2) Standards

(3) Gestaltungsaspekte und Praktischer Einsatz

(2) Webdesign

(1) Definition

(2) Standards

(3) Gestaltungsaspekte

(4) Beispiele

(3) Zusammenfassung

Christoph Becker – Universität Rostock - 3/21

GliederungGliederung

(1) Screendesign

(1) Definition

(2) Standards

(3) Gestaltungsaspekte und Praktischer Einsatz

(2) Webdesign

(1) Definition

(2) Standards

(3) Gestaltungsaspekte

(4) Beispiele

(3) Zusammenfassung

Christoph Becker – Universität Rostock - 4/21

Screendesign – (1) - DefinitionScreendesign – (1) - Definition

● Präsentation von Inhalten

● Gestaltung von Benutzerinterfaces

● Usability

Christoph Becker – Universität Rostock - 5/21

Screendesign – (2) - StandardsScreendesign – (2) - Standards

● ... sind gut für– den Benutzer (Gesundheit, Sicherheit, Wohlbefinden,

Leistungsvermögen)

● und finden sich in...– Gebrauchstauglichkeit DIN 55350-11

– Benutzungsfreundlichkeit ISA 9421

Christoph Becker – Universität Rostock - 6/21

Screendesign – (2) - StandardsScreendesign – (2) - Standards

● ISO 9421-2 (Humankriterien)

– Benutzerorientierung

– Vielseitigkeit

– Ganzheitlichkeit

– Bedeutsamkeit

– Handlungsspielraum

– Rückmeldung

– Entwicklungsmöglichk.

● ISO 9421-10 (Dialoggestaltung)

– Aufgabenangemessenheit

– Selbstbeschreibungsf.

– Steuerbarkeit

– Erwartungskonformität

– Fehlertoleranz

– Individualisierbarkeit

– Lernförderlichkeit

Christoph Becker – Universität Rostock - 7/21

Screendesign – (3) - GestaltungsaspekteScreendesign – (3) - Gestaltungsaspekte

● Was will ich und warum?

Benutzer zum Benutzen anregen und ihn unterstützen

● Wie mache ich das?

Beachtung von Gestaltgesetzen (s. Bsp.)Figur-Grund-Unterscheidung (s.Bsp.)Farbauswahl (Wirkung von Farben, kulturelle Einflüsse)

Christoph Becker – Universität Rostock - 8/21

Screendesign – (3) – Praktischer EinsatzScreendesign – (3) – Praktischer Einsatz

● Vergleiche die erworbenen Kenntnisse mit einem Beispiel aus der Praxis

● Word vs. OpenOffice

● Gegen welche Regeln wird verstoßen?

Christoph Becker – Universität Rostock - 9/21

Screendesign – (3) – Praktischer EinsatzScreendesign – (3) – Praktischer Einsatz

Christoph Becker – Universität Rostock - 10/21

Screendesign – (3) – Praktischer EinsatzScreendesign – (3) – Praktischer Einsatz

Christoph Becker – Universität Rostock - 11/21

GliederungGliederung

(1) Screendesign

(1) Definition

(2) Standards

(3) Gestaltungsaspekte und Praktischer Einsatz

(2) Webdesign

(1) Definition

(2) Standards

(3) Gestaltungsaspekte

(4) Beispiele

(3) Zusammenfassung

Christoph Becker – Universität Rostock - 12/21

Webdesign – (1) - DefinitionWebdesign – (1) - Definition

● Gestaltung, Aufbau und Nutzerführung

● Hypermedia

Christoph Becker – Universität Rostock - 13/21

Webdesign – (2) - StandardsWebdesign – (2) - Standards

● Wozu? Für wen?

● HTML4.01 / XHTML1 / XML– Inhalt mit oder ohne Formatierung

● CSS1 / 2– Formatierung von Text und Seite (Navigation)

● WCAG / WAI– „promoting a high degree of usability fpr people with

disabilities“ (www.w3.org/WAI)

Christoph Becker – Universität Rostock - 14/21

Webdesign – (3) - GestaltungsaspekteWebdesign – (3) - Gestaltungsaspekte

● Ladezeit / Bandbreite– geringe Größe der Dateien

– geringe Anzahl

● Hohe Reichweite– Plugin-Verzicht

– Verzicht auf Javascript/ActiveX

● gute Präsentation– gute Navigierbarkeit

– Übersicht

Christoph Becker – Universität Rostock - 15/21

Webdesign – (3) - GestaltungsaspekteWebdesign – (3) - Gestaltungsaspekte

● konsistentes Design– Anwendung allgemeiner HTML und CSS Tags

– Browser stellen Seiten u.U. unterschiedlich dar

Christoph Becker – Universität Rostock - 16/21

Webdesign – (4) - BeispieleWebdesign – (4) - Beispiele

Christoph Becker – Universität Rostock - 17/21

Webdesign – (4) - BeispieleWebdesign – (4) - Beispiele

Christoph Becker – Universität Rostock - 18/21

Webdesign – (4) - BeispieleWebdesign – (4) - Beispiele

Christoph Becker – Universität Rostock - 19/21

ZusammenfassungZusammenfassung

Aller Anfang ist schwer. Standards und Normen lassen sich nicht oder nur schwer und unter großem Aufwand auf Einhaltung überprüfen.Usability gewinnt zunehmend an Bedeutung.Webdesign ist herstellerabhängig und selten behindertengerecht.Einfache Paradigmen, bei denen man sofort Zustimmung erhält, werden oft nicht beachtet.

Christoph Becker – Universität Rostock - 20/21

Danke!Danke!

Ihr werdet es besser machen ;)

Christoph Becker – Universität Rostock - 21/21

Literatur / QuellenLiteratur / Quellen

➢[BEC01] Becker, Chr.: Objektwahrnehmung und Gestaltgesetze nach Wertheimer Seminararbeit, Uni-Rostock,➢ http://www.ch-becker.de/extern/vosem, 2001

➢[BLA01] Blaha, F. (Hrsg.): Trends der Bildschirmarbeit, Springer Verlag Wien New York, 2001, ISBN 3-211-83504-

0➢[DIN50] Deutsches Institut für Normung e.V.: DIN 55350-11 Begri zu Qualitätsmanagement und Statistik - ➢Teil 11: Begrie des Qualitätsmanagements, 1995-08, Nr. 4

➢[ISO21] International Organization for Standardization: Software-Ergonomie, DIN EN ISO 9421, Teil 1017➢[KAR04] Karstens, B.: Dialogsysteme und Softwareergonomie, Vorlesungsscript, Uni-Rostock, 2004➢[NIE93] Nielsen, J.: Usability Engineering, Academic Press, 1993, ISBN 0-125-18405-0➢[SOE98] Sölch, R.: Die Evolution der Farben, Urania, Stuttgart, 1998➢[OER03] Oertel, K.; Usability-Evaluation Strategien zur Bewertung der Gebrauchstauglichkeit von interaktiven ➢ Web Interfaces Dissertation, Uni Rostock, 2003

➢[USA1] Diamont Bullet: Usability-Guideline, http://www.usabilityrst.com/➢[WAN93] Wandmacher, J.: Software Ergonomie, Verlag Walter de Gruyter, 1993➢[WCAG] Chisholm, W.; Vanderheiden, G.; Jacobs, I.: Web Content Accessibility Guidelines 1.0,➢W3C Recommendation 5-May-1999, http://www.w3.org/TR/WAI-WEBCONTENT/➢[WIN95] Windischbauer, G.; et al.: Grundlagen der Medizinischen Physik, Uni Wien, 1995,➢http://i115srv.vu-wien.ac.at/physik/ws95/W9500000.HTM