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

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 weiterführende Quellen Screen. Resolution. Scrolling. Trends.

3. Technische Entwicklung Screen. Resolution. Scrolling. Trends.

4. Aktuell übliche Bildschirmauflösungen 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 Mobilität, Kommunikation Produktivität, Office 2010 werden etwa 180 Mio. Monitore verkauft, 200 Mio. Note- und Netbooks, 6 Mio. iPads und 170 Mio. Smartphones

5. Der Alltag: Monitor Auflösungen im Web Grundlagen Screen. Resolution. Scrolling. Trends. Quelle: http://www.w3schools.com/browsers/browsers_display.asp

6. Beispiel Bildschirmauflösung: 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 ausgewählten 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 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. 30“ Monitore von Apple und Dell

9. Beispiel: Size doesn‘t matter Trends Screen. Resolution. Scrolling. Trends. 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. Zwei Browserfenster auf einem 30“ Monitor

10. Trend: Applications Trends Screen. Resolution. Scrolling. Trends. 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. Nexus One und iPhone 4

11. Beispiel: Berühren, Scrollen, Blättern Trends Screen. Resolution. Scrolling. Trends. 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. 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 für den sichtbaren Bereich im Querformat angelegt sind füllen das Hochformat nur unzureichend aus.

13. Trend: Touchscreen Trends Screen. Resolution. Scrolling. Trends. Gemeinsam mit dem Hochformat ermöglicht der Touchscreen komfortables Klicken, Scrollen und Blättern. Webseiten lassen sich in Zukunft „anfassen“.

14. Gegenwart: Design für Endgeräte Umsetzung Screen. Resolution. Scrolling. Trends. A 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. 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 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. 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 größer als 5 und ungeordnet. E F B E R G ? Nicht zu verstehen: Anzahl der Strukturelemente größer 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 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.

19. Was passiert beim Scrollen oder Sliden Wahrnehmung Screen. Resolution. Scrolling. Trends. Komplexität 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 für Gestaltung: Emotionalität 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 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. Screen. Resolution. Scrolling. Trends.

23. 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) Screen. Resolution. Scrolling. Trends.

24. Vielen Dank für Ihre Aufmerksamkeit. jesko.arlt@namics.com © Namics Screen. Resolution. Scrolling. Trends.

25. Screen. Resolution. Scrolling. Trends.