• 8 months ago / Charlotte Block

Webseiten gestalten mit KI: TheGrid.io

Test und Fazit: TheGrid.io

2017 beginnt super für uns! Ab morgen werden uns täglich ab 9 Uhr mit der Gestaltung unserer neu gewonnenen Freizeit beschäftigen.

Wer unsere Arbeit übernimmt? Die Bots! Die KIs! Okay. Vielleicht müssen wir doch den einen oder anderen Kollegen für die Kommunikation mit unseren Auftraggebern abstellen, darin sind die virtuellen Kollegen noch nicht ganz so gut.

Aber Spaß beiseite, nicht erst seit dem Webby Talk im Oktober diskutieren wir darüber wie sich unsere Arbeit verändert. Gianfranco Chicco stellte in seinem Vortrag die These auf, dass Websites sich immer ähnlicher werden. Gleichzeitig gibt es immer mehr Anbieter fertiger Lösungen, die mit wenigen Klicks die Erstellung absolut hochwertiger und moderner Internetseiten bzw. Shops ermöglichen.

Wozu also noch viel Aufwand in eine Designexploration stecken, wenn am Ende doch alle Websites gleich aussehen oder man auch einfach ein fertiges Template verwenden könnte? Diese Frage müssen wir uns ehrlich stellen, wenn wir unseren Auftraggebern ein faires Angebot machen wollen – und uns nicht über kurz oder lang darüber wundern wollen, dass unsere Professionen ausgestorben sind. Deshalb beschäftigen wir uns regelmäßig mit neuen Anbietern am Markt. Als erstes möchten wir hier „The Grid“ vorstellen.

TheGrid.io – in der Cloud zu Hause

„The Grid“ ist ein cloud-basierter Website-Builder, der Internetseiten mithilfe seiner KI „Molly“ gestaltet.  „Add content, Molly does the rest, you profit“ – Eine KI, die eine Website selbst designt? Einfach Inhalte hochladen und „Molly“ kümmert sich um den Rest? Diese Idee hat vor allem während der Crowdfunding-Phase Wellen geschlagen. Ein mehrfach verschobener Launch und lange Wartezeiten von bis zu zwei Jahren schürten die Erwartungshaltung (und auch den Unmut der Investoren) weiter.

Die Beschreibung der genauen Funktionsweise der KI bleibt diffus. Baut sie eine eigene Sitemap und priorisiert die Inhalte? Wie gestaltet sie tatsächlich die Seite? Es ist sogar von Shopping-Funktionalitäten die Rede. Klingt super! Doch wie funktioniert das im Detail?

In zwei Schritten zur kompletten Website?

Einfach gesagt gestaltet „Molly“ nach dem Trial-and-Error-Prinzip. Es wird jeweils ein erster Vorschlag zu Themen wie Layout, Farbe und Typographie gezeigt, den der Nutzer dann bewertet: Gefällt er? Dann wird weiter damit gearbeitet. Fällt er durch? Dann wird eine neue Variante vorgeschlagen ... solange bis der Nutzer mit dem Ergebnis zufrieden ist. So kann das Design nach und nach verfeinert werden.

Im nächsten Schritt können Inhalte hochgeladen werden. Hier gibt es tatsächlich die Möglichkeit das im Paket zu tun, aber es wird schnell klar, dass „The Grid“ wie ein Blog funktioniert. Der Fokus liegt auf der Darstellung visuell getriebener Inhalte in Form eines chronologischen Feeds.
Bei Bedarf können auch umfangreichere Textinhalte veröffentlicht werden.

Das Schöne dabei ist, dass der Artikel-Editor vom ehemaligen Lead-Designer von medium.com gestaltet wurde, sodass Nutzer sich über eine reduzierte und gut gestaltete Redaktionsoberfläche freuen können.

Die dritte Möglichkeit der Inhaltserstellung ist der automatische Import von auf anderen Seiten publizierten Inhalten. Dazu gibt man einfach eine URL (z.B. zu einem Artikel) an und die Inhalte werden extrahiert bzw. ein entsprechender Teaser wird auf der Seite veröffentlicht.

Und wo ist jetzt die KI?

Soweit so gut. Das fühlt sich bisher alles eher nach Blog mit extravaganter Pflegeoberfläche an. Wo ist also nun die viel besprochene Intelligenz? Durch die chronologische Struktur der Inhalte fließt sie zumindest nicht in die Informationsarchitektur. Ob und wie die KI lernt, was gefällt oder nicht, bleibt auch unklar.

„Molly“ kommt laut den Entwicklern vor allen Dingen bei der Darstellung der Inhalte auf der Seite zum Zuge. Statt wie bei einem klassischen Blog jeden Inhalt in gleicher Form darzustellen, wird automatisch eine individuelle Darstellungsform gewählt, die zu dem veröffentlichten Inhaltstyp passt. Dazu wird z. B. das Motiv des hochgeladenen Bildes analysiert, automatisch Farbwerte extrahiert, Text passend auf Motiven platziert und dafür gesorgt, dass die Teaser abwechslungsreich wirken. Durch die Systematisierung von Designregeln (kein Text auf unruhigen Bildpartien, Farbharmonien, Einhalten von Kontrasten, Beschnitt passend zum Bildmotiv ...) werden Variationen erschaffen, so die Entwickler.

Diese Intelligenz tatsächlich nachzuvollziehen ist sehr schwer, da man abgesehen von den grundlegenden Layout-Konfigurationen bei der Darstellung der Inhalte auf den Seiten mit dem zufrieden zu sein hat, was „Molly“ generiert. Es ist zum Beispiel nicht möglich, einen einzelnen Teaser durch eine Variante zu ersetzen, wenn er nicht gefällt. Die Seiten wirken dadurch wie ein Blog mit einer Vielzahl unterschiedlich farbiger randomisiert eingesetzter Teaser-Varianten. Wer chronologisch Inhalte wie Fotos oder zum Beispiel Projektreferenzen veröffentlichen möchte, kann nach diesem Prinzip eine halbwegs ansehnliche Seite publizieren, wenn die entsprechende Qualität der Inhalte gegeben ist.

Der Horizont ist schnell erreicht

Weicht man von dieser Grundsystematik ab, stößt man schnell an die Grenzen des Systems.

Wie bereits erwähnt ist nur eine sehr flache Informationsarchitektur vorgesehen. Neben der Startseite mit dem Feed können weitere Navigationspunkte angelegt werden, die aber nur auf einfache Inhaltsseiten oder einen externen Link verweisen können.

Auch ist es nicht möglich, Inhalte verschiedenen Kategorien zuzuordnen und so mehrere Feeds zu den Kategorien darzustellen, was eine Standard-Funktion eines jeden Blogs ist. Eine zweite Inhaltsebene ist ebenfalls nicht vorgesehen.

Bei weiteren funktionalen Erweiterungen setzt „The Grid“ auf schmale Lösungen der Startup-Szene und Integration fertiger Systeme.

Um eine Shopping-Funktionalität umzusetzen, ist die Verwendung einer bestehenden Shopping bzw. Payment-Lösung wie Shopify, Etsy etc. nötig. Produktauswahl und Checkout-Prozess können zum Beispiel mit einem Formular von Typeform umgesetzt werden. Eine schlanke Lösung, die das Anbieten einer Handvoll Produkte absolut angemessen ermöglicht.

Auch Formulare werden über externe Anbieter umgesetzt, so können z. B. Google Forms oder Wufoo Formulare integriert werden.

Vertraut man also den entsprechenden Anbietern, ist mit deren Konditionen und Datenschutzbedingungen einverstanden, lassen sich schmale Seiten z.B. mit einem Kontaktformular und wenigen Produkten gut umsetzen. Alle weiterführenden Funktionen wie z. B. eine Suche oder interaktive Beratungstools sind nicht vorgesehen oder müssen über iFrames integriert werden.

SEO und Codequalität

„The Grid“ verspricht eine suchmaschinenoptimierte Seite. Grundsätzlich sind auch die meisten notwendigen Einstellungsmöglichkeiten vorhanden, deren Pflege liegt aber ganz in der Verantwortung des Nutzers. Man muss also wissen, was man tut, um auch tatsächlich besser in den Suchergebnissen platziert zu werden. Eine Erinnerungsfunktion für essentiell notwendige Optimierungen wie Alt-Tags o. ä. wäre hier gerade für die Zielgruppe der Laien wünschenswert gewesen. Meta-Tags im Seitenheader können leider nicht gepflegt werden.

„The Grid“ baut auf der REACT Architektur von Facebook auf. Der initiale Zustand ("initial State") der React-Anwendung ist zudem als Base64 encodiertes JSON im HTML enthalten und schlägt in unserem Test mit rund 180KB zu buchen, es sind aber auch Seiten mit deutlich größeren Datenmengen aufgefallen. Dadurch entsteht ein großer Overhead an Daten und JavaScript, obwohl die Layouts kaum dynamische oder interaktive Elemente verwenden.

Die Kompression der Bilder scheint nicht immer einwandfrei zu funktionieren, denn bei den veröffentlichten Seiten fallen teilweise extrem hohe Ladezeiten auf - insbesondere bei mobilen Auflösungen ein großes Manko.

Teilweise ist das HTML der Seite nicht W3C konform. Eine Schwachstelle, die ehrlicherweise aber viele CMS und Site-Builder aufweisen und von modernen Browsern trotzdem korrekt interpretiert wird. Wichtig ist außerdem zu wissen, dass alle Inhalte der Seite öffentlich zugänglich auf GitHub landen, wenn man auf Revisionen zugreifen möchte.

Fazit

„The Grid“ glänzt vor allem Dingen durch gute PR. In Interviews gibt man sich sehr visionär.  Es scheint sehr viel Energie in die automatisierte Analyse der Inhalte zu fließen, was sich beim Speichern von Änderungen in der Redaktionsoberfläche vor allem durch lange Wartezeiten bemerkbar macht. Leider schlagen sich diese Ambitionen aber nicht in den Ergebnissen wieder. Man sucht lange, um halbwegs ansehnliche Beispiele für mit „The Grid“ erstellte Websites zu finden. Inwieweit eine Automatisierung von Designregeln als tatsächliche Intelligenz zu bezeichnen ist, lässt sich darüber hinaus sicher auch diskutieren.

Entscheidet man sich dazu, eine Seite mit „The Grid“ zu bauen, muss man sich voll und ganz auf die Denkweise des Website-Builders einlassen. Das heißt: vorgegebene inhaltliche Struktur, keine aktiven Designentscheidungen und ein begrenzter funktionaler Umfang

Die Plattform ist vor allem auf Laien zugeschnitten, die z. B. ein Portfolio oder Fotos online stellen wollen. Entspricht die Qualität der Inhalte aber nicht voll und ganz dem Designanspruch des Templates, wirken die Seiten zusammenhangslos und zufällig, teilweise sogar fehlerhaft. Möchte man bestehende Inhalte einer Seite migrieren oder eine einfache Seite nachbauen, scheitert man schnell.

Wir haben das Experiment mit „The Grid“ gestartet, um zu prüfen, ob wir damit zum Beispiel einfache kleinere Seiten für unsere Auftraggeber umsetzen könnten. Für einen Blog mag das eine Option sein, aber schon hier ist fraglich, ob mit den Template-Konfiguration ausreichend das Corporate Design angelehnt werden kann. Selbst wenn man die mangelnde Entscheidungsgewalt über Designdetails akzeptiert, erscheint es schwer, Seiten mit einem differenzierten Anspruch an Nutzerführung oder Konversion mit dem System umzusetzen.

Davon losgelöst ist die Grundidee von „The Grid“ eine sehr spannende. Unsere Arbeit wird sich durch Automatismen mehr und mehr verlagern. Aber wie so oft scheint auch hier die technische Umsetzung noch nicht da angelangt zu sein, wo die Vision hin will. Wir sind gespannt, was die Zukunft bringt.