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 Nutzern 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." Erwartungen der Nutzer "Gutes Screendesign setzt voraus, dass sich der Designer mit den Erwartungen der Nutzer auseinandersetzt. Welche Motive leiten den Nutzer, 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?)
[ SUCHMASCHINENOPTIMIERUNG ]
Hier geht es zur Aufgabe 2
Quellen: Web Usability, Galileo Design Wikipedia http://www.ergosign.de/de/user-centered-design/specification/style-guide.php
In den Ausführungen über semantischen Quellcode wurde eine verbreitete Lehrmeinung wiedergegeben, nämlich dass Auszeichnungen (Tags), die vornehmlich oder ausschließlich auf die Gestaltung der Dokumente abzielen, zu vermeiden sind. (siehe auch Tabellendesign).
'Divider' zählen zu den akzeptierten Grenzfällen. Ihnen kann die semantische Gliederung eines Dokumentes dann zugesprochen werden, wenn sie 'semantische Einheiten' bilden. So sind z.B. Divider für den Menü-Bereich, die Beiträge und Kommentare (Content), den Header, den Status-Bereich sinnvoll und zulässig. Um z.B. Beiträge eines Weblogs auszudrucken, kann und soll der Menü-Bereich weggelassen, also ausgeblendet, werden.
Die exzessive Anwendung von 'Dividern' um Details, oder gar Überschriften zu gestalten, wird 'DIVITIS' genannt und sollte tunlichst vermieden werden.
Wie viele 'DIVIDER' also, verträgt der Weblog?
... commentlink
"Benutze kein div, wenn ein anderes Element sinnvoller wäre und vermeide jedes div, das nicht notwendig ist."
(http://blog.decaf.de/2007/09/divitis-ein-paar-gedanken-zum-uebermaessigen-gebrauch-von-div)
Überschriften werden zB oft in Divs gepackt, obwohl man diese sinnvollerweise auch als Headings definieren kann (h1, h2, ...). Diese kann man genauso gut mit CSS gestalten. Oder bei Listen (etwa als Menü) lassen sich zb die Eigenschaften des "umschließenden" < ul > gut für das Layout verwenden, ohne einen Divider zu brauchen.
... commentlink
Was sind nun aber divitis?
In einem Artikel auf http://www.rorkvell.de/news/2007/ar0925T071541 wird divitis so erklärt:
"Divitis ist die Verwendung von div für andere Zwecke als dem Inhalt eine Bedeutung hinzuzufügen. Insbesondere die Verwendung von div für Präsentationszwecke ist ein Zeichen für divitis. Damit sind dann eindeutig auch die divs zur Erstellung von Boxen mit abgerundeten Ecken ein Symptom von divitis. Denn ob die Ecken abgerundet sind, oder nicht, ist allein eine Frage der Präsentation, und hat Nichts mit der Bedeutung des Inhalts zu tun. Divophobie ist dann eben die krankhafte Vermeidung von div in der irrigen Annahme, dass div per se von Übel sei."So stimme ich dem Zitat von Michael zu und möchte noch hinzufügen –
"Natürlich sollte man jedes überflüssigeUnd eigentlich:vermeiden. Aber es ist oft nicht einfach, zu erkennen, wann einwirklich überflüssig ist. Für Außenstehende mag deshalb die Regel gelten:
Man spricht nicht über Krankheiten.
Irgendwie geht's doch wieder nur ums Bauchgefühl.
Insofern denke ich, dass man keine allgemein gültige Antwort bzw. eine exate Zahl auf die Frage "Wie viele divider verträgt ein Webblog" geben kann.
... commentlink
Viel, denn "FFF" ist ein Anti-Barock-Bekenntnis in der Gestaltungslehre, oftmals verwirklicht, wenn es um moderne Architektur geht. Jede Form muss auf die Ansprüche aus dem geplanten Leben in den Gebäuden ableitbar sein. "Zirat" ist kontraproduktiv.
Wer immer einer derart reduktionistischen Einstellung gegenüber skeptisch ist, der möge dieses Prinzip aber im Bereich der Kommunikation tunlichst akzeptieren. Paul Watzlawik stellte schon von ca. 40 Jahren in seinem Werk über die menschliche Kommunikation (Watzlawick/Janet H. Beavin/Don D. Jackson: Menschliche Kommunikation - Formen, Störungen, Paradoxien. Huber, Bern 1969) fest, dass "jedes Handeln (im übertragenen Sinne jedes Symbol) Mitteilungscharakter hat" und man in diesem Zusammenhang auch nicht "Nichtkommunizieren" kann. Diese Aussage legt den Schluss nahe, dass:
- Nur jene Symbole auf (Web)dokumenten eine Berechtigung haben, deren Kommunikationscharakter (Botschaft) dem Autor bewusst ist
- und alles andere tunlichst weggelassen werden muss.
In manchen Veröffentlichungen zum Thema Divitis wird aber darauf hingewiesen, dass der Gebrauch von Dividern dann unerlässlich ist, wenn z.B. Boxes mit abgerundeten Ecken dargestellt werden sollen. Verallgemeinernd wird damit ausgesagt, dass die Kontrolle der Darstellung unter vollständiger Ausnutzung des Pixel-Rasters (pixelgenaues Design) ohne den Einsatz von Dividern nicht möglich ist.
Folgt man aber den Aussagen Watzlawicks, dann ist dass pixelgenaues Desing im Sinne der Kommunikationstheorie aber nicht notwendig, denn: Es ist nicht nachweisbar, dass winzige Details in der Darstellung von Webdokumenten zu deren sinngemäßen Interpretation beitragen(z.B. abgerundete statt spitze Ecken). Vielmehr besteht der Verdacht, dass "Webdesigner" Maßstäbe der Gestaltungsmöglichkeiten im Printbereich auch im Screendesign zu verwirklichen suchen. Beiträge, welche den exzessiven Divider-Einsatz zu rechtfertigen versuchen, erhärten die Annahme. Eine, mit semantischen Tags (Absätze, Listen, Hervorhebung, ..) in Kombination mit CSS umsetzbare Gestaltung, müsste allen Anforderungen an eine "semantisch korrekte Kommunikation" genügen. Eben: Form Follows Function.
... commentlink
- einer seits empfinde ich das ganze irgendwie als wortklauberei und ziemlich sinnlos
- andererseits ist schon klar wenn zB überschriften als solche im code net zu erkennen sind, dass das für blinde, suchmaschinen,... ein problem ist.
naja, so ganz kanns ich die aufregung net immer nachvollziehen - wenn div sein dann muss dann solls halt so sein.
z.B. bei dem webauftritt einer zeitschrift, wenn die homepage klare design verbindungen mit der druck-version haben soll. wenn da eben runde ecken drinnen sind, dann braucht man wohl divs.
die funktion der seite berührt das kaum, und wegen der form ist es halt so, dass die technik den bedürfnissen der menschen (zB corporate design) dienen sollte - und net umgekehrt die menschen sich der technik (div=böse) unterwerfen müssen!
Lg
Beda
ps: ich bin drauf gekommen, dass man bei seinem blog den schalter "site is public" einschalten sollte :) - jetzt ist die seite also endlich online:
/PimblogBeda/
... commentlink
... commentlink
... comment
