Click here to load reader

Screen Resolution Trends

  • View
    3.044

  • Download
    0

Embed Size (px)

DESCRIPTION

Überblick über Trends bei Bildschirmauflösungen und der Frage ob man Scrollen darf, muß oder sollte ...

Text of Screen Resolution Trends

  • 1. Screen. Resolution. Scrolling. Trends. Namics.
    Jesko Arlt. Principal Consultant.
    3. August 2010

2. Inhalt
Technische Entwicklung
To Scroll or not to Scroll?
Zusammenfassung und weiterfhrende Quellen
Screen. Resolution. Scrolling. Trends.
3. Technische Entwicklung
Screen. Resolution. Scrolling. Trends.
4. Aktuell bliche Bildschirmauflsungen
Grundlagen
Screen. Resolution. Scrolling. Trends.
Zwischen
1024 x 768
und
1400x768
Zwischen
480 x 320
und
960 x 640
Zwischen
1024 x 768
und
1920 x 1200
und mehr
Zwischen
800 x 480
und
1280 x 800
Mobilitt, Kommunikation
Produktivitt, Office
2010 werden etwa 180 Mio. Monitore verkauft, 200 Mio. Note- und Netbooks, 6 Mio. iPads und 170 Mio. Smartphones
5. Der Alltag: Monitor Auflsungen im Web
Grundlagen
Screen. Resolution. Scrolling. Trends.
Quelle: http://www.w3schools.com/browsers/browsers_display.asp
6. Beispiel Bildschirmauflsung: spiegel.de
Grundlagen
Screen. Resolution. Scrolling. Trends.
HP mini Netbook
iPad
ber 85% der User sehen mindestens diese Ansicht oder mehr.
1024x768 Standard PC
7. Sichtbarer Bereich auf ausgewhlten Webseiten
Screen. Resolution. Scrolling. Trends.
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
8. Trend: PC und Heimkino
Trends
Screen. Resolution. Scrolling. Trends.
Monitore werden immer grer und der PC wchst mit dem Fernseher und dem DVD-Player zusammen.
Mit der Darstellungsgre steigt auch der Anspruch an die grafische Qualitt von Webseiten. Hochglanz wird nicht nur im Druck und im Film erwartet.
Best Practice:
Den gewonnenen Raum fr attraktive Darstellungen nutzen und so die emotionale Wirkung von Webseiten verstrken.
30 Monitore von Apple und Dell
9. Beispiel: Size doesnt matter
Trends
Screen. Resolution. Scrolling. Trends.
Auf groen Monitoren spielt die Hhe von Webseiten nur noch eine untergeordnete Rolle der Bildschirm bietet ohnehin mehr Informationen als auf einen Blick verarbeitet werden knnen.
Zwei Browserfenster auf einem 30 Monitor
10. Trend: Applications
Trends
Screen. Resolution. Scrolling. Trends.
Da wo die Gerte immer kleiner werden speziell programmierte Applikationen und nicht Webseiten am hufigsten 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.
Nexus One und iPhone 4
11. Beispiel: Berhren, Scrollen, Blttern
Trends
Screen. Resolution. Scrolling. Trends.
Das Scrollen gehrt zu fast jeder Applikation auf mobilen Gerten dazu.
Best Practice:
Mobile Anwendungen und Webseiten fr mobile Anwendungen sollten mit den verschiedenen Scrollrichtungen eindeutige Funktionen verbinden: Nach unten vertiefen, zur Seite erweitern und oben einen berblick ermglichen.
Google Maps und Wetter Applikation
Opera Browser auf Adroid und iPhone
12. Trend: Hochformat
Trends
Screen. Resolution. Scrolling. Trends.
Mit dem iPad erlebt das Hochformat eine Renaissance.
Webseiten, die nur fr den sichtbaren Bereich im Querformat angelegt sind fllen das Hochformat nur unzureichend aus.
13. Trend: Touchscreen
Trends
Screen. Resolution. Scrolling. Trends.
Gemeinsam mit dem Hochformat ermglicht der Touchscreen komfortables Klicken, Scrollen und Blttern.
Webseiten lassen sich in Zukunft anfassen.
14. Gegenwart: Design fr Endgerte
Umsetzung
Screen. Resolution. Scrolling. Trends.
A
Gegenwrtig ist die effizienteste Lsung, eine Webseite fr stationre Gerte, Notebooks und komfortable Netbooks zu entwickeln. Damit kann von einer Bildschirmbreite von mindestens 1024 Pixeln und einer Hhe 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 knnen.
B
C
D
Querformat
A mobile
B mobile
E mobile
Mobile
15. Zukunft: Flexibles Design
Umsetzung
Screen. Resolution. Scrolling. Trends.
A
In Zukunft wird es im Netz zunehmend flexible Layouts geben, bei denen sich die Elemente unterschiedlichen Gren der Ausgabegerte anpassen.
Gegenwrtig ist der Aufwand fr so ein Layout im Vergleich zum geringen Nutzen und den (noch nicht entwickelten) Ansprchen bzw. Sehgewohnheiten der Anwender zu hoch.
B
C
D
Querformat
A
A
B
B
C
D
D
C
Hochfomat
Mobile
16. To Scroll or not to Scroll?
Screen. Resolution. Scrolling. Trends.
17. Inhaltselemente und Struktur
Wahrnehmung
Screen. Resolution. Scrolling. Trends.
Einfach zu verstehen:
Kurz, strukturiert und geordnet.
A
A
A
H
F
B
C
D
G
C
D
B
C
D
Schwer zu verstehen:
Anzahl der Strukturelemente grer als 5 und ungeordnet.
E
F
B
E
R
G
?
Nicht zu verstehen:
Anzahl der Strukturelemente grer als 7, unstrukturiert und ungeordnet.
Vgl. auch http://de.wikipedia.org/wiki/Millersche_Zahl
18. In Anwendungen vertrauen
Wahrnehmung
Screen. Resolution. Scrolling. Trends.
Vertrauen entsteht durch die Reduktion von Komplexitt (Luhmann).
Die Reduktion von Komplexitt bzw. die schrittweise Skalierbarkeit ist grundlegend fr nutzerfreundliche Anwendungskonzeption und in der Folge das vertrauen in den Anbieter bzw. die Marke.
19. Was passiert beim Scrollen oder Sliden
Wahrnehmung
Screen. Resolution. Scrolling. Trends.
Komplexitt wird schrittweise erweitert.
?
20. Aus der Not eine Tugend machen
Vorteile des Scrollens
Nutzergerechte Aufbereitung von Informationen (Usability).
Fokussierung auf Konversionsziele in unterschiedlichen Bildschirmbereichen.
Mehr Vertrauen in Anbieter und Marke. (Markenwert)
Mehr Raum fr Gestaltung: Emotionalitt und Entscheidungen brauchen Raum.
Vertiefen von Informationen.
Haptischer Anker: Scrollen oder Sliden (Touchpad)
Scrollen ist leichter als Klicken und immer schon ein Commitment mit dem Inhalt.
Wahrnehmung
Screen. Resolution. Scrolling. Trends.
21. Zusammenfassung
Screen. Resolution. Scrolling. Trends.
22. Zusammenfassung
Jedes Display (TV, PC, Notebook, Tablet-PC, mobile Endgerte) wird in Zukunft Internetinhalte abbilden knnen.
Gegenwrtig ist der Aufwand ein Konzept und Layout fr alle unterschiedlichen Endgerte zu entwickeln sehr hoch.
Hochformat, Zoomen und Scrollen werden durch mobile Gerte auch im Netz wieder akzeptiert.
Empfehlung:
Webseiten fr 1024 Pixel Breite entwickeln (Nielsen Empfehlung seit 2006).
Vorteile von vertikalem Scrollen in der Konzeption bercksichtigen.
Bei Bedarf spezielle Versionen (mit eingeschrnkter Funktionalitt) fr mobile Endgerte anbieten.
Screen. Resolution. Scrolling. Trends.
23. Ausgewhlte 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)
Screen. Resolution. Scrolling. Trends.
24. Vielen Dank fr Ihre Aufmerksamkeit.
[email protected]
Namics
Screen. Resolution. Scrolling. Trends.
25. Screen. Resolution. Scrolling. Trends.