Screen Resolution Trends

3.623 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.623
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
755
Aktionen
Geteilt
0
Downloads
25
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Screen Resolution Trends

  1. 1. Screen. Resolution. Scrolling. Trends. Namics.<br />Jesko Arlt. Principal Consultant.<br />3. August 2010<br />
  2. 2. Inhalt<br />Technische Entwicklung<br />To Scroll or not to Scroll?<br />Zusammenfassung und weiterführende Quellen<br />Screen. Resolution. Scrolling. Trends. <br />
  3. 3. Technische Entwicklung<br />Screen. Resolution. Scrolling. Trends. <br />
  4. 4. Aktuell übliche Bildschirmauflösungen<br />Grundlagen<br />Screen. Resolution. Scrolling. Trends. <br />Zwischen<br />1024 x 768<br />und <br />1400x768<br />Zwischen<br />480 x 320<br />und <br />960 x 640<br />Zwischen<br />1024 x 768<br />und <br />1920 x 1200<br />und mehr<br />Zwischen<br />800 x 480<br />und <br />1280 x 800<br />Mobilität, Kommunikation<br />Produktivität, Office<br />2010 werden etwa 180 Mio. Monitore verkauft, 200 Mio. Note- und Netbooks, 6 Mio. iPads und 170 Mio. Smartphones<br />
  5. 5. Der Alltag: Monitor Auflösungen im Web<br />Grundlagen<br />Screen. Resolution. Scrolling. Trends. <br />Quelle: http://www.w3schools.com/browsers/browsers_display.asp<br />
  6. 6. Beispiel Bildschirmauflösung: spiegel.de<br />Grundlagen<br />Screen. Resolution. Scrolling. Trends. <br />HP mini Netbook<br />iPad<br />Über 85% der User sehen mindestens diese Ansicht oder mehr.<br />1024x768 Standard PC<br />
  7. 7. Sichtbarer Bereich auf ausgewählten Webseiten<br />Screen. Resolution. Scrolling. Trends. <br />Sichtbarer Bereich<br />Von links:<br />BBC, Play, <br />Amazon.co.uk,<br />New York Times<br />Quelle:http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm<br />
  8. 8. Trend: PC und Heimkino <br />Trends<br />Screen. Resolution. Scrolling. Trends. <br />Monitore werden immer größer und der PC wächst mit dem Fernseher und dem DVD-Player zusammen.<br />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.<br />Best Practice:<br />Den gewonnenen Raum für attraktive Darstellungen nutzen und so die emotionale Wirkung von Webseiten verstärken.<br />30“ Monitore von Apple und Dell<br />
  9. 9. Beispiel: Size doesn‘t matter<br />Trends<br />Screen. Resolution. Scrolling. Trends. <br />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.<br />Zwei Browserfenster auf einem 30“ Monitor<br />
  10. 10. Trend: Applications<br />Trends<br />Screen. Resolution. Scrolling. Trends. <br />Da wo die Geräte immer kleiner werden speziell programmierte Applikationen und nicht Webseiten am häufigsten genutzt.<br />Wer unterwegs ist sucht in der Regel gezielt nach Informationen: Produktinformationen, Adressen, Ortsbeschreibungen. <br />Best Practice:<br />Die mobilen Versionen von Webseiten sollten inhaltlich und funktional genau auf diese Anforderungen skaliert werden.<br />Nexus One und iPhone 4<br />
  11. 11. Beispiel: Berühren, Scrollen, Blättern <br />Trends<br />Screen. Resolution. Scrolling. Trends. <br />Das „Scrollen“ gehört zu fast jeder Applikation auf mobilen Geräten dazu.<br />Best Practice:<br />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.<br />Google Maps und Wetter Applikation <br />Opera Browser auf Adroid und iPhone<br />
  12. 12. Trend: Hochformat<br />Trends<br />Screen. Resolution. Scrolling. Trends. <br />Mit dem iPad erlebt das Hochformat eine Renaissance. <br />Webseiten, die nur für den sichtbaren Bereich im Querformat angelegt sind füllen das Hochformat nur unzureichend aus. <br />
  13. 13. Trend: Touchscreen<br />Trends<br />Screen. Resolution. Scrolling. Trends. <br />Gemeinsam mit dem Hochformat ermöglicht der Touchscreen komfortables Klicken, Scrollen und Blättern. <br />Webseiten lassen sich in Zukunft „anfassen“.<br />
  14. 14. Gegenwart: Design für Endgeräte<br />Umsetzung<br />Screen. Resolution. Scrolling. Trends. <br />A<br />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.<br />Je nach Zielgruppe bietet es sich an spezielle mobile Versionen anzubieten, die sich von der Webseite unterscheiden können.<br />B<br />C<br />D<br />Querformat<br />A mobile<br />B mobile<br />E mobile<br />Mobile<br />
  15. 15. Zukunft: Flexibles Design <br />Umsetzung<br />Screen. Resolution. Scrolling. Trends. <br />A<br />In Zukunft wird es im Netz zunehmend flexible Layouts geben, bei denen sich die Elemente unterschiedlichen Größen der Ausgabegeräte anpassen. <br />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.<br />B<br />C<br />D<br />Querformat<br />A<br />A<br />B<br />B<br />C<br />D<br />D<br />C<br />Hochfomat<br />Mobile<br />
  16. 16. To Scroll or not to Scroll?<br />Screen. Resolution. Scrolling. Trends. <br />
  17. 17. Inhaltselemente und Struktur<br />Wahrnehmung<br />Screen. Resolution. Scrolling. Trends. <br />Einfach zu verstehen:<br />Kurz, strukturiert und geordnet.<br />A<br />A<br />A<br />H<br />F<br />B<br />C<br />D<br />G<br />C<br />D<br />B<br />C<br />D<br />Schwer zu verstehen:<br />Anzahl der Strukturelemente größer als 5 und ungeordnet.<br />E<br />F<br />B<br />E<br />R<br />G<br />?<br />Nicht zu verstehen:<br />Anzahl der Strukturelemente größer als 7, unstrukturiert und ungeordnet.<br />Vgl. auch http://de.wikipedia.org/wiki/Millersche_Zahl<br />
  18. 18. In Anwendungen vertrauen<br />Wahrnehmung<br />Screen. Resolution. Scrolling. Trends. <br />Vertrauen entsteht durch die Reduktion von Komplexität (Luhmann).<br />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.<br />
  19. 19. Was passiert beim Scrollen oder Sliden<br />Wahrnehmung<br />Screen. Resolution. Scrolling. Trends. <br />Komplexität wird schrittweise erweitert.<br />?<br />
  20. 20. Aus der Not eine Tugend machen<br />Vorteile des Scrollens<br />Nutzergerechte Aufbereitung von Informationen (Usability).<br />Fokussierung auf Konversionsziele in unterschiedlichen Bildschirmbereichen.<br />Mehr Vertrauen in Anbieter und Marke. (Markenwert)<br />Mehr Raum für Gestaltung: Emotionalität und Entscheidungen brauchen Raum.<br />„Vertiefen“ von Informationen.<br />Haptischer Anker: Scrollen oder „Sliden“ (Touchpad)<br />Scrollen ist leichter als Klicken und immer schon ein Commitment mit dem Inhalt.<br />Wahrnehmung<br />Screen. Resolution. Scrolling. Trends. <br />
  21. 21. Zusammenfassung<br />Screen. Resolution. Scrolling. Trends. <br />
  22. 22. Zusammenfassung<br />Jedes Display (TV, PC, Notebook, Tablet-PC, mobile Endgeräte) wird in Zukunft Internetinhalte abbilden können.<br />Gegenwärtig ist der Aufwand ein Konzept und Layout für alle unterschiedlichen Endgeräte zu entwickeln sehr hoch. <br />Hochformat, Zoomen und Scrollen werden durch mobile Geräte auch im Netz wieder akzeptiert. <br />Empfehlung: <br />Webseiten für 1024 Pixel Breite entwickeln (Nielsen Empfehlung seit 2006).<br />Vorteile von vertikalem Scrollen in der Konzeption berücksichtigen. <br />Bei Bedarf spezielle Versionen (mit eingeschränkter Funktionalität) für mobile Endgeräte anbieten.<br />Screen. Resolution. Scrolling. Trends. <br />
  23. 23. Ausgewählte Quellen<br />Unfolding the Fold<br />http://blog.clicktale.com/2006/12/23/unfolding-the-fold/<br />Blasting the Myth of the Fold<br />http://www.boxesandarrows.com/view/blasting-the-myth-of<br />Scroll With Me, Baby: The 80/20 Rule Strikes Again<br />http://www.grokdotcom.com/2010/06/14/scroll-with-me-baby-the-80-20-rule-strikes-again/<br />The myth of the page fold: evidence from user testing<br />http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm<br />(Quellensammlung: Martin Kliehm)<br />Screen. Resolution. Scrolling. Trends. <br />
  24. 24. Vielen Dank für Ihre Aufmerksamkeit.<br />jesko.arlt@namics.com <br />© Namics<br />Screen. Resolution. Scrolling. Trends. <br />
  25. 25. Screen. Resolution. Scrolling. Trends. <br />

×