Projekt: Buch über Webdesign für Smartphones

Buch-Umschlag „Struktur und Design responsiver Webseiten auf Smartphones“
In meinem Buch beleuchte ich die schlimmsten Fehler, die in der Smartphone-Darstellung von responsiven Webseiten zu finden sind. Anhand von Beispielen zeige ich, wie diese Fehler behoben werden können, um besser nutzbare Seitenstrukturen zu erlangen.

Was lange währt wird endlich gut: schon 2008 wollte ich ein Buch über mobiles Internet schreiben, kam aber nie dazu. Dann kam responsives Internet und die Meinung verbreitete sich „mobiles Internet brauchen wir doch gar nicht mehr„. Technisch gesehen ist diese Meinung längst Fakt. Was aber eine sinnvolle Seitenstruktur und Anordnung von Elementen auf mobilen Endgeräten aka Smartphones betrifft, ist es nach wie vor mehr als notwendig, diese Darstellungs-Größe als eigenes Medium wahrzunehmen.

2008 wollte ich ein Buch über mobiles Internet schreiben, kam aber nie dazu. Dann kam responsives Internet und die Meinung verbreitete sich „mobiles Internet brauchen wir doch gar nicht mehr„. Technisch gesehen ist diese Meinung längst Fakt. Was aber eine sinnvolle Seitenstruktur und Anordnung von Elementen auf mobilen Endgeräten aka Smartphones betrifft, ist es nach wie vor mehr als notwendig, diese Darstellungs-Größe als eigenes Medium wahrzunehmen.

Hier ein kleiner Auszug aus meinem Buch „Struktur und Design responsiver Webseiten auf Smartphones: Wie Sie das mobile Internet userfreundlich gestalten„:

1.1.2.2 Ein Unterschied wie Tag und Nacht

Anfang 2014 erhielt ich den Auftrag, eine responsive Seite konzeptionell und gestalterisch zu überarbeiten. Der Kunde war ein Versicherungsunternehmen mit interner IT-Abteilung. Diese hatte bereits einen ersten Wurf gemacht, um die Webseite mobil nutzbar zu machen. Meine konzeptionelle und gestalterische Arbeit begann ein paar Tage nach dem Launch. Eine dankbare Aufgabe, zumal dem Kunden und auch der IT-Abteilung schon Wochen vor dem Relaunch bewusst war, dass die eigene Version nur eine Zwischenlösung sein soll. Die schematische Darstellung der vorher-/nachher-Ansicht und die Desktop-Seite finden Sie in Abb. 1.6.

Responsive Webseite vor und nach der mobil-optimierten Bearbeitung
Abb. 1.6 Schematische Darstellung der Startseite eines Versicherungsunternehmens auf dem Desktop und mobil vor (links) und nach meiner Überarbeitung (rechts). Besonders wichtig war es mir, den Zugang zu den Kontaktmöglichkeiten weit oben zu lassen, ohne den User zu zwingen immer über diese hinweg zu scrollen. Die Lösung war hier eine Interaktionszentrale: Klappmenüs in denen Kontakt, Suche, Menü und später der Login-Bereich schnell zugänglich gemacht wurden.

Auch Kunden wollen gerne wissen, was gezaubert werden soll. Peinlich ist es, wenn sie besser wissen, was auf dem Zielmedium sinnvoll ist, als die Agentur. 2006 habe ich erlebt, wie ein erfahrener Kunde dem (neuen) Projektmanager und dem (Print-)Designer klar gemacht hat, dass der vorgestellte Entwurf nicht umsetzbar ist. Das ist das Gegenteil dessen, was wir uns als Konzepter, Gestalter, Entwickler und Projektmanager mit Berateranspruch wünschen. In diesem Fall musste ich dem Kunden Recht geben. Aber das war 2006. Vor über zwölf Jahren. Inzwischen sollte dies nicht mehr passieren. […]

1.2.1 Impfungen gegen die schlimmsten Unarten im mobilen Webdesign …

Speziell die Navigationsformen sind in den letzten Jahren besser geworden. Die schlimmsten Auswüchse, die ich beobachtet habe, möchte ich Ihnen hier kurz vorstellen. Wenn Sie bisher überlegt haben diese einzusetzen: Lassen Sie es! Mit anderen Worten: Nehmen Sie die nächsten Abschnitte als Impfung gegen allzu schlechte Nutzerführung.

1.2.1.1 … z. B. Navigationspunkte, die ohne inhaltliche Aussage den ganzen Screen einnehmen

Start, Über uns, Angebot, Kontakt sind wichtig, aber irrelevant, wenn der User zunächst nicht sieht, ob er auf der Seite eines Automechanikers oder Schmuckherstellers gelandet ist, ob die Intention der Seite Information oder ein käufliches Angebot darstellt.

Wenn diese Punkte direkt unterhalb eines großen Headerbereiches dargestellt werden und die jeweils aktive Rubrik in der Navigation nicht sichtbar hervorgehoben wird, kann es sein, dass der Nutzer gar nicht mitbekommt, dass die gewünschte Seite schon aufgerufen wurde. In Abb. 1.7 können Sie nachvollziehen, wie wenig aussagekräftig ein solcher Seiteneinstieg sein und wie dem leicht abgeholfen werden kann.

Positiv- und Negativ-Beispiel eines Headerbereichs im mobilen Internet
Abb. 1.7 Links: Schematische Darstellung eines Screens, bei dem im sichtbaren Bereich immer nur die Navigation angezeigt wurde, ohne Hinweis darauf, um was es auf der Webseite geht, oder welche Unterseite aktuell geöffnet ist. Mitte: die Suche kann in ein Klappmenü umziehen. Rechts: das geöffnete Formular.

Links zum Buch


Produkt Bei Amazon erhältlich! KundeSpringer Gabler Verlag ProjektDieses Buch war ein lang gehegter Traum, jetzt ist es da! Anhand verschiedener Beispiele zeige ich wie das mobile Internet mit wenigen Kniffen in der visuellen Struktur so verändert werden kann dass es für den Nutzer leichter zu bedienen wird. ZeitraumMärz 2019 Meine AufgabeText und Illustrationen IllustrationAnnika Brinkmann – Strukturzeichnungen nach existierenden Beispielen Text und RedaktionAnnika Brinkmann UmsetzungSpringer Gabler Verlag