Interaction Patterns zu Mobile Content, Responsive Design und zu Navigation in mobilen Webseiten.

1. Mobile Web: Weniger
Inhalt?
Sollen oder müssen wir auf mobilen Geräten
mit kleinem Bildschirm weniger Inhalt
zeigen?
Januar 2013, Toni Steimle

2. 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

3. Sollen wir denn überhaupt
weniger Inhalt anzeigen?

4. 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)
Mobiler User
Nicht mobiler User
Siehe dazu «Jakob Nielsen, Raluca Budiu: Mobile Usability, 2012»

5. 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.
www.hsr.ch und m.hsr.ch als Beispiele einer Desktop und mobilen Webseite

6. Mobile Geräte bilden heute ein Kontinuum von
Bildschirmgrössen
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.
Siehe zum Beispiel die Aufstellung von Viljamin Salminen: http://ebookbrowse.com/device-map-2012-pdf-d383364295

7. Die meisten Online Käufer beginnen heute ein
Shopping auf dem Smartphone oder Tablet!
65%
Der untersuchten
Personen starten ein
Shopping mit einem 49% Schicken sich dazu Emails
Smartphone und 52% Navigieren direkt zur Seite
führen es an einem 63% Suchen erneut
anderen Device fort
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

8. Die meisten Medienkonsumenten benutzen heute
mehrere Geräte parallel
81%
der untersuchten Personen benutzen das
Smartphone während dem sie TV schauen!
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

9. Etwa die Hälfte aller Interaktionen werden zu Hause mit
mobilen Geräten durchgeführt
47%
Smartphones werden nicht nur im mobilen Kontext
eingesetzt sondern ganz intensiv auch zu Hause.
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

10. 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»

11. 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»

12. Müssen wir weniger Inhalt
anzeigen?
Teil 1: Patterns für fluide Layouts

13. Schon immer wurden fluide Layouts verwendet
A B A B
Fixed Size Auto Size Fixed Size Minimal Size

14. Wenn die minimalen Grössen keinen Platz mehr haben
wurden horizontale Scrollbars angezeigt
A B
Fixed Size Minimal

15. Neu werden Breakpoints vorgesehen, die
Layoutveränderungen auslösen
A
A B A
B
B

16. Typisches Beispiel sind Bilder und Texte

17. In der Realität gibt es mehr oder weniger komplexe
Verschachtelungen von Inhalten

18. Beispiel von Umbruch: Demo
http://www.palentir.net

19. Zwischenschritte sind denkbar
Konzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2012, Hanser»

20. Zwischenschritte sind denkbar
In diesem Beispiel ist
der Text immer gleich
breit.
Konzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2012, Hanser»

21. Layout mit Zwischenschritten: Demo
http://www.orestis.nl/

22. Durch neue Layouts können aber auch andere Gewichtungen
entstehen
B A
A
A
C
B
B
Der Layoutcontainer B ist
plötzlich viel wichtiger.
C
C

23. Veränderung der Gewichtung: Demo
http://www.anderssonwise.com/

24. Auch in diesem Fall können Zwischenschritte helfen
B A A
A
C
B C B
Der Layoutcontainer C
B und C werden nicht
plötzlich viel grösser.
Beispiel ist auch beschrieben in : http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/

25. Schwierig wird es bei Layouts ohne Spalten
Werden keine mehrspaltigen Layouts
eingesetzt wird eine geschickte
Umbruchstaktik schwierig.
A
A
B
B

26. Layout ohne Spalten: Demo
http://www.superyachtwifi.com

27. Dann kann eine Änderung der Reihenfolge helfen
Dann wird nicht der benötigte Raum
aber die Reihenfolge für die nötige
B Gewichtung sorgen.
B
C C
A
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d

28. Müssen wir weniger Inhalt
anzeigen?
Teil 2: Patterns für adaptiven Content

29. Manchmal sollte auch der Content selber gekürzt werden
Wahlen im Kongresshaus: Wird Messi Wahlen im
auch 2012 Weltfussballer des Jahres? Kongresshaus:
Wird Messi auch
2012 Weltfussballer
des Jahres?
In Zürich wird am Montag
In Zürich wird am Montag der beste Fussballer des der beste Fussballer des
Jahres 2012 erkoren. Die Gegner Messis sind Jahres 2012 erkoren. Die
Cristiano Ronaldo und Andres Iniesta. Gegner Messis sind
Cristiano Ronaldo und
Andres Iniesta.
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d

30. Den Text einfach abschneiden ist dabei nicht die beste Alternative
Wahlen im Kongresshaus: Wird Messi Wahlen im
auch 2012 Weltfussballer des Jahres? Kongresshaus:
Wird Messi auch…
In Zürich wird am Montag
der beste Fussballer des
Jahres 2012 erkoren….
In Zürich wird am Montag der beste Fussballer des
Jahres 2012 erkoren. Die Gegner Messis sind
Cristiano Ronaldo und Andres Iniesta.
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d

31. Verschiedene Versionen des Contents können verwaltet werden
Wahlen im Kongresshaus: Wird Messi Wird Messi auch 2012
auch 2012 Weltfussballer des Jahres? Weltfussballer des
Jahres?
In Zürich wird am Montag
der beste Fussballer des
Jahres 2012 erkoren.
In Zürich wird am Montag der beste Fussballer des
Jahres 2012 erkoren. Die Gegner Messis sind Nicht abgeschnitten sondern
Cristiano Ronaldo und Andres Iniesta. gekürzt.
Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d

32. «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.

33. «Progressive Disclore» für gezielte
Zusatzinformationen

34. 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.

35. Bilder lassen sich ab einem bestimmten Grad nicht mehr nur
verkleinern, sie müssen geschnitten werden

36. 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

37. Dazu gibt es ein Konzept des «Focal Points». Eine
automatische Optimierung des Bildes ist dann
möglich.
Dazu existieren sowohl server- als auch
client- seitige Beispiele.
Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html

38. «Focal Points»: Demo
Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html

39. Manchmal braucht es Bilder auch in unterschiedlichen
Ausrichtungen
Wahlen im Kongresshaus: Wird Messi Wird Messi auch 2012
auch 2012 Weltfussballer des Jahres? Weltfussballer des Jahres?
In Zürich wird am Montag der beste
Fussballer des Jahres 2012 erkoren..
In Zürich wird am Montag der beste Fussballer des
Jahres 2012 erkoren. Die Gegner Messis sind Cristiano
Ronaldo und Andres Iniesta.
Beispiel aus dem Tages-Anzeiger vom 7.1.2013

40. Bei Grafiken können individuelle Ausschnitte oder
sogar andere Darstellungen notwendig sein
Siehe dazu: http://yiibu.com/

41. 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

42. Tabellen können häufig anders dargestellt werden
Name Vorname Adresse PLZ Ort
Tomas Wunderlin Benztalstrasse 23 8620 Wetzikon
Miriam Hofstetter Brunnenstrasse 3 8610 Uster
Tomas Wunderlin
Peter Ott Werkweg 13 8630 Rüti
Benztalstrasse 23
Hanspeter Kummer Benztalstrasse 24 8005 Zürich 8620 Wetzikon
Miriam Hofstetter
Brunnenstrasse 3
8610 Uster
Peter Ott
Werkweg 13
8630 Rüti
Hanspeter Kummer
Benztalstrasse 24
8005 Zürich

43. 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

44. Swipebare Bereich oder selektierebare Spalten
Unternehmen Umsatz 2010 Umsatz 2011 Unternehmen Umsatz 2010 Umsatz 2011
Umsatz 2009
Umsatz 2010
ABB 22 Mrd 23 Mrd ABB 22 Mrd 23 Mrd
Umsatz 2011
Roche 23 Mrd 36 Mrd Roche 23 Mrd Umsatz 2012
36 Mrd
UBS 12 Mrd 18 Mrd UBS 12 Mrd 18 Mrd
Credit Suisse 12 Mrd 18 Mrd Credit Suisse 12 Mrd 18 Mrd
Swipe-barer Bereich

45. Müssen wir weniger Inhalt
anzeigen?
Teil 3: Patterns für mobile Navigation

46. Im «Select Pattern» wird die Navigation in einem
Dropdown abgebildet
Lösungen Produkte Über uns Kontakt
Navigation Navigation
Lösungen
Produkte
Über uns
Kontakt
Die Navigation verdichtet sich in ein Dropdown

47. «Select Pattern»: Demo
http://ux.crealogix.com

48. Im Toggle-Menü wird ein Menü zwischen dem Inhalt
und dem Header eingeschoben
Lösungen Produkte Über uns Kontakt
X
Lösungen
Produkte
Über uns
Kontakt
Die Navigation verdichtet sich in ein Toggle. Dieser schiebt sich
zwischen Inhalt und Header.

49. «Toggle Pattern»: Demo
http://bostonglobe.com/

50. Es wird ein Menü von der Seite eingeschoben.
Lösungen Produkte Über uns Kontakt
X
Lösungen
Produkte
Über uns
Kontakt
Die Navigation verdichtet sich in eine Seitliche Navigation.
Diese schiebt sich neben den Inhalt.

51. Seitliches Menü: Demo
http://mcdpartners.com/

52. Das Toggle-Menü kann auch als «Multi Toggle»
implementiert sein
X X
+ Lösungen + Lösungen
+ Produkte - Produkte
Über uns Produkt 1
Kontakt Produkt 2
+ Produkt 3
Über uns
Kontakt
Das Toggle beinhaltet eine aufklappbare Subnavigation

53. Eine Kombination von Toggle und «Landing Pages»
für die Subnavigation ist möglich
X
Lösungen Lösungen
Produkte
Über uns
Kontakt
Anstatt ein «Multi Toggle» kann bei umfangreichen Inhalten auch ein
einfaches Toggle mit Landing Pages verwendet werden.

54. Toggle und «Landing Page»: Demo
http://worldwildlife.org/species

55. Im Toggle Pattern mit Drilldown unterstützt das
Toggle-Menü eine Drilldown-Funktion
Das Menü ist ein eigener Bereich in
dem man hineindrillt. Der Content
X X
bleibt bestehen, bis man bei der
Lösungen Produkt 1
Produkte Produkt 2 untersten Ebene angelangt ist.
Über uns Produkt 3
Kontakt

56. Toggle mit Drilldown: Demo
http://www.sony.com/index.php

57. Mit einem «Footer Anchor» Pattern wird im Header ein
Anchor auf ein Menü im Footer gelegt
Die Navigation befindet sich am
Ende, kann aber über einen Anker
angesprungen werden.
Lösungen Produkte Über uns Kontakt
Lösungen
Produkte
Über uns
Kontakt

58. «Footer Anchor»: Demo
http://builtwithmomentum.com

59. Kombination von Patterns: Zum Beispiel einfaches
Toggle mit erweiterter Footer-Navigation
X
Lösungen Lösungen Lösung1
Produkte
Über uns
Kontakt Lösungen
Lösung 1
Lösung 2
Produkte
Produkt 1
Produkt 2
Produkt 3
Über uns
Kontakt

60. Kombination von Patterns: Zum Beispiel «Multi
Toggle» und Drilldown mit «Landing Pages»
X X
Lösungen + Lösungen + Lösungen Lösung1
+ Produkte - Produkte
Über uns Produkt 1
Kontakt Produkt 2
+ Produkt 3
Über uns
Kontakt

61. Implementierung bei Michigian University

62. 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.

63. Müssen wir weniger Inhalt
anzeigen?
Teil 5: Für alte Browser Progressive
Enhancement

64. Idee von «Progressive Enhancement»
Enhanced Basic
Screengrösse Experience Experience
Browserfähigkeiten
In einem Progressive-Enhancement-Ansatz werden Anwendern ohne
modernen Browser ein alternative Experience geboten.

65. 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»

66. Beispiel für «Progressive Enhancement»
Geschützte Tiere
Geschützte Tiere
Wie der WWF international Tiere schützt. Helfen Sie mit.
Wie der WWF Tiere schützt.
Helfen Sie mit.
Mitglied werden
Warum Sie beim WWF «Enhanced Experience»
unbedingt Mitglied werden
sollten.
«Basic Experience»

67. Was sind die
Schlussfolgerungen?

68. Mit einem guten responsiven Design-Ansatz gibt
es fast keinen Grund, nicht denselben Inhalt
anzuzeigen.
PS: Applikationen sind eine andere Fragestellung.
Siehe dazu «Karen McGrane: Content Strategy for Mobile, 2012, A Book Apart»

69. 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»

70. Anhang

71. Weitere Literatur zum Thema
Bücher
Webseiten

72. 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