Screen. Resolution. Scrolling. Trends. Namics.

Jesko Arlt. Principal Consultant.

3. August 2010

Namics.Screen. Resolution. Scrolling. Trends.

Inhalt

Technische Entwicklung

To Scroll or not to Scroll?

Zusammenfassung und weiterführende Quellen

Namics.Screen. Resolution. Scrolling. Trends.

Technische Entwicklung

Namics.Screen. Resolution. Scrolling. Trends.

Aktuell übliche Bildschirmauflösungen

Grundlagen

Mobilität, KommunikationProduktivität, Office

Zwischen1024 x 768und 1400x768

Zwischen480 x 320und 960 x 640

Zwischen1024 x 768und 1920 x 1200und mehr

Zwischen800 x 480und 1280 x 800

2010 werden etwa 180 Mio. Monitore verkauft, 200 Mio. Note- und Netbooks, 6 Mio. iPads und 170 Mio. Smartphones

Namics.Screen. Resolution. Scrolling. Trends.

Der Alltag: Monitor Auflösungen im Web

Grundlagen

Jan-00 Jan-01 Jan-02 Jan-03 Jan-04 Jan-05 Jan-06 Jan-07 Jan-08 Jan-09 Jan-100%

10%

20%

30%

40%

50%

60%

70%

80%

Höher

1024x768

800x600

640x480

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

Namics.Screen. Resolution. Scrolling. Trends.

Beispiel Bildschirmauflösung: spiegel.de

Grundlagen

HP mini Netbook

1024x768 Standard PC

iPad

Über 85% der User sehen mindestens diese Ansicht oder mehr.

Namics.Screen. Resolution. Scrolling. Trends.

Sichtbarer Bereich auf ausgewählten Webseiten

Sichtbarer Bereich

Von links:BBC, Play, Amazon.co.uk,New York Times

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

Namics.Screen. Resolution. Scrolling. Trends.

Trend: PC und Heimkino

Trends

30“ Monitore von Apple und Dell

Monitore werden immer größer und der PC wächst mit dem Fernseher und dem DVD-Player zusammen.

Mit der Darstellungsgröße steigt auch der Anspruch an die grafische Qualität von Webseiten. „Hochglanz“ wird nicht nur im Druck und im Film erwartet.

Best Practice:Den gewonnenen Raum für attraktive Darstellungen nutzen und so die emotionale Wirkung von Webseiten verstärken.

Namics.Screen. Resolution. Scrolling. Trends.

Beispiel: Size doesn‘t matter

Trends

Zwei Browserfenster auf einem 30“ Monitor

Auf großen Monitoren spielt die Höhe von Webseiten nur noch eine untergeordnete Rolle – der Bildschirm bietet ohnehin mehr Informationen als auf einen Blick verarbeitet werden können.

Namics.Screen. Resolution. Scrolling. Trends.

Trend: Applications

Trends

Nexus One und iPhone 4

Da wo die Geräte immer kleiner werden speziell programmierte Applikationen und nicht Webseiten am häufigsten genutzt.

Wer unterwegs ist sucht in der Regel gezielt nach Informationen: Produktinformationen, Adressen, Ortsbeschreibungen.

Best Practice:Die mobilen Versionen von Webseiten sollten inhaltlich und funktional genau auf diese Anforderungen skaliert werden.

Namics.Screen. Resolution. Scrolling. Trends.

Beispiel: Berühren, Scrollen, Blättern

Trends

Google Maps und Wetter Applikation

Opera Browser auf Adroid und iPhone

Das „Scrollen“ gehört zu fast jeder Applikation auf mobilen Geräten dazu.

Best Practice:Mobile Anwendungen und Webseiten für mobile Anwendungen sollten mit den verschiedenen Scrollrichtungen eindeutige Funktionen verbinden: Nach unten „vertiefen“, zur Seite „erweitern“ und oben einen „Überblick“ ermöglichen.

Namics.Screen. Resolution. Scrolling. Trends.

Trend: Hochformat

Trends

Mit dem iPad erlebt das Hochformat eine Renaissance.

Webseiten, die nur für den sichtbaren Bereich im Querformat angelegt sind füllen das Hochformat nur unzureichend aus.

Namics.Screen. Resolution. Scrolling. Trends.

Trend: Touchscreen

Trends

Gemeinsam mit dem Hochformat ermöglicht der Touchscreen komfortables Klicken, Scrollen und Blättern.

Webseiten lassen sich in Zukunft „anfassen“.

Namics.Screen. Resolution. Scrolling. Trends.

Gegenwart: Design für Endgeräte

Umsetzung

A

B C D

A mobile

B mobile

E mobile

Querformat

Mobile

Gegenwärtig ist die effizienteste Lösung, eine Webseite für stationäre Geräte, Notebooks und komfortable Netbooks zu entwickeln. Damit kann von einer Bildschirmbreite von mindestens 1024 Pixeln und einer Höhe des sichtbaren Bereichs von mindestens 470 Pixeln ausgegangen werden.

Je nach Zielgruppe bietet es sich an spezielle mobile Versionen anzubieten, die sich von der Webseite unterscheiden können.

Namics.Screen. Resolution. Scrolling. Trends.

Zukunft: Flexibles Design

Umsetzung

A

B C D

A

B C

D

A

B

C

D

In Zukunft wird es im Netz zunehmend flexible Layouts geben, bei denen sich die Elemente unterschiedlichen Größen der Ausgabegeräte anpassen.

Gegenwärtig ist der Aufwand für so ein Layout im Vergleich zum geringen Nutzen und den (noch nicht entwickelten) Ansprüchen bzw. Sehgewohnheiten der Anwender zu hoch.

Querformat

Hochfomat

Mobile

Namics.Screen. Resolution. Scrolling. Trends.

To Scroll or not to Scroll?

Namics.Screen. Resolution. Scrolling. Trends.

Inhaltselemente und Struktur

Wahrnehmung

A

B C D

A

G C D

E F B

A

B C D

E R G

F H

?

Einfach zu verstehen:Kurz, strukturiert und geordnet.

Schwer zu verstehen:Anzahl der Strukturelemente größer als 5 und ungeordnet.

Nicht zu verstehen:Anzahl der Strukturelemente größer als 7, unstrukturiert und ungeordnet.

Vgl. auch http://de.wikipedia.org/wiki/Millersche_Zahl

Namics.Screen. Resolution. Scrolling. Trends.

In Anwendungen vertrauen

Wahrnehmung

Reduktion von Komplexität

Sicherheit in der Anwendung

Vertrauen in den Anbieter

Vertrauen entsteht durch die Reduktion von Komplexität (Luhmann).

Die Reduktion von Komplexität bzw. die schrittweise Skalierbarkeit ist grundlegend für nutzerfreundliche Anwendungskonzeption und in der Folge das vertrauen in den Anbieter bzw. die Marke.

Namics.Screen. Resolution. Scrolling. Trends.

Was passiert beim Scrollen oder Sliden

Wahrnehmung

?

Komplexität wird schrittweise erweitert.

Namics.Screen. Resolution. Scrolling. Trends.

Aus der Not eine Tugend machen

Vorteile des Scrollens

1. Nutzergerechte Aufbereitung von Informationen (Usability).

2. Fokussierung auf Konversionsziele in unterschiedlichen Bildschirmbereichen.

3. Mehr Vertrauen in Anbieter und Marke. (Markenwert)

4. Mehr Raum für Gestaltung: Emotionalität und Entscheidungen brauchen Raum.

5. „Vertiefen“ von Informationen.

6. Haptischer Anker: Scrollen oder „Sliden“ (Touchpad)

7. Scrollen ist leichter als Klicken und immer schon ein Commitment mit dem Inhalt.

Wahrnehmung

Namics.Screen. Resolution. Scrolling. Trends.

Zusammenfassung

Namics.Screen. Resolution. Scrolling. Trends.

Zusammenfassung

Jedes Display (TV, PC, Notebook, Tablet-PC, mobile Endgeräte) wird in Zukunft Internetinhalte abbilden können.

Gegenwärtig ist der Aufwand ein Konzept und Layout für alle unterschiedlichen Endgeräte zu entwickeln sehr hoch.

Hochformat, Zoomen und Scrollen werden durch mobile Geräte auch im Netz wieder akzeptiert.

Empfehlung:

Webseiten für 1024 Pixel Breite entwickeln (Nielsen Empfehlung seit 2006).

Vorteile von vertikalem Scrollen in der Konzeption berücksichtigen.

Bei Bedarf spezielle Versionen (mit eingeschränkter Funktionalität) für mobile Endgeräte anbieten.

Namics.Screen. Resolution. Scrolling. Trends.

Ausgewählte Quellen

Unfolding the Fold

http://blog.clicktale.com/2006/12/23/unfolding-the-fold/

Blasting the Myth of the Fold

http://www.boxesandarrows.com/view/blasting-the-myth-of

Scroll With Me, Baby: The 80/20 Rule Strikes Again

http://www.grokdotcom.com/2010/06/14/scroll-with-me-baby-the-80-20-rule-strikes-again/

The myth of the page fold: evidence from user testing

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

(Quellensammlung: Martin Kliehm)

Namics.

Vielen Dank für Ihre Aufmerksamkeit.

jesko.arlt@namics.com

© Namics

Screen. Resolution. Scrolling. Trends.

Screen. Resolution. Scrolling. Trends.