Gute
Seiten, schlechte Seiten
Interface-Design für
webbasierte Anwendungen selbst erlernen
Das Angebot von Information
und die digitale Aufbereitung von Daten zählen zu den großen Themen unserer
modernen Gesellschaft. Das Internet dient als wichtigste Plattform der
Informationsverbreitung. Ob Sportergebnisse, News, Produktinformationen oder
Witze; es handelt sich immer um informationsorientierte Services.
Bei soviel Angebot bekommt
man Lust, auch dabei zu sein – Anlass für viele, sich mit der Bereitstellung
von derartigen Diensten zu befassen.
Diese Motivation war und ist
Ursache für ein stark verbreitetes Wissen im Bereich Interface-Design für
Webanwendungen. Viele Menschen haben Kenntnisse in zugrundeliegenden
Technologien wie HTML, CSS oder JavaScript.
Technisch mögen diese
Lösungen funktionieren, die Benutzerschnittstellen sind jedoch häufig schlecht
konstruiert. Wichtige Punkte wie Kompatibilität, Anwendbarkeit, Navigierbarkeit,
Fehlertoleranz, etc. bleiben von vielen Entwicklern unberücksichtigt. Dieser
Artikel soll einen Gedankenanstoß geben, wie man es besser machen könnte.
Sauber codieren
Benutzerschnittstellen für
webbasierte Anwendungen werden üblicherweise mit der Textauszeichnungssprache
HTML (Hypertext Markup Language) erstellt. HTML ist ein Standard, der vom sog.
„World Wide Web Consortium“ (www.w3c.org) aufrechterhalten und
verwaltet wird.
Browserhersteller
berücksichtigten diesen Standard in der Vergangenheit in ihren
Implementierungen nicht konsequent. Jeder Hersteller bot zusätzliche Features
für Websites an, die durch neue HTML-Sprachelemente realisiert werden konnten.
Mit der Zeit entstanden propriertäre HTML-Dialekte, die es Entwicklern schwer
machten und auch heute noch machen, kompatible Websites zu gestalten; Websites,
die unter allen Browsern gleich erscheinen. Mit viel Erfahrung und Geschick
findet sich eine Schnittmenge aller anwendbaren HTML-Konstrukte, die einen breiten
Kompromiss erlaubt.
Als Einsteiger sollte man
sich von Beginn an auf diese Problematik einstellen und einen „sauberen“
HTML-Stil erlernen. Denn nur Websites, die von möglichst vielen Menschen
betrachtet werden können, haben eine Chance, erfolgreich zu sein.
Das Online-Handbuch SelfHTML
(selfhtml.teamone.de) bietet jedem die Möglichkeit, sich sämtliche
Basistechnologien für Web-Interface-Design anzueignen. Dabei werden keine
Vorkenntnisse in der Web-Entwicklung vorausgesetzt. Die Themen HTML/XHTML, CSS
(Cascading Stylesheets), XML und JavaScript werden ausführlich beschrieben.
Jedes Sprachelement wird vorgestellt und häufig anhand eines Beispiels
erläutert. Die einzelnen Erklärungen werden durch Kompatibilitätshinweise
ergänzt. Somit hat der Neuling die Möglichkeit, sich einen guten
Entwicklungsstil anzugewöhnen.
Abgerundet wird das
Informationsangebot mit Artikeln über Grafik, Web-Projektverwaltung und
Internationalisierung. Besonders der Abschnitt „Grafik“ sei dem Leser
empfohlen. Er erläutert die Grundlagen über Grafikformate und Farben, die auf
Websites Anwendung finden.
Zu SelfHTML existiert eine
Portalseite, die über News, Tipps und Tricks rund um das Thema informiert.
Diese Seite ist unter der Adresse selfaktuell.teamone.de zu erreichen.
SelfHTML 8.0 (selfhtml.teamone.de): Die aktuelle Version des Online-Klassikers bietet Tipps und Tricks für den angehenden Web-Entwickler
Gutes GUI-Design
entwickeln
Jede Website stellt ein sog.
„Grafisches User Interface“ (GUI) zur Verfügung. Diese Oberfläche soll dem
Benutzer die angebotene Information möglichst anschaulich und verständlich
vermitteln – ein Punkt, bei dem sehr viele Websites versagen.
Die DIN-EN-ISO 9241, Teil 10
beschreibt die Grundsätze der Aufgabenangemessenheit,
Selbstbeschreibungsfähigkeit, Steuerbarkeit, Erwartungskonformität,
Fehlertoleranz, Individualisierbarkeit und Lernförderlichkeit für Grafische
User Interfaces.
Wie man diese Grundsätze
erfolgreich bei der Website-Gestaltung umsetzen kann, wird von mehr als 1000 Links zu diesem Thema auf www.usableweb.com beantwortet. Usable Web ist eine
Sammlung von Links über Informationsstruktur, menschliche Einflüsse,
Benutzerschnittstellen und gutes Anwendungsdesign für Websites.
Design-Grundlagen
erarbeiten
Damit Websites allgemein gut
ankommen, müssen sie auch grafisch gut gestaltet sein. Als Laie im Bereich
Grafik-Design hat man im Web viele Möglichkeiten, entsprechende Grundlagen zu
erlernen.
Auf der Website www.metacolor.de wird dem Besucher eine ausführliche
Einführung in die Farbtheorie geboten. Dabei werden sowohl physikalische als
auch psychologische Aspekte beleuchtet. Nach dem Durcharbeiten der geführten
Tour eröffnen sich dem Lernenden völlig neue Perspektiven zu den Themen
Farbenlehre, Farbsymbolik, Farbharmonie und Marketing/PR.
Weiterführende Information
zur Gestaltung von Websites ist auf AskTog (www.asktog.com) zu finden. Eine eigene
„Design Section“ erläutert die Grundsätze guten Webdesigns.
Inspiration findet der
angehende Site-Designer in zahlreichen Online-Magazinen. Unter den Adressen www.experimental.ro und www.k10k.net verbergen sich zwei
Plattformen für Designer, die Gedankenanstöße suchen. Mit Dr. Web (www.drweb.de)
bietet sich dem Surfer eine deutschsprachige Site, die neben Tipps und Tricks
zu verschiedenen Themen sog. Tutorials (Lehrgänge) für die Anwendung diverser
Software vorstellt. Eine gute Alternative mit vielen Tutorials bildet das
englischsprachige Magazin DigitalWeb (www.digital-web.com).
www.experimental.ro: Hier findet der
ambitionierte Designer Inspiration und Hinweise für gutes Design
Das Werkzeug kennen
lernen
Als Web-Entwickler ist man
auf leistungsfähige Entwicklungswerkzeuge angewiesen. Meist werden
unterschiedliche Produkte für grafisches Design und Interface-Codierung
verwendet.
Dabei kommen häufig Produkte
der Anbieter Adobeä und Macromediaä zur Anwendung. Beide Firmen führen Websites, die auf
hilfreiche Tutorials verweisen.
Unter www.adobe.com/support bietet Adobeä ein sog. „Expert Center“ an, zu dem man sich
einmalig registrieren muss. Dort erhält man gute Einführungen zu allen
Produkten, einen Download-Bereich und vieles mehr.
Macormediaä versorgt seine Anhänger mit einer Link-Sammlung zu
verschiedenen Lehrgängen unter www.macromedia.com/support.
Es lohnt sich, die Seiten
der Hersteller einmal anzusehen, um den Umgang mit entsprechenden Werkzeugen zu
erlernen. Meist erhält man auch Hinweise auf unabhängige Websites von
verschiedenen Interessensgruppen, die kostenlose Tipps geben.
Auf die Stimmen der
anderen hören
Sie können noch so viele
Tutorials, Online-Artikel oder Bücher zum Thema Web-Interface-Design lesen –
nur wenn Sie gut gemeintes und ehrliches Feedback von anderen ernst nehmen,
können Sie sich zu einem guten Seiten-Gestalter entwickeln. Obig genannte
Ressourcen helfen Ihnen vielleicht, sich Grundlagen-Kenntnisse zu verschaffen.
Vergessen Sie nicht – Übung macht den Meister!
Weitere Online-Ressourcen
zum Thema:
Linksammlungen und
Knowledge-Bases:
Web-Browsers:
www.mozilla.org
Suchmaschinen: