Medienproduktion

1. Was ist ein Interface Design?

"Interfacedesign (dt.: Schnittstellendesign) oder Interaktionsdesign, Interaktionsgestaltung ist eine Disziplin des Designs, die sich mit der Gestaltung von Benutzerschnittstellen zwischen Mensch und Maschine beschäftigt. Dafür werden die Bedingungen, Ziele und Hindernisse dieser Interaktion sowohl von menschlicher als auch von technischer Seite erforscht und später – soweit möglich - auf den Menschen hin optimiert. Ziel des Interface-/Interaktionsdesigns ist eine Anwenderschnittstelle, die visuell oder haptisch so gestaltet ist, dass ein möglichst breiter Kreis von NutzerInnen eine optimale Wunsch-/Bedürfnis-/Zielerfüllung durch angemessene Handlungsschritte erfährt." "Das User-Interface-Design soll dafür sein, dass ein System bedienungsfreundlich wird. Hier werden Layouts und Interaktionselemente entworfen und Beschriftungen bzw. die Benamsung definiert. Im Interface Design werden Vorgaben gemacht über das Wording und deren Schriftgröße, über die Position der Navigation und die Aufteilung einer Seite in einzelne Bereiche." 

Beispiel einer Layoutskizze/eines Layoutrasters

2. Was ist ein Screen-Design?

"Nachdem das Interface-Design steht, wird auf Basis dessen das Screen-Design erstellt. "Der grafische Designer ist der Künstler. Er sorgt dafür, dass in die Skizzen des Unser-Interface-Designers Leben kommt und das Erscheinungsbild ästhetisch und stimmig wird. Er macht Vorschläge für die Wahl passender Farben, für Möglichkeiten, um Bereich innerhalb einer Website grafisch abzugrenzen oder als zusammengehörig zu kennzeichnen." Das grafische Design erfolgt erst dann, wenn das Interface-Design bereits feststeht." "Im Rahmen des Screendesign werden Layouts geschaffen, die speziell auf die Präsentation von Inhalten auf Monitoren ausgerichtet sind. Screendesign ist ein Unterbereich des Interfacedesigns. Das Interfacedesign (oder Interaktionsdesign) erforscht das gesamte Spektrum und auch potentielle Möglichkeiten der Mensch-Maschine-Kommunikation. Es ist damit eine fachübergreifende Disziplin. Das Screendesign hingegen ist dagegen ausschließlich grafisches Design, bei dem ein Screendesigner damit beauftragt ist, für eine Bildschirmoberfläche eine ansprechende Gestaltung zu schaffen. In seinem Werk können die Erkenntnisse des Interfacedesigns einfließen. Screendesigner orientieren sich an den Vorgaben, die sie für Stimmung, Ästhetik und Zielgruppenansprache gesetzt bekommen. Durch einen Styleguide werden die Farbwahl und Fonts festgelegt. Ein dort definiertes Layoutraster legt zudem Positionen und Maße fest. Die Eigenschaften des Screendesign ergeben sich aus dem Zusammenspiel mit Interfacedesign, Usabilitykriterien und auch technologischen Aspekten, wie z.B. Programmierungsmöglichkeiten.

Gutes Screendesign setzt voraus, dass sich der Designer mit den Erwartungen der User auseinandersetzt. Welche Motive leiten den User, wenn er sich mit dem entsprechenden Produkt beschäftigt? Der Screendesigner muss eine Vorstellung davon haben, ob die Nutzer eher auf Unterhaltung oder eher auf Information und effektives Arbeiten ausgerichtet sind." 

WICHTIG: Design und Inhalt müssen zusammenpassen.

3. Der Style-Guide

"Durch einen Style Guide wird das Design nicht nur dokumentiert, er liefert vielmehr auch die Vorgaben für die Umsetzung der Website. Ein Style Guide sorgt so auch über die Laufzeit eines User Interface-Design-Projekts hinaus für die notwendige Konsistenz und Geschlossenheit einer Benutzeroberfläche." "Style-Guides enthalten Gestaltungsvorschriften zur Corporate Identity, wie Logos, Farben und Fonts, und wie diese eingesetzt werden dürfen. Style-Guides für User-Interface und Websites enthalten ebenfalls Gestaltungsvorschriften, aber auch Vorschriften für die Interaktion, Benutzerführung und den Ablauf." "Ein Style-Guide für eine einzelne Website enthält Gestaltungsanweisungen für Struktur- und Inhaltsseiten der Website. Er enthält Vorschriften für jene Teile, die auf allen Seiten gleich sein müssen, z. B. die Hauptnavigation, und Vorschriften darüber, wie Subnavigationen aussehen und aufgebaut sein sollen. Für den Inhaltsbereich bietet der Style-Guide Anleitungen zur Layoutgestaltung, zum Schreiben für das Web und genaue Richtlinien für Farben, Fonts, Gestaltung von Tabellen und Grafiken, Verwendung von Bildern bis zu Formaten für das Datum und die Schreibweise für Adressen."

Beispiel für ein Inhaltsverzeichnis des Style-Guides für die Website:

ZIELSETZUNG & ZIELPUBLIKUM

• Zielpublikum bestimmen
• Erwartungen der Nutzer (Was erwartet sich der Nutzer?)
• Absichtserklärung formulieren
• Was sind die wichtigsten Ziele
• Knappe Gliederung für den informativen Gehalt der Web-Site

INTERFACE-DESIGN

• Informationsarchitektur (Aufbau und Struktur)
  • Strukturformen (Welche Struktur weißt der Blog auf: Lineare Strukturform, Netzstruktur, Hierarchische Struktur, …)
  • Aufbau (Wie ist der Blog aufgebaut – welche Bereiche gibt es: Aktionsbereiche, Informationsbereiche, Inhaltsbereiche, …)
• Navigation & Subnavigation (+ Benennung)
• Inhaltsseiten (Welche Inhalte befinden sich auf dem Blog und wie sind sie gegliedert?)
• Wording (Wie ist der sprachliche Stil der Seite?)
• Startseite (Wie sieht die Front-Seite aus?)
• MultiMedia (Werden Filme, Animationen, Sounds, etc. benötigt?)
• Interaktionsdesign (betrifft alle Interaktiven Abläufe, z. B. registrieren, ein Produkt auswählen oder eine Bestellung aufgeben, Suchfunktion, Kalender, Polls, …)

SCREEN-DESIGN

• Layout und Layoutverhalten von Fenstern (Wie groß ist das Fenster? Wie lange ist die Seite? Muss gescrollt werden oder nicht?)
• Typografie (Wie wird die Seite gestaltet, wie wird der Text gestaltet?)
• Schrift (Welche Arten von Schriften kommen wo zum Einsatz?)
• Farben/Farbverläufe (Welche Farben werden für welchen Zweck verwendet?)
• Icons (Wann und wo werden Icons verwendet?)
• Grafiken (Welche Art von Grafiken werden wo verwendet?)
• Fotos (Welches Bildkonzept liegt vor und wo werden Bilder/Fotos eingesetzt?)
• Formate – Zahlen, Datum, Adressen usw. (Wie werden bestimmte wiederkehrende Abschnitte im Text geschrieben bzw. formatiert?)
• Tabelle (Wie sieht die Gestaltung der Tabellen aus?)
• Einheitlichkeit (Gibt es eine gewisse ersichtliche Einheit und Struktur auf der Website, oder sieht jede Seite anders aus?)

Die 7 Todsünden des Webdesign

1. Bandbreitenverschwendung

zu viele und zu große Grafiken

Faustregel: die meisten Anwender können nur 30 kb pro Sekunde herunterladen. Das bedeutet, dass eine Seite mit 30 kb Text und Grafiken eine ganze, subjektiv sehr lange Sekunde zum Laden braucht.

Bewusste Nutzung des Caches durch Verwendung der gleichen Bausteine für Navigation-, Bild- oder Textelemente

 2. "Kreative" Benutzerführung

Bei aller Kreativität sollte die intuitive Bedienbarkeit durch den Besucher des Webangebots nicht aus den Augen verloren werden. Anwender müssen mit der Benutzerführung klar kommen, ansonsten Überarbeitung erforderlich.

3. Technophilie

 Die Versuchung ist groß, auf der Website die neuesten bahnbrechenden Techniken einzusetzen, die gerade "in" sind. Diese angesagten Techniken werden oft nur von einer Minderheit gewürdigt bzw. wahrgenommen. Viele Webserver benutzen alte Web-Browser.

Vorsicht bei Plug-Ins

 Neben der allgemeinen Verfügbarkeit von Techniken wie DHTML, JavaScript, CSS, Flash oder Streaming Video sollten sie aber auch den Zweck Ihres Angebots im Auge behalten!!!!!!!

 Innovation ist kein Selbstzweck, sondern nur sinnvoll, wo sich für den Nutzer Ihrer Website echte Vorteile ergeben.

 4. Wachstum nicht eingeplant

eine Website ist nie fertig!

Vorhandene Seiten müssen oft überarbeitet und aktualisiert werden.

Site-Struktur sollte so geplant sein, dass sie eine einfach Erweiterung um ei.zelene Seiten oder ganze Teilbäume zulässt.

Keine Unikate! Entwerfen sie Grundtypen von Seiten für alle auftretenden Situationen. Durch Verwendung z.B. von Mustervorlagen in Golive

5. Plattformenabhängigkeit

häufigster Fehler besteht darin, eine Site nur auf einem Rechner und/oder nur mit einem Browser zu testen.

wenigsten mit den gängisten Versionen von Netscape und Explorer sollte man die Site ausprobieren.

für Macintosh-Entwickler wichtig auf Windows zu testen, da 94 % der Surfer mit dieser Plattform arbeiten (Farbdarstallung, Schriftgrößen.

Optimieren der Seiten für die bevorzugte Plattform ihrer Zielgruppe, ohne die übrigen Anwender aus dem Auge zu verlieren.

viele Anwender schalten aus Sicherheitsgründen JavaScript oder AcitveX ab. Seite sollte dennoch navigierbar sein.

6. Einzelkämpfertum

Aufteilen der Arbeit. Delegieren von Teilaufgaben.

7. Linkmissbrauch

zuviele Links auf zu vielen anderen Seiten der Site ist verwirrend für den Besucher. Im Extremfall wird der Besucher im Kreis geführt

sinnvolle Struktur der Site!!!

Fehler oft bei grafischen Hyperlinks und aktiven Elementen. Ein Link sollte selbsterklärend sein.

Quellen:

• http://collabor.idv.edu/pim08s/stories/20552/
• http://newmedia.idv.edu/thema/golive/

.. liegt heutzutage in anderen Dimensionen als angegeben. Aber grundsätzlich ist der Rat zur Sparsamkeit (auch an Bandbreite) immer richtig. Schlankes XHTML-Desing loht sich auch dann, wenn 99 % der Zielgruppe "Breitband-Verbindungen" haben.

H. mido

PS: Der Begriff Bandbreite gehört eigentlich in den Sprachschatz der Nachrichtentechnik. Nicht-Techniker sollten besser den Begriff Datenübertagungsrate oder (weil die kleinste messbare Einheit der Daten das bit ist) Bitrate verwenden. Angaben über konkrete Datenübetragungsraten werden häufig in bit/sec gegeben.