Newsletter 03/2003 – Seitenskizzen – Nutzen und Erstellung

Im letzten Newsletter vom Februar 2003 ging es um Sitemaps und wie man sie in der Konzeption nutzt, um die Inhalte zu strukturieren. Haben Sie die Struktur in den Griff bekommen, geht es an die Aufteilung des Platzes auf dem Bildschirm. Planen Sie frühzeitig, welche Elemente nötig sind. Denken Sie vor allem an:

  • Menüs und Untermenüs
  • evtl. übergeordnete Menüpunkte wie Impressum, Sitemap, Suche, Kontakt
  • Logo (mit Link zur Homepage)
  • Pfadangaben (z.B. Startseite>Unterbereich>Seite 2) und andere Orientierungsmöglichkeiten
  • Bild und Text

Meist genügt es, eine Seitenskizze für die Startseite und eine für alle weiteren Seiten anzulegen. Für Seiten mit Formularen oder speziellen Funktionen müssen aber eigene Seitenskizzen erstellt werden.

Wozu Seitenskizzen?

Seiten- oder Navigationsskizzen, auch Seitenscribbles oder Englisch wireframes genannt, zeigen an, welche Elemente auf der Seite gebraucht werden. Sie sagen noch nichts über das Design aus, auch die Position der Elemente legen sie nicht fest. Mit den Seitenskizzen verschaffen Sie als Konzepter sich selbst einen ersten Eindruck vom Aussehen der Site. So fällt Ihnen vielleicht auf, dass Sie eine wichtige Funktion vergessen haben. Dem Auftraggeber dienen die Seitenskizzen ebenfalls zur Kontrolle, den Grafikern zum Anfertigen der Gestaltungsentwürfe.

Die Seitenskizzen können auch als Testgrundlage dienen. Drucken Sie sie aus und zeigen Sie diese Freunden, Kollegen oder besser noch Vertretern der Zielgruppe. Fragen Sie sie, was sie hinter den einzelnen Buttons erwarten und worauf sie klicken würden.

Erklären Sie Grafikern und Auftraggebern, dass die Seitenskizzen keine Layoutvorgaben sind, diese werden erst später von der Grafik erstellt. Dennoch ist es nach meiner Erfahrung oft so, dass die Seitenskizzen die Anordnung der Elemente auf dem Screen bestimmen – auch wenn das nicht ihre Aufgabe ist. Das liegt daran, dass alle Beteiligten durch die intensive Beschäftigung mit den Seitenskizzen schon so an diese Anordnung gewöhnt sind, dass sie automatisch dabei bleiben. Es macht aber Sinn, vor der Gestaltung nochmals zu hinterfragen, ob es nicht bessere Lösungen gibt.

Manche Grafiker möchten möglichst genaue Vorgaben und freuen sich, wenn sie von Ihnen solche in Form einer guten Seitenskizze bekommen, die sie sehr ähnlich umsetzen. Andere Grafiker wiederum möchten bei der Gestaltung möglichst freie Hand behalten und begreifen die Seitenskizze tatsächlich nur als Vorgabe dafür, welche Elemente gebraucht werden und welche zusammengehören. Das hat weniger mit der Erfahrung der Grafiker zu tun, mehr mit ihrem Arbeitsstil. Sprechen Sie sich deshalb gut mit dem Grafiker ab. Sagen Sie ihm, was Ihnen wichtig ist und wo er freie Hand hat. Und behalten Sie beim Erstellen der Seitenskizzen im Hinterkopf, dass Sie damit eventuell schon Fakten schaffen.

Eine Seite kommt selten allein

Eine Seitenskizze stellt zwar nur die Aufteilung für eine einzige HTML-Seite dar, doch müssen Sie beim Erstellen die ganze Site im Blick haben. Die Seite ist der Zugang der Benutzer zu Ihrer Site. Kommen sie mit einer Seite nicht klar, kann das bedeuten, dass die ganze Site nicht angenommen wird. Denken Sie also über die Navigations-Architektur der Site nach, wenn Sie die Seitenskizzen anlegen. Stellen Sie sich z.B. folgende Fragen:

  • Wie gelangt der Benutzer auf die nächste Seite?
  • Wie auf die vorige?
  • Wie zur Startseite?
  • Wie zeigen Sie ihm, so er sich gerade auf der Site befindet, was er dort alles findet und/oder was er dort alles tun kann?

Viele dieser Punkte verlangen nach Elementen wie Links oder Buttons, die Sie in der Seitenskizze einzeichnen. Ebenso wichtig ist es, später bei der Gestaltung der Seiten die Elemente so zu platzieren, dass sie die Benutzer auch finden und ihre Funktionen verstehen.

Das ist nur ein kleiner Denkanstoß. Zum Thema Navigations-Architektur ließen sich noch viele Newsletter füllen. Denn sie bestimmt – zusammen mit der Informations-Architektur, welche die Struktur der Site festlegt – den Erfolg der Site.

Wie erstellt man Seitenskizzen?

Zum Erstellen der Seitenskizzen gibt es drei Werkzeuge:

  • Stift & Papier
  • Zeichenprogramm/Diagrammsoftware
  • HTML-Editor

Stift und Papier haben den Vorteil, dass man damit schnell arbeiten kann und allen Beteiligten meist klar ist, dass die Seitenskizzen tatsächlich nur eine Gedankenstütze sind und kein Designentwurf. Allerdings lassen sich Änderungen nur umständlich durchführen und sich wiederholende Elemente müssen immer wieder neu gezeichnet werden.

Deshalb arbeiten die meisten Konzepter mit Zeichenprogrammen oder Diagrammsoftware. Damit lassen sich schnell professionell aussehende Seitenskizzen zeichnen. Mit eigenen Bibliotheken für mehrfach verwendete Elemente oder Formulare und Standardelemente des Betriebssystems sparen Sie sich viel Arbeit. Microsoft Visio und Concept Draw (siehe Newsletter von Februar 2003) haben für letztere bereits vorgefertigte Bibliotheken. (Bei Concept Draw sind sie nicht leicht zu finden. Sie liegen unter den Bibliotheken bei Software Diagramm und heißen MacOS User Interface bzw. Win 95 User Interface. Visio hat sogar eine Bibliothek mit Formularelementen.)

HTML-Editoren setzen fast ein Drittel der Konzepter ein, von den restlichen zwei Dritteln werden sie zum Teil entschieden abgelehnt. Mit HTML-Editoren lassen sich klickbare Prototypen („Klickdummys“ oder „high-fidelity protoypes“) erstellen. Das heißt, die Seitenskizzen sind bereits verlinkt, und man bekommt ein Gefühl dafür, wie die Site später tatsächlich benutzt wird. Insbesondere für Auftraggeber, die wenig Erfahrung haben, ist das praktisch, weil sie sich die fertige Site dann besser vorstellen können. Allerdings kommt es oft zu unnötigen Diskussionen über die Gestaltung und Anordnung einzelner Elemente, obwohl diese auch durch den Prototyp noch nicht festgelegt sind. Da der Prototyp aussieht und funktioniert wie eine Website glauben viele, er sei bereits eine erste Version der Site. Ändert die Grafikerin später bei der Gestaltung die Anordnung, die Farben oder die Gliederung auf den Seiten, gibt es nicht selten Proteste, weil die Auftraggeber das Bild des Prototyps im Kopf haben. Ich arbeite daher mit möglichst einfachen Gestaltungselementen und Graustufen statt Farben, damit der Prototyp möglichst als solcher zu erkennen ist.

Ein weiterer Nachteil ist, dass sich Anmerkungen besser auf Papier machen lassen. Ein Ausdruck der Screenskizzen oder auch eine Worddatei, in der die Screenskizzen als Bilder eingefügt sind, eignet sich viel besser als ein Prototyp dazu, um Korrekturen des Auftraggebers aufzunehmen. Auch die Zuordnung der Anmerkungen zu den einzelnen Seiten ist hier meist eindeutig.

Sie sollten je nach Projekt und Auftraggeber entscheiden, mit welcher Technik Sie zum Erstellen der Screenskizzen arbeiten. Entscheiden Sie sich für den HTML-Prototyp, machen Sie den Auftraggebern klar, welche Aufgaben dieser erfüllen soll und welche nicht.

Links

https://www.benutzerfreun.de/newsletter/2003_02.html

Newsletter vom Februar 2003. Darin geht es um Sitemaps und ihre Anwendung zur Strukturierung der Inhalte in der Konzeption.

http://www.boxesandarrows.com/archives/practical_applications_visio_or_html_for_wireframes.php

Hervorragender (englischer) Artikel über die Vor- und Nachteile von HTML-Seitenskizzen.

http://www.boxesandarrows.com/archives/html_wireframes_and_prototypes_all_gain_and_no_pain.php

Guter Artikel über die Vorteile von HTML-Seitenskizzen.
http://www.boxesandarrows.com/archives/dreamweaver_primer.php

Kurzeinführung in Dreamweaver zum Erstellen von Seitenskizzen von derselben Autorin.
————————————————————————-
(c) Jens Jacobsen 2003

Bei Weiterleitung oder Zitat bitte Quellenangabe („Quelle:
benutzerfreun.de-Newsletter März 2003“).

————————————————————————-

Schreibe einen Kommentar