alps hypertexte
Wie kann man den Komplexitätsgrad im Design einer Website/Web-Anwendung drastisch reduzieren? Diese Frage ist je nach Fall zu beantworten und es gibt oft viele Lösungsmöglichkeiten. Aber eine Methode funktioniert fast immer, denn sie gilt für fast jede Website: Annäherung an das "X mal irgendwas"-Optimum.
Es hat sich mittlerweile herumgesprochen, dass es keine gute Idee ist, 7 verschiedene Schriftarten auf einer Webseite zu verwenden. Es hat sich auch herumgesprochen, dass man beim Design eine Farbpalette definieren und den Einsatz von Farben außerhalb dieser Palette vermeiden sollte. Je weniger Schriftarten, desto lesbarer und stimmiger die Typo. Je weniger (unpassende) Farben, desto weniger Augenkrebs.
Im Fall von Schriftarten sagt man, sollte man sich auf eine beschränken. Oder maximal noch eine zweite dazunehmen und mit Bedacht einsetzen. Bei 3 wird's schon holprig und ist nur für die richtigen Typo-Künstler etwas. Ab der vierten Schriftart legen sich 90% der "Webdesigner" sicher in die Nesseln.
Bei Farben darf es etwas mehr sein. So eine Palette kann aus 2 bis 12 Farben bestehen. Die Seite wird mit jeder Farbe für unsere Augen "komplexer" und es bedarf für jede weitere Farbe immer mehr Kunstverständnis und Talent, um diese noch stimmig rüberzubringen.
Hier gilt also die Regel: Weniger ist einfacher.
Farben und Schriftarten sind aber nicht alles. Wie sieht's mit anderen Aspekten aus? Abstände zum Beispiel. Ich finde, eine Art von Abstand macht die Sache ziemlich einfach und grob. Sagen wir mal ein Abstand von 15px. Alles hat zu allem einen Abstand von 15px oder einem Vielfachen davon. Einfach, simpel. Es dürfen aber auch ruhig 2 Arten von Abständen sein. Ich nenne sie in fapulous .macroPadder und .microPadder. Ein großer Abstand und ein kleiner. Der Innenabstand in den Layout-Spalten beträgt dort 16px (macroPadder); der Abstand zwischen den Bildern einer Image-Galerie dagegen nur 7px (microPadder). Ab der dritten Art von Abstandswert könnte das Gesamtbild darunter leiden, denke ich. Und vier verschiedene Arten von Abständen wären ein "no go".
Nehmen wir die Anzahl der Layout-Spalten in einem Design. 1: Joa, 2: Hmm, sehr bekannt und 3: auch gut bekannt und großen Sites vorbehalten. Ab der vierten Layoutspalte wird's häßlich. Moderne, konversionschaffende Sites sind heut zu Tage entweder als 2- oder als 3-Spalter zu sehen.
Noch ein Beispiel: Arten von Boxen. Eine Art: super. Zwei Sorten: Auch gut. Drei: Ok, jetzt stopp. Und ab der vierten Art von Box zerhaut es einem wieder das Ästhetikempfinden.
Machen wir weiter mit Thumbnail-Größen. Bei Communities kommen durchaus 3-4 verschiedene Größen vor. 4 ist aber dann auch die Obergrenze. Jedes zusätzliche Format kostet wieder mehr, als es bringt.
Fassen wir also die verschiedenen Aspekte und ihre Zahlen zusammen. "Minimum" ist hier die Mindestanzahl, die benötigt wird, um irgendetwas darzustellen, "Optimum" die beste Zahl und wird in den meisten Fällen als "einfach" empfunden und "Maximum" die Obergrenze von wo an die Dinge immer hässlicher und für den User komplexer werden.
| Minimum | Optimum | Maximum | |
|---|---|---|---|
| Schriftarten: | 1 | 2 | 3 |
| Farben: | 2 | 5-7 | 12 |
| Layoutspalten: | 1 | 2 | 3 |
| Arten von Boxen: | 1 | 2 | 3 |
| Thumbnail-Größen: | 1 | 2 | 3 |
| Aufzählunsglisten: | 1 | 2 | 3 |
Entlang der "Optimum"-Spalte (fettgerendert) lassen sich nun die Idealmaße einer Website-Designs abbilden. Bei der Komplexitätsreduktion im Design muss man es also ähnlich halten, wie bei einer Diät: versuchen, sich dem Idealmaß anzunähern, in dem man Verzicht übt.
alp on 2010-01-13 19:50 (Reply)
Sascha (Homepage) on 2010-01-13 14:56 (Reply)
Ich mag zwei: Action-Buttons und Info-Buttons. Ein Action-Button steht für eine Aufforderung, ein Info-Button für ein Informations- oder Navigationsangebot.
What do you think?