Das "X mal irgendwas"-Optimum

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.

Die "Idealmaße" eines Webseitenlayouts

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.

Monday, January 11. 2010
Defined tags for this entry: , ,

Comments

Display comments as (Linear | Threaded)

1

Sascha (Homepage) on 2010-01-13 14:56 (Reply)

Buttons haste noch vergessen.

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?
1.1

alp on 2010-01-13 19:50 (Reply)

Ich hab bestimmt noch mehr als das vergessen.

Bei Buttons wäre die Zahl 2 auch ideal. Aber ich hab erlebt, dass oft 3 und mehr gebraucht werden. Ich würde bei 3 bleiben:

- Standard-Button (groß)
- Standard-Button in mini (muss in eine Zeile passen)
- Alternativer Button (groß)
1.1.1

Sascha (Homepage) on 2010-01-15 20:03 (Reply)

Du wirst immer mehr zum Designer ;-)
2

florian (Homepage) on 2010-02-28 17:37 (Reply)

sehr cooler artikel, ich finde hier immer wieder neue ideen, anregungen und wertvolle tipps!

Trackbacks


No Trackbacks

Add Comment

BBCode format allowed
Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA


Über

Das hier ist das private Weblog von Alp Uçkan. Ich entwickle Websites seit 1997 und arbeite derzeit als freiberuflicher Frontend-Entwickler in Berlin. Ich sammle außerdem noch Links in delicious und zwitschere vor mich hin.

Alp Uçkan ()
Gubitzstr. 20a
Berlin 10409 Germany
Jabber

Specialp Features

fapulous Framework (neu!)
Das erste XHTML/CSS-Framework auf Basis der Faux Absolute Positioning-Technik. Beinhaltet viele performante Konstrukte. Der Stoff, aus dem professionelle Websites gemacht sind ... ;-)

monitorThis 1.0
With MonitorThis you can subscribe to 26 different search engine feeds at the same time.

Business Blogging Weeks
Blog-Serie über die Kommerzialisierung der Blog-Szene in 2005

s9y Theme: adaptation
Ein leserfeundliches und sich der Monitorgröße anpassendes simples Theme für Serendipity.

Was ist FOAF?
Grundlagenartikel über FOAF. Auch einbindbar in die eigene Website.

Was ist RSS?
Grundlagenartikel über RSS. Auch einbindbar in die eigene Website.

neueste Leser-Kommentare:

12.03.2010 15:30
Also von javascriptbasierenden Spamschutz halte ich wenig. Dieser mag vielleicht Ema [...]
Usb... about Portable User
04.03.2010 20:30
Hi ^^ habe ne frage...und zwar habe ich ein anderes Problem und würde mich freuen we [...]
28.02.2010 17:37
sehr cooler artikel, ich finde hier immer wieder neue ideen, anregungen und wertvoll [...]