Upload
jesko-arlt
View
3.047
Download
0
Embed Size (px)
DESCRIPTION
Überblick über Trends bei Bildschirmauflösungen und der Frage ob man Scrollen darf, muß oder sollte ...
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.
© Namics
Screen. Resolution. Scrolling. Trends.
Screen. Resolution. Scrolling. Trends.