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

http://www.palentir.net

Beispiel von Umbruch: Demo

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»

http://www.orestis.nl/

Layout mit Zwischenschritten: Demo

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.

Veränderung der Gewichtung: Demo

http://www.anderssonwise.com/

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.

Layout ohne Spalten: Demo

http://www.superyachtwifi.com

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

«Select Pattern»: Demo

http://ux.crealogix.com

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.

«Toggle Pattern»: Demo

http://bostonglobe.com/

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.

Seitliches Menü: Demo

http://mcdpartners.com/

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.

Toggle und «Landing Page»: Demo

http://worldwildlife.org/species

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.

Toggle mit Drilldown: Demo

http://www.sony.com/index.php

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.

«Footer Anchor»: Demo

http://builtwithmomentum.com

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