Mobile Web: Weniger Inhalt?
72
Mobile Web: Weniger Inhalt? Sollen oder müssen wir auf mobilen Geräten mit kleinem Bildschirm weniger Inhalt zeigen? Januar 2013, Toni Steimle
-
Upload
tonisteimle -
Category
Documents
-
view
2.800 -
download
1
description
Interaction Patterns zu Mobile Content, Responsive Design und zu Navigation in mobilen Webseiten.
Transcript of Mobile Web: Weniger Inhalt?
Mobile Web: Weniger Inhalt?Sollen oder müssen wir auf mobilen Geräten mit kleinem Bildschirm weniger Inhalt zeigen?
Januar 2013, Toni Steimle
Agenda
16.30 Begrüssung
16.40 Sollen wir weniger Inhalt anzeigen- 3 Thesen- Mobile spezifische Szenarien?
17.10 Müssen wir weniger Inhalt anzeigen- Patterns zu Layouting- Patterns zu mobilem Content - Patterns zu mobiler Navigation
17.40 Diskussion
18.00 Apéro Riche
Sollen wir denn überhaupt weniger Inhalt anzeigen?
These: «Seperate Mobile Site»«In all areas of user experience— feature set, IA, writing, images, and more— mobile usability requires stricter and more scaled-back design than desktop usability. That’s why you need a separate mobile site. Simply using responsive Web design to make the full site accessible on mobile devices often results in a substandard mobile UX. » (Jakob Nielsen, 2012)
Siehe dazu «Jakob Nielsen, Raluca Budiu: Mobile Usability, 2012»
Mobiler User
Nicht mobiler User
www.hsr.ch und m.hsr.ch als Beispiele einer Desktop und mobilen Webseite
Beispiel: Typische Situation heute
Separate mobile Seite mit eigener URL. Mobile Seite ohne responsives Design (keine Breakpoints). Mobile Seite hat einen reduzierter Umfang. Navigation statt Content first.
Mobile Geräte bilden heute ein Kontinuum von Bildschirmgrössen
Siehe zum Beispiel die Aufstellung von Viljamin Salminen: http://ebookbrowse.com/device-map-2012-pdf-d383364295
Diese Grössenabstufung setzt sich auch bei Netbooks und Laptops sowie grossen Monitoren fort. Dazu kommen noch die Ausrichtung der Devices (Portrait, Landscape) und unterschiedliche Pixeldichten.
Rein duale Sicht: «Mobile – Desktop» macht keinen Sinn.
Die meisten Online Käufer beginnen heute ein Shopping auf dem Smartphone oder Tablet!
Siehe dazu die Google Studie vom August 2012: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf. Zahlen basieren auf einem Sample von 1600 Personen aus LA, Boston und Austin
65%Der untersuchten Personen starten ein Shopping mit einem Smartphone und führen es an einem anderen Device fort
49% Schicken sich dazu Emails52% Navigieren direkt zur Seite63% Suchen erneut
Die meisten Medienkonsumenten benutzen heute mehrere Geräte parallel
Siehe dazu die Google Studie vom August 2012: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf. Zahlen basieren auf einem Sample von 1600 Personen aus LA, Boston und Austin
81%der untersuchten Personen benutzen das Smartphone während dem sie TV schauen!
Etwa die Hälfte aller Interaktionen werden zu Hause mit mobilen Geräten durchgeführt
Siehe dazu die Google Studie vom August 2012: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf. Zahlen basieren auf einem Sample von 1600 Personen aus LA, Boston und Austin
47%
Smartphones werden nicht nur im mobilen Kontext eingesetzt sondern ganz intensiv auch zu Hause.
These «Mobile First»Es braucht einen zentralen Content mit einem liquiden Layoutkonzept das auf allen Geräten funktioniert. Am einfachsten ist es dabei mit den kleinsten Geräten zu beginnen.
Siehe dazu «LUKE WROBLEWSKI: Mobile First, 2012, A Book Apart»
These «Content First»Es braucht eine zentrale Contentverwaltung mit mehreren Content Versionen und einem liquiden Layoutkonzept das auf allen Geräten funktioniert
Siehe dazu «Karen McGrane: Content Strategy for Mobile, 2012, A Book Apart»
Müssen wir weniger Inhalt anzeigen?
Teil 1: Patterns für fluide Layouts
Schon immer wurden fluide Layouts verwendet
A B A B
Fixed Size Auto Size Fixed Size Minimal Size
Wenn die minimalen Grössen keinen Platz mehr haben wurden horizontale Scrollbars angezeigt
A B
Fixed Size Minimal
Neu werden Breakpoints vorgesehen, die Layoutveränderungen auslösen
A BA
B
A
B
Typisches Beispiel sind Bilder und Texte
In der Realität gibt es mehr oder weniger komplexe Verschachtelungen von Inhalten
Zwischenschritte sind denkbar
Konzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2012, Hanser»
Zwischenschritte sind denkbar
In diesem Beispiel istder Text immer gleich breit.
Konzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2012, Hanser»
Durch neue Layouts können aber auch andere Gewichtungen entstehen
A
B A
B
C
C
A
B
C
Der Layoutcontainer B ist plötzlich viel wichtiger.
Auch in diesem Fall können Zwischenschritte helfen
A
B A
BC
A
B
C
C
Beispiel ist auch beschrieben in : http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
Der LayoutcontainerB und C werden nichtplötzlich viel grösser.
Schwierig wird es bei Layouts ohne Spalten
A
BA
B
Werden keine mehrspaltigen Layoutseingesetzt wird eine geschickte Umbruchstaktik schwierig.
Dann kann eine Änderung der Reihenfolge helfen
B
C
B
C
A
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
Dann wird nicht der benötigte Raumaber die Reihenfolge für die nötigeGewichtung sorgen.
Müssen wir weniger Inhalt anzeigen?
Teil 2: Patterns für adaptiven Content
Manchmal sollte auch der Content selber gekürzt werden
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
Wahlen im Kongresshaus: Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta.
Wahlen im Kongresshaus: Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta.
Den Text einfach abschneiden ist dabei nicht die beste Alternative
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
Wahlen im Kongresshaus: Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta.
Wahlen im Kongresshaus: Wird Messi auch…
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren….
Verschiedene Versionen des Contents können verwaltet werden
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
Wahlen im Kongresshaus: Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta.
Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren.
Nicht abgeschnitten sondern gekürzt.
«Progressive Disclosure» für sehr lange Texte
Bei sehr langen Inhalten kann es sinnvoll sein, auf Geräten mit kleinerem Screen nicht den ganzen Inhalt sofort anzuzeigen.
«Progressive Disclore» für gezielte Zusatzinformationen
Teaser sind eine Form von «Progressive Disclosure» und können Inhalte in verdichteter Form wiedergeben
Obige Abbildung ist nur ein Beispiel und eine freie Erfindung von CREALOGIX.
Bilder lassen sich ab einem bestimmten Grad nicht mehr nur verkleinern, sie müssen geschnitten werden
Dazu gibt es ein Konzept des «Focal Points». Eine automatische Optimierung des Bildes ist dann möglich.
Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
Dazu gibt es ein Konzept des «Focal Points». Eine automatische Optimierung des Bildes ist dann möglich.
Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
Dazu existieren sowohl server- als auch client- seitige Beispiele.
Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
«Focal Points»: Demo
Manchmal braucht es Bilder auch in unterschiedlichen Ausrichtungen
Beispiel aus dem Tages-Anzeiger vom 7.1.2013
Wahlen im Kongresshaus: Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta.
Wird Messi auch 2012 Weltfussballer des Jahres?
In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren..
Bei Grafiken können individuelle Ausschnitte oder sogar andere Darstellungen notwendig sein
Siehe dazu: http://yiibu.com/
Was tun bei breiten Tabellen?
Name Vorname Adresse PLZ Ort
Tomas Wunderlin Benztalstrasse 23 8620 Wetzikon
Miriam Hofstetter Brunnenstrasse 3 8610 Uster
Peter Ott Werkweg 13 8630 Rüti
Hanspeter Kummer Benztalstrasse 24 8005 Zürich
Tabellen können häufig anders dargestellt werden
Tomas WunderlinBenztalstrasse 238620 Wetzikon
Miriam HofstetterBrunnenstrasse 38610 Uster
Peter OttWerkweg 138630 Rüti
Hanspeter KummerBenztalstrasse 248005 Zürich
Name Vorname
Adresse PLZ Ort
Tomas Wunderlin
Benztalstrasse 23
8620 Wetzikon
Miriam Hofstetter
Brunnenstrasse 3
8610 Uster
Peter Ott Werkweg 13 8630 Rüti
Hanspeter Kummer Benztalstrasse 24
8005 Zürich
Manchmal sollen Spalten aber verglichen werden können
Unternehmen Umsatz 2009 Umsatz 2010 Umsatz 2011 Umsatz 2012
ABB 20 Mrd 22 Mrd 23 Mrd 25 Mrd
Roche 18 Mrd 23 Mrd 36 Mrd 38 Mrd
UBS 11 Mrd 12 Mrd 18 Mrd 19 Mrd
Credit Suisse 11 Mrd 12 Mrd 18 Mrd 19 Mrd
Swipebare Bereich oder selektierebare Spalten
Unternehmen Umsatz 2010
Umsatz 2011
ABB 22 Mrd 23 Mrd
Roche 23 Mrd 36 Mrd
UBS 12 Mrd 18 Mrd
Credit Suisse 12 Mrd 18 Mrd
Swipe-barer Bereich
Unternehmen Umsatz 2010
Umsatz 2011
ABB 22 Mrd 23 Mrd
Roche 23 Mrd 36 Mrd
UBS 12 Mrd 18 Mrd
Credit Suisse 12 Mrd 18 Mrd
Umsatz 2009
Umsatz 2010
Umsatz 2011
Umsatz 2012
Müssen wir weniger Inhalt anzeigen?
Teil 3: Patterns für mobile Navigation
Im «Select Pattern» wird die Navigation in einem Dropdown abgebildet
Lösungen Produkte Über uns Kontakt
Navigation
LösungenProdukteÜber unsKontakt
Navigation
Die Navigation verdichtet sich in ein Dropdown
Im Toggle-Menü wird ein Menü zwischen dem Inhalt und dem Header eingeschoben
Lösungen Produkte Über uns Kontakt
LösungenProdukteÜber unsKontakt
X
Die Navigation verdichtet sich in ein Toggle. Dieser schiebt sich zwischen Inhalt und Header.
Es wird ein Menü von der Seite eingeschoben.
Lösungen Produkte Über uns Kontakt
LösungenProdukteÜber unsKontakt
X
Die Navigation verdichtet sich in eine Seitliche Navigation.
Diese schiebt sich neben den Inhalt.
Das Toggle-Menü kann auch als «Multi Toggle» implementiert sein
+ Lösungen+ Produkte Über uns Kontakt
X
+ Lösungen- Produkte Produkt 1 Produkt 2 + Produkt 3 Über uns Kontakt
X
Das Toggle beinhaltet eine aufklappbare Subnavigation
Eine Kombination von Toggle und «Landing Pages» für die Subnavigation ist möglich
LösungenLösungenProdukteÜber unsKontakt
X
Anstatt ein «Multi Toggle» kann bei umfangreichen Inhalten auch ein einfaches Toggle mit Landing Pages verwendet
werden.
Im Toggle Pattern mit Drilldown unterstützt das Toggle-Menü eine Drilldown-Funktion
Produkt 1Produkt 2Produkt 3
X
LösungenProdukteÜber unsKontakt
X
Das Menü ist ein eigener Bereich in dem man hineindrillt. Der Content bleibt bestehen, bis man bei der untersten Ebene angelangt ist.
Mit einem «Footer Anchor» Pattern wird im Header ein Anchor auf ein Menü im Footer gelegt
Lösungen Produkte Über uns Kontakt
LösungenProdukteÜber unsKontakt
Die Navigation befindet sich am Ende, kann aber über einen Anker angesprungen werden.
Kombination von Patterns: Zum Beispiel einfaches Toggle mit erweiterter Footer-Navigation
LösungenProdukteÜber unsKontakt
X
Lösungen
Lösungen Lösung 1 Lösung 2Produkte Produkt 1 Produkt 2 Produkt 3Über unsKontakt
Lösung1
Kombination von Patterns: Zum Beispiel «Multi Toggle» und Drilldown mit «Landing Pages»
Lösung1+ Lösungen+ Produkte Über uns Kontakt
X
+ Lösungen- Produkte Produkt 1 Produkt 2 + Produkt 3 Über uns Kontakt
X
Lösungen
Implementierung bei Michigian University
Erweiterung: Gerätespezisches Menü
Das Menü führt im kleinen Device die Menüpunkte zuerst an, die vermutlich mehr benutzt werden
Obige Abbildung ist nur ein Beispiel und eine freie Erfindung von CREALOGIX.
Müssen wir weniger Inhalt anzeigen?
Teil 5: Für alte Browser Progressive Enhancement
Idee von «Progressive Enhancement»
Screengrösse
Browserfähigkeiten
Basic Experience
EnhancedExperience
In einem Progressive-Enhancement-Ansatz werden Anwendern ohne modernen Browser ein alternative Experience geboten.
Beispiel für «Progressive Enhancement»
Geschützte Tiere
Wie der WWF Tiere schützt. Helfen Sie mit.
Mitglied werden
Warum Sie beim WWF unbedingt Mitglied werden sollten.
«Basic Experience»
Beispiel für «Progressive Enhancement»
Geschützte TiereWie der WWF international Tiere schützt. Helfen Sie mit.
Geschützte Tiere
Wie der WWF Tiere schützt. Helfen Sie mit.
Mitglied werden
Warum Sie beim WWF unbedingt Mitglied werden sollten.
«Enhanced Experience»
«Basic Experience»
Was sind die Schlussfolgerungen?
Mit einem guten responsiven Design-Ansatz gibt es fast keinen Grund, nicht denselben Inhalt anzuzeigen.
Siehe dazu «Karen McGrane: Content Strategy for Mobile, 2012, A Book Apart»
PS: Applikationen sind eine andere Fragestellung.
Eine nachhaltige Webstrategie besteht heute aus folgenden Elementen Sorgfältige Erhebung der Nutzerprofile und
Nutzerszenarien Schulung der Content-Verantwortlichen Definition eines reduzierten und fokussierten
Contents mit Contentvarianten Definition eines liquiden Layout- und
Navigationskonzeptes Umsetzung mit «Progressive Enhancement»
Anhang
Weitere Literatur zum Thema
Bücher
Webseiten
Dienstleistungen von CREALOGIX
Verankern einer multidevice fähigen UX Strategie Erarbeiten von Benutzergruppen und Szenarien Erarbeiten einer responsiblen IA Konzept für responsible Layouts Webdesign bei responsiblen Layouts Training für Erstellung von usable und responsive
Content Training für mobiles und responsibles Formulardesign
