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