Transcript
Page 1: Screen Resolution Trends

Screen. Resolution. Scrolling. Trends. Namics.

Jesko Arlt. Principal Consultant.

3. August 2010

Page 2: Screen Resolution Trends

Namics.Screen. Resolution. Scrolling. Trends.

Inhalt

Technische Entwicklung

To Scroll or not to Scroll?

Zusammenfassung und weiterführende Quellen

Page 3: Screen Resolution Trends

Namics.Screen. Resolution. Scrolling. Trends.

Technische Entwicklung

Page 4: Screen Resolution Trends

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

Page 5: Screen Resolution Trends

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

Page 6: Screen Resolution Trends

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.

Page 7: Screen Resolution Trends

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

Page 8: Screen Resolution Trends

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.

Page 9: Screen Resolution Trends

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.

Page 10: Screen Resolution Trends

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.

Page 11: Screen Resolution Trends

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.

Page 12: Screen Resolution Trends

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.

Page 13: Screen Resolution Trends

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“.

Page 14: Screen Resolution Trends

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.

Page 15: Screen Resolution Trends

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

Page 16: Screen Resolution Trends

Namics.Screen. Resolution. Scrolling. Trends.

To Scroll or not to Scroll?

Page 17: Screen Resolution Trends

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

Page 18: Screen Resolution Trends

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.

Page 19: Screen Resolution Trends

Namics.Screen. Resolution. Scrolling. Trends.

Was passiert beim Scrollen oder Sliden

Wahrnehmung

?

Komplexität wird schrittweise erweitert.

Page 20: Screen Resolution Trends

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

Page 21: Screen Resolution Trends

Namics.Screen. Resolution. Scrolling. Trends.

Zusammenfassung

Page 22: Screen Resolution Trends

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.

Page 23: Screen Resolution Trends

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)

Page 24: Screen Resolution Trends

Namics.

Vielen Dank für Ihre Aufmerksamkeit.

[email protected]

© Namics

Screen. Resolution. Scrolling. Trends.

Page 25: Screen Resolution Trends

Screen. Resolution. Scrolling. Trends.


Top Related