Webmaster-Blog » Webdesign

“Ich sehe was, was du nicht siehst” – Der sichtbare Bereich

Bernd — Fri, 22 Jan 2010 15:06:30 +0000

Der sichtbare Bereich einer Website. Ein viel diskutiertes Thema. Er variert mit der Größe des Bildschirms, der vewendet Auflösung und natürlich, ob man das Fenster “Fullscreen” öffnet oder nicht.

Legionen von Webdesignern, Webanalysten und Beratern haben Stunden in Diskussionen verbracht, was den nun wo hinkommt und was “rausfällt”. Meistens ist der sichtbare Bereich einfach zu klein um alle wichtigen Punkte reinzuquetschen. “Sollen wir jetzt lieber die Prospektbestellung oder den Kontakt Button verschieben”, lautet dann oft die Komprissfrage. Ein aktueller Artikel, samt Studie, sollte jedoch Erleichtung schaffen :

The myth of the page fold: evidence from user testing

Hochinteressanter Artikel über den “Mythos” des sichbaren Bereichs, basierend auf einer äußerst fundierten Studie mit Eyetracking und Heatmap Tests.

Kernaussage: Der sichtbare Bereich ist eigentlich immer unwichtiger. Besser schafft genug Platz und Freiräume , als man quetscht jeden CTA (Call to Action) Button in eine kleines Fenster. Der User erkennt Scrollbalken (Eyetracking Studien zeigen das ganz deutlich), außerdem erkennen viele Surfer Elemente am unteren Ende derÂ Seite und scrollen somit weiter.

Ein paar Design Tips, die der Artikel gibt:

“Weniger ist mehr” – Freiräume schaffen, nicht alles zusammenquetschen.
Kräftige, horizantale Balken oder grafische Elemente wirken sich negativ auf das Weiterscrollen aus
Keine Scrollbalken in der Seite verwenden (Iframes, Divs)!!

Hier geht’s zum Artikel (englisch)

http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm

Tools zur Browser Resolutions:

http://browsersize.googlelabs.com/

Cooles Webdesign – Inspirationen

ngroth — Thu, 21 Jan 2010 12:33:07 +0000

Webdesign ist in erster Linie auch Produktdesign. In Schönheit sterben alleine reicht meistens nicht. Trotzdem gibt es eine Reihe von ganz her. Hier ein paar Links zur Inspiration:

Single Page Website und Portfolio Seiten:

Auch unsere neue Coming Soon Seite besteht nur aus einer langen Seite http://www.limesoda.at

Weißes Webdesign

webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs

Blogdesign

Ein Blog muss nicht immer nur ein Sitebar mit Tagcloud und 2 Jahre alten Posts sein

spyrestudios.com/creative-blog-design-layouts/
Wunderbarer Artikel über coole Blogposts: www.smashingmagazine.com/the-death-of-the-blog-post/

Wunderschöne Webdesigns (allgemein)

Breaking the Rules – Außergewöhnliche Websiten:

www.visualswirl.com/2009/12/15-websites-that-break-the-rules/

Verzeichnisse und Sammlungen:

Formulare und Buttons (CTA)

Gute Formulare sind nicht nur hübsch anzusehen, sondern erhöhen auch die Conversionrate!

Typographie

Meister der Typographie – Hammer!!

http://designm.ag/inspiration/masters-of-typography/

Webdesign und die Größe des Browserfenster

Bernd — Thu, 28 Jun 2007 18:36:19 +0000

EinleitungÂ Â

Mit der Verbreitung von kilometergroßen Flachbildschirmen, Widescreen-Laptops und neueren Betriebssystemen (man glaubt kaum wieviele User nicht wussten, wo man die Auflösung im Windows ändert…) stiegen natürlich auch die maximalen Auflösung von Bildschirmen. Auf der anderen Seite, ist es ja durch div. MobileKameraIchKannAlles Handys wieder notwendig auch für sehr geringe Auflösungen zu optimieren. Design für Mobiles ist hier aber nicht das Thema – andere Baustelle.

Webdesigner jubeln, bedeutet doch eine höhere Screen-Resolution auch mehr Platz für Designs und Inhalt.Â Â Schaut man sich aktuelle Browserstatistiken an, so hat sich mittlerweile die Screenresolution von 1024×768 durchgesetzt. Doch wirklich genau weiß niemand, wie groß der sichtbare Bereich des Users ist… Das hängt von Betriebssystem (Windows, Mac, etc.), Browser (Internet Explorer, Safari, Firefox, etc.) und auch installierten Toolbars etc. ab.

Neben der Breite des Designs (niemand mag Scrollbalken und Herumgehupfe) ist die Höhe sehr wichtig und zwar wenn es darum geht, wo man welchen Inhalt darstellt. Information, die für einen Großteil der User erst durch scrollen sichtbar wird, geht dadurch oft verloren. Speziell der Startseite gilt hier erhöhtes Interesse bei der Optimierung…

Punkte, die man beachten sollte:

Nicht alle User surfen immer mit maximiertem Fenster (Fullsize)
Glaubt man verschiedene Quellen dürften ca. 30% aller User nicht mit maximiertem Fenster surfen.
Viele User haben div. Toolbars installiert (Google-Toolbar, Alexa, div. Socialbookmarks etc.).
Das hat natürlich Auswirkungen auf die Höhe des sichtbaren Bereiches.
Durch die Verbreitung von Widescreen-Laptops steigt die max. sichtbare Breite z.B. auf 1680 oder 2000 Pixel. -> Eine Anpassung des Hintergrundes oder Backgroundimages ist notwendig (Beispiel: alte Version (1600px) http://www.bandunion.at/Â - neue Version: http://www.bandunion.at/relaunch.html)
Je höher die Standardauflösung eines Users, desto größer die Wahrscheinlichkeit, dass er nicht mit einem maximierten Browserfenster surft. User mit 800×600 surfen dagegen fast immer mit Fullscreen, da sie sowieso fast nix sehen

Für welche Auflösung soll man also optimieren? Das hängt natürlich auch von der Art der Webseite und der Zielgruppe ab und wieviel Prozent man abdecken will. Eine staatliche Webseite hat natürlich andere Anforderung, als eine Clanwebsite für Counterstrike… einige gute Antworten gibt’s hier. 776x424px wird hier als sinnvolle Größe für fixe Breiten angeben und auch begründet. Selbstprogrammierte Linuxbrowser, die von 3 Menschen weltweit verwendet werden, sind damit vielleicht nicht abgedeckt, aber sonst…

Falls jemand noch andere Erfahrung oder Links zu Statistiken hat, würden mir sich über Kommentare freuen!

Interessante Links und Quellen

Bericht & kleine Studien über Browsergrößen:

Browserstatistiken:

http://www.w3schools.com/browsers/browsers_display.asp